Mercurial > gemma
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;