From 48c8160e1f01cab7de5c0e6a7315bf85805f6ec5 Mon Sep 17 00:00:00 2001
From: Artem Dzhereleiko <Dgerik2015@gmail.com>
Date: Fri, 6 Dec 2024 09:54:03 +0200
Subject: [PATCH] UI: Add no text for resources autocomplete

---
 .../resource/resource-autocomplete.component.html   | 13 +++++++++++--
 .../resource/resource-autocomplete.component.ts     |  8 +++++++-
 ui-ngx/src/assets/locale/locale.constant-en_US.json |  4 +++-
 3 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/ui-ngx/src/app/shared/components/resource/resource-autocomplete.component.html b/ui-ngx/src/app/shared/components/resource/resource-autocomplete.component.html
index 7d0c9ffb9f..bcc566aeea 100644
--- a/ui-ngx/src/app/shared/components/resource/resource-autocomplete.component.html
+++ b/ui-ngx/src/app/shared/components/resource/resource-autocomplete.component.html
@@ -41,8 +41,17 @@
     <mat-option *ngFor="let resource of filteredResources$ | async" [value]="resource">
       <span [innerHTML]="resource.title | highlight:searchText"></span>
     </mat-option>
-    <mat-option *ngIf="!(filteredResources$ | async)?.length" [value]="searchText">
-      {{ searchText }}
+    <mat-option *ngIf="!(filteredResources$ | async)?.length" [value]="null">
+      <div (click)="$event.stopPropagation()">
+        <div *ngIf="!textIsNotEmpty(searchText); else searchNotEmpty">
+          <span>{{ 'js-func.no-js-module-text' | translate }}</span>
+        </div>
+        <ng-template #searchNotEmpty>
+          <span>
+              {{ translate.get('js-func.no-js-module-matching', {module: searchText}) | async }}
+          </span>
+        </ng-template>
+      </div>
     </mat-option>
   </mat-autocomplete>
 </mat-form-field>
diff --git a/ui-ngx/src/app/shared/components/resource/resource-autocomplete.component.ts b/ui-ngx/src/app/shared/components/resource/resource-autocomplete.component.ts
index 0cf13f2052..b87cfe8c4f 100644
--- a/ui-ngx/src/app/shared/components/resource/resource-autocomplete.component.ts
+++ b/ui-ngx/src/app/shared/components/resource/resource-autocomplete.component.ts
@@ -33,6 +33,7 @@ import { TbResourceId } from '@shared/models/id/tb-resource-id';
 import { ResourceService } from '@core/http/resource.service';
 import { PageLink } from '@shared/models/page/page-link';
 import { MatFormFieldAppearance, SubscriptSizing } from '@angular/material/form-field';
+import { TranslateService } from '@ngx-translate/core';
 
 @Component({
   selector: 'tb-resource-autocomplete',
@@ -95,7 +96,8 @@ export class ResourceAutocompleteComponent implements ControlValueAccessor, OnIn
   private propagateChange: (value: any) => void = () => {};
 
   constructor(private fb: FormBuilder,
-              private resourceService: ResourceService) {
+              private resourceService: ResourceService,
+              public translate: TranslateService) {
   }
 
   ngOnInit(): void {
@@ -210,6 +212,10 @@ export class ResourceAutocompleteComponent implements ControlValueAccessor, OnIn
     }
   }
 
+  textIsNotEmpty(text: string): boolean {
+    return (text && text.length > 0);
+  }
+
   private fetchResources(searchText?: string): Observable<Array<ResourceInfo>> {
     this.searchText = searchText;
     return this.resourceService.getResources(new PageLink(50, 0, searchText), ResourceType.JS_MODULE, this.subType, {ignoreLoading: true}).pipe(
diff --git a/ui-ngx/src/assets/locale/locale.constant-en_US.json b/ui-ngx/src/assets/locale/locale.constant-en_US.json
index c2f45da84f..6b50deb6ab 100644
--- a/ui-ngx/src/assets/locale/locale.constant-en_US.json
+++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json
@@ -3332,7 +3332,9 @@
         "module-no-members": "Module has no exported members",
         "module-load-error": "Module load error",
         "source-code": "Source code",
-        "source-code-load-error": "Source code load error"
+        "source-code-load-error": "Source code load error",
+        "no-js-module-text": "No JS module found",
+        "no-js-module-matching": "No JS module matching '{{module}}' were found."
     },
     "key-val": {
         "key": "Key",