fix(filters): change code structure and data flow in filter type 1

This commit is contained in:
kur0nek-o
2024-02-09 14:24:09 +07:00
parent 62cbcc9c28
commit cb8e11b1e9
12 changed files with 838 additions and 560 deletions

View File

@ -1,4 +1,3 @@
import { createRouter, createWebHistory, type RouteRecordRaw } from 'vue-router'
import { useAuthStore } from '@/stores/auth'
import HomeView from '@/views/HomeView.vue'
@ -28,7 +27,7 @@ import {
GangguanTable17,
GangguanTable18,
GangguanTable19,
GangguanTable20,
GangguanTable20
} from '@/components/Pages/Gangguan'
import {
KeluhanTable1,
@ -45,7 +44,7 @@ import {
KeluhanTable12,
KeluhanTable13,
KeluhanTable14,
KeluhanTable15,
KeluhanTable15
} from '@/components/Pages/Keluhan'
import {
MonalisaTable1,
@ -74,7 +73,12 @@ import {
MonalisaTable9
} from '@/components/Pages/Monalisa'
import { CicoTable1 } from '@/components/Pages/Cico'
import { AnomaliTable1, AnomaliTable2, AnomaliTable3, AnomaliTable5 } from '@/components/Pages/Anomali'
import {
AnomaliTable1,
AnomaliTable2,
AnomaliTable3,
AnomaliTable5
} from '@/components/Pages/Anomali'
import { CttTable1 } from '@/components/Pages/Ctt'
import { MaterialTable1, MaterialTable2 } from '@/components/Pages/Material'
import { TransaksiTable1 } from '@/components/Pages/Transaksi'
@ -89,7 +93,7 @@ export const routes: RouteRecordRaw[] = [
{
path: '',
name: 'Home Page',
component: WelcomePage,
component: WelcomePage
},
{
path: 'gangguan',
@ -102,43 +106,43 @@ export const routes: RouteRecordRaw[] = [
{
path: '1',
name: 'Daftar Gangguan Dialihkan Ke Posko Lain',
component: GangguanTable1,
component: GangguanTable1
},
{
path: '2',
name: 'Daftar Gangguan Melapor Lebih Dari 1 Kali',
component: GangguanTable2,
component: GangguanTable2
},
{
path: '3',
name: 'Daftar Gangguan Response Time',
component: GangguanTable3,
component: GangguanTable3
},
{
path: '4',
name: 'Daftar Gangguan Recovery Time',
component: GangguanTable4,
component: GangguanTable4
},
{
path: '5',
name: 'Daftar Gangguan Selesai Tanpa ID Pelanggan',
component: GangguanTable5,
component: GangguanTable5
},
{
path: '6',
name: 'Daftar Gangguan Berdasarkan Media',
component: GangguanTable6,
component: GangguanTable6
},
{
path: '7',
name: 'Daftar Gangguan Diselesaikan Mobile APKT',
component: GangguanTable7,
component: GangguanTable7
},
{
path: ':pathMatch(.*)*',
component: EmptyPage,
component: EmptyPage
}
],
]
},
{
path: 'rekapitulasi',
@ -147,77 +151,77 @@ export const routes: RouteRecordRaw[] = [
{
path: '1',
name: 'Rekapitulasi Gangguan All',
component: GangguanTable8,
component: GangguanTable8
},
{
path: '2',
name: 'Rekapitulasi Gangguan/Jenis Gangguan',
component: GangguanTable9,
component: GangguanTable9
},
{
path: '3',
name: 'Rekapitulasi Gangguan/Jenis Gangguan SE 004',
component: GangguanTable10,
component: GangguanTable10
},
{
path: '4',
name: 'Rekapitulasi Gangguan Per Posko',
component: GangguanTable11,
component: GangguanTable11
},
{
path: '5',
name: 'Rekapitulasi Gangguan Per Regu',
component: GangguanTable12,
component: GangguanTable12
},
{
path: '6',
name: 'Rekapitulasi Gangguan Per Tanggal',
component: GangguanTable13,
component: GangguanTable13
},
{
path: '7',
name: 'Rekapitulasi Gangguan Berdasarkan Media',
component: GangguanTable14,
component: GangguanTable14
},
{
path: '8',
name: 'Rekapitulasi Gangguan Alih Posko',
component: GangguanTable15,
component: GangguanTable15
},
{
path: '9',
name: 'Rekapitulasi Gangguan Diselesaikan Mobile APKT',
component: GangguanTable16,
component: GangguanTable16
},
{
path: '10',
name: 'Rekapitulasi Rating Per Posko',
component: GangguanTable17,
component: GangguanTable17
},
{
path: '11',
name: 'Rekapitulasi Rating Per Regu',
component: GangguanTable18,
component: GangguanTable18
},
{
path: '12',
name: 'Rekapitulasi Koreksi Transaksi Individual',
component: GangguanTable19,
component: GangguanTable19
},
{
path: '13',
name: 'Rekapitulasi Cleansing Transaksi TM',
component: GangguanTable20,
component: GangguanTable20
},
{
path: ':pathMatch(.*)*',
component: EmptyPage,
component: EmptyPage
}
],
]
},
{
path: ':pathMatch(.*)*',
component: EmptyPage,
component: EmptyPage
}
]
},
@ -232,43 +236,43 @@ export const routes: RouteRecordRaw[] = [
{
path: '1',
name: 'Daftar Keluhan Dialihkan Ke Unit Lain',
component: KeluhanTable1,
component: KeluhanTable1
},
{
path: '2',
name: 'Daftar Keluhan Pelanggan Lebih Dari 1 Kali',
component: KeluhanTable2,
component: KeluhanTable2
},
{
path: '3',
name: 'Daftar Keluhan Response Time',
component: KeluhanTable3,
component: KeluhanTable3
},
{
path: '4',
name: 'Daftar Keluhan Recovery Time',
component: KeluhanTable4,
component: KeluhanTable4
},
{
path: '5',
name: 'Daftar Keluhan Selesai Tanpa ID Pelanggan',
component: KeluhanTable5,
component: KeluhanTable5
},
{
path: '6',
name: 'Daftar Keluhan Berdasarkan Media',
component: KeluhanTable6,
component: KeluhanTable6
},
{
path: '7',
name: 'Daftar Keluhan Selesai di CC123',
component: KeluhanTable7,
component: KeluhanTable7
},
{
path: ':pathMatch(.*)*',
component: EmptyPage,
component: EmptyPage
}
],
]
},
{
path: 'rekapitulasi',
@ -277,54 +281,54 @@ export const routes: RouteRecordRaw[] = [
{
path: '1',
name: 'Rekapitulasi Keluhan All',
component: KeluhanTable8,
component: KeluhanTable8
},
{
path: '2',
name: 'Rekapitulasi Keluhan Per Fungsi Bidang',
component: KeluhanTable9,
component: KeluhanTable9
},
{
path: '3',
name: 'Rekapitulasi Keluhan Per Jenis Keluhan',
component: KeluhanTable10,
component: KeluhanTable10
},
{
path: '4',
name: 'Rekapitulasi Keluhan Per Kelompok Keluhan',
component: KeluhanTable11,
component: KeluhanTable11
},
{
path: '5',
name: 'Rekapitulasi Keluhan Per Tanggal',
component: KeluhanTable12,
component: KeluhanTable12
},
{
path: '6',
name: 'Rekapitulasi Keluhan Per Unit',
component: KeluhanTable13,
component: KeluhanTable13
},
{
path: '7',
name: 'Rekapitulasi Keluhan Berdasarkan Media',
component: KeluhanTable14,
component: KeluhanTable14
},
{
path: '8',
name: 'Rekapitulasi Rating Per Unit',
component: KeluhanTable15,
component: KeluhanTable15
},
{
path: ':pathMatch(.*)*',
component: EmptyPage,
component: EmptyPage
}
],
]
},
{
path: ':pathMatch(.*)*',
component: EmptyPage,
component: EmptyPage
}
],
]
},
{
path: 'monalisa',
@ -341,59 +345,59 @@ export const routes: RouteRecordRaw[] = [
{
path: '1',
name: 'Jumlah Kali Gangguan',
component: MonalisaTable1,
component: MonalisaTable1
},
{
path: '2',
name: 'Dispacthing Time (DT) Gangguan',
component: MonalisaTable2,
component: MonalisaTable2
},
{
path: '3',
name: 'Recovery Time (RCT) Gangguan',
component: MonalisaTable3,
component: MonalisaTable3
},
{
path: '4',
name: 'Response Time (RPT) Gangguan',
component: MonalisaTable4,
component: MonalisaTable4
},
{
path: '5',
name: 'Jumlah dan Durasi RPT RCT Gangguan',
component: MonalisaTable5,
component: MonalisaTable5
},
{
path: '6',
name: 'Rekapitulasi Gangguan Per Jenis Gangguan',
component: MonalisaTable6,
component: MonalisaTable6
},
{
path: '7',
name: 'Rekapitulasi Lapor Ulang Gangguan',
component: MonalisaTable7,
component: MonalisaTable7
},
{
path: '8',
name: 'Rekapitulasi ENS Gangguan',
component: MonalisaTable8,
component: MonalisaTable8
},
{
path: '9',
name: 'Rekapitulasi Gangguan Belum Selesai',
component: MonalisaTable9,
component: MonalisaTable9
},
{
path: ':pathMatch(.*)*',
component: EmptyPage,
component: EmptyPage
}
],
]
},
{
path: ':pathMatch(.*)*',
component: EmptyPage,
component: EmptyPage
}
],
]
},
{
path: 'keluhan',
@ -406,49 +410,49 @@ export const routes: RouteRecordRaw[] = [
{
path: '1',
name: 'Jumlah Kali Keluhan',
component: MonalisaTable10,
component: MonalisaTable10
},
{
path: '2',
name: 'Recovery Time (RCT) Keluhan',
component: MonalisaTable11,
component: MonalisaTable11
},
{
path: '3',
name: 'Response Time (RPT) Keluhan',
component: MonalisaTable12,
component: MonalisaTable12
},
{
path: '4',
name: 'Jumlah dan Durasi RPT RCT Keluhan',
component: MonalisaTable13,
component: MonalisaTable13
},
{
path: '5',
name: 'Rekapitulasi Gangguan Per Jenis Keluhan',
component: MonalisaTable14,
component: MonalisaTable14
},
{
path: '6',
name: 'Rekapitulasi Lapor Ulang Keluhan',
component: MonalisaTable15,
component: MonalisaTable15
},
{
path: '7',
name: 'Rekapitulasi Keluhan Belum Selesai',
component: MonalisaTable16,
component: MonalisaTable16
},
{
path: ':pathMatch(.*)*',
component: EmptyPage,
component: EmptyPage
}
],
]
},
{
path: ':pathMatch(.*)*',
component: EmptyPage,
component: EmptyPage
}
],
]
},
{
path: 'laporan-kpi',
@ -461,28 +465,28 @@ export const routes: RouteRecordRaw[] = [
{
path: '1',
name: '(Monalisa) Penurunan Jumlah Komplain',
component: MonalisaTable17,
component: MonalisaTable17
},
{
path: '2',
name: '(Monalisa) Aging Complaint',
component: MonalisaTable18,
component: MonalisaTable18
},
{
path: '3',
name: '(Monalisa) Energy Not Sales (ENS)',
component: MonalisaTable19,
component: MonalisaTable19
},
{
path: '4',
name: '(Monalisa) Kepatuhan dan Akurasi Dalam Pelaporan',
component: MonalisaTable20,
component: MonalisaTable20
},
{
path: ':pathMatch(.*)*',
component: EmptyPage,
component: EmptyPage
}
],
]
},
{
path: 'kumulatif',
@ -491,40 +495,40 @@ export const routes: RouteRecordRaw[] = [
{
path: '1',
name: 'Penurunan Jumlah Komplain',
component: MonalisaTable21,
component: MonalisaTable21
},
{
path: '2',
name: 'Aging Complaint',
component: MonalisaTable22,
component: MonalisaTable22
},
{
path: '3',
name: 'Energy Not Sales (ENS)',
component: MonalisaTable23,
component: MonalisaTable23
},
{
path: '4',
name: 'Kepatuhan dan Akurasi Dalam Pelaporan',
component: MonalisaTable24,
component: MonalisaTable24
},
{
path: ':pathMatch(.*)*',
component: EmptyPage,
component: EmptyPage
}
],
]
},
{
path: ':pathMatch(.*)*',
component: EmptyPage,
},
],
component: EmptyPage
}
]
},
{
path: ':pathMatch(.*)*',
component: EmptyPage,
},
],
component: EmptyPage
}
]
},
{
path: 'check-in-out',
@ -537,19 +541,19 @@ export const routes: RouteRecordRaw[] = [
{
path: '1',
name: 'Laporan Check In /Check Out (CICO)',
component: CicoTable1,
component: CicoTable1
},
{
path: ':pathMatch(.*)*',
component: EmptyPage,
component: EmptyPage
}
],
]
},
{
path: ':pathMatch(.*)*',
component: EmptyPage,
component: EmptyPage
}
],
]
},
{
path: 'anomali-pengaduan',
@ -562,18 +566,18 @@ export const routes: RouteRecordRaw[] = [
{
path: '1',
name: 'Laporan Anomali Penangan Pengaduan Gangguan Unit',
component: AnomaliTable1,
component: AnomaliTable1
},
{
path: '2',
name: 'Laporan Anomali Penangan Pengaduan Gangguan Petugas',
component: AnomaliTable3,
component: AnomaliTable3
},
{
path: ':pathMatch(.*)*',
component: EmptyPage,
component: EmptyPage
}
],
]
},
{
path: 'keluhan',
@ -582,19 +586,19 @@ export const routes: RouteRecordRaw[] = [
{
path: '1',
name: 'Laporan Anomali Penangan Pengaduan Keluhan Unit',
component: AnomaliTable5,
component: AnomaliTable5
},
{
path: ':pathMatch(.*)*',
component: EmptyPage,
component: EmptyPage
}
],
]
},
{
path: ':pathMatch(.*)*',
component: EmptyPage,
component: EmptyPage
}
],
]
},
{
path: 'ctt-kwh-periksa',
@ -603,13 +607,13 @@ export const routes: RouteRecordRaw[] = [
{
path: '1',
name: 'Laporan CTT & KWH Periksa',
component: CttTable1,
component: CttTable1
},
{
path: ':pathMatch(.*)*',
component: EmptyPage,
component: EmptyPage
}
],
]
},
{
path: 'material',
@ -622,13 +626,13 @@ export const routes: RouteRecordRaw[] = [
{
path: '1',
name: 'Daftar Gangguan Dan Material Yang Dipakai',
component: MaterialTable1,
component: MaterialTable1
},
{
path: ':pathMatch(.*)*',
component: EmptyPage,
component: EmptyPage
}
],
]
},
{
path: 'rekapitulasi',
@ -637,19 +641,19 @@ export const routes: RouteRecordRaw[] = [
{
path: '1',
name: 'Rekapitulasi Pemakaian Material',
component: MaterialTable2,
component: MaterialTable2
},
{
path: ':pathMatch(.*)*',
component: EmptyPage,
component: EmptyPage
}
],
]
},
{
path: ':pathMatch(.*)*',
component: EmptyPage,
component: EmptyPage
}
],
]
},
{
path: 'transaksi',
@ -658,13 +662,13 @@ export const routes: RouteRecordRaw[] = [
{
path: '1',
name: 'Transaksi APKT',
component: TransaksiTable1,
component: TransaksiTable1
},
{
path: ':pathMatch(.*)*',
component: EmptyPage,
component: EmptyPage
}
],
]
},
{
path: 'pencarian-data',
@ -673,17 +677,17 @@ export const routes: RouteRecordRaw[] = [
{
path: '1',
name: 'Pencarian Report Number',
component: PencarianDataTable1,
component: PencarianDataTable1
},
{
path: ':pathMatch(.*)*',
component: EmptyPage,
component: EmptyPage
}
]
},
{
path: ':pathMatch(.*)*',
component: EmptyPage,
component: EmptyPage
}
]
},
@ -711,46 +715,45 @@ export const routes: RouteRecordRaw[] = [
]
export const mergeChildrenRoutes = (routes: RouteRecordRaw[]): RouteRecordRaw[] => {
const mergedRoutes: RouteRecordRaw[] = [];
const mergedRoutes: RouteRecordRaw[] = []
for (const route of routes) {
if (route.children && route.children.length > 0) {
// Buat salinan route tanpa children
const topLevelRoute: RouteRecordRaw = { ...route, children: [] };
const topLevelRoute: RouteRecordRaw = { ...route, children: [] }
// Salin setiap route children ke children route paling atas
for (const childRoute of route.children) {
const fullPath = `${route.path}/${childRoute.path}`.replace(/\/+/g, '/');
const mergedChildRoute: RouteRecordRaw = { ...childRoute, path: fullPath };
topLevelRoute.children?.push(mergedChildRoute);
const fullPath = `${route.path}/${childRoute.path}`.replace(/\/+/g, '/')
const mergedChildRoute: RouteRecordRaw = { ...childRoute, path: fullPath }
topLevelRoute.children?.push(mergedChildRoute)
}
mergedRoutes.push(topLevelRoute);
mergedRoutes.push(topLevelRoute)
} else {
// Jika route tidak memiliki children, tambahkan as is
mergedRoutes.push(route);
mergedRoutes.push(route)
}
}
return mergedRoutes;
return mergedRoutes
}
export const extractLeafRoutes = (routes: RouteRecordRaw[], parentPath = ''): RouteRecordRaw[] => {
const leafRoutes: RouteRecordRaw[] = [];
const leafRoutes: RouteRecordRaw[] = []
for (const route of routes) {
const fullPath = `${parentPath}/${route.path}`.replace(/\/+/g, '/');
const fullPath = `${parentPath}/${route.path}`.replace(/\/+/g, '/')
if (route.children && route.children.length > 0) {
leafRoutes.push(...extractLeafRoutes(route.children, fullPath));
leafRoutes.push(...extractLeafRoutes(route.children, fullPath))
} else {
const leafRoute = { ...route, path: fullPath };
leafRoutes.push(leafRoute);
const leafRoute = { ...route, path: fullPath }
leafRoutes.push(leafRoute)
}
}
return leafRoutes;
return leafRoutes
}
export const fixRoute = (route: RouteRecordRaw[]): RouteRecordRaw[] => {
@ -770,14 +773,27 @@ export const fixRoute = (route: RouteRecordRaw[]): RouteRecordRaw[] => {
getRoute(r.children, `${parent}/${r.path}`)
} else {
const fullPath = `${parent.replace('/', '')}/${r.path.replace('/', '')}`
if (newRoute.find((nr) => nr.path !== '/' && nr.path === '/home' && fullPath.includes(nr.path))) {
if (
newRoute.find(
(nr) => nr.path !== '/' && nr.path === '/home' && fullPath.includes(nr.path)
)
) {
const index = newRoute.findIndex((nr) => nr.path !== '/' && fullPath.includes(nr.path))
newRoute[index] = {
...newRoute[index], children: [...newRoute[index].children ?? [], {
path: fullPath === '/home/' ? '' : fullPath.includes('/home/') ? fullPath.replace('/home/', '') : fullPath,
name: r.name,
component: r.component
} as RouteRecordRaw]
...newRoute[index],
children: [
...(newRoute[index].children ?? []),
{
path:
fullPath === '/home/'
? ''
: fullPath.includes('/home/')
? fullPath.replace('/home/', '')
: fullPath,
name: r.name,
component: r.component
} as RouteRecordRaw
]
}
} else {
newRoute.push({
@ -792,25 +808,26 @@ export const fixRoute = (route: RouteRecordRaw[]): RouteRecordRaw[] => {
getRoute(route)
// remove duplicate route path and sort by path length
const uniqueRoute = newRoute.filter((nr, index, self) => self.findIndex((n) => n.path === nr.path) === index).sort((a, b) => b.path.length - a.path.length)
const uniqueRoute = newRoute
.filter((nr, index, self) => self.findIndex((n) => n.path === nr.path) === index)
.sort((a, b) => b.path.length - a.path.length)
// console.log('route', newRoute);
// return uniqueRoute
return newRoute
}
const router = createRouter({
history: createWebHistory(),
linkActiveClass: 'active',
stringifyQuery: qs.stringify,
routes: fixRoute(routes),
strict: true,
strict: true
})
router.beforeEach((to, from, next) => {
// redirect to login page if not logged in and trying to access a restricted page
const auth = useAuthStore();
const auth = useAuthStore()
// if to is not found, redirect to 404
if (to.matched.length === 0) {