feat: fix filter sorting

onecx · Feb 27, 2024 · c9b48d0 · c9b48d0
1 parent 1192550
commit c9b48d0
Show file tree

Hide file tree

Showing 5 changed files with 70 additions and 24 deletions.
diff --git a/src/app/permission/app-detail/app-detail.component.html b/src/app/permission/app-detail/app-detail.component.html
@@ -112,7 +112,7 @@
           <tr>
             <th
               [attr.colspan]="
-                myPermissions.includes('PERMISSION#EDIT') || myPermissions.includes('PERMISSION#DELETE') ? 5 : 4
+                myPermissions.includes('PERMISSION#EDIT') || myPermissions.includes('PERMISSION#DELETE') ? 4 : 3
               "
               class="opacity-80 text-center border-right-primary"
               [ngClass]="
@@ -128,7 +128,7 @@
               </div>
             </th>
             <th
-              *ngIf="currentApp.appType === 'WORKSPACE'"
+              *ngIf="!currentApp.isApp"
               [attr.colspan]="roles.length"
               class="py-0 opacity-80 text-center"
               [title]="'ROLE.TOOLTIP' | translate"
@@ -164,10 +164,11 @@
               spSortableColumn="productName"
               class="pt-2 pb-1 px-2 vertical-align-bottom border-bottom-primary white-space-nowrap"
             >
-              <div class="flex">
+              <label *ngIf="currentApp.isApp"> {{ 'PERMISSION.SEARCH.FILTER.PRODUCT' | translate }}</label>
+              <div *ngIf="!currentApp.isApp" class="flex">
                 <span #workspaceProductFilter class="p-float-label inline-block w-full">
                   <p-dropdown
-                    id="app_detail_permission_table_product_name"
+                    id="app_detail_permission_table_filter_product_name"
                     styleClass="w-full"
                     [appendTo]="'body'"
                     [options]="workspaceProductFilterItems"
@@ -176,14 +177,24 @@
                     [emptyMessage]="'ACTIONS.SEARCH.NO_DATA' | translate"
                     [title]="'PERMISSION.SEARCH.FILTER.PRODUCT.TOOLTIP' | translate"
                   ></p-dropdown>
-                  <label for="app_detail_permission_table_product_name">
+                  <label for="app_detail_permission_table_filter_product_name">
                     {{ 'PERMISSION.SEARCH.FILTER.PRODUCT' | translate }}</label
                   >
                 </span>
+                <button
+                  pbutton
+                  type="button"
+                  [id]="'app_detail_permission_table_sort_product_name'"
+                  (click)="onFilterItemSortAppId($event, sortIconProduct)"
+                  [title]="'PERMISSION.SORT.PRODUCT' | translate"
+                  class="p-2 mr-0 p-button-rounded font-medium p-button-text p-button p-component p-button-icon-only"
+                >
+                  <span #sortIconProduct class="pi pi-fw pi-sort-alt"></span>
+                </button>
               </div>
             </th>
             <th
-              *ngIf="!currentApp.isApp"
+              *ngIf="!currentApp.isApp && false"
               spSortableColumn="appType"
               class="pt-2 pb-1 px-2 vertical-align-bottom border-bottom-primary white-space-nowrap"
             >
@@ -209,10 +220,11 @@
               spSortableColumn="applicationId"
               class="pt-2 pb-1 px-2 vertical-align-bottom border-bottom-primary border-right-primary white-space-nowrap"
             >
-              <div class="flex">
+              <label *ngIf="currentApp.isApp"> {{ 'PERMISSION.SEARCH.FILTER.APPS' | translate }}</label>
+              <div *ngIf="!currentApp.isApp" class="flex">
                 <span #workspaceAppFilter class="p-float-label inline-block">
                   <p-dropdown
-                    id="app_detail_permission_table_apps"
+                    id="app_detail_permission_table_filter_app_id"
                     styleClass="w-full"
                     [appendTo]="'body'"
                     [showClear]="true"
@@ -222,19 +234,19 @@
                     (onClear)="onFilterWorkspaceApps()"
                     [emptyMessage]="'ACTIONS.SEARCH.NO_DATA' | translate"
                   ></p-dropdown>
-                  <label for="app_detail_permission_table_apps">
+                  <label for="app_detail_permission_table_filter_app_id">
                     {{ 'PERMISSION.SEARCH.FILTER.APPS' | translate }}</label
                   >
                 </span>
                 <button
                   pbutton
                   type="button"
-                  [id]="'app_detail_permission_table_sort_action'"
-                  (click)="onWorkspaceAppFilterItemSort($event, appSortIcon)"
+                  [id]="'app_detail_permission_table_sort_app_id'"
+                  (click)="onFilterItemSortAppId($event, sortIconAppId)"
                   [title]="'PERMISSION.SORT.APP_ID' | translate"
                   class="p-2 mr-0 p-button-rounded font-medium p-button-text p-button p-component p-button-icon-only"
                 >
-                  <span #appSortIcon class="pi pi-fw pi-sort-alt"></span>
+                  <span #sortIconAppId class="pi pi-fw pi-sort-alt"></span>
                 </button>
               </div>
             </th>
@@ -312,14 +324,18 @@
               <div class="mt-1 text-xs">{{ limitText(rowData.description, 60) }}</div>
             </td>
             <td class="text-left px-2" id="app_detail_permission_table_data_product_name">{{ rowData.productName }}</td>
-            <td *ngIf="!currentApp.isApp" class="text-left px-2" id="app_detail_permission_table_data_app_type">
-              {{ rowData.appType }} app type
+            <td
+              *ngIf="!currentApp.isApp && false"
+              class="text-left px-2"
+              id="app_detail_permission_table_data_app_type"
+            >
+              {{ rowData.appType }}
             </td>
             <td class="text-left px-2 border-right-primary" id="app_detail_permission_table_data_app_id">
               {{ rowData.appId }}
             </td>
             <!-- ASSIGNMENTS -->
-            <ng-container *ngIf="currentApp.appType === 'WORKSPACE'">
+            <ng-container *ngIf="!currentApp.isApp">
               <td
                 *ngFor="let role of columns"
                 class="text-center"

diff --git a/src/app/permission/app-detail/app-detail.component.ts b/src/app/permission/app-detail/app-detail.component.ts
@@ -69,7 +69,8 @@ export class AppDetailComponent implements OnInit, OnDestroy {
   @ViewChild('workspaceProductFilter') workspaceProductFilter: ElementRef | undefined
   @ViewChild('workspaceAppTypeFilter') workspaceAppTypeFilter: ElementRef | undefined
   @ViewChild('workspaceAppFilter') workspaceAppFilter: ElementRef | undefined
-  @ViewChild('appSortIcon') appSortIcon: ElementRef | undefined
+  @ViewChild('sortIconAppId') sortIconAppId: ElementRef | undefined
+  @ViewChild('sortIconProduct') sortIconProduct: ElementRef | undefined
 
   // data
   public urlParamAppId = ''
@@ -477,9 +478,10 @@ export class AppDetailComponent implements OnInit, OnDestroy {
     this.permissionTable?.clear()
   }
   public onSortPermissionTable() {
-    if (this.appSortIcon) this.appSortIcon.nativeElement.className = 'pi pi-fw pi-sort-alt' // reset icon
+    if (this.sortIconAppId) this.sortIconAppId.nativeElement.className = 'pi pi-fw pi-sort-alt' // reset icon
+    if (this.sortIconProduct) this.sortIconProduct.nativeElement.className = 'pi pi-fw pi-sort-alt' // reset icon
   }
-  public onWorkspaceAppFilterItemSort(ev: any, icon: HTMLSpanElement) {
+  private onFilterItemSortIcon(ev: any, icon: HTMLSpanElement) {
     ev.stopPropagation
     icon.className =
       'pi pi-fw ' +
@@ -489,13 +491,23 @@ export class AppDetailComponent implements OnInit, OnDestroy {
         ? 'pi-sort-amount-down'
         : 'pi-sort-amount-up-alt')
     this.permissionTable?.clear()
-    // sort table data directly
+  }
+  public onFilterItemSortAppId(ev: any, icon: HTMLSpanElement) {
+    this.onFilterItemSortIcon(ev, icon)
     this.permissionTable?._value.sort(
       icon.className.match('pi-sort-amount-up-alt')
         ? this.sortPermissionRowByAppIdAsc
         : this.sortPermissionRowByAppIdDesc
     )
   }
+  public onFilterItemSortProduct(ev: any, icon: HTMLSpanElement) {
+    this.onFilterItemSortIcon(ev, icon)
+    this.permissionTable?._value.sort(
+      icon.className.match('pi-sort-amount-up-alt')
+        ? this.sortPermissionRowByProductAsc
+        : this.sortPermissionRowByProductDesc
+    )
+  }
   public onFilterWorkspaceApps() {
     this.workspaceAppFilterValue = this.currentApp.appId
     if (this.permissionTable) {
@@ -549,10 +561,8 @@ export class AppDetailComponent implements OnInit, OnDestroy {
     this.role = role
     this.changeMode = 'DELETE'
     this.showRoleDeleteDialog = true
-    this.log('onDeleteRole')
   }
   public onRoleChanged(changed: boolean) {
-    this.log('onRoleChanged ' + changed)
     this.role = undefined
     this.changeMode = 'VIEW'
     this.showRoleDetailDialog = false
@@ -583,6 +593,7 @@ export class AppDetailComponent implements OnInit, OnDestroy {
   private sortPermissionRowByKey(a: PermissionViewRow, b: PermissionViewRow): number {
     return (a.key ? (a.key as string).toUpperCase() : '').localeCompare(b.key ? (b.key as string).toUpperCase() : '')
   }
+
   private sortPermissionRowByAppIdAsc(a: PermissionViewRow, b: PermissionViewRow): number {
     return (a.appId ? (a.appId as string).toUpperCase() : '').localeCompare(
       b.appId ? (b.appId as string).toUpperCase() : ''
@@ -593,6 +604,21 @@ export class AppDetailComponent implements OnInit, OnDestroy {
       b.appId ? (b.appId as string).toUpperCase() : ''
     )
   }
+  private sortPermissionRowByProductAsc(a: PermissionViewRow, b: PermissionViewRow): number {
+    return (
+      (a.productName ? (a.productName as string).toUpperCase() : '').localeCompare(
+        b.productName ? (b.productName as string).toUpperCase() : ''
+      ) || this.sortPermissionRowByAppIdAsc(a, b)
+    )
+  }
+  private sortPermissionRowByProductDesc(b: PermissionViewRow, a: PermissionViewRow): number {
+    return (
+      (a.productName ? (a.productName as string).toUpperCase() : '').localeCompare(
+        b.productName ? (b.productName as string).toUpperCase() : ''
+      ) || this.sortPermissionRowByAppIdDesc(a, b)
+    )
+  }
+
   private sortRoleByName(a: Role, b: Role): number {
     return (a.name ? (a.name as string).toUpperCase() : '').localeCompare(
       b.name ? (b.name as string).toUpperCase() : ''

diff --git a/src/app/permission/app-search/app-search.component.ts b/src/app/permission/app-search/app-search.component.ts
@@ -67,7 +67,7 @@ export class AppSearchComponent implements OnInit, OnDestroy {
       appId: new FormControl<string | null>(null),
       appType: new FormControl<AppFilterType | null>('WORKSPACE')
     })
-    this.appSearchCriteriaGroup.controls['appType'].setValue('WORKSPACE') // default: all app types
+    this.appSearchCriteriaGroup.controls['appType'].setValue('ALL') // default: all app types
     this.appTypeItems = [
       { label: 'APP.SEARCH.FILTER.ALL', value: 'ALL' },
       { label: 'APP.SEARCH.FILTER.WORKSPACE', value: 'WORKSPACE' },

diff --git a/src/assets/i18n/de.json b/src/assets/i18n/de.json
@@ -172,7 +172,8 @@
       "REVOKE_SUCCESS": "Berechtigung entzogen"
     },
     "SORT": {
-      "APP_ID": "Sortierung nach Apps"
+      "APP_ID": "Sortierung nach App IDs",
+      "PRODUCT": "Sortierung nach Produkt und App IDs"
     },
     "SEARCH": {
       "FILTER": {
@@ -192,6 +193,7 @@
     }
   },
   "ROLE": {
+    "LABEL.APP": "App Rollen",
     "LABEL.WORKSPACE": "Workspace Rollen",
     "TOOLTIP": "Für den Workspace erstellte Rollen, als Auswahl der für den Mandaten definierten Rollen, die dem Benutzer zugeordnet werden können.",
     "NAME": "Name",

diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json
@@ -173,7 +173,8 @@
       "REVOKE_SUCCESS": "Permission revoked"
     },
     "SORT": {
-      "APP_ID": "Sorting by apps"
+      "APP_ID": "Sorting by App IDs",
+      "PRODUCT": "Sorting by Product und App IDs"
     },
     "SEARCH": {
       "FILTER": {
@@ -193,6 +194,7 @@
     }
   },
   "ROLE": {
+    "LABEL.APP": "App Roles",
     "LABEL.WORKSPACE": "Workspace Roles",
     "TOOLTIP": "Roles created for the workspace, as a selection of the roles defined for the tenant that can be assigned to the user.",
     "NAME": "Name",