Optimze menu mgmt (#377)

* fix: optimze menu mgmt * fix: add URI fragments to address tabs * fix: add navigation actions in menu * fix: code cleanup and id harmonization * fix: tests * fix: package-lock.json * fix: tests and switch back to Libs 5.13.0
onecx · Oct 11, 2024 · 06090c7 · 06090c7
1 parent f6c6956
commit 06090c7
Show file tree

Hide file tree

Showing 25 changed files with 264 additions and 190 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -52,17 +52,17 @@
     "@ngrx/router-store": "^18.0.1",
     "@ngx-translate/core": "^15.0.0",
     "@ngx-translate/http-loader": "^8.0.0",
-    "@onecx/accelerator": "^5.13.0",
-    "@onecx/angular-accelerator": "^5.13.0",
-    "@onecx/angular-auth": "^5.13.0",
-    "@onecx/angular-integration-interface": "^5.13.0",
-    "@onecx/angular-remote-components": "^5.13.0",
-    "@onecx/angular-testing": "^5.13.0",
-    "@onecx/angular-webcomponents": "^5.13.0",
-    "@onecx/integration-interface": "^5.13.0",
-    "@onecx/keycloak-auth": "^5.13.0",
-    "@onecx/portal-integration-angular": "^5.13.0",
-    "@onecx/portal-layout-styles": "^5.13.0",
+    "@onecx/accelerator": "5.13.0",
+    "@onecx/angular-accelerator": "5.13.0",
+    "@onecx/angular-auth": "5.13.0",
+    "@onecx/angular-integration-interface": "5.13.0",
+    "@onecx/angular-remote-components": "5.13.0",
+    "@onecx/angular-testing": "5.13.0",
+    "@onecx/angular-webcomponents": "5.13.0",
+    "@onecx/integration-interface": "5.13.0",
+    "@onecx/keycloak-auth": "5.13.0",
+    "@onecx/portal-integration-angular": "5.13.0",
+    "@onecx/portal-layout-styles": "5.13.0",
     "@webcomponents/webcomponentsjs": "^2.8.0",
     "file-saver": "^2.0.5",
     "keycloak-angular": "^16.0.1",

diff --git a/src/app/remotes/footer-menu/footer-menu.component.html b/src/app/remotes/footer-menu/footer-menu.component.html
@@ -1,6 +1,17 @@
-<ul class="ml-0 sm:ml-6 list-none flex flex-row gap-4 text-xs m-0 p-0" *ngIf="menuItems$ | async as menuItems">
-  <li *ngFor="let item of menuItems; let i = index">
-    <a id="footer-{{ item.id }}-href" *ngIf="!item.routerLink && item.url" [attr.href]="item.url"> {{ item.label }} </a>
-    <a id="footer-{{ item.id }}-router" *ngIf="item.routerLink" [routerLink]="item.routerLink"> {{ item.label }} </a>
+<ul
+  *ngIf="menuItems$ | async as menuItems"
+  class="m-0 p-0 ml-2 sm:ml-6 text-xs list-none flex flex-row column-gap-3 row-gap-2"
+>
+  <li *ngFor="let item of menuItems">
+    <a
+      id="ws_footer_{{ item.id?.toLocaleLowerCase() }}_href"
+      *ngIf="!item.routerLink && item.url"
+      [attr.href]="item.url"
+    >
+      {{ item.label }}
+    </a>
+    <a id="ws_footer_{{ item.id?.toLocaleLowerCase() }}_link" *ngIf="item.routerLink" [routerLink]="item.routerLink">
+      {{ item.label }}
+    </a>
   </li>
 </ul>
diff --git a/src/app/remotes/footer-menu/footer-menu.component.spec.ts b/src/app/remotes/footer-menu/footer-menu.component.spec.ts
@@ -146,13 +146,13 @@ describe('OneCXFooterMenuComponent', () => {
     const menuItems = await oneCXFooterMenuHarness.getMenuItems()
     expect(menuItems.length).toEqual(2)
 
-    const translatedItem = await oneCXFooterMenuHarness.getMenuItem('footer-FOOTER_CONTACT-router')
+    const translatedItem = await oneCXFooterMenuHarness.getMenuItem('ws_footer_footer_contact_link')
     expect(translatedItem).toBeTruthy()
     expect(await translatedItem?.text()).toEqual('English Contact value')
     await translatedItem?.click()
     expect(router.url).toBe('/contact')
 
-    const nameItem = await oneCXFooterMenuHarness.getMenuItem('footer-FOOTER_CONTACT_ONLY_NAME-router')
+    const nameItem = await oneCXFooterMenuHarness.getMenuItem('ws_footer_footer_contact_only_name_link')
     expect(nameItem).toBeTruthy()
     expect(await nameItem?.text()).toEqual('Contact')
     await nameItem?.click()

diff --git a/src/app/remotes/user-avatar-menu/user-avatar-menu.component.html b/src/app/remotes/user-avatar-menu/user-avatar-menu.component.html
@@ -1,10 +1,10 @@
 <div class="flex relative">
   <a
     #userAvatarMenuButton
-    id="ws_user_avatar_menu_button"
+    id="ws_user_avatar_menu_action"
     tabindex="0"
     pRipple
-    class="p-2 rounded-circle cursor-pointer user-avatar-menu-button"
+    class="p-2 rounded-circle cursor-pointer user-avatar-menu-action"
     (click)="handleAvatarClick($event)"
     (keydown.enter)="onAvatarEnter()"
     (keydown.space)="onAvatarEnter()"

diff --git a/src/app/remotes/user-avatar-menu/user-avatar-menu.component.scss b/src/app/remotes/user-avatar-menu/user-avatar-menu.component.scss
@@ -1,4 +1,4 @@
-.user-avatar-menu-button:hover {
+.user-avatar-menu-action:hover {
   background-color: var(--topbar-item-text-hover-bg-color);
   color: var(--topbar-item-text-hover-color, var(--topbar-item-text-color));
   transition: background-color var(--transition-duration);

diff --git a/src/app/shared/image-container/image-container.component.html b/src/app/shared/image-container/image-container.component.html
@@ -5,7 +5,7 @@
   [ocxSrc]="displayImageUrl"
   (error)="onImageError()"
   [alt]="'DIALOG.LOGO.LABEL' | translate"
-  [pTooltip]="title ? title : ('DIALOG.LOGO.LABEL' | translate)"
+  [pTooltip]="title"
   tooltipPosition="top"
   tooltipEvent="hover"
 />
@@ -15,7 +15,7 @@
   [class]="'image-object image-' + (small ? 'sm' : 'lg') + ' sm:image-lg ' + (styleClass ? styleClass : '')"
   [src]="defaultImageUrl$ | async"
   [alt]="'DIALOG.LOGO.PLACEHOLDER' | translate"
-  [pTooltip]="title ? title : ('DIALOG.LOGO.PLACEHOLDER' | translate)"
+  [pTooltip]="title"
   tooltipPosition="top"
   tooltipEvent="hover"
 />
diff --git a/src/app/workspace/workspace-detail/workspace-contact/workspace-contact.component.html b/src/app/workspace/workspace-detail/workspace-contact/workspace-contact.component.html
@@ -6,98 +6,98 @@
           <input
             pInputText
             type="text"
-            id="workspace_detail_item_companyName"
+            id="ws_detail_contact_item_companyName"
             class="w-full pt-3 pb-2"
             formControlName="companyName"
             [pTooltip]="'WORKSPACE.COMPANY_NAME' | translate"
             tooltipPosition="top"
             tooltipEvent="hover"
           />
-          <label for="workspace_detail_item_companyName">{{ 'WORKSPACE.COMPANY_NAME' | translate }}</label>
+          <label for="ws_detail_item_companyName">{{ 'WORKSPACE.COMPANY_NAME' | translate }}</label>
         </span>
 
         <span class="p-float-label mb-1" controlErrorAnchor>
           <input
             pInputText
             type="text"
-            id="workspace_detail_item_phoneNumber"
+            id="ws_detail_contact_item_phoneNumber"
             class="w-full pt-3 pb-2"
             formControlName="phoneNumber"
             [pTooltip]="'WORKSPACE.PHONE_NUMBER' | translate"
             tooltipPosition="top"
             tooltipEvent="hover"
           />
-          <label for="workspace_detail_item_phoneNumber">{{ 'WORKSPACE.PHONE_NUMBER' | translate }}</label>
+          <label for="ws_detail_item_phoneNumber">{{ 'WORKSPACE.PHONE_NUMBER' | translate }}</label>
         </span>
 
         <span class="p-float-label mb-1" controlErrorAnchor>
           <input
             pInputText
             type="text"
-            id="workspace_detail_item_street"
+            id="ws_detail_contact_item_street"
             class="w-full pt-3 pb-2"
             formControlName="street"
             [pTooltip]="'WORKSPACE.STREET' | translate"
             tooltipPosition="top"
             tooltipEvent="hover"
           />
-          <label for="workspace_detail_item_street">{{ 'WORKSPACE.STREET' | translate }}</label>
+          <label for="ws_detail_item_street">{{ 'WORKSPACE.STREET' | translate }}</label>
         </span>
 
         <span class="p-float-label mb-1" controlErrorAnchor>
           <input
             pInputText
             type="text"
-            id="workspace_detail_item_street_no"
+            id="ws_detail_contact_item_street_no"
             class="w-full pt-3 pb-2"
             formControlName="streetNo"
             [pTooltip]="'WORKSPACE.STREET_NO' | translate"
             tooltipPosition="top"
             tooltipEvent="hover"
           />
-          <label for="workspace_detail_item_street_no">{{ 'WORKSPACE.STREET_NO' | translate }}</label>
+          <label for="ws_detail_item_street_no">{{ 'WORKSPACE.STREET_NO' | translate }}</label>
         </span>
 
         <span class="p-float-label mb-1" controlErrorAnchor>
           <input
             pInputText
             type="text"
-            id="workspace_detail_item_city"
+            id="ws_detail_contact_item_city"
             class="w-full pt-3 pb-2"
             formControlName="city"
             [pTooltip]="'WORKSPACE.CITY' | translate"
             tooltipPosition="top"
             tooltipEvent="hover"
           />
-          <label for="workspace_detail_item_city">{{ 'WORKSPACE.CITY' | translate }}</label>
+          <label for="ws_detail_item_city">{{ 'WORKSPACE.CITY' | translate }}</label>
         </span>
 
         <span class="p-float-label mb-1" controlErrorAnchor>
           <input
             pInputText
             type="text"
-            id="workspace_detail_item_postalCode"
+            id="ws_detail_contact_item_postalCode"
             class="w-full pt-3 pb-2"
             formControlName="postalCode"
             [pTooltip]="'WORKSPACE.POSTAL_CODE' | translate"
             tooltipPosition="top"
             tooltipEvent="hover"
           />
-          <label for="workspace_detail_item_postalCode">{{ 'WORKSPACE.POSTAL_CODE' | translate }}</label>
+          <label for="ws_detail_item_postalCode">{{ 'WORKSPACE.POSTAL_CODE' | translate }}</label>
         </span>
 
         <span class="p-float-label mb-1" controlErrorAnchor>
           <input
             pInputText
             type="text"
-            id="workspace_detail_item_country"
+            id="ws_detail_contact_item_country"
             class="w-full pt-3 pb-2"
             formControlName="country"
             [pTooltip]="'WORKSPACE.COUNTRY' | translate"
             tooltipPosition="top"
             tooltipEvent="hover"
           />
-          <label for="workspace_detail_item_country">{{ 'WORKSPACE.COUNTRY' | translate }}</label>
+          <label for="ws_detail_item_country">{{ 'WORKSPACE.COUNTRY' | translate }}</label>
         </span>
       </div>
     </form>

diff --git a/src/app/workspace/workspace-detail/workspace-detail.component.ts b/src/app/workspace/workspace-detail/workspace-detail.component.ts
@@ -41,6 +41,7 @@ export class WorkspaceDetailComponent implements OnInit, AfterViewInit {
   public workspaceForSlots: Workspace | undefined
   public workspaceForProducts: Workspace | undefined
   public workspaceName = this.route.snapshot.params['name']
+  private uriFragment = this.route.snapshot.fragment // #fragment to address a certain TAB
   public workspaceDeleteMessage = ''
   public workspaceDeleteVisible = false
   public workspaceExportVisible = false
@@ -77,6 +78,7 @@ export class WorkspaceDetailComponent implements OnInit, AfterViewInit {
       map((data) => {
         if (data.resource) this.workspace = data.resource
         this.currentLogoUrl = this.getLogoUrl(data.resource)
+        this.goToTab(data.resource)
         return data
       }),
       catchError((err) => {
@@ -145,6 +147,18 @@ export class WorkspaceDetailComponent implements OnInit, AfterViewInit {
   /**
    * UI EVENTS
    */
+  // triggered by URI
+  private goToTab(workspace: Workspace | undefined) {
+    if (workspace && this.uriFragment) {
+      const tabMap = new Map([
+        ['roles', 3],
+        ['slots', 4],
+        ['products', 5]
+      ])
+      this.onTabChange({ index: tabMap.get(this.uriFragment) }, workspace)
+    }
+  }
+  // activate TAB
   public onTabChange($event: any, workspace: Workspace | undefined) {
     if (workspace) {
       this.showOperatorMessage = false

diff --git a/src/app/workspace/workspace-detail/workspace-intern/workspace-intern.component.html b/src/app/workspace/workspace-detail/workspace-intern/workspace-intern.component.html
@@ -2,7 +2,7 @@
   <div class="ml-3 flex flex-row flex-wrap justify-content-start align-items-center column-gap-8 row-gap-2 mb-4">
     <p-checkbox
       type="text"
-      inputId="ws_detail_item_operator"
+      inputId="ws_detail_intern_item_operator"
       styleClass="cursor-auto shadow-none"
       [(ngModel)]="operator"
       [binary]="true"
@@ -15,7 +15,7 @@
     ></p-checkbox>
     <p-checkbox
       type="text"
-      inputId="ws_detail_item_mandatory"
+      inputId="ws_detail_intern_item_mandatory"
       styleClass="cursor-auto shadow-none"
       [(ngModel)]="mandatory"
       [binary]="true"
@@ -35,14 +35,14 @@
           pInputText
           type="text"
           readonly
-          id="ws_detail_item_name"
+          id="ws_detail_intern_intern_item_name"
           class="w-full pt-3 pb-2 text-responsive"
           [value]="workspace.name"
           [pTooltip]="'WORKSPACE.TOOLTIPS.NAME' | translate"
           tooltipPosition="top"
           tooltipEvent="hover"
         />
-        <label for="ws_detail_item_name">{{ 'WORKSPACE.NAME' | translate }}</label>
+        <label for="ws_detail_intern_item_name">{{ 'WORKSPACE.NAME' | translate }}</label>
       </span>
     </div>
 
@@ -53,14 +53,14 @@
             pInputText
             type="text"
             readonly
-            id="ws_detail_item_creation-date"
+            id="ws_detail_intern_intern_item_creation-date"
             class="w-full pt-3 pb-2 text-responsive"
             [value]="workspace.creationDate | date: dateFormat"
             [pTooltip]="'INTERNAL.TOOLTIPS.CREATION_DATE' | translate"
             tooltipPosition="top"
             tooltipEvent="hover"
           />
-          <label for="ws_detail_item_creation-date">{{ 'INTERNAL.CREATION_DATE' | translate }}</label>
+          <label for="ws_detail_intern_item_creation-date">{{ 'INTERNAL.CREATION_DATE' | translate }}</label>
         </span>
       </div>
 
@@ -70,14 +70,14 @@
             pInputText
             type="text"
             readonly
-            id="ws_detail_item_creation-user"
+            id="ws_detail_intern_intern_item_creation-user"
             class="w-full pt-3 pb-2 text-responsive"
             [value]="workspace.creationUser"
             [pTooltip]="'INTERNAL.TOOLTIPS.CREATION_USER' | translate"
             tooltipPosition="top"
             tooltipEvent="hover"
           />
-          <label for="ws_detail_item_creation-user">{{ 'INTERNAL.CREATION_USER' | translate }}</label>
+          <label for="ws_detail_intern_item_creation-user">{{ 'INTERNAL.CREATION_USER' | translate }}</label>
         </span>
       </div>
     </div>
@@ -89,14 +89,14 @@
             pInputText
             type="text"
             readonly
-            id="ws_detail_item_modification-date"
+            id="ws_detail_intern_intern_item_modification-date"
             class="w-full pt-3 pb-2 text-responsive"
             [value]="workspace.modificationDate | date: dateFormat"
             [pTooltip]="'INTERNAL.TOOLTIPS.MODIFICATION_DATE' | translate"
             tooltipPosition="top"
             tooltipEvent="hover"
           />
-          <label for="ws_detail_item_modification-date">{{ 'INTERNAL.MODIFICATION_DATE' | translate }}</label>
+          <label for="ws_detail_intern_item_modification-date">{{ 'INTERNAL.MODIFICATION_DATE' | translate }}</label>
         </span>
       </div>
 
@@ -106,14 +106,14 @@
             pInputText
             type="text"
             readonly
-            id="ws_detail_item_modification-user"
+            id="ws_detail_intern_intern_item_modification-user"
             class="w-full pt-3 pb-2 text-responsive"
             [value]="workspace.modificationUser"
             [pTooltip]="'INTERNAL.TOOLTIPS.MODIFICATION_USER' | translate"
             tooltipPosition="top"
             tooltipEvent="hover"
           />
-          <label for="ws_detail_item_modification-user">{{ 'INTERNAL.MODIFICATION_USER' | translate }}</label>
+          <label for="ws_detail_intern_item_modification-user">{{ 'INTERNAL.MODIFICATION_USER' | translate }}</label>
         </span>
       </div>
     </div>