From a4110103b72ef3deb30387eb2d70577d68431667 Mon Sep 17 00:00:00 2001 From: Igor Kulikov Date: Mon, 29 Jun 2026 17:12:12 +0300 Subject: [PATCH] =?UTF-8?q?UI:=20continue=20side-menu=20structure=20work?= =?UTF-8?q?=20=E2=80=94=20new=20menu=20sections,=20refreshed=20translation?= =?UTF-8?q?s,=20widget-library=20route=20data?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ui-ngx/src/app/core/services/menu.models.ts | 64 +++++++++++++------ ui-ngx/src/app/core/services/menu.service.ts | 2 +- .../home/menu/side-menu.component.html | 9 ++- .../home/menu/side-menu.component.scss | 4 ++ .../widget/widget-library-routing.module.ts | 3 +- .../assets/locale/locale.constant-en_US.json | 3 + 6 files changed, 62 insertions(+), 23 deletions(-) diff --git a/ui-ngx/src/app/core/services/menu.models.ts b/ui-ngx/src/app/core/services/menu.models.ts index e8a77df4b1..1b3efa8e50 100644 --- a/ui-ngx/src/app/core/services/menu.models.ts +++ b/ui-ngx/src/app/core/services/menu.models.ts @@ -18,7 +18,7 @@ import { AuthState } from '@core/auth/auth.models'; import { Authority } from '@shared/models/authority.enum'; import { deepClone } from '@core/utils'; -export declare type MenuSectionType = 'link' | 'toggle'; +export declare type MenuSectionType = 'link' | 'toggle' | 'divider'; export interface MenuSection { id: MenuId | string; @@ -88,6 +88,7 @@ export enum MenuId { domains = 'domains', clients = 'clients', audit_log = 'audit_log', + monitor = 'monitor', alarms_center = 'alarms_center', alarms = 'alarms', alarm_rules = 'alarm_rules', @@ -113,7 +114,8 @@ export enum MenuId { api_usage = 'api_usage', trendz_settings = 'trendz_settings', ai_models = 'ai_models', - iot_hub = 'iot_hub' + iot_hub = 'iot_hub', + divider = 'divider' } declare type MenuFilter = (authState: AuthState) => boolean; @@ -521,6 +523,16 @@ export const menuSectionMap = new Map([ icon: 'track_changes' } ], + [ + MenuId.monitor, + { + id: MenuId.monitor, + name: 'monitor.monitor', + type: 'toggle', + path: '/monitor', + icon: 'mdi:view-dashboard-outline' + } + ], [ MenuId.alarms_center, { @@ -772,9 +784,19 @@ export const menuSectionMap = new Map([ name: 'iot-hub.iot-hub', type: 'link', path: '/iot-hub', - icon: 'hub', + icon: 'mdi:hub-outline', isNew: true } + ], + [ + MenuId.divider, + { + id: MenuId.divider, + name: '', + type: 'divider', + path: 'divider', + icon: '' + } ] ]); @@ -866,15 +888,31 @@ const defaultUserMenuMap = new Map([ Authority.TENANT_ADMIN, [ {id: MenuId.home}, + {id: MenuId.iot_hub}, + {id: MenuId.divider}, { - id: MenuId.alarms_center, + id: MenuId.monitor, pages: [ - {id: MenuId.alarms}, - {id: MenuId.alarm_rules} + {id: MenuId.dashboards}, + { + id: MenuId.alarms_center, + pages: [ + {id: MenuId.alarms}, + {id: MenuId.alarm_rules} + ] + }, + { + id: MenuId.notifications_center, + pages: [ + {id: MenuId.notification_inbox}, + {id: MenuId.notification_sent}, + {id: MenuId.notification_recipients}, + {id: MenuId.notification_templates}, + {id: MenuId.notification_rules} + ] + } ] }, - {id: MenuId.dashboards}, - {id: MenuId.iot_hub}, { id: MenuId.entities, pages: [ @@ -924,16 +962,6 @@ const defaultUserMenuMap = new Map([ {id: MenuId.resources_library} ] }, - { - id: MenuId.notifications_center, - pages: [ - {id: MenuId.notification_inbox}, - {id: MenuId.notification_sent}, - {id: MenuId.notification_recipients}, - {id: MenuId.notification_templates}, - {id: MenuId.notification_rules} - ] - }, { id: MenuId.mobile_center, pages: [ diff --git a/ui-ngx/src/app/core/services/menu.service.ts b/ui-ngx/src/app/core/services/menu.service.ts index 747cbf3e3c..43b00c4d99 100644 --- a/ui-ngx/src/app/core/services/menu.service.ts +++ b/ui-ngx/src/app/core/services/menu.service.ts @@ -74,7 +74,7 @@ export class MenuService { const openedMenuSections = getCurrentOpenedMenuSections(this.store); if (this.currentMenuSections?.length) { this.currentMenuSections.filter(section => section.type === 'toggle' && - (url.startsWith(section.path) || openedMenuSections.includes(section.path))).forEach( + (url.startsWith(section.path) || openedMenuSections.includes(section.path) || section.pages.some(page => url.startsWith(page.path)) )).forEach( section => section.opened = true ); } diff --git a/ui-ngx/src/app/modules/home/menu/side-menu.component.html b/ui-ngx/src/app/modules/home/menu/side-menu.component.html index eac88265a7..949467b6cc 100644 --- a/ui-ngx/src/app/modules/home/menu/side-menu.component.html +++ b/ui-ngx/src/app/modules/home/menu/side-menu.component.html @@ -18,13 +18,16 @@
    @for (section of menuSections$ | async; track section.id) {
  • - @switch (section.type === 'link') { - @case (true) { + @switch (section.type) { + @case ('link') { } - @case (false) { + @case ('toggle') { } + @case ('divider') { + + } }
    • } diff --git a/ui-ngx/src/app/modules/home/menu/side-menu.component.scss b/ui-ngx/src/app/modules/home/menu/side-menu.component.scss index ff8be78a09..7e89cbf61c 100644 --- a/ui-ngx/src/app/modules/home/menu/side-menu.component.scss +++ b/ui-ngx/src/app/modules/home/menu/side-menu.component.scss @@ -39,6 +39,10 @@ } } } + .mat-divider.mat-divider-horizontal { + margin-top: 12px; + margin-bottom: 12px; + } } .tb-side-menu ul { diff --git a/ui-ngx/src/app/modules/home/pages/widget/widget-library-routing.module.ts b/ui-ngx/src/app/modules/home/pages/widget/widget-library-routing.module.ts index ad257af29c..6bfd799ab7 100644 --- a/ui-ngx/src/app/modules/home/pages/widget/widget-library-routing.module.ts +++ b/ui-ngx/src/app/modules/home/pages/widget/widget-library-routing.module.ts @@ -244,7 +244,8 @@ export const widgetsLibraryRoutes: Routes = [ data: { auth: [Authority.SYS_ADMIN, Authority.TENANT_ADMIN], breadcrumb: { - menuId: MenuId.widget_library + menuId: MenuId.widget_library, + skip: true } }, children: [ diff --git a/ui-ngx/src/assets/locale/locale.constant-en_US.json b/ui-ngx/src/assets/locale/locale.constant-en_US.json index eb87f9bb24..e24dd0eb88 100644 --- a/ui-ngx/src/assets/locale/locale.constant-en_US.json +++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json @@ -4769,6 +4769,9 @@ "getting-started": "Getting Started" } }, + "monitor": { + "monitor": "Monitor" + }, "notification": { "action-button": "Action button", "action-type": "Action type",