pull/1021/head
Cagatay Civici 2021-02-18 11:45:18 +03:00
commit 5c73dad042
2 changed files with 57 additions and 3 deletions

View File

@ -1,5 +1,10 @@
<template> <template>
<div :class="['layout-sidebar', {'active': active}]"> <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"> <div class="layout-menu">
<template v-for="item of menu" :key="item.name"> <template v-for="item of menu" :key="item.name">
<div class="menu-category">{{item.name}}</div> <div class="menu-category">{{item.name}}</div>
@ -41,6 +46,7 @@
<script> <script>
import MenuService from './service/MenuService'; import MenuService from './service/MenuService';
import {FilterService,FilterMatchMode} from 'primevue/api';
export default { export default {
props: { props: {
@ -49,7 +55,10 @@ export default {
data() { data() {
return { return {
activeSubmenus: {}, activeSubmenus: {},
menu: null menu: null,
filteredRoutes: null,
selectedRoute: null,
routes: []
} }
}, },
menuService: null, menuService: null,
@ -59,6 +68,20 @@ export default {
mounted() { mounted() {
this.menuService.getMenu().then(data => { this.menuService.getMenu().then(data => {
this.menu = 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: { methods: {
@ -76,6 +99,27 @@ export default {
return true; return true;
} }
return false; 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;
} }
} }
} }

View File

@ -4,14 +4,18 @@
top: 70px; top: 70px;
height: calc(100% - 70px); height: calc(100% - 70px);
background-color: var(--surface-a); background-color: var(--surface-a);
overflow: auto;
width: 250px; width: 250px;
border-right: 1px solid var(--surface-d); border-right: 1px solid var(--surface-d);
user-select: none; user-select: none;
padding: 1rem;
transition: transform .4s cubic-bezier(.05,.74,.2,.99); transition: transform .4s cubic-bezier(.05,.74,.2,.99);
display: flex;
flex-direction: column;
.layout-menu { .layout-menu {
padding: 0 1rem;
overflow-y: auto;
flex-grow: 1;
.menu-category { .menu-category {
display: block; display: block;
color: var(--text-color-secondary); 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);
}
} }