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

View File

@ -46,18 +46,46 @@ export const resolveNavLinkRouteName = (link, router) => {
*/
export const isNavLinkActive = (link, router) => {
// 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 provided route matches route's matched route
const resolveRoutedName = resolveNavLinkRouteName(link, router)
if (!resolveRoutedName)
return false
// Check if the parent menu item should be active
return matchedRoutes.some(route => {
return route.name === resolveRoutedName || route.meta.navActiveLink === resolveRoutedName
})
if (isParentActive(currentRoute,router,link)) {
return true;
}
// Check if provided route matches route's matched route
const resolveRoutedName = resolveNavLinkRouteName(link, router);
if (!resolveRoutedName) {
return false;
}
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
* @param {Array} children Group children

View File

@ -161,6 +161,17 @@ const options = [
class="text-no-wrap"
>
<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>
<!-- Actions -->
<template #item.actions="{ item }">

View File

@ -157,6 +157,17 @@ const options = [
class="text-no-wrap"
>
<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>
<!-- Actions -->
<template #item.actions="{ item }">
@ -192,3 +203,10 @@ const options = [
</v-col>
</v-row>
</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',
name: 'admin-patient-profile',
component: () => import('@/pages/patients/patient-profile.vue'),
meta: {
activeParent: 'admin-patients'
}
},
{
path: '/admin/provider/provider-profile/:id',
name: 'admin-provider-profile',
component: () => import('@/pages/providers/provider-profile.vue'),
meta: {
activeParent: 'admin-providers'
}
},
{
path: '/admin/providers/patientprofile/:id',