113 lines
6.3 KiB
Vue
113 lines
6.3 KiB
Vue
<template>
|
|
<div class="flex flex-col items-center justify-center px-4 text-center whitespace-pre-wrap h-screen-80">
|
|
<div class="w-full md:w-[440px] py-4 md:py-0 flex flex-col items-center">
|
|
<img :src="IconApp" alt="pln" class="h-[66px] object-contain mx-auto mb-4">
|
|
<button @click="command.showCommandPalettes" type="button"
|
|
class="flex flex-row items-center w-full p-2 text-gray-400 rounded-full bg-gray-50 hover:text-primary-500 focus:outline-none focus:ring-0">
|
|
<span class="sr-only">Search</span>
|
|
<MagnifyingGlassIcon class="w-6 h-6 text-primary-500" aria-hidden="true" />
|
|
<span class="px-3 text-sm font-medium text-gray-500 text-md">Cari menu</span>
|
|
</button>
|
|
|
|
<div v-if="query === '' || filteredMenus.length > 0" static class="w-full mt-6 md:mt-8 lg:mt-12">
|
|
<div class="flex flex-col items-start w-full p-2" v-if="filteredMenus.length > 0 || recent.length > 0">
|
|
<h2 v-if="query === '' && recent.length > 0" class="mb-2 text-xs font-semibold text-gray-900 ">
|
|
Terakhir Dikunjungi
|
|
</h2>
|
|
<div class="flex flex-col w-full space-y-3" v-for="menu in query === '' ? recent : filteredMenus"
|
|
:key="menu.path">
|
|
<div @click="openMenu(menu)" class="group">
|
|
<div
|
|
class="flex flex-row items-center justify-between px-3 py-2 rounded-md cursor-pointer select-none group-hover:bg-primary-500 group-hover:text-white group-hover:bg-opacity-80">
|
|
<component v-if="menu.path.includes('/gangguan/')" :is="navigationIcon[0]" alt="icon"
|
|
:class="['w-8 h-8 fill-gray-600 group-hover:fill-white flex']" />
|
|
<component v-else-if="menu.path.includes('/keluhan/')" :is="navigationIcon[1]" alt="icon"
|
|
:class="['w-8 h-8 fill-gray-600 group-hover:fill-white flex']" />
|
|
<component v-else-if="menu.path.includes('/monalisa/')" :is="navigationIcon[2]" alt="icon"
|
|
:class="['w-8 h-8 fill-gray-600 group-hover:fill-white flex']" />
|
|
<component v-else-if="menu.path.includes('/check-in-out/')" :is="navigationIcon[3]"
|
|
alt="icon" :class="['w-8 h-8 fill-gray-600 group-hover:fill-white flex']" />
|
|
<component v-else-if="menu.path.includes('/anomali-pengaduan/')" :is="navigationIcon[4]"
|
|
alt="icon" :class="['w-8 h-8 fill-gray-600 group-hover:fill-white flex']" />
|
|
<component v-else-if="menu.path.includes('/ctt-kwh-periksa/')" :is="navigationIcon[5]"
|
|
alt="icon" :class="['w-8 h-8 fill-gray-600 group-hover:fill-white flex']" />
|
|
<component v-else-if="menu.path.includes('/material/')" :is="navigationIcon[6]" alt="icon"
|
|
:class="['w-8 h-8 fill-gray-600 group-hover:fill-white flex']" />
|
|
<component v-else-if="menu.path.includes('/transaksi/')" :is="navigationIcon[7]" alt="icon"
|
|
:class="['w-8 h-8 fill-gray-600 group-hover:fill-white flex']" />
|
|
<component v-else :is="navigationIcon[8]" alt="icon"
|
|
:class="['w-8 h-8 fill-gray-600 group-hover:fill-white flex']" />
|
|
|
|
<div class="flex flex-col items-start flex-1 w-full pl-3 space-y-1">
|
|
<span
|
|
class="w-full text-sm font-medium text-gray-800 text-start group-hover:text-white line-clamp-1">
|
|
{{ menu.name }}
|
|
</span>
|
|
<span
|
|
class="w-full text-xs text-gray-500 text-start group-hover:text-white line-clamp-1">
|
|
{{ menu.path.replace('/home/', '') }}
|
|
</span>
|
|
</div>
|
|
<span class="hidden ml-3 text-sm text-gray-500 group-hover:block group-hover:text-white">
|
|
Buka
|
|
</span>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { readData, writeData } from '@/utils/storage'
|
|
import { MagnifyingGlassIcon } from '@heroicons/vue/20/solid';
|
|
import { computed, onMounted, ref, watch } from 'vue'
|
|
import { useCommandPalattesStore } from '@/stores/command'
|
|
import { IconApp } from '@/utils/icons'
|
|
import { useRouter, type RouteRecordRaw } from 'vue-router'
|
|
import { routes, extractLeafRoutes } from '@/router'
|
|
import { navigationIcon } from '@/utils/route';
|
|
|
|
const command = useCommandPalattesStore()
|
|
const route = useRouter()
|
|
const recent = computed(() => query.value === '' ? command.readRecent() : [])
|
|
const query = ref('')
|
|
|
|
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 filteredMenus = computed(() =>
|
|
query.value === ''
|
|
? []
|
|
: searchRoutesByName(routes, query.value)
|
|
)
|
|
const onClose = () => command.open = false
|
|
|
|
let debounceTimeout: ReturnType<typeof setTimeout> | null = null;
|
|
const onQueryChange = (value: string) => {
|
|
if (debounceTimeout) {
|
|
clearTimeout(debounceTimeout);
|
|
}
|
|
debounceTimeout = setTimeout(() => {
|
|
// check if value is empty or only spaces
|
|
if (value.trim() === '') {
|
|
query.value = ''
|
|
return
|
|
}
|
|
query.value = value
|
|
}, 300);
|
|
}
|
|
|
|
const openMenu = (menu: RouteRecordRaw) => {
|
|
command.addRecent(menu)
|
|
route.push(menu.path)
|
|
onClose()
|
|
}
|
|
|
|
</script> |