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

UI Refactoring rule-chain-autocomplete component

Browse Source
This commit is contained in:
Vladyslav_Prykhodko 2020-09-16 17:28:33 +03:00
parent b7718b91d4
commit 08b346da7f
2 changed files with 17 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
ui-ngx/src/app/modules/home/components/rule-chain/rule-chain-autocomplete.component.html
View File

@ -17,11 +17,11 @@
--> -->
<mat-form-field [formGroup]="selectRuleChainFormGroup" class="mat-block"> <mat-form-field [formGroup]="selectRuleChainFormGroup" class="mat-block">
<input matInput type="text" placeholder="{{ ruleChainLabel | translate }}" <input matInput type="text" placeholder="{{ ruleChainLabel | translate }}"
#entityInput #ruleChainInput
formControlName="ruleChainId" formControlName="ruleChainId"
(focusin)="onFocus()" (focusin)="onFocus()"
[required]="required" [required]="required"
[matAutocomplete]="entityAutocomplete"> [matAutocomplete]="ruleChainAutocomplete">
<button *ngIf="selectRuleChainFormGroup.get('ruleChainId').value && !disabled" <button *ngIf="selectRuleChainFormGroup.get('ruleChainId').value && !disabled"
type="button" type="button"
matSuffix mat-button mat-icon-button aria-label="Clear" matSuffix mat-button mat-icon-button aria-label="Clear"
@ -29,10 +29,10 @@
<mat-icon class="material-icons">close</mat-icon> <mat-icon class="material-icons">close</mat-icon>
</button> </button>
<mat-autocomplete class="tb-autocomplete" <mat-autocomplete class="tb-autocomplete"
#entityAutocomplete="matAutocomplete" #ruleChainAutocomplete="matAutocomplete"
[displayWith]="displayEntityFn"> [displayWith]="displayRuleChainFn">
<mat-option *ngFor="let entity of filteredRuleChains | async" [value]="entity"> <mat-option *ngFor="let ruleChain of filteredRuleChains | async" [value]="ruleChain">
<span [innerHTML]="entity.name | highlight:searchText"></span> <span [innerHTML]="ruleChain.name | highlight:searchText"></span>
</mat-option> </mat-option>
<mat-option *ngIf="!(filteredRuleChains | async)?.length" [value]="null" class="tb-not-found"> <mat-option *ngIf="!(filteredRuleChains | async)?.length" [value]="null" class="tb-not-found">
<div class="tb-not-found-content" (click)="$event.stopPropagation()"> <div class="tb-not-found-content" (click)="$event.stopPropagation()">

19
ui-ngx/src/app/modules/home/components/rule-chain/rule-chain-autocomplete.component.ts
View File

@ -66,7 +66,8 @@ export class RuleChainAutocompleteComponent implements ControlValueAccessor, OnI
@Input() @Input()
disabled: boolean; disabled: boolean;
@ViewChild('entityInput', {static: true}) entityInput: ElementRef; @ViewChild('ruleChainInput', {static: true}) ruleChainInput: ElementRef;
@ViewChild('ruleChainInput', {read: MatAutocompleteTrigger}) ruleChainAutocomplete: MatAutocompleteTrigger;
filteredRuleChains: Observable<Array<BaseData<EntityId>>>; filteredRuleChains: Observable<Array<BaseData<EntityId>>>;
@ -117,9 +118,9 @@ export class RuleChainAutocompleteComponent implements ControlValueAccessor, OnI
ngAfterViewInit(): void {} ngAfterViewInit(): void {}
getCurrentEntity(): BaseData<EntityId> | null { getCurrentEntity(): BaseData<EntityId> | null {
const currentEntity = this.selectRuleChainFormGroup.get('ruleChainId').value; const currentRuleChain = this.selectRuleChainFormGroup.get('ruleChainId').value;
if (currentEntity && typeof currentEntity !== 'string') { if (currentRuleChain && typeof currentRuleChain !== 'string') {
return currentEntity as BaseData<EntityId>; return currentRuleChain as BaseData<EntityId>;
} else { } else {
return null; return null;
} }
@ -180,8 +181,8 @@ export class RuleChainAutocompleteComponent implements ControlValueAccessor, OnI
} }
} }
displayEntityFn(entity?: BaseData<EntityId>): string | undefined { displayRuleChainFn(ruleChain?: BaseData<EntityId>): string | undefined {
return entity ? entity.name : undefined; return ruleChain ? ruleChain.name : undefined;
} }
fetchRuleChain(searchText?: string): Observable<Array<BaseData<EntityId>>> { fetchRuleChain(searchText?: string): Observable<Array<BaseData<EntityId>>> {
@ -193,12 +194,14 @@ export class RuleChainAutocompleteComponent implements ControlValueAccessor, OnI
clear() { clear() {
this.selectRuleChainFormGroup.get('ruleChainId').patchValue('', {emitEvent: true}); this.selectRuleChainFormGroup.get('ruleChainId').patchValue('', {emitEvent: true});
setTimeout(() => { setTimeout(() => {
this.entityInput.nativeElement.blur(); this.ruleChainInput.nativeElement.blur();
this.entityInput.nativeElement.focus(); this.ruleChainInput.nativeElement.focus();
}, 0); }, 0);
} }
createDefaultRuleChain($event: Event, ruleChainName: string) { createDefaultRuleChain($event: Event, ruleChainName: string) {
$event.preventDefault();
this.ruleChainAutocomplete.closePanel();
this.ruleChainService.createDefaultRuleChain(ruleChainName).subscribe((ruleChain) => { this.ruleChainService.createDefaultRuleChain(ruleChainName).subscribe((ruleChain) => {
this.updateView(ruleChain.id.id); this.updateView(ruleChain.id.id);
}); });