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

update route method

Browse Source
This commit is contained in:
Dede Fuji Abdul 2023-10-19 12:08:09 +07:00
parent 678f25f3a9
commit 4633851c6a
8 changed files with 499 additions and 770 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.gitignore vendored
View File

@ -7,6 +7,7 @@ yarn-error.log*
pnpm-debug.log* pnpm-debug.log*
lerna-debug.log* lerna-debug.log*
node_modules node_modules
.DS_Store .DS_Store
dist dist
@ -26,3 +27,4 @@ coverage
*.njsproj *.njsproj
*.sln *.sln
*.sw? *.sw?
*.ts

8
src/components/Navigation/Aside/Aside.vue
View File

@ -83,10 +83,10 @@ const closeSideBar = () => menu.toggleSidebar()
<template v-for="item in menu.navigation" :key="item.name"> <template v-for="item in menu.navigation" :key="item.name">
<!-- Single-level item --> <!-- Single-level item -->
<AsideMenuSingle v-if="item.children.length === 0" :item="item" <AsideMenuSingle v-if="item.children.length === 0" :item="item"
:selected="isMenu(item.href)" /> :selected="isMenu(item.path)" />
<!-- Nested item with children --> <!-- Nested item with children -->
<AsideMenuMultiple v-else :item="item" :selected="isMenu(item.href)" /> <AsideMenuMultiple v-else :item="item" :selected="isMenu(item.path)" />
</template> </template>
</nav> </nav>
</div> </div>
@ -120,10 +120,10 @@ const closeSideBar = () => menu.toggleSidebar()
<nav class="flex-1 px-2 pb-4 space-y-1"> <nav class="flex-1 px-2 pb-4 space-y-1">
<template v-for="item in menu.navigation" :key="item.name"> <template v-for="item in menu.navigation" :key="item.name">
<!-- Single-level item --> <!-- Single-level item -->
<AsideMenuSingle v-if="item.children.length === 0" :item="item" :selected="isMenu(item.href)" /> <AsideMenuSingle v-if="item.children.length === 0" :item="item" :selected="isMenu(item.path)" />
<!-- Nested item with children --> <!-- Nested item with children -->
<AsideMenuMultiple v-else :item="item" :selected="isMenu(item.href)" /> <AsideMenuMultiple v-else :item="item" :selected="isMenu(item.path)" />
</template> </template>
</nav> </nav>
</div> </div>

10
src/components/Navigation/Aside/AsideMenuMultiple.vue
View File

@ -27,7 +27,7 @@ const isMenu = (name: string) => {
} }
const isMenuSelected = computed(() => { const isMenuSelected = computed(() => {
return props.item.children.find((d) => d.href === menu.menuSelected) || props.item.children.find((d) => d.children.find((e) => e.href === menu.menuSelected)) return props.item.children.find((d) => d.path === menu.menuSelected) || props.item.children.find((d) => d.children.find((e) => e.path === menu.menuSelected))
}) })
</script> </script>
@ -35,7 +35,7 @@ const isMenuSelected = computed(() => {
<div :class="[isChildren ? 'ml-2 mt-1 bg-primary-100 rounded-xl' : '']"> <div :class="[isChildren ? 'ml-2 mt-1 bg-primary-100 rounded-xl' : '']">
<Disclosure v-bind:default-open="isMenuSelected ? true : false" as="dev"> <Disclosure v-bind:default-open="isMenuSelected ? true : false" as="dev">
<!-- Nested item with children --> <!-- Nested item with children -->
<DisclosureButton @click="menu.toggleSidebarMenu(item.href, !item.expanded)" <DisclosureButton @click="menu.toggleSidebarMenu(item.path, !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', isChildren ? 'pl-1 pr-2' : 'px-2', 'group w-full flex items-center py-2 text-left text-xs rounded-lg focus:outline-none focus:ring-0']"> :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', isChildren ? 'pl-1 pr-2' : 'px-2', 'group w-full flex items-center py-2 text-left text-xs rounded-lg focus:outline-none focus:ring-0']">
<embed :src="isChildren ? DotOutline : item.icon" <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']" :class="[isMenuSelected ? 'fill-primary-500' : 'fill-gray-400 group-hover:fill-gray-500', isChildren ? '' : 'mr-2', 'flex-shrink-0 w-6 h-6']"
@ -56,12 +56,12 @@ const isMenuSelected = computed(() => {
<div v-show="item.expanded"> <div v-show="item.expanded">
<DisclosurePanel :class="['bg-primary-100 rounded-xl ml-4', 'space-y-1']" static> <DisclosurePanel :class="['bg-primary-100 rounded-xl ml-4', 'space-y-1']" static>
<!-- Nested children --> <!-- Nested children -->
<template v-for="(subItem, index) in item.children" :key="subItem.href"> <template v-for="(subItem, index) in item.children" :key="subItem.path">
<!-- Single-level child --> <!-- Single-level child -->
<AsideMenuSingle v-if="subItem.children.length === 0" :item="subItem" :is-children="true" <AsideMenuSingle v-if="subItem.children.length === 0" :item="subItem" :is-children="true"
:selected="isMenu(subItem.href)" /> :selected="isMenu(subItem.path)" />
<!-- Multiple-level child --> <!-- Multiple-level child -->
<AsideMenuMultiple v-else :item="subItem" :selected="subItem.href === menu.menuSelected" <AsideMenuMultiple v-else :item="subItem" :selected="subItem.path === menu.menuSelected"
:is-children="true" /> :is-children="true" />
</template> </template>
</DisclosurePanel> </DisclosurePanel>

2
src/components/Navigation/Aside/AsideMenuSingle.vue
View File

@ -19,7 +19,7 @@ defineProps({
<template> <template>
<div class="group"> <div class="group">
<RouterLink :to="item.href" <RouterLink :to="item.path"
:class="[selected ? 'bg-primary-500 text-white font-bold' : 'font-semibold text-aside group-hover:bg-primary-100 text-gray-600 group-hover:text-white group-hover:bg-primary-500', 'w-full flex items-center pl-2 pr-4 py-2 text-xs rounded-xl', isChildren ? 'mt-1' : 'mt-0']"> :class="[selected ? 'bg-primary-500 text-white font-bold' : 'font-semibold text-aside group-hover:bg-primary-100 text-gray-600 group-hover:text-white group-hover:bg-primary-500', 'w-full flex items-center pl-2 pr-4 py-2 text-xs rounded-xl', isChildren ? 'mt-1' : 'mt-0']">
<svg v-if="isChildren" :class="[selected ? 'stroke-white' : 'text-aside group-hover:stroke-white', 'h-6 w-6']" <svg v-if="isChildren" :class="[selected ? 'stroke-white' : 'text-aside group-hover:stroke-white', 'h-6 w-6']"

14
src/components/Pages/TestPage.vue Normal file
View File

@ -0,0 +1,14 @@
<template>
<div class="flex flex-col items-center justify-center px-6 text-center whitespace-pre-wrap h-screen-80">
<h3 class="mt-2 text-gray-400 whitespace-pre-wrap text-md">
Selamat datang di aplikasi
</h3>
<h1 class="mt-1 text-2xl font-semibold text-gray-500 whitespace-pre-wrap">
{{ appName }}
</h1>
</div>
</template>
<script setup lang="ts">
const appName = import.meta.env.VITE_APP_NAME
</script>

364
src/router/index.ts
View File

@ -1,19 +1,16 @@
import { createRouter, createWebHistory } from 'vue-router' import { createRouter, createWebHistory } from 'vue-router'
import { useAuthStore } from '@/stores/auth'
import HomeView from '@/views/HomeView.vue' import HomeView from '@/views/HomeView.vue'
import LoginView from '@/views/LoginView.vue' import LoginView from '@/views/LoginView.vue'
import NotFoundView from '@/views/NotFoundView.vue' import NotFoundView from '@/views/NotFoundView.vue'
import AktifIndividual from '@/components/Pages/DaftarTransaksi/AktifIndividual.vue'
import EmptyPage from '@/components/Pages/HomeEmpty.vue' import EmptyPage from '@/components/Pages/HomeEmpty.vue'
import { useAuthStore } from '@/stores/auth' import TestPage from '@/components/Pages/TestPage.vue'
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL), export const routes = [
linkActiveClass: 'active',
routes: [
{ {
path: '/home', path: '/home',
name: 'Home', name: 'Home',
'meta': { requiresAuth: true },
component: HomeView, component: HomeView,
children: [ children: [
{ {
@ -32,37 +29,37 @@ const router = createRouter({
{ {
path: '1', path: '1',
name: 'Daftar Keluhan Dialihkan Ke Posko Lain', name: 'Daftar Keluhan Dialihkan Ke Posko Lain',
component: EmptyPage, component: TestPage,
}, },
{ {
path: '2', path: '2',
name: 'Daftar Gangguan Melapor Lebih Dari 1 Kali', name: 'Daftar Gangguan Melapor Lebih Dari 1 Kali',
component: EmptyPage, component: TestPage,
}, },
{ {
path: '3', path: '3',
name: 'Daftar Gangguan Response Time', name: 'Daftar Gangguan Response Time',
component: EmptyPage, component: TestPage,
}, },
{ {
path: '4', path: '4',
name: 'Daftar Gangguan Recovery Time', name: 'Daftar Gangguan Recovery Time',
component: EmptyPage, component: TestPage,
}, },
{ {
path: '5', path: '5',
name: 'Daftar Gangguan Selesai Tanpa ID Pelanggan', name: 'Daftar Gangguan Selesai Tanpa ID Pelanggan',
component: EmptyPage, component: TestPage,
}, },
{ {
path: '6', path: '6',
name: 'Daftar Gangguan Berdasarkan Media', name: 'Daftar Gangguan Berdasarkan Media',
component: EmptyPage, component: TestPage,
}, },
{ {
path: '7', path: '7',
name: 'Daftar Gangguan Diselesaikan Mobile APKT', name: 'Daftar Gangguan Diselesaikan Mobile APKT',
component: EmptyPage, component: TestPage,
}, },
], ],
}, },
@ -73,77 +70,384 @@ const router = createRouter({
{ {
path: '1', path: '1',
name: 'Rekapitulasi Gangguan All', name: 'Rekapitulasi Gangguan All',
component: EmptyPage, component: TestPage,
}, },
{ {
path: '2', path: '2',
name: 'Rekapitulasi Gangguan Per Jenis Gangguan', name: 'Rekapitulasi Gangguan Per Jenis Gangguan',
component: EmptyPage, component: TestPage,
}, },
{ {
path: '3', path: '3',
name: 'Rekapitulasi Gangguan Per Jenis Gangguan SE 004', name: 'Rekapitulasi Gangguan Per Jenis Gangguan SE 004',
component: EmptyPage, component: TestPage,
}, },
{ {
path: '4', path: '4',
name: 'Rekapitulasi Gangguan Per Posko', name: 'Rekapitulasi Gangguan Per Posko',
component: EmptyPage, component: TestPage,
}, },
{ {
path: '5', path: '5',
name: 'Rekapitulasi Gangguan Per Regu', name: 'Rekapitulasi Gangguan Per Regu',
component: EmptyPage, component: TestPage,
}, },
{ {
path: '6', path: '6',
name: 'Rekapitulasi Gangguan Per Tanggal', name: 'Rekapitulasi Gangguan Per Tanggal',
component: EmptyPage, component: TestPage,
}, },
{ {
path: '7', path: '7',
name: 'Rekapitulasi Gangguan Berdasarkan Media', name: 'Rekapitulasi Gangguan Berdasarkan Media',
component: EmptyPage, component: TestPage,
}, },
{ {
path: '8', path: '8',
name: 'Rekapitulasi Gangguan Alih Posko', name: 'Rekapitulasi Gangguan Alih Posko',
component: EmptyPage, component: TestPage,
}, },
{ {
path: '9', path: '9',
name: 'Rekapitulasi Gangguan Per Status', name: 'Rekapitulasi Gangguan Per Status',
component: EmptyPage, component: TestPage,
}, },
{ {
path: '10', path: '10',
name: 'Rekapitulasi Gangguan Diselesaikan Mobile APKT', name: 'Rekapitulasi Gangguan Diselesaikan Mobile APKT',
component: EmptyPage, component: TestPage,
}, },
{ {
path: '11', path: '11',
name: 'Rekapitulasi Rating Per Posko', name: 'Rekapitulasi Rating Per Posko',
component: EmptyPage, component: TestPage,
}, },
{ {
path: '12', path: '12',
name: 'Rekapitulasi Rating Per Regu', name: 'Rekapitulasi Rating Per Regu',
component: EmptyPage, component: TestPage,
}, },
{ {
path: '13', path: '13',
name: 'Rekapitulasi Koreksi Transaksi Individual', name: 'Rekapitulasi Koreksi Transaksi Individual',
component: EmptyPage, component: TestPage,
}, },
{ {
path: '14', path: '14',
name: 'Rekapitulasi Cleansing Transaksi TM', name: 'Rekapitulasi Cleansing Transaksi TM',
component: EmptyPage, component: TestPage,
}, },
], ],
} }
] ]
}, },
{
path: 'keluhan',
name: 'Keluhan',
children: [
{
path: '1',
name: 'Daftar',
children: [
{
path: '1',
name: 'Daftar Keluhan Dialihkan Ke Unit Lain',
component: TestPage,
},
{
path: '2',
name: 'Daftar Keluhan Pelanggan Lebih Dari 1 Kali',
component: TestPage,
},
{
path: '3',
name: 'Daftar Keluhan Response Time',
component: TestPage,
},
{
path: '4',
name: 'Daftar Keluhan Recovery Time',
component: TestPage,
},
{
path: '5',
name: 'Daftar Keluhan Selesai Tanpa ID Pelanggan',
component: TestPage,
},
{
path: '6',
name: 'Daftar Keluhan Berdasarkan Media',
component: TestPage,
},
{
path: '7',
name: 'Daftar Keluhan Selesai di CC123',
component: TestPage,
},
],
},
{
path: '2',
name: 'Rekapitulasi',
children: [
{
path: '1',
name: 'Rekapitulasi Keluhan All',
component: TestPage,
},
{
path: '2',
name: 'Rekapitulasi Keluhan Per Fungsi Bidang',
component: TestPage,
},
{
path: '3',
name: 'Rekapitulasi Keluhan Per Jenis Keluhan',
component: TestPage,
},
{
path: '4',
name: 'Rekapitulasi Keluhan Per Tanggal',
component: TestPage,
},
{
path: '5',
name: 'Rekapitulasi Keluhan Per Unit',
component: TestPage,
},
{
path: '6',
name: 'Rekapitulasi Keluhan Berdasarkan Media',
component: TestPage,
},
{
path: '7',
name: 'Rekapitulasi Keluhan Per Kelompok Keluhan',
component: TestPage,
},
{
path: '8',
name: 'Rekapitulasi Rating Per Unit',
component: TestPage,
},
],
}
],
},
{
path: 'monalisa',
name: 'Monalisa',
children: [
{
path: '1',
name: 'Gangguan',
children: [
{
path: '1',
name: 'Rekapitulasi',
children: [
{
path: '1',
name: 'Jumlah Kali Gangguan',
component: TestPage,
},
{
path: '2',
name: 'Recovery Time (RCT) Gangguan',
component: TestPage,
},
{
path: '3',
name: 'Response Time (RPT) Gangguan',
component: TestPage,
},
{
path: '4',
name: 'Rekapitulasi Gangguan Per Jenis Gangguan',
component: TestPage,
},
{
path: '5',
name: 'Rekapitulasi Lapor Ulang Gangguan',
component: TestPage,
},
{
path: '6',
name: 'Rekapitulasi ENS Gangguan',
component: TestPage,
},
{
path: '7',
name: 'Rekapitulasi Gangguan Belum Selesai',
component: TestPage,
},
],
},
],
},
{
path: '2',
name: 'Keluhan',
children: [
{
path: '1',
name: 'Rekapitulasi',
children: [
{
path: '1',
name: 'Jumlah Kali Keluhan',
component: TestPage,
},
{
path: '2',
name: 'Recovery Time (RCT) Keluhan',
component: TestPage,
},
{
path: '3',
name: 'Response Time (RPT) Keluhan',
component: TestPage,
},
{
path: '4',
name: 'Rekapitulasi Gangguan Per Jenis Keluhan',
component: TestPage,
},
{
path: '5',
name: 'Rekapitulasi Lapor Ulang Keluhan',
component: TestPage,
},
{
path: '6',
name: 'Rekapitulasi Keluhan Belum Selesai',
component: TestPage,
},
],
},
],
},
{
path: '3',
name: 'Laporan KPI',
children: [
{
path: '1',
name: 'Bulanan',
children: [
{
path: '1',
name: 'Penurunan Jumlah Komplain',
component: TestPage,
},
{
path: '2',
name: 'Aging Complaint',
component: TestPage,
},
{
path: '3',
name: 'Energy Not Sales (ENS)',
component: TestPage,
},
{
path: '4',
name: 'Kepatuhan dan Akurasi Dalam Pelaporan',
component: TestPage,
},
],
},
{
path: '2',
name: 'Kumulatif',
children: [
{
path: '1',
name: 'Penurunan Jumlah Komplain',
component: TestPage,
},
{
path: '2',
name: 'Aging Complaint',
component: TestPage,
},
{
path: '3',
name: 'Energy Not Sales (ENS)',
component: TestPage,
},
{
path: '4',
name: 'Kepatuhan dan Akurasi Dalam Pelaporan',
component: TestPage,
},
],
}
],
},
],
},
{
path: 'check-in-out',
name: 'Check In OutCheck In Dan Check Out',
children: [
{
path: '1',
name: 'Laporan Check In /Check Out (CICO)',
children: [
{
path: '1',
name: 'Laporan Check In /Check Out (CICO)',
component: TestPage,
},
],
},
],
},
{
path: 'anomali-pengaduan',
name: 'Anomali Penangan Pengaduan',
children: [
{
path: '1',
name: 'Gangguan',
children: [
{
path: '1',
name: 'Laporan Anomali Penangan Pengaduan Gangguan Unit',
component: TestPage,
},
{
path: '2',
name: 'Laporan Anomali Penangan Pengaduan Gangguan Petugas',
component: TestPage,
},
],
},
{
path: '2',
name: 'Keluhan',
children: [
{
path: '1',
name: 'Laporan Anomali Penangan Pengaduan Keluhan Unit',
component: TestPage,
},
],
},
],
},
{
path: 'ctt-kwh-periksa',
name: 'CTT & KWH Periksa',
children: [
{
path: '1',
name: 'Laporan CTT & KWH Periksa',
component: TestPage,
},
],
},
] ]
}, },
{ {
@ -157,6 +461,10 @@ const router = createRouter({
component: NotFoundView component: NotFoundView
}, },
] ]
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
linkActiveClass: 'active',
routes: routes
}) })
router.beforeEach((to, from, next) => { router.beforeEach((to, from, next) => {

623
src/stores/menu.ts
View File

@ -1,627 +1,26 @@
import { ref } from 'vue' import { onMounted, ref } from 'vue'
import { defineStore } from 'pinia' import { defineStore } from 'pinia'
import {
Gauge,
LightningSlash,
Monitor,
Plugs,
SmileySad,
Swap
} from '@/utils/icons'
import type { MenuItemModel } from '@/utils/interfaces' import type { MenuItemModel } from '@/utils/interfaces'
import { useRoute, useRouter } from 'vue-router' import { useRoute } from 'vue-router'
import { convertRouteToMenu } from '@/utils/route'
import { routes } from '@/router'
export const useMenuStore = defineStore('menu', () => { export const useMenuStore = defineStore('menu', () => {
const route = useRoute() const route = useRoute()
const navigation = ref<MenuItemModel[]>([ const navigation = ref<MenuItemModel[]>([])
{
name: 'Gangguan',
href: '/home/gangguan',
icon: LightningSlash,
expanded: false,
children: [
{
name: 'Daftar',
href: '/home/gangguan/1',
icon: LightningSlash,
expanded: false,
children: [
{
name: 'Daftar Keluhan Dialihkan Ke Posko Lain',
href: '/home/gangguan/1/1',
icon: LightningSlash,
expanded: false,
children: [],
},
{
name: 'Daftar Gangguan Melapor Lebih Dari 1 Kali',
href: '/home/gangguan/1/2',
icon: LightningSlash,
expanded: false,
children: [],
},
{
name: 'Daftar Gangguan Response Time',
href: '/home/gangguan/1/3',
icon: LightningSlash,
expanded: false,
children: [],
},
{
name: 'Daftar Gangguan Recovery Time',
href: '/home/gangguan/1/4',
icon: LightningSlash,
expanded: false,
children: [],
},
{
name: 'Daftar Gangguan Selesai Tanpa ID Pelanggan',
href: '/home/gangguan/1/5',
icon: LightningSlash,
expanded: false,
children: [],
},
{
name: 'Daftar Gangguan Berdasarkan Media',
href: '/home/gangguan/1/6',
icon: LightningSlash,
expanded: false,
children: [],
},
{
name: 'Daftar Gangguan Diselesaikan Mobile APKT',
href: '/home/gangguan/1/7',
icon: LightningSlash,
expanded: false,
children: [],
},
],
},
{
name: 'Rekapitulasi',
href: '/home/gangguan/2',
icon: LightningSlash,
expanded: false,
children: [
{
name: 'Rekapitulasi Gangguan All',
href: '/home/gangguan/2/1',
icon: LightningSlash,
expanded: false,
children: [],
},
{
name: 'Rekapitulasi Gangguan Per Jenis Gangguan',
href: '/home/gangguan/2/2',
icon: LightningSlash,
expanded: false,
children: [],
},
{
name: 'Rekapitulasi Gangguan Per Jenis Gangguan SE 004',
href: '/home/gangguan/2/3',
icon: LightningSlash,
expanded: false,
children: [],
},
{
name: 'Rekapitulasi Gangguan Per Posko',
href: '/home/gangguan/2/4',
icon: LightningSlash,
expanded: false,
children: [],
},
{
name: 'Rekapitulasi Gangguan Per Regu',
href: '/home/gangguan/2/5',
icon: LightningSlash,
expanded: false,
children: [],
},
{
name: 'Rekapitulasi Gangguan Per Tanggal',
href: '/home/gangguan/2/6',
icon: LightningSlash,
expanded: false,
children: [],
},
{
name: 'Rekapitulasi Gangguan Berdasarkan Media',
href: '/home/gangguan/2/7',
icon: LightningSlash,
expanded: false,
children: [],
},
{
name: 'Rekapitulasi Gangguan Alih Posko',
href: '/home/gangguan/2/8',
icon: LightningSlash,
expanded: false,
children: [],
},
{
name: 'Rekapitulasi Gangguan Per Status',
href: '/home/gangguan/2/9',
icon: LightningSlash,
expanded: false,
children: [],
},
{
name: 'Rekapitulasi Gangguan Diselesaikan Mobile APKT',
href: '/home/gangguan/2/10',
icon: LightningSlash,
expanded: false,
children: [],
},
{
name: 'Rekapitulasi Rating Per Posko',
href: '/home/gangguan/2/11',
icon: LightningSlash,
expanded: false,
children: [],
},
{
name: 'Rekapitulasi Rating Per Regu',
href: '/home/gangguan/2/12',
icon: LightningSlash,
expanded: false,
children: [],
},
{
name: 'Rekapitulasi Koreksi Transaksi Individual',
href: '/home/gangguan/2/13',
icon: LightningSlash,
expanded: false,
children: [],
},
{
name: 'Rekapitulasi Cleansing Transaksi TM',
href: '/home/gangguan/2/14',
icon: LightningSlash,
expanded: false,
children: [],
},
],
},
],
},
{
name: 'Keluhan',
href: '/home/keluhan',
icon: SmileySad,
expanded: false,
children: [
{
name: 'Daftar',
icon: SmileySad,
href: '/home/keluhan/1',
expanded: false,
children: [
{
name: 'Daftar Keluhan Dialihkan Ke Unit Lain',
href: '/home/keluhan/1/1',
icon: SmileySad,
expanded: false,
children: [],
},
{
name: 'Daftar Keluhan Pelanggan Lebih Dari 1 Kali',
href: '/home/keluhan/1/2',
icon: SmileySad,
expanded: false,
children: [],
},
{
name: 'Daftar Keluhan Response Time',
href: '/home/keluhan/1/3',
icon: SmileySad,
expanded: false,
children: [],
},
{
name: 'Daftar Keluhan Recovery Time',
href: '/home/keluhan/1/4',
icon: SmileySad,
expanded: false,
children: [],
},
{
name: 'Daftar Keluhan Selesai Tanpa ID Pelanggan',
href: '/home/keluhan/1/5',
icon: SmileySad,
expanded: false,
children: [],
},
{
name: 'Daftar Keluhan Berdasarkan Media',
href: '/home/keluhan/1/6',
icon: SmileySad,
expanded: false,
children: [],
},
{
name: 'Daftar Keluhan Selesai di CC123',
href: '/home/keluhan/1/7',
icon: SmileySad,
expanded: false,
children: [],
},
],
},
{
name: 'Rekapitulasi',
icon: SmileySad,
href: '/home/keluhan/2',
expanded: false,
children: [
{
name: 'Rekapitulasi Keluhan All',
href: '/home/keluhan/2/1',
icon: SmileySad,
expanded: false,
children: [],
},
{
name: 'Rekapitulasi Keluhan Per Fungsi Bidang',
href: '/home/keluhan/2/2',
icon: SmileySad,
expanded: false,
children: [],
},
{
name: 'Rekapitulasi Keluhan Per Jenis Keluhan',
href: '/home/keluhan/2/3',
icon: SmileySad,
expanded: false,
children: [],
},
{
name: 'Rekapitulasi Keluhan Per Tanggal',
href: '/home/keluhan/2/4',
icon: SmileySad,
expanded: false,
children: [],
},
{
name: 'Rekapitulasi Keluhan Per Unit',
href: '/home/keluhan/2/5',
icon: SmileySad,
expanded: false,
children: [],
},
{
name: 'Rekapitulasi Keluhan Berdasarkan Media',
href: '/home/keluhan/2/6',
icon: SmileySad,
expanded: false,
children: [],
},
{
name: 'Rekapitulasi Keluhan Per Kelompok Keluhan',
href: '/home/keluhan/2/7',
icon: SmileySad,
expanded: false,
children: [],
},
{
name: 'Rekapitulasi Rating Per Unit',
href: '/home/keluhan/2/8',
icon: SmileySad,
expanded: false,
children: [],
},
],
},
],
},
{
name: 'Monalisa',
href: '/home/monalisa',
icon: Monitor,
expanded: false,
children: [
{
name: 'Gangguan',
icon: Monitor,
href: '/home/monalisa/1',
expanded: false,
children: [
{
name: 'Rekapitulasi',
href: '/home/monalisa/1/1',
icon: Monitor,
expanded: false,
children: [
{
name: 'Jumlah Kali Gangguan',
href: '/home/monalisa/1/1/1',
icon: Monitor,
expanded: false,
children: [],
},
{
name: 'Recovery Time (RCT) Gangguan',
href: '/home/monalisa/1/1/2',
icon: Monitor,
expanded: false,
children: [],
},
{
name: 'Response Time (RPT) Gangguan',
href: '/home/monalisa/1/1/3',
icon: Monitor,
expanded: false,
children: [],
},
{
name: 'Rekapitulasi Gangguan Per Jenis Gangguan',
href: '/home/monalisa/1/1/4',
icon: Monitor,
expanded: false,
children: [],
},
{
name: 'Rekapitulasi Lapor Ulang Gangguan',
href: '/home/monalisa/1/1/5',
icon: Monitor,
expanded: false,
children: [],
},
{
name: 'Rekapitulasi ENS Gangguan',
href: '/home/monalisa/1/1/6',
icon: Monitor,
expanded: false,
children: [],
},
{
name: 'Rekapitulasi Gangguan Belum Selesai',
href: '/home/monalisa/1/1/7',
icon: Monitor,
expanded: false,
children: [],
},
],
},
],
},
{
name: 'Keluhan',
icon: Monitor,
href: '/home/monalisa/2',
expanded: false,
children: [
{
name: 'Rekapitulasi',
href: '/home/monalisa/2/1',
icon: Monitor,
expanded: false,
children: [
{
name: 'Jumlah Kali Keluhan',
href: '/home/monalisa/2/1/1',
icon: Monitor,
expanded: false,
children: [],
},
{
name: 'Recovery Time (RCT) Keluhan',
href: '/home/monalisa/2/1/2',
icon: Monitor,
expanded: false,
children: [],
},
{
name: 'Response Time (RPT) Keluhan',
href: '/home/monalisa/2/1/3',
icon: Monitor,
expanded: false,
children: [],
},
{
name: 'Rekapitulasi Gangguan Per Jenis Keluhan',
href: '/home/monalisa/2/1/4',
icon: Monitor,
expanded: false,
children: [],
},
{
name: 'Rekapitulasi Lapor Ulang Keluhan',
href: '/home/monalisa/2/1/5',
icon: Monitor,
expanded: false,
children: [],
},
{
name: 'Rekapitulasi Keluhan Belum Selesai',
href: '/home/monalisa/2/1/6',
icon: Monitor,
expanded: false,
children: [],
},
],
},
],
},
{
name: 'Laporan KPI',
icon: Monitor,
href: '/home/monalisa/3',
expanded: false,
children: [
{
name: 'Bulanan',
icon: Monitor,
href: '/home/monalisa/3/1',
expanded: false,
children: [
{
name: 'Penurunan Jumlah Komplain',
icon: Monitor,
href: '/home/monalisa/3/1/1',
expanded: false,
children: [],
},
{
name: 'Aging Complaint',
icon: Monitor,
href: '/home/monalisa/3/1/2',
expanded: false,
children: [],
},
{
name: 'Energy Not Sales (ENS)',
icon: Monitor,
href: '/home/monalisa/3/1/3',
expanded: false,
children: [],
},
{
name: 'Kepatuhan dan Akurasi Dalam Pelaporan',
icon: Monitor,
href: '/home/monalisa/3/1/4',
expanded: false,
children: [],
},
],
},
{
name: 'Kumulatif',
icon: Monitor,
href: '/home/monalisa/3/2',
expanded: false,
children: [
{
name: 'Penurunan Jumlah Komplain',
icon: Monitor,
href: '/home/monalisa/3/2/1',
expanded: false,
children: [],
},
{
name: 'Aging Complaint',
icon: Monitor,
href: '/home/monalisa/3/2/2',
expanded: false,
children: [],
},
{
name: 'Energy Not Sales (ENS)',
icon: Monitor,
href: '/home/monalisa/3/2/3',
expanded: false,
children: [],
},
{
name: 'Kepatuhan dan Akurasi Dalam Pelaporan',
icon: Monitor,
href: '/home/monalisa/3/2/4',
expanded: false,
children: [],
}
],
}
],
},
],
},
{
name: 'Check In Dan Check Out',
href: '/home/check-in-out',
icon: Swap,
expanded: false,
children: [
{
name: 'Laporan Check In /Check Out (CICO)',
href: '/home/check-in-out/1',
icon: Swap,
expanded: false,
children: [
{
name: 'Laporan Check In /Check Out (CICO)',
href: '/home/check-in-out/1/1',
icon: Swap,
expanded: false,
children: [],
},
],
},
],
},
{
name: 'Anomali Penangan Pengaduan',
href: '/home/anomali-pengaduan',
icon: Plugs,
expanded: false,
children: [
{
name: 'Gangguan',
href: '/home/anomali-pengaduan/1',
icon: Plugs,
expanded: false,
children: [
{
name: 'Laporan Anomali Penangan Pengaduan Gangguan Unit',
href: '/home/anomali-pengaduan/1/1',
icon: Plugs,
expanded: false,
children: []
},
{
name: 'Laporan Anomali Penangan Pengaduan Gangguan Petugas',
href: '/home/anomali-pengaduan/1/2',
icon: Plugs,
expanded: false,
children: []
},
]
},
{
name: 'Keluhan',
href: '/home/anomali-pengaduan/2',
icon: Plugs,
expanded: false,
children: [
{
name: 'Laporan Anomali Penangan Pengaduan Keluhan Unit',
href: '/home/anomali-pengaduan/2/1',
icon: Plugs,
expanded: false,
children: []
}
]
}
]
},
{
name: 'CTT & KWH Periksa',
href: '/home/ctt-kwh-periksa',
icon: Gauge,
expanded: false,
children: [
{
name: 'Laporan CTT & KWH Periksa',
href: '/home/ctt-kwh-periksa/1',
icon: Gauge,
expanded: false,
children: []
}
]
}
])
const sidebarOpen = ref(false) const sidebarOpen = ref(false)
const sidebarShowed = ref(true) const sidebarShowed = ref(true)
const menuSelected = ref(route.fullPath) const menuSelected = ref(route.fullPath)
const toggleSidebar = () => (sidebarOpen.value = !sidebarOpen.value) const toggleSidebar = () => (sidebarOpen.value = !sidebarOpen.value)
const toggleSidebarMenu = (href: string, newExpanded: boolean): void => { const toggleSidebarMenu = (path: string, newExpanded: boolean): void => {
const toggleItemExpanded = (items: MenuItemModel[]): void => { const toggleItemExpanded = (items: MenuItemModel[]): void => {
for (const item of items) { for (const item of items) {
if (item.href === href) { if (item.path === path) {
item.expanded = newExpanded item.expanded = newExpanded
} else { } else {
if (newExpanded) { if (newExpanded) {
if (!href.includes(item.href)) { if (!path.includes(item.path)) {
item.expanded = !newExpanded; item.expanded = !newExpanded;
} }
} }
@ -635,6 +34,12 @@ export const useMenuStore = defineStore('menu', () => {
toggleItemExpanded(navigation.value) toggleItemExpanded(navigation.value)
} }
const toggleSidebarDesktop = () => (sidebarShowed.value = !sidebarShowed.value) const toggleSidebarDesktop = () => (sidebarShowed.value = !sidebarShowed.value)
onMounted(() => {
const menuData = convertRouteToMenu(routes.at(0)?.children || [])
navigation.value = menuData
})
return { return {
navigation, navigation,
toggleSidebar, toggleSidebar,

2
src/utils/interfaces.ts
View File

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