add ability to transform values in value picker

frontend/src/app/components/values-picker/values-picker.component.html

@@ -7,13 +7,13 @@
       [disabled]="isDisabled(item)"
       (removed)="removeItem(item)"
     >
-      {{ item }}
+      {{ valueMapper(item) }}
       <button *ngIf="!isDisabled(item)" matChipRemove>
-        <mat-icon>cancel</mat-icon>
+        <mat-icon fontSet="material-icons-outlined">cancel</mat-icon>
       </button>
     </mat-chip>
     <input
-      placeholder="Add {{name}}..."
+      placeholder="Add {{ name }}..."
       [formControl]="inputControl"
       [value]="inputControl.value"
       [matAutocomplete]="auto"
@@ -28,11 +28,8 @@
     #auto="matAutocomplete"
     (optionSelected)="addItemSelect($event)"
   >
-    <mat-option
-      *ngFor="let item of selectable | async"
-      [value]="item"
-    >
-      {{ item }}
+    <mat-option *ngFor="let item of found | async" [value]="item">
+      {{ valueMapper(item) }}
     </mat-option>
   </mat-autocomplete>
 </mat-form-field>

frontend/src/app/components/values-picker/values-picker.component.ts

@@ -1,10 +1,5 @@
-import { COMMA, ENTER, SPACE } from '@angular/cdk/keycodes';
-import {
-  Component,
-  Input,
-  OnChanges,
-  OnInit
-} from '@angular/core';
+import { COMMA, ENTER } from '@angular/cdk/keycodes';
+import { Component, Input, OnChanges, OnInit } from '@angular/core';
 import { FormControl } from '@angular/forms';
 import { MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
 import { MatChipInputEvent } from '@angular/material/chips';
@@ -20,7 +15,7 @@ import { Required } from 'src/app/models/decorators/required.decorator';
 })
 export class ValuesPickerComponent implements OnInit, OnChanges {
   // Static data
-  readonly separatorKeysCodes: number[] = [ENTER, COMMA, SPACE];
+  readonly separatorKeysCodes: number[] = [ENTER, COMMA];
 
   // Ui niceties
   @Input('name') @Required name: string = '';
@@ -37,10 +32,14 @@ export class ValuesPickerComponent implements OnInit, OnChanges {
 
   @Input('disabled-list') disabledSelection: string[] = [];
 
+  @Input('value-mapper')
+  valueMapper: (value: string) => string = (value) => 'poopoo';
+
   // Selection
   private selectableSubject = new BehaviorSubject<string[]>([]);
+  private foundSubject = new BehaviorSubject<string[]>([]);
 
-  public selectable = this.selectableSubject.asObservable();
+  public found = this.foundSubject.asObservable();
   public inputControl = new FormControl('');
 
   public ngOnInit(): void {
@@ -49,7 +48,7 @@ export class ValuesPickerComponent implements OnInit, OnChanges {
   }
 
   public ngOnChanges(): void {
-    this.updateSelectable()
+    this.updateSelectable();
   }
 
   public isDisabled(value: string): boolean {
@@ -69,7 +68,7 @@ export class ValuesPickerComponent implements OnInit, OnChanges {
   }
 
   public addItemSelect(event: MatAutocompleteSelectedEvent): void {
-    this.addItem(event.option.viewValue);
+    this.addItem(event.option.value);
   }
 
   private addItem(value: string) {
@@ -89,14 +88,20 @@ export class ValuesPickerComponent implements OnInit, OnChanges {
       (s) => !this.isDisabled(s) && !selected.includes(s)
     );
 
+    this.selectableSubject.next(available);
+
     const searchValue = this.inputControl.value;
     if (searchValue && available.length > 0) {
-      const fuse = new Fuse(available);
-      const result = fuse.search(searchValue).map((r) => r.item);
+      const fuse = new Fuse(available.map(this.valueMapper));
+      const result = fuse
+        .search(searchValue, {
+          limit: 10,
+        })
+        .map((r) => available[r.refIndex]);
 
-      this.selectableSubject.next(result);
+      this.foundSubject.next(result);
     } else {
-      this.selectableSubject.next(available);
+      this.foundSubject.next(available);
     }
   }
 

frontend/src/app/routes/settings/roles/settings-roles-edit/settings-roles-edit.component.html

@@ -30,6 +30,7 @@
     <div class="col-lg-6 col-12">
       <values-picker
         name="permission"
+        [value-mapper]="UIFriendlyPermission"
         [control]="model.permissions"
         [selection-list]="allPermissions"
       ></values-picker>

frontend/src/app/routes/settings/roles/settings-roles-edit/settings-roles-edit.component.ts

@@ -1,6 +1,8 @@
 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
+import { Permission } from 'picsur-shared/dist/dto/permissions.dto';
 import { HasFailed } from 'picsur-shared/dist/types';
+import { UIFriendlyPermissions } from 'src/app/i18n/permissions.i18n';
 import { SnackBarType } from 'src/app/models/dto/snack-bar-type.dto';
 import { UpdateRoleControl } from 'src/app/models/forms/updaterole.control';
 import { RolesService } from 'src/app/services/api/roles.service';
@@ -41,7 +43,9 @@ export class SettingsRolesEditComponent implements OnInit {
   ) {}
 
   ngOnInit() {
-    Promise.all([this.initRole(), this.initPermissions()]).catch(this.logger.error);
+    Promise.all([this.initRole(), this.initPermissions()]).catch(
+      this.logger.error
+    );
   }
 
   private async initRole() {
@@ -104,4 +108,8 @@ export class SettingsRolesEditComponent implements OnInit {
   cancel() {
     this.router.navigate(['/settings/roles']);
   }
+
+  public UIFriendlyPermission(name: string) {
+    return UIFriendlyPermissions[name as Permission] ?? name;
+  }
 }