From 0297d49e0c7e6d660c1487041c6e8b021d0b8c68 Mon Sep 17 00:00:00 2001
From: Lorenz Padberg <lorenz.padberg@iterativ.ch>
Date: Thu, 24 Aug 2023 11:00:03 +0200
Subject: [PATCH] Refactoring

---
 .../src/components/instruments/FilterBar.vue  | 77 ++++++++-----------
 1 file changed, 32 insertions(+), 45 deletions(-)

diff --git a/client/src/components/instruments/FilterBar.vue b/client/src/components/instruments/FilterBar.vue
index 37f7ffff..8c1d2bc9 100644
--- a/client/src/components/instruments/FilterBar.vue
+++ b/client/src/components/instruments/FilterBar.vue
@@ -8,38 +8,40 @@
         @input="debouncedUpdate"
         placeholder="Suchbegriff eingeben..."
       />
-      <NoteIcon class="filter-bar__search-icon"></NoteIcon> <!-- Font Awesome search icon as an example -->
+      <NoteIcon class="filter-bar__search-icon"></NoteIcon>
+      <!-- Font Awesome search icon as an example -->
     </div>
     <pill-radio-buttons
-        :selectableItems="languageOptions"
-        :defaultSelectedItem="initialLanguage"
-        class="filter-bar__language-selection"
-        @update:selectedItem="item => selectedLanguage = item"/>
-
+      :selectableItems="languageOptions"
+      :defaultSelectedItem="initialLanguage"
+      class="filter-bar__language-selection"
+      @update:selectedItem="(item) => (selectedLanguage = item)"
+    />
   </div>
 </template>
 
 <script setup lang="ts">
+import debounce from 'lodash/debounce';
+
 import { ref, watchEffect } from 'vue';
-import NoteIcon from "@/components/icons/NoteIcon.vue";
-import PillRadioButtons from "@/components/ui/PillRadioButtons.vue";
+import NoteIcon from '@/components/icons/NoteIcon.vue';
+import PillRadioButtons from '@/components/ui/PillRadioButtons.vue';
 
 const props = defineProps({
   searchText: {
     type: String,
-    default: ''
-  }
+    default: '',
+  },
 });
 
 const emit = defineEmits(['filter']);
 
-  const languageOptions: Array<{ id: number, label: string }> = ref([
-    {id: 1, label: 'De'},
-    {id: 2, label: 'Fr'},
-    {id: 3, label: 'En'}
-  ])
-  const initialLanguage = languageOptions.value[0]
-
+const languageOptions: Array<{ id: number; label: string }> = ref([
+  { id: 1, label: 'De' },
+  { id: 2, label: 'Fr' },
+  { id: 3, label: 'En' },
+]);
+const initialLanguage = languageOptions.value[0];
 
 const searchText = ref(props.searchText);
 
@@ -52,32 +54,20 @@ const updateSearchText = (searchText: string) => {
   emit('filter', searchText);
 };
 
-// Apply debounce to the input event handler
 const debouncedUpdate = debounce((event: Event) => {
   const inputElement = event.target as HTMLInputElement;
   updateSearchText(inputElement.value);
 }, 200);
-
-// Debounce function
-function debounce(func: Function, delay: number): Function {
-  let timeoutId: number | null = null;
-  return (...args: any[]) => {
-    clearTimeout(timeoutId);
-    timeoutId = setTimeout(() => {
-      func(...args);
-    }, delay);
-  };
-}
 </script>
 
-<style  scoped lang="scss">
-  @import 'styles/helpers';
+<style scoped lang="scss">
+@import 'styles/helpers';
 
-  .filter-bar{
-    display: flex;
-    margin-bottom: $medium-spacing;
+.filter-bar {
+  display: flex;
+  margin-bottom: $large-spacing;
 
-     &__input-wrapper {
+  &__input-wrapper {
     position: relative;
     width: 400px;
     max-width: 500px;
@@ -86,7 +76,6 @@ function debounce(func: Function, delay: number): Function {
   &__search-input {
     width: 100%;
     padding: 1rem;
-    padding-left: 2.5rem;  // Adjusted padding to account for the icon
     border-radius: $input-border-radius;
     border: 1px solid $color-silver;
     font-size: 1rem;
@@ -94,17 +83,15 @@ function debounce(func: Function, delay: number): Function {
 
   &__search-icon {
     position: absolute;
-    right: 1rem;  // Positioning the icon to the left
+    right: 1rem;
     top: 50%;
-    transform: translateY(-50%); // Vertically centering the icon
-    font-size: 1rem;  // Adjust as needed
-    color: $color-silver;  // Adjust as needed
+    transform: translateY(-50%);
+    font-size: 1rem;
+    color: $color-silver;
   }
 
-    &__language-selection {
-      margin-left: auto;
-
-    }
+  &__language-selection {
+    margin-left: auto;
   }
-/* You can add styles specific to this component here */
+}
 </style>