add dialog delete

pages/categories/index.vue

@@ -292,7 +292,7 @@
           <v-icon :id="item.id" small @click="dialog2 = true; editCategory(item)">
             mdi-pencil
           </v-icon>
-          <v-icon :id="item.id" small @click="dialogDelete = true;getID(item)">
+          <v-icon :id="item.id" small @click="dialogDelete = true; getID(item)">
             mdi-delete
           </v-icon>
           <v-icon :id="item.id" small @click="dialog3 = true; showCategory(item)">

pages/users/index.vue

@@ -11,11 +11,7 @@
         </v-breadcrumbs>
       </div>
       <!-- modal-create -->
-      <v-dialog
-        v-model="dialog2"
-        persistent
-        max-width="600px"
-      >
+      <v-dialog v-model="dialog2" persistent max-width="600px">
         <v-card>
           <v-card-title>
             <span class="text-h5">User Edit</span>
@@ -23,23 +19,11 @@
           <v-card-text>
             <v-container>
               <v-row>
-                <v-col
-                  cols="12"
-                  sm="6"
-                  md="4"
-                >
-                  <v-text-field
-                    v-model="eName"
-                    label="Legal name*"
-                    required
-                  />
+                <v-col cols="12" sm="6" md="4">
+                  <v-text-field v-model="eName" label="Legal name*" required />
                 </v-col>
                 <v-col cols="12">
-                  <v-text-field
-                    v-model="eEmail"
-                    label="Email*"
-                    required
-                  />
+                  <v-text-field v-model="eEmail" label="Email*" required />
                 </v-col>
                 <v-col cols="12">
                   <v-text-field
@@ -55,39 +39,68 @@
           </v-card-text>
           <v-card-actions>
             <v-spacer />
+            <v-btn color="blue darken-1" text @click="dialog2 = false">
+              Close
+            </v-btn>
             <v-btn
               color="blue darken-1"
               text
-              @click="dialog2 = false"
+              type="submit"
+              @click="
+                dialog2 = false;
+                updateUser();
+              "
             >
-              Close
+              Save
+            </v-btn>
+          </v-card-actions>
+        </v-card>
+      </v-dialog>
+      <!-- modal-delete -->
+      <v-dialog v-model="dialogDelete" max-width="500px">
+        <v-card>
+          <v-card-title class="text-h5">
+            Are you sure you want to delete this item?
+          </v-card-title>
+          <v-card-actions>
+            <v-spacer />
+            <v-btn color="blue darken-1" text @click="closeDelete">
+              Cancel
             </v-btn>
             <v-btn
               color="blue darken-1"
               text
-              type="submit"
-              @click="dialog2 = false; updateUser();"
+              @click="
+                deleteUser();
+                dialogDelete = false;
+              "
             >
-              Save
+              OK
             </v-btn>
+            <v-spacer />
           </v-card-actions>
         </v-card>
       </v-dialog>
-      <v-data-table :headers="headers" :items="users" sort-by="calories" class="elevation-1">
+      <v-data-table
+        :headers="headers"
+        :items="users"
+        sort-by="calories"
+        class="elevation-1"
+      >
         <template #top>
           <v-toolbar flat>
             <v-toolbar-title>User Manage</v-toolbar-title>
             <v-divider class="mx-4" inset vertical />
             <v-spacer />
             <v-toolbar-title style="float: right">
-              <v-dialog v-model="dialog1" persistent max-width="600px" @submit.prevent="createUser">
+              <v-dialog
+                v-model="dialog1"
+                persistent
+                max-width="600px"
+                @submit.prevent="createUser"
+              >
                 <template #activator="{ on, attrs }">
-                  <v-btn
-                    color="primary"
-                    dark
-                    v-bind="attrs"
-                    v-on="on"
-                  >
+                  <v-btn color="primary" dark v-bind="attrs" v-on="on">
                     New USER
                   </v-btn>
                 </template>
@@ -98,11 +111,7 @@
                   <v-card-text>
                     <v-container>
                       <v-row>
-                        <v-col
-                          cols="12"
-                          sm="6"
-                          md="4"
-                        >
+                        <v-col cols="12" sm="6" md="4">
                           <v-text-field
                             v-model="name"
                             label="Legal name*"
@@ -130,18 +139,17 @@
                   </v-card-text>
                   <v-card-actions>
                     <v-spacer />
-                    <v-btn
-                      color="blue darken-1"
-                      text
-                      @click="dialog1 = false"
-                    >
+                    <v-btn color="blue darken-1" text @click="dialog1 = false">
                       Close
                     </v-btn>
                     <v-btn
                       color="blue darken-1"
                       text
                       type="submit"
-                      @click="dialog1 = false; createUser();"
+                      @click="
+                        dialog1 = false;
+                        createUser();
+                      "
                     >
                       Save
                     </v-btn>
@@ -158,10 +166,25 @@
           <span>{{ formatDate(item.updated_at) }}</span>
         </template>
         <template #[`item.actions`]="{ item }">
-          <v-icon :id="item.id" small class="mr-2" @click="dialog2 = true; editUser(item);">
+          <v-icon
+            :id="item.id"
+            small
+            class="mr-2"
+            @click="
+              dialog2 = true;
+              editUser(item)
+            "
+          >
             mdi-pencil
           </v-icon>
-          <v-icon :id="item.id" small @click="deleteUser(item.id, item)">
+          <v-icon
+            :id="item.id"
+            small
+            @click="
+              dialogDelete = true;
+              getID(item)
+            "
+          >
             mdi-delete
           </v-icon>
         </template>
@@ -302,7 +325,9 @@ export default {
         .get('/users/', {
           headers: {
             'Content-Type': 'application/json',
-            Authorization: `Bearer ${this.$auth.$storage.getUniversal('token')}`
+            Authorization: `Bearer ${this.$auth.$storage.getUniversal(
+              'token'
+            )}`
           }
         })
         .then(response => (this.users = response.data.data.data))
@@ -313,16 +338,21 @@ export default {
     createUser () {
       const self = this
       this.$axios
-        .post('/users/', {
-          email: this.email,
-          password: this.password,
-          name: this.name
-        }, {
-          headers: {
-            'Content-Type': 'application/json',
-            Authorization: `Bearer ${this.$auth.$storage.getUniversal('token')}`
+        .post(
+          '/users/',
+          {
+            email: this.email,
+            password: this.password,
+            name: this.name
+          },
+          {
+            headers: {
+              'Content-Type': 'application/json',
+              Authorization: `Bearer ${this.$auth.$storage.getUniversal(
+                'token'
+              )}`
+            }
           }
-        }
         )
         .then((response) => {
           self.$toast.success('User created successfully!', {
@@ -342,23 +372,23 @@ export default {
           })
         })
     },
-    deleteUser (userID, index) {
+    deleteUser () {
       const self = this
-      this.editedIndex = this.users.indexOf(index)
-      if (confirm('Do you really want to delete?')) {
-        try {
-          this.$axios
-            .delete(`/users/${userID}`)
-            .then((response) => {
-              console.log(response.data)
-              this.users.splice(this.editedIndex, 1)
-              self.$toast.success('User deleted successfully!', {
-                duration: 3000
-              })
-            })
-        } catch (error) {
-          console.log(error)
-        }
+      const currentPostIndex = this.editedIndex
+      try {
+        this.$axios.delete(`/users/${this.eID}`, {
+          headers: {
+            Authorization: `Bearer ${this.$auth.$storage.getUniversal('token')}`
+          }
+        }).then((response) => {
+          console.log(response.data)
+          this.users.splice(currentPostIndex, 1)
+          self.$toast.success('User deleted successfully!', {
+            duration: 3000
+          })
+        })
+      } catch (error) {
+        console.log(error)
       }
     },
     editUser (user) {
@@ -374,7 +404,8 @@ export default {
       console.log(this.eEmail)
       console.log(this?.eID)
       this.$axios
-        .put(`/users/${this?.eID}`,
+        .put(
+          `/users/${this?.eID}`,
           {
             email: this.eEmail,
             password: this.ePassword,
@@ -383,7 +414,9 @@ export default {
           {
             headers: {
               'Content-Type': 'application/json',
-              Authorization: `Bearer ${this.$auth.$storage.getUniversal('token')}`
+              Authorization: `Bearer ${this.$auth.$storage.getUniversal(
+                'token'
+              )}`
             }
           }
         )
@@ -401,6 +434,10 @@ export default {
             duration: 3000
           })
         })
+    },
+    getID (item) {
+      this.eID = item.id
+      this.editedIndex = this.users.indexOf(item)
     }
   }
 }