Merge pull request #10982 from ArtemDzhereleiko/AD/imp/autocomplete-no-text

Added no text option for autocomplete

ui-ngx/src/app/modules/home/pages/widget/widget-type-autocomplete.component.html

@@ -45,9 +45,16 @@
       </div>
     </mat-option>
     <mat-option *ngIf="!(filteredWidgetTypes | async)?.length" [value]="null">
-      <span>
+      <div (click)="$event.stopPropagation()">
+        <div *ngIf="!textIsNotEmpty(searchText); else searchNotEmpty">
+          <span>{{ 'widget.no-widgets-text' | translate }}</span>
+        </div>
+        <ng-template #searchNotEmpty>
+          <span>
           {{ translate.get('widget.no-widgets-matching', {entity: searchText}) | async }}
-      </span>
+          </span>
+        </ng-template>
+      </div>
     </mat-option>
   </mat-autocomplete>
   <mat-error>

ui-ngx/src/app/modules/home/pages/widget/widget-type-autocomplete.component.ts

@@ -211,4 +211,8 @@ export class WidgetTypeAutocompleteComponent implements ControlValueAccessor, On
     }, 0);
   }
 
+  textIsNotEmpty(text: string): boolean {
+    return (text && text.length > 0);
+  }
+
 }

ui-ngx/src/app/shared/components/dashboard-autocomplete.component.html

@@ -57,9 +57,16 @@
       <span [innerHTML]="dashboard.title | highlight:searchText"></span>
     </mat-option>
     <mat-option *ngIf="!(filteredDashboards | async)?.length" [value]="null">
-      <span>
+      <div (click)="$event.stopPropagation()">
+        <div *ngIf="!textIsNotEmpty(searchText); else searchNotEmpty">
+          <span>{{ 'dashboard.no-dashboards-text' | translate }}</span>
+        </div>
+        <ng-template #searchNotEmpty>
+          <span>
           {{ translate.get('dashboard.no-dashboards-matching', {entity: searchText}) | async }}
-      </span>
+          </span>
+        </ng-template>
+      </div>
     </mat-option>
   </mat-autocomplete>
   <mat-error *ngIf="!inlineField">

ui-ngx/src/app/shared/components/dashboard-autocomplete.component.ts

@@ -276,4 +276,7 @@ export class DashboardAutocompleteComponent implements ControlValueAccessor, OnI
     }, 0);
   }
 
+  textIsNotEmpty(text: string): boolean {
+    return (text && text.length > 0);
+  }
 }

ui-ngx/src/app/shared/components/entity/entity-autocomplete.component.html

@@ -40,9 +40,16 @@
       <span [innerHTML]="entity.name | highlight:searchText:true:'ig'"></span>
     </mat-option>
     <mat-option *ngIf="!(filteredEntities | async)?.length" [value]="null">
-      <span>
+      <div (click)="$event.stopPropagation()">
-          {{ translate.get(noEntitiesMatchingText, {entity: searchText}) | async }}
+        <div *ngIf="!textIsNotEmpty(searchText); else searchNotEmpty">
-      </span>
+          <span>{{ notFoundEntities | translate }}</span>
+        </div>
+        <ng-template #searchNotEmpty>
+          <span>
+              {{ translate.get(noEntitiesMatchingText, {entity: searchText}) | async }}
+          </span>
+        </ng-template>
+      </div>
     </mat-option>
   </mat-autocomplete>
   <mat-error *ngIf="selectEntityFormGroup.get('entity').hasError('required')">

ui-ngx/src/app/shared/components/entity/entity-autocomplete.component.ts

@@ -64,6 +64,7 @@ export class EntityAutocompleteComponent implements ControlValueAccessor, OnInit
   entityText: string;
 
   noEntitiesMatchingText: string;
+  notFoundEntities = 'entity.no-entities-text';
 
   entityRequiredText: string;
 
@@ -201,63 +202,75 @@ export class EntityAutocompleteComponent implements ControlValueAccessor, OnInit
           this.entityText = 'asset.asset';
           this.noEntitiesMatchingText = 'asset.no-assets-matching';
           this.entityRequiredText = 'asset.asset-required';
+          this.notFoundEntities = 'asset.no-assets-text';
           break;
         case EntityType.DEVICE:
           this.entityText = 'device.device';
           this.noEntitiesMatchingText = 'device.no-devices-matching';
           this.entityRequiredText = 'device.device-required';
+          this.notFoundEntities = 'device.no-devices-text';
           break;
         case EntityType.EDGE:
           this.entityText = 'edge.edge';
           this.noEntitiesMatchingText = 'edge.no-edges-matching';
           this.entityRequiredText = 'edge.edge-required';
+          this.notFoundEntities = 'edge.no-edges-text';
           break;
         case EntityType.ENTITY_VIEW:
           this.entityText = 'entity-view.entity-view';
           this.noEntitiesMatchingText = 'entity-view.no-entity-views-matching';
           this.entityRequiredText = 'entity-view.entity-view-required';
+          this.notFoundEntities = 'entity-view.no-entity-views-text';
           break;
         case EntityType.RULE_CHAIN:
           this.entityText = 'rulechain.rulechain';
           this.noEntitiesMatchingText = 'rulechain.no-rulechains-matching';
           this.entityRequiredText = 'rulechain.rulechain-required';
+          this.notFoundEntities = 'rulechain.no-rulechains-text';
           break;
         case EntityType.TENANT:
         case AliasEntityType.CURRENT_TENANT:
           this.entityText = 'tenant.tenant';
           this.noEntitiesMatchingText = 'tenant.no-tenants-matching';
           this.entityRequiredText = 'tenant.tenant-required';
+          this.notFoundEntities = 'tenant.no-tenants-text';
           break;
         case EntityType.CUSTOMER:
           this.entityText = 'customer.customer';
           this.noEntitiesMatchingText = 'customer.no-customers-matching';
           this.entityRequiredText = 'customer.customer-required';
+          this.notFoundEntities = 'customer.no-customers-text';
           break;
         case EntityType.USER:
         case AliasEntityType.CURRENT_USER:
           this.entityText = 'user.user';
           this.noEntitiesMatchingText = 'user.no-users-matching';
           this.entityRequiredText = 'user.user-required';
+          this.notFoundEntities = 'user.no-users-text';
           break;
         case EntityType.DASHBOARD:
           this.entityText = 'dashboard.dashboard';
           this.noEntitiesMatchingText = 'dashboard.no-dashboards-matching';
           this.entityRequiredText = 'dashboard.dashboard-required';
+          this.notFoundEntities = 'dashboard.no-dashboards-text';
           break;
         case EntityType.ALARM:
           this.entityText = 'alarm.alarm';
           this.noEntitiesMatchingText = 'alarm.no-alarms-matching';
           this.entityRequiredText = 'alarm.alarm-required';
+          this.notFoundEntities = 'alarm.no-alarms-prompt';
           break;
         case EntityType.QUEUE_STATS:
           this.entityText = 'queue-statistics.queue-statistics';
           this.noEntitiesMatchingText = 'queue-statistics.no-queue-statistics-matching';
           this.entityRequiredText = 'queue-statistics.queue-statistics-required';
+          this.notFoundEntities = 'queue-statistics.no-queue-statistics-text';
           break;
         case AliasEntityType.CURRENT_CUSTOMER:
           this.entityText = 'customer.default-customer';
           this.noEntitiesMatchingText = 'customer.no-customers-matching';
           this.entityRequiredText = 'customer.default-customer-required';
+          this.notFoundEntities = 'customer.no-customers-text';
           break;
         case AliasEntityType.CURRENT_USER_OWNER:
           const authUser =  getCurrentAuthUser(this.store);
@@ -375,6 +388,10 @@ export class EntityAutocompleteComponent implements ControlValueAccessor, OnInit
     ));
   }
 
+  textIsNotEmpty(text: string): boolean {
+    return (text && text.length > 0);
+  }
+
   clear() {
     this.selectEntityFormGroup.get('entity').patchValue('', {emitEvent: true});
     setTimeout(() => {

ui-ngx/src/app/shared/components/entity/entity-list.component.html

@@ -42,9 +42,16 @@
       <span [innerHTML]="entity.name | highlight:searchText"></span>
     </mat-option>
     <mat-option *ngIf="!(filteredEntities | async)?.length" [value]="null">
-      <span>
+      <div (click)="$event.stopPropagation()">
+        <div *ngIf="!textIsNotEmpty(searchText); else searchNotEmpty">
+          <span>{{ 'entity.no-entities-text' | translate }}</span>
+        </div>
+        <ng-template #searchNotEmpty>
+          <span>
           {{ translate.get('entity.no-entities-matching', {entity: searchText}) | async }}
-      </span>
+          </span>
+        </ng-template>
+      </div>
     </mat-option>
   </mat-autocomplete>
   <mat-hint *ngIf="hint">

ui-ngx/src/app/shared/components/entity/entity-list.component.ts

@@ -257,4 +257,8 @@ export class EntityListComponent implements ControlValueAccessor, OnInit, AfterV
     }, 0);
   }
 
+  textIsNotEmpty(text: string): boolean {
+    return (text && text.length > 0);
+  }
+
 }

ui-ngx/src/assets/locale/locale.constant-en_US.json

@@ -2177,6 +2177,7 @@
         "add-entity-type": "Add entity type",
         "enter-entity-type": "Enter entity type",
         "no-entities-matching": "No entities matching '{{entity}}' were found.",
+        "no-entities-text": "No entities found",
         "no-entity-types-matching": "No entity types matching '{{entityType}}' were found.",
         "name-starts-with": "Name expression",
         "help-text": "Use '%' according to need: '%entity_name_contains%', '%entity_name_ends', 'entity_starts_with'.",