Add lock/active filter to devices and users page

NHAS · Nov 23, 2024 · a390a34 · a390a34
1 parent 19cac18
commit a390a34
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 10 deletions.
diff --git a/adminui/frontend/src/pages/Devices.vue b/adminui/frontend/src/pages/Devices.vue
@@ -24,8 +24,13 @@ const filterText = ref('')
 
 const allDevices = computed(() => devicesStore.devices ?? [])
 
+
+const filterActive = ref(false)
+const filterLocked = ref(false)
+
+
 const filteredDevices = computed(() => {
-  const arr = allDevices.value
+  const arr = allDevices.value.filter(a => (a.active || !filterActive.value)).filter(a => a.is_locked || !filterLocked.value)
 
   if (filterText.value == '') {
     return arr
@@ -124,13 +129,21 @@ function sortDevices(by: keyof DeviceDTO) {
         <div class="card-body">
           <div class="flex flex-row justify-between">
             <div class="tooltip" data-tip="Create Registration Token">
-              <button class="btn btn-ghost btn-primary" @click="isCreateTokenModalOpen = true">Add Device
-                <font-awesome-icon :icon="Icons.Add" /></button>
+              <button class="btn btn-ghost btn-primary" @click="isCreateTokenModalOpen = true">Add Device <font-awesome-icon :icon="Icons.Add" /></button>
             </div>
-
-              <label class="label">
-                <input type="text" class="input input-bordered input-sm" placeholder="Filter..." v-model="filterText" />
-              </label>
+            <span class="flex">
+            <label class="label cursor-pointer mr-4">
+              <span class="label-text mr-2">Locked</span>
+              <input v-model=filterLocked type="checkbox" class="toggle toggle-primary"/>
+            </label>
+            <label class="label cursor-pointer mr-4">
+              <span class="label-text mr-2">Active</span>
+              <input v-model=filterActive type="checkbox" class="toggle toggle-primary"/>
+            </label>
+            <label class="label">
+              <input type="text" class="input input-bordered input-sm" placeholder="Filter..." v-model="filterText" />
+            </label>
+          </span>
           </div>
 
           <table class="table table-fixed w-full">

diff --git a/adminui/frontend/src/pages/Users.vue b/adminui/frontend/src/pages/Users.vue
@@ -22,8 +22,10 @@ const filterText = ref('')
 
 const allUsers = computed(() => usersStore.users ?? [])
 
+const filterLocked = ref(false)
+
 const filteredUsers = computed(() => {
-  const arr = allUsers.value
+  const arr = allUsers.value.filter(a => a.locked || !filterLocked.value)
 
   if (filterText.value == '') {
     return arr
@@ -118,11 +120,15 @@ function sortUsers(by: keyof UserDTO) {
                 Add User <font-awesome-icon :icon="Icons.Add" />
               </button>
             </div>
-            <div class="form-control">
+            <span class="flex">
+              <label class="label cursor-pointer mr-4">
+                <span class="label-text mr-2">Locked</span>
+                <input v-model="filterLocked" type="checkbox" class="toggle toggle-primary" />
+              </label>
               <label class="label">
                 <input type="text" class="input input-bordered input-sm" placeholder="Filter..." v-model="filterText" />
               </label>
-            </div>
+            </span>
           </div>
 
           <table class="table table-fixed w-full">