dendi-wang/thingsboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI: Add no text for autocomplete

Browse Source
This commit is contained in:
Artem Dzhereleiko 2024-06-12 11:20:54 +03:00
parent 34a176e868
commit 3e16c5e183
9 changed files with 66 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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>

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

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

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

@ -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">

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

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

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

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

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

@ -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(() => {

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

@ -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">

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

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

1
ui-ngx/src/assets/locale/locale.constant-en_US.json
View File

@ -2176,6 +2176,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'.",