Mercurial > gemma
comparison client/src/components/usermanagement/Usermanagement.vue @ 5510:b7792e8d5c62 deactivate-users
Client: Improve users-table layout
* Make editing/reactivating of users more recognizable by adding a reactive/edit button to the action column, that behaves according to the user's status(active,inactive).
* Disable clicking the other cells for editing user.
author | Fadi Abbud <fadi.abbud@intevation.de> |
---|---|
date | Wed, 29 Sep 2021 17:10:42 +0200 |
parents | 36cbf14b878a |
children | 84d01a536bec |
comparison
equal
deleted
inserted
replaced
5509:36cbf14b878a | 5510:b7792e8d5c62 |
---|---|
28 > | 28 > |
29 <template v-slot:row="{ item: user }"> | 29 <template v-slot:row="{ item: user }"> |
30 <div | 30 <div |
31 class="table-cell center col-1" | 31 class="table-cell center col-1" |
32 :style="{ opacity: user.active ? '1' : '0.7' }" | 32 :style="{ opacity: user.active ? '1' : '0.7' }" |
33 @click="selectUser(user.user)" | |
34 > | 33 > |
35 <font-awesome-icon | 34 <font-awesome-icon |
36 v-tooltip="roleLabel(user.role)" | 35 v-tooltip="roleLabel(user.role)" |
37 :icon="roleIcon(user.role)" | 36 :icon="roleIcon(user.role)" |
38 class="fa-lg" | 37 class="fa-lg" |
39 /> | 38 /> |
40 </div> | 39 </div> |
41 <div | 40 <div |
42 class="table-cell col-4" | 41 class="table-cell col-4" |
43 @click="selectUser(user.user)" | |
44 :style="{ opacity: user.active ? '1' : '0.7' }" | 42 :style="{ opacity: user.active ? '1' : '0.7' }" |
45 > | 43 > |
46 {{ user.user }} | 44 {{ user.user }} |
47 </div> | 45 </div> |
48 <div | 46 <div |
49 :style="{ opacity: user.active ? '1' : '0.7' }" | 47 :style="{ opacity: user.active ? '1' : '0.7' }" |
50 class="table-cell center col-1" | 48 class="table-cell center col-1" |
51 @click="selectUser(user.user)" | |
52 > | 49 > |
53 {{ user.country }} | 50 {{ user.country }} |
54 </div> | 51 </div> |
55 <div | 52 <div |
56 class="table-cell col-3" | 53 class="table-cell col-3" |
57 @click="selectUser(user.user)" | |
58 :style="{ opacity: user.active ? '1' : '0.7' }" | 54 :style="{ opacity: user.active ? '1' : '0.7' }" |
59 > | 55 > |
60 {{ user.email }} | 56 {{ user.email }} |
61 </div> | 57 </div> |
62 <div class="table-cell center col-1"> | 58 <div class="table-cell center col-1"> |
72 :disabled="!user.active" | 68 :disabled="!user.active" |
73 :height="20" | 69 :height="20" |
74 /> | 70 /> |
75 </div> | 71 </div> |
76 <div class="table-cell col text-right justify-content-end"> | 72 <div class="table-cell col text-right justify-content-end"> |
73 <button | |
74 @click="selectUser(user.user)" | |
75 class="btn btn-xs btn-dark mr-1" | |
76 v-tooltip="getEditLabel(user.active)" | |
77 > | |
78 <font-awesome-icon | |
79 v-if="user.active" | |
80 icon="pencil-alt" | |
81 fixed-width | |
82 /> | |
83 <font-awesome-icon v-else icon="undo" fixed-width /> | |
84 </button> | |
77 <button | 85 <button |
78 @click="sendTestMail(user.user)" | 86 @click="sendTestMail(user.user)" |
79 class="btn btn-xs btn-dark mr-1" | 87 class="btn btn-xs btn-dark mr-1" |
80 v-tooltip="sendMailLabel" | 88 v-tooltip="sendMailLabel" |
81 v-if="user.email" | 89 v-if="user.email" |
259 }, | 267 }, |
260 mounted() { | 268 mounted() { |
261 this.usersForTable = this.users; | 269 this.usersForTable = this.users; |
262 }, | 270 }, |
263 methods: { | 271 methods: { |
272 getEditLabel(active) { | |
273 if (active) return this.$gettext("Edit user"); | |
274 return this.$gettext("Reactivate user"); | |
275 }, | |
264 changeDisplayingState() { | 276 changeDisplayingState() { |
265 this.areSomeUsersHidden = !this.areSomeUsersHidden; | 277 this.areSomeUsersHidden = !this.areSomeUsersHidden; |
266 this.filterUsers(); | 278 this.filterUsers(); |
267 }, | 279 }, |
268 filterUsers() { | 280 filterUsers() { |