UI: refresh menu models, admin resource pages, and image-gallery translations

Reshape MenuId / MenuSection metadata in menu.models.ts so menu-toggle can read the new structure; align the admin/JS library and resources routing/table configs with that shape; tighten js-library-table-header and js-resource templates plus the image-gallery action header; add the matching English locale entries.
3 weeks ago · c1cb71bbbc
9 changed files with 78 additions and 49 deletions
--- a/ui-ngx/src/app/core/services/menu.models.ts
+++ b/ui-ngx/src/app/core/services/menu.models.ts
@ -52,6 +52,7 @@ export interface HomeSection {
 export enum MenuId {
  home = 'home',
  tenants = 'tenants',
+  tenants_section = 'tenants_section',
  tenant_profiles = 'tenant_profiles',
  resources = 'resources',
  widget_library = 'widget_library',
@ -124,7 +125,17 @@ export const menuSectionMap = new Map<MenuId, MenuSection>([
      name: 'home.home',
      type: 'link',
      path: '/home',
-      icon: 'home'
+      icon: 'mdi:home-outline'
+    }
+  ],
+  [
+    MenuId.tenants_section,
+    {
+      id: MenuId.tenants_section,
+      name: 'tenant.tenants',
+      type: 'toggle',
+      path: '/tenants',
+      icon: 'mdi:account-supervisor-outline'
    }
  ],
  [
@ -134,7 +145,7 @@ export const menuSectionMap = new Map<MenuId, MenuSection>([
      name: 'tenant.tenants',
      type: 'link',
      path: '/tenants',
-      icon: 'supervisor_account'
+      icon: 'mdi:account-supervisor-outline'
    }
  ],
  [
@ -154,14 +165,14 @@ export const menuSectionMap = new Map<MenuId, MenuSection>([
      name: 'admin.resources',
      type: 'toggle',
      path: '/resources',
-      icon: 'folder'
+      icon: 'mdi:folder-outline'
    }
  ],
  [
    MenuId.widget_library,
    {
      id: MenuId.widget_library,
-      name: 'widget.widget-library',
+      name: 'widget.widgets',
      type: 'link',
      path: '/resources/widgets-library',
      icon: 'now_widgets'
@ -191,7 +202,7 @@ export const menuSectionMap = new Map<MenuId, MenuSection>([
    MenuId.images,
    {
      id: MenuId.images,
-      name: 'image.gallery',
+      name: 'image.images',
      type: 'link',
      path: '/resources/images',
      icon: 'filter'
@ -211,7 +222,7 @@ export const menuSectionMap = new Map<MenuId, MenuSection>([
    MenuId.resources_library,
    {
      id: MenuId.resources_library,
-      name: 'resource.resources-library',
+      name: 'resource.files',
      type: 'link',
      path: '/resources/resources-library',
      icon: 'mdi:rhombus-split'
@ -221,7 +232,7 @@ export const menuSectionMap = new Map<MenuId, MenuSection>([
    MenuId.javascript_library,
    {
      id: MenuId.javascript_library,
-      name: 'javascript.javascript-library',
+      name: 'javascript.scripts',
      type: 'link',
      path: '/resources/javascript-library',
      icon: 'mdi:language-javascript'
@ -231,10 +242,10 @@ export const menuSectionMap = new Map<MenuId, MenuSection>([
    MenuId.notifications_center,
    {
      id: MenuId.notifications_center,
-      name: 'notification.notification-center',
+      name: 'notification.notifications',
      type: 'link',
      path: '/notification',
-      icon: 'mdi:message-badge'
+      icon: 'mdi:message-badge-outline'
    }
  ],
  [
@ -306,7 +317,7 @@ export const menuSectionMap = new Map<MenuId, MenuSection>([
    MenuId.mobile_center,
    {
      id: MenuId.mobile_center,
-      name: 'mobile.mobile-center',
+      name: 'mobile.mobile-apps',
      type: 'link',
      path: '/mobile-center',
      icon: 'smartphone'
@ -347,10 +358,10 @@ export const menuSectionMap = new Map<MenuId, MenuSection>([
    MenuId.settings,
    {
      id: MenuId.settings,
-      name: 'admin.settings',
+      name: 'admin.platform',
      type: 'link',
      path: '/settings',
-      icon: 'settings'
+      icon: 'miscellaneous_services'
    }
  ],
  [
@ -773,22 +784,11 @@ const defaultUserMenuMap = new Map<Authority, MenuReference[]>([
    Authority.SYS_ADMIN,
    [
      {id: MenuId.home},
-      {id: MenuId.tenants},
-      {id: MenuId.tenant_profiles},
      {
-        id: MenuId.resources,
+        id: MenuId.tenants_section,
        pages: [
-          {
-            id: MenuId.widget_library,
-            pages: [
-              {id: MenuId.widget_types},
-              {id: MenuId.widgets_bundles}
-            ]
-          },
-          {id: MenuId.images},
-          {id: MenuId.scada_symbols},
-          {id: MenuId.javascript_library},
-          {id: MenuId.resources_library}
+          {id: MenuId.tenants},
+          {id: MenuId.tenant_profiles},
        ]
      },
      {
@ -802,20 +802,19 @@ const defaultUserMenuMap = new Map<Authority, MenuReference[]>([
        ]
      },
      {
-        id: MenuId.mobile_center,
-        pages: [
-          {id: MenuId.mobile_bundles},
-          {id: MenuId.mobile_apps},
-          {id: MenuId.mobile_qr_code_widget}
-        ]
-      },
-      {
-        id: MenuId.settings,
+        id: MenuId.resources,
        pages: [
-          {id: MenuId.general},
-          {id: MenuId.mail_server},
-          {id: MenuId.notification_settings},
-          {id: MenuId.queues}
+          {
+            id: MenuId.widget_library,
+            pages: [
+              {id: MenuId.widget_types},
+              {id: MenuId.widgets_bundles}
+            ]
+          },
+          {id: MenuId.images},
+          {id: MenuId.scada_symbols},
+          {id: MenuId.javascript_library},
+          {id: MenuId.resources_library}
        ]
      },
      {
@ -832,6 +831,23 @@ const defaultUserMenuMap = new Map<Authority, MenuReference[]>([
          },
          {id: MenuId.audit_log}
        ]
+      },
+      {
+        id: MenuId.settings,
+        pages: [
+          {id: MenuId.general},
+          {id: MenuId.mail_server},
+          {id: MenuId.notification_settings},
+          {id: MenuId.queues}
+        ]
+      },
+      {
+        id: MenuId.mobile_center,
+        pages: [
+          {id: MenuId.mobile_bundles},
+          {id: MenuId.mobile_apps},
+          {id: MenuId.mobile_qr_code_widget}
+        ]
      }
    ]
  ],
--- a/ui-ngx/src/app/modules/home/menu/menu-toggle.component.ts
+++ b/ui-ngx/src/app/modules/home/menu/menu-toggle.component.ts
@ -64,7 +64,13 @@ export class MenuToggleComponent {

  toggleSectionActive(): boolean {
    if (this.collapsed) {
-      return this.router.isActive(this.router.parseUrl(this.section.path), {paths: 'subset', queryParams: 'ignored', matrixParams: 'ignored', fragment: 'ignored'});
+      let active = this.router.isActive(this.router.parseUrl(this.section.path), {paths: 'subset', queryParams: 'ignored', matrixParams: 'ignored', fragment: 'ignored'});
+      if (!active) {
+        const found = this.section.pages.find(page =>
+          this.router.isActive(this.router.parseUrl(page.path), {paths: 'subset', queryParams: 'ignored', matrixParams: 'ignored', fragment: 'ignored'}));
+        active = !!found;
+      }
+      return active;
    } else {
      return false;
    }
--- a/ui-ngx/src/app/modules/home/pages/admin/admin-routing.module.ts
+++ b/ui-ngx/src/app/modules/home/pages/admin/admin-routing.module.ts
@ -103,7 +103,7 @@ const routes: Routes = [
            component: ImageGalleryComponent,
            data: {
              auth: [Authority.TENANT_ADMIN, Authority.SYS_ADMIN],
-              title: 'image.gallery',
+              title: 'image.images',
              imageSubType: ResourceSubType.IMAGE
            }
          }
@ -157,7 +157,7 @@ const routes: Routes = [
            component: EntitiesTableComponent,
            data: {
              auth: [Authority.TENANT_ADMIN, Authority.SYS_ADMIN],
-              title: 'resource.resources-library',
+              title: 'resource.files',
            },
            resolve: {
              entitiesTableConfig: ResourcesLibraryTableConfigResolver
@ -194,7 +194,7 @@ const routes: Routes = [
            component: EntitiesTableComponent,
            data: {
              auth: [Authority.TENANT_ADMIN, Authority.SYS_ADMIN],
-              title: 'javascript.javascript-library',
+              title: 'javascript.scripts',
            },
            resolve: {
              entitiesTableConfig: JsLibraryTableConfigResolver
--- a/ui-ngx/src/app/modules/home/pages/admin/resource/js-library-table-config.resolver.ts
+++ b/ui-ngx/src/app/modules/home/pages/admin/resource/js-library-table-config.resolver.ts
@ -92,7 +92,7 @@ export class JsLibraryTableConfigResolver  {
    this.config.columns.push(
      new DateEntityTableColumn<ResourceInfo>('createdTime', 'common.created-time', this.datePipe, '150px'),
      new EntityTableColumn<ResourceInfo>('title', 'resource.title', '60%'),
-      new EntityTableColumn<ResourceInfo>('resourceSubType', 'javascript.javascript-type', '40%',
+      new EntityTableColumn<ResourceInfo>('resourceSubType', 'javascript.script-type', '40%',
        entity => this.translate.instant(ResourceSubTypeTranslationMap.get(entity.resourceSubType))),
      new EntityTableColumn<ResourceInfo>('tenantId', 'resource.system', '60px',
        entity => checkBoxCell(entity.tenantId.id === NULL_UUID)),
@ -144,7 +144,7 @@ export class JsLibraryTableConfigResolver  {
  }

  resolve(): EntityTableConfig<Resource, PageLink, ResourceInfo> {
-    this.config.tableTitle = this.translate.instant('javascript.javascript-library');
+    this.config.tableTitle = this.translate.instant('javascript.scripts');
    this.config.componentsData = {
      resourceSubType: ''
    };
--- a/ui-ngx/src/app/modules/home/pages/admin/resource/js-library-table-header.component.html
+++ b/ui-ngx/src/app/modules/home/pages/admin/resource/js-library-table-header.component.html
@ -16,7 +16,7 @@

 -->
 <mat-form-field class="mat-block" subscriptSizing="dynamic">
-  <mat-label translate>javascript.javascript-type</mat-label>
+  <mat-label translate>javascript.script-type</mat-label>
  <mat-select [ngModel]="entitiesTableConfig.componentsData.resourceSubType"
              (ngModelChange)="jsResourceSubTypeChanged($event)"
              placeholder="{{ 'javascript.javascript-type' | translate }}">
--- a/ui-ngx/src/app/modules/home/pages/admin/resource/js-resource.component.html
+++ b/ui-ngx/src/app/modules/home/pages/admin/resource/js-resource.component.html
@ -49,7 +49,7 @@
  <form [formGroup]="entityForm">
    <fieldset [disabled]="(isLoading$ | async) || !isEdit">
      <mat-form-field class="mat-block" appearance="outline">
-        <mat-label translate>javascript.javascript-type</mat-label>
+        <mat-label translate>javascript.script-type</mat-label>
        <mat-select formControlName="resourceSubType" required>
          @for (resourceSubType of jsResourceSubTypes; track resourceSubType) {
            <mat-option [value]="resourceSubType">
--- a/ui-ngx/src/app/modules/home/pages/admin/resource/resources-library-table-config.resolve.ts
+++ b/ui-ngx/src/app/modules/home/pages/admin/resource/resources-library-table-config.resolve.ts
@ -149,7 +149,7 @@ export class ResourcesLibraryTableConfigResolver  {
  }

  resolve(): EntityTableConfig<Resource, PageLink, ResourceInfo> {
-    this.config.tableTitle = this.translate.instant('resource.resources-library');
+    this.config.tableTitle = this.translate.instant('resource.files');
    this.config.componentsData = {
      resourceType: ''
    };
--- a/ui-ngx/src/app/shared/components/image/image-gallery.component.html
+++ b/ui-ngx/src/app/shared/components/image/image-gallery.component.html
@ -23,7 +23,7 @@
      <div class="flex flex-1 flex-row items-center justify-start">
        <div class="mat-toolbar-tools">
          <div class="tb-images-title lt-md:!hidden">
-            <div tbTruncateWithTooltip>{{ (isScada ? 'scada.symbols' : 'image.gallery') | translate }}</div>
+            <div tbTruncateWithTooltip>{{ (isScada ? 'scada.symbols' : 'image.images') | translate }}</div>
            @if (isScada) {
              <div tb-help="scada"></div>
            }
--- a/ui-ngx/src/assets/locale/locale.constant-en_US.json
+++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json
@ -100,6 +100,7 @@
    },
    "admin": {
        "settings": "Settings",
+        "platform": "Platform",
        "general": "General",
        "general-settings": "General Settings",
        "home-settings": "Home Settings",
@ -3705,6 +3706,7 @@
        "browse-files": "Browse files"
    },
    "image": {
+        "images": "Images",
        "gallery": "Image gallery",
        "search": "Search image",
        "selected-images": "{ count, plural, =1 {1 image} other {# images} } selected",
@ -4668,6 +4670,7 @@
        "min-version": "Min version",
        "invalid-version-pattern": "Invalid version format. Please use the format: major.minor.patch (e.g., 1.0.0).",
        "mobile-center": "Mobile center",
+        "mobile-apps": "Mobile apps",
        "mobile-package": "Application package",
        "mobile-package-max-length": "Application package should be less than 256",
        "mobile-package-required": "Application package is required.",
@ -4899,6 +4902,7 @@
        "create-new-template": "Create a new one!",
        "not-found-slack-recipient": "Slack recipient not found",
        "notification": "Notification",
+        "notifications": "Notifications",
        "notification-center": "Notification center",
        "notification-tap-action": "Notification tap action",
        "notification-tap-action-hint": "If not enabled, the default alarm dashboard will be used",
@ -5310,6 +5314,7 @@
        "resource-library-details": "Resource details",
        "resource-type": "Resource type",
        "resources-library": "Resources library",
+        "files": "Files",
        "search": "Search resources",
        "selected-resources": "{ count, plural, =1 {1 resource} other {# resources} } selected",
        "system": "System",
@ -5352,6 +5357,8 @@
        "drop-resource-file-or": "Drag and drop a JavaScript file or",
        "javascript-library": "JavaScript library",
        "javascript-type": "JavaScript type",
+        "scripts": "Scripts",
+        "script-type": "Script type",
        "javascript-resource-details": "JavaScript resource details",
        "javascript-resource-is-in-use": "JavaScript resource is used by other entities",
        "javascript-resources-are-in-use": "JavaScript resources are used by other entities",