fix(admin): sort attributes list by display name

* attributes and attribute definition lists are now sorted by display name by default
* added display name column to admin attribute definitions list
* the mentioned lists now display 25 entities on one page by default
* fixed the personal preferred table page size config (changes didn't take effect correctly before)

Author: xflord

apps/admin-gui/src/app/shared/components/attr-def-list/attr-def-list.component.html

@@ -11,7 +11,7 @@
         class="w-100"
         mat-table
         matSort
-        matSortActive="id"
+        matSortActive="displayName"
         matSortDirection="asc"
         matSortDisableClear>
         <ng-container
@@ -58,6 +58,14 @@
             {{attrDef.friendlyName}}
           </td>
         </ng-container>
+        <ng-container matColumnDef="displayName">
+          <th *matHeaderCellDef mat-header-cell mat-sort-header>
+            {{'ADMIN.ATTRIBUTES.TABLE_ATTR_DISPLAY_NAME' | translate}}
+          </th>
+          <td mat-cell *matCellDef="let attribute">
+            {{attribute.displayName}}
+          </td>
+        </ng-container>
         <ng-container matColumnDef="entity">
           <th *matHeaderCellDef mat-header-cell mat-sort-header>
             {{'ADMIN.ATTRIBUTES.TABLE_ATTR_ENTITY' | translate}}

apps/admin-gui/src/app/shared/components/attr-def-list/attr-def-list.component.ts

@@ -40,6 +40,7 @@ export class AttrDefListComponent implements OnChanges, AfterViewInit {
     'select',
     'id',
     'friendlyName',
+    'displayName',
     'entity',
     'namespace',
     'type',
@@ -79,6 +80,8 @@ export class AttrDefListComponent implements OnChanges, AfterViewInit {
         return data.id.toString();
       case 'friendlyName':
         return data.friendlyName;
+      case 'displayName':
+        return data.displayName;
       case 'entity':
         return data.entity;
       case 'namespace':

apps/admin-gui/src/app/users/pages/user-detail-page/user-settings/user-settings-app-configuration/user-settings-app-configuration.component.html

@@ -2,7 +2,7 @@ <h1 class="page-subtitle">{{'USER_DETAIL.SETTINGS.GUI_CONFIG.TITLE' | translate}
 <div class="col-12 col-lg-6 p-0">
   <mat-form-field class="w-100">
     <mat-label>{{'USER_DETAIL.SETTINGS.GUI_CONFIG.PREF_TABLE_PAGE_SIZE' | translate}}</mat-label>
-    <mat-select (valueChange)="updatePreferredTablePageSize()" [(value)]="preferredTablePageSize">
+    <mat-select [(value)]="preferredTablePageSize" (valueChange)="updatePreferredTablePageSize()">
       <mat-option *ngFor="let value of tablePageSizeOptions" [value]="value">
         {{value}}
       </mat-option>

apps/admin-gui/src/assets/i18n/en.json

@@ -2356,6 +2356,7 @@
       "TITLE": "Attribute definitions",
       "TABLE_ATTR_ID": "Id",
       "TABLE_ATTR_FRIENDLY_NAME": "Friendly name",
+      "TABLE_ATTR_DISPLAY_NAME": "Display name",
       "TABLE_ATTR_ENTITY": "Entity",
       "TABLE_ATTR_DEF": "Def",
       "TABLE_ATTR_TYPE": "Type",

libs/config/table-config/src/lib/table-config.service.ts

@@ -5,7 +5,11 @@ import { GUIConfigService, LS_TABLE_PREFIX, PREF_PAGE_SIZE } from './guiconfig.s
   providedIn: 'root',
 })
 export class TableConfigService {
-  constructor(private guiConfigService: GUIConfigService) {}
+  defaultTableSizes = new Map<string, number>();
+  constructor(private guiConfigService: GUIConfigService) {
+    this.defaultTableSizes.set(TABLE_ATTRIBUTES_SETTINGS, 25);
+    this.defaultTableSizes.set(TABLE_ADMIN_ATTRIBUTES, 25);
+  }
 
   getTablePageSize(tableId: string): number {
     const tablePref = this.guiConfigService.getNumber(LS_TABLE_PREFIX + tableId);
@@ -17,7 +21,7 @@ export class TableConfigService {
       return pref;
     }
 
-    return 10;
+    return this.defaultTableSizes.get(tableId) ?? 10;
   }
 
   setTablePageSize(tableId: string, value: number): void {

libs/perun/components/src/lib/attributes-list/attributes-list.component.html

@@ -9,7 +9,7 @@
       mat-table
       [dataSource]="dataSource"
       matSort
-      matSortActive="id"
+      matSortActive="displayName"
       matSortDirection="asc"
       matSortDisableClear
       class="w-100">