From 66c17aa82c0762bc8b941dd6bd4099387059dfb2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Yi=C4=9Fit=20FINDIKLI?= <yigitfindikli@gmail.com>
Date: Thu, 18 Feb 2021 11:26:44 +0300
Subject: [PATCH] Fixed #985 - Add Search to Showcase

---
 src/AppMenu.vue                  | 46 +++++++++++++++++++++++++++++++-
 src/assets/styles/app/_menu.scss | 14 ++++++++--
 2 files changed, 57 insertions(+), 3 deletions(-)

diff --git a/src/AppMenu.vue b/src/AppMenu.vue
index 10cbed408..7df2bd8d2 100755
--- a/src/AppMenu.vue
+++ b/src/AppMenu.vue
@@ -1,5 +1,10 @@
 <template>
     <div :class="['layout-sidebar', {'active': active}]">
+        <div class="layout-sidebar-filter p-fluid p-input-filled">
+            <AutoComplete v-model="selectedRoute" :suggestions="filteredRoutes" @complete="searchRoute($event)" @item-select="onItemSelect($event)" scrollHeight="300px" placeholder="Search by name..." 
+                field="name" optionGroupLabel="name" optionGroupChildren="children">
+            </AutoComplete>
+        </div>
         <div class="layout-menu">
             <template v-for="item of menu" :key="item.name">
                 <div class="menu-category">{{item.name}}</div>
@@ -41,6 +46,7 @@
 
 <script>
 import MenuService from './service/MenuService';
+import {FilterService,FilterMatchMode} from 'primevue/api';
 
 export default {
     props: {
@@ -49,7 +55,10 @@ export default {
     data() {
         return {
             activeSubmenus: {},
-            menu: null
+            menu: null,
+            filteredRoutes: null,
+            selectedRoute: null,
+            routes: []
         }
     },
     menuService: null,
@@ -59,6 +68,20 @@ export default {
     mounted() {
         this.menuService.getMenu().then(data => {
             this.menu = data;
+
+            this.routes = data.reduce((routeArray,route) => {
+                route.children = route.children.filter((childRoute) => {
+                    if (childRoute.meta) {
+                        routeArray.push(childRoute);
+                    }
+
+                    return !childRoute.meta;
+                })
+
+                routeArray.push(route);
+
+                return routeArray;                
+            }, []);
         })
     },
     methods: {
@@ -76,6 +99,27 @@ export default {
                 return true;
             }
             return false;
+        },
+        searchRoute(event) {
+            let query = event.query;
+            let filteredRoutes = [];
+
+            for (let route of this.routes) {
+                let filteredItems = FilterService.filter(route.children, ['to', 'href'], query, FilterMatchMode.CONTAINS);
+                if (filteredItems && filteredItems.length) {
+                    filteredRoutes.push({...route, ...{items: filteredItems}});
+                }
+            }
+
+            this.filteredRoutes = filteredRoutes;
+        },
+        onItemSelect(event) {
+            this.selectedRoute = null;
+            
+            if (event.value.to)
+                this.$router.push(event.value.to)
+            else if (event.value.href)
+                window.location.href = event.value.href;
         }
     }
 }
diff --git a/src/assets/styles/app/_menu.scss b/src/assets/styles/app/_menu.scss
index 55a94b796..e5b4e46cd 100644
--- a/src/assets/styles/app/_menu.scss
+++ b/src/assets/styles/app/_menu.scss
@@ -4,14 +4,18 @@
     top: 70px;
     height: calc(100% - 70px);
     background-color: var(--surface-a);
-    overflow: auto;
     width: 250px;
     border-right: 1px solid var(--surface-d);
     user-select: none;
-    padding: 1rem;
     transition: transform .4s cubic-bezier(.05,.74,.2,.99);
+    display: flex;
+    flex-direction: column;
 
     .layout-menu {
+        padding: 0 1rem;
+        overflow-y: auto;
+        flex-grow: 1;
+
         .menu-category {
             display: block;
             color: var(--text-color-secondary);
@@ -87,4 +91,10 @@
             }
         }
     }
+
+    .layout-sidebar-filter {
+        padding: 1.25rem 1rem;
+        border-bottom: 1px solid var(--surface-d);
+        background-color: var(--surface-a);
+    }
 }
\ No newline at end of file