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

update route methods

Browse Source
This commit is contained in:
Dede Fuji Abdul 2023-10-19 16:38:43 +07:00
parent f336f51887
commit db38765126
6 changed files with 93 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.env.development
View File

@ -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'

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

@ -21,7 +21,6 @@ const router = useRouter()
watch(route, (to, _) => {
menu.menuSelected = to.fullPath
console.log('path', menu.menuSelected);
closeSideBar()
})

7
src/main.ts
View File

@ -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')

86
src/router/index.ts
View File

@ -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
}

3
src/stores/menu.ts
View File

@ -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()

24
src/utils/route.ts
View File

@ -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;
}