feat(link-value): UI now shows that there are no search results (#736)

dasch-swiss · May 12, 2022 · 88b81bf · 88b81bf
1 parent f54dafc
commit 88b81bf
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 0 deletions.
diff --git a/src/app/workspace/resource/values/link-value/link-value.component.html b/src/app/workspace/resource/values/link-value/link-value.component.html
@@ -14,6 +14,9 @@
             </span>
         </div>
         <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayResource">
+        <mat-option *ngIf="showNoResultsMessage" disabled="true">
+            No results were found.
+        </mat-option>
         <mat-option *ngFor="let rc of resourceClasses" (click)="openDialog('createLinkResource', $event, propIri, rc)">
             Create New: {{rc?.label}}
         </mat-option>

diff --git a/src/app/workspace/resource/values/link-value/link-value.component.ts b/src/app/workspace/resource/values/link-value/link-value.component.ts
@@ -71,6 +71,7 @@ export class LinkValueComponent extends BaseValueDirective implements OnInit, On
     properties: ResourcePropertyDefinition[];
 
     loadingResults = false;
+    showNoResultsMessage = false;
 
     constructor(
         private _dialog: MatDialog,
@@ -98,6 +99,8 @@ export class LinkValueComponent extends BaseValueDirective implements OnInit, On
      * @param searchTerm label to be searched
      */
     searchByLabel(searchTerm: string) {
+        this.showNoResultsMessage = false;
+
         // at least 3 characters are required
         if (typeof searchTerm === 'string' && searchTerm.length >= 3) {
             this.loadingResults = true;
@@ -106,6 +109,7 @@ export class LinkValueComponent extends BaseValueDirective implements OnInit, On
                 (response: ReadResourceSequence) => {
                     this.resources = response.resources;
                     this.loadingResults = false;
+                    this.showNoResultsMessage = this.resources.length > 0 ? false : true;
                 });
         } else {
             this.resources = [];