defuj/apkt-eis
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update aside

Browse Source
This commit is contained in:
Dede Fuji Abdul
2023-10-18 14:14:16 +07:00
parent 36945917b0
commit a7ead70332
4 changed files with 569 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/Aside/Aside.vue
View File

@ -19,8 +19,6 @@ import type { MenuItemModel } from '@/utils/interfaces'
const menu = useMenuStore()
const route = useRoute()
const navigation = ref<MenuItemModel[]>(menu.navigation)
watch(route, (to, _) => {
menu.menuSelected = to.fullPath
closeSideBar()
@ -68,7 +66,7 @@ const closeSideBar = () => menu.toggleSidebar()
</div>
<div class="flex-1 h-0 mt-5 overflow-y-auto">
<nav class="px-2 space-y-1">
<template v-for="item in navigation" :key="item.name">
<template v-for="item in menu.navigation" :key="item.name">
<!-- Single-level item -->
<AsideMenuSingle v-if="item.children.length === 0" :item="item"
:selected="isMenu(item.href)" />
@ -97,7 +95,7 @@ const closeSideBar = () => menu.toggleSidebar()
<div class="flex flex-col flex-grow overflow-y-auto">
<div class="flex flex-col flex-grow mt-5">
<nav class="flex-1 px-2 pb-4 space-y-1">
<template v-for="item in navigation" :key="item.name">
<template v-for="item in menu.navigation" :key="item.name">
<!-- Single-level item -->
<AsideMenuSingle v-if="item.children.length === 0" :item="item" :selected="isMenu(item.href)" />

35
src/components/Aside/AsideMenuMultiple.vue
View File

@ -32,17 +32,17 @@ const isMenuSelected = computed(() => {
</script>
<template>
<div :class="[isChildren ? 'ml-4 mt-1 bg-primary-100 rounded-xl' : '']">
<Disclosure v-slot="{ open }" v-bind:default-open="isMenuSelected ? true : false" as="div">
<div :class="[isChildren ? 'ml-2 mt-1 bg-primary-100 rounded-xl' : '']">
<Disclosure v-bind:default-open="isMenuSelected ? true : false" as="dev">
<!-- Nested item with children -->
<DisclosureButton
:class="[(isMenuSelected || open || isChildren) ? 'bg-primary-100 text-primary-500 font-bold' : 'text-gray-600 font-semibold text-aside hover:bg-primary-100 hover:text-primary-500', 'group w-full flex items-center pl-2 pr-1 py-2 text-left text-xs rounded-lg focus:outline-none focus:ring-0']">
<DisclosureButton @click="menu.toggleExpandedByHref(item.href, !item.expanded)"
:class="[(isMenuSelected || item.expanded || isChildren || item.expanded) ? 'bg-primary-100 text-primary-500 font-bold' : 'text-gray-600 font-semibold text-aside hover:bg-primary-100 hover:text-primary-500', 'group w-full flex items-center pr-1 py-2 text-left text-xs rounded-lg focus:outline-none focus:ring-0']">
<embed :src="isChildren ? DotOutline : item.icon"
:class="[isMenuSelected ? 'fill-primary-500' : 'fill-gray-400 group-hover:fill-gray-500', isChildren ? '' : 'mr-2', 'flex-shrink-0 w-6 h-6']"
type="image/svg+xml" />
<span class="flex-1">{{ item.name }}</span>
<svg :class="[isMenuSelected ? 'text-primary-500' : 'text-gray-300 group-hover:text-gray-500', open ? 'rotate-180' : '', 'ml-3 flex-shrink-0 transform transition-colors duration-150 ease-in-out ']"
<svg :class="[isMenuSelected ? 'text-primary-500' : 'text-gray-300 group-hover:text-gray-500', item.expanded ? 'rotate-180' : '', 'ml-3 flex-shrink-0 transform transition-colors duration-150 ease-in-out ']"
width="16" height="16" viewBox="0 0 24 24" fill="none" aria-hidden="true">
<path
d="M4.44002 8.9399C4.72127 8.659 5.10252 8.50122 5.50002 8.50122C5.89752 8.50122 6.27877 8.659 6.56002 8.9399L12 14.3799L17.44 8.9399C17.7244 8.67494 18.1005 8.53069 18.4891 8.53755C18.8777 8.54441 19.2484 8.70183 19.5233 8.97666C19.7981 9.25148 19.9555 9.62225 19.9624 10.0109C19.9692 10.3995 19.825 10.7756 19.56 11.0599L13.06 17.5599C12.7788 17.8408 12.3975 17.9986 12 17.9986C11.6025 17.9986 11.2213 17.8408 10.94 17.5599L4.44002 11.0599C4.15912 10.7787 4.00134 10.3974 4.00134 9.9999C4.00134 9.6024 4.15912 9.22115 4.44002 8.9399Z"
@ -55,17 +55,20 @@ const isMenuSelected = computed(() => {
leave-active-class="overflow-hidden transition-all duration-300"
leave-from-class="transform scale-300 opacity-300 max-h-[1000px]"
leave-to-class="transform scale-95 opacity-0 max-h-0">
<DisclosurePanel :class="['bg-primary-100 rounded-xl ml-4', 'space-y-1']">
<!-- Nested children -->
<template v-for="(subItem, index) in item.children" :key="subItem.href">
<!-- Single-level child -->
<AsideMenuSingle v-if="subItem.children.length === 0" :item="subItem" :is-children="true"
:selected="isMenu(subItem.href)" />
<!-- Multiple-level child -->
<AsideMenuMultiple v-else :item="subItem" :selected="subItem.href === menu.menuSelected"
:is-children="true" />
</template>
</DisclosurePanel>
<div v-show="item.expanded">
<DisclosurePanel :class="['bg-primary-100 rounded-xl ml-4', 'space-y-1']" static>
<!-- Nested children -->
<template v-for="(subItem, index) in item.children" :key="subItem.href">
<!-- Single-level child -->
<AsideMenuSingle v-if="subItem.children.length === 0" :item="subItem" :is-children="true"
:selected="isMenu(subItem.href)" />
<!-- Multiple-level child -->
<AsideMenuMultiple v-else :item="subItem" :selected="subItem.href === menu.menuSelected"
:is-children="true" />
</template>
</DisclosurePanel>
</div>
</transition>
</Disclosure>

550
src/stores/menu.ts
View File

@ -11,57 +11,516 @@ import type { MenuItemModel } from '@/utils/interfaces'
import { useRoute } from 'vue-router'
export const useMenuStore = defineStore('menu', () => {
const navigation: MenuItemModel[] = [
// const navigation: MenuItemModel[] = [
// {
// name: 'Gangguan',
// href: '/gangguan',
// icon: LightningSlash,
// children: [
// {
// name: 'Daftar',
// href: '/gangguan/1',
// icon: LightningSlash,
// children: [
// {
// name: 'Daftar Keluhan Dialihkan Ke Posko Lain',
// href: '/gangguan/1/1',
// icon: LightningSlash,
// children: [],
// },
// {
// name: 'Daftar Gangguan Melapor Lebih Dari 1 Kali',
// href: '/gangguan/1/2',
// icon: LightningSlash,
// children: [],
// },
// {
// name: 'Daftar Gangguan Response Time',
// href: '/gangguan/1/3',
// icon: LightningSlash,
// children: [],
// },
// {
// name: 'Daftar Gangguan Recovery Time',
// href: '/gangguan/1/4',
// icon: LightningSlash,
// children: [],
// },
// {
// name: 'Daftar Gangguan Selesai Tanpa ID Pelanggan',
// href: '/gangguan/1/5',
// icon: LightningSlash,
// children: [],
// },
// {
// name: 'Daftar Gangguan Berdasarkan Media',
// href: '/gangguan/1/6',
// icon: LightningSlash,
// children: [],
// },
// {
// name: 'Daftar Gangguan Diselesaikan Mobile APKT',
// href: '/gangguan/1/7',
// icon: LightningSlash,
// children: [],
// },
// ],
// },
// {
// name: 'Rekapitulasi',
// href: '/gangguan/2',
// icon: LightningSlash,
// children: [
// {
// name: 'Rekapitulasi Gangguan All',
// href: '/gangguan/2/1',
// icon: LightningSlash,
// children: [],
// },
// {
// name: 'Rekapitulasi Gangguan Per Jenis Gangguan',
// href: '/gangguan/2/2',
// icon: LightningSlash,
// children: [],
// },
// {
// name: 'Rekapitulasi Gangguan Per Jenis Gangguan SE 004',
// href: '/gangguan/2/3',
// icon: LightningSlash,
// children: [],
// },
// {
// name: 'Rekapitulasi Gangguan Per Posko',
// href: '/gangguan/2/4',
// icon: LightningSlash,
// children: [],
// },
// {
// name: 'Rekapitulasi Gangguan Per Regu',
// href: '/gangguan/2/5',
// icon: LightningSlash,
// children: [],
// },
// {
// name: 'Rekapitulasi Gangguan Per Tanggal',
// href: '/gangguan/2/6',
// icon: LightningSlash,
// children: [],
// },
// {
// name: 'Rekapitulasi Gangguan Berdasarkan Media',
// href: '/gangguan/2/7',
// icon: LightningSlash,
// children: [],
// },
// {
// name: 'Rekapitulasi Gangguan Alih Posko',
// href: '/gangguan/2/8',
// icon: LightningSlash,
// children: [],
// },
// {
// name: 'Rekapitulasi Gangguan Per Status',
// href: '/gangguan/2/9',
// icon: LightningSlash,
// children: [],
// },
// {
// name: 'Rekapitulasi Gangguan Diselesaikan Mobile APKT',
// href: '/gangguan/2/10',
// icon: LightningSlash,
// children: [],
// },
// {
// name: 'Rekapitulasi Rating Per Posko',
// href: '/gangguan/2/11',
// icon: LightningSlash,
// children: [],
// },
// {
// name: 'Rekapitulasi Rating Per Regu',
// href: '/gangguan/2/12',
// icon: LightningSlash,
// children: [],
// },
// {
// name: 'Rekapitulasi Koreksi Transaksi Individual',
// href: '/gangguan/2/13',
// icon: LightningSlash,
// children: [],
// },
// {
// name: 'Rekapitulasi Cleansing Transaksi TM',
// href: '/gangguan/2/14',
// icon: LightningSlash,
// children: [],
// },
// ],
// },
// ],
// },
// {
// name: 'Keluhan',
// href: '/keluhan',
// icon: SmileySad,
// children: [
// {
// name: 'Daftar',
// icon: SmileySad,
// href: '/keluhan/1',
// children: [
// {
// name: 'Daftar Keluhan Dialihkan Ke Unit Lain',
// href: '/keluhan/1/1',
// icon: SmileySad,
// children: [],
// },
// {
// name: 'Daftar Keluhan Pelanggan Lebih Dari 1 Kali',
// href: '/keluhan/1/2',
// icon: SmileySad,
// children: [],
// },
// {
// name: 'Daftar Keluhan Response Time',
// href: '/keluhan/1/3',
// icon: SmileySad,
// children: [],
// },
// {
// name: 'Daftar Keluhan Recovery Time',
// href: '/keluhan/1/4',
// icon: SmileySad,
// children: [],
// },
// {
// name: 'Daftar Keluhan Selesai Tanpa ID Pelanggan',
// href: '/keluhan/1/5',
// icon: SmileySad,
// children: [],
// },
// {
// name: 'Daftar Keluhan Berdasarkan Media',
// href: '/keluhan/1/6',
// icon: SmileySad,
// children: [],
// },
// {
// name: 'Daftar Keluhan Selesai di CC123',
// href: '/keluhan/1/7',
// icon: SmileySad,
// children: [],
// },
// ],
// },
// {
// name: 'Rekapitulasi',
// icon: SmileySad,
// href: '/keluhan/2',
// children: [
// {
// name: 'Rekapitulasi Keluhan All',
// href: '/keluhan/2/1',
// icon: SmileySad,
// children: [],
// },
// {
// name: 'Rekapitulasi Keluhan Per Fungsi Bidang',
// href: '/keluhan/2/2',
// icon: SmileySad,
// children: [],
// },
// {
// name: 'Rekapitulasi Keluhan Per Jenis Keluhan',
// href: '/keluhan/2/3',
// icon: SmileySad,
// children: [],
// },
// {
// name: 'Rekapitulasi Keluhan Per Tanggal',
// href: '/keluhan/2/4',
// icon: SmileySad,
// children: [],
// },
// {
// name: 'Rekapitulasi Keluhan Per Unit',
// href: '/keluhan/2/5',
// icon: SmileySad,
// children: [],
// },
// {
// name: 'Rekapitulasi Keluhan Berdasarkan Media',
// href: '/keluhan/2/6',
// icon: SmileySad,
// children: [],
// },
// ],
// },
// ],
// },
// {
// name: 'Monalisa',
// href: '/monalisa',
// icon: Monitor,
// children: [
// {
// name: 'Gangguan',
// icon: Monitor,
// href: '/monalisa/1',
// children: [
// {
// name: 'Rekapitulasi',
// href: '/monalisa/1/1',
// icon: Monitor,
// children: [
// {
// name: 'Jumlah Kali Gangguan',
// href: '/monalisa/1/1/1',
// icon: Monitor,
// children: [],
// },
// {
// name: 'Recovery Time (RCT) Gangguan',
// href: '/monalisa/1/1/2',
// icon: Monitor,
// children: [],
// },
// {
// name: 'Response Time (RPT) Gangguan',
// href: '/monalisa/1/1/3',
// icon: Monitor,
// children: [],
// },
// {
// name: 'Rekapitulasi Gangguan Per Jenis Gangguan',
// href: '/monalisa/1/1/4',
// icon: Monitor,
// children: [],
// },
// {
// name: 'Rekapitulasi Lapor Ulang Gangguan',
// href: '/monalisa/1/1/5',
// icon: Monitor,
// children: [],
// },
// {
// name: 'Rekapitulasi ENS Gangguan',
// href: '/monalisa/1/1/6',
// icon: Monitor,
// children: [],
// },
// {
// name: 'Rekapitulasi Gangguan Belum Selesai',
// href: '/monalisa/1/1/7',
// icon: Monitor,
// children: [],
// },
// ],
// },
// ],
// },
// {
// name: 'Keluhan',
// icon: Monitor,
// href: '/monalisa/2',
// children: [
// {
// name: 'Rekapitulasi',
// href: '/monalisa/2/1',
// icon: Monitor,
// children: [
// {
// name: 'Jumlah Kali Keluhan',
// href: '/monalisa/2/1/1',
// icon: Monitor,
// children: [],
// },
// {
// name: 'Recovery Time (RCT) Keluhan',
// href: '/monalisa/2/1/2',
// icon: Monitor,
// children: [],
// },
// {
// name: 'Response Time (RPT) Keluhan',
// href: '/monalisa/2/1/3',
// icon: Monitor,
// children: [],
// },
// {
// name: 'Rekapitulasi Gangguan Per Jenis Keluhan',
// href: '/monalisa/2/1/4',
// icon: Monitor,
// children: [],
// },
// {
// name: 'Rekapitulasi Lapor Ulang Keluhan',
// href: '/monalisa/2/1/5',
// icon: Monitor,
// children: [],
// },
// {
// name: 'Rekapitulasi Keluhan Belum Selesai',
// href: '/monalisa/2/1/6',
// icon: Monitor,
// children: [],
// },
// ],
// },
// ],
// },
// {
// name: 'Laporan KPI',
// icon: Monitor,
// href: '/monalisa/3',
// children: [
// {
// name: 'Bulanan',
// icon: Monitor,
// href: '/monalisa/3/1',
// children: [
// {
// name: 'Penurunan Jumlah Komplain',
// icon: Monitor,
// href: '/monalisa/3/1/1',
// children: [],
// },
// {
// name: 'Aging Complaint',
// icon: Monitor,
// href: '/monalisa/3/1/2',
// children: [],
// },
// {
// name: 'Energy Not Sales (ENS)',
// icon: Monitor,
// href: '/monalisa/3/1/3',
// children: [],
// },
// {
// name: 'Kepatuhan dan Akurasi Dalam Pelaporan',
// icon: Monitor,
// href: '/monalisa/3/1/4',
// children: [],
// },
// ],
// },
// {
// name: 'Kumulatif',
// icon: Monitor,
// href: '/monalisa/3/2',
// children: [
// {
// name: 'Penurunan Jumlah Komplain',
// icon: Monitor,
// href: '/monalisa/3/2/1',
// children: [],
// },
// {
// name: 'Aging Complaint',
// icon: Monitor,
// href: '/monalisa/3/2/2',
// children: [],
// },
// {
// name: 'Energy Not Sales (ENS)',
// icon: Monitor,
// href: '/monalisa/3/2/3',
// children: [],
// },
// {
// name: 'Kepatuhan dan Akurasi Dalam Pelaporan',
// icon: Monitor,
// href: '/monalisa/3/2/4',
// children: [],
// }
// ],
// }
// ],
// },
// ],
// },
// {
// name: 'Check In Dan Check Out',
// href: '/check-in-out',
// icon: Swap,
// children: [
// {
// name: 'Laporan Check In /Check Out (CICO)',
// href: '/check-in-out/1',
// icon: Swap,
// children: [
// {
// name: 'Laporan Check In /Check Out (CICO)',
// href: '/check-in-out/1/1',
// icon: Swap,
// children: [],
// },
// ],
// },
// ],
// },
// ]
const navigation = ref<MenuItemModel[]>([
{
name: 'Gangguan',
href: '/gangguan',
icon: LightningSlash,
expanded: false,
children: [
{
name: 'Daftar',
href: '/gangguan/1',
icon: LightningSlash,
expanded: false,
children: [
{
name: 'Daftar Keluhan Dialihkan Ke Posko Lain',
href: '/gangguan/1/1',
icon: LightningSlash,
expanded: false,
children: [],
},
{
name: 'Daftar Gangguan Melapor Lebih Dari 1 Kali',
href: '/gangguan/1/2',
icon: LightningSlash,
expanded: false,
children: [],
},
{
name: 'Daftar Gangguan Response Time',
href: '/gangguan/1/3',
icon: LightningSlash,
expanded: false,
children: [],
},
{
name: 'Daftar Gangguan Recovery Time',
href: '/gangguan/1/4',
icon: LightningSlash,
expanded: false,
children: [],
},
{
name: 'Daftar Gangguan Selesai Tanpa ID Pelanggan',
href: '/gangguan/1/5',
icon: LightningSlash,
expanded: false,
children: [],
},
{
name: 'Daftar Gangguan Berdasarkan Media',
href: '/gangguan/1/6',
icon: LightningSlash,
expanded: false,
children: [],
},
{
name: 'Daftar Gangguan Diselesaikan Mobile APKT',
href: '/gangguan/1/7',
icon: LightningSlash,
expanded: false,
children: [],
},
],
@ -70,89 +529,104 @@ export const useMenuStore = defineStore('menu', () => {
name: 'Rekapitulasi',
href: '/gangguan/2',
icon: LightningSlash,
expanded: false,
children: [
{
name: 'Rekapitulasi Gangguan All',
href: '/gangguan/2/1',
icon: LightningSlash,
expanded: false,
children: [],
},
{
name: 'Rekapitulasi Gangguan Per Jenis Gangguan',
href: '/gangguan/2/2',
icon: LightningSlash,
expanded: false,
children: [],
},
{
name: 'Rekapitulasi Gangguan Per Jenis Gangguan SE 004',
href: '/gangguan/2/3',
icon: LightningSlash,
expanded: false,
children: [],
},
{
name: 'Rekapitulasi Gangguan Per Posko',
href: '/gangguan/2/4',
icon: LightningSlash,
expanded: false,
children: [],
},
{
name: 'Rekapitulasi Gangguan Per Regu',
href: '/gangguan/2/5',
icon: LightningSlash,
expanded: false,
children: [],
},
{
name: 'Rekapitulasi Gangguan Per Tanggal',
href: '/gangguan/2/6',
icon: LightningSlash,
expanded: false,
children: [],
},
{
name: 'Rekapitulasi Gangguan Berdasarkan Media',
href: '/gangguan/2/7',
icon: LightningSlash,
expanded: false,
children: [],
},
{
name: 'Rekapitulasi Gangguan Alih Posko',
href: '/gangguan/2/8',
icon: LightningSlash,
expanded: false,
children: [],
},
{
name: 'Rekapitulasi Gangguan Per Status',
href: '/gangguan/2/9',
icon: LightningSlash,
expanded: false,
children: [],
},
{
name: 'Rekapitulasi Gangguan Diselesaikan Mobile APKT',
href: '/gangguan/2/10',
icon: LightningSlash,
expanded: false,
children: [],
},
{
name: 'Rekapitulasi Rating Per Posko',
href: '/gangguan/2/11',
icon: LightningSlash,
expanded: false,
children: [],
},
{
name: 'Rekapitulasi Rating Per Regu',
href: '/gangguan/2/12',
icon: LightningSlash,
expanded: false,
children: [],
},
{
name: 'Rekapitulasi Koreksi Transaksi Individual',
href: '/gangguan/2/13',
icon: LightningSlash,
expanded: false,
children: [],
},
{
name: 'Rekapitulasi Cleansing Transaksi TM',
href: '/gangguan/2/14',
icon: LightningSlash,
expanded: false,
children: [],
},
],
@ -163,52 +637,61 @@ export const useMenuStore = defineStore('menu', () => {
name: 'Keluhan',
href: '/keluhan',
icon: SmileySad,
expanded: false,
children: [
{
name: 'Daftar',
icon: SmileySad,
href: '/keluhan/1',
expanded: false,
children: [
{
name: 'Daftar Keluhan Dialihkan Ke Unit Lain',
href: '/keluhan/1/1',
icon: SmileySad,
expanded: false,
children: [],
},
{
name: 'Daftar Keluhan Pelanggan Lebih Dari 1 Kali',
href: '/keluhan/1/2',
icon: SmileySad,
expanded: false,
children: [],
},
{
name: 'Daftar Keluhan Response Time',
href: '/keluhan/1/3',
icon: SmileySad,
expanded: false,
children: [],
},
{
name: 'Daftar Keluhan Recovery Time',
href: '/keluhan/1/4',
icon: SmileySad,
expanded: false,
children: [],
},
{
name: 'Daftar Keluhan Selesai Tanpa ID Pelanggan',
href: '/keluhan/1/5',
icon: SmileySad,
expanded: false,
children: [],
},
{
name: 'Daftar Keluhan Berdasarkan Media',
href: '/keluhan/1/6',
icon: SmileySad,
expanded: false,
children: [],
},
{
name: 'Daftar Keluhan Selesai di CC123',
href: '/keluhan/1/7',
icon: SmileySad,
expanded: false,
children: [],
},
],
@ -217,41 +700,48 @@ export const useMenuStore = defineStore('menu', () => {
name: 'Rekapitulasi',
icon: SmileySad,
href: '/keluhan/2',
expanded: false,
children: [
{
name: 'Rekapitulasi Keluhan All',
href: '/keluhan/2/1',
icon: SmileySad,
expanded: false,
children: [],
},
{
name: 'Rekapitulasi Keluhan Per Fungsi Bidang',
href: '/keluhan/2/2',
icon: SmileySad,
expanded: false,
children: [],
},
{
name: 'Rekapitulasi Keluhan Per Jenis Keluhan',
href: '/keluhan/2/3',
icon: SmileySad,
expanded: false,
children: [],
},
{
name: 'Rekapitulasi Keluhan Per Tanggal',
href: '/keluhan/2/4',
icon: SmileySad,
expanded: false,
children: [],
},
{
name: 'Rekapitulasi Keluhan Per Unit',
href: '/keluhan/2/5',
icon: SmileySad,
expanded: false,
children: [],
},
{
name: 'Rekapitulasi Keluhan Berdasarkan Media',
href: '/keluhan/2/6',
icon: SmileySad,
expanded: false,
children: [],
},
],
@ -262,57 +752,67 @@ export const useMenuStore = defineStore('menu', () => {
name: 'Monalisa',
href: '/monalisa',
icon: Monitor,
expanded: false,
children: [
{
name: 'Gangguan',
icon: Monitor,
href: '/monalisa/1',
expanded: false,
children: [
{
name: 'Rekapitulasi',
href: '/monalisa/1/1',
icon: Monitor,
expanded: false,
children: [
{
name: 'Jumlah Kali Gangguan',
href: '/monalisa/1/1/1',
icon: Monitor,
expanded: false,
children: [],
},
{
name: 'Recovery Time (RCT) Gangguan',
href: '/monalisa/1/1/2',
icon: Monitor,
expanded: false,
children: [],
},
{
name: 'Response Time (RPT) Gangguan',
href: '/monalisa/1/1/3',
icon: Monitor,
expanded: false,
children: [],
},
{
name: 'Rekapitulasi Gangguan Per Jenis Gangguan',
href: '/monalisa/1/1/4',
icon: Monitor,
expanded: false,
children: [],
},
{
name: 'Rekapitulasi Lapor Ulang Gangguan',
href: '/monalisa/1/1/5',
icon: Monitor,
expanded: false,
children: [],
},
{
name: 'Rekapitulasi ENS Gangguan',
href: '/monalisa/1/1/6',
icon: Monitor,
expanded: false,
children: [],
},
{
name: 'Rekapitulasi Gangguan Belum Selesai',
href: '/monalisa/1/1/7',
icon: Monitor,
expanded: false,
children: [],
},
],
@ -323,46 +823,54 @@ export const useMenuStore = defineStore('menu', () => {
name: 'Keluhan',
icon: Monitor,
href: '/monalisa/2',
expanded: false,
children: [
{
name: 'Rekapitulasi',
href: '/monalisa/2/1',
icon: Monitor,
expanded: false,
children: [
{
name: 'Jumlah Kali Keluhan',
href: '/monalisa/2/1/1',
icon: Monitor,
expanded: false,
children: [],
},
{
name: 'Recovery Time (RCT) Keluhan',
href: '/monalisa/2/1/2',
icon: Monitor,
expanded: false,
children: [],
},
{
name: 'Response Time (RPT) Keluhan',
href: '/monalisa/2/1/3',
icon: Monitor,
expanded: false,
children: [],
},
{
name: 'Rekapitulasi Gangguan Per Jenis Keluhan',
href: '/monalisa/2/1/4',
icon: Monitor,
expanded: false,
children: [],
},
{
name: 'Rekapitulasi Lapor Ulang Keluhan',
href: '/monalisa/2/1/5',
icon: Monitor,
expanded: false,
children: [],
},
{
name: 'Rekapitulasi Keluhan Belum Selesai',
href: '/monalisa/2/1/6',
icon: Monitor,
expanded: false,
children: [],
},
],
@ -373,34 +881,40 @@ export const useMenuStore = defineStore('menu', () => {
name: 'Laporan KPI',
icon: Monitor,
href: '/monalisa/3',
expanded: false,
children: [
{
name: 'Bulanan',
icon: Monitor,
href: '/monalisa/3/1',
expanded: false,
children: [
{
name: 'Penurunan Jumlah Komplain',
icon: Monitor,
href: '/monalisa/3/1/1',
expanded: false,
children: [],
},
{
name: 'Aging Complaint',
icon: Monitor,
href: '/monalisa/3/1/2',
expanded: false,
children: [],
},
{
name: 'Energy Not Sales (ENS)',
icon: Monitor,
href: '/monalisa/3/1/3',
expanded: false,
children: [],
},
{
name: 'Kepatuhan dan Akurasi Dalam Pelaporan',
icon: Monitor,
href: '/monalisa/3/1/4',
expanded: false,
children: [],
},
],
@ -409,29 +923,34 @@ export const useMenuStore = defineStore('menu', () => {
name: 'Kumulatif',
icon: Monitor,
href: '/monalisa/3/2',
expanded: false,
children: [
{
name: 'Penurunan Jumlah Komplain',
icon: Monitor,
href: '/monalisa/3/2/1',
expanded: false,
children: [],
},
{
name: 'Aging Complaint',
icon: Monitor,
href: '/monalisa/3/2/2',
expanded: false,
children: [],
},
{
name: 'Energy Not Sales (ENS)',
icon: Monitor,
href: '/monalisa/3/2/3',
expanded: false,
children: [],
},
{
name: 'Kepatuhan dan Akurasi Dalam Pelaporan',
icon: Monitor,
href: '/monalisa/3/2/4',
expanded: false,
children: [],
}
],
@ -444,32 +963,57 @@ export const useMenuStore = defineStore('menu', () => {
name: 'Check In Dan Check Out',
href: '/check-in-out',
icon: Swap,
expanded: false,
children: [
{
name: 'Laporan Check In /Check Out (CICO)',
href: '/check-in-out/1',
icon: Swap,
expanded: false,
children: [
{
name: 'Laporan Check In /Check Out (CICO)',
href: '/check-in-out/1/1',
icon: Swap,
expanded: false,
children: [],
},
],
},
],
},
]
])
const sidebarOpen = ref(false)
const route = useRoute()
const menuSelected = ref(route.fullPath)
const toggleSidebar = () => (sidebarOpen.value = !sidebarOpen.value)
const toggleExpandedByHref = (href: string, newExpanded: boolean): void => {
const toggleItemExpanded = (items: MenuItemModel[]): void => {
for (const item of items) {
if (item.href === href) {
item.expanded = newExpanded
} else {
if (newExpanded) {
if (!href.includes(item.href)) {
item.expanded = !newExpanded;
}
}
}
if (item.children && item.children.length > 0) {
toggleItemExpanded(item.children)
}
}
}
toggleItemExpanded(navigation.value)
}
return {
navigation,
toggleSidebar,
sidebarOpen,
menuSelected
menuSelected,
toggleExpandedByHref
}
})

1
src/utils/interfaces.ts
View File

@ -2,6 +2,7 @@ interface MenuItemModel {
name: string;
href: string;
icon: any;
expanded: boolean;
children: MenuItemModel[];
}