diff client/src/components/usermanagement/Usermanagement.vue @ 2122:2cec685c6519

show confirm dialog when deleting user
author Markus Kottlaender <markus@intevation.de>
date Tue, 05 Feb 2019 13:55:59 +0100
parents 46d175097c22
children af136b1a854e
line wrap: on
line diff
--- a/client/src/components/usermanagement/Usermanagement.vue	Tue Feb 05 13:34:29 2019 +0100
+++ b/client/src/components/usermanagement/Usermanagement.vue	Tue Feb 05 13:55:59 2019 +0100
@@ -58,15 +58,11 @@
                   </tr>
                 </thead>
                 <tbody>
-                  <tr
-                    v-for="user in users"
-                    :key="user.user"
-                    @click="selectUser(user.user)"
-                  >
-                    <td>{{ user.user }}</td>
-                    <td>{{ user.country }}</td>
-                    <td>{{ user.email }}</td>
-                    <td>
+                  <tr v-for="user in users" :key="user.user">
+                    <td @click="selectUser(user.user)">{{ user.user }}</td>
+                    <td @click="selectUser(user.user)">{{ user.country }}</td>
+                    <td @click="selectUser(user.user)">{{ user.email }}</td>
+                    <td @click="selectUser(user.user)">
                       <font-awesome-icon
                         v-tooltip="roleLabel(user.role)"
                         :icon="roleIcon(user.role)"
@@ -75,7 +71,7 @@
                     <td>
                       <font-awesome-icon
                         icon="trash"
-                        @click="deleteUser(user.user)"
+                        @click="showDeleteUserPrompt = true; userToDelete = user.user"
                       ></font-awesome-icon>
                     </td>
                   </tr>
@@ -112,6 +108,41 @@
         ></Userdetail>
       </div>
     </div>
+    
+    <div
+      :class="[
+        'box popup ui-element rounded bg-white',
+        { show: showDeleteUserPrompt }
+      ]"
+    >
+      <div>
+        <h6 class="mb-0 py-2 px-3 border-bottom d-flex align-items-center">
+          <font-awesome-icon icon="trash" class="mr-2"></font-awesome-icon>
+          <translate>Delete user</translate>
+          <font-awesome-icon
+            icon="times"
+            class="ml-auto text-muted"
+            @click="showDeleteUserPrompt = false;"
+          ></font-awesome-icon>
+        </h6>
+        <div class="p-3 text-left">
+          <translate class="text-center d-block">Do you really want to delete the following user account:</translate>
+          <h5 class="mt-3 text-center">{{ userToDelete }}</h5>
+        </div>
+        <div class="py-2 px-3 border-top d-flex align-items-center justify-content-between">
+          <button
+            class="btn btn-sm btn-warning"
+            @click="showDeleteUserPrompt = false;">
+            no
+          </button>
+          <button
+            class="btn btn-sm btn-info"
+            @click="deleteUser(userToDelete)">
+            yes
+          </button>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -210,7 +241,9 @@
     return {
       sortCriterion: "user",
       pageSize: 20,
-      currentPage: 1
+      currentPage: 1,
+      userToDelete: "",
+      showDeleteUserPrompt: false
     };
   },
   components: {
@@ -290,6 +323,7 @@
       this.$store
         .dispatch("usermanagement/deleteUser", { name: name })
         .then(() => {
+          this.showDeleteUserPrompt = false;
           this.submitted = false;
           this.$store.dispatch("usermanagement/loadUsers").catch(error => {
             const { status, data } = error.response;