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

UI: Add no text for resources autocomplete

Browse Source
This commit is contained in:
Artem Dzhereleiko 2024-12-06 09:54:03 +02:00
parent cca4ac3629
commit 48c8160e1f
3 changed files with 21 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -41,8 +41,17 @@
<mat-option *ngFor="let resource of filteredResources$ | async" [value]="resource"> <mat-option *ngFor="let resource of filteredResources$ | async" [value]="resource">
<span [innerHTML]="resource.title | highlight:searchText"></span> <span [innerHTML]="resource.title | highlight:searchText"></span>
</mat-option> </mat-option>
<mat-option *ngIf="!(filteredResources$ | async)?.length" [value]="searchText"> <mat-option *ngIf="!(filteredResources$ | async)?.length" [value]="null">
{{ searchText }} <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-option>
</mat-autocomplete> </mat-autocomplete>
</mat-form-field> </mat-form-field>

8
ui-ngx/src/app/shared/components/resource/resource-autocomplete.component.ts
View File

@ -33,6 +33,7 @@ import { TbResourceId } from '@shared/models/id/tb-resource-id';
import { ResourceService } from '@core/http/resource.service'; import { ResourceService } from '@core/http/resource.service';
import { PageLink } from '@shared/models/page/page-link'; import { PageLink } from '@shared/models/page/page-link';
import { MatFormFieldAppearance, SubscriptSizing } from '@angular/material/form-field'; import { MatFormFieldAppearance, SubscriptSizing } from '@angular/material/form-field';
import { TranslateService } from '@ngx-translate/core';
@Component({ @Component({
selector: 'tb-resource-autocomplete', selector: 'tb-resource-autocomplete',
@ -95,7 +96,8 @@ export class ResourceAutocompleteComponent implements ControlValueAccessor, OnIn
private propagateChange: (value: any) => void = () => {}; private propagateChange: (value: any) => void = () => {};
constructor(private fb: FormBuilder, constructor(private fb: FormBuilder,
private resourceService: ResourceService) { private resourceService: ResourceService,
public translate: TranslateService) {
} }
ngOnInit(): void { 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>> { private fetchResources(searchText?: string): Observable<Array<ResourceInfo>> {
this.searchText = searchText; this.searchText = searchText;
return this.resourceService.getResources(new PageLink(50, 0, searchText), ResourceType.JS_MODULE, this.subType, {ignoreLoading: true}).pipe( return this.resourceService.getResources(new PageLink(50, 0, searchText), ResourceType.JS_MODULE, this.subType, {ignoreLoading: true}).pipe(

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

@ -3332,7 +3332,9 @@
"module-no-members": "Module has no exported members", "module-no-members": "Module has no exported members",
"module-load-error": "Module load error", "module-load-error": "Module load error",
"source-code": "Source code", "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-val": {
"key": "Key", "key": "Key",