diff client/src/components/ui/UIBoxHeader.vue @ 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 c36940e53788
children ba014cc5f969
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>