Mercurial > gemma
changeset 5509:36cbf14b878a deactivate-users
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 | 29af073c824d |
children | b7792e8d5c62 |
files | client/src/components/ui/UIBoxHeader.vue client/src/components/usermanagement/Usermanagement.vue |
diffstat | 2 files changed, 60 insertions(+), 5 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/ui/UIBoxHeader.vue Thu Sep 23 17:33:07 2021 +0200 +++ b/client/src/components/ui/UIBoxHeader.vue Fri Sep 24 13:10:25 2021 +0200 @@ -10,6 +10,18 @@ {{ title }} </span> <div class="d-flex flex-row"> + <span class="box-control" v-if="checkBox" style="cursor: default;"> + <input + type="checkbox" + style="cursor: pointer;" + class="align-self-center" + :checked="checkBox.value" + @change="checkBox.callback" + /> + <span class="ml-1 small"> + {{ checkBox.label }} + </span> + </span> <span class="box-control" v-for="(action, index) in actions" @@ -75,7 +87,8 @@ title: String, closeCallback: Function, actions: Array, - small: Boolean + small: Boolean, + checkBox: Object } }; </script>
--- a/client/src/components/usermanagement/Usermanagement.vue Thu Sep 23 17:33:07 2021 +0200 +++ b/client/src/components/usermanagement/Usermanagement.vue Fri Sep 24 13:10:25 2021 +0200 @@ -4,7 +4,11 @@ <div class="d-flex content py-2"> <div :class="userlistStyle"> <div class="card shadow-xs"> - <UIBoxHeader icon="users-cog" :title="usersLabel" /> + <UIBoxHeader + icon="users-cog" + :title="usersLabel" + :checkBox="checkboxObject" + /> <UITableHeader :columns="[ { id: 'role', title: `${roleForColumLabel}`, class: 'col-1' }, @@ -15,7 +19,10 @@ ]" /> <UITableBody - :data="users | sortTable(sortColumn, sortDirection, page, pageSize)" + :data=" + usersForTable + | sortTable(sortColumn, sortDirection, page, pageSize) + " :isActive="item => item === currentUser" maxHeight="47rem" > @@ -169,7 +176,9 @@ data() { return { sortColumn: "user", // overriding the sortTable mixin's empty default value - reportToggled: false + reportToggled: false, + usersForTable: [], + areSomeUsersHidden: false }; }, components: { @@ -208,7 +217,7 @@ return this.$gettext("Email"); }, pages() { - return Math.ceil(this.users.length / this.pageSize); + return Math.ceil(this.usersForTable.length / this.pageSize); }, tableStyle() { return { @@ -227,9 +236,42 @@ userlistextended: !this.isUserDetailsVisible } ]; + }, + checkboxObject() { + // Hide checkbox in case there are no deactivated users + if (this.users.some(u => !u.active)) { + return { + value: this.areSomeUsersHidden, + label: "Hide inactive users", + callback: () => { + this.changeDisplayingState(); + } + }; + } else { + return undefined; + } } }, + watch: { + users() { + this.filterUsers(); + } + }, + mounted() { + this.usersForTable = this.users; + }, methods: { + changeDisplayingState() { + this.areSomeUsersHidden = !this.areSomeUsersHidden; + this.filterUsers(); + }, + filterUsers() { + if (this.areSomeUsersHidden) { + this.usersForTable = this.users.filter(u => u.active); + } else { + this.usersForTable = this.users; + } + }, toggleReport(user) { HTTP.patch( `/users/${user.user}`,