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() {