From 97a7747933d2b515cc03ab8243e6a8ae702ef16a Mon Sep 17 00:00:00 2001
From: undergroundwires <undergroundwires@users.noreply.github.com>
Date: Sat, 11 Jan 2020 08:57:06 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=91=80=F0=9F=94=8D=20=20showing=20search?=
 =?UTF-8?q?=20queries?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 CHANGELOG.md                            |  3 ++-
 src/presentation/Scripts/TheScripts.vue | 28 ++++++++++++++++++++-----
 2 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index fe4746ce..a5dc2f69 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,7 +5,8 @@
 ## Unreleased
 
 - Fixed search bug
-- Hiding grouping while searching 
+- Hiding grouping while searching
+- Showing search queries when searching
 
 ## [0.4.0] - 2020-01-11
 
diff --git a/src/presentation/Scripts/TheScripts.vue b/src/presentation/Scripts/TheScripts.vue
index 318f0e77..4f8af266 100644
--- a/src/presentation/Scripts/TheScripts.vue
+++ b/src/presentation/Scripts/TheScripts.vue
@@ -8,13 +8,15 @@
         </div>
         <div class="scripts">
             <div v-if="!isSearching || searchHasMatches">
-                    <CardList v-if="showCards" />
-                    <div v-else-if="showList" class="tree">
+                    <CardList v-if="this.showCards" />
+                    <div v-else-if="this.showList" class="tree">
+                        <div v-if="this.isSearching" class="search-query">
+                            Searching for "{{this.searchQuery | threeDotsTrim}}"</div>
                         <ScriptsTree />
                     </div>
                     </div>
                     <div v-else class="search-no-matches">
-                        Search has no matches 😞
+                        Sorry, no matches for "{{this.searchQuery | threeDotsTrim}}" 😞
                         Feel free to extend the scripts <a :href="repositoryUrl" target="_blank" class="child github" >here</a>.
             </div>
         </div>
@@ -41,11 +43,21 @@
         ScriptsTree,
         CardList,
     },
+    filters: {
+        threeDotsTrim(query: string) {
+            const threshold = 30;
+            if (query.length <= threshold - 3) {
+                return query;
+            }
+            return `${query.substr(0, threshold)}...`;
+        },
+    },
     })
     export default class TheScripts extends StatefulVue {
         public showCards = false;
         public showList = false;
         public repositoryUrl = '';
+        private searchQuery = '';
         private isSearching = false;
         private searchHasMatches = false;
 
@@ -59,6 +71,7 @@
                 this.updateGroups();
             });
             state.filter.filtered.on((result: IFilterResult) => {
+                this.searchQuery = result.query;
                 this.isSearching = true;
                 this.searchHasMatches = result.hasAnyMatches();
                 this.updateGroups();
@@ -97,8 +110,13 @@
     }
     .tree {
         padding-left: 3%;
-        margin-top: 15px; // Card margin
-        margin-bottom: 15px; // Card margin
+        padding-top: 15px;
+        padding-bottom: 15px;
+        .search-query {
+            display: flex;
+            justify-content: center;
+            color: $gray;
+        }
     }
 }
 .help-container {