defuj/apkt-eis
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
Dede Fuji Abdul
2023-10-24 15:24:21 +07:00
parent 6931e06952
commit 96d8550cfe
9 changed files with 199 additions and 215 deletions
Download Patch File Download Diff File Expand all files Collapse all files

103
src/components/CommandPalettes.vue
View File

@ -1,5 +1,5 @@
<template>
<TransitionRoot :show="open" as="template" @after-leave="onQueryChange('')" appear>
<TransitionRoot :show="command.open" as="template" @after-leave="onQueryChange('')" appear>
<Dialog as="div" class="relative z-10" @close="onClose">
<TransitionChild as="template" enter="ease-out duration-300" enter-from="opacity-0" enter-to="opacity-100"
leave="ease-in duration-200" leave-from="opacity-100" leave-to="opacity-0">
@ -27,13 +27,14 @@
<li class="p-2" v-if="filteredMenus.length > 0 || recent.length > 0">
<h2 v-if="query === '' && recent.length > 0"
class="px-3 mt-4 mb-2 text-xs font-semibold text-gray-900">
Pencarian terakhir</h2>
Terakhir Diakses
</h2>
<ul class="text-sm text-gray-700">
<ComboboxOption as="template" v-for="menu in query === '' ? recent : filteredMenus"
:key="menu.href" v-slot="{ active }">
:key="menu.path" v-slot="{ active }">
<li @click="openMenu(menu)"
:class="['flex cursor-pointer select-none items-center rounded-md px-3 py-2', active && 'bg-gray-900 bg-opacity-5 text-gray-900']">
<component :is="menu.icon"
<DocumentTextIcon
:class="['h-6 w-6 flex-none text-gray-900 text-opacity-40', active && 'text-opacity-100']"
aria-hidden="true" />
<span class="flex-auto ml-3 truncate">
@ -69,7 +70,7 @@
<script setup lang="ts">
import { computed, ref, watch } from 'vue'
import { MagnifyingGlassIcon } from '@heroicons/vue/20/solid'
import { FolderIcon } from '@heroicons/vue/24/outline'
import { DocumentTextIcon } from '@heroicons/vue/24/outline'
import {
Combobox,
ComboboxInput,
@ -80,80 +81,28 @@ import {
TransitionChild,
TransitionRoot,
} from '@headlessui/vue'
import { useMenuStore } from '@/stores/menu';
import { useRouter } from 'vue-router';
import { useRouter, type RouteRecordRaw } from 'vue-router'
import { routes, extractLeafRoutes } from '@/router'
import { useCommandPalattesStore } from '@/stores/command'
// const menus = [
// { id: 1, name: 'Workflow Inc. / Website Redesign', url: '#' },
// ]
const nav = useMenuStore()
const menus = nav.navigation
// var recent = computed(() => readRecentMenu())
const props = defineProps({
open: Boolean
})
const emit = defineEmits(['onClose'])
function searchMenus(query: string) {
const result: typeof menus = []
menus.forEach((menu) => {
if (menu.children.length > 0) {
menu.children.forEach((child) => {
if (child.children.length > 0) {
child.children.forEach((grandChild) => {
if (grandChild.name.toLowerCase().includes(query.toLowerCase())) {
result.push(grandChild)
}
})
} else {
if (child.name.toLowerCase().includes(query.toLowerCase())) {
result.push(child)
}
}
})
} else {
if (menu.name.toLowerCase().includes(query.toLowerCase())) {
result.push(menu)
}
}
})
return result;
const command = useCommandPalattesStore()
const searchRoutesByName = (routes: RouteRecordRaw[], query: string): RouteRecordRaw[] => {
const matchingRoutes = extractLeafRoutes(routes, '').filter((item: RouteRecordRaw) => item.path.includes('home/') && item.name?.toString().toLocaleLowerCase().includes(query.toLocaleLowerCase()))
return matchingRoutes
}
const route = useRouter()
const recent = computed(() => query.value === '' ? readRecentMenu() : [])
const open = ref(props.open)
const recent = computed(() => query.value === '' ? command.readRecent() : [])
const query = ref('')
const filteredMenus = computed(() =>
query.value === ''
? []
: searchMenus(query.value)
: searchRoutesByName(routes, query.value)
)
const onClose = () => command.open = false
function onClose() {
open.value = false
emit('onClose')
}
function addMenuToRecent(menu: any) {
const lastRecent = readRecentMenu()
const index = lastRecent.findIndex((item: any) => item.href === menu.href)
if (index > -1) {
lastRecent.splice(index, 1)
}
lastRecent.unshift(menu)
if (lastRecent.length > 5) {
lastRecent.pop()
}
localStorage.setItem('recentmenu', JSON.stringify(lastRecent))
}
let debounceTimeout: ReturnType<typeof setTimeout> | null = null;
function onQueryChange(value: string) {
const onQueryChange = (value: string) => {
if (debounceTimeout) {
clearTimeout(debounceTimeout);
}
@ -164,25 +113,15 @@ function onQueryChange(value: string) {
return
}
query.value = value
const data = extractLeafRoutes(routes, '').filter((item: RouteRecordRaw) => item.path.includes('home/') && item.name?.toString().includes(value))
console.log(data)
}, 300);
}
function readRecentMenu() {
const recent = localStorage.getItem('recentmenu')
if (recent) {
return JSON.parse(recent)
}
return []
}
function openMenu(menu: typeof menus[0]) {
addMenuToRecent(menu)
const openMenu = (menu: RouteRecordRaw) => {
command.addRecent(menu)
route.push(menu.path)
onClose()
}
watch(() => props.open, (value) => {
open.value = value;
});
</script>