fix: fixed displaying filters in search-select

* fixed bug where filters were not displayed in the search-select field
* fixed table layout in audit log

Author: xkostka2

apps/admin-gui/src/app/admin/pages/admin-page/admin-audit-log/admin-audit-log.component.html

@@ -1,17 +1,15 @@
 <h1 class="page-subtitle">{{'ADMIN.AUDIT_LOG.TITLE'|translate}}</h1>
 <div class="align-elements">
-  <div class="d-flex align-items-center">
-    <perun-web-apps-refresh-button (refresh)="refreshTable()"></perun-web-apps-refresh-button>
-    <perun-web-apps-audit-log-search-select
-      [auditLogs]="eventOptions"
-      (auditLogsSelected)="toggleEvent($event)"
-      (selectClosed)="refreshOnClosed()"></perun-web-apps-audit-log-search-select>
-  </div>
+  <perun-web-apps-refresh-button (refresh)="refreshTable()"></perun-web-apps-refresh-button>
+  <perun-web-apps-audit-log-search-select
+    (auditLogsSelected)="toggleEvent($event)"
+    (selectClosed)="refreshOnClosed()"
+    [auditLogs]="eventOptionsForSearchSelect"></perun-web-apps-audit-log-search-select>
 
   <ng-template #spinner>
     <perun-web-apps-loading-table></perun-web-apps-loading-table>
   </ng-template>
-  <div class="position-relative">
+  <div class="position-relative w-100">
     <app-audit-messages-list
       *perunWebAppsLoader="loading$ | async; indicator: spinner"
       (loading$)="loading$ = $event"

apps/admin-gui/src/app/admin/pages/admin-page/admin-audit-log/admin-audit-log.component.ts

@@ -15,6 +15,7 @@ export class AdminAuditLogComponent implements OnInit {
 
   selectedEvents: string[] = [];
   eventOptions: string[] = [];
+  eventOptionsForSearchSelect: string[] = [];
 
   constructor(
     private auditMessagesManagerService: AuditMessagesManagerService,
@@ -25,6 +26,7 @@ export class AdminAuditLogComponent implements OnInit {
     this.loading$ = of(true);
     this.auditMessagesManagerService.findAllPossibleEvents().subscribe((res) => {
       this.eventOptions = res.sort();
+      this.eventOptionsForSearchSelect = this.eventOptions;
     });
   }
 
@@ -40,6 +42,8 @@ export class AdminAuditLogComponent implements OnInit {
 
   refreshOnClosed(): void {
     this.selectedEvents = [...this.selectedEvents];
+    const otherEntities = this.eventOptions.filter((e) => !this.selectedEvents.includes(e));
+    this.eventOptionsForSearchSelect = [...this.selectedEvents, ...otherEntities];
     this.cd.detectChanges();
   }
 }

libs/perun/components/src/lib/entity-search-select/entity-search-select.component.ts

@@ -46,8 +46,8 @@ export class EntitySearchSelectComponent<T extends PerunBean>
   entitiesCtrl: UntypedFormControl = new UntypedFormControl();
   entityFilterCtrl: UntypedFormControl = new UntypedFormControl();
   filteredEntities = new ReplaySubject<T[]>(1);
+  entitiesLen = 0;
   protected _onDestroy = new Subject<void>();
-  private entitiesLen = 0;
 
   constructor(public cd: ChangeDetectorRef) {}
 
@@ -70,7 +70,7 @@ export class EntitySearchSelectComponent<T extends PerunBean>
     this.filteredEntities.subscribe((entities) => (this.entitiesLen = entities.length));
 
     this.entityFilterCtrl.valueChanges.pipe(takeUntil(this._onDestroy)).subscribe(() => {
-      this.filterEntites();
+      this.filterEntities();
     });
 
     if (this.entity !== null) {
@@ -174,7 +174,7 @@ export class EntitySearchSelectComponent<T extends PerunBean>
     }
   }
 
-  filterEntites(): void {
+  filterEntities(): void {
     if (!this.entities) {
       return;
     }