authorized fix keycloak sidebarItem
This commit is contained in:
No files matched your search
@@ -1,50 +1,55 @@
|
||||
|
||||
export interface minisidebar {
|
||||
icon?: string;
|
||||
id?:number;
|
||||
tooltip?:string
|
||||
icon?: string;
|
||||
id?:number;
|
||||
tooltip?:string,
|
||||
typeUser?:string[],
|
||||
}
|
||||
|
||||
const MiniSideIcons: minisidebar[] = [
|
||||
{
|
||||
icon: 'layers-line-duotone',
|
||||
tooltip:'Dashboards',
|
||||
id: 1
|
||||
},
|
||||
{
|
||||
icon: 'notes-line-duotone',
|
||||
tooltip:'Pages',
|
||||
id: 2,
|
||||
},
|
||||
{
|
||||
icon: 'palette-round-line-duotone',
|
||||
tooltip:'Forms',
|
||||
id: 3
|
||||
},
|
||||
{
|
||||
icon:'align-vertical-spacing-broken',
|
||||
tooltip:'Tables',
|
||||
id: 4
|
||||
},
|
||||
{
|
||||
icon:'chart-line-duotone',
|
||||
tooltip:'Charts',
|
||||
id: 5
|
||||
},
|
||||
{
|
||||
icon:'widget-6-line-duotone',
|
||||
tooltip:'UI Components',
|
||||
id: 6
|
||||
},
|
||||
{
|
||||
icon:'lock-keyhole-line-duotone',
|
||||
tooltip:'Authentication Pages',
|
||||
id: 7
|
||||
},
|
||||
{
|
||||
icon:'mirror-left-line-duotone',
|
||||
tooltip:'Others',
|
||||
id: 8
|
||||
}
|
||||
{
|
||||
icon: 'layers-line-duotone',
|
||||
tooltip:'Dashboards',
|
||||
id: 1,
|
||||
typeUser:['super_admin','admin']
|
||||
},
|
||||
{
|
||||
icon: 'notes-line-duotone',
|
||||
tooltip:'Pages',
|
||||
id: 2,
|
||||
typeUser:['super_admin']
|
||||
},
|
||||
{
|
||||
icon: 'palette-round-line-duotone',
|
||||
tooltip:'Forms',
|
||||
id: 3
|
||||
},
|
||||
{
|
||||
icon:'align-vertical-spacing-broken',
|
||||
tooltip:'Tables',
|
||||
id: 4,
|
||||
typeUser:['super_admin']
|
||||
},
|
||||
{
|
||||
icon:'chart-line-duotone',
|
||||
tooltip:'Charts',
|
||||
id: 5
|
||||
},
|
||||
{
|
||||
icon:'widget-6-line-duotone',
|
||||
tooltip:'UI Components',
|
||||
id: 6
|
||||
},
|
||||
{
|
||||
icon:'lock-keyhole-line-duotone',
|
||||
tooltip:'Authentication Pages',
|
||||
id: 7
|
||||
},
|
||||
{
|
||||
icon:'mirror-left-line-duotone',
|
||||
tooltip:'Others',
|
||||
id: 8
|
||||
}
|
||||
]
|
||||
|
||||
export default MiniSideIcons;
|
||||
@@ -10,125 +10,155 @@ import MiniSideIcons from './MinIconItems';
|
||||
|
||||
const route = useRoute();
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// 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 findTitleByPath = (items:any, path:any) => {
|
||||
for (const item of items) {
|
||||
if (item.to === path) {
|
||||
return item.id;
|
||||
}
|
||||
|
||||
return title;
|
||||
if (item.children) {
|
||||
const title = findTitleByPath(item.children, path);
|
||||
if (title) {
|
||||
return item.id;
|
||||
}
|
||||
}
|
||||
}
|
||||
return '';
|
||||
};
|
||||
|
||||
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)
|
||||
currentMenu.value = data;
|
||||
//customizer.SET_MINI_SIDEBAR(!customizer.mini_sidebar)
|
||||
}
|
||||
|
||||
// MiniSidebar Icons End
|
||||
const customizer = useCustomizerStore();
|
||||
const sidebarMenu = shallowRef(sidebarItems);
|
||||
|
||||
const miniSidebar = MiniSideIcons.filter(menuIcon=>menuIcon.typeUser?.includes('super_admin'));
|
||||
|
||||
const filterSidebarItems=(items:any, userType:string) => {
|
||||
// const result = items.filter((item:any)=>item?.typeUser.includes(userType));
|
||||
const result = items.filter((item:any)=>item.typeUser?.includes(userType))
|
||||
.map((item:any)=>({
|
||||
...item,
|
||||
children: item.children ? filterSidebarItems(item.children,userType):''
|
||||
}))
|
||||
.filter((item:any)=>item.children.length > 0||item.typeUser.includes(userType));
|
||||
return result;
|
||||
}
|
||||
const filteredSidebarItems = filterSidebarItems(sidebarItems, 'super_admin');
|
||||
// console.log(filteredSidebarItems)
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
|
||||
|
||||
<!-- Minisidebar Icons -->
|
||||
<v-navigation-drawer class="bg-light" v-model="customizer.Sidebar_drawer" top="0" rail rail-width="80">
|
||||
<perfect-scrollbar class="miniscrollnavbar">
|
||||
<v-list-item class="px-0">
|
||||
<!-- Toggle Sidebar Button -->
|
||||
<div class="px-4 mb-3">
|
||||
<v-btn
|
||||
class="hidden-md-and-down my-2"
|
||||
icon
|
||||
rounded="md"
|
||||
variant="plain"
|
||||
@click.stop="customizer.SET_MINI_SIDEBAR(!customizer.mini_sidebar)"
|
||||
>
|
||||
<Icon icon="solar:hamburger-menu-line-duotone" height="25" />
|
||||
</v-btn>
|
||||
</div>
|
||||
|
||||
<div class="miniicons mt-lg-0 mt-4">
|
||||
<!-- MiniSidebar Icons -->
|
||||
<div class="d-flex flex-column gap-2">
|
||||
<div class="miniicons-list px-4" v-for="menu in MiniSideIcons" :key="menu.icon">
|
||||
<v-btn
|
||||
rounded="md"
|
||||
flat
|
||||
icon
|
||||
variant="plain"
|
||||
@click="showData(menu.id)"
|
||||
:class="{ 'bg-primary opacity-1': currentMenu === menu.id }"
|
||||
>
|
||||
<Icon :icon="'solar:' + menu.icon" width="25" />
|
||||
<!-- Tooltip on Hover -->
|
||||
<v-tooltip activator="parent" location="end" class="custom-tooltip">{{ menu.tooltip }}</v-tooltip>
|
||||
</v-btn>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</v-list-item>
|
||||
</perfect-scrollbar>
|
||||
</v-navigation-drawer>
|
||||
|
||||
<!-- 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 />
|
||||
<!-- Minisidebar Icons -->
|
||||
<v-navigation-drawer class="bg-light" v-model="customizer.Sidebar_drawer" top="0" rail rail-width="80">
|
||||
<perfect-scrollbar class="miniscrollnavbar">
|
||||
<v-list-item class="px-0">
|
||||
<!-- Toggle Sidebar Button -->
|
||||
<div class="px-4 mb-3">
|
||||
<v-btn
|
||||
class="hidden-md-and-down my-2"
|
||||
icon
|
||||
rounded="md"
|
||||
variant="plain"
|
||||
@click.stop="customizer.SET_MINI_SIDEBAR(!customizer.mini_sidebar)"
|
||||
>
|
||||
<Icon icon="solar:hamburger-menu-line-duotone" height="25" />
|
||||
</v-btn>
|
||||
</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 class="miniicons mt-lg-0 mt-4">
|
||||
<!-- MiniSidebar Icons -->
|
||||
<div class="d-flex flex-column gap-2">
|
||||
<div class="miniicons-list px-4" v-for="menu in miniSidebar" :key="menu.icon">
|
||||
<v-btn
|
||||
rounded="md"
|
||||
flat
|
||||
icon
|
||||
variant="plain"
|
||||
@click="showData(menu.id)"
|
||||
:class="{ 'bg-primary opacity-1': currentMenu === menu.id }"
|
||||
>
|
||||
<Icon :icon="'solar:' + menu.icon" width="25" />
|
||||
<!-- Tooltip on Hover -->
|
||||
<v-tooltip activator="parent" location="end" class="custom-tooltip">{{ menu.tooltip }}</v-tooltip>
|
||||
</v-btn>
|
||||
</div>
|
||||
</perfect-scrollbar>
|
||||
</v-navigation-drawer>
|
||||
</div>
|
||||
</div>
|
||||
</v-list-item>
|
||||
</perfect-scrollbar>
|
||||
</v-navigation-drawer>
|
||||
|
||||
<!-- 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 filteredSidebarItems">
|
||||
<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>
|
||||
File diff suppressed because it is too large
Load diff
Reference in New Issue
Block a user