Improve layout of user permission RC (#259)

* fix: tuning user permission layout * fix: tuning layout of permission rc * fix: filter
onecx · Oct 30, 2024 · 0f5d71a · 0f5d71a
1 parent 9ff4203
commit 0f5d71a
Show file tree

Hide file tree

Showing 5 changed files with 74 additions and 41 deletions.
diff --git a/src/app/remotes/user-roles-permissions/user-roles-permissions.component.html b/src/app/remotes/user-roles-permissions/user-roles-permissions.component.html
@@ -1,3 +1,13 @@
+<div
+  *ngIf="userId"
+  class="absolute user-profile-name"
+  [pTooltip]="'USER_ROLE_PERMISSIONS.USER_PROFILE' | translate"
+  tooltipPosition="top"
+  tooltipEvent="hover"
+>
+  {{ displayName }}
+</div>
+
 <p-tabView *ngIf="(userAssignments$ | async)?.sort(sortUserAssignments) as items">
   <p-tabPanel id="apm_user_assignments">
     <ng-template pTemplate="header">
@@ -20,7 +30,7 @@
       #permissionTable
       [columns]="columns"
       [value]="items"
-      styleClass="p-datatable-striped user-roles-and-permissions"
+      styleClass="p-datatable-striped user-roles-and-permissions px-2 sm:px-3"
       [autoLayout]="true"
       [globalFilterFields]="['productName', 'role', 'resource', 'action']"
       [paginator]="true"
@@ -74,20 +84,18 @@
             >
             </a>
           </div>
-          <div class="ml-3 flex column-gap-2">
-            <p-button
-              type="button"
-              id="apm_user_assignments_table_header_action_reload"
-              styleClass="h-full"
-              icon="pi pi-refresh"
-              (onClick)="onReload()"
-              [ariaLabel]="'ACTIONS.SEARCH.RELOAD' | translate"
-              [pTooltip]="'ACTIONS.SEARCH.RELOAD' | translate"
-              tooltipPosition="top"
-              tooltipEvent="hover"
-            >
-            </p-button>
-          </div>
+          <p-button
+            type="button"
+            id="apm_user_assignments_table_header_action_reload"
+            styleClass="h-full sm:ml-3"
+            icon="pi pi-refresh"
+            (onClick)="onReload()"
+            [ariaLabel]="'ACTIONS.SEARCH.RELOAD' | translate"
+            [pTooltip]="'ACTIONS.SEARCH.RELOAD' | translate"
+            tooltipPosition="top"
+            tooltipEvent="hover"
+          >
+          </p-button>
         </div>
       </ng-template>
 
@@ -106,34 +114,41 @@
           <th
             *ngFor="let col of columns"
             [id]="'apm_user_assignments_table_header_' + col.field"
-            class="p-2 text-center white-space-nowrap"
+            class="p-2"
             [pSortableColumn]="col.field"
             [attr.aria-label]="col.tooltip | translate"
             [pTooltip]="col.tooltip | translate"
             tooltipPosition="top"
             tooltipEvent="hover"
           >
-            <ng-container *ngIf="!col.filter"> {{ col.header | translate }} </ng-container>
-            <p-dropdown
-              *ngIf="col.filter"
-              [id]="'apm_user_assignments_table_filter_' + col.field"
-              panelStyleClass="text-left"
-              [options]="extractFilterItems(items, col.field)"
-              (onClick)="$event.stopPropagation()"
-              (onChange)="permissionTable.filter($event.value, col.field, 'equals')"
-              [placeholder]="col.header | translate"
-              [showClear]="true"
-            >
-              <ng-template let-option pTemplate="item"> {{ option }} </ng-template>
-            </p-dropdown>
-            <p-sortIcon [field]="col.field"></p-sortIcon>
+            <div class="flex flex-row flex-nowrap justify-content-center align-items-center">
+              <ng-container *ngIf="!col.filter"> {{ col.header | translate }} </ng-container>
+              <span *ngIf="col.filter" class="p-float-label atext-left">
+                <p-dropdown
+                  [id]="'apm_user_assignments_table_filter_' + col.field"
+                  (onClick)="$event.stopPropagation()"
+                  (onChange)="permissionTable.filter($event.value, col.field, 'equals')"
+                  [showClear]="true"
+                  [emptyMessage]="'USER_ROLE_PERMISSIONS.NO_RESULTS' | translate"
+                  [options]="extractFilterItems(items, col.field)"
+                  [(ngModel)]="col.value"
+                >
+                </p-dropdown>
+                <label [for]="'apm_user_assignments_table_filter_' + col.field"> {{ col.header | translate }}</label>
+              </span>
+              <p-sortIcon [field]="col.field"></p-sortIcon>
+            </div>
           </th>
         </tr>
       </ng-template>
 
       <ng-template pTemplate="body" let-item let-columns="columns" let-i="rowIndex">
         <tr>
-          <td *ngFor="let col of columns" [id]="'apm_user_assignments_table_row_' + i + '_' + col.field">
+          <td
+            *ngFor="let col of columns"
+            [id]="'apm_user_assignments_table_row_' + i + '_' + col.field"
+            class="text-center"
+          >
             {{ item[col.field] }}
           </td>
         </tr>

diff --git a/src/app/remotes/user-roles-permissions/user-roles-permissions.component.scss b/src/app/remotes/user-roles-permissions/user-roles-permissions.component.scss
@@ -12,6 +12,18 @@
 }
 
 :host ::ng-deep {
+  .p-dialog .p-dialog-content {
+    border-bottom-left-radius: var(--border-radius) !important;
+    border-bottom-right-radius: var(--border-radius) !important;
+  }
+
+  .user-profile-name {
+    top: 1.55rem;
+    right: 8rem;
+    font-weight: var(--dialog-header-font-weight); // same as dialog-title
+    font-size: var(--dialog-header-font-size);
+  }
+
   .correct-ocx-interactive-data-view > ocx-interactive-data-view > div {
     padding: 0 0 0.5rem 0 !important;
     &.surface-border {
@@ -26,8 +38,4 @@
   .p-datatable .p-datatable-thead > tr > th {
     border-bottom-width: 2px;
   }
-  .user-roles-and-permissions.p-datatable .p-datatable-thead > tr > th,
-  .user-roles-and-permissions.p-datatable .p-datatable-tbody > tr > td {
-    text-align: center !important;
-  }
 }
diff --git a/src/app/remotes/user-roles-permissions/user-roles-permissions.component.ts b/src/app/remotes/user-roles-permissions/user-roles-permissions.component.ts
@@ -52,7 +52,8 @@ type PROPERTY_NAME = 'productName' | 'roleName' | 'resource' | 'action'
   ]
 })
 export class OneCXUserRolesPermissionsComponent implements ocxRemoteComponent, ocxRemoteWebcomponent, OnChanges {
-  @Input() userId = ''
+  @Input() userId: string | undefined = undefined
+  @Input() displayName: string | undefined = undefined
   @Input() set ocxRemoteComponentConfig(config: RemoteComponentConfig) {
     this.ocxInitRemoteComponent(config)
   }
@@ -78,30 +79,35 @@ export class OneCXUserRolesPermissionsComponent implements ocxRemoteComponent, o
         field: 'resource',
         header: 'USER_ROLE_PERMISSIONS.RESOURCE',
         tooltip: 'USER_ROLE_PERMISSIONS.TOOLTIPS.RESOURCE',
-        filter: true
+        filter: true,
+        value: null
       },
       {
         field: 'action',
         header: 'USER_ROLE_PERMISSIONS.ACTION',
         tooltip: 'USER_ROLE_PERMISSIONS.TOOLTIPS.ACTION',
-        filter: true
+        filter: true,
+        value: null
       },
       {
         field: 'productName',
         header: 'USER_ROLE_PERMISSIONS.PRODUCT',
         tooltip: 'USER_ROLE_PERMISSIONS.TOOLTIPS.PRODUCT',
-        filter: true
+        filter: true,
+        value: null
       },
       {
         field: 'roleName',
         header: 'USER_ROLE_PERMISSIONS.ROLE',
         tooltip: 'USER_ROLE_PERMISSIONS.TOOLTIPS.ROLE',
-        filter: true
+        filter: true,
+        value: null
       }
     ]
   }
 
   public ocxInitRemoteComponent(remoteComponentConfig: RemoteComponentConfig) {
+    this.searchInProgress = true
     this.baseUrl.next(remoteComponentConfig.baseUrl)
     this.userApi.configuration = new Configuration({
       basePath: Location.joinWithSlash(remoteComponentConfig.baseUrl, environment.apiPrefix)
@@ -121,6 +127,7 @@ export class OneCXUserRolesPermissionsComponent implements ocxRemoteComponent, o
 
   public searchUserAssignments(): Observable<UserAssignment[]> {
     this.searchInProgress = true
+    // on admin view the userId is set, otherwise the me services are used
     if (this.userId) {
       return this.assgnmtApi
         .searchUserAssignments({ assignmentUserSearchCriteria: { userId: this.userId, pageSize: 1000 } })
@@ -170,7 +177,8 @@ export class OneCXUserRolesPermissionsComponent implements ocxRemoteComponent, o
     items.forEach((item: UserAssignment) => {
       if (item[fieldName] && item[fieldName] !== '') if (!arr.includes(item[fieldName])) arr.push(item[fieldName])
     })
-    return arr.sort(sortByLocale)
+    arr.sort(sortByLocale)
+    return arr
   }
 
   public applyGlobalFilter($event: Event, primengTable: Table): void {

diff --git a/src/assets/i18n/de.json b/src/assets/i18n/de.json
@@ -296,6 +296,7 @@
       "PERMISSIONS.TOOLTIP": "Über die zugewiesenen Rollen wirkende Berechtigungen",
       "PERMISSIONS.TITLE": "Berechtigungen: "
     },
+    "USER_PROFILE": "Nutzerprofil",
     "NO_RESULTS": "Keine Daten",
     "NO_ROLES": "Keine Rollen zugewiesen",
     "PERMISSION": "Berechtigung",

diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json
@@ -296,6 +296,7 @@
       "PERMISSIONS.TOOLTIP": "Permissions that apply to the Roles assigned",
       "PERMISSIONS.TITLE": "Permissions: "
     },
+    "USER_PROFILE": "User Profile",
     "NO_RESULTS": "No data",
     "NO_ROLES": "No Roles assigned",
     "PERMISSION": "Permission",