INT Release

apps/client-asset-sg/src/app/i18n/de.ts

@@ -182,6 +182,7 @@ export const deAppTranslations = {
         website: 'Website',
         create: 'Erstellen',
         noContacts: 'Keine Kontakte',
+        contactPlaceholder: 'Suche über Namen',
       },
       references: {
         tabName: 'Verweise',

apps/client-asset-sg/src/app/i18n/en.ts

@@ -183,6 +183,7 @@ export const enAppTranslations: AppTranslations = {
         website: 'Website',
         create: 'Create',
         noContacts: 'No contacts',
+        contactPlaceholder: 'Search by name',
       },
       references: {
         tabName: 'References',

apps/client-asset-sg/src/app/i18n/fr.ts

@@ -184,6 +184,7 @@ export const frAppTranslations: AppTranslations = {
         website: 'Site web',
         create: 'Créer',
         noContacts: 'Aucun contact',
+        contactPlaceholder: 'Recherche par nom',
       },
       references: {
         tabName: 'Références',

apps/client-asset-sg/src/app/i18n/it.ts

@@ -183,6 +183,7 @@ export const itAppTranslations: AppTranslations = {
         website: 'IT Website',
         create: 'IT Erstellen',
         noContacts: 'RM Keine Kontakte',
+        contactPlaceholder: 'IT Suche über Namen',
       },
       references: {
         tabName: 'IT Verweise',

apps/client-asset-sg/src/app/i18n/rm.ts

@@ -183,6 +183,7 @@ export const rmAppTranslations: AppTranslations = {
         website: 'RM Website',
         create: 'RM Erstellen',
         noContacts: 'RM Keine Kontakte',
+        contactPlaceholder: 'IT Suche über Namen',
       },
       references: {
         tabName: 'RM Verweise',

apps/server-asset-sg/src/features/files/file-ocr.service.ts

@@ -171,8 +171,12 @@ const makeResponseError = async (response: Response): Promise<Error> => {
     if (hasKey(data, 'message')) {
       data = data.message;
     }
+  } else if (hasKey(data, 'message')) {
+    data = data.message;
   }
-  return new Error(`${response.status} ${response.statusText} - ${data ?? body}`);
+  data = data ?? body;
+  const message = typeof data === 'string' ? data : JSON.stringify(data);
+  return new Error(`${response.status} ${response.statusText} - ${message}`);
 };
 
 const hasKey = <K extends string>(value: unknown, key: K): value is { [k in K]: unknown } => {

libs/asset-editor/src/lib/components/asset-editor-tab-contacts/asset-editor-tab-contacts.component.html

@@ -72,30 +72,37 @@
                     <mat-label translate>edit.tabs.contacts.role</mat-label>
                     <mat-select formControlName="role">
                       <mat-option value="author" class="ellipsis">{{ "contactRoles.author" | translate }}</mat-option>
-                      <mat-option value="initiator" class="ellipsis">{{
-                        "contactRoles.initiator" | translate
-                      }}</mat-option>
-                      <mat-option value="supplier" class="ellipsis">{{
-                        "contactRoles.supplier" | translate
-                      }}</mat-option>
+                      <mat-option value="initiator" class="ellipsis"
+                        >{{ "contactRoles.initiator" | translate }}
+                      </mat-option>
+                      <mat-option value="supplier" class="ellipsis"
+                        >{{ "contactRoles.supplier" | translate }}
+                      </mat-option>
                     </mat-select>
                     <mat-error *ngIf="$any(form).controls['role'].hasError('required')" translate>required</mat-error>
                   </mat-form-field>
                   <ng-container *ngIf="uiMode === 'linkExisting'">
                     <mat-form-field class="mb-2">
                       <mat-label translate>edit.tabs.contacts.contact</mat-label>
-                      <mat-select formControlName="contactId">
-                        <mat-option
-                          *rxFor="let contact of _availableContacts$ | push"
-                          [value]="contact.id"
-                          class="ellipsis"
-                        >
+                      <input
+                        matInput
+                        type="text"
+                        [placeholder]="'edit.tabs.contacts.contactPlaceholder' | translate"
+                        (input)="contactQuery$.next($any($event.target)?.value ?? '')"
+                        [matAutocomplete]="contactAutocomplete"
+                      />
+                      <mat-autocomplete
+                        #contactAutocomplete="matAutocomplete"
+                        [displayWith]="displayContact"
+                        (optionSelected)="onContactSelected($event)"
+                      >
+                        <mat-option *rxFor="let contact of contacts$" [value]="contact" class="contact">
                           {{ contact.name }}
                         </mat-option>
-                      </mat-select>
-                      <mat-error *ngIf="$any(form).controls['contactId'].hasError('required')" translate
-                        >required</mat-error
-                      >
+                      </mat-autocomplete>
+                      <mat-error *ngIf="$any(form).controls['contactId'].hasError('required')" translate>
+                        required
+                      </mat-error>
                     </mat-form-field>
                     <div class="button-area">
                       <button asset-sg-primary (click)="link()" translate>edit.tabs.contacts.link</button>

libs/asset-editor/src/lib/components/asset-editor-tab-contacts/asset-editor-tab-contacts.component.scss

@@ -7,7 +7,7 @@
   width: 34rem;
 }
 
-.contact {
+li.contact {
   display: grid;
   grid-template-areas: "role buttons" "name buttons";
   grid-template-columns: auto 5rem;
@@ -23,3 +23,12 @@
     grid-area: buttons;
   }
 }
+
+::ng-deep .mat-mdc-option.contact > .mdc-list-item__primary-text {
+  flex: 1 1 100%;
+  width: 100%;
+
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}

libs/asset-editor/src/lib/components/asset-editor-tab-contacts/asset-editor-tab-contacts.component.ts

@@ -1,5 +1,6 @@
 import { ChangeDetectionStrategy, Component, EventEmitter, inject, Input, OnInit, Output } from '@angular/core';
 import { FormBuilder, FormControl, FormGroupDirective, Validators } from '@angular/forms';
+import { MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
 import { fromAppShared } from '@asset-sg/client-shared';
 import { ordStringLowerCase } from '@asset-sg/core';
 import {
@@ -19,7 +20,19 @@ import { Ord as ordNumber } from 'fp-ts/number';
 import * as O from 'fp-ts/Option';
 import { contramap } from 'fp-ts/Ord';
 import * as R from 'fp-ts/Record';
-import { distinctUntilChanged, EMPTY, identity, map, Observable, skip, switchMap, take } from 'rxjs';
+import {
+  combineLatest,
+  debounceTime,
+  distinctUntilChanged,
+  EMPTY,
+  identity,
+  map,
+  Observable,
+  skip,
+  Subject,
+  switchMap,
+  take,
+} from 'rxjs';
 
 import {
   AssetEditorContactsFormGroup,
@@ -28,6 +41,7 @@ import {
 } from '../asset-editor-form-group';
 
 type UIMode = 'view' | 'linkExisting' | 'linkNew' | 'viewContactDetails' | 'editContactDetails';
+
 interface TabContactsState {
   referenceDataVM: fromAppShared.ReferenceDataVM;
   assetContacts: AssetContactEdit[];
@@ -149,6 +163,21 @@ export class AssetEditorTabContactsComponent implements OnInit {
 
   public _currentContactId$ = this._state.select('currentContactId');
 
+  readonly contactQuery$ = new Subject<string>();
+
+  readonly contacts$ = combineLatest([
+    this.contactQuery$.pipe(debounceTime(300)),
+    this._state.select('referenceDataVM').pipe(map((data) => Object.values(data.contacts))),
+  ]).pipe(
+    map(([query, contacts]) => {
+      if (query.length < 3) {
+        return contacts;
+      }
+      query = query.toLocaleLowerCase();
+      return contacts.filter((it) => it.name.toLocaleLowerCase().includes(query));
+    })
+  );
+
   public getForm(uiMode: UIMode) {
     switch (uiMode) {
       case 'linkExisting':
@@ -292,4 +321,12 @@ export class AssetEditorTabContactsComponent implements OnInit {
 
     this.createContact$.next(rest);
   }
+
+  displayContact(contact: Contact): string {
+    return contact.name;
+  }
+
+  onContactSelected(event: MatAutocompleteSelectedEvent) {
+    this._linkContactForm.controls.contactId.setValue((event.option.value as Contact).id);
+  }
 }