100 lines
6.1 KiB
Vue
Executable File
100 lines
6.1 KiB
Vue
Executable File
<template>
|
|
<div class="flex flex-col items-center justify-between px-4 text-center whitespace-pre-wrap h-[calc(90vh-24px)]">
|
|
<div class="w-full flex-1 md:w-[440px] justify-center 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 class="flex mt-3.5" v-if="filteredMenus.length === 0 && recent.length === 0">
|
|
<h1 class="text-sm text-center text-gray-800">
|
|
Silahkan cari menu atau buka menu di samping kiri untuk memulai
|
|
</h1>
|
|
</div>
|
|
|
|
<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 Diakses
|
|
</h2>
|
|
<div class="flex flex-col w-full space-y-3" v-for="menu in query === '' ? recent : filteredMenus"
|
|
:key="menu.path">
|
|
<div @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 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 class="flex flex-col items-center justify-center py-3">
|
|
<dt class="text-xs text-center text-gray-500">
|
|
Copyright © 2023 PT PLN (Persero). All Rights Reserved
|
|
</dt>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { MagnifyingGlassIcon } from '@heroicons/vue/20/solid';
|
|
import { computed, ref } from 'vue'
|
|
import { useCommandPalattesStore } from '@/stores/command'
|
|
import { IconApp } from '@/utils/icons'
|
|
import { type RouteRecordRaw } from 'vue-router'
|
|
import { routes, extractLeafRoutes } from '@/router'
|
|
import { navigationIcon } from '@/utils/route';
|
|
|
|
const command = useCommandPalattesStore()
|
|
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)
|
|
)
|
|
|
|
</script> |