update
This commit is contained in:
Dede Fuji Abdul
66
package-lock.json
generated
66
package-lock.json
generated
@ -1,23 +1,25 @@
|
||||
{
|
||||
"name": "apkt",
|
||||
"version": "0.0.0",
|
||||
"name": "eis",
|
||||
"version": "0.0.1",
|
||||
"lockfileVersion": 2,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "apkt",
|
||||
"version": "0.0.0",
|
||||
"name": "eis",
|
||||
"version": "0.0.1",
|
||||
"dependencies": {
|
||||
"@headlessui/tailwindcss": "^0.2.0",
|
||||
"@headlessui/vue": "^1.7.16",
|
||||
"@heroicons/vue": "^2.0.18",
|
||||
"@lottiefiles/lottie-player": "^2.0.2",
|
||||
"@types/qs": "^6.9.9",
|
||||
"@types/uuid": "^9.0.2",
|
||||
"devextreme": "23.1.5",
|
||||
"devextreme-vue": "23.1.5",
|
||||
"dotenv": "^16.3.1",
|
||||
"encrypt-storage": "^2.12.16",
|
||||
"pinia": "^2.1.3",
|
||||
"qs": "^6.11.2",
|
||||
"uuid": "^9.0.0",
|
||||
"vue": "^3.3.4",
|
||||
"vue-router": "^4.2.2",
|
||||
@ -1308,6 +1310,11 @@
|
||||
"resolved": "https://registry.npmjs.org/@types/pako/-/pako-1.0.5.tgz",
|
||||
"integrity": "sha512-cg6x1RjMyCYoAdhOyNC/144EqhdHJXXZiiTgN3o+ZtOu4+ZQVN5msZgNyxzDI1w+dMYDdRamDzto3+bkR3FFQQ=="
|
||||
},
|
||||
"node_modules/@types/qs": {
|
||||
"version": "6.9.9",
|
||||
"resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.9.9.tgz",
|
||||
"integrity": "sha512-wYLxw35euwqGvTDx6zfY1vokBFnsK0HNrzc6xNHchxfO2hpuRg74GbkEW7e3sSmPvj0TjCDT1VCa6OtHXnubsg=="
|
||||
},
|
||||
"node_modules/@types/semver": {
|
||||
"version": "7.5.3",
|
||||
"resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.5.3.tgz",
|
||||
@ -2578,7 +2585,6 @@
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",
|
||||
"integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"function-bind": "^1.1.1",
|
||||
"get-intrinsic": "^1.0.2"
|
||||
@ -4114,8 +4120,7 @@
|
||||
"node_modules/function-bind": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
|
||||
"integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
|
||||
"dev": true
|
||||
"integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
|
||||
},
|
||||
"node_modules/function.prototype.name": {
|
||||
"version": "1.1.6",
|
||||
@ -4174,7 +4179,6 @@
|
||||
"version": "1.2.1",
|
||||
"resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.1.tgz",
|
||||
"integrity": "sha512-2DcsyfABl+gVHEfCOaTrWgyt+tb6MSEGmKq+kI5HwLbIYgjgmMcV8KQ41uaKz1xxUcn9tJtgFbQUEVcEbd0FYw==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"function-bind": "^1.1.1",
|
||||
"has": "^1.0.3",
|
||||
@ -4374,7 +4378,6 @@
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.0.1.tgz",
|
||||
"integrity": "sha512-7qE+iP+O+bgF9clE5+UoBFzE65mlBiVj3tKCrlNQ0Ogwm0BjpT/gK4SlLYDMybDh5I3TCTKnPPa0oMG7JDYrhg==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
},
|
||||
@ -4386,7 +4389,6 @@
|
||||
"version": "1.0.3",
|
||||
"resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
|
||||
"integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
},
|
||||
@ -5759,7 +5761,6 @@
|
||||
"version": "1.12.3",
|
||||
"resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.3.tgz",
|
||||
"integrity": "sha512-geUvdk7c+eizMNUDkRpW1wJwgfOiOeHbxBR/hLXK1aT6zmVSO0jsQcs7fj6MGw89jC/cjGfLcNOrtMYtGqm81g==",
|
||||
"dev": true,
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
@ -6365,6 +6366,20 @@
|
||||
"node": ">=6"
|
||||
}
|
||||
},
|
||||
"node_modules/qs": {
|
||||
"version": "6.11.2",
|
||||
"resolved": "https://registry.npmjs.org/qs/-/qs-6.11.2.tgz",
|
||||
"integrity": "sha512-tDNIz22aBzCDxLtVH++VnTfzxlfeK5CbqohpSqpJgj1Wg/cQbStNAz3NuqCs5vV+pjBsK4x4pN9HlVh7rcYRiA==",
|
||||
"dependencies": {
|
||||
"side-channel": "^1.0.4"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=0.6"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/querystringify": {
|
||||
"version": "2.2.0",
|
||||
"resolved": "https://registry.npmjs.org/querystringify/-/querystringify-2.2.0.tgz",
|
||||
@ -6906,7 +6921,6 @@
|
||||
"version": "1.0.4",
|
||||
"resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz",
|
||||
"integrity": "sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"call-bind": "^1.0.0",
|
||||
"get-intrinsic": "^1.0.2",
|
||||
@ -9141,6 +9155,11 @@
|
||||
"resolved": "https://registry.npmjs.org/@types/pako/-/pako-1.0.5.tgz",
|
||||
"integrity": "sha512-cg6x1RjMyCYoAdhOyNC/144EqhdHJXXZiiTgN3o+ZtOu4+ZQVN5msZgNyxzDI1w+dMYDdRamDzto3+bkR3FFQQ=="
|
||||
},
|
||||
"@types/qs": {
|
||||
"version": "6.9.9",
|
||||
"resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.9.9.tgz",
|
||||
"integrity": "sha512-wYLxw35euwqGvTDx6zfY1vokBFnsK0HNrzc6xNHchxfO2hpuRg74GbkEW7e3sSmPvj0TjCDT1VCa6OtHXnubsg=="
|
||||
},
|
||||
"@types/semver": {
|
||||
"version": "7.5.3",
|
||||
"resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.5.3.tgz",
|
||||
@ -10051,7 +10070,6 @@
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",
|
||||
"integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"function-bind": "^1.1.1",
|
||||
"get-intrinsic": "^1.0.2"
|
||||
@ -11226,8 +11244,7 @@
|
||||
"function-bind": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
|
||||
"integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
|
||||
"dev": true
|
||||
"integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
|
||||
},
|
||||
"function.prototype.name": {
|
||||
"version": "1.1.6",
|
||||
@ -11268,7 +11285,6 @@
|
||||
"version": "1.2.1",
|
||||
"resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.1.tgz",
|
||||
"integrity": "sha512-2DcsyfABl+gVHEfCOaTrWgyt+tb6MSEGmKq+kI5HwLbIYgjgmMcV8KQ41uaKz1xxUcn9tJtgFbQUEVcEbd0FYw==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"function-bind": "^1.1.1",
|
||||
"has": "^1.0.3",
|
||||
@ -11412,14 +11428,12 @@
|
||||
"has-proto": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.0.1.tgz",
|
||||
"integrity": "sha512-7qE+iP+O+bgF9clE5+UoBFzE65mlBiVj3tKCrlNQ0Ogwm0BjpT/gK4SlLYDMybDh5I3TCTKnPPa0oMG7JDYrhg==",
|
||||
"dev": true
|
||||
"integrity": "sha512-7qE+iP+O+bgF9clE5+UoBFzE65mlBiVj3tKCrlNQ0Ogwm0BjpT/gK4SlLYDMybDh5I3TCTKnPPa0oMG7JDYrhg=="
|
||||
},
|
||||
"has-symbols": {
|
||||
"version": "1.0.3",
|
||||
"resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
|
||||
"integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==",
|
||||
"dev": true
|
||||
"integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A=="
|
||||
},
|
||||
"has-tostringtag": {
|
||||
"version": "1.0.0",
|
||||
@ -12445,8 +12459,7 @@
|
||||
"object-inspect": {
|
||||
"version": "1.12.3",
|
||||
"resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.3.tgz",
|
||||
"integrity": "sha512-geUvdk7c+eizMNUDkRpW1wJwgfOiOeHbxBR/hLXK1aT6zmVSO0jsQcs7fj6MGw89jC/cjGfLcNOrtMYtGqm81g==",
|
||||
"dev": true
|
||||
"integrity": "sha512-geUvdk7c+eizMNUDkRpW1wJwgfOiOeHbxBR/hLXK1aT6zmVSO0jsQcs7fj6MGw89jC/cjGfLcNOrtMYtGqm81g=="
|
||||
},
|
||||
"object-keys": {
|
||||
"version": "1.1.1",
|
||||
@ -12843,6 +12856,14 @@
|
||||
"integrity": "sha512-rRV+zQD8tVFys26lAGR9WUuS4iUAngJScM+ZRSKtvl5tKeZ2t5bvdNFdNHBW9FWR4guGHlgmsZ1G7BSm2wTbuA==",
|
||||
"dev": true
|
||||
},
|
||||
"qs": {
|
||||
"version": "6.11.2",
|
||||
"resolved": "https://registry.npmjs.org/qs/-/qs-6.11.2.tgz",
|
||||
"integrity": "sha512-tDNIz22aBzCDxLtVH++VnTfzxlfeK5CbqohpSqpJgj1Wg/cQbStNAz3NuqCs5vV+pjBsK4x4pN9HlVh7rcYRiA==",
|
||||
"requires": {
|
||||
"side-channel": "^1.0.4"
|
||||
}
|
||||
},
|
||||
"querystringify": {
|
||||
"version": "2.2.0",
|
||||
"resolved": "https://registry.npmjs.org/querystringify/-/querystringify-2.2.0.tgz",
|
||||
@ -13246,7 +13267,6 @@
|
||||
"version": "1.0.4",
|
||||
"resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz",
|
||||
"integrity": "sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"call-bind": "^1.0.0",
|
||||
"get-intrinsic": "^1.0.2",
|
||||
|
||||
10
package.json
10
package.json
@ -18,16 +18,18 @@
|
||||
"@headlessui/vue": "^1.7.16",
|
||||
"@heroicons/vue": "^2.0.18",
|
||||
"@lottiefiles/lottie-player": "^2.0.2",
|
||||
"@types/qs": "^6.9.9",
|
||||
"@types/uuid": "^9.0.2",
|
||||
"devextreme": "23.1.5",
|
||||
"devextreme-vue": "23.1.5",
|
||||
"dotenv": "^16.3.1",
|
||||
"encrypt-storage": "^2.12.16",
|
||||
"pinia": "^2.1.3",
|
||||
"qs": "^6.11.2",
|
||||
"uuid": "^9.0.0",
|
||||
"vue": "^3.3.4",
|
||||
"vue-router": "^4.2.2",
|
||||
"vue-tailwind-datepicker": "^1.4.5",
|
||||
"encrypt-storage": "^2.12.16",
|
||||
"dotenv": "^16.3.1"
|
||||
"vue-tailwind-datepicker": "^1.4.5"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@rushstack/eslint-patch": "^1.5.1",
|
||||
@ -57,4 +59,4 @@
|
||||
"vitest": "^0.34.6",
|
||||
"vue-tsc": "^1.6.5"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
13
src/App.vue
13
src/App.vue
@ -2,12 +2,9 @@
|
||||
import { RouterView } from 'vue-router'
|
||||
import { NotificationProvider } from '@/components/Notification'
|
||||
import { useDialogStore } from '@/stores/dialog'
|
||||
import ActionDialog from '@/components/Dialogs/ActionDialog.vue';
|
||||
import CommandPalettes from '@/components/CommandPalettes.vue';
|
||||
import { useCommandPalattesStore } from '@/stores/command';
|
||||
|
||||
import ActionDialog from '@/components/Dialogs/ActionDialog.vue'
|
||||
import CommandPalettes from '@/components/CommandPalettes.vue'
|
||||
const dialog = useDialogStore()
|
||||
const command = useCommandPalattesStore()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@ -16,9 +13,7 @@ const command = useCommandPalattesStore()
|
||||
:open="dialog.open" :title="dialog.title" :message="dialog.content" :confirm-text="dialog.confirmText"
|
||||
:cancel-text="dialog.cancelText" @on-close="dialog.open = false" @on-confirm="dialog.onConfirm"
|
||||
@on-cancel="dialog.onCancel" :type="dialog.type" />
|
||||
<CommandPalettes :open="command.open" @onClose="command.handleOnDismissCommandPalettes" />
|
||||
<CommandPalettes />
|
||||
<RouterView />
|
||||
</NotificationProvider>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
</template>
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<TransitionRoot :show="open" as="template" @after-leave="onQueryChange('')" appear>
|
||||
<TransitionRoot :show="command.open" as="template" @after-leave="onQueryChange('')" appear>
|
||||
<Dialog as="div" class="relative z-10" @close="onClose">
|
||||
<TransitionChild as="template" enter="ease-out duration-300" enter-from="opacity-0" enter-to="opacity-100"
|
||||
leave="ease-in duration-200" leave-from="opacity-100" leave-to="opacity-0">
|
||||
@ -27,13 +27,14 @@
|
||||
<li class="p-2" v-if="filteredMenus.length > 0 || recent.length > 0">
|
||||
<h2 v-if="query === '' && recent.length > 0"
|
||||
class="px-3 mt-4 mb-2 text-xs font-semibold text-gray-900">
|
||||
Pencarian terakhir</h2>
|
||||
Terakhir Diakses
|
||||
</h2>
|
||||
<ul class="text-sm text-gray-700">
|
||||
<ComboboxOption as="template" v-for="menu in query === '' ? recent : filteredMenus"
|
||||
:key="menu.href" v-slot="{ active }">
|
||||
:key="menu.path" v-slot="{ active }">
|
||||
<li @click="openMenu(menu)"
|
||||
:class="['flex cursor-pointer select-none items-center rounded-md px-3 py-2', active && 'bg-gray-900 bg-opacity-5 text-gray-900']">
|
||||
<component :is="menu.icon"
|
||||
<DocumentTextIcon
|
||||
:class="['h-6 w-6 flex-none text-gray-900 text-opacity-40', active && 'text-opacity-100']"
|
||||
aria-hidden="true" />
|
||||
<span class="flex-auto ml-3 truncate">
|
||||
@ -69,7 +70,7 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, ref, watch } from 'vue'
|
||||
import { MagnifyingGlassIcon } from '@heroicons/vue/20/solid'
|
||||
import { FolderIcon } from '@heroicons/vue/24/outline'
|
||||
import { DocumentTextIcon } from '@heroicons/vue/24/outline'
|
||||
import {
|
||||
Combobox,
|
||||
ComboboxInput,
|
||||
@ -80,80 +81,28 @@ import {
|
||||
TransitionChild,
|
||||
TransitionRoot,
|
||||
} from '@headlessui/vue'
|
||||
import { useMenuStore } from '@/stores/menu';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { useRouter, type RouteRecordRaw } from 'vue-router'
|
||||
import { routes, extractLeafRoutes } from '@/router'
|
||||
import { useCommandPalattesStore } from '@/stores/command'
|
||||
|
||||
// const menus = [
|
||||
// { id: 1, name: 'Workflow Inc. / Website Redesign', url: '#' },
|
||||
// ]
|
||||
const nav = useMenuStore()
|
||||
const menus = nav.navigation
|
||||
|
||||
// var recent = computed(() => readRecentMenu())
|
||||
|
||||
const props = defineProps({
|
||||
open: Boolean
|
||||
})
|
||||
|
||||
const emit = defineEmits(['onClose'])
|
||||
|
||||
function searchMenus(query: string) {
|
||||
const result: typeof menus = []
|
||||
menus.forEach((menu) => {
|
||||
if (menu.children.length > 0) {
|
||||
menu.children.forEach((child) => {
|
||||
if (child.children.length > 0) {
|
||||
child.children.forEach((grandChild) => {
|
||||
if (grandChild.name.toLowerCase().includes(query.toLowerCase())) {
|
||||
result.push(grandChild)
|
||||
}
|
||||
})
|
||||
} else {
|
||||
if (child.name.toLowerCase().includes(query.toLowerCase())) {
|
||||
result.push(child)
|
||||
}
|
||||
}
|
||||
})
|
||||
} else {
|
||||
if (menu.name.toLowerCase().includes(query.toLowerCase())) {
|
||||
result.push(menu)
|
||||
}
|
||||
}
|
||||
|
||||
})
|
||||
return result;
|
||||
const command = useCommandPalattesStore()
|
||||
const searchRoutesByName = (routes: RouteRecordRaw[], query: string): RouteRecordRaw[] => {
|
||||
const matchingRoutes = extractLeafRoutes(routes, '').filter((item: RouteRecordRaw) => item.path.includes('home/') && item.name?.toString().toLocaleLowerCase().includes(query.toLocaleLowerCase()))
|
||||
return matchingRoutes
|
||||
}
|
||||
|
||||
const route = useRouter()
|
||||
const recent = computed(() => query.value === '' ? readRecentMenu() : [])
|
||||
const open = ref(props.open)
|
||||
const recent = computed(() => query.value === '' ? command.readRecent() : [])
|
||||
const query = ref('')
|
||||
const filteredMenus = computed(() =>
|
||||
query.value === ''
|
||||
? []
|
||||
: searchMenus(query.value)
|
||||
: searchRoutesByName(routes, query.value)
|
||||
)
|
||||
const onClose = () => command.open = false
|
||||
|
||||
function onClose() {
|
||||
open.value = false
|
||||
emit('onClose')
|
||||
}
|
||||
|
||||
function addMenuToRecent(menu: any) {
|
||||
const lastRecent = readRecentMenu()
|
||||
const index = lastRecent.findIndex((item: any) => item.href === menu.href)
|
||||
if (index > -1) {
|
||||
lastRecent.splice(index, 1)
|
||||
}
|
||||
lastRecent.unshift(menu)
|
||||
if (lastRecent.length > 5) {
|
||||
lastRecent.pop()
|
||||
}
|
||||
|
||||
localStorage.setItem('recentmenu', JSON.stringify(lastRecent))
|
||||
}
|
||||
let debounceTimeout: ReturnType<typeof setTimeout> | null = null;
|
||||
function onQueryChange(value: string) {
|
||||
const onQueryChange = (value: string) => {
|
||||
if (debounceTimeout) {
|
||||
clearTimeout(debounceTimeout);
|
||||
}
|
||||
@ -164,25 +113,15 @@ function onQueryChange(value: string) {
|
||||
return
|
||||
}
|
||||
query.value = value
|
||||
const data = extractLeafRoutes(routes, '').filter((item: RouteRecordRaw) => item.path.includes('home/') && item.name?.toString().includes(value))
|
||||
console.log(data)
|
||||
}, 300);
|
||||
}
|
||||
|
||||
function readRecentMenu() {
|
||||
const recent = localStorage.getItem('recentmenu')
|
||||
if (recent) {
|
||||
return JSON.parse(recent)
|
||||
}
|
||||
return []
|
||||
}
|
||||
|
||||
function openMenu(menu: typeof menus[0]) {
|
||||
addMenuToRecent(menu)
|
||||
const openMenu = (menu: RouteRecordRaw) => {
|
||||
command.addRecent(menu)
|
||||
route.push(menu.path)
|
||||
onClose()
|
||||
}
|
||||
|
||||
watch(() => props.open, (value) => {
|
||||
open.value = value;
|
||||
});
|
||||
|
||||
</script>
|
||||
@ -6,9 +6,9 @@ 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'
|
||||
import qs from 'qs'
|
||||
|
||||
const routes: RouteRecordRaw[] = [
|
||||
export const routes: RouteRecordRaw[] = [
|
||||
{
|
||||
path: '/home',
|
||||
name: 'Home',
|
||||
@ -24,7 +24,7 @@ const routes: RouteRecordRaw[] = [
|
||||
name: 'Gangguan',
|
||||
children: [
|
||||
{
|
||||
path: 'a',
|
||||
path: 'daftar',
|
||||
name: 'Daftar',
|
||||
children: [
|
||||
{
|
||||
@ -65,7 +65,7 @@ const routes: RouteRecordRaw[] = [
|
||||
],
|
||||
},
|
||||
{
|
||||
path: 'b',
|
||||
path: 'rekapitulasi',
|
||||
name: 'Rekapitulasi',
|
||||
children: [
|
||||
{
|
||||
@ -147,7 +147,7 @@ const routes: RouteRecordRaw[] = [
|
||||
name: 'Keluhan',
|
||||
children: [
|
||||
{
|
||||
path: 'a',
|
||||
path: 'daftar',
|
||||
name: 'Daftar',
|
||||
children: [
|
||||
{
|
||||
@ -188,7 +188,7 @@ const routes: RouteRecordRaw[] = [
|
||||
],
|
||||
},
|
||||
{
|
||||
path: 'b',
|
||||
path: 'rekapitulasi',
|
||||
name: 'Rekapitulasi',
|
||||
children: [
|
||||
{
|
||||
@ -240,11 +240,11 @@ const routes: RouteRecordRaw[] = [
|
||||
name: 'Monalisa',
|
||||
children: [
|
||||
{
|
||||
path: 'a',
|
||||
path: 'gangguan',
|
||||
name: 'Gangguan',
|
||||
children: [
|
||||
{
|
||||
path: 'a',
|
||||
path: 'rekapitulasi',
|
||||
name: 'Rekapitulasi',
|
||||
children: [
|
||||
{
|
||||
@ -254,31 +254,41 @@ const routes: RouteRecordRaw[] = [
|
||||
},
|
||||
{
|
||||
path: '2',
|
||||
name: 'Recovery Time (RCT) Gangguan',
|
||||
name: 'Dispacthing Time (DT) Gangguan',
|
||||
component: TestPage,
|
||||
},
|
||||
{
|
||||
path: '3',
|
||||
name: 'Response Time (RPT) Gangguan',
|
||||
name: 'Recovery Time (RCT) Gangguan',
|
||||
component: TestPage,
|
||||
},
|
||||
{
|
||||
path: '4',
|
||||
name: 'Rekapitulasi Gangguan Per Jenis Gangguan',
|
||||
name: 'Response Time (RPT) Gangguan',
|
||||
component: TestPage,
|
||||
},
|
||||
{
|
||||
path: '5',
|
||||
name: 'Rekapitulasi Lapor Ulang Gangguan',
|
||||
name: 'Jumlah dan Durasi RPT RCT Gangguan',
|
||||
component: TestPage,
|
||||
},
|
||||
{
|
||||
path: '6',
|
||||
name: 'Rekapitulasi ENS Gangguan',
|
||||
name: 'Rekapitulasi Gangguan Per Jenis Gangguan',
|
||||
component: TestPage,
|
||||
},
|
||||
{
|
||||
path: '7',
|
||||
name: 'Rekapitulasi Lapor Ulang Gangguan',
|
||||
component: TestPage,
|
||||
},
|
||||
{
|
||||
path: '8',
|
||||
name: 'Rekapitulasi ENS Gangguan',
|
||||
component: TestPage,
|
||||
},
|
||||
{
|
||||
path: '9',
|
||||
name: 'Rekapitulasi Gangguan Belum Selesai',
|
||||
component: TestPage,
|
||||
},
|
||||
@ -287,11 +297,11 @@ const routes: RouteRecordRaw[] = [
|
||||
],
|
||||
},
|
||||
{
|
||||
path: 'b',
|
||||
path: 'keluhan',
|
||||
name: 'Keluhan',
|
||||
children: [
|
||||
{
|
||||
path: 'a',
|
||||
path: 'rekapitulasi',
|
||||
name: 'Rekapitulasi',
|
||||
children: [
|
||||
{
|
||||
@ -311,16 +321,21 @@ const routes: RouteRecordRaw[] = [
|
||||
},
|
||||
{
|
||||
path: '4',
|
||||
name: 'Rekapitulasi Gangguan Per Jenis Keluhan',
|
||||
name: 'Jumlah dan Durasi RPT RCT Keluhan',
|
||||
component: TestPage,
|
||||
},
|
||||
{
|
||||
path: '5',
|
||||
name: 'Rekapitulasi Lapor Ulang Keluhan',
|
||||
name: 'Rekapitulasi Gangguan Per Jenis Keluhan',
|
||||
component: TestPage,
|
||||
},
|
||||
{
|
||||
path: '6',
|
||||
name: 'Rekapitulasi Lapor Ulang Keluhan',
|
||||
component: TestPage,
|
||||
},
|
||||
{
|
||||
path: '7',
|
||||
name: 'Rekapitulasi Keluhan Belum Selesai',
|
||||
component: TestPage,
|
||||
},
|
||||
@ -329,11 +344,11 @@ const routes: RouteRecordRaw[] = [
|
||||
],
|
||||
},
|
||||
{
|
||||
path: 'c',
|
||||
path: 'kpi',
|
||||
name: 'Laporan KPI',
|
||||
children: [
|
||||
{
|
||||
path: 'a',
|
||||
path: 'bulanan',
|
||||
name: 'Bulanan',
|
||||
children: [
|
||||
{
|
||||
@ -359,7 +374,7 @@ const routes: RouteRecordRaw[] = [
|
||||
],
|
||||
},
|
||||
{
|
||||
path: '2',
|
||||
path: 'kumulatif',
|
||||
name: 'Kumulatif',
|
||||
children: [
|
||||
{
|
||||
@ -393,7 +408,7 @@ const routes: RouteRecordRaw[] = [
|
||||
name: 'Check In OutCheck In Dan Check Out',
|
||||
children: [
|
||||
{
|
||||
path: 'a',
|
||||
path: 'laporan',
|
||||
name: 'Laporan Check In /Check Out (CICO)',
|
||||
children: [
|
||||
{
|
||||
@ -410,7 +425,7 @@ const routes: RouteRecordRaw[] = [
|
||||
name: 'Anomali Penangan Pengaduan',
|
||||
children: [
|
||||
{
|
||||
path: 'a',
|
||||
path: 'gangguan',
|
||||
name: 'Gangguan',
|
||||
children: [
|
||||
{
|
||||
@ -426,7 +441,7 @@ const routes: RouteRecordRaw[] = [
|
||||
],
|
||||
},
|
||||
{
|
||||
path: 'b',
|
||||
path: 'keluhan',
|
||||
name: 'Keluhan',
|
||||
children: [
|
||||
{
|
||||
@ -463,50 +478,50 @@ const routes: RouteRecordRaw[] = [
|
||||
},
|
||||
]
|
||||
|
||||
// const createRoute = (route: RouteRecordRaw[]): RouteRecordRaw[] => {
|
||||
// var newRoute: RouteRecordRaw[] = []
|
||||
export const mergeChildrenRoutes = (routes: RouteRecordRaw[]): RouteRecordRaw[] => {
|
||||
const mergedRoutes: 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);
|
||||
for (const route of routes) {
|
||||
if (route.children && route.children.length > 0) {
|
||||
// Buat salinan route tanpa children
|
||||
const topLevelRoute: RouteRecordRaw = { ...route, children: [] };
|
||||
|
||||
// return newRoute
|
||||
// }
|
||||
// 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 createRoute = (route: RouteRecordRaw[]): RouteRecordRaw[] => {
|
||||
mergedRoutes.push(topLevelRoute);
|
||||
} else {
|
||||
// Jika route tidak memiliki children, tambahkan as is
|
||||
mergedRoutes.push(route);
|
||||
}
|
||||
}
|
||||
|
||||
return mergedRoutes;
|
||||
}
|
||||
|
||||
export const extractLeafRoutes = (routes: RouteRecordRaw[], parentPath = ''): RouteRecordRaw[] => {
|
||||
const leafRoutes: RouteRecordRaw[] = [];
|
||||
|
||||
for (const route of routes) {
|
||||
|
||||
const fullPath = `${parentPath}/${route.path}`.replace(/\/+/g, '/');
|
||||
|
||||
if (route.children && route.children.length > 0) {
|
||||
leafRoutes.push(...extractLeafRoutes(route.children, fullPath));
|
||||
} else {
|
||||
const leafRoute = { ...route, path: fullPath };
|
||||
leafRoutes.push(leafRoute);
|
||||
}
|
||||
}
|
||||
|
||||
return leafRoutes;
|
||||
}
|
||||
|
||||
export const fixRoute = (route: RouteRecordRaw[]): RouteRecordRaw[] => {
|
||||
var newRoute: RouteRecordRaw[] = []
|
||||
|
||||
const getRoute = (route: RouteRecordRaw[], parent: string = '') => {
|
||||
@ -550,13 +565,13 @@ const createRoute = (route: RouteRecordRaw[]): RouteRecordRaw[] => {
|
||||
return uniqueRoute
|
||||
}
|
||||
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHistory(),
|
||||
linkActiveClass: 'active',
|
||||
routes: createRoute(routes)
|
||||
stringifyQuery: qs.stringify,
|
||||
routes: fixRoute(routes)
|
||||
})
|
||||
console.log(router.getRoutes());
|
||||
|
||||
|
||||
router.beforeEach((to, from, next) => {
|
||||
// redirect to login page if not logged in and trying to access a restricted page
|
||||
@ -594,6 +609,3 @@ router.beforeEach((to, from, next) => {
|
||||
})
|
||||
|
||||
export default router
|
||||
export {
|
||||
routes
|
||||
}
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import { ref, computed } from 'vue'
|
||||
import { defineStore } from 'pinia'
|
||||
import { dispatchNotification } from '@/components/Notification'
|
||||
import { readData, removeData, writeData } from './storage'
|
||||
import { readData, removeData, writeData } from '@/utils/storage'
|
||||
import router from '@/router'
|
||||
|
||||
export const useAuthStore = defineStore('auth', () => {
|
||||
|
||||
@ -1,21 +1,23 @@
|
||||
import { ref } from 'vue'
|
||||
import { defineStore } from 'pinia'
|
||||
import type { RouteRecordRaw } from 'vue-router'
|
||||
import { readDataJson, writeDataJson } from '@/utils/storage'
|
||||
|
||||
export const useCommandPalattesStore = defineStore('command_palettes', () => {
|
||||
const open = ref(false);
|
||||
const open = ref(false)
|
||||
|
||||
const controlStatus = ref(false)
|
||||
const keyFStatus = ref(false)
|
||||
|
||||
function showCommandPalettes() {
|
||||
const showCommandPalettes = () => {
|
||||
open.value = true;
|
||||
}
|
||||
|
||||
function handleOnDismissCommandPalettes() {
|
||||
const handleOnDismissCommandPalettes = () => {
|
||||
open.value = false;
|
||||
}
|
||||
|
||||
function onKeyPressed(event: KeyboardEvent) {
|
||||
const onKeyPressed = (event: KeyboardEvent) => {
|
||||
if (event.key === 'Control') {
|
||||
console.log('control pressed');
|
||||
controlStatus.value = true
|
||||
@ -31,7 +33,7 @@ export const useCommandPalattesStore = defineStore('command_palettes', () => {
|
||||
}
|
||||
}
|
||||
|
||||
function onKeyUp(event: KeyboardEvent) {
|
||||
const onKeyUp = (event: KeyboardEvent) => {
|
||||
if (event.key === 'Control') {
|
||||
console.log('control released');
|
||||
controlStatus.value = false
|
||||
@ -43,5 +45,39 @@ export const useCommandPalattesStore = defineStore('command_palettes', () => {
|
||||
}
|
||||
}
|
||||
|
||||
return { open, showCommandPalettes, handleOnDismissCommandPalettes, onKeyPressed, onKeyUp }
|
||||
const readRecent = (): RouteRecordRaw[] => {
|
||||
const recent = readDataJson('recentmenu')
|
||||
if (recent) {
|
||||
try {
|
||||
JSON.parse(recent)
|
||||
} catch (error) {
|
||||
return recent as RouteRecordRaw[]
|
||||
}
|
||||
}
|
||||
return [] as RouteRecordRaw[]
|
||||
}
|
||||
|
||||
const addRecent = (menu: RouteRecordRaw) => {
|
||||
const lastRecent = readRecent()
|
||||
const index = lastRecent.findIndex((item: RouteRecordRaw) => item.path === menu.path)
|
||||
if (index > -1) {
|
||||
lastRecent.splice(index, 1)
|
||||
}
|
||||
lastRecent.unshift(menu)
|
||||
if (lastRecent.length > 5) {
|
||||
lastRecent.pop()
|
||||
}
|
||||
|
||||
writeDataJson('recentmenu', lastRecent)
|
||||
}
|
||||
|
||||
return {
|
||||
open,
|
||||
showCommandPalettes,
|
||||
handleOnDismissCommandPalettes,
|
||||
onKeyPressed,
|
||||
onKeyUp,
|
||||
addRecent,
|
||||
readRecent
|
||||
}
|
||||
})
|
||||
@ -30,26 +30,6 @@ const convertToDashedString = (input: string): string => {
|
||||
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: convertToDashedString(`${basePath}/${item.path}`).replace('/home-', '/home/'),
|
||||
// expanded: false,
|
||||
// icon: undefined,
|
||||
// children: [],
|
||||
// };
|
||||
|
||||
// if (item.children) {
|
||||
// convertedItem.icon = navigationIcon[iconIndex];
|
||||
// iconIndex = (iconIndex + 1) % navigationIcon.length;
|
||||
// convertedItem.children = convertRouteToMenu(item.children, `${basePath}/${item.path}`, iconIndex);
|
||||
// }
|
||||
|
||||
// return convertedItem
|
||||
// })
|
||||
// }
|
||||
|
||||
export const convertRouteToMenu = (data: RouteRecordRaw[], basePath: string = '/home', iconIndex: number = 0): MenuItemModel[] => {
|
||||
return data.filter((i) => i.path !== '').map((item) => {
|
||||
const convertedItem: MenuItemModel = {
|
||||
|
||||
Reference in New Issue
Block a user