[WIP] Adding confirmation box when delete database

admin/package-lock.json

@@ -3444,6 +3444,11 @@
                 "is-symbol": "^1.0.2"
             }
         },
+        "es6-object-assign": {
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/es6-object-assign/-/es6-object-assign-1.1.0.tgz",
+            "integrity": "sha1-wsNYJlYkfDnqEHyx5mUrb58kUjw="
+        },
         "es6-templates": {
             "version": "0.2.3",
             "resolved": "https://registry.npmjs.org/es6-templates/-/es6-templates-0.2.3.tgz",
@@ -7119,6 +7124,11 @@
             "integrity": "sha1-mEcocL8igTL8vdhoEputEsPAKeM=",
             "dev": true
         },
+        "promise-polyfill": {
+            "version": "6.1.0",
+            "resolved": "https://registry.npmjs.org/promise-polyfill/-/promise-polyfill-6.1.0.tgz",
+            "integrity": "sha1-36lpQ+qcEh/KTem1hoyznTRy4Fc="
+        },
         "proxy-addr": {
             "version": "2.0.6",
             "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.6.tgz",
@@ -8540,6 +8550,20 @@
                 "util.promisify": "~1.0.0"
             }
         },
+        "sweetalert": {
+            "version": "2.1.2",
+            "resolved": "https://registry.npmjs.org/sweetalert/-/sweetalert-2.1.2.tgz",
+            "integrity": "sha512-iWx7X4anRBNDa/a+AdTmvAzQtkN1+s4j/JJRWlHpYE8Qimkohs8/XnFcWeYHH2lMA8LRCa5tj2d244If3S/hzA==",
+            "requires": {
+                "es6-object-assign": "^1.1.0",
+                "promise-polyfill": "^6.0.2"
+            }
+        },
+        "sweetalert2": {
+            "version": "10.8.1",
+            "resolved": "https://registry.npmjs.org/sweetalert2/-/sweetalert2-10.8.1.tgz",
+            "integrity": "sha512-CRTy1fODxSqX6sGYMP4/9TT1QXlsjElRA4xoJVoCWa8L39l8jBwh/DWOFPb5Re1+EMTqOexDrT38jP0GI/DLZQ=="
+        },
         "tapable": {
             "version": "1.1.3",
             "resolved": "https://registry.npmjs.org/tapable/-/tapable-1.1.3.tgz",
@@ -9143,6 +9167,14 @@
                 "loader-utils": "^1.0.2"
             }
         },
+        "vue-sweetalert2": {
+            "version": "4.1.1",
+            "resolved": "https://registry.npmjs.org/vue-sweetalert2/-/vue-sweetalert2-4.1.1.tgz",
+            "integrity": "sha512-9ytddeXkjixIGzUxgmVAVdIOrbPiWcjEPQuO3mEPq4zc8clbQbhOn192zvYUdcM0SbRPzbafyXTFx9mNMNJzQA==",
+            "requires": {
+                "sweetalert2": "10.x"
+            }
+        },
         "vue-template-compiler": {
             "version": "2.6.12",
             "resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.6.12.tgz",

admin/package.json

@@ -22,5 +22,9 @@
         "sass-loader": "^8.0.0",
         "vue": "^2.5.17",
         "vue-template-compiler": "^2.6.10"
+    },
+    "dependencies": {
+        "sweetalert": "^2.1.2",
+        "vue-sweetalert2": "^4.1.1"
     }
 }

admin/resources/js/app.js

@@ -6,6 +6,9 @@
 
 require('./bootstrap');
 
+import Vue from 'vue';
+import VueSweetalert2 from 'vue-sweetalert2';
+
 window.Vue = require('vue');
 
 /**
@@ -18,7 +21,7 @@ window.Vue = require('vue');
 
 // const files = require.context('./', true, /\.vue$/i)
 // files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default))
-
+Vue.use(VueSweetalert2);
 Vue.component('example-component', require('./components/ExampleComponent.vue').default);
 Vue.component('admins-component', require('./components/admin/AdminsComponent.vue').default);
 Vue.component('users-component', require('./components/admin/UsersComponent.vue').default);

admin/resources/js/components/admin/AdminerDatabasesComponent.vue

@@ -90,11 +90,30 @@ export default {
                 .then(res => this.loadData());
         },
         deleteData(id) {
-            console.log(id);
+            this.$swal.fire({
+                title: 'Are you sure?',
+                text: 'Data will be deleted permanently',
+                icon: 'warning',
+                showCancelButton: true,
+                confirmButtonColor: '#3085d6',
+                cancelButtonColor: '#d33',
+                confirmButtonText: 'Confirm',
+                cancelButtonText: 'Cancel'
+            }).then((result) => {
+                if(result.value) {
+                    this.$swal.fire({
+                        title: 'Success!',
+                        text: 'Article deleted successfully',
+                        icon: 'success',
+                        timer: 10000
+                    });
                     axios.delete(this.admins_uri + '/' + id)
                     .then(res=> this.loadData());
                     let index = this.adminer_databases.indexOf(this.db_name);
                     this.adminer_databases.splice(index, 1);
+
+                }
+            })
         }
     },
     mounted() {