fix: code cleanup (#236)

src/app/_apm-mixins.scss

@@ -471,6 +471,15 @@
     }
   }
 }
+@mixin tabview-fix-color-selected-tab {
+  :host ::ng-deep {
+    // correct the background color on inital selected tab
+    .p-tabview .p-tabview-nav li.p-highlight .p-tabview-nav-link[aria-selected='true'] {
+      background-color: rgba(var(--primary-color-rgb), 0.12);
+    }
+  }
+}
+
 /* **********************************************
  *  TABLE
  * **********************************************/

src/app/remotes/user-roles-permissions/user-roles-permissions.component.html

@@ -3,22 +3,22 @@
     <ocx-loading></ocx-loading>
   </ng-template>
 
-  <p-tabView *ngIf="userAssignmentItems; else loading" [(activeIndex)]="selectedTab">
+  <p-tabView *ngIf="userAssignmentItems; else loading">
     <p-tabPanel>
       <ng-template pTemplate="header">
         <span
-          [pTooltip]="'USER_ROLE_PERMISSIONS.TAB_NAME_PERMISSIONS.TOOLTIP' | translate"
+          [pTooltip]="'USER_ROLE_PERMISSIONS.TABS.PERMISSIONS.TOOLTIP' | translate"
           tooltipPosition="top"
           tooltipEvent="hover"
         >
-          {{ 'USER_ROLE_PERMISSIONS.TAB_NAME_PERMISSIONS' | translate }}
+          {{ 'USER_ROLE_PERMISSIONS.TABS.PERMISSIONS' | translate }}
         </span>
       </ng-template>
       <p-table
-        #userAssignmentTable
-        [columns]="cols"
+        #permissionTable
+        [columns]="columns"
         [value]="userAssignmentItems"
-        styleClass="p-datatable-striped"
+        styleClass="p-datatable-striped user-roles-and-permissions"
         [sortField]="sortValue"
         [autoLayout]="true"
         [globalFilterFields]="['application', 'key', 'resource', 'action', 'role']"
@@ -27,21 +27,23 @@
         [rowsPerPageOptions]="[10, 25, 100, 1000]"
         [alwaysShowPaginator]="true"
         paginatorPosition="bottom"
+        [showCurrentPageReport]="true"
+        currentPageReportTemplate="{first} - {last} {{ 'ACTIONS.SEARCH.OF' | translate }} {totalRecords}"
       >
         <ng-template pTemplate="caption">
           <div class="flex flex-wrap justify-content-between align-items-center gap-2">
-            <div class="font-bold">{{ 'USER_ROLE_PERMISSIONS.TITLE_PERMISSIONS' | translate }}</div>
+            <div class="font-bold">{{ 'USER_ROLE_PERMISSIONS.SUBTITLE_PERMISSIONS' | translate }}</div>
             <div class="p-inputgroup w-auto">
               <span class="p-inputgroup-addon data-view-control-border">
                 <span class="pi pi-filter"></span>
               </span>
               <span class="p-float-label">
                 <input
-                  #userAssignmentTableFilterInput
+                  #permissionTableFilterInput
                   pInputText
                   type="text"
                   id="up_permission_table_filter"
-                  (input)="applyGlobalFilter($event, userAssignmentTable)"
+                  (input)="applyGlobalFilter($event, permissionTable)"
                 />
                 <label for="data-view-control-filter">Filter</label>
               </span>
@@ -50,7 +52,7 @@
                 class="p-inputgroup-addon bg-primary cursor-pointer pi pi-filter-slash"
                 (click)="onClearFilterUserAssignmentTable()"
                 tabindex="0"
-                [pTooltip]="'GENERAL.FILTER_CLEAR' | translate"
+                [pTooltip]="'ACTIONS.SEARCH.FILTER.CLEAR' | translate"
                 tooltipPosition="top"
                 tooltipEvent="hover"
               >
@@ -84,7 +86,10 @@
               *ngFor="let col of columns"
               [id]="'up_permissions_table_col_' + col.field"
               [pSortableColumn]="col.field"
-              class="white-space-nowrap"
+              class="p-2 text-center white-space-nowrap"
+              [pTooltip]="col.tooltip | translate"
+              tooltipPosition="top"
+              tooltipEvent="hover"
             >
               {{ col.header | translate }}
               <p-sortIcon [field]="col.field"></p-sortIcon>
@@ -100,7 +105,7 @@
         </ng-template>
         <ng-template pTemplate="emptymessage">
           <tr>
-            <td [attr.colspan]="cols.length" id="up_permissions_table_no_results">
+            <td [attr.colspan]="columns.length" id="up_permissions_table_no_results">
               {{ 'USER_ROLE_PERMISSIONS.NO_RESULTS' | translate }}
             </td>
           </tr>
@@ -111,14 +116,15 @@
     <p-tabPanel>
       <ng-template pTemplate="header">
         <span
-          [pTooltip]="'USER_ROLE_PERMISSIONS.TAB_NAME_ROLES.TOOLTIP' | translate"
+          [pTooltip]="'USER_ROLE_PERMISSIONS.TABS.ROLES.TOOLTIP' | translate"
           tooltipPosition="top"
           tooltipEvent="hover"
         >
-          {{ 'USER_ROLE_PERMISSIONS.TAB_NAME_ROLES' | translate }}
+          {{ 'USER_ROLE_PERMISSIONS.TABS.ROLES' | translate }}
         </span>
       </ng-template>
-      <p-table [value]="roles">
+
+      <p-table [value]="roles" styleClass="py-3">
         <ng-template pTemplate="header">
           <tr>
             <th id="up_permissions_table_role" class="font-bold" pSortableColumn="role">
@@ -134,7 +140,7 @@
         </ng-template>
         <ng-template pTemplate="emptymessage">
           <tr>
-            <td>{{ 'USER_ROLE_PERMISSIONS.NO_RESULTS' | translate }}</td>
+            <td>{{ 'USER_ROLE_PERMISSIONS.NO_ROLES' | translate }}</td>
           </tr>
         </ng-template>
       </p-table>

src/app/remotes/user-roles-permissions/user-roles-permissions.component.scss

@@ -1,5 +1,31 @@
+@import '/src/app/_apm-mixins.scss';
+
+@include tabview-fix-color-selected-tab;
+@include tabview-reduce-padding;
+
 :host {
   .border-permission-group {
     border-bottom-color: var(--primary-color) !important;
   }
 }
+
+:host ::ng-deep {
+  .correct-ocx-interactive-data-view > ocx-interactive-data-view > div {
+    padding: 0 0 0.5rem 0 !important;
+    &.surface-border {
+      border-bottom: var(--table-header-border) !important;
+    }
+  }
+  // reduce on all panels
+  .p-tabview .p-tabview-panels {
+    padding: 0;
+  }
+
+  .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;
+  }
+}

src/app/remotes/user-roles-permissions/user-roles-permissions.component.spec.ts

@@ -229,32 +229,32 @@ describe('OneCXUserRolesPermissionsComponent', () => {
   })
 
   describe('onClearFilterUserAssignmentTable', () => {
-    it('should clear the userAssignmentTableFilter value if it exists', () => {
-      component.userAssignmentTableFilter = {
+    it('should clear the permissionTableFilter value if it exists', () => {
+      component.permissionTableFilter = {
         nativeElement: { value: 'test filter' }
       } as ElementRef
 
       component.onClearFilterUserAssignmentTable()
 
-      expect(component.userAssignmentTableFilter?.nativeElement.value).toBe('')
+      expect(component.permissionTableFilter?.nativeElement.value).toBe('')
     })
 
-    it('should not throw an error if userAssignmentTableFilter is undefined', () => {
-      component.userAssignmentTableFilter = undefined
+    it('should not throw an error if permissionTableFilter is undefined', () => {
+      component.permissionTableFilter = undefined
 
       expect(() => component.onClearFilterUserAssignmentTable()).not.toThrow()
     })
 
-    it('should call clear() on userAssignmentTable if it exists', () => {
-      component.userAssignmentTable = jasmine.createSpyObj('userAssignmentTable', ['clear'])
+    it('should call clear() on permissionTable if it exists', () => {
+      component.permissionTable = jasmine.createSpyObj('permissionTable', ['clear'])
 
       component.onClearFilterUserAssignmentTable()
 
-      expect(component.userAssignmentTable?.clear).toHaveBeenCalled()
+      expect(component.permissionTable?.clear).toHaveBeenCalled()
     })
 
-    it('should not throw an error if userAssignmentTable is undefined', () => {
-      component.userAssignmentTable = undefined
+    it('should not throw an error if permissionTable is undefined', () => {
+      component.permissionTable = undefined
 
       expect(() => component.onClearFilterUserAssignmentTable()).not.toThrow()
     })

src/app/remotes/user-roles-permissions/user-roles-permissions.component.ts

@@ -1,10 +1,9 @@
 import { Component, ElementRef, Inject, Input, OnInit, ViewChild } from '@angular/core'
 import { CommonModule, Location } from '@angular/common'
+import { HttpClient } from '@angular/common/http'
 import { RouterModule } from '@angular/router'
-import { MenuItem } from 'primeng/api'
 import { Table } from 'primeng/table'
 import { ReplaySubject } from 'rxjs'
-import { HttpClient } from '@angular/common/http'
 import { TranslateModule, TranslateLoader, TranslateService } from '@ngx-translate/core'
 
 import { SharedModule } from 'src/app/shared/shared.module'
@@ -43,22 +42,13 @@ import {
 })
 export class OneCXUserRolesPermissionsComponent implements OnInit, ocxRemoteComponent, ocxRemoteWebcomponent {
   public roles: string[] = []
-  environment = environment
-  public myPermissions = new Array<string>() // permissions of the user
-
+  public environment = environment
   public userAssignmentItems: UserAssignment[] = []
-  public items: MenuItem[] = []
-  public cols = [{}]
-  public selectedColumns = [{}]
-  public selectedTab = 0
+  public columns
   public sortValue = ''
-  public visibility = false
-  public activeItem: MenuItem | undefined
-  public infoMessage: string | undefined
-  public errorMessage: string | undefined
   public loadingExceptionKey = ''
-  @ViewChild('userAssignmentTable') userAssignmentTable: Table | undefined
-  @ViewChild('userAssignmentTableFilterInput') userAssignmentTableFilter: ElementRef | undefined
+  @ViewChild('permissionTable') permissionTable: Table | undefined
+  @ViewChild('permissionTableFilterInput') permissionTableFilter: ElementRef | undefined
 
   constructor(
     @Inject(BASE_URL) private baseUrl: ReplaySubject<string>,
@@ -68,7 +58,20 @@ export class OneCXUserRolesPermissionsComponent implements OnInit, ocxRemoteComp
     private translateService: TranslateService
   ) {
     this.userService.lang$.subscribe((lang) => this.translateService.use(lang))
-    if (userService.hasPermission('ROLES_PERMISSIONS#VIEW')) this.myPermissions.push('ROLES_PERMISSIONS#VIEW')
+    this.columns = [
+      {
+        field: 'resource',
+        header: 'USER_ROLE_PERMISSIONS.RESOURCE',
+        tooltip: 'USER_ROLE_PERMISSIONS.TOOLTIPS.RESOURCE'
+      },
+      { field: 'action', header: 'USER_ROLE_PERMISSIONS.ACTION', tooltip: 'USER_ROLE_PERMISSIONS.TOOLTIPS.ACTION' },
+      {
+        field: 'productName',
+        header: 'USER_ROLE_PERMISSIONS.APPLICATION',
+        tooltip: 'USER_ROLE_PERMISSIONS.TOOLTIPS.APPLICATION'
+      },
+      { field: 'roleName', header: 'USER_ROLE_PERMISSIONS.ROLE', tooltip: 'USER_ROLE_PERMISSIONS.TOOLTIPS.ROLE' }
+    ]
   }
 
   @Input() set ocxRemoteComponentConfig(config: RemoteComponentConfig) {
@@ -87,18 +90,6 @@ export class OneCXUserRolesPermissionsComponent implements OnInit, ocxRemoteComp
 
   public ngOnInit(): void {
     this.sortValue = 'USER_ROLE_PERMISSIONS.APPLICATION'
-    this.cols = [
-      { field: 'resource', header: 'USER_ROLE_PERMISSIONS.RESOURCE' },
-      { field: 'action', header: 'USER_ROLE_PERMISSIONS.ACTION' },
-      { field: 'productName', header: 'USER_ROLE_PERMISSIONS.APPLICATION' },
-      { field: 'roleName', header: 'USER_ROLE_PERMISSIONS.ROLE' }
-    ]
-    this.items = [
-      { label: 'USER_ROLE_PERMISSIONS.TABS.PERMISSIONS', icon: 'fa-calendar', id: 'tabPerm' },
-      { label: 'USER_ROLE_PERMISSIONS.TABS.ROLES', icon: 'fa-bar-chart', id: 'tabRole' }
-    ]
-    this.activeItem = this.items[0]
-    this.selectedColumns = this.cols
     this.loadData()
   }
 
@@ -165,10 +156,10 @@ export class OneCXUserRolesPermissionsComponent implements OnInit, ocxRemoteComp
   }
 
   public onClearFilterUserAssignmentTable(): void {
-    if (this.userAssignmentTableFilter) {
-      this.userAssignmentTableFilter.nativeElement.value = ''
+    if (this.permissionTableFilter) {
+      this.permissionTableFilter.nativeElement.value = ''
     }
-    this.userAssignmentTable?.clear()
+    this.permissionTable?.clear()
     this.loadData()
   }
 

src/assets/i18n/de.json

@@ -105,6 +105,7 @@
       "SORT_BY": "Sortiert nach",
       "SORT_DIRECTION_ASC": "aufsteigend",
       "SORT_DIRECTION_DESC": "absteigend",
+      "OF": "von",
       "FILTER": {
         "LABEL": "Filter",
         "OF": "Filter für ",
@@ -202,7 +203,7 @@
     "TYPE_PRODUCT": "Applikation",
     "TYPE_WORKSPACE": "Workspace",
     "APPS": "Anzahl Apps",
-    "DELETE": "App einschließlich aller Zugriffsrechte und Rollen löschen",
+    "DELETE": "App einschließlich aller Berechtigungen und Rollen löschen",
     "DELETE_HEADER": "App löschen",
     "EDIT": "App ändern",
     "EDIT_HEADER": "App ändern",
@@ -277,27 +278,30 @@
     }
   },
   "USER_ROLE_PERMISSIONS": {
-    "HEADLINE": "Rollen und Zugriffsrechte",
-    "TAB_NAME_ROLES": "Rollen",
-    "TAB_NAME_ROLES.TOOLTIP": "Meine Rollen",
-    "TAB_NAME_PERMISSIONS": "Zugriffsrechte",
-    "TAB_NAME_PERMISSIONS.TOOLTIP": "Meine Zugriffsrechte",
+    "TABS": {
+      "ROLES": "Rollen",
+      "ROLES.TOOLTIP": "Die mir zugewiesenen Rollen",
+      "PERMISSIONS": "Berechtigungen",
+      "PERMISSIONS.TOOLTIP": "Über die mir zugewiesenen Rollen wirkende Berechtigungen"
+    },
     "TITLE_ROLES": "Meine Rollen",
-    "TITLE_PERMISSIONS": "Meine Zugriffsrechte",
+    "SUBTITLE_PERMISSIONS": "Meine Berechtigungen",
     "NO_RESULTS": "Keine Daten",
-    "PERMISSION": "Zugriffsrecht",
+    "NO_ROLES": "Keine Rollen zugewiesen",
+    "PERMISSION": "Berechtigung",
     "APPLICATION": "Applikation",
-    "NAME": "Name",
     "ACTION": "Aktion",
     "RESOURCE": "Ressource",
     "ROLE": "Rolle",
-    "TABS": {
-      "ROLES": "Rollen",
-      "PERMISSIONS": "Zugriffsrechte"
+    "TOOLTIPS": {
+      "APPLICATION": "Name der Applikation, die die Berechtigung definiert hat",
+      "ACTION": "Aktion die auf der Ressource erlaubt ist",
+      "RESOURCE": "Name der Ressource auf der gearbeitet werden kann",
+      "ROLE": "Rolle aus dem IAM (Identity Access Managment) der die Berechtigung zugewiesen wurde"
     },
     "MSG": {
-      "PERMISSIONS_REFRESH_INFO": "Zugriffsrechte wurden aktualisiert",
-      "PERMISSIONS_REFRESH_ERROR": "Unbekanntes Problem beim Aktualisieren von Zugriffsrechten"
+      "PERMISSIONS_REFRESH_INFO": "Berechtigungen wurden aktualisiert",
+      "PERMISSIONS_REFRESH_ERROR": "Unbekanntes Problem beim Aktualisieren von Berechtigungen"
     }
   },
   "EXCEPTIONS": {