Client - SEBSERV-902-GUI-Client-SearchBar - Refactor Layout - Add dense variable. Prop searchTitle for SearchBar is now optional

Author: Rad14nt

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

@@ -1,7 +1,7 @@
 <template>
     <v-chip
         size="small"
-        :color="color || (active ? 'primary' : undefined)"
+        :color="color ?? (active ? 'primary' : undefined)"
         :variant="active ? 'flat' : 'tonal'"
         class="cursor-pointer font-weight-medium"
         @click="emit('toggle')"

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

@@ -6,14 +6,6 @@
             >
                 {{ title }}
             </span>
-            <v-chip
-                v-if="selectedCount > 0"
-                size="x-small"
-                color="primary"
-                variant="flat"
-            >
-                {{ selectedCount }}
-            </v-chip>
         </div>
         <div class="d-flex flex-wrap ga-2">
             <FilterChip
@@ -29,7 +21,6 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from "vue";
 import FilterChip from "./FilterChip.vue";
 import type { FilterOption } from "./filterTypes.ts";
 
@@ -43,8 +34,6 @@ const emit = defineEmits<{
     "update:modelValue": [value: string | null];
 }>();
 
-const selectedCount = computed(() => (props.modelValue ? 1 : 0));
-
 function toggle(value: string) {
     emit("update:modelValue", props.modelValue === value ? null : value);
 }

client/src/components/blocks/searches/SearchBar.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="pa-6 pt-0">
+    <div class="pa-6" :class="{ 'pt-0': dense }">
         <v-row align="start">
             <v-col
                 cols="12"
@@ -9,7 +9,7 @@
                 <span
                     class="text-caption text-medium-emphasis text-uppercase font-weight-medium"
                 >
-                    {{ $t("general.searchTitle") }}
+                    {{ $t(searchTitle ?? "general.searchTitle") }}
                 </span>
                 <SearchBox
                     :model-value="modelValue"
@@ -71,7 +71,7 @@
                                 v-for="pill in activePills"
                                 :key="`${pill.sectionKey}-${pill.option.value}`"
                                 size="small"
-                                :color="pill.option.color || 'primary'"
+                                :color="pill.option.color ?? 'primary'"
                                 variant="tonal"
                                 closable
                                 class="font-weight-medium"
@@ -179,11 +179,13 @@ const props = withDefaults(
         searchText: string;
         filterSections: FilterSectionDef[];
         filterValues: TableFilters;
+        searchTitle?: string;
         dateTitle?: string;
         dateValue?: Date | null;
         actions?: SearchBarAction[];
+        dense?: boolean;
     }>(),
-    { actions: () => [], dateTitle: undefined, dateValue: null },
+    { actions: () => [], dateTitle: undefined, dateValue: null, dense: false },
 );
 
 const emit = defineEmits<{

client/src/components/views/seb-server/assessment-tool/assessment-tools/AssessmentTools.vue

@@ -14,6 +14,7 @@
                     search-text="assessmentToolConnections.assessmentToolsPage.filters.searchField"
                     :filter-sections="filterSections"
                     :filter-values="selectedFilters"
+                    dense
                     @search="onSearch"
                     @clear="onClearSearch"
                     @update:filter-values="setFilters"

client/src/components/views/seb-server/certificate/certificates/CertificatesList.vue

@@ -14,6 +14,7 @@
                     search-text="certificates.filters.searchField"
                     :filter-sections="[]"
                     :filter-values="{}"
+                    dense
                     @search="onSearch"
                     @clear="onClearSearch"
                     @clear-filters="onClearSearch"

client/src/components/views/seb-server/connection-configuration/connection-configurations/ConnectionConfigurations.vue

@@ -14,6 +14,7 @@
                     search-text="connectionConfigurations.connectionConfigurationsPage.filters.searchField"
                     :filter-sections="filterSections"
                     :filter-values="selectedFilters"
+                    dense
                     @search="onSearch"
                     @clear="onClearSearch"
                     @update:filter-values="setFilters"

client/src/components/views/seb-server/exam/exams/ExamList.vue

@@ -7,7 +7,6 @@
             <SearchBar
                 v-model="searchInputValue"
                 search-text="examList.info.examNameSearchPlaceholder"
-                search-title="general.searchTitle"
                 date-title="examList.info.examStartSearchPlaceholder"
                 :date-value="dateValue"
                 :filter-sections="filterSections"

client/src/components/views/seb-server/user-account/user-accounts/UserAccounts.vue

@@ -14,6 +14,7 @@
                     search-text="userAccount.userAccountPage.filters.searchField"
                     :filter-sections="filterSections"
                     :filter-values="selectedFilters"
+                    dense
                     @search="onSearch"
                     @clear="onClearSearch"
                     @update:filter-values="setFilters"