feat: added role filter in menu (#384)

onecx · Oct 14, 2024 · d917d30 · d917d30
1 parent ce2c199
commit d917d30
Show file tree

Hide file tree

Showing 5 changed files with 55 additions and 20 deletions.
diff --git a/src/app/workspace/workspace-menu/menu.component.html b/src/app/workspace/workspace-menu/menu.component.html
@@ -43,7 +43,7 @@
       #menuTree
       id="ws_menu_table"
       styleClass="px-2 sm:px-3 mb-3"
-      [columns]="wRoles"
+      [columns]="wRolesFiltered"
       [value]="menuNodes"
       [globalFilterFields]="['name', 'url']"
       (onNodeCollapse)="onHierarchyViewChange($event)"
@@ -161,18 +161,35 @@
             class="py-2 px-2 pl-4 vertical-align-top text-left border-transparent"
             [attr.colspan]="displayRoles ? 1 + columns.length : 6"
           >
-            <p-toggleButton
-              inputid="ws_menu_table_header_row_1_switch_details_n_roles"
-              styleClass="data-view-control hidden-xs"
-              [onLabel]="'DIALOG.MENU.HEADER.DETAILS' | translate"
-              [offLabel]="'DIALOG.MENU.HEADER.ROLES' | translate"
-              [(ngModel)]="treeTableContentValue"
-              (onChange)="onToggleTreeTableContent($event)"
-              [attr.aria-label]="'DIALOG.MENU.HEADER.DETAILS_N_ROLES.TOOLTIP' | translate"
-              [pTooltip]="'DIALOG.MENU.HEADER.DETAILS_N_ROLES.TOOLTIP' | translate"
-              tooltipPosition="top"
-              tooltipEvent="hover"
-            />
+            <div class="flex flex-row justify-content-start align-items-center column-gap-4">
+              <p-toggleButton
+                inputid="ws_menu_table_header_row_1_switch_details_n_roles"
+                styleClass="data-view-control hidden-xs"
+                [onLabel]="'DIALOG.MENU.HEADER.DETAILS' | translate"
+                [offLabel]="'DIALOG.MENU.HEADER.ROLES' | translate"
+                [(ngModel)]="treeTableContentValue"
+                (onChange)="onToggleTreeTableContent($event)"
+                [ariaLabel]="'DIALOG.MENU.HEADER.DETAILS_N_ROLES.TOOLTIP' | translate"
+                [pTooltip]="'DIALOG.MENU.HEADER.DETAILS_N_ROLES.TOOLTIP' | translate"
+                tooltipPosition="top"
+                tooltipEvent="hover"
+              />
+              <div *ngIf="displayRoles && wRoles.length > 5" class="p-inputgroup h-2rem w-11rem">
+                <span class="p-inputgroup-addon pi pi-filter p-2 text-sm min-w-min"> </span>
+                <input
+                  #roleFilter
+                  pInputText
+                  type="search"
+                  id="ws_menu_table_header_role_filter"
+                  class="py-0 h-2rem text-responsive"
+                  (input)="roleFilterChange(roleFilter.value)"
+                  [placeholder]="'DIALOG.MENU.HEADER.ROLES.FILTER' | translate"
+                  [pTooltip]="'DIALOG.MENU.HEADER.ROLES.FILTER.TOOLTIP' | translate"
+                  tooltipPosition="top"
+                  tooltipEvent="hover"
+                />
+              </div>
+            </div>
           </th>
         </tr>
         <tr id="ws_menu_table_header_row_2">
@@ -187,7 +204,7 @@
               [onLabel]="'ACTIONS.TREE.COLLAPSE_ALL' | translate"
               [offLabel]="'ACTIONS.TREE.EXPAND_ALL' | translate"
               (onChange)="onToggleTreeViewMode($event)"
-              [attr.aria-label]="'ACTIONS.TREE.EXPAND_ALL.TOOLTIP' | translate"
+              [ariaLabel]="'ACTIONS.TREE.EXPAND_ALL.TOOLTIP' | translate"
               [pTooltip]="'ACTIONS.TREE.EXPAND_ALL.TOOLTIP' | translate"
               tooltipPosition="top"
               tooltipEvent="hover"

diff --git a/src/app/workspace/workspace-menu/menu.component.spec.ts b/src/app/workspace/workspace-menu/menu.component.spec.ts
@@ -692,7 +692,7 @@ describe('MenuComponent', () => {
    * ROLES + ASSIGNMENTS
    */
 
-  it('should loadRolesandAssignments -> searchRoles and searchAssignments on loadMenu', () => {
+  it('should loadRolesAndAssignments -> searchRoles and searchAssignments on loadMenu', () => {
     const wRole2: WorkspaceRole = {
       name: 'role name2',
       id: 'role id2',
@@ -702,6 +702,7 @@ describe('MenuComponent', () => {
     wRoleServiceSpy.searchWorkspaceRoles.and.returnValue(of({ stream: [wRole, wRole2] }))
     assgmtApiServiceSpy.searchAssignments.and.returnValue(of({ stream: [assgmt] }))
 
+    component.displayRoles = true
     component.loadMenu(true)
 
     expect(component.wRoles).toEqual([wRole, wRole2])
@@ -721,6 +722,7 @@ describe('MenuComponent', () => {
     wRoleServiceSpy.searchWorkspaceRoles.and.returnValue(of({ stream: [wRole3, wRole2] }))
     assgmtApiServiceSpy.searchAssignments.and.returnValue(of({ stream: [assgmt] }))
 
+    component.displayRoles = true
     component.loadMenu(true)
 
     expect(component.wRoles).toEqual([wRole3, wRole2])
@@ -732,6 +734,7 @@ describe('MenuComponent', () => {
     wRoleServiceSpy.searchWorkspaceRoles.and.returnValue(of({ stream: [wRole] }))
     assgmtApiServiceSpy.searchAssignments.and.returnValue(of({ stream: [assgmt] }))
 
+    component.displayRoles = true
     component.loadMenu(true)
 
     expect(component.wAssignments).toEqual([assgmt])
@@ -748,6 +751,7 @@ describe('MenuComponent', () => {
     wRoleServiceSpy.searchWorkspaceRoles.and.returnValue(of({ stream: [wRole] }))
     assgmtApiServiceSpy.searchAssignments.and.returnValue(of({ stream: [assgmt2] }))
 
+    component.displayRoles = true
     component.loadMenu(true)
 
     expect(component.wAssignments).toEqual([assgmt2])
@@ -760,6 +764,7 @@ describe('MenuComponent', () => {
     menuApiServiceSpy.getMenuStructure.and.returnValue(of({ id: workspace.id, menuItems: mockMenuItems }))
     spyOn(console, 'error')
 
+    component.displayRoles = true
     component.loadMenu(true)
 
     expect(component.exceptionKey).toBe('EXCEPTIONS.HTTP_STATUS_' + '404' + '.ROLES')

diff --git a/src/app/workspace/workspace-menu/menu.component.ts b/src/app/workspace/workspace-menu/menu.component.ts
@@ -64,6 +64,7 @@ export class MenuComponent implements OnInit, OnDestroy {
   @ViewChild('menuTree') menuTree: TreeTable | undefined
   @ViewChild('menuTreeFilter') menuTreeFilter: ElementRef<HTMLInputElement> = {} as ElementRef
   @ViewChild('treeOverlay') treeOverlay: Overlay | undefined
+  @ViewChild('roleFilter') roleFilter: HTMLInputElement | undefined
 
   Object = Object
   limitText = limitText // utils declarations
@@ -83,6 +84,7 @@ export class MenuComponent implements OnInit, OnDestroy {
   public treeNodeLabelSwitchValue = 'NAME'
   public treeNodeLabelSwitchValueOrg = '' // prevent bug in PrimeNG SelectButton
   public currentLogoUrl: string | undefined = undefined
+  public roleFilterValue = ''
 
   // workspace
   public workspace?: Workspace
@@ -91,6 +93,7 @@ export class MenuComponent implements OnInit, OnDestroy {
   private mfeRUrls: Array<string> = []
   public wRoles$!: Observable<WorkspaceRolePageResult>
   public wRoles: WorkspaceRole[] = []
+  public wRolesFiltered: WorkspaceRole[] = []
   public wAssignments$!: Observable<AssignmentPageResult>
   public wAssignments: Assignment[] = []
   // menu
@@ -214,6 +217,7 @@ export class MenuComponent implements OnInit, OnDestroy {
     this.location.back()
   }
   public onReload(): void {
+    this.wRoles = []
     this.loadMenu(true)
   }
   public onGoToWorkspacePermission(): void {
@@ -261,6 +265,7 @@ export class MenuComponent implements OnInit, OnDestroy {
 
   public onToggleTreeTableContent(ev: any): void {
     this.displayRoles = ev.checked
+    this.loadRolesAndAssignments()
   }
   public isObjectEmpty(obj: object) {
     return Object.keys(obj).length === 0
@@ -343,6 +348,9 @@ export class MenuComponent implements OnInit, OnDestroy {
     this.displayMenuDelete = true
   }
 
+  public roleFilterChange(val: string): void {
+    this.wRolesFiltered = this.wRoles.filter((r) => r.name!.indexOf(val) >= 0)
+  }
   /****************************************************************************
    ****************************************************************************
    * TREE + DIALOG
@@ -475,15 +483,16 @@ export class MenuComponent implements OnInit, OnDestroy {
     return (a.name ? a.name.toUpperCase() : '').localeCompare(b.name ? b.name.toUpperCase() : '')
   }
   private loadRolesAndAssignments() {
-    this.wRoles = []
+    if (!this.displayRoles || this.wRoles.length > 0) return
+    this.wRoles = this.wRolesFiltered = []
     this.wAssignments = []
     combineLatest([this.searchRoles(), this.searchAssignments()]).subscribe(([roles, ass]) => {
       roles.sort(this.sortRoleByName)
       this.wRoles = roles
-      //this.wRoles.unshift({})
-      // assignments(role.id, menu.id) => node.roles[role.id] = ass.id
+      this.wRolesFiltered = roles
+      // principle: assignments(role.id, menu.id) => node.roles[role.id] = ass.id
       ass.forEach((ass: Assignment) => {
-        // find affected node ... assign role and inherit
+        // find affected node and assign role
         const assignedNode = this.findTreeNodeById(this.menuNodes, ass.menuItemId)
         if (assignedNode) {
           assignedNode.data.roles[ass.roleId!] = ass.id
@@ -689,7 +698,7 @@ export class MenuComponent implements OnInit, OnDestroy {
 
   // triggered by changes of tree structure in preview
   public onUpdateMenuStructure(changed: boolean): void {
-    this.onReload()
+    this.loadMenu(true)
   }
   public getLogoUrl(workspace: Workspace | undefined): string | undefined {
     if (!workspace) return undefined

diff --git a/src/assets/i18n/de.json b/src/assets/i18n/de.json
@@ -364,6 +364,8 @@
         "DISPLAYED_ITEM": "Anzeigewechsel: Menüpunkt Name / ID / Sprache",
         "DISPLAYED_ITEM.NAME": "Name",
         "DISPLAYED_ITEM.ID": "ID",
+        "ROLES.FILTER": "Rollenfilter",
+        "ROLES.FILTER.TOOLTIP": "Filter für Rollenname",
         "ROLES.MANAGE": "Rollen verwalten",
         "ROLES.NOT_EXIST": "Keine Rollen für den Workspace definiert",
         "PREVIEW.TOOLTIP": "Ansicht in den konfigurierten Sprachen",

diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json
@@ -364,6 +364,8 @@
         "DISPLAYED_ITEM": "Change node label: Menu Item Name / ID / Language",
         "DISPLAYED_ITEM.NAME": "Name",
         "DISPLAYED_ITEM.ID": "ID",
+        "ROLES.FILTER": "Role filter",
+        "ROLES.FILTER.TOOLTIP": "Filter for Role name",
         "ROLES.MANAGE": "Manage Roles",
         "ROLES.NOT_EXIST": "No Workspace Roles defined",
         "PREVIEW.TOOLTIP": "Preview in configured languages",