253 lines
13 KiB
Vue
Executable File
253 lines
13 KiB
Vue
Executable File
<template>
|
|
<TransitionRoot :show="command.open" @after-leave="onQueryChange('')" appear>
|
|
<Dialog as="div" class="relative z-10" @close="command.closeCommand">
|
|
<TransitionChild
|
|
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"
|
|
>
|
|
<div class="fixed inset-0 transition-opacity bg-gray-500 bg-opacity-25 backdrop-blur" />
|
|
</TransitionChild>
|
|
|
|
<div class="fixed inset-0 z-10 p-4 overflow-y-auto sm:p-6 md:p-20">
|
|
<TransitionChild
|
|
enter="ease-out duration-300"
|
|
enter-from="opacity-0 scale-95"
|
|
enter-to="opacity-100 scale-100"
|
|
leave="ease-in duration-200"
|
|
leave-from="opacity-100 scale-100"
|
|
leave-to="opacity-0 scale-95"
|
|
>
|
|
<!-- max-w-2xl mx-auto overflow-hidden transition-all transform bg-white bg-opacity-80 divide-y divide-gray-500 shadow-2xl divide-opacity-10 rounded-xl ring-0 ring-black ring-opacity-5 -->
|
|
<DialogPanel
|
|
class="max-w-2xl mx-auto overflow-hidden transition-all transform bg-white bg-opacity-100 divide-y divide-gray-500 shadow-2xl divide-opacity-10 rounded-xl ring-0 ring-black ring-opacity-5"
|
|
>
|
|
<Combobox>
|
|
<div class="relative">
|
|
<MagnifyingGlassIcon
|
|
class="pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-gray-900 text-opacity-40"
|
|
aria-hidden="true"
|
|
/>
|
|
<ComboboxInput
|
|
:autofocus="false"
|
|
class="w-full h-12 pr-4 text-gray-900 placeholder-gray-500 bg-white border-0 pl-11 focus:ring-0 sm:text-sm"
|
|
placeholder="Cari menu..."
|
|
@change="onQueryChange($event.target.value)"
|
|
/>
|
|
</div>
|
|
|
|
<ComboboxOptions
|
|
v-if="query === '' || filteredMenus.length > 0"
|
|
static
|
|
class="overflow-y-auto divide-y divide-gray-500 scroll-py-2 divide-opacity-10"
|
|
>
|
|
<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"
|
|
>
|
|
Terakhir Diakses
|
|
</h2>
|
|
<!-- <ul class="text-sm text-gray-700">
|
|
<ComboboxOption as="template" v-for="menu in query === '' ? recent : filteredMenus"
|
|
:key="menu.path" v-slot="{ active }">
|
|
<li @click="command.openMenu(menu)"
|
|
:class="['flex flex-row cursor-pointer select-none items-center rounded-md px-3 py-2', active && 'bg-gray-900 bg-opacity-5 text-gray-900']">
|
|
<component v-if="menu.path.includes('/gangguan/')" :is="navigationIcon[0]"
|
|
alt="icon"
|
|
:class="['h-6 w-6 flex-none', active ? 'opacity-100' : 'opacity-40']" />
|
|
<component v-else-if="menu.path.includes('/keluhan/')"
|
|
:is="navigationIcon[1]" alt="icon"
|
|
:class="['h-6 w-6 flex-none', active ? 'opacity-100' : 'opacity-40']" />
|
|
<component v-else-if="menu.path.includes('/monalisa/')"
|
|
:is="navigationIcon[2]" alt="icon"
|
|
:class="['h-6 w-6 flex-none', active ? 'opacity-100' : 'opacity-40']" />
|
|
<component v-else-if="menu.path.includes('/check-in-out/')"
|
|
:is="navigationIcon[3]" alt="icon"
|
|
:class="['h-6 w-6 flex-none', active ? 'opacity-100' : 'opacity-40']" />
|
|
<component v-else-if="menu.path.includes('/anomali-pengaduan/')"
|
|
:is="navigationIcon[4]" alt="icon"
|
|
:class="['h-6 w-6 flex-none', active ? 'opacity-100' : 'opacity-40']" />
|
|
<component v-else-if="menu.path.includes('/ctt-kwh-periksa/')"
|
|
:is="navigationIcon[5]" alt="icon"
|
|
:class="['h-6 w-6 flex-none', active ? 'opacity-100' : 'opacity-40']" />
|
|
<component v-else-if="menu.path.includes('/material/')"
|
|
:is="navigationIcon[6]" alt="icon"
|
|
:class="['h-6 w-6 flex-none', active ? 'opacity-100' : 'opacity-40']" />
|
|
<component v-else-if="menu.path.includes('/transaksi/')"
|
|
:is="navigationIcon[7]" alt="icon"
|
|
:class="['h-6 w-6 flex-none', active ? 'opacity-100' : 'opacity-40']" />
|
|
<component v-else :is="navigationIcon[8]" alt="icon"
|
|
:class="['h-6 w-6 flex-none', active ? 'opacity-100' : 'opacity-40']" />
|
|
|
|
<div class="flex flex-col flex-1 ml-3 space-y-1">
|
|
<span class="text-sm font-medium text-gray-800 line-clamp-1">
|
|
{{ menu.name }}
|
|
</span>
|
|
<span class="text-xs text-gray-500 line-clamp-1">
|
|
{{ menu.path.replace('/home/', '') }}
|
|
</span>
|
|
</div>
|
|
<span v-if="active" class="flex-none ml-3 text-gray-500">
|
|
Buka
|
|
</span>
|
|
|
|
</li>
|
|
</ComboboxOption>
|
|
</ul> -->
|
|
<ul class="text-sm text-gray-700">
|
|
<ComboboxOption
|
|
as="template"
|
|
v-for="menu in query === '' ? recent : filteredMenus"
|
|
:key="menu.path"
|
|
v-slot="{ active }"
|
|
>
|
|
<li @click="command.openMenu(menu)" class="group">
|
|
<div
|
|
class="flex flex-row items-center justify-between px-3 py-2 rounded-md cursor-pointer select-none lex 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 flex-1 ml-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>
|
|
</li>
|
|
</ComboboxOption>
|
|
</ul>
|
|
</li>
|
|
</ComboboxOptions>
|
|
|
|
<div
|
|
v-if="query !== '' && filteredMenus.length === 0"
|
|
class="px-6 text-center py-14 sm:px-14"
|
|
>
|
|
<h2 class="font-semibold text-slate-900">Tidak ada hasil</h2>
|
|
|
|
<p class="mt-2 text-sm leading-6 text-slate-600">
|
|
Kami tidak dapat menemukan menu apa pun dengan istilah itu saat ini, silahkan
|
|
gunakan kata kunci lainnya.
|
|
</p>
|
|
</div>
|
|
</Combobox>
|
|
</DialogPanel>
|
|
</TransitionChild>
|
|
</div>
|
|
</Dialog>
|
|
</TransitionRoot>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed, onMounted, ref } from 'vue'
|
|
import { MagnifyingGlassIcon } from '@heroicons/vue/20/solid'
|
|
import {
|
|
Combobox,
|
|
ComboboxInput,
|
|
ComboboxOptions,
|
|
ComboboxOption,
|
|
Dialog,
|
|
DialogPanel,
|
|
TransitionChild,
|
|
TransitionRoot
|
|
} from '@headlessui/vue'
|
|
import { routes } from '@/router'
|
|
import { useCommandPalattesStore } from '@/stores/command'
|
|
import { navigationIcon } from '@/utils/route'
|
|
|
|
const command = useCommandPalattesStore()
|
|
const recent = computed(() => (command.open ? command.readRecent() : []))
|
|
const query = ref('')
|
|
const filteredMenus = computed(() =>
|
|
query.value === '' ? [] : command.searchRoutesByName(routes, query.value)
|
|
)
|
|
|
|
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)
|
|
}
|
|
|
|
onMounted(() => {
|
|
window.addEventListener('keydown', (e) => command.onKeyPressed(e))
|
|
})
|
|
</script>
|