diff --git a/src/app/core/admin/admin-overview/admin-overview.component.html b/src/app/core/admin/admin-overview/admin-overview.component.html index 5f04214a5b..93444ad6ce 100644 --- a/src/app/core/admin/admin-overview/admin-overview.component.html +++ b/src/app/core/admin/admin-overview/admin-overview.component.html @@ -10,7 +10,7 @@

Administration & Configuration

Shortcuts

@for (item of adminOverviewService.menuItems; track item) { - {{ item.label }} + {{ item.label }} } diff --git a/src/app/core/admin/admin-overview/admin-overview.service.ts b/src/app/core/admin/admin-overview/admin-overview.service.ts index 1788c0468b..78196cf233 100644 --- a/src/app/core/admin/admin-overview/admin-overview.service.ts +++ b/src/app/core/admin/admin-overview/admin-overview.service.ts @@ -13,19 +13,19 @@ export class AdminOverviewService { menuItems: MenuItem[] = [ { label: $localize`:admin menu item:Site Settings`, - link: "/admin/site-settings", + target: "/admin/site-settings", }, { label: $localize`:admin menu item:Database Conflicts`, - link: "/admin/conflicts", + target: "/admin/conflicts", }, { label: $localize`:admin menu item:Administer Entity Types`, - link: "/admin/entity", + target: "/admin/entity", }, { label: $localize`:admin menu item:Setup Wizard`, - link: "/admin/setup-wizard", + target: "/admin/setup-wizard", }, ]; } diff --git a/src/app/core/admin/setup-wizard/setup-wizard-config.ts b/src/app/core/admin/setup-wizard/setup-wizard-config.ts index b023a38d92..b26b192466 100644 --- a/src/app/core/admin/setup-wizard/setup-wizard-config.ts +++ b/src/app/core/admin/setup-wizard/setup-wizard-config.ts @@ -54,11 +54,11 @@ We are currently extending and optimizing the user interfaces for these steps._ actions: [ { label: $localize`:Setup Wizard Step Action:Customize Child profile`, - link: "/admin/entity/Child", + target: "/admin/entity/Child", }, { label: $localize`:Setup Wizard Step Action:Customize School profile`, - link: "/admin/entity/School", + target: "/admin/entity/School", }, ], }, @@ -70,7 +70,7 @@ Data is synced and all users have access to the latest information.`, actions: [ { label: $localize`:Setup Wizard Step Action:Manage User Accounts`, - link: "/user", + target: "/user", }, ], }, @@ -84,7 +84,7 @@ The Import Module helps your map your spreadsheet data to the relevant fields in actions: [ { label: $localize`:Setup Wizard Step Action:Import Data`, - link: "/import", + target: "/import", }, ], }, diff --git a/src/app/core/admin/setup-wizard/setup-wizard.component.html b/src/app/core/admin/setup-wizard/setup-wizard.component.html index dd7914fee6..fabd920d0f 100644 --- a/src/app/core/admin/setup-wizard/setup-wizard.component.html +++ b/src/app/core/admin/setup-wizard/setup-wizard.component.html @@ -18,8 +18,8 @@ {{ step.text }} - @for (action of step.actions; track action.link) { - } diff --git a/src/app/core/config/config.service.ts b/src/app/core/config/config.service.ts index 4d0423df59..f9653cca44 100644 --- a/src/app/core/config/config.service.ts +++ b/src/app/core/config/config.service.ts @@ -187,7 +187,7 @@ const migrateMenuItemConfig: ConfigMigration = (key, configPart) => { | { name: string; icon: string; - link: string; + target: string; } | MenuItem )[] = configPart.items; @@ -197,7 +197,7 @@ const migrateMenuItemConfig: ConfigMigration = (key, configPart) => { return { label: item["name"], icon: item.icon, - link: item.link, + target: item.target, }; } else { return item; diff --git a/src/app/core/config/dynamic-routing/route-permissions.service.ts b/src/app/core/config/dynamic-routing/route-permissions.service.ts index 96687ccfb7..86b7deb41d 100644 --- a/src/app/core/config/dynamic-routing/route-permissions.service.ts +++ b/src/app/core/config/dynamic-routing/route-permissions.service.ts @@ -21,7 +21,7 @@ export class RoutePermissionsService { async filterPermittedRoutes(items: MenuItem[]): Promise { const accessibleRoutes: MenuItem[] = []; for (const item of items) { - if (await this.isAccessibleRouteForUser(item.link)) { + if (await this.isAccessibleRouteForUser(item.target as string)) { accessibleRoutes.push(item); } } diff --git a/src/app/core/ui/navigation/menu-item.ts b/src/app/core/ui/navigation/menu-item.ts index f0d26e87ce..38decc6484 100644 --- a/src/app/core/ui/navigation/menu-item.ts +++ b/src/app/core/ui/navigation/menu-item.ts @@ -13,7 +13,9 @@ export interface MenuItem { /** * The url fragment to which the item will route to (e.g. '/dashboard') */ - target: string | MenuItem[]; + target?: string; + + subMenu?: MenuItem[]; } /** diff --git a/src/app/core/ui/navigation/navigation/navigation.component.html b/src/app/core/ui/navigation/navigation/navigation.component.html index 7e77ebd422..ab6b3407f3 100644 --- a/src/app/core/ui/navigation/navigation/navigation.component.html +++ b/src/app/core/ui/navigation/navigation/navigation.component.html @@ -22,8 +22,8 @@ angularticsCategory="Navigation" angularticsAction="app_navigation_link_click" [angularticsLabel]="item.label" - [routerLink]="[item.link]" - [class.matched-background]="item.link === activeLink" + [routerLink]="[item.target]" + [class.matched-background]="item.target === activeLink" onclick="this.blur();" > @@ -34,6 +34,22 @@
{{ item.label }}
+ + + + + + + + + + diff --git a/src/app/core/ui/navigation/navigation/navigation.component.ts b/src/app/core/ui/navigation/navigation/navigation.component.ts index e20fabd02f..a25be2edb5 100644 --- a/src/app/core/ui/navigation/navigation/navigation.component.ts +++ b/src/app/core/ui/navigation/navigation/navigation.component.ts @@ -26,6 +26,9 @@ import { NgForOf } from "@angular/common"; import { Angulartics2Module } from "angulartics2"; import { FaDynamicIconComponent } from "../../../common-components/fa-dynamic-icon/fa-dynamic-icon.component"; import { RoutePermissionsService } from "../../../config/dynamic-routing/route-permissions.service"; +import { MatMenuModule } from "@angular/material/menu"; +import { CommonModule } from "@angular/common"; +import { MatIcon } from "@angular/material/icon"; /** * Main app menu listing. @@ -41,6 +44,9 @@ import { RoutePermissionsService } from "../../../config/dynamic-routing/route-p Angulartics2Module, RouterLink, FaDynamicIconComponent, + MatMenuModule, + CommonModule, + MatIcon, ], standalone: true, }) @@ -72,6 +78,10 @@ export class NavigationComponent { }); } + hasSubMenu(item: MenuItem): boolean { + return item.subMenu && item.subMenu.length > 0; + } + /** * Computes the active link from a set of MenuItems. * The active link is the link with the most "overlap", i.e. @@ -90,9 +100,9 @@ export class NavigationComponent { case 0: return ""; case 1: - const link = items[0].target; + const target = items[0].target as string; // for root "/" only return on exact match to avoid confusing highlighting of unrelated items - return newUrl === target || target.length > 1 ? link : ""; + return newUrl === target || target.length > 1 ? target : ""; default: // If there are multiple matches (A user navigates with a URL that starts with // multiple links from a MenuItem), use the element where the length is bigger. diff --git a/src/app/core/ui/navigation/navigation/navigation.stories.ts b/src/app/core/ui/navigation/navigation/navigation.stories.ts index e934a1ff25..bcbb45aed8 100644 --- a/src/app/core/ui/navigation/navigation/navigation.stories.ts +++ b/src/app/core/ui/navigation/navigation/navigation.stories.ts @@ -24,6 +24,7 @@ const flatMenuItems: MenuItem[] = [ label: "Home", icon: "home", target: "/", + subMenu: [], }, { label: "About", @@ -41,7 +42,7 @@ const nestedMenuItems: MenuItem[] = [ { label: "Services", icon: "build", - target: [ + subMenu: [ { label: "Web Development", icon: "code", diff --git a/src/app/features/dashboard-widgets/shortcut-dashboard-widget/shortcut-dashboard/shortcut-dashboard.stories.ts b/src/app/features/dashboard-widgets/shortcut-dashboard-widget/shortcut-dashboard/shortcut-dashboard.stories.ts index 6b15a686d4..e4d0076595 100644 --- a/src/app/features/dashboard-widgets/shortcut-dashboard-widget/shortcut-dashboard/shortcut-dashboard.stories.ts +++ b/src/app/features/dashboard-widgets/shortcut-dashboard-widget/shortcut-dashboard/shortcut-dashboard.stories.ts @@ -27,12 +27,12 @@ Primary.args = { { label: "Record Attendance", icon: "calendar-check-o", - link: "/attendance/add-day", + target: "/attendance/add-day", }, { label: "All Notes", icon: "file-text", - link: "/note", + target: "/note", }, ] as MenuItem[], }; diff --git a/src/app/features/template-export/template-export.module.ts b/src/app/features/template-export/template-export.module.ts index 29389d7a64..d3c4e90e64 100644 --- a/src/app/features/template-export/template-export.module.ts +++ b/src/app/features/template-export/template-export.module.ts @@ -53,7 +53,7 @@ export class TemplateExportModule { adminOverviewService.menuItems.push({ label: $localize`:admin menu item:Manage Export Templates`, - link: TemplateExport.route, + target: TemplateExport.route, }); } }