Yusron alamsyah
156 lines
4.1 KiB
Vue
156 lines
4.1 KiB
Vue
<script setup lang="ts">
|
|
import { ref, shallowRef, onMounted, computed } from "vue";
|
|
import { useCustomizerStore } from "~/store/customizer";
|
|
import sidebarItems from "./sidebarItem";
|
|
import Logo from "../logo/Logo.vue";
|
|
import { Icon } from "@iconify/vue";
|
|
import { useRoute } from "vue-router";
|
|
// MiniSidebar Icons
|
|
import MiniSideIcons from "./MinIconItems";
|
|
import { useHakAkses } from "~/composables/useHakAkses";
|
|
|
|
const route = useRoute();
|
|
const { getAllowedPages } = useHakAkses();
|
|
|
|
const allowedPages = ref<string[]>([]);
|
|
const isLoadingAccess = ref(true);
|
|
|
|
// Fetch allowed pages on mount
|
|
onMounted(async () => {
|
|
try {
|
|
allowedPages.value = await getAllowedPages();
|
|
console.log('Allowed pages for user:', allowedPages.value);
|
|
} catch (error) {
|
|
console.error('Error loading allowed pages:', error);
|
|
} finally {
|
|
isLoadingAccess.value = false;
|
|
}
|
|
});
|
|
|
|
// Filter sidebar items based on user's allowed pages
|
|
const filteredSidebarItems = computed(() => {
|
|
if (isLoadingAccess.value) {
|
|
return [];
|
|
}
|
|
|
|
// If no allowed pages, return empty (no access)
|
|
if (allowedPages.value.length === 0) {
|
|
return [];
|
|
}
|
|
|
|
return sidebarItems.map(section => {
|
|
// Filter children based on allowed pages
|
|
const filteredChildren = section.children?.filter(child => {
|
|
if (child.to) {
|
|
return allowedPages.value.includes(child.to);
|
|
}
|
|
return false;
|
|
});
|
|
|
|
// Only include section if it has visible children
|
|
if (filteredChildren && filteredChildren.length > 0) {
|
|
return {
|
|
...section,
|
|
children: filteredChildren
|
|
};
|
|
}
|
|
|
|
return null;
|
|
}).filter(item => item !== null);
|
|
});
|
|
|
|
const findTitleByPath = (items: any, path: any) => {
|
|
let title = "";
|
|
|
|
for (const item of items) {
|
|
if (item.to === path) {
|
|
title = item.id;
|
|
break;
|
|
} else if (item.children) {
|
|
for (const child of item.children) {
|
|
if (child.to === path) {
|
|
title = item.id;
|
|
break;
|
|
} else if (child.children) {
|
|
for (const grandChild of child.children) {
|
|
if (grandChild.to === path) {
|
|
title = item.id;
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
return title;
|
|
};
|
|
const foundId = findTitleByPath(sidebarItems, route.path);
|
|
const getCurrent = foundId ? foundId : 1;
|
|
const currentMenu = ref<any>(getCurrent);
|
|
function showData(data: any) {
|
|
currentMenu.value = data;
|
|
//customizer.SET_MINI_SIDEBAR(!customizer.mini_sidebar)
|
|
}
|
|
|
|
// MiniSidebar Icons End
|
|
const customizer = useCustomizerStore();
|
|
const sidebarMenu = shallowRef(sidebarItems);
|
|
</script>
|
|
|
|
<template>
|
|
<!-- Minisidebar Icons -->
|
|
|
|
|
|
<!-- LeftSidebar Items -->
|
|
<v-navigation-drawer
|
|
v-model="customizer.Sidebar_drawer"
|
|
elevation="0"
|
|
rail-width="1"
|
|
app
|
|
top="0"
|
|
class="leftSidebar"
|
|
:rail="customizer.mini_sidebar"
|
|
width="240"
|
|
>
|
|
<!---Logo part -->
|
|
<div class="pa-4 pb-0">
|
|
<Logo />
|
|
</div>
|
|
|
|
<!-- ---------------------------------------------- -->
|
|
<!---Navigation -->
|
|
<!-- ---------------------------------------------- -->
|
|
<perfect-scrollbar class="scrollnavbar">
|
|
<div class="px-4 py-0 sidebar-menus">
|
|
<v-list class="py-1">
|
|
<template v-for="(item, i) in sidebarMenu">
|
|
<template v-if="currentMenu == item.id">
|
|
<!---Item Sub Header -->
|
|
<LazyLayoutFullVerticalSidebarNavGroup
|
|
:item="item"
|
|
v-if="item.header"
|
|
:key="item.title"
|
|
/>
|
|
<!---If Has Child -->
|
|
<template v-for="sItem in item.children">
|
|
<LazyLayoutFullVerticalSidebarNavCollapse
|
|
class="leftPadding"
|
|
:item="sItem"
|
|
:level="0"
|
|
v-if="sItem.children"
|
|
/>
|
|
<LazyLayoutFullVerticalSidebarNavItem
|
|
:item="sItem"
|
|
class="leftPadding"
|
|
v-else
|
|
/>
|
|
</template>
|
|
</template>
|
|
</template>
|
|
</v-list>
|
|
</div>
|
|
</perfect-scrollbar>
|
|
</v-navigation-drawer>
|
|
</template>
|