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

update

Browse Source
This commit is contained in:
Dede Fuji Abdul 2023-10-18 15:18:55 +07:00
parent be5ec7fe83
commit 2847d5e390
6 changed files with 48 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/assets/css/style.css
View File

@ -1974,6 +1974,10 @@ select {
padding-left: 1rem;
}
.pl-1 {
padding-left: 0.25rem;
}
.text-left {
text-align: left;
}
@ -3159,6 +3163,10 @@ select {
padding-left: 20rem;
}
.md\:pl-4 {
padding-left: 1rem;
}
.md\:text-2xl {
font-size: 1.5rem;
line-height: 2rem;

12
src/components/Aside/Aside.vue
View File

@ -15,6 +15,7 @@ import { IconApp } from '@/utils/icons'
import AsideMenuSingle from '@/components/Aside/AsideMenuSingle.vue'
import AsideMenuMultiple from '@/components/Aside/AsideMenuMultiple.vue'
import type { MenuItemModel } from '@/utils/interfaces'
import { Bars3BottomLeftIcon } from '@heroicons/vue/20/solid'
const menu = useMenuStore()
const route = useRoute()
@ -85,14 +86,19 @@ const closeSideBar = () => menu.toggleSidebar()
</Dialog>
</TransitionRoot>
<!-- Static sidebar for desktop -->
<div class="z-10 hidden bg-primary-50 md:fixed md:inset-y-0 md:flex md:w-80 md:flex-col">
<div class="z-10 hidden md:fixed md:inset-y-0 md:flex md:w-80 md:flex-col">
<!-- Sidebar component, swap this element with another sidebar if you like -->
<div class="flex items-center flex-shrink-0 h-16 px-5">
<div class="flex flex-row items-center flex-shrink-0 h-16 px-2 bg-primary-50">
<button type="button" class="px-4 text-gray-500 focus:outline-none focus:ring-0"
@click="menu.toggleSidebarDesktop()">
<span class="sr-only">Open sidebar</span>
<Bars3BottomLeftIcon class="w-6 h-6" aria-hidden="true" />
</button>
<RouterLink to="/">
<img class="w-auto h-11" :src="IconApp" alt="PLN" />
</RouterLink>
</div>
<div class="flex flex-col flex-grow overflow-y-auto">
<div :class="[menu.sidebarShowed ? 'flex flex-col flex-grow overflow-y-auto' : 'hidden']">
<div class="flex flex-col flex-grow mt-5">
<nav class="flex-1 px-2 pb-4 space-y-1">
<template v-for="item in menu.navigation" :key="item.name">

2
src/components/Aside/AsideMenuMultiple.vue
View File

@ -36,7 +36,7 @@ const isMenuSelected = computed(() => {
<Disclosure v-bind:default-open="isMenuSelected ? true : false" as="dev">
<!-- Nested item with children -->
<DisclosureButton @click="menu.toggleSidebarMenu(item.href, !item.expanded)"
:class="[(isMenuSelected || item.expanded || isChildren || item.expanded) ? 'bg-primary-100 text-primary-500 font-bold' : 'text-gray-600 font-semibold text-aside hover:bg-primary-100 hover:text-primary-500', 'group w-full flex items-center pr-1 py-2 text-left text-xs rounded-lg focus:outline-none focus:ring-0']">
:class="[(isMenuSelected || item.expanded || isChildren || item.expanded) ? 'bg-primary-100 text-primary-500 font-bold' : 'text-gray-600 font-semibold text-aside hover:bg-primary-100 hover:text-primary-500', isChildren ? 'pl-1 pr-2' : 'px-2', 'group w-full flex items-center py-2 text-left text-xs rounded-lg focus:outline-none focus:ring-0']">
<embed :src="isChildren ? DotOutline : item.icon"
:class="[isMenuSelected ? 'fill-primary-500' : 'fill-gray-400 group-hover:fill-gray-500', isChildren ? '' : 'mr-2', 'flex-shrink-0 w-6 h-6']"
type="image/svg+xml" />

34
src/components/Header.vue
View File

@ -16,9 +16,6 @@ import {
MenuItems,
} from '@headlessui/vue'
import {
BookOpenIcon,
ChatBubbleOvalLeftEllipsisIcon,
QuestionMarkCircleIcon,
Bars3BottomLeftIcon
} from '@heroicons/vue/24/outline'
import { MagnifyingGlassIcon } from '@heroicons/vue/24/solid'
@ -27,10 +24,10 @@ import PictureInitial from './PictureInitial.vue'
import Icon from '@/assets/images/pln-with-text.png'
import { useDialogStore } from '@/stores/dialog'
const authStore = useAuthStore()
const userStore = useUserStore()
const messageStore = useMessageStore()
const commandStore = useCommandPalattesStore()
const auth = useAuthStore()
const user = useUserStore()
const message = useMessageStore()
const command = useCommandPalattesStore()
const menu = useMenuStore()
const dialog = useDialogStore()
@ -54,6 +51,7 @@ const showDialogLogout = () => {
dialog.confirmText = 'Ya, logout'
dialog.showCancelButton = true
dialog.onConfirm = () => {
auth.logout()
window.location.href = '/login'
}
dialog.open = true
@ -73,7 +71,7 @@ const showDialogLogout = () => {
<div class="flex justify-end w-full px-4">
<!-- <div class="flex flex-1">
<div class="flex w-full md:ml-0">
<button @click="commandStore.showCommandPalettes"
<button @click="command.showCommandPalettes"
class="relative w-full text-gray-400 border-0 border-transparent rounded-xl hover:text-primary-500 ring-0 ring-transparent focus:border-transparent focus:border-0 focus:ring-0">
<div class="absolute inset-y-0 left-0 flex items-center pointer-events-none">
<MagnifyingGlassIcon class="w-5 h-5" aria-hidden="true" />
@ -95,12 +93,12 @@ const showDialogLogout = () => {
<span class="sr-only">Manual Book</span>
<BookOpenIcon class="w-6 h-6" aria-hidden="true" />
</button>
<button type="button" @click="messageStore.showDialogMessageBox"
<button type="button" @click="message.showDialogMessageBox"
class="p-1 text-gray-400 bg-white rounded-full hover:text-primary-500 focus:outline-none focus:ring-0">
<span class="sr-only">Message</span>
<ChatBubbleOvalLeftEllipsisIcon class="w-6 h-6" aria-hidden="true" />
</button> -->
<button @click="commandStore.showCommandPalettes" type="button"
<button @click="command.showCommandPalettes" type="button"
class="flex flex-row items-center md:w-[300px] p-2 mr-2 text-gray-400 bg-white rounded-full hover:text-primary-500 focus:outline-none focus:ring-0">
<span class="sr-only">Search</span>
<MagnifyingGlassIcon class="w-6 h-6 text-primary-500" aria-hidden="true" />
@ -114,9 +112,9 @@ const showDialogLogout = () => {
class="flex items-center max-w-xs px-1 py-1 text-sm rounded-full bg-secondary-100 md:bg-primary-500 focus:outline-none focus:ring-0 line-clamp-1">
<span class="sr-only">Open user menu</span>
<PictureInitial size-class="w-8 h-8" background-class="bg-secondary-100"
font-class="text-xs font-bold text-primary-500" :name="userStore.user_name" />
font-class="text-xs font-bold text-primary-500" :name="user.user_name" />
<span class="hidden px-3 text-xs font-medium md:block text-primary-50 line-clamp-1">
{{ userStore.user_name }}
{{ user.user_name }}
</span>
</MenuButton>
</div>
@ -130,17 +128,17 @@ const showDialogLogout = () => {
<div class="flex-shrink-0 block px-4 py-2 border-b border-gray-50 group">
<div class="flex items-center">
<div>
<!-- <img class="inline-block rounded-full h-9 w-9" :src="userStore.user_image" alt="" /> -->
<!-- <img class="inline-block rounded-full h-9 w-9" :src="user.user_image" alt="" /> -->
<PictureInitial class-name="nline-block" size-class="w-9 h-9"
background-class="bg-gray-100" font-class="font-bold text-gray-600 text-md"
:name="userStore.user_name" />
:name="user.user_name" />
</div>
<div class="ml-3">
<p class="text-sm font-medium text-gray-700 group-hover:text-gray-900">
{{ userStore.user_name }}
{{ user.user_name }}
</p>
<p class="text-xs font-medium text-gray-500 group-hover:text-gray-700">
{{ userStore.user_access }}
{{ user.user_access }}
</p>
</div>
</div>
@ -165,6 +163,6 @@ const showDialogLogout = () => {
</div>
<ChangePasswordDialog :open="dialogChangePassword" @onClose="handleOnDismissDialogChangePassword" />
<CommandPalettes :open="commandStore.open" @onClose="commandStore.handleOnDismissCommandPalettes" />
<MessageBox :open="messageStore.open" @onClose="messageStore.handleOnDismissMessageBox" />
<CommandPalettes :open="command.open" @onClose="command.handleOnDismissCommandPalettes" />
<MessageBox :open="message.open" @onClose="message.handleOnDismissMessageBox" />
</template>

6
src/stores/menu.ts
View File

@ -535,7 +535,7 @@ export const useMenuStore = defineStore('menu', () => {
},
])
const sidebarOpen = ref(false)
const sedebarShowed = ref(true)
const sidebarShowed = ref(true)
const menuSelected = ref(route.fullPath)
const toggleSidebar = () => (sidebarOpen.value = !sidebarOpen.value)
const toggleSidebarMenu = (href: string, newExpanded: boolean): void => {
@ -558,7 +558,7 @@ export const useMenuStore = defineStore('menu', () => {
toggleItemExpanded(navigation.value)
}
const toggleSidebarDesktop = () => (sedebarShowed.value = !sedebarShowed.value)
const toggleSidebarDesktop = () => (sidebarShowed.value = !sidebarShowed.value)
return {
navigation,
@ -566,7 +566,7 @@ export const useMenuStore = defineStore('menu', () => {
sidebarOpen,
menuSelected,
toggleSidebarMenu,
sedebarShowed,
sidebarShowed,
toggleSidebarDesktop
}
})

20
src/views/HomeView.vue
View File

@ -1,15 +1,17 @@
<script setup lang="ts">
import MenuProvider from '@/components/Menus/MenuProvider.vue'
import Navigation from '@/components/Navigation.vue'
import { useMenuStore } from '@/stores/menu'
import { RouterView } from 'vue-router'
const menu = useMenuStore()
</script>
<template>
<Navigation />
<div class="flex flex-col flex-1 h-[calc(100%-64px)] overflow-hidden md:pl-80 bg-primary-50">
<div
:class="['flex flex-col flex-1 h-[calc(100%-64px)] overflow-hidden bg-primary-50', menu.sidebarShowed ? 'md:pl-80' : 'md:pl-4']">
<MenuProvider>
<RouterView />
</MenuProvider>
</div>
</template>
<script setup lang="ts">
import MenuProvider from '@/components/Menus/MenuProvider.vue';
import Navigation from '@/components/Navigation.vue';
import { RouterView } from 'vue-router'
</script>
</template>