Add detectOS function to helper.ts and update style.css with new utility classes
This commit is contained in:
Dede Fuji Abdul
@ -1,100 +1,163 @@
|
||||
<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 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 justify-between 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="flex-1 px-3 text-sm font-medium text-left text-gray-500 text-md">
|
||||
Cari menu</span
|
||||
>
|
||||
<button class="mx-2" v-if="os == 'macOS'">⌘ M</button>
|
||||
</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 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
|
||||
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 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 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>
|
||||
</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 { 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';
|
||||
import { navigationIcon } from '@/utils/route'
|
||||
import { detectOS } from '@/utils/helper'
|
||||
|
||||
const os = ref(detectOS())
|
||||
const command = useCommandPalattesStore()
|
||||
const recent = computed(() => query.value === '' ? command.readRecent() : [])
|
||||
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 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)
|
||||
query.value === '' ? [] : searchRoutesByName(routes, query.value)
|
||||
)
|
||||
|
||||
</script>
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user