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

Merge branch 'development' of github.com:defuj/eis into dev-bagus

Browse Source
This commit is contained in:
kur0nek-o
2023-10-27 11:07:47 +07:00
parent f4dd37eeb0 28382959d6
commit 53e05e9891
7 changed files with 150 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
src/components/CommandPalettes.vue
View File

@ -1,6 +1,6 @@
<template>
<TransitionRoot :show="command.open" as="template" @after-leave="onQueryChange('')" appear>
<Dialog as="div" class="relative z-10" @close="onClose">
<Dialog as="div" class="relative z-10" @close="command.closeCommand">
<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">
<div class="fixed inset-0 transition-opacity bg-gray-500 bg-opacity-25 backdrop-blur" />
@ -10,8 +10,9 @@
<TransitionChild as="template" enter="ease-out duration-300" enter-from="opacity-0 scale-95"
enter-to="opacity-100 scale-100" leave="ease-in duration-200" leave-from="opacity-100 scale-100"
leave-to="opacity-0 scale-95">
<!-- max-w-2xl mx-auto overflow-hidden transition-all transform bg-white bg-opacity-80 divide-y divide-gray-500 shadow-2xl divide-opacity-10 rounded-xl ring-0 ring-black ring-opacity-5 -->
<DialogPanel
class="max-w-2xl mx-auto overflow-hidden transition-all transform bg-white divide-y divide-gray-500 shadow-2xl divide-opacity-10 rounded-xl bg-opacity-80 ring-0 ring-black ring-opacity-5">
class="max-w-2xl mx-auto overflow-hidden transition-all transform bg-white bg-opacity-100 divide-y divide-gray-500 shadow-2xl divide-opacity-10 rounded-xl ring-0 ring-black ring-opacity-5">
<Combobox>
<div class="relative">
<MagnifyingGlassIcon
@ -29,10 +30,10 @@
class="px-3 mt-4 mb-2 text-xs font-semibold text-gray-900">
Terakhir Diakses
</h2>
<ul class="text-sm text-gray-700">
<!-- <ul class="text-sm text-gray-700">
<ComboboxOption as="template" v-for="menu in query === '' ? recent : filteredMenus"
:key="menu.path" v-slot="{ active }">
<li @click="openMenu(menu)"
<li @click="command.openMenu(menu)"
:class="['flex flex-row cursor-pointer select-none items-center rounded-md px-3 py-2', active && 'bg-gray-900 bg-opacity-5 text-gray-900']">
<component v-if="menu.path.includes('/gangguan/')" :is="navigationIcon[0]"
alt="icon"
@ -73,6 +74,55 @@
Buka
</span>
</li>
</ComboboxOption>
</ul> -->
<ul class="text-sm text-gray-700">
<ComboboxOption as="template" v-for="menu in query === '' ? recent : filteredMenus"
:key="menu.path" v-slot="{ active }">
<li @click="command.openMenu(menu)"
:class="['flex flex-row cursor-pointer select-none items-center rounded-md px-3 py-2', active && 'bg-primary-500 text-white']">
<component v-if="menu.path.includes('/gangguan/')" :is="navigationIcon[0]"
alt="icon"
:class="['h-6 w-6 flex-none', active ? 'fill-white' : 'fill-gray-600']" />
<component v-else-if="menu.path.includes('/keluhan/')"
:is="navigationIcon[1]" alt="icon"
:class="['h-6 w-6 flex-none', active ? 'fill-white' : 'fill-gray-600']" />
<component v-else-if="menu.path.includes('/monalisa/')"
:is="navigationIcon[2]" alt="icon"
:class="['h-6 w-6 flex-none', active ? 'fill-white' : 'fill-gray-600']" />
<component v-else-if="menu.path.includes('/check-in-out/')"
:is="navigationIcon[3]" alt="icon"
:class="['h-6 w-6 flex-none', active ? 'fill-white' : 'fill-gray-600']" />
<component v-else-if="menu.path.includes('/anomali-pengaduan/')"
:is="navigationIcon[4]" alt="icon"
:class="['h-6 w-6 flex-none', active ? 'fill-white' : 'fill-gray-600']" />
<component v-else-if="menu.path.includes('/ctt-kwh-periksa/')"
:is="navigationIcon[5]" alt="icon"
:class="['h-6 w-6 flex-none', active ? 'fill-white' : 'fill-gray-600']" />
<component v-else-if="menu.path.includes('/material/')"
:is="navigationIcon[6]" alt="icon"
:class="['h-6 w-6 flex-none', active ? 'fill-white' : 'fill-gray-600']" />
<component v-else-if="menu.path.includes('/transaksi/')"
:is="navigationIcon[7]" alt="icon"
:class="['h-6 w-6 flex-none', active ? 'fill-white' : 'fill-gray-600']" />
<component v-else :is="navigationIcon[8]" alt="icon"
:class="['h-6 w-6 flex-none', active ? 'fill-white' : 'fill-gray-600']" />
<div class="flex flex-col flex-1 ml-3 space-y-1">
<span
:class="[active ? 'text-white' : 'text-gray-800', 'text-sm font-medium line-clamp-1']">
{{ menu.name }}
</span>
<span
:class="[active ? 'text-white' : 'text-gray-500', 'text-xs line-clamp-1']">
{{ menu.path.replace('/home/', '') }}
</span>
</div>
<span v-if="active" class="flex-none ml-3 text-gray-200">
Buka
</span>
</li>
</ComboboxOption>
</ul>
@ -97,9 +147,8 @@
</template>
<script setup lang="ts">
import { computed, ref, watch } from 'vue'
import { computed, ref } from 'vue'
import { MagnifyingGlassIcon } from '@heroicons/vue/20/solid'
import { DocumentTextIcon } from '@heroicons/vue/24/outline'
import {
Combobox,
ComboboxInput,
@ -110,14 +159,11 @@ import {
TransitionChild,
TransitionRoot,
} from '@headlessui/vue'
import { useRouter, type RouteRecordRaw } from 'vue-router'
import { routes, extractLeafRoutes } from '@/router'
import { routes } from '@/router'
import { useCommandPalattesStore } from '@/stores/command'
import { navigationIcon } from '@/utils/route'
const command = useCommandPalattesStore()
const route = useRouter()
const recent = computed(() => query.value === '' ? command.readRecent() : [])
const query = ref('')
const filteredMenus = computed(() =>
@ -125,7 +171,6 @@ const filteredMenus = computed(() =>
? []
: command.searchRoutesByName(routes, query.value)
)
const onClose = () => command.open = false
let debounceTimeout: ReturnType<typeof setTimeout> | null = null;
const onQueryChange = (value: string) => {
@ -142,10 +187,4 @@ const onQueryChange = (value: string) => {
}, 300);
}
const openMenu = (menu: RouteRecordRaw) => {
command.addRecent(menu)
route.push(menu.path)
onClose()
}
</script>

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

@ -24,19 +24,9 @@ watch(route, (to, _) => {
closeSideBar()
})
// onMounted(() => {
// menu.menuSelected = router.currentRoute.value.fullPath
// if (menu.menuSelected !== '/' && menu.menuSelected !== '/home' && menu.menuSelected.includes('/home')) {
// const result = splitRoutePath(menu.menuSelected)
// for (const route of result) {
// if (route !== '/home') {
// menu.toggleSidebarMenu(route, true)
// }
// }
// }
// })
onMounted(() => {
menu.expandCurrentActiveMenu()
})
const isMenu = (name: string) => {
return menu.menuSelected === name
@ -75,7 +65,7 @@ const closeSideBar = () => menu.toggleSidebar()
</TransitionChild>
<div class="flex items-center flex-shrink-0 px-4">
<RouterLink to="/">
<img class="w-auto h-16" :src="IconApp" alt="PLN" />
<img class="w-auto h-12 md:h-16" :src="IconApp" alt="PLN" />
</RouterLink>
</div>
<div class="flex-1 h-0 mt-5 overflow-y-auto">

4
src/components/Pages/MenuProvider.vue
View File

@ -1,6 +1,6 @@
<template>
<main class="flex-1 px-4 overflow-y-auto bg-white md:mr-3 sm:px-3 md:px-4 rounded-t-2xl md:rounded-t-3xl no-scroll-bar">
<div v-if="route.path !== '/home'" class="pt-4 max-w-7xl">
<main class="flex-1 px-4 overflow-y-auto bg-white md:mr-3 sm:px-3 md:px-6 rounded-t-2xl md:rounded-t-3xl no-scroll-bar">
<div v-if="route.path !== '/home'" class="mt-4 lg:mt-6 max-w-7xl">
<h1 class="text-xl font-medium md:text-3xl text-dark">{{ currentRouteName }}</h1>
</div>
<div class="mt-2 sm:mt-4 dx-viewport">

30
src/components/Pages/Welcome.vue
View File

@ -16,7 +16,7 @@
</h2>
<div class="flex flex-col w-full space-y-3" v-for="menu in query === '' ? recent : filteredMenus"
:key="menu.path">
<div @click="openMenu(menu)" class="group">
<div @click="command.openMenu(menu)" class="group">
<div
class="flex flex-row items-center justify-between px-3 py-2 rounded-md cursor-pointer select-none group-hover:bg-primary-500 group-hover:text-white group-hover:bg-opacity-80">
<component v-if="menu.path.includes('/gangguan/')" :is="navigationIcon[0]" alt="icon"
@ -63,17 +63,15 @@
</template>
<script setup lang="ts">
import { readData, writeData } from '@/utils/storage'
import { MagnifyingGlassIcon } from '@heroicons/vue/20/solid';
import { computed, onMounted, ref, watch } from 'vue'
import { computed, ref } from 'vue'
import { useCommandPalattesStore } from '@/stores/command'
import { IconApp } from '@/utils/icons'
import { useRouter, type RouteRecordRaw } from 'vue-router'
import { type RouteRecordRaw } from 'vue-router'
import { routes, extractLeafRoutes } from '@/router'
import { navigationIcon } from '@/utils/route';
const command = useCommandPalattesStore()
const route = useRouter()
const recent = computed(() => query.value === '' ? command.readRecent() : [])
const query = ref('')
@ -87,27 +85,5 @@ const filteredMenus = computed(() =>
? []
: searchRoutesByName(routes, query.value)
)
const onClose = () => command.open = false
let debounceTimeout: ReturnType<typeof setTimeout> | null = null;
const onQueryChange = (value: string) => {
if (debounceTimeout) {
clearTimeout(debounceTimeout);
}
debounceTimeout = setTimeout(() => {
// check if value is empty or only spaces
if (value.trim() === '') {
query.value = ''
return
}
query.value = value
}, 300);
}
const openMenu = (menu: RouteRecordRaw) => {
command.addRecent(menu)
route.push(menu.path)
onClose()
}
</script>