🚀 0.4.1 release

CHANGELOG.md

@@ -2,7 +2,13 @@
 
 - All notable changes to this project will be documented in this file.
 
-## [Unreleased]
+## Unreleased
+
+## [0.4.1] - 2020-01-11
+
+- Fixed & improved search
+- Hiding grouping while searching
+- Showing search queries when searching
 
 ## [0.4.0] - 2020-01-11
 
@@ -33,7 +39,8 @@
 
 ## All releases
 
-- [Unreleased] : https://github.com/undergroundwires/privacy.sexy/compare/v0.4.0...HEAD
+- [Unreleased] : https://github.com/undergroundwires/privacy.sexy/compare/v0.4.1...HEAD
+- [v0.4.0] : https://github.com/undergroundwires/privacy.sexy/compare/v0.4.0...v0.4.1
 - [v0.4.0] : https://github.com/undergroundwires/privacy.sexy/compare/v0.3.0...v0.4.0
 - [v0.3.0] : https://github.com/undergroundwires/privacy.sexy/compare/v0.2.0...v0.3.0
 - [v0.2.0] : https://github.com/undergroundwires/privacy.sexy/compare/v0.1.0...v0.2.0

src/application/State/Filter/UserFilter.ts

@@ -16,12 +16,13 @@ export class UserFilter implements IUserFilter {
         if (!filter) {
             throw new Error('Filter must be defined and not empty. Use removeFilter() to remove the filter');
         }
+        const filterLowercase = filter.toLocaleLowerCase();
         const filteredScripts = this.application.getAllScripts().filter(
             (script) =>
-            script.name.toLowerCase().includes(filter.toLowerCase()) ||
-            script.code.toLowerCase().includes(filter.toLowerCase()));
+            script.name.toLowerCase().includes(filterLowercase) ||
+            script.code.toLowerCase().includes(filterLowercase));
         const filteredCategories = this.application.getAllCategories().filter(
-            (script) => script.name.toLowerCase().includes(filter.toLowerCase()));
+            (script) => script.name.toLowerCase().includes(filterLowercase));
 
         const matches = new FilterResult(
             filteredScripts,

src/application/application.yaml

@@ -1,5 +1,5 @@
 name: privacy.sexy
-version: 0.4.0
+version: 0.4.1
 repositoryUrl: https://github.com/undergroundwires/privacy.sexy
 actions:
     -

src/presentation/Scripts/ScriptsTree/SelectableTree/SelectableTree.vue

@@ -38,7 +38,7 @@
         @Prop() public initialNodes?: ReadonlyArray<INode>;
 
         public initialLiquourTreeNodes?: ILiquorTreeNewNode[] = null;
-        public liquorTreeOptions = DefaultOptions;
+        public liquorTreeOptions = this.getDefaults();
         public convertExistingToNode = convertExistingToNode;
 
         public mounted() {
@@ -98,6 +98,27 @@
             }
             return (this.$refs.treeElement as any).tree;
         }
+
+        private getDefaults(): ILiquorTreeOptions {
+            return {
+                multiple: true,
+                checkbox: true,
+                checkOnSelect: true,
+                autoCheckChildren: true,
+                parentSelect: false,
+                keyboardNavigation: true,
+                deletion: (node) => !node.children || node.children.length === 0,
+                filter: {
+                    matcher: (query: string, node: ILiquorTreeExistingNode) => {
+                        if (!this.filterPredicate) {
+                            throw new Error('Cannot filter as predicate is null');
+                        }
+                        return this.filterPredicate(convertExistingToNode(node));
+                    },
+                    emptyText: '🕵️Hmm.. Can not see one 🧐',
+                },
+            };
+        }
     }
 
     function recurseDown(
@@ -132,25 +153,6 @@
         }
         return result;
     }
-
-    const DefaultOptions: ILiquorTreeOptions = {
-        multiple: true,
-        checkbox: true,
-        checkOnSelect: true,
-        autoCheckChildren: true,
-        parentSelect: false,
-        keyboardNavigation: true,
-        deletion: (node) => !node.children || node.children.length === 0,
-        filter: {
-            matcher: (query: string, node: ILiquorTreeExistingNode) => {
-                if (!this.filterPredicate) {
-                    throw new Error('Cannot filter as predicate is null');
-                }
-                return this.filterPredicate(convertExistingToNode(node));
-            },
-            emptyText: '🕵️Hmm.. Can not see one 🧐',
-        },
-    };
 </script>
 
 

src/presentation/Scripts/TheScripts.vue

@@ -3,17 +3,20 @@
         <div class="help-container">
             <TheSelector class="left" />
             <TheGrouper class="right"
-                v-on:groupingChanged="onGroupingChanged($event)" />
+                v-on:groupingChanged="onGroupingChanged($event)"
+                v-show="!this.isSearching" />
         </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>
@@ -40,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;
 
@@ -58,6 +71,7 @@
                 this.updateGroups();
             });
             state.filter.filtered.on((result: IFilterResult) => {
+                this.searchQuery = result.query;
                 this.isSearching = true;
                 this.searchHasMatches = result.hasAnyMatches();
                 this.updateGroups();
@@ -96,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 {

src/presentation/TheSearchBar.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="container">
         <div class="search">
-            <input type="text" class="searchTerm" placeholder="Search"
+            <input type="search" class="searchTerm" placeholder="Search"
               @input="updateFilterAsync($event.target.value)" >
             <div class="iconWrapper">
                 <font-awesome-icon :icon="['fas', 'search']" />