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] 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>