From 7298f443e9c594754bb95c0ec353e48a20d104de Mon Sep 17 00:00:00 2001
From: Lorenz Padberg <lorenz.padberg@iterativ.ch>
Date: Thu, 24 Aug 2023 09:40:43 +0200
Subject: [PATCH 01/15] Add FilterBar component to Instruments page

---
 .../src/components/instruments/FilterBar.vue  | 110 ++++++++++++++++++
 client/src/pages/instrumentOverview.vue       |   4 +
 2 files changed, 114 insertions(+)
 create mode 100644 client/src/components/instruments/FilterBar.vue

diff --git a/client/src/components/instruments/FilterBar.vue b/client/src/components/instruments/FilterBar.vue
new file mode 100644
index 00000000..37f7ffff
--- /dev/null
+++ b/client/src/components/instruments/FilterBar.vue
@@ -0,0 +1,110 @@
+<template>
+  <div class="filter-bar">
+    <div class="filter-bar__input-wrapper">
+      <input
+        class="filter-bar__search-input"
+        type="text"
+        :value="searchText"
+        @input="debouncedUpdate"
+        placeholder="Suchbegriff eingeben..."
+      />
+      <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"/>
+
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watchEffect } from 'vue';
+import NoteIcon from "@/components/icons/NoteIcon.vue";
+import PillRadioButtons from "@/components/ui/PillRadioButtons.vue";
+
+const props = defineProps({
+  searchText: {
+    type: String,
+    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 searchText = ref(props.searchText);
+
+watchEffect(() => {
+  searchText.value = props.searchText;
+});
+
+const updateSearchText = (searchText: string) => {
+  console.log('filter', searchText);
+  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';
+
+  .filter-bar{
+    display: flex;
+    margin-bottom: $medium-spacing;
+
+     &__input-wrapper {
+    position: relative;
+    width: 400px;
+    max-width: 500px;
+  }
+
+  &__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;
+  }
+
+  &__search-icon {
+    position: absolute;
+    right: 1rem;  // Positioning the icon to the left
+    top: 50%;
+    transform: translateY(-50%); // Vertically centering the icon
+    font-size: 1rem;  // Adjust as needed
+    color: $color-silver;  // Adjust as needed
+  }
+
+    &__language-selection {
+      margin-left: auto;
+
+    }
+  }
+/* You can add styles specific to this component here */
+</style>
diff --git a/client/src/pages/instrumentOverview.vue b/client/src/pages/instrumentOverview.vue
index 12a5b30b..42833775 100644
--- a/client/src/pages/instrumentOverview.vue
+++ b/client/src/pages/instrumentOverview.vue
@@ -10,6 +10,8 @@
       v-else
     />
     <div class="instrument-overview__list">
+      <FilterBar>
+      </FilterBar>
       <router-link
         :to="{ name: 'instrument', params: { slug: instrument.slug } }"
         data-cy="instrument"
@@ -27,9 +29,11 @@ import InstrumentFilter from '@/components/instruments/InstrumentFilter.vue';
 import InstrumentEntry from '@/components/instruments/InstrumentEntry.vue';
 import INSTRUMENTS_QUERY from '@/graphql/gql/queries/instrumentsQuery.gql';
 import INSTRUMENT_FILTER_QUERY from 'gql/local/instrumentFilter.gql';
+import FilterBar from "@/components/instruments/FilterBar.vue";
 
 export default {
   components: {
+    FilterBar,
     InstrumentFilter,
     InstrumentEntry,
   },

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 02/15] 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>

From 77aede3948f95f7f0d3d849ffc88972ecc2c7c65 Mon Sep 17 00:00:00 2001
From: Lorenz Padberg <lorenz.padberg@iterativ.ch>
Date: Fri, 25 Aug 2023 09:31:59 +0200
Subject: [PATCH 03/15] Add Search Icon

---
 .../src/components/icons/SearchMagnifyingGlass.vue   | 12 ++++++++++++
 client/src/components/instruments/FilterBar.vue      | 12 ++++++------
 2 files changed, 18 insertions(+), 6 deletions(-)
 create mode 100644 client/src/components/icons/SearchMagnifyingGlass.vue

diff --git a/client/src/components/icons/SearchMagnifyingGlass.vue b/client/src/components/icons/SearchMagnifyingGlass.vue
new file mode 100644
index 00000000..2f145ac7
--- /dev/null
+++ b/client/src/components/icons/SearchMagnifyingGlass.vue
@@ -0,0 +1,12 @@
+<template>
+  <svg
+    id="a"
+    data-name="shape"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 100 100"
+  >
+    <path
+      d="m82.3799,17.6201c-6.5254-6.5264-15.2012-10.1201-24.4297-10.1201s-17.9053,3.5938-24.4307,10.1201c-6.5264,6.5254-10.1201,15.2012-10.1201,24.4297,0,8.3906,2.9788,16.3176,8.4223,22.5933l-23.5893,23.5894c-.9766.9766-.9766,2.5586,0,3.5352.4883.4883,1.1279.7324,1.7676.7324s1.2793-.2441,1.7676-.7324l23.5893-23.5894c6.2757,5.4436,14.2028,8.4224,22.5933,8.4224,9.2285,0,17.9043-3.5938,24.4297-10.1201,6.5254-6.5254,10.1201-15.2021,10.1201-24.4307s-3.5938-17.9043-10.1201-24.4297Zm-3.5352,45.3252c-5.5811,5.5811-13.002,8.6553-20.8945,8.6553s-15.3145-3.0742-20.8955-8.6553-8.6553-13.002-8.6553-20.8955,3.0742-15.3135,8.6553-20.8945,13.002-8.6553,20.8955-8.6553,15.3135,3.0742,20.8945,8.6553,8.6553,13.002,8.6553,20.8945-3.0742,15.3145-8.6553,20.8955Z"
+    />
+  </svg>
+</template>
diff --git a/client/src/components/instruments/FilterBar.vue b/client/src/components/instruments/FilterBar.vue
index 8c1d2bc9..d394381c 100644
--- a/client/src/components/instruments/FilterBar.vue
+++ b/client/src/components/instruments/FilterBar.vue
@@ -8,7 +8,7 @@
         @input="debouncedUpdate"
         placeholder="Suchbegriff eingeben..."
       />
-      <NoteIcon class="filter-bar__search-icon"></NoteIcon>
+      <SearchMagnifyingGlass class="filter-bar__search-icon"></SearchMagnifyingGlass>
       <!-- Font Awesome search icon as an example -->
     </div>
     <pill-radio-buttons
@@ -22,10 +22,10 @@
 
 <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 SearchMagnifyingGlass from "@/components/icons/SearchMagnifyingGlass.vue";
 
 const props = defineProps({
   searchText: {
@@ -78,16 +78,16 @@ const debouncedUpdate = debounce((event: Event) => {
     padding: 1rem;
     border-radius: $input-border-radius;
     border: 1px solid $color-silver;
-    font-size: 1rem;
+    font-size: $base-font-size-pixels;
   }
 
   &__search-icon {
     position: absolute;
-    right: 1rem;
+    width: $default-icon-dimension;
+    height: $default-icon-dimension;
+    right: $medium-spacing;
     top: 50%;
     transform: translateY(-50%);
-    font-size: 1rem;
-    color: $color-silver;
   }
 
   &__language-selection {

From ce645001a1621f98e9a48271934908f838f13f8e Mon Sep 17 00:00:00 2001
From: Lorenz Padberg <lorenz.padberg@iterativ.ch>
Date: Fri, 25 Aug 2023 13:25:42 +0200
Subject: [PATCH 04/15] Add filter function

---
 .../src/components/instruments/FilterBar.vue  | 39 +++++--------------
 .../components/instruments/FilterGroup.vue    | 11 +++---
 client/src/pages/instrumentOverview.vue       |  9 +++--
 3 files changed, 21 insertions(+), 38 deletions(-)

diff --git a/client/src/components/instruments/FilterBar.vue b/client/src/components/instruments/FilterBar.vue
index d394381c..20bc495c 100644
--- a/client/src/components/instruments/FilterBar.vue
+++ b/client/src/components/instruments/FilterBar.vue
@@ -4,9 +4,9 @@
       <input
         class="filter-bar__search-input"
         type="text"
-        :value="searchText"
-        @input="debouncedUpdate"
         placeholder="Suchbegriff eingeben..."
+        v-model="searchQuery"
+        @input="updateSearch"
       />
       <SearchMagnifyingGlass class="filter-bar__search-icon"></SearchMagnifyingGlass>
       <!-- Font Awesome search icon as an example -->
@@ -21,43 +21,24 @@
 </template>
 
 <script setup lang="ts">
-import debounce from 'lodash/debounce';
-import { ref, watchEffect } from 'vue';
-import NoteIcon from '@/components/icons/NoteIcon.vue';
+import { ref } from 'vue';
 import PillRadioButtons from '@/components/ui/PillRadioButtons.vue';
-import SearchMagnifyingGlass from "@/components/icons/SearchMagnifyingGlass.vue";
+import SearchMagnifyingGlass from '@/components/icons/SearchMagnifyingGlass.vue';
 
-const props = defineProps({
-  searchText: {
-    type: String,
-    default: '',
-  },
-});
+const searchQuery = ref('');
+const emit = defineEmits(['update:filter']);
 
-const emit = defineEmits(['filter']);
+const updateSearch = () => {
+  emit('update:filter', searchQuery.value);
+};
 
 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);
-
-watchEffect(() => {
-  searchText.value = props.searchText;
-});
-
-const updateSearchText = (searchText: string) => {
-  console.log('filter', searchText);
-  emit('filter', searchText);
-};
-
-const debouncedUpdate = debounce((event: Event) => {
-  const inputElement = event.target as HTMLInputElement;
-  updateSearchText(inputElement.value);
-}, 200);
 </script>
 
 <style scoped lang="scss">
diff --git a/client/src/components/instruments/FilterGroup.vue b/client/src/components/instruments/FilterGroup.vue
index b992ddd8..1383c13b 100644
--- a/client/src/components/instruments/FilterGroup.vue
+++ b/client/src/components/instruments/FilterGroup.vue
@@ -49,11 +49,12 @@ export default defineComponent({
     FilterEntry,
   },
 
-  apollo: {
-    instrumentFilter: {
-      query: INSTRUMENT_FILTER_QUERY,
-    },
-  },
+  // TODO: Ramon: I think this code is not needed anymore
+  // apollo: {
+  //   instrumentFilter: {
+  //     query: INSTRUMENT_FILTER_QUERY,
+  //   },
+  // },
 
   data() {
     return {
diff --git a/client/src/pages/instrumentOverview.vue b/client/src/pages/instrumentOverview.vue
index 42833775..145a8f30 100644
--- a/client/src/pages/instrumentOverview.vue
+++ b/client/src/pages/instrumentOverview.vue
@@ -10,8 +10,7 @@
       v-else
     />
     <div class="instrument-overview__list">
-      <FilterBar>
-      </FilterBar>
+      <FilterBar v-model:filter="searchText"></FilterBar>
       <router-link
         :to="{ name: 'instrument', params: { slug: instrument.slug } }"
         data-cy="instrument"
@@ -29,7 +28,7 @@ import InstrumentFilter from '@/components/instruments/InstrumentFilter.vue';
 import InstrumentEntry from '@/components/instruments/InstrumentEntry.vue';
 import INSTRUMENTS_QUERY from '@/graphql/gql/queries/instrumentsQuery.gql';
 import INSTRUMENT_FILTER_QUERY from 'gql/local/instrumentFilter.gql';
-import FilterBar from "@/components/instruments/FilterBar.vue";
+import FilterBar from '@/components/instruments/FilterBar.vue';
 
 export default {
   components: {
@@ -71,12 +70,14 @@ export default {
       instrumentFilter: {
         currentFilter: '',
       },
+      searchText: '',
     };
   },
 
   computed: {
     filteredInstruments() {
-      return this.instruments.filter((i) => this.filter(i));
+      let instruments = this.instruments.filter((i) => this.filter(i));
+      return instruments.filter((i) => i.title.toLowerCase().includes(this.searchText.toLowerCase()));
     },
   },
 

From cf36184e1c10766490876d40b166e8a47d875afa Mon Sep 17 00:00:00 2001
From: Lorenz Padberg <lorenz.padberg@iterativ.ch>
Date: Mon, 28 Aug 2023 11:38:37 +0200
Subject: [PATCH 05/15] Add feature flag to show intrument Subcategories

---
 .../src/components/instruments/FilterBar.vue   | 18 +++---------------
 .../src/components/instruments/FilterGroup.vue |  2 +-
 client/src/helpers/app-flavor.constants.ts     |  4 ++++
 client/src/helpers/types.ts                    |  1 +
 4 files changed, 9 insertions(+), 16 deletions(-)

diff --git a/client/src/components/instruments/FilterBar.vue b/client/src/components/instruments/FilterBar.vue
index 20bc495c..365f6730 100644
--- a/client/src/components/instruments/FilterBar.vue
+++ b/client/src/components/instruments/FilterBar.vue
@@ -11,19 +11,15 @@
       <SearchMagnifyingGlass class="filter-bar__search-icon"></SearchMagnifyingGlass>
       <!-- 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)"
-    />
+    <language-switcher class="filter-bar__language-selection"/>
+
   </div>
 </template>
 
 <script setup lang="ts">
 import { ref } from 'vue';
-import PillRadioButtons from '@/components/ui/PillRadioButtons.vue';
 import SearchMagnifyingGlass from '@/components/icons/SearchMagnifyingGlass.vue';
+import LanguageSwitcher from "@/components/LanguageSwitcher.vue";
 
 const searchQuery = ref('');
 const emit = defineEmits(['update:filter']);
@@ -31,14 +27,6 @@ const emit = defineEmits(['update:filter']);
 const updateSearch = () => {
   emit('update:filter', searchQuery.value);
 };
-
-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];
 </script>
 
 <style scoped lang="scss">
diff --git a/client/src/components/instruments/FilterGroup.vue b/client/src/components/instruments/FilterGroup.vue
index 1383c13b..b32a9a83 100644
--- a/client/src/components/instruments/FilterGroup.vue
+++ b/client/src/components/instruments/FilterGroup.vue
@@ -9,7 +9,7 @@
       :id="category.id"
       @filter="setCategoryFilter(category.id)"
     />
-    <div class="filter-group__children">
+    <div class="filter-group__children" v-if="$flavor.showInstrumentSubCategories">
       <filter-entry
         :data-cy="`filter-${type.type}`"
         :category="type.category"
diff --git a/client/src/helpers/app-flavor.constants.ts b/client/src/helpers/app-flavor.constants.ts
index cba19f48..e4683663 100644
--- a/client/src/helpers/app-flavor.constants.ts
+++ b/client/src/helpers/app-flavor.constants.ts
@@ -20,6 +20,7 @@ export const defaultFlavorValues: FlavorValues = {
   showFooter: true,
   showObjectivesTitle: true,
   showInstrumentFilterSidebar: true,
+  showInstrumentSubCategories: true,
   showPortfolio: true,
   showEHB: true,
   helloIllustration: 'HelloIllustration',
@@ -46,6 +47,7 @@ export const myKvValues: FlavorValues = {
   showObjectivesTitle: false,
   showInstrumentFilterSidebar: true,
   showPortfolio: true,
+  showInstrumentSubCategories: false,
   showEHB: false,
   helloIllustration: 'HelloMyKVIllustration',
 };
@@ -57,6 +59,7 @@ export const dhaValues: FlavorValues = Object.assign({}, myKvValues, {
   appLogo: 'https://skillbox-my-detailhandel-dha-prod.s3.eu-central-1.amazonaws.com/myDHA-logo.png',
   textAppName: 'myDHA',
   helloIllustration: 'HelloMyDHAIllustration',
+  showInstrumentSubCategories: false,
 });
 
 export const dhfValues: FlavorValues = Object.assign({}, myKvValues, {
@@ -66,4 +69,5 @@ export const dhfValues: FlavorValues = Object.assign({}, myKvValues, {
   appLogo: 'https://skillbox-my-detailhandel-dhf-prod.s3.eu-central-1.amazonaws.com/myDHF-logo.png',
   textAppName: 'myDHF',
   helloIllustration: 'HelloMyDHFIllustration',
+  showInstrumentSubCategories: false,
 });
diff --git a/client/src/helpers/types.ts b/client/src/helpers/types.ts
index 17397098..3525a790 100644
--- a/client/src/helpers/types.ts
+++ b/client/src/helpers/types.ts
@@ -14,6 +14,7 @@ export interface FlavorValues {
   showFooter: boolean;
   showObjectivesTitle: boolean;
   showInstrumentFilterSidebar: boolean;
+  showInstrumentSubCategories: boolean;
   showPortfolio: boolean;
   showEHB: boolean;
   helloIllustration: string;

From 6f9340192bb315d06d9bebc38fdb73e387eb5387 Mon Sep 17 00:00:00 2001
From: Lorenz Padberg <lorenz.padberg@iterativ.ch>
Date: Mon, 28 Aug 2023 11:48:30 +0200
Subject: [PATCH 06/15] Set focus to search bar

---
 client/src/components/instruments/FilterBar.vue | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/client/src/components/instruments/FilterBar.vue b/client/src/components/instruments/FilterBar.vue
index 365f6730..b6120fac 100644
--- a/client/src/components/instruments/FilterBar.vue
+++ b/client/src/components/instruments/FilterBar.vue
@@ -2,6 +2,7 @@
   <div class="filter-bar">
     <div class="filter-bar__input-wrapper">
       <input
+        ref="searchInputRef"
         class="filter-bar__search-input"
         type="text"
         placeholder="Suchbegriff eingeben..."
@@ -9,7 +10,6 @@
         @input="updateSearch"
       />
       <SearchMagnifyingGlass class="filter-bar__search-icon"></SearchMagnifyingGlass>
-      <!-- Font Awesome search icon as an example -->
     </div>
     <language-switcher class="filter-bar__language-selection"/>
 
@@ -17,16 +17,23 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
+import { ref, onMounted} from 'vue';
 import SearchMagnifyingGlass from '@/components/icons/SearchMagnifyingGlass.vue';
 import LanguageSwitcher from "@/components/LanguageSwitcher.vue";
 
 const searchQuery = ref('');
+const searchInputRef = ref(null);
+
+
 const emit = defineEmits(['update:filter']);
 
 const updateSearch = () => {
   emit('update:filter', searchQuery.value);
 };
+
+onMounted(() => {
+  searchInputRef.value?.focus();
+});
 </script>
 
 <style scoped lang="scss">

From 6de2cc3ff05d1c989cbc840b65eb80d42b70468d Mon Sep 17 00:00:00 2001
From: Lorenz Padberg <lorenz.padberg@iterativ.ch>
Date: Mon, 28 Aug 2023 14:12:35 +0200
Subject: [PATCH 07/15] Fix a few linter errors

---
 client/src/components/icons/SearchMagnifyingGlass.vue | 2 +-
 client/src/components/instruments/FilterBar.vue       | 2 +-
 client/src/components/instruments/FilterGroup.vue     | 1 -
 3 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/client/src/components/icons/SearchMagnifyingGlass.vue b/client/src/components/icons/SearchMagnifyingGlass.vue
index 2f145ac7..1ab1408b 100644
--- a/client/src/components/icons/SearchMagnifyingGlass.vue
+++ b/client/src/components/icons/SearchMagnifyingGlass.vue
@@ -1,9 +1,9 @@
 <template>
   <svg
-    id="a"
     data-name="shape"
     xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 100 100"
+    id="a"
   >
     <path
       d="m82.3799,17.6201c-6.5254-6.5264-15.2012-10.1201-24.4297-10.1201s-17.9053,3.5938-24.4307,10.1201c-6.5264,6.5254-10.1201,15.2012-10.1201,24.4297,0,8.3906,2.9788,16.3176,8.4223,22.5933l-23.5893,23.5894c-.9766.9766-.9766,2.5586,0,3.5352.4883.4883,1.1279.7324,1.7676.7324s1.2793-.2441,1.7676-.7324l23.5893-23.5894c6.2757,5.4436,14.2028,8.4224,22.5933,8.4224,9.2285,0,17.9043-3.5938,24.4297-10.1201,6.5254-6.5254,10.1201-15.2021,10.1201-24.4307s-3.5938-17.9043-10.1201-24.4297Zm-3.5352,45.3252c-5.5811,5.5811-13.002,8.6553-20.8945,8.6553s-15.3145-3.0742-20.8955-8.6553-8.6553-13.002-8.6553-20.8955,3.0742-15.3135,8.6553-20.8945,13.002-8.6553,20.8955-8.6553,15.3135,3.0742,20.8945,8.6553,8.6553,13.002,8.6553,20.8945-3.0742,15.3145-8.6553,20.8955Z"
diff --git a/client/src/components/instruments/FilterBar.vue b/client/src/components/instruments/FilterBar.vue
index b6120fac..e60bc841 100644
--- a/client/src/components/instruments/FilterBar.vue
+++ b/client/src/components/instruments/FilterBar.vue
@@ -2,10 +2,10 @@
   <div class="filter-bar">
     <div class="filter-bar__input-wrapper">
       <input
-        ref="searchInputRef"
         class="filter-bar__search-input"
         type="text"
         placeholder="Suchbegriff eingeben..."
+        ref="searchInputRef"
         v-model="searchQuery"
         @input="updateSearch"
       />
diff --git a/client/src/components/instruments/FilterGroup.vue b/client/src/components/instruments/FilterGroup.vue
index b32a9a83..62809e9b 100644
--- a/client/src/components/instruments/FilterGroup.vue
+++ b/client/src/components/instruments/FilterGroup.vue
@@ -28,7 +28,6 @@ import { defineComponent } from 'vue';
 import FilterEntry from '@/components/instruments/FilterEntry.vue';
 
 import SET_FILTER_MUTATION from 'gql/local/mutations/setInstrumentFilter.gql';
-import INSTRUMENT_FILTER_QUERY from 'gql/local/instrumentFilter.gql';
 
 export default defineComponent({
   props: {

From 2246e9ca3c3c6b659d0c7ce946ce8552602f5386 Mon Sep 17 00:00:00 2001
From: Lorenz Padberg <lorenz.padberg@iterativ.ch>
Date: Tue, 29 Aug 2023 15:10:47 +0200
Subject: [PATCH 08/15] Add language filter to instruments

---
 .../src/components/modules/ModuleFilter.vue   |  1 -
 .../graphql/gql/fragments/instrumentParts.gql |  1 +
 .../graphql/gql/queries/instrumentsQuery.gql  |  1 +
 client/src/pages/instrumentOverview.vue       | 22 ++++++++++++++++++-
 server/basicknowledge/queries.py              |  4 ++++
 5 files changed, 27 insertions(+), 2 deletions(-)

diff --git a/client/src/components/modules/ModuleFilter.vue b/client/src/components/modules/ModuleFilter.vue
index c5df8c94..72f5b6f2 100644
--- a/client/src/components/modules/ModuleFilter.vue
+++ b/client/src/components/modules/ModuleFilter.vue
@@ -121,7 +121,6 @@ const filterByCategory = (module: ModuleNode, category: ModuleCategoryNode) => {
 };
 
 const filterByLanguage = (module: ModuleNode, language: string) => {
-  // TODO: implement filter by language here.
   return module.language === language;
 };
 
diff --git a/client/src/graphql/gql/fragments/instrumentParts.gql b/client/src/graphql/gql/fragments/instrumentParts.gql
index 9d90b65a..7db4dfdb 100644
--- a/client/src/graphql/gql/fragments/instrumentParts.gql
+++ b/client/src/graphql/gql/fragments/instrumentParts.gql
@@ -3,6 +3,7 @@ fragment InstrumentParts on InstrumentNode {
   title
   intro
   slug
+  language
   bookmarks {
     uuid
     note {
diff --git a/client/src/graphql/gql/queries/instrumentsQuery.gql b/client/src/graphql/gql/queries/instrumentsQuery.gql
index 6d042b07..09744164 100644
--- a/client/src/graphql/gql/queries/instrumentsQuery.gql
+++ b/client/src/graphql/gql/queries/instrumentsQuery.gql
@@ -4,6 +4,7 @@ query InstrumentsQuery {
     title
     contents
     slug
+    language
     type {
       id
       type
diff --git a/client/src/pages/instrumentOverview.vue b/client/src/pages/instrumentOverview.vue
index 145a8f30..f4d26ee6 100644
--- a/client/src/pages/instrumentOverview.vue
+++ b/client/src/pages/instrumentOverview.vue
@@ -29,6 +29,8 @@ import InstrumentEntry from '@/components/instruments/InstrumentEntry.vue';
 import INSTRUMENTS_QUERY from '@/graphql/gql/queries/instrumentsQuery.gql';
 import INSTRUMENT_FILTER_QUERY from 'gql/local/instrumentFilter.gql';
 import FilterBar from '@/components/instruments/FilterBar.vue';
+import ME_QUERY from '@/graphql/gql/queries/meQuery.gql';
+import { graphql } from '@/__generated__';
 
 export default {
   components: {
@@ -61,6 +63,15 @@ export default {
         return instrumentFilter;
       },
     },
+    me: {
+      query: graphql(`
+        query MeLanguage {
+          me {
+            language @client
+          }
+        }
+      `),
+    },
   },
 
   data() {
@@ -71,14 +82,23 @@ export default {
         currentFilter: '',
       },
       searchText: '',
+      me: { language: 'de' },
     };
   },
 
   computed: {
     filteredInstruments() {
+      // Filter by category and category type
       let instruments = this.instruments.filter((i) => this.filter(i));
-      return instruments.filter((i) => i.title.toLowerCase().includes(this.searchText.toLowerCase()));
+      // Filter by language
+      instruments = instruments.filter((i) => i.language === this.me.language);
+      // Filter by search text
+      instruments = instruments.filter((i) => i.title.toLowerCase().includes(this.searchText.toLowerCase()));
+      return instruments;
     },
+    // language() {
+    //   return this.instruments.value?.me.language || 'de';
+    // },
   },
 
   methods: {
diff --git a/server/basicknowledge/queries.py b/server/basicknowledge/queries.py
index 9ea16977..5ba40933 100644
--- a/server/basicknowledge/queries.py
+++ b/server/basicknowledge/queries.py
@@ -44,6 +44,7 @@ class InstrumentNode(DjangoObjectType):
     bookmarks = graphene.List(InstrumentBookmarkNode)
     type = graphene.Field(InstrumentTypeNode)
     contents = GenericStreamFieldType()
+    language = graphene.String()
 
     class Meta:
         model = BasicKnowledge
@@ -63,6 +64,9 @@ class InstrumentNode(DjangoObjectType):
             instrument=self
         )
 
+    def resolve_language(self, info, **kwargs):
+        return self.locale.language_code
+
 
 class InstrumentQuery(object):
     instrument = graphene.Field(InstrumentNode, slug=graphene.String(), id=graphene.ID())

From de4737fa3fc93ff91c3680f8aeac05cfaf72ce70 Mon Sep 17 00:00:00 2001
From: Lorenz Padberg <lorenz.padberg@iterativ.ch>
Date: Tue, 29 Aug 2023 15:42:16 +0200
Subject: [PATCH 09/15] Fix linter error

---
 client/src/components/instruments/FilterBar.vue | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/client/src/components/instruments/FilterBar.vue b/client/src/components/instruments/FilterBar.vue
index e60bc841..62865dd8 100644
--- a/client/src/components/instruments/FilterBar.vue
+++ b/client/src/components/instruments/FilterBar.vue
@@ -7,7 +7,7 @@
         placeholder="Suchbegriff eingeben..."
         ref="searchInputRef"
         v-model="searchQuery"
-        @input="updateSearch"
+        @input="updateSearchQuery"
       />
       <SearchMagnifyingGlass class="filter-bar__search-icon"></SearchMagnifyingGlass>
     </div>
@@ -24,11 +24,10 @@ import LanguageSwitcher from "@/components/LanguageSwitcher.vue";
 const searchQuery = ref('');
 const searchInputRef = ref(null);
 
+const emit = defineEmits(['update:searchQuery']);
 
-const emit = defineEmits(['update:filter']);
-
-const updateSearch = () => {
-  emit('update:filter', searchQuery.value);
+const updateSearchQuery = () => {
+  emit('update:searchQuery', searchQuery.value);
 };
 
 onMounted(() => {

From b24c5419f1a79b48d38fba73e096945b49c8228a Mon Sep 17 00:00:00 2001
From: Lorenz Padberg <lorenz.padberg@iterativ.ch>
Date: Tue, 29 Aug 2023 15:53:36 +0200
Subject: [PATCH 10/15] Add module Filter category or level == null -> belongs
 to all

---
 client/src/components/instruments/FilterBar.vue | 2 +-
 client/src/components/modules/ModuleFilter.vue  | 4 ++--
 client/src/pages/instrumentOverview.vue         | 6 +-----
 3 files changed, 4 insertions(+), 8 deletions(-)

diff --git a/client/src/components/instruments/FilterBar.vue b/client/src/components/instruments/FilterBar.vue
index 62865dd8..c8d05a3c 100644
--- a/client/src/components/instruments/FilterBar.vue
+++ b/client/src/components/instruments/FilterBar.vue
@@ -44,7 +44,7 @@ onMounted(() => {
 
   &__input-wrapper {
     position: relative;
-    width: 400px;
+    width: 380px; // With from modules, has nothing to do with it but at least it is the same width
     max-width: 500px;
   }
 
diff --git a/client/src/components/modules/ModuleFilter.vue b/client/src/components/modules/ModuleFilter.vue
index 72f5b6f2..cb2697d0 100644
--- a/client/src/components/modules/ModuleFilter.vue
+++ b/client/src/components/modules/ModuleFilter.vue
@@ -113,11 +113,11 @@ const updateLevel = (level: ModuleLevelNode) => {
 };
 
 const filterByLevel = (module: ModuleNode, level: ModuleLevelNode) => {
-  return level.filterAttributeType === 'ALL' || module.level?.id === level.id;
+  return level.filterAttributeType === 'ALL' || module.level?.id === level.id || module.level === null;
 };
 
 const filterByCategory = (module: ModuleNode, category: ModuleCategoryNode) => {
-  return category.filterAttributeType === 'ALL' || module.category?.id === category.id;
+  return category.filterAttributeType === 'ALL' || module.category?.id === category.id || module.category === null;
 };
 
 const filterByLanguage = (module: ModuleNode, language: string) => {
diff --git a/client/src/pages/instrumentOverview.vue b/client/src/pages/instrumentOverview.vue
index f4d26ee6..29c7b343 100644
--- a/client/src/pages/instrumentOverview.vue
+++ b/client/src/pages/instrumentOverview.vue
@@ -10,7 +10,7 @@
       v-else
     />
     <div class="instrument-overview__list">
-      <FilterBar v-model:filter="searchText"></FilterBar>
+      <FilterBar :search-query="searchText" @update:searchQuery="val => searchText = val"></FilterBar>
       <router-link
         :to="{ name: 'instrument', params: { slug: instrument.slug } }"
         data-cy="instrument"
@@ -29,7 +29,6 @@ import InstrumentEntry from '@/components/instruments/InstrumentEntry.vue';
 import INSTRUMENTS_QUERY from '@/graphql/gql/queries/instrumentsQuery.gql';
 import INSTRUMENT_FILTER_QUERY from 'gql/local/instrumentFilter.gql';
 import FilterBar from '@/components/instruments/FilterBar.vue';
-import ME_QUERY from '@/graphql/gql/queries/meQuery.gql';
 import { graphql } from '@/__generated__';
 
 export default {
@@ -96,9 +95,6 @@ export default {
       instruments = instruments.filter((i) => i.title.toLowerCase().includes(this.searchText.toLowerCase()));
       return instruments;
     },
-    // language() {
-    //   return this.instruments.value?.me.language || 'de';
-    // },
   },
 
   methods: {

From acbb8b7517481409918da43e33c70e5abd34a532 Mon Sep 17 00:00:00 2001
From: Lorenz Padberg <lorenz.padberg@iterativ.ch>
Date: Wed, 30 Aug 2023 11:13:43 +0200
Subject: [PATCH 11/15] Add NoModules and NoIntruments texts when filter leads
 to no result.

---
 .../src/components/modules/ModuleFilter.vue   | 25 +++++++++++++
 client/src/pages/instrumentOverview.vue       | 35 ++++++++++++++++++-
 2 files changed, 59 insertions(+), 1 deletion(-)

diff --git a/client/src/components/modules/ModuleFilter.vue b/client/src/components/modules/ModuleFilter.vue
index cb2697d0..1e4a2fe5 100644
--- a/client/src/components/modules/ModuleFilter.vue
+++ b/client/src/components/modules/ModuleFilter.vue
@@ -17,6 +17,10 @@
 
       <language-switcher class="module-filter__language-switcher" />
     </div>
+    <div class="module-filter__nomodules" v-if="modules.length > 1 && filteredModules.length === 0">
+      <info-icon class="module-filter__nomodules-icon" />
+      <span class="module-filter__nomodules-text">Für die ausgewählten Filtereinstellungen sind keine Module vorhanden</span>
+    </div>
     <div class="topic__modules">
       <module-teaser
         v-for="module in filteredModules"
@@ -35,6 +39,7 @@ import Dropdown from '@/components/ui/Dropdown.vue';
 import LanguageSwitcher from '@/components/LanguageSwitcher.vue';
 import { graphql } from '@/__generated__';
 import { ModuleCategoryNode, ModuleLevelNode, ModuleNode, PrivateUserNode } from '@/__generated__/graphql';
+import InfoIcon from "@/components/icons/InfoIcon.vue";
 
 const props = defineProps<{
   modules: ModuleNode[];
@@ -161,6 +166,7 @@ const updateLastModuleLevelUser = (moduleLevel: ModuleLevelNode) => {
     display: flex;
     justify-content: flex-start;
     column-gap: $medium-spacing;
+    margin-bottom: $medium-spacing;
   }
 
   &__dropdown {
@@ -170,6 +176,25 @@ const updateLastModuleLevelUser = (moduleLevel: ModuleLevelNode) => {
   &__language-switcher {
     margin-left: auto;
   }
+
+  &__nomodules {
+    display: flex;
+    align-items: center;
+  }
+
+  &__nomodules-icon {
+    width: 40px;
+    height: 40px;
+    fill: $color-brand;
+    margin-right: 8px;
+  }
+
+  &__nomodules-text {
+    color: $color-brand;
+    font-family: $sans-serif-font-family;
+    font-weight: $font-weight-regular;
+    margin-right: $medium-spacing;
+  }
 }
 
 .topic {
diff --git a/client/src/pages/instrumentOverview.vue b/client/src/pages/instrumentOverview.vue
index 29c7b343..1c58892d 100644
--- a/client/src/pages/instrumentOverview.vue
+++ b/client/src/pages/instrumentOverview.vue
@@ -10,7 +10,19 @@
       v-else
     />
     <div class="instrument-overview__list">
-      <FilterBar :search-query="searchText" @update:searchQuery="val => searchText = val"></FilterBar>
+      <FilterBar
+        :search-query="searchText"
+        @update:searchQuery="(val) => (searchText = val)"
+      ></FilterBar>
+      <div
+        class="instrument-overview__noinstruments"
+        v-if="instruments.length > 1 && filteredInstruments.length === 0"
+      >
+        <info-icon class="instrument-overview__noinstruments-icon" />
+        <span class="instrument-overview__noinstruments-text"
+          >Für die ausgewählten Filtereinstellungen sind keine Einträge vorhanden</span
+        >
+      </div>
       <router-link
         :to="{ name: 'instrument', params: { slug: instrument.slug } }"
         data-cy="instrument"
@@ -30,9 +42,11 @@ import INSTRUMENTS_QUERY from '@/graphql/gql/queries/instrumentsQuery.gql';
 import INSTRUMENT_FILTER_QUERY from 'gql/local/instrumentFilter.gql';
 import FilterBar from '@/components/instruments/FilterBar.vue';
 import { graphql } from '@/__generated__';
+import InfoIcon from '@/components/icons/InfoIcon.vue';
 
 export default {
   components: {
+    InfoIcon,
     FilterBar,
     InstrumentFilter,
     InstrumentEntry,
@@ -135,5 +149,24 @@ export default {
     @include regular-text;
     @include table-row($color-silver);
   }
+
+   &__noinstruments {
+    display: flex;
+    align-items: center;
+  }
+
+  &__noinstruments-icon {
+    width: 40px;
+    height: 40px;
+    fill: $color-brand;
+    margin-right: 8px;
+  }
+
+  &__noinstruments-text {
+    color: $color-brand;
+    font-family: $sans-serif-font-family;
+    font-weight: $font-weight-regular;
+    margin-right: $medium-spacing;
+  }
 }
 </style>

From 020c4846c4a4709ae83a8061e692ab5d78920ee4 Mon Sep 17 00:00:00 2001
From: Lorenz Padberg <lorenz.padberg@iterativ.ch>
Date: Wed, 30 Aug 2023 14:24:12 +0200
Subject: [PATCH 12/15] Fix comments from PR

---
 client/src/__generated__/gql.ts               |  5 +++
 client/src/__generated__/graphql.ts           |  7 ++++
 .../assignment/FinalSubmission.vue            |  8 ++--
 .../icons/SearchMagnifyingGlass.vue           |  4 +-
 .../src/components/instruments/FilterBar.vue  | 18 +++------
 .../components/instruments/FilterGroup.vue    | 16 --------
 .../src/components/modules/ModuleFilter.vue   | 37 ++++--------------
 client/src/components/ui/InfoMessage.vue      | 33 ++++++++++++++++
 client/src/helpers/app-flavor.constants.ts    |  2 -
 client/src/pages/instrumentOverview.vue       | 38 +++++--------------
 client/src/styles/_variables.scss             |  6 ++-
 server/schema.graphql                         |  1 +
 setup-for-tests.sh                            |  2 +-
 13 files changed, 81 insertions(+), 96 deletions(-)
 create mode 100644 client/src/components/ui/InfoMessage.vue

diff --git a/client/src/__generated__/gql.ts b/client/src/__generated__/gql.ts
index 5dba91ed..b375014a 100644
--- a/client/src/__generated__/gql.ts
+++ b/client/src/__generated__/gql.ts
@@ -24,6 +24,7 @@ const documents = {
     "\n  query ModuleEditModeQuery($slug: String) {\n    module(slug: $slug) {\n      inEditMode @client\n      slug\n    }\n  }\n": types.ModuleEditModeQueryDocument,
     "\n    query ChapterQuery($id: ID!) {\n      chapter(id: $id) {\n        path\n      }\n    }\n  ": types.ChapterQueryDocument,
     "\n    query ContentBlockQuery($id: ID!) {\n      contentBlock(id: $id) {\n        path\n      }\n    }\n  ": types.ContentBlockQueryDocument,
+    "\n        query MeLanguage {\n          me {\n            language @client\n          }\n        }\n      ": types.MeLanguageDocument,
     "\n    query ModuleSnapshotsQuery($slug: String!) {\n      module(slug: $slug) {\n        id\n        title\n        metaTitle\n        slug\n        topic {\n          title\n        }\n        snapshots {\n          ...SnapshotListItem\n        }\n      }\n    }\n  ": types.ModuleSnapshotsQueryDocument,
     "\n  query ModuleSolutions($slug: String) {\n    module(slug: $slug) {\n      solutionsEnabled\n      slug\n    }\n  }\n": types.ModuleSolutionsDocument,
 };
@@ -86,6 +87,10 @@ export function graphql(source: "\n    query ChapterQuery($id: ID!) {\n      cha
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
 export function graphql(source: "\n    query ContentBlockQuery($id: ID!) {\n      contentBlock(id: $id) {\n        path\n      }\n    }\n  "): (typeof documents)["\n    query ContentBlockQuery($id: ID!) {\n      contentBlock(id: $id) {\n        path\n      }\n    }\n  "];
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
+export function graphql(source: "\n        query MeLanguage {\n          me {\n            language @client\n          }\n        }\n      "): (typeof documents)["\n        query MeLanguage {\n          me {\n            language @client\n          }\n        }\n      "];
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
diff --git a/client/src/__generated__/graphql.ts b/client/src/__generated__/graphql.ts
index 849ed0d6..a8bdaf14 100644
--- a/client/src/__generated__/graphql.ts
+++ b/client/src/__generated__/graphql.ts
@@ -616,6 +616,7 @@ export type InstrumentNode = Node & {
   contents?: Maybe<Scalars['GenericStreamFieldType']['output']>;
   id: Scalars['ID']['output'];
   intro: Scalars['String']['output'];
+  language?: Maybe<Scalars['String']['output']>;
   slug: Scalars['String']['output'];
   title: Scalars['String']['output'];
   type?: Maybe<InstrumentTypeNode>;
@@ -2428,6 +2429,11 @@ export type ContentBlockQueryQueryVariables = Exact<{
 
 export type ContentBlockQueryQuery = { __typename?: 'Query', contentBlock?: { __typename?: 'ContentBlockNode', path?: string | null } | null };
 
+export type MeLanguageQueryVariables = Exact<{ [key: string]: never; }>;
+
+
+export type MeLanguageQuery = { __typename?: 'Query', me?: { __typename?: 'PrivateUserNode', language?: string | null } | null };
+
 export type ModuleSnapshotsQueryQueryVariables = Exact<{
   slug: Scalars['String']['input'];
 }>;
@@ -2456,5 +2462,6 @@ export const ModuleTitleQueryDocument = {"kind":"Document","definitions":[{"kind
 export const ModuleEditModeQueryDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"ModuleEditModeQuery"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"slug"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"module"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"slug"},"value":{"kind":"Variable","name":{"kind":"Name","value":"slug"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"inEditMode"},"directives":[{"kind":"Directive","name":{"kind":"Name","value":"client"}}]},{"kind":"Field","name":{"kind":"Name","value":"slug"}}]}}]}}]} as unknown as DocumentNode<ModuleEditModeQueryQuery, ModuleEditModeQueryQueryVariables>;
 export const ChapterQueryDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"ChapterQuery"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"id"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"ID"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"chapter"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"id"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"path"}}]}}]}}]} as unknown as DocumentNode<ChapterQueryQuery, ChapterQueryQueryVariables>;
 export const ContentBlockQueryDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"ContentBlockQuery"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"id"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"ID"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"contentBlock"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"id"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"path"}}]}}]}}]} as unknown as DocumentNode<ContentBlockQueryQuery, ContentBlockQueryQueryVariables>;
+export const MeLanguageDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"MeLanguage"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"me"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"language"},"directives":[{"kind":"Directive","name":{"kind":"Name","value":"client"}}]}]}}]}}]} as unknown as DocumentNode<MeLanguageQuery, MeLanguageQueryVariables>;
 export const ModuleSnapshotsQueryDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"ModuleSnapshotsQuery"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"slug"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"module"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"slug"},"value":{"kind":"Variable","name":{"kind":"Name","value":"slug"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"title"}},{"kind":"Field","name":{"kind":"Name","value":"metaTitle"}},{"kind":"Field","name":{"kind":"Name","value":"slug"}},{"kind":"Field","name":{"kind":"Name","value":"topic"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"title"}}]}},{"kind":"Field","name":{"kind":"Name","value":"snapshots"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"SnapshotListItem"}}]}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"SnapshotListItem"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"SnapshotNode"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"shared"}}]}}]} as unknown as DocumentNode<ModuleSnapshotsQueryQuery, ModuleSnapshotsQueryQueryVariables>;
 export const ModuleSolutionsDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"ModuleSolutions"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"slug"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"module"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"slug"},"value":{"kind":"Variable","name":{"kind":"Name","value":"slug"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"solutionsEnabled"}},{"kind":"Field","name":{"kind":"Name","value":"slug"}}]}}]}}]} as unknown as DocumentNode<ModuleSolutionsQuery, ModuleSolutionsQueryVariables>;
\ No newline at end of file
diff --git a/client/src/components/content-blocks/assignment/FinalSubmission.vue b/client/src/components/content-blocks/assignment/FinalSubmission.vue
index d2894db3..b01ec58d 100644
--- a/client/src/components/content-blocks/assignment/FinalSubmission.vue
+++ b/client/src/components/content-blocks/assignment/FinalSubmission.vue
@@ -71,7 +71,7 @@ export default {
     padding: 15px;
     font-size: toRem(17px);
     font-family: $sans-serif-font-family;
-    margin-bottom: 20px;
+    margin-bottom: $medium-spacing
     font-weight: $font-weight-regular;
 
     overflow-wrap: break-word;
@@ -90,10 +90,10 @@ export default {
   }
 
   &__explanation-icon {
-    width: 40px;
-    height: 40px;
+    width: $large-icon-dimension;
+    height: $large-icon-dimension;
     fill: $color-brand;
-    margin-right: 8px;
+    margin-right: $small-spacing;
   }
 
   &__explanation-text {
diff --git a/client/src/components/icons/SearchMagnifyingGlass.vue b/client/src/components/icons/SearchMagnifyingGlass.vue
index 1ab1408b..f43a3979 100644
--- a/client/src/components/icons/SearchMagnifyingGlass.vue
+++ b/client/src/components/icons/SearchMagnifyingGlass.vue
@@ -1,12 +1,12 @@
-<template>
+`<template>
   <svg
     data-name="shape"
     xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 100 100"
-    id="a"
   >
     <path
       d="m82.3799,17.6201c-6.5254-6.5264-15.2012-10.1201-24.4297-10.1201s-17.9053,3.5938-24.4307,10.1201c-6.5264,6.5254-10.1201,15.2012-10.1201,24.4297,0,8.3906,2.9788,16.3176,8.4223,22.5933l-23.5893,23.5894c-.9766.9766-.9766,2.5586,0,3.5352.4883.4883,1.1279.7324,1.7676.7324s1.2793-.2441,1.7676-.7324l23.5893-23.5894c6.2757,5.4436,14.2028,8.4224,22.5933,8.4224,9.2285,0,17.9043-3.5938,24.4297-10.1201,6.5254-6.5254,10.1201-15.2021,10.1201-24.4307s-3.5938-17.9043-10.1201-24.4297Zm-3.5352,45.3252c-5.5811,5.5811-13.002,8.6553-20.8945,8.6553s-15.3145-3.0742-20.8955-8.6553-8.6553-13.002-8.6553-20.8955,3.0742-15.3135,8.6553-20.8945,13.002-8.6553,20.8955-8.6553,15.3135,3.0742,20.8945,8.6553,8.6553,13.002,8.6553,20.8945-3.0742,15.3145-8.6553,20.8955Z"
     />
   </svg>
 </template>
+`
diff --git a/client/src/components/instruments/FilterBar.vue b/client/src/components/instruments/FilterBar.vue
index c8d05a3c..91d3692b 100644
--- a/client/src/components/instruments/FilterBar.vue
+++ b/client/src/components/instruments/FilterBar.vue
@@ -2,24 +2,23 @@
   <div class="filter-bar">
     <div class="filter-bar__input-wrapper">
       <input
-        class="filter-bar__search-input"
+        class="filter-bar__search-input skillbox-input"
         type="text"
         placeholder="Suchbegriff eingeben..."
         ref="searchInputRef"
         v-model="searchQuery"
         @input="updateSearchQuery"
       />
-      <SearchMagnifyingGlass class="filter-bar__search-icon"></SearchMagnifyingGlass>
+      <search-magnifying-glass class="filter-bar__search-icon"></search-magnifying-glass>
     </div>
-    <language-switcher class="filter-bar__language-selection"/>
-
+    <language-switcher class="filter-bar__language-selection" />
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted} from 'vue';
+import { ref, onMounted } from 'vue';
 import SearchMagnifyingGlass from '@/components/icons/SearchMagnifyingGlass.vue';
-import LanguageSwitcher from "@/components/LanguageSwitcher.vue";
+import LanguageSwitcher from '@/components/LanguageSwitcher.vue';
 
 const searchQuery = ref('');
 const searchInputRef = ref(null);
@@ -44,16 +43,11 @@ onMounted(() => {
 
   &__input-wrapper {
     position: relative;
-    width: 380px; // With from modules, has nothing to do with it but at least it is the same width
-    max-width: 500px;
   }
 
   &__search-input {
-    width: 100%;
-    padding: 1rem;
-    border-radius: $input-border-radius;
+    width: $medium-input-width;
     border: 1px solid $color-silver;
-    font-size: $base-font-size-pixels;
   }
 
   &__search-icon {
diff --git a/client/src/components/instruments/FilterGroup.vue b/client/src/components/instruments/FilterGroup.vue
index 62809e9b..76d02577 100644
--- a/client/src/components/instruments/FilterGroup.vue
+++ b/client/src/components/instruments/FilterGroup.vue
@@ -26,7 +26,6 @@
 <script>
 import { defineComponent } from 'vue';
 import FilterEntry from '@/components/instruments/FilterEntry.vue';
-
 import SET_FILTER_MUTATION from 'gql/local/mutations/setInstrumentFilter.gql';
 
 export default defineComponent({
@@ -47,21 +46,6 @@ export default defineComponent({
   components: {
     FilterEntry,
   },
-
-  // TODO: Ramon: I think this code is not needed anymore
-  // apollo: {
-  //   instrumentFilter: {
-  //     query: INSTRUMENT_FILTER_QUERY,
-  //   },
-  // },
-
-  data() {
-    return {
-      instrumentFilter: {
-        currentFilter: '',
-      },
-    };
-  },
   inheritAttrs: false,
 
   methods: {
diff --git a/client/src/components/modules/ModuleFilter.vue b/client/src/components/modules/ModuleFilter.vue
index 1e4a2fe5..e58305b3 100644
--- a/client/src/components/modules/ModuleFilter.vue
+++ b/client/src/components/modules/ModuleFilter.vue
@@ -17,10 +17,11 @@
 
       <language-switcher class="module-filter__language-switcher" />
     </div>
-    <div class="module-filter__nomodules" v-if="modules.length > 1 && filteredModules.length === 0">
-      <info-icon class="module-filter__nomodules-icon" />
-      <span class="module-filter__nomodules-text">Für die ausgewählten Filtereinstellungen sind keine Module vorhanden</span>
-    </div>
+    <info-message
+      class="module-filter__no-modules-text"
+      v-if="modules.length > 1 && filteredModules.length === 0"
+      >Für die ausgewählten Filtereinstellungen sind keine {{ $flavor.textModules }} vorhanden
+    </info-message>
     <div class="topic__modules">
       <module-teaser
         v-for="module in filteredModules"
@@ -39,7 +40,7 @@ import Dropdown from '@/components/ui/Dropdown.vue';
 import LanguageSwitcher from '@/components/LanguageSwitcher.vue';
 import { graphql } from '@/__generated__';
 import { ModuleCategoryNode, ModuleLevelNode, ModuleNode, PrivateUserNode } from '@/__generated__/graphql';
-import InfoIcon from "@/components/icons/InfoIcon.vue";
+import InfoMessage from '@/components/ui/InfoMessage.vue';
 
 const props = defineProps<{
   modules: ModuleNode[];
@@ -118,11 +119,11 @@ const updateLevel = (level: ModuleLevelNode) => {
 };
 
 const filterByLevel = (module: ModuleNode, level: ModuleLevelNode) => {
-  return level.filterAttributeType === 'ALL' || module.level?.id === level.id || module.level === null;
+  return level.filterAttributeType === 'ALL' || module.level?.id === level.id || !module.level;
 };
 
 const filterByCategory = (module: ModuleNode, category: ModuleCategoryNode) => {
-  return category.filterAttributeType === 'ALL' || module.category?.id === category.id || module.category === null;
+  return category.filterAttributeType === 'ALL' || module.category?.id === category.id || !module.category;
 };
 
 const filterByLanguage = (module: ModuleNode, language: string) => {
@@ -159,9 +160,6 @@ const updateLastModuleLevelUser = (moduleLevel: ModuleLevelNode) => {
 @import 'styles/helpers';
 
 .module-filter {
-  // TODO: how do I correcty set the with of the whole thig including the grid for the modules?
-  // TODO: Farbe des Arrows für Dropdowns muss platfrom habhängig sein MS-775
-
   &__filter-selection {
     display: flex;
     justify-content: flex-start;
@@ -176,25 +174,6 @@ const updateLastModuleLevelUser = (moduleLevel: ModuleLevelNode) => {
   &__language-switcher {
     margin-left: auto;
   }
-
-  &__nomodules {
-    display: flex;
-    align-items: center;
-  }
-
-  &__nomodules-icon {
-    width: 40px;
-    height: 40px;
-    fill: $color-brand;
-    margin-right: 8px;
-  }
-
-  &__nomodules-text {
-    color: $color-brand;
-    font-family: $sans-serif-font-family;
-    font-weight: $font-weight-regular;
-    margin-right: $medium-spacing;
-  }
 }
 
 .topic {
diff --git a/client/src/components/ui/InfoMessage.vue b/client/src/components/ui/InfoMessage.vue
new file mode 100644
index 00000000..5a352163
--- /dev/null
+++ b/client/src/components/ui/InfoMessage.vue
@@ -0,0 +1,33 @@
+<template>
+  <div class="info-message">
+    <info-icon class="info-message__icon" />
+    <span class="info-message__text"><slot></slot> </span>
+  </div>
+</template>
+
+<script setup lang="ts">
+import InfoIcon from '@/components/icons/InfoIcon.vue';
+</script>
+
+
+<style scoped lang="scss">
+@import 'styles/helpers';
+
+.info-message {
+  display: flex;
+  align-items: center;
+
+  &__icon {
+    width: $large-icon-dimension;
+    height: $large-icon-dimension;
+    fill: $color-brand;
+    margin-right: $small-spacing;
+  }
+
+  &__text {
+    @include regular-text;
+    color: $color-brand;
+    margin-right: $medium-spacing;
+  }
+}
+</style>
diff --git a/client/src/helpers/app-flavor.constants.ts b/client/src/helpers/app-flavor.constants.ts
index e4683663..1e7fa493 100644
--- a/client/src/helpers/app-flavor.constants.ts
+++ b/client/src/helpers/app-flavor.constants.ts
@@ -59,7 +59,6 @@ export const dhaValues: FlavorValues = Object.assign({}, myKvValues, {
   appLogo: 'https://skillbox-my-detailhandel-dha-prod.s3.eu-central-1.amazonaws.com/myDHA-logo.png',
   textAppName: 'myDHA',
   helloIllustration: 'HelloMyDHAIllustration',
-  showInstrumentSubCategories: false,
 });
 
 export const dhfValues: FlavorValues = Object.assign({}, myKvValues, {
@@ -69,5 +68,4 @@ export const dhfValues: FlavorValues = Object.assign({}, myKvValues, {
   appLogo: 'https://skillbox-my-detailhandel-dhf-prod.s3.eu-central-1.amazonaws.com/myDHF-logo.png',
   textAppName: 'myDHF',
   helloIllustration: 'HelloMyDHFIllustration',
-  showInstrumentSubCategories: false,
 });
diff --git a/client/src/pages/instrumentOverview.vue b/client/src/pages/instrumentOverview.vue
index 1c58892d..ed77d0f0 100644
--- a/client/src/pages/instrumentOverview.vue
+++ b/client/src/pages/instrumentOverview.vue
@@ -10,19 +10,17 @@
       v-else
     />
     <div class="instrument-overview__list">
-      <FilterBar
+      <filter-bar
         :search-query="searchText"
         @update:searchQuery="(val) => (searchText = val)"
-      ></FilterBar>
-      <div
-        class="instrument-overview__noinstruments"
+      ></filter-bar>
+
+      <info-message
+        class="instrument-overview__no-instruments"
         v-if="instruments.length > 1 && filteredInstruments.length === 0"
       >
-        <info-icon class="instrument-overview__noinstruments-icon" />
-        <span class="instrument-overview__noinstruments-text"
-          >Für die ausgewählten Filtereinstellungen sind keine Einträge vorhanden</span
-        >
-      </div>
+        Für die ausgewählten Filtereinstellungen sind keine Einträge vorhanden
+      </info-message>
       <router-link
         :to="{ name: 'instrument', params: { slug: instrument.slug } }"
         data-cy="instrument"
@@ -43,9 +41,11 @@ import INSTRUMENT_FILTER_QUERY from 'gql/local/instrumentFilter.gql';
 import FilterBar from '@/components/instruments/FilterBar.vue';
 import { graphql } from '@/__generated__';
 import InfoIcon from '@/components/icons/InfoIcon.vue';
+import InfoMessage from '@/components/ui/InfoMessage.vue';
 
 export default {
   components: {
+    InfoMessage,
     InfoIcon,
     FilterBar,
     InstrumentFilter,
@@ -145,28 +145,8 @@ export default {
 
   &__list-item {
     padding: $medium-spacing 0;
-
     @include regular-text;
     @include table-row($color-silver);
   }
-
-   &__noinstruments {
-    display: flex;
-    align-items: center;
-  }
-
-  &__noinstruments-icon {
-    width: 40px;
-    height: 40px;
-    fill: $color-brand;
-    margin-right: 8px;
-  }
-
-  &__noinstruments-text {
-    color: $color-brand;
-    font-family: $sans-serif-font-family;
-    font-weight: $font-weight-regular;
-    margin-right: $medium-spacing;
-  }
 }
 </style>
diff --git a/client/src/styles/_variables.scss b/client/src/styles/_variables.scss
index fe1456de..0fcf442f 100644
--- a/client/src/styles/_variables.scss
+++ b/client/src/styles/_variables.scss
@@ -83,7 +83,11 @@ $popover-default-bottom: -110px;
 $footer-width: 800px;
 $news-width: 550px;
 
+
+$medium-input-width: 380px;
+
 $screen-width: 1200px;
 
-$default-icon-dimension: 25px;
 $small-icon-dimension: 14px;
+$default-icon-dimension: 25px;
+$large-icon-dimension: 40px;
diff --git a/server/schema.graphql b/server/schema.graphql
index 5227da9c..3ec25054 100644
--- a/server/schema.graphql
+++ b/server/schema.graphql
@@ -559,6 +559,7 @@ type InstrumentNode implements Node {
   id: ID!
   bookmarks: [InstrumentBookmarkNode]
   type: InstrumentTypeNode
+  language: String
 }
 
 type InstrumentNodeConnection {
diff --git a/setup-for-tests.sh b/setup-for-tests.sh
index 67b912ca..017a60a0 100755
--- a/setup-for-tests.sh
+++ b/setup-for-tests.sh
@@ -16,4 +16,4 @@ export OAUTH_AUTHORIZE_URL=https://hepverlag-cms.grape.novu.ch/oauth/authorize
 export OAUTH_API_BASE_URL=https://hepverlag-cms.grape.novu.ch/
 export OAUTH_LOCAL_REDIRECT_URI=http://localhost:8000/api/oauth/callback/
 export NODE_OPTIONS=--max_old_space_size=3072
-pipenv install --dev --system
+#pipenv install --dev --system

From d059a4d82a6c7ee3a8c679ea958b4038814d5f04 Mon Sep 17 00:00:00 2001
From: Lorenz Padberg <lorenz.padberg@iterativ.ch>
Date: Wed, 30 Aug 2023 14:33:54 +0200
Subject: [PATCH 13/15] Add flavor for showModuleFilters

---
 client/src/components/modules/Module.vue       | 2 +-
 client/src/components/modules/ModuleFilter.vue | 2 +-
 client/src/components/modules/ModuleTeaser.vue | 2 +-
 client/src/helpers/app-flavor.constants.ts     | 2 ++
 client/src/helpers/types.ts                    | 1 +
 5 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/client/src/components/modules/Module.vue b/client/src/components/modules/Module.vue
index 364a5034..29c67e1c 100644
--- a/client/src/components/modules/Module.vue
+++ b/client/src/components/modules/Module.vue
@@ -13,7 +13,7 @@
           {{ module.metaTitle }}
         </h2>
 
-      <div class="module__categoryindicators">
+      <div class="module__categoryindicators" v-if="$flavor.showModuleFilter">
         <pill :text="module.level?.name"></pill>
         <pill :text="module.category?.name"></pill>
       </div>
diff --git a/client/src/components/modules/ModuleFilter.vue b/client/src/components/modules/ModuleFilter.vue
index e58305b3..ca5b0a56 100644
--- a/client/src/components/modules/ModuleFilter.vue
+++ b/client/src/components/modules/ModuleFilter.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="module-filter">
-    <div class="module-filter__filter-selection">
+    <div class="module-filter__filter-selection" v-if="$flavor.showModuleFilter">
       <Dropdown
         class="module-filter__dropdown"
         :selected-item="selectedLevel"
diff --git a/client/src/components/modules/ModuleTeaser.vue b/client/src/components/modules/ModuleTeaser.vue
index 37f12baf..aa7fd33f 100644
--- a/client/src/components/modules/ModuleTeaser.vue
+++ b/client/src/components/modules/ModuleTeaser.vue
@@ -15,7 +15,7 @@
       <p class="module-teaser__description">
         {{ teaser }}
       </p>
-      <div class="module-teaser__pills">
+      <div class="module-teaser__pills" v-if="$flavor.showModuleFilter">
         <pill :text="level?.name"></pill>
         <pill :text="category?.name"></pill>
       </div>
diff --git a/client/src/helpers/app-flavor.constants.ts b/client/src/helpers/app-flavor.constants.ts
index 1e7fa493..e554b01c 100644
--- a/client/src/helpers/app-flavor.constants.ts
+++ b/client/src/helpers/app-flavor.constants.ts
@@ -24,6 +24,7 @@ export const defaultFlavorValues: FlavorValues = {
   showPortfolio: true,
   showEHB: true,
   helloIllustration: 'HelloIllustration',
+  showModuleFilter: false,
 };
 
 export const myKvValues: FlavorValues = {
@@ -50,6 +51,7 @@ export const myKvValues: FlavorValues = {
   showInstrumentSubCategories: false,
   showEHB: false,
   helloIllustration: 'HelloMyKVIllustration',
+  showModuleFilter: true,
 };
 
 export const dhaValues: FlavorValues = Object.assign({}, myKvValues, {
diff --git a/client/src/helpers/types.ts b/client/src/helpers/types.ts
index 3525a790..14b39716 100644
--- a/client/src/helpers/types.ts
+++ b/client/src/helpers/types.ts
@@ -18,4 +18,5 @@ export interface FlavorValues {
   showPortfolio: boolean;
   showEHB: boolean;
   helloIllustration: string;
+  showModuleFilter: boolean;
 }

From 87d807f14291d6aa635b6bee67a19bf3243ccbb2 Mon Sep 17 00:00:00 2001
From: Lorenz Padberg <lorenz.padberg@iterativ.ch>
Date: Wed, 30 Aug 2023 14:59:04 +0200
Subject: [PATCH 14/15] Fix typo

---
 .../components/content-blocks/assignment/FinalSubmission.vue    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/components/content-blocks/assignment/FinalSubmission.vue b/client/src/components/content-blocks/assignment/FinalSubmission.vue
index b01ec58d..067b5cfd 100644
--- a/client/src/components/content-blocks/assignment/FinalSubmission.vue
+++ b/client/src/components/content-blocks/assignment/FinalSubmission.vue
@@ -71,7 +71,7 @@ export default {
     padding: 15px;
     font-size: toRem(17px);
     font-family: $sans-serif-font-family;
-    margin-bottom: $medium-spacing
+    margin-bottom: $medium-spacing;
     font-weight: $font-weight-regular;
 
     overflow-wrap: break-word;

From 7959b1e53c36bb40260d094e90c1d56267b9bf42 Mon Sep 17 00:00:00 2001
From: Lorenz Padberg <lorenz.padberg@iterativ.ch>
Date: Wed, 30 Aug 2023 16:13:35 +0200
Subject: [PATCH 15/15] Reset setup-for-tests.sh

---
 setup-for-tests.sh | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/setup-for-tests.sh b/setup-for-tests.sh
index 017a60a0..67b912ca 100755
--- a/setup-for-tests.sh
+++ b/setup-for-tests.sh
@@ -16,4 +16,4 @@ export OAUTH_AUTHORIZE_URL=https://hepverlag-cms.grape.novu.ch/oauth/authorize
 export OAUTH_API_BASE_URL=https://hepverlag-cms.grape.novu.ch/
 export OAUTH_LOCAL_REDIRECT_URI=http://localhost:8000/api/oauth/callback/
 export NODE_OPTIONS=--max_old_space_size=3072
-#pipenv install --dev --system
+pipenv install --dev --system