diff --git a/.env.development b/.env.development index 50bbd8a..53f7347 100644 --- a/.env.development +++ b/.env.development @@ -1,4 +1,4 @@ -VITE_BASE_URL=https://api.domain.com/v1/ +VITE_BASE_URL=http://localhost:5173 VITE_BASE_DIRECTORY=/ VITE_APP_VERSION=0.0.1 VITE_APP_NAME='Executive Information System' \ No newline at end of file diff --git a/src/components/Navigation/Aside/Aside.vue b/src/components/Navigation/Aside/Aside.vue index 5a5c4aa..9b60d6d 100644 --- a/src/components/Navigation/Aside/Aside.vue +++ b/src/components/Navigation/Aside/Aside.vue @@ -21,7 +21,6 @@ const router = useRouter() watch(route, (to, _) => { menu.menuSelected = to.fullPath - console.log('path', menu.menuSelected); closeSideBar() }) diff --git a/src/main.ts b/src/main.ts index 2c3d6ab..ca7d2ab 100644 --- a/src/main.ts +++ b/src/main.ts @@ -1,15 +1,12 @@ -import 'devextreme/dist/css/dx.light.css'; -import "@lottiefiles/lottie-player" +import 'devextreme/dist/css/dx.light.css' +import '@lottiefiles/lottie-player' import '@/assets/css/main.css' - import { createApp } from 'vue' import { createPinia } from 'pinia' - import App from './App.vue' import router from './router' const app = createApp(App) app.use(createPinia()) app.use(router) - app.mount('#app') diff --git a/src/router/index.ts b/src/router/index.ts index 5f4cb60..ace8c13 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -1,13 +1,14 @@ -import { createRouter, createWebHistory } from 'vue-router' +import { createRouter, createWebHistory, type RouteRecordRaw } from 'vue-router' import { useAuthStore } from '@/stores/auth' import HomeView from '@/views/HomeView.vue' import LoginView from '@/views/LoginView.vue' import NotFoundView from '@/views/NotFoundView.vue' import EmptyPage from '@/components/Pages/HomeEmpty.vue' import TestPage from '@/components/Pages/TestPage.vue' +import { hasMoreThanTwoSlashes, removeExtraSlashes } from '@/utils/route' -export const routes = [ +const routes: RouteRecordRaw[] = [ { path: '/home', name: 'Home', @@ -23,7 +24,7 @@ export const routes = [ name: 'Gangguan', children: [ { - path: '1', + path: 'a', name: 'Daftar', children: [ { @@ -64,7 +65,7 @@ export const routes = [ ], }, { - path: '2', + path: 'b', name: 'Rekapitulasi', children: [ { @@ -74,12 +75,12 @@ export const routes = [ }, { path: '2', - name: 'Rekapitulasi Gangguan Per Jenis Gangguan', + name: 'Rekapitulasi Gangguan/Jenis Gangguan', component: TestPage, }, { path: '3', - name: 'Rekapitulasi Gangguan Per Jenis Gangguan SE 004', + name: 'Rekapitulasi Gangguan/Jenis Gangguan SE 004', component: TestPage, }, { @@ -146,7 +147,7 @@ export const routes = [ name: 'Keluhan', children: [ { - path: '1', + path: 'a', name: 'Daftar', children: [ { @@ -187,7 +188,7 @@ export const routes = [ ], }, { - path: '2', + path: 'b', name: 'Rekapitulasi', children: [ { @@ -239,11 +240,11 @@ export const routes = [ name: 'Monalisa', children: [ { - path: '1', + path: 'a', name: 'Gangguan', children: [ { - path: '1', + path: 'a', name: 'Rekapitulasi', children: [ { @@ -286,11 +287,11 @@ export const routes = [ ], }, { - path: '2', + path: 'b', name: 'Keluhan', children: [ { - path: '1', + path: 'a', name: 'Rekapitulasi', children: [ { @@ -328,11 +329,11 @@ export const routes = [ ], }, { - path: '3', + path: 'c', name: 'Laporan KPI', children: [ { - path: '1', + path: 'a', name: 'Bulanan', children: [ { @@ -392,7 +393,7 @@ export const routes = [ name: 'Check In OutCheck In Dan Check Out', children: [ { - path: '1', + path: 'a', name: 'Laporan Check In /Check Out (CICO)', children: [ { @@ -409,7 +410,7 @@ export const routes = [ name: 'Anomali Penangan Pengaduan', children: [ { - path: '1', + path: 'a', name: 'Gangguan', children: [ { @@ -425,7 +426,7 @@ export const routes = [ ], }, { - path: '2', + path: 'b', name: 'Keluhan', children: [ { @@ -461,10 +462,53 @@ export const routes = [ component: NotFoundView }, ] + +const createRoute = (route: RouteRecordRaw[]): RouteRecordRaw[] => { + var newRoute: RouteRecordRaw[] = [] + + const getRoute = (route: RouteRecordRaw[], parent: string = '') => { + route.forEach((r) => { + if (r.children) { + if (r.component) { + var fullPath = `${parent.replace('/', '')}/${r.path.replace('/', '')}` + fullPath = hasMoreThanTwoSlashes(fullPath) ? removeExtraSlashes(fullPath) : fullPath + newRoute.push({ + path: fullPath, + name: r.name, + component: r.component + } as RouteRecordRaw) + } + getRoute(r.children, `${parent}/${r.path}`) + } else { + var fullPath = `${parent.replace('/', '')}/${r.path.replace('/', '')}` + 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/', '').split('/').join('-') : fullPath.split('/').join('-'), + name: r.name, + component: r.component + } as RouteRecordRaw] + } + } else { + newRoute.push({ + path: fullPath, + name: r.name, + component: r.component + } as RouteRecordRaw) + } + } + }) + } + getRoute(route) + console.log(newRoute); + + return newRoute +} const router = createRouter({ - history: createWebHistory(import.meta.env.BASE_URL), + history: createWebHistory(import.meta.env.VITE_BASE_DIRECTORY), linkActiveClass: 'active', - routes: routes + routes: createRoute(routes) }) router.beforeEach((to, from, next) => { @@ -500,7 +544,9 @@ router.beforeEach((to, from, next) => { } } } - }) export default router +export { + routes +} diff --git a/src/stores/menu.ts b/src/stores/menu.ts index 525c252..1cff66a 100644 --- a/src/stores/menu.ts +++ b/src/stores/menu.ts @@ -1,10 +1,9 @@ import { onMounted, ref } from 'vue' import { defineStore } from 'pinia' - -import type { MenuItemModel } from '@/utils/interfaces' import { useRoute } from 'vue-router' import { convertRouteToMenu } from '@/utils/route' import { routes } from '@/router' +import type { MenuItemModel } from '@/utils/interfaces' export const useMenuStore = defineStore('menu', () => { const route = useRoute() diff --git a/src/utils/route.ts b/src/utils/route.ts index 55a4aa4..12b9dea 100644 --- a/src/utils/route.ts +++ b/src/utils/route.ts @@ -19,11 +19,22 @@ const navigationIcon = [ Gauge ] +const convertToDashedString = (input: string): string => { + // Menghapus tanda '/' di awal dan akhir string + input = input.replace(/^\/+|\/+$/g, ''); + + // Membagi string menjadi bagian-bagian menggunakan '/' + const parts = input.split('/'); + + // Menggabungkan bagian-bagian dengan tanda '-' + return `/${parts.join('-')}`; +} + export const convertRouteToMenu = (data: RouteRecordRaw[], basePath: string = '/home', iconIndex: number = 0): MenuItemModel[] => { return data.filter((i) => i.path !== '').map((item) => { const convertedItem: MenuItemModel = { name: item.name?.toString() || '', - path: `${basePath}/${item.path}`, + path: convertToDashedString(`${basePath}/${item.path}`).replace('/home-', '/home/'), expanded: false, icon: undefined, children: [], @@ -37,4 +48,15 @@ export const convertRouteToMenu = (data: RouteRecordRaw[], basePath: string = '/ return convertedItem }) +} + +export const removeExtraSlashes = (input: string): string => { + // Menggunakan ekspresi reguler untuk mengganti tanda '/' lebih dari 2 dengan satu tanda '/' + return input.replace(/\/{3,}/g, '/'); +} + +export const hasMoreThanTwoSlashes = (input: string): boolean => { + // Menggunakan ekspresi reguler untuk mencari tanda '/' lebih dari 2 kali + const matches = input.match(/\//g); + return matches ? matches.length > 2 : false; } \ No newline at end of file