From 095bd3612c23691168cb01b2566fbb553caa08a5 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Fri, 13 Aug 2021 21:48:28 +0100
Subject: [PATCH] :construction: Show all when search field has value

---
 src/components/MinimalView/MinimalSection.vue |  8 ++++--
 src/views/Minimal.vue                         | 28 +++++++++++++++----
 2 files changed, 29 insertions(+), 7 deletions(-)

diff --git a/src/components/MinimalView/MinimalSection.vue b/src/components/MinimalView/MinimalSection.vue
index 9fd816cf..9fb55b82 100644
--- a/src/components/MinimalView/MinimalSection.vue
+++ b/src/components/MinimalView/MinimalSection.vue
@@ -1,6 +1,6 @@
 <template>
-   <div :class="`minimal-section-inner ${selected ? 'selected' : ''}`">
-    <div class="section-items" v-if="selected">
+   <div :class="`minimal-section-inner ${selected ? 'selected' : ''} ${showAll ? 'show-all': ''}`">
+    <div class="section-items" v-if="selected || showAll">
       <Item
         v-for="(item, index) in items"
         :id="`${index}_${makeId(item.title)}`"
@@ -48,6 +48,7 @@ export default {
     modalOpen: Boolean,
     index: Number,
     selected: Boolean,
+    showAll: Boolean,
   },
   components: {
     Item,
@@ -107,6 +108,9 @@ export default {
     border: 1px solid var(--primary);
     grid-column-start: span var(--col-count, 3);
   }
+  &.show-all {
+    border: none;
+  }
 }
 
 </style>
diff --git a/src/views/Minimal.vue b/src/views/Minimal.vue
index 734ee51e..1e551336 100644
--- a/src/views/Minimal.vue
+++ b/src/views/Minimal.vue
@@ -4,9 +4,10 @@
       <router-link to="/">
         <h1>{{ pageInfo.title }}</h1>
       </router-link>
-      <MinimalSearch />
+      <MinimalSearch @user-is-searchin="(s) => { this.searchValue = s; }" />
     </div>
-    <div v-if="checkTheresData(sections)" class="item-group-container">
+    <div v-if="checkTheresData(sections)"
+      :class="`item-group-container ${!tabbedView ? 'showing-all' : ''}`">
       <!-- Section heading buttons -->
       <MinimalHeading
         v-for="(section, index) in getSections(sections)"
@@ -15,6 +16,7 @@
         :title="section.name"
         :selected="selectedSection === index"
         @sectionSelected="sectionSelected"
+        class="headings"
       />
       <!-- Section item groups -->
       <MinimalSection
@@ -26,11 +28,12 @@
         :groupId="`section-${index}`"
         :items="filterTiles(section.items)"
         :selected="selectedSection === index"
+        :showAll="!tabbedView"
         itemSize="small"
         @sectionSelected="sectionSelected"
-         @itemClicked="finishedSearching()"
-         @change-modal-visibility="updateModalVisibility"
-         :class="(filterTiles(section.items).length === 0 && searchValue) ? 'no-results' : ''"
+        @itemClicked="finishedSearching()"
+        @change-modal-visibility="updateModalVisibility"
+        :class="(filterTiles(section.items).length === 0 && searchValue) ? 'no-results' : ''"
       />
     </div>
   </div>
@@ -60,7 +63,14 @@ export default {
     layout: '',
     modalOpen: false, // When true, keybindings are disabled
     selectedSection: 0, // The index of currently selected section
+    tabbedView: true, // By default use tabs, when searching then show all instead
   }),
+  watch: {
+    /* When the theme changes, then call the update method */
+    searchValue() {
+      this.tabbedView = !this.searchValue.length > 0;
+    },
+  },
   methods: {
     sectionSelected(index) {
       this.selectedSection = index;
@@ -201,6 +211,14 @@ export default {
 
   /* Hide when search term returns nothing */
   .no-results { display: none; }
+
+  &.showing-all {
+    flex-direction: column;
+    display: flex;
+    .headings {
+      display: none;
+    }
+  }
 }
 
 .no-data {