This commit is contained in:
Muhammad Shahzad 2024-06-11 22:05:35 +05:00
commit 6cf777b786
5 changed files with 82 additions and 17 deletions

View File

@ -1,12 +1,12 @@
<script setup> <script setup>
import { layoutConfig } from '@layouts' import { layoutConfig } from '@layouts';
import { can } from '@layouts/plugins/casl' import { can } from '@layouts/plugins/casl';
import { useLayoutConfigStore } from '@layouts/stores/config' import { useLayoutConfigStore } from '@layouts/stores/config';
import { import {
getComputedNavLinkToProp, getComputedNavLinkToProp,
getDynamicI18nProps, getDynamicI18nProps,
isNavLinkActive, isNavLinkActive,
} from '@layouts/utils' } from '@layouts/utils';
const props = defineProps({ const props = defineProps({
item: { item: {
@ -22,13 +22,14 @@ const hideTitleAndBadge = configStore.isVerticalNavMini()
<template> <template>
<li <li
v-if="can(item.action, item.subject)" v-if="can(item.action, item.subject)"
class="nav-link" class="nav-link 22"
:class="{ disabled: item.disable }" :class="{ disabled: item.disable }"
> >
<Component <Component
:is="item.to ? 'RouterLink' : 'a'" :is="item.to ? 'RouterLink' : 'a'"
v-bind="getComputedNavLinkToProp(item)" v-bind="getComputedNavLinkToProp(item)"
:class="{ 'router-link-active router-link-exact-active': isNavLinkActive(item, $router) }" :class="{ 'router-link-active router-link-exact-active': isNavLinkActive(item, $router) }"
> >
<Component <Component
:is="layoutConfig.app.iconRenderer || 'div'" :is="layoutConfig.app.iconRenderer || 'div'"

View File

@ -46,18 +46,46 @@ export const resolveNavLinkRouteName = (link, router) => {
*/ */
export const isNavLinkActive = (link, router) => { export const isNavLinkActive = (link, router) => {
// Matched routes array of current route // Matched routes array of current route
const matchedRoutes = router.currentRoute.value.matched const matchedRoutes = router.currentRoute.value.matched;
const currentRoute = router.currentRoute.value;
// Check if the parent menu item should be active
if (isParentActive(currentRoute,router,link)) {
return true;
}
// Check if provided route matches route's matched route // Check if provided route matches route's matched route
const resolveRoutedName = resolveNavLinkRouteName(link, router) const resolveRoutedName = resolveNavLinkRouteName(link, router);
if (!resolveRoutedName) if (!resolveRoutedName) {
return false return false;
}
return matchedRoutes.some(route => {
return route.name === resolveRoutedName || route.meta.navActiveLink === resolveRoutedName
})
}
return matchedRoutes.some(route => {
return route.name === resolveRoutedName || route.meta.navActiveLink === resolveRoutedName;
});
};
const ParentMenuItemName = 'admin-patients';
export const isParentActive = (route, router,link) => {
// Get the current route's activeParent meta property
const activeParent = route.meta.activeParent;
// Check if the activeParent is defined and not an empty string
if (activeParent && activeParent.trim().length > 0) {
// Find the parent route configuration
const parentRoute = router.options.routes.find(r => r.name === activeParent);
console.log('fffff', link.to)
// Check if the parent route configuration exists
if (link.to) {
// Use the parent route's name or any other property as the parent menu item name
return link.to === activeParent;
}
}
// If the activeParent is not defined, an empty string, or the parent route configuration is not found, return false
return false;
};
/** /**
* Check if nav group is active * Check if nav group is active
* @param {Array} children Group children * @param {Array} children Group children

View File

@ -161,6 +161,17 @@ const options = [
class="text-no-wrap" class="text-no-wrap"
> >
<template #item.id="{ item }">{{ item.id }}</template> <template #item.id="{ item }">{{ item.id }}</template>
<template #item.provider_name="{ item }">
<div class="d-flex flex-column ms-3">
<router-link
:to="{ name: 'admin-provider-profile', params: { id: item.provider_id } }"
class="highlighted"
>
<span class="d-block font-weight-medium text-truncate">{{ item.provider_name }}</span>
</router-link>
</div>
</template>
<template #item.duration="{ item }">{{ item.duration }}</template> <template #item.duration="{ item }">{{ item.duration }}</template>
<!-- Actions --> <!-- Actions -->
<template #item.actions="{ item }"> <template #item.actions="{ item }">

View File

@ -157,6 +157,17 @@ const options = [
class="text-no-wrap" class="text-no-wrap"
> >
<template #item.id="{ item }">{{ item.id }}</template> <template #item.id="{ item }">{{ item.id }}</template>
<template #item.patient_name="{ item }">
<div class="d-flex flex-column ms-3">
<router-link
:to="{ name: 'admin-patient-profile', params: { id: item.patient_id } }"
class="highlighted"
>
<span class="d-block font-weight-medium text-truncate">{{ item.patient_name }}</span>
</router-link>
<small>{{ item.post }}</small>
</div>
</template>
<template #item.duration="{ item }">{{ item.duration }}</template> <template #item.duration="{ item }">{{ item.duration }}</template>
<!-- Actions --> <!-- Actions -->
<template #item.actions="{ item }"> <template #item.actions="{ item }">
@ -192,3 +203,10 @@ const options = [
</v-col> </v-col>
</v-row> </v-row>
</template> </template>
<style scoped>
.highlighted {
/* Add your desired highlighting styles here */
font-weight: bold;
color: #a169ff; /* or any other color you prefer */
}
</style>

View File

@ -132,11 +132,18 @@ export const routes = [
path: '/admin/patients/patient-profile/:id', path: '/admin/patients/patient-profile/:id',
name: 'admin-patient-profile', name: 'admin-patient-profile',
component: () => import('@/pages/patients/patient-profile.vue'), component: () => import('@/pages/patients/patient-profile.vue'),
meta: {
activeParent: 'admin-patients'
}
}, },
{ {
path: '/admin/provider/provider-profile/:id', path: '/admin/provider/provider-profile/:id',
name: 'admin-provider-profile', name: 'admin-provider-profile',
component: () => import('@/pages/providers/provider-profile.vue'), component: () => import('@/pages/providers/provider-profile.vue'),
meta: {
activeParent: 'admin-providers'
}
}, },
{ {
path: '/admin/providers/patientprofile/:id', path: '/admin/providers/patientprofile/:id',