Merge pull request #101 from SafeExamBrowser/SEBSERV-902-GUI-Client-SearchBar

Sebserv 902 g UI client search bar

Author: Rad14nt

client/src/components/blocks/entity-table/composables/useUrlTableState.ts

@@ -156,15 +156,6 @@ export function useUrlTableState(
         });
     };
 
-    const resetFilters = async () => {
-        await updateQuery((query) => {
-            if (dateKey) query[dateKey] = undefined;
-            for (const key of filterKeys) {
-                query[key] = undefined;
-            }
-        });
-    };
-
     const clearAll = async () => {
         searchInputValue.value = null;
 
@@ -196,7 +187,6 @@ export function useUrlTableState(
         onSearch,
         onClearSearch,
         setFilters,
-        resetFilters,
         clearAll,
         setDate,
     };

client/src/components/blocks/filters/FilterSection.vue

@@ -1,20 +1,22 @@
 <template>
-    <div>
-        <template v-if="options.length > 0">
-            <div class="text-caption text-medium-emphasis mb-1">
+    <div v-if="options.length > 0">
+        <div class="d-flex align-center ga-2 mb-2">
+            <span
+                class="text-caption text-medium-emphasis text-uppercase font-weight-medium"
+            >
                 {{ title }}
-            </div>
-            <div class="d-flex flex-wrap ga-1">
-                <FilterChip
-                    v-for="option in options"
-                    :key="option.value"
-                    :label="option.label"
-                    :active="modelValue === option.value"
-                    :color="option.color"
-                    @toggle="toggle(option.value)"
-                />
-            </div>
-        </template>
+            </span>
+        </div>
+        <div class="d-flex flex-wrap ga-2">
+            <FilterChip
+                v-for="option in options"
+                :key="option.value"
+                :label="option.label"
+                :active="modelValue === option.value"
+                :color="option.color"
+                @toggle="toggle(option.value)"
+            />
+        </div>
     </div>
 </template>
 

client/src/components/blocks/filters/FiltersBar.vue

@@ -1,41 +1,17 @@
 <template>
-    <v-row class="align-start">
-        <v-col cols="10">
-            <v-row>
-                <v-col v-for="section in sections" :key="section.key" cols="6">
-                    <FilterSection
-                        :title="section.title"
-                        :options="section.options"
-                        :model-value="modelValue[section.key] ?? null"
-                        @update:model-value="
-                            onSectionChange(section.key, $event)
-                        "
-                    />
-                </v-col>
-            </v-row>
-        </v-col>
-
-        <v-col cols="2" class="d-flex justify-end align-center">
-            <v-btn
-                variant="outlined"
-                size="small"
-                color="primary"
-                class="text-none text-caption font-weight-medium"
-                :style="{
-                    visibility: hasActiveFilters ? 'visible' : 'hidden',
-                }"
-                @click="emit('clear')"
-            >
-                <v-icon start size="small">mdi-close</v-icon>
-                {{ translate("general.clearFilters") }}
-            </v-btn>
-        </v-col>
-    </v-row>
+    <div class="d-flex flex-column ga-4">
+        <FilterSection
+            v-for="section in sections"
+            :key="section.key"
+            :title="section.title"
+            :options="section.options"
+            :model-value="modelValue[section.key] ?? null"
+            @update:model-value="onSectionChange(section.key, $event)"
+        />
+    </div>
 </template>
 
 <script setup lang="ts">
-import { computed } from "vue";
-import { translate } from "@/utils/generalUtils.ts";
 import FilterSection from "./FilterSection.vue";
 import type { FilterSectionDef } from "./filterTypes.ts";
 
@@ -46,13 +22,8 @@ const props = defineProps<{
 
 const emit = defineEmits<{
     "update:modelValue": [value: Record<string, string | null>];
-    clear: [];
 }>();
 
-const hasActiveFilters = computed(() =>
-    props.sections.some((s) => !!props.modelValue[s.key]),
-);
-
 function onSectionChange(key: string, value: string | null) {
     emit("update:modelValue", { ...props.modelValue, [key]: value });
 }