# HG changeset patch
# User Fadi Abbud <fadi.abbud@intevation.de>
# Date 1632481825 -7200
# Node ID 36cbf14b878a8fd2192e1a73d74ce5b29669d29c
# Parent  29af073c824d028173c9b203c85d1601817afdf5
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.

diff -r 29af073c824d -r 36cbf14b878a client/src/components/ui/UIBoxHeader.vue
--- 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>
diff -r 29af073c824d -r 36cbf14b878a client/src/components/usermanagement/Usermanagement.vue
--- 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}`,