Fix level and channel checklist filter (#5)

Author: frankdekker

frontend/src/components/ButtonGroup.vue

@@ -1,34 +1,39 @@
 <script setup lang="ts">
 import ClickOutside from '@/services/ClickOutside';
 import {setRelativeTo} from '@/services/Positioner';
-import {onUpdated, ref, watch} from 'vue';
+import {onMounted, onUpdated, ref, watch} from 'vue';
 
 const active       = ref<boolean>(false);
 const dropdownRef  = ref();
 const clickOutside = new ClickOutside([], () => toggle(false));
-const props        = defineProps<{ alignment: 'left' | 'right', split: boolean }>();
+const props        = defineProps<{ alignment: 'left' | 'right', split: boolean, hideOnSelected?: boolean }>();
 
 const toggle = (forceActive: boolean | null = null): void => {
-  active.value = forceActive ?? !active.value;
+    active.value = forceActive ?? !active.value;
 }
 
 watch(active, () => setTimeout(() => clickOutside.enable(active.value), 1));
 
+onMounted(() => {
+    if (props.hideOnSelected !== true) {
+        clickOutside.addElement(dropdownRef.value);
+    }
+})
 onUpdated(() => {
-  if (active.value === false) {
-    return;
-  }
-  setRelativeTo(dropdownRef.value.parentElement, dropdownRef.value, props.alignment);
+    if (active.value === false) {
+        return;
+    }
+    setRelativeTo(dropdownRef.value.parentElement, dropdownRef.value, props.alignment);
 });
 defineExpose({toggle});
 </script>
 
 <template>
-  <div class="slv-btn-group" :class="{ 'btn-group': split, 'dropdown': !split }">
-    <slot name="btn_left"></slot>
-    <slot name="btn_right"></slot>
-    <ul class="dropdown-menu" :class="{'d-block': active}" ref="dropdownRef">
-      <slot name="dropdown"></slot>
-    </ul>
-  </div>
+    <div class="slv-btn-group" :class="{ 'btn-group': split, 'dropdown': !split }">
+        <slot name="btn_left"></slot>
+        <slot name="btn_right"></slot>
+        <ul class="dropdown-menu" :class="{'d-block': active}" ref="dropdownRef">
+            <slot name="dropdown"></slot>
+        </ul>
+    </div>
 </template>

frontend/src/components/LogFile.vue

@@ -30,7 +30,7 @@ watch(() => route.query.file, () => selectedFile.value = String(route.query.file
 
 <template>
     <!-- LogFile -->
-    <button-group ref="toggleRef" alignment="right" :split="file.can_download || file.can_delete" class="mb-1">
+    <button-group ref="toggleRef" alignment="right" :split="file.can_download || file.can_delete" class="mb-1" :hide-on-selected="true">
         <template v-slot:btn_left>
             <router-link :to="'/log?file=' + encodeURI(file.identifier)"
                          class="btn btn-file text-start btn-outline-primary w-100"

frontend/src/components/LogFolder.vue

@@ -29,7 +29,7 @@ const deleteFile = (identifier: string) => {
 <template>
     <!-- LogFolder -->
     <div class="folder-group mt-1" :aria-expanded="expanded">
-        <button-group ref="toggleRef" alignment="right" :split="folder.can_download || folder.can_delete">
+        <button-group ref="toggleRef" alignment="right" :split="folder.can_download || folder.can_delete" :hide-on-selected="true">
             <template v-slot:btn_left>
                 <button type="button" class="btn btn-outline-primary text-start w-100" @click="$emit('expand')">
                     <i class="slv-indicator bi bi-chevron-right me-2"></i>

frontend/src/services/ClickOutside.ts

@@ -15,6 +15,10 @@ export default class ClickOutside {
         document.removeEventListener('click', this.onClick);
     }
 
+    public addElement(element: HTMLElement): void {
+        this.elements.push(element);
+    }
+
     private onClick(event: MouseEvent): void {
         if (event.target instanceof HTMLElement === false || this.isOutside(event.target)) {
             this.onClickOutside();

frontend/src/stores/log_records.ts

@@ -26,7 +26,7 @@ export const useLogRecordStore = defineStore('log_records', () => {
         }
         const channelChoices = Object.keys(records.value.channels.choices);
         if (channels.length > 0 && channels.length !== channelChoices.length) {
-            params.channels = levels.join(',');
+            params.channels = channels.join(',');
         }
         if (offset > 0) {
             params.offset = offset.toString();

src/Entity/Output/LogRecordsOutput.php

@@ -31,11 +31,11 @@ public function jsonSerialize(): array
         return [
             'levels'      => [
                 'choices'  => $this->levels,
-                'selected' => array_keys($this->logQuery->levels ?? $this->levels)
+                'selected' => $this->logQuery->levels ?? array_keys($this->levels)
             ],
             'channels'    => [
                 'choices'  => $this->channels,
-                'selected' => array_keys($this->logQuery->channels ?? $this->channels)
+                'selected' => $this->logQuery->channels ?? array_keys($this->channels)
             ],
             'logs'        => $this->logIndex->getLines(),
             'paginator'   => $this->logIndex->getPaginator(),

src/Resources/public/.vite/manifest.json

@@ -12,12 +12,12 @@
       "assets/bootstrap-icons-bb42NSi8.woff2",
       "assets/bootstrap-icons-TqycWyKO.woff"
     ],
-    "file": "assets/main-5sgKIkti.js",
+    "file": "assets/main-_Tsc7ogr.js",
     "isEntry": true,
     "src": "src/main.ts"
   },
   "style.css": {
-    "file": "assets/style-d7plGNAV.css",
+    "file": "assets/style-_EKrxENf.css",
     "src": "style.css"
   }
 }