Mercurial > gemma
changeset 2122:2cec685c6519
show confirm dialog when deleting user
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Tue, 05 Feb 2019 13:55:59 +0100 |
parents | bd4370badbf7 |
children | cbdf5cb12e4b |
files | client/src/assets/application.scss client/src/components/usermanagement/Usermanagement.vue |
diffstat | 2 files changed, 62 insertions(+), 19 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/assets/application.scss Tue Feb 05 13:34:29 2019 +0100 +++ b/client/src/assets/application.scss Tue Feb 05 13:55:59 2019 +0100 @@ -81,12 +81,9 @@ max-height: 0; max-width: 0; overflow: hidden; - margin-left: 0; - margin-right: 0; - margin-bottom: 0; + margin: 0; box-shadow: $shadow-xs; - transition: max-width 0.4s, max-height 0.4s, margin-left 0.4s, - margin-right 0.4s, margin-bottom 0.4s; + transition: max-width 0.4s, max-height 0.4s, margin 0.4s; } .box h6, @@ -98,9 +95,21 @@ .expanded { max-height: 999px; max-width: 999px; - margin-left: 0.5rem; - margin-right: 0.5rem; - margin-bottom: 1rem; + margin: 0 0.5rem 1rem 0.5rem; +} + +.popup { + position: absolute; + top: 40%; + left: 50%; + margin-left: -150px; + width: 300px; + max-width: 300px; +} + +.popup.show { + margin: 0.5rem 0 0 -150px; + max-height: 999px; } // needed to fix the whitespace problem of
--- 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;