Mercurial > gemma

comparison client/src/components/usermanagement/Usermanagement.vue @ 5509:36cbf14b878a deactivate-users

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Client: Add ability to list only active users * Adjust the "UIBoxHeader.vue" component to accept "checkbox" object which displays checkbox element in the header if it passed from the parent components. * Filter users according to the checked value from the checkbox. * Checkbox for hiding inactive users is only visible if there is at least one deactivated user.
author Fadi Abbud <fadi.abbud@intevation.de>
date Fri, 24 Sep 2021 13:10:25 +0200
parents 279900b28b1b
children b7792e8d5c62
comparison
equal deleted inserted replaced
5508:29af073c824d 5509:36cbf14b878a
2 <div class="main d-flex flex-row" style="position: relative;"> 2 <div class="main d-flex flex-row" style="position: relative;">
3 <Spacer /> 3 <Spacer />
4 <div class="d-flex content py-2"> 4 <div class="d-flex content py-2">
5 <div :class="userlistStyle"> 5 <div :class="userlistStyle">
6 <div class="card shadow-xs"> 6 <div class="card shadow-xs">
7 <UIBoxHeader icon="users-cog" :title="usersLabel" /> 7 <UIBoxHeader
8 icon="users-cog"
9 :title="usersLabel"
10 :checkBox="checkboxObject"
11 />
8 <UITableHeader 12 <UITableHeader
9 :columns="[ 13 :columns="[
10 { id: 'role', title: `${roleForColumLabel}`, class: 'col-1' }, 14 { id: 'role', title: `${roleForColumLabel}`, class: 'col-1' },
11 { id: 'user', title: `${usernameLabel}`, class: 'col-4' }, 15 { id: 'user', title: `${usernameLabel}`, class: 'col-4' },
12 { id: 'country', title: `${countryLabel}`, class: 'col-1' }, 16 { id: 'country', title: `${countryLabel}`, class: 'col-1' },
13 { id: 'email', title: `${emailLabel}`, class: 'col-3' }, 17 { id: 'email', title: `${emailLabel}`, class: 'col-3' },
14 { id: 'reports', title: `${reportsLabel}`, class: 'col-1' } 18 { id: 'reports', title: `${reportsLabel}`, class: 'col-1' }
15 ]" 19 ]"
16 /> 20 />
17 <UITableBody 21 <UITableBody
18 :data="users | sortTable(sortColumn, sortDirection, page, pageSize)" 22 :data="
23 usersForTable
24 | sortTable(sortColumn, sortDirection, page, pageSize)
25 "
19 :isActive="item => item === currentUser" 26 :isActive="item => item === currentUser"
20 maxHeight="47rem" 27 maxHeight="47rem"
21 > 28 >
22 <template v-slot:row="{ item: user }"> 29 <template v-slot:row="{ item: user }">
23 <div 30 <div
167 name: "userview", 174 name: "userview",
168 mixins: [sortTable], 175 mixins: [sortTable],
169 data() { 176 data() {
170 return { 177 return {
171 sortColumn: "user", // overriding the sortTable mixin's empty default value 178 sortColumn: "user", // overriding the sortTable mixin's empty default value
172 reportToggled: false 179 reportToggled: false,
180 usersForTable: [],
181 areSomeUsersHidden: false
173 }; 182 };
174 }, 183 },
175 components: { 184 components: {
176 Userdetail: () => import("./Userdetail"), 185 Userdetail: () => import("./Userdetail"),
177 Spacer: () => import("@/components/Spacer") 186 Spacer: () => import("@/components/Spacer")
206 }, 215 },
207 emailLabel() { 216 emailLabel() {
208 return this.$gettext("Email"); 217 return this.$gettext("Email");
209 }, 218 },
210 pages() { 219 pages() {
211 return Math.ceil(this.users.length / this.pageSize); 220 return Math.ceil(this.usersForTable.length / this.pageSize);
212 }, 221 },
213 tableStyle() { 222 tableStyle() {
214 return { 223 return {
215 table: true, 224 table: true,
216 "table-hover": true, 225 "table-hover": true,
225 { 234 {
226 userlistsmall: this.isUserDetailsVisible, 235 userlistsmall: this.isUserDetailsVisible,
227 userlistextended: !this.isUserDetailsVisible 236 userlistextended: !this.isUserDetailsVisible
228 } 237 }
229 ]; 238 ];
239 },
240 checkboxObject() {
241 // Hide checkbox in case there are no deactivated users
242 if (this.users.some(u => !u.active)) {
243 return {
244 value: this.areSomeUsersHidden,
245 label: "Hide inactive users",
246 callback: () => {
247 this.changeDisplayingState();
248 }
249 };
250 } else {
251 return undefined;
252 }
230 } 253 }
231 }, 254 },
255 watch: {
256 users() {
257 this.filterUsers();
258 }
259 },
260 mounted() {
261 this.usersForTable = this.users;
262 },
232 methods: { 263 methods: {
264 changeDisplayingState() {
265 this.areSomeUsersHidden = !this.areSomeUsersHidden;
266 this.filterUsers();
267 },
268 filterUsers() {
269 if (this.areSomeUsersHidden) {
270 this.usersForTable = this.users.filter(u => u.active);
271 } else {
272 this.usersForTable = this.users;
273 }
274 },
233 toggleReport(user) { 275 toggleReport(user) {
234 HTTP.patch( 276 HTTP.patch(
235 `/users/${user.user}`, 277 `/users/${user.user}`,
236 { 278 {
237 reports: user.reports 279 reports: user.reports