fix(admin): replace mat-selects for our custom search selects

* fixed AddMemberToResource dialog where we were still using plain mat-selects instead of our custom search selects

Author: xkostka2

apps/admin-gui/src/app/shared/components/dialogs/add-member-to-resource-dialog/add-member-to-resource-dialog.component.html

@@ -9,37 +9,27 @@ <h1 mat-dialog-title>{{'DIALOGS.ADD_MEMBER_TO_RESOURCE.TITLE' | translate}}</h1>
         >
         <mat-spinner *ngIf="loading" class="mr-auto ml-auto"></mat-spinner>
         <div *ngIf="!loading">
-          <div>
-            <mat-form-field class="input-style">
-              <input
-                [formControl]="facilityCtrl"
-                [matAutocomplete]="autoFacility"
-                aria-label="Number"
-                matInput
-                placeholder="{{ 'DIALOGS.ADD_MEMBER_TO_RESOURCE.FILTER' | translate}}"
-                type="text" />
-              <mat-autocomplete #autoFacility="matAutocomplete" autoActiveFirstOption>
-                <mat-option *ngFor="let facility of filteredFacilities | async" [value]="facility">
-                  {{facility}}
-                </mat-option>
-              </mat-autocomplete>
-            </mat-form-field>
+          <div class="input-style">
+            <perun-web-apps-facility-search-select
+              (facilitySelected)="filterResources($event.name); stepper.selected.completed = true"
+              [disableAutoSelect]="true"
+              [facilities]="facilities"
+              [selectPlaceholder]="'DIALOGS.ADD_MEMBER_TO_RESOURCE.FILTER'">
+            </perun-web-apps-facility-search-select>
           </div>
-          <div>
-            <mat-form-field class="input-style">
-              <mat-select
-                disableOptionCentering="true"
-                placeholder="{{ 'DIALOGS.ADD_MEMBER_TO_RESOURCE.SELECTED' | translate}}"
-                required>
-                <mat-option
-                  (click)="setResource(resource);
-                           stepper.selected.completed = true"
-                  *ngFor="let resource of filteredResources | async"
-                  [value]="resource">
-                  {{resource.name}}
-                </mat-option>
-              </mat-select>
-            </mat-form-field>
+          <div class="input-style">
+            <perun-web-apps-resource-search-select
+              (resourceSelected)="setResource($event);
+                         stepper.selected.completed = true"
+              *ngIf="!processing"
+              [disableAutoSelect]="true"
+              [required]="true"
+              [resource]="selectedResource"
+              [resources]="filteredResources">
+            </perun-web-apps-resource-search-select>
+            <perun-web-apps-resource-search-select
+              *ngIf="processing"
+              [resources]="[]"></perun-web-apps-resource-search-select>
           </div>
           <div>
             <span

apps/admin-gui/src/app/shared/components/dialogs/add-member-to-resource-dialog/add-member-to-resource-dialog.component.ts

@@ -10,15 +10,13 @@ import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { GuiAuthResolver, NotificatorService } from '@perun-web-apps/perun/services';
 import { TranslateService } from '@ngx-translate/core';
 import {
+  Facility,
   Group,
   GroupsManagerService,
   ResourcesManagerService,
   RichResource,
   Service,
 } from '@perun-web-apps/perun/openapi';
-import { UntypedFormControl } from '@angular/forms';
-import { map, startWith } from 'rxjs/operators';
-import { Observable } from 'rxjs';
 import { SelectionModel } from '@angular/cdk/collections';
 import { MatStepper } from '@angular/material/stepper';
 
@@ -40,13 +38,8 @@ export class AddMemberToResourceDialogComponent implements OnInit, AfterViewInit
   loading = false;
   processing = false;
   membersGroupsId: Set<number> = new Set<number>();
-
-  facilityCtrl: UntypedFormControl = new UntypedFormControl();
-
-  filteredFacilities: Observable<string[]>;
-  facilitiesNames: string[] = [];
-
-  filteredResources: Observable<RichResource[]>;
+  facilities: Facility[] = [];
+  filteredResources: RichResource[] = [];
   resources: RichResource[] = [];
   selectedResource: RichResource = null;
 
@@ -81,6 +74,7 @@ export class AddMemberToResourceDialogComponent implements OnInit, AfterViewInit
     this.resourceManager.getRichResources(this.data.voId).subscribe(
       (resources) => {
         this.resources = resources;
+        this.filteredResources = resources;
         this.getResourceFacilities();
         this.loading = false;
       },
@@ -150,42 +144,28 @@ export class AddMemberToResourceDialogComponent implements OnInit, AfterViewInit
     this.stepper.next();
   }
 
-  private getResourceFacilities(): void {
-    const distinctFacilities = new Set<string>();
-    for (const resource of this.resources) {
-      distinctFacilities.add(resource.facility.name);
-    }
-
-    this.facilitiesNames = Array.from(distinctFacilities);
-
-    this.filteredFacilities = this.facilityCtrl.valueChanges.pipe(
-      startWith(''),
-      map((value: string) => this.filterFacilities(value))
-    );
-
-    this.filteredResources = this.facilityCtrl.valueChanges.pipe(
-      startWith(''),
-      map((value: string) => this.filterResources(value))
-    );
-  }
-
-  private filterFacilities(value: string): string[] {
-    const filterValue = value.toLowerCase();
-    const filtered = this.facilitiesNames.filter((option) =>
-      option.toLowerCase().includes(filterValue)
-    );
-    return filtered.sort((a, b) => a.toLowerCase().localeCompare(b.toLowerCase()));
-  }
-
-  private filterResources(value: string): RichResource[] {
+  filterResources(value: string): void {
     if (value == null) {
-      return this.resources;
+      return;
     }
 
     const filterValue = value.toLowerCase();
     const filtered = this.resources.filter((option) =>
       option.facility.name.toLowerCase().startsWith(filterValue)
     );
-    return filtered.sort((a, b) => a.name.toLowerCase().localeCompare(b.name.toLowerCase()));
+    this.filteredResources = filtered.sort((a, b) =>
+      a.name.toLowerCase().localeCompare(b.name.toLowerCase())
+    );
+    this.setResource(this.filteredResources[0]);
+  }
+
+  private getResourceFacilities(): void {
+    const distinctFacilities = new Set<string>();
+    for (const resource of this.resources) {
+      distinctFacilities.add(resource.facility.name);
+      if (this.facilities.length !== distinctFacilities.size) {
+        this.facilities.push(resource.facility);
+      }
+    }
   }
 }

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

@@ -1806,7 +1806,7 @@
       "CANCEL": "Cancel",
       "BACK": "Back",
       "SUBMIT": "Submit",
-      "FILTER": "Filter by facility:",
+      "FILTER": "Filter by facility",
       "SELECTED": "Selected resource:",
       "DESCRIPTION": "Description:",
       "SERVICES": "Services on resource:",

libs/perun/components/src/lib/audit-log-search-select/audit-log-search-select.component.html

@@ -4,7 +4,6 @@
     [searchFunction]="searchFunction"
     (entitySelected)="this.auditLogsSelected.emit($event)"
     (selectClosed)="this.selectClosed.emit($event)"
-    [shouldRefresh]="true"
     [mainTextFunction]="mainTextFunction"
     [secondaryTextFunction]="secondaryTextFunction"
     [multiple]="true"

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

@@ -1,6 +1,7 @@
 <div class="d-flex flex-row align-items-center gap-4">
   <mat-form-field class="w-100 pb-0">
     <mat-select
+      [required]="required"
       data-cy="search-select-input"
       (openedChange)="openChange()"
       (closed)="closeChange()"

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

@@ -35,7 +35,7 @@ export class EntitySearchSelectComponent<T extends PerunBean>
   @Input() displayStatus = false;
   @Input() multiple = false;
   @Input() theme = '';
-  @Input() shouldRefresh = false;
+  @Input() required = false;
   @Output() entitySelected = new EventEmitter<T | T[]>();
   @Output() selectClosed = new EventEmitter<boolean>();
   @ViewChild('scrollViewport', { static: false }) scrollViewport: CdkVirtualScrollViewport;

libs/perun/components/src/lib/facility-search-select/facility-search-select.component.html

@@ -4,7 +4,7 @@
   (entitySelected)="this.facilitySelected.emit($event)"
   [searchFunction]="nameFunction"
   [mainTextFunction]="nameFunction"
-  [selectPlaceholder]="'SHARED_LIB.PERUN.COMPONENTS.FACILITY_SEARCH_SELECT.SELECT_FACILITY' | translate"
+  [selectPlaceholder]="selectPlaceholder | translate"
   [findPlaceholder]="'SHARED_LIB.PERUN.COMPONENTS.FACILITY_SEARCH_SELECT.FIND_FACILITY' | translate"
   [noEntriesText]="'SHARED_LIB.PERUN.COMPONENTS.FACILITY_SEARCH_SELECT.NO_FACILITY_FOUND' | translate">
 </perun-web-apps-entity-search-select>

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

@@ -10,6 +10,7 @@ import { compareFnName } from '@perun-web-apps/perun/utils';
 export class FacilitySearchSelectComponent implements OnInit {
   @Input() facilities: Facility[];
   @Input() disableAutoSelect = false;
+  @Input() selectPlaceholder = 'SHARED_LIB.PERUN.COMPONENTS.FACILITY_SEARCH_SELECT.SELECT_FACILITY';
   @Output() facilitySelected = new EventEmitter<Facility>();
   nameFunction = (facility: Facility): string => facility.name;
 

libs/perun/components/src/lib/resource-search-select/resource-search-select.component.html

@@ -1,6 +1,7 @@
 <perun-web-apps-entity-search-select
   [entity]="resource"
   [entities]="resources"
+  [required]="required"
   [disableAutoSelect]="disableAutoSelect"
   (entitySelected)="this.resourceSelected.emit($event)"
   [displayStatus]="displayStatus"

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

@@ -12,6 +12,7 @@ export class ResourceSearchSelectComponent implements OnInit {
   @Input() resources: Resource[];
   @Input() displayStatus = true;
   @Input() disableAutoSelect = false;
+  @Input() required = false;
   @Output() resourceSelected = new EventEmitter<Resource>();
 
   nameFunction = (resource: Resource): string => resource.name;