apkt-eis/src/components/Pages/Welcome.vue

<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 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
        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>
      <dt class="mt-4 text-xs font-bold text-center text-gray-800">Version {{ version }}</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'
import { detectOS } from '@/utils/helper'
import { version } from '../../../package.json'

const os = ref(detectOS())
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>