From e03260d28de346ba9f75f78f1a02e897328b2ce6 Mon Sep 17 00:00:00 2001
From: Alina Beck <alina.beck@mail.com>
Date: Mon, 23 Mar 2020 13:57:56 +0100
Subject: [PATCH] disable tabs when 0 results found

---
 .../_new/features/SearchResults/SearchResults.vue    | 12 ++++++++++--
 .../_new/generic/TabNavigation/TabNavigation.vue     | 10 +++++++++-
 2 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/webapp/components/_new/features/SearchResults/SearchResults.vue b/webapp/components/_new/features/SearchResults/SearchResults.vue
index 54e3f73a4..7c6890619 100644
--- a/webapp/components/_new/features/SearchResults/SearchResults.vue
+++ b/webapp/components/_new/features/SearchResults/SearchResults.vue
@@ -54,8 +54,16 @@ export default {
     },
     tabOptions() {
       return [
-        { type: 'Post', title: `${this.posts.length} Posts` },
-        { type: 'User', title: `${this.users.length} Users` },
+        {
+          type: 'Post',
+          title: `${this.posts.length} Posts`,
+          disabled: !this.posts.length,
+        },
+        {
+          type: 'User',
+          title: `${this.users.length} Users`,
+          disabled: !this.users.length,
+        },
       ]
     },
   },
diff --git a/webapp/components/_new/generic/TabNavigation/TabNavigation.vue b/webapp/components/_new/generic/TabNavigation/TabNavigation.vue
index a039efa58..bd6d2bc5c 100644
--- a/webapp/components/_new/generic/TabNavigation/TabNavigation.vue
+++ b/webapp/components/_new/generic/TabNavigation/TabNavigation.vue
@@ -3,7 +3,7 @@
     <li
       v-for="tab in tabs"
       :key="tab.type"
-      :class="[activeTab === tab.type && '--active', 'tab']"
+      :class="[activeTab === tab.type && '--active', tab.disabled && '--disabled', 'tab']"
       role="button"
       @click="$emit('switchTab', tab.type)"
     >
@@ -25,6 +25,7 @@ export default {
   },
 }
 </script>
+
 <style lang="scss">
 .tabs {
   display: flex;
@@ -43,6 +44,13 @@ export default {
       border: none;
     }
 
+    &.--disabled {
+      background: $background-color-disabled;
+      border: 1px solid $color-neutral-80;
+      pointer-events: none;
+      cursor: default;
+    }
+
     &:hover:not(.--active) {
       background: $color-neutral-85;
     }