Mercurial > gemma

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

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
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
comparison
equal deleted inserted replaced
2121:bd4370badbf7 2122:2cec685c6519
56 </th> 56 </th>
57 <th scope="col"></th> 57 <th scope="col"></th>
58 </tr> 58 </tr>
59 </thead> 59 </thead>
60 <tbody> 60 <tbody>
61 <tr 61 <tr v-for="user in users" :key="user.user">
62 v-for="user in users" 62 <td @click="selectUser(user.user)">{{ user.user }}</td>
63 :key="user.user" 63 <td @click="selectUser(user.user)">{{ user.country }}</td>
64 @click="selectUser(user.user)" 64 <td @click="selectUser(user.user)">{{ user.email }}</td>
65 > 65 <td @click="selectUser(user.user)">
66 <td>{{ user.user }}</td>
67 <td>{{ user.country }}</td>
68 <td>{{ user.email }}</td>
69 <td>
70 <font-awesome-icon 66 <font-awesome-icon
71 v-tooltip="roleLabel(user.role)" 67 v-tooltip="roleLabel(user.role)"
72 :icon="roleIcon(user.role)" 68 :icon="roleIcon(user.role)"
73 ></font-awesome-icon> 69 ></font-awesome-icon>
74 </td> 70 </td>
75 <td> 71 <td>
76 <font-awesome-icon 72 <font-awesome-icon
77 icon="trash" 73 icon="trash"
78 @click="deleteUser(user.user)" 74 @click="showDeleteUserPrompt = true; userToDelete = user.user"
79 ></font-awesome-icon> 75 ></font-awesome-icon>
80 </td> 76 </td>
81 </tr> 77 </tr>
82 </tbody> 78 </tbody>
83 </table> 79 </table>
110 class="d-flex userdetails" 106 class="d-flex userdetails"
111 v-if="isUserDetailsVisible" 107 v-if="isUserDetailsVisible"
112 ></Userdetail> 108 ></Userdetail>
113 </div> 109 </div>
114 </div> 110 </div>
111
112 <div
113 :class="[
114 'box popup ui-element rounded bg-white',
115 { show: showDeleteUserPrompt }
116 ]"
117 >
118 <div>
119 <h6 class="mb-0 py-2 px-3 border-bottom d-flex align-items-center">
120 <font-awesome-icon icon="trash" class="mr-2"></font-awesome-icon>
121 <translate>Delete user</translate>
122 <font-awesome-icon
123 icon="times"
124 class="ml-auto text-muted"
125 @click="showDeleteUserPrompt = false;"
126 ></font-awesome-icon>
127 </h6>
128 <div class="p-3 text-left">
129 <translate class="text-center d-block">Do you really want to delete the following user account:</translate>
130 <h5 class="mt-3 text-center">{{ userToDelete }}</h5>
131 </div>
132 <div class="py-2 px-3 border-top d-flex align-items-center justify-content-between">
133 <button
134 class="btn btn-sm btn-warning"
135 @click="showDeleteUserPrompt = false;">
136 no
137 </button>
138 <button
139 class="btn btn-sm btn-info"
140 @click="deleteUser(userToDelete)">
141 yes
142 </button>
143 </div>
144 </div>
145 </div>
115 </div> 146 </div>
116 </template> 147 </template>
117 148
118 <style lang="scss"> 149 <style lang="scss">
119 @import "@/assets/tooltip.scss"; 150 @import "@/assets/tooltip.scss";
208 name: "userview", 239 name: "userview",
209 data() { 240 data() {
210 return { 241 return {
211 sortCriterion: "user", 242 sortCriterion: "user",
212 pageSize: 20, 243 pageSize: 20,
213 currentPage: 1 244 currentPage: 1,
245 userToDelete: "",
246 showDeleteUserPrompt: false
214 }; 247 };
215 }, 248 },
216 components: { 249 components: {
217 Userdetail: () => import("./Userdetail"), 250 Userdetail: () => import("./Userdetail"),
218 Spacer: () => import("@/components/Spacer") 251 Spacer: () => import("@/components/Spacer")
288 }, 321 },
289 deleteUser(name) { 322 deleteUser(name) {
290 this.$store 323 this.$store
291 .dispatch("usermanagement/deleteUser", { name: name }) 324 .dispatch("usermanagement/deleteUser", { name: name })
292 .then(() => { 325 .then(() => {
326 this.showDeleteUserPrompt = false;
293 this.submitted = false; 327 this.submitted = false;
294 this.$store.dispatch("usermanagement/loadUsers").catch(error => { 328 this.$store.dispatch("usermanagement/loadUsers").catch(error => {
295 const { status, data } = error.response; 329 const { status, data } = error.response;
296 displayError({ 330 displayError({
297 title: this.$gettext("Backend Error"), 331 title: this.$gettext("Backend Error"),