diff --git a/ui-ngx/src/app/modules/home/pages/rulechain/rulechain-page.component.html b/ui-ngx/src/app/modules/home/pages/rulechain/rulechain-page.component.html index c56d09abbb..adeb6a2def 100644 --- a/ui-ngx/src/app/modules/home/pages/rulechain/rulechain-page.component.html +++ b/ui-ngx/src/app/modules/home/pages/rulechain/rulechain-page.component.html @@ -34,7 +34,7 @@ *ngIf="!isImport" [ruleChainType]="ruleChainType" [disabled]="isDirtyValue" - [(ngModel)]="ruleChain.id.id" + [(ngModel)]="ruleChain" (ngModelChange)="currentRuleChainIdChanged(ruleChain.id?.id)"> diff --git a/ui-ngx/src/app/shared/components/rule-chain/rule-chain-select-panel.component.html b/ui-ngx/src/app/shared/components/rule-chain/rule-chain-select-panel.component.html new file mode 100644 index 0000000000..799abc1ee3 --- /dev/null +++ b/ui-ngx/src/app/shared/components/rule-chain/rule-chain-select-panel.component.html @@ -0,0 +1,43 @@ + + + + search + + + check + + + +
+ + {{ 'rulechain.no-rulechains-matching' | translate : {entity: searchText} }} + +
+ + + + diff --git a/ui-ngx/src/app/shared/components/rule-chain/rule-chain-select-panel.component.scss b/ui-ngx/src/app/shared/components/rule-chain/rule-chain-select-panel.component.scss new file mode 100644 index 0000000000..43e98b786a --- /dev/null +++ b/ui-ngx/src/app/shared/components/rule-chain/rule-chain-select-panel.component.scss @@ -0,0 +1,40 @@ +/** + * Copyright © 2016-2024 The Thingsboard Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +@import "../../../../scss/constants"; + +:host { + width: 100%; +} + +::ng-deep { + .tb-autocomplete.tb-rule-chain-search { + .mat-mdc-option.tb-selected-option { + display: flex; + flex-direction: row-reverse; + background-color: rgba(0, 0, 0, .04); + + mat-icon { + margin-right: 0; + margin-left: 16px; + color: $tb-primary-color; + } + + .mdc-list-item__primary-text { + color: $tb-primary-color; + } + } + } +} diff --git a/ui-ngx/src/app/shared/components/rule-chain/rule-chain-select-panel.component.ts b/ui-ngx/src/app/shared/components/rule-chain/rule-chain-select-panel.component.ts new file mode 100644 index 0000000000..df17a45a6a --- /dev/null +++ b/ui-ngx/src/app/shared/components/rule-chain/rule-chain-select-panel.component.ts @@ -0,0 +1,126 @@ +/// +/// Copyright © 2016-2024 The Thingsboard Authors +/// +/// Licensed under the Apache License, Version 2.0 (the "License"); +/// you may not use this file except in compliance with the License. +/// You may obtain a copy of the License at +/// +/// http://www.apache.org/licenses/LICENSE-2.0 +/// +/// Unless required by applicable law or agreed to in writing, software +/// distributed under the License is distributed on an "AS IS" BASIS, +/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +/// See the License for the specific language governing permissions and +/// limitations under the License. +/// + +import { AfterViewInit, Component, ElementRef, Inject, InjectionToken, ViewChild } from '@angular/core'; +import { FormBuilder, FormGroup } from '@angular/forms'; +import { Observable, of } from 'rxjs'; +import { catchError, debounceTime, distinctUntilChanged, map, share, startWith, switchMap } from 'rxjs/operators'; +import { PageLink } from '@shared/models/page/page-link'; +import { Direction } from '@shared/models/page/sort-order'; +import { emptyPageData, PageData } from '@shared/models/page/page-data'; +import { OverlayRef } from '@angular/cdk/overlay'; +import { MatAutocompleteSelectedEvent } from '@angular/material/autocomplete'; +import { RuleChain, RuleChainType } from '@shared/models/rule-chain.models'; +import { RuleChainService } from '@core/http/rule-chain.service'; + +export const RULE_CHAIN_SELECT_PANEL_DATA = new InjectionToken('RuleChainSelectPanelData'); + +export interface RuleChainSelectPanelData { + ruleChainId: string | null; + ruleChainType: RuleChainType; +} + +@Component({ + selector: 'tb-rule-chain-select-panel', + templateUrl: './rule-chain-select-panel.component.html', + styleUrls: ['./rule-chain-select-panel.component.scss'] +}) +export class RuleChainSelectPanelComponent implements AfterViewInit { + + ruleChainId: string; + private readonly ruleChainType: RuleChainType; + + selectRuleChainGroup: FormGroup; + + @ViewChild('ruleChainInput', {static: true}) userInput: ElementRef; + + filteredRuleChains: Observable>; + + searchText = ''; + + ruleChainSelected = false; + + result?: RuleChain; + + private dirty = false; + + constructor(@Inject(RULE_CHAIN_SELECT_PANEL_DATA) public data: RuleChainSelectPanelData, + private overlayRef: OverlayRef, + private fb: FormBuilder, + private ruleChainService: RuleChainService) { + this.ruleChainId = data.ruleChainId; + this.ruleChainType = data.ruleChainType; + this.selectRuleChainGroup = this.fb.group({ + ruleChainInput: ['', {nonNullable: true}] + }); + this.filteredRuleChains = this.selectRuleChainGroup.get('ruleChainInput').valueChanges + .pipe( + debounceTime(150), + startWith(''), + distinctUntilChanged((a: string, b: string) => a.trim() === b.trim()), + switchMap(name => this.fetchRuleChains(name)), + share() + ); + } + + ngAfterViewInit() { + setTimeout(() => { + this.userInput.nativeElement.focus(); + }, 0); + } + + selected(event: MatAutocompleteSelectedEvent): void { + this.clear(); + this.ruleChainSelected = true; + if (event.option.value?.id) { + this.result = event.option.value; + } + this.overlayRef.dispose(); + } + + private fetchRuleChains(searchText?: string): Observable> { + this.searchText = searchText; + const pageLink = new PageLink(50, 0, searchText, { + property: 'name', + direction: Direction.ASC + }); + return this.getRuleChains(pageLink) + .pipe( + catchError(() => of(emptyPageData())), + map(pageData => pageData.data) + ); + } + + onFocus(): void { + if (!this.dirty) { + this.selectRuleChainGroup.get('ruleChainInput').updateValueAndValidity({onlySelf: true}); + this.dirty = true; + } + } + + clear() { + this.selectRuleChainGroup.get('ruleChainInput').patchValue('', {emitEvent: true}); + setTimeout(() => { + this.userInput.nativeElement.blur(); + this.userInput.nativeElement.focus(); + }, 0); + } + + private getRuleChains(pageLink: PageLink): Observable> { + return this.ruleChainService.getRuleChains(pageLink, this.ruleChainType, {ignoreLoading: true}); + } + +} diff --git a/ui-ngx/src/app/shared/components/rule-chain/rule-chain-select.component.html b/ui-ngx/src/app/shared/components/rule-chain/rule-chain-select.component.html index 6a4b69357d..ab2a18f941 100644 --- a/ui-ngx/src/app/shared/components/rule-chain/rule-chain-select.component.html +++ b/ui-ngx/src/app/shared/components/rule-chain/rule-chain-select.component.html @@ -15,17 +15,12 @@ limitations under the License. --> - + settings_ethernet - - - {{ruleChain.name}} - - + + arrow_drop_down diff --git a/ui-ngx/src/app/shared/components/rule-chain/rule-chain-select.component.scss b/ui-ngx/src/app/shared/components/rule-chain/rule-chain-select.component.scss index 614ba0939c..7ad7a49f3e 100644 --- a/ui-ngx/src/app/shared/components/rule-chain/rule-chain-select.component.scss +++ b/ui-ngx/src/app/shared/components/rule-chain/rule-chain-select.component.scss @@ -19,19 +19,19 @@ padding: 0; .tb-rule-select { width: 100%; - } - .tb-rule-chain-select { - display: flex; - min-height: 100%; - pointer-events: all; - } -} -:host ::ng-deep { - .mat-mdc-form-field.tb-rule-select .mdc-text-field { - .mat-mdc-form-field-infix { - min-height: 48px; - padding: 12px 0; + input { + color: #fff; + cursor: pointer; + text-overflow: ellipsis; + pointer-events: none; + + &:disabled { + cursor: unset; + } } } + .disabled { + opacity: 0.5; + } } diff --git a/ui-ngx/src/app/shared/components/rule-chain/rule-chain-select.component.ts b/ui-ngx/src/app/shared/components/rule-chain/rule-chain-select.component.ts index 4657262dce..396fcf88d4 100644 --- a/ui-ngx/src/app/shared/components/rule-chain/rule-chain-select.component.ts +++ b/ui-ngx/src/app/shared/components/rule-chain/rule-chain-select.component.ts @@ -14,20 +14,19 @@ /// limitations under the License. /// -import { Component, forwardRef, Input, OnInit } from '@angular/core'; +import { Component, forwardRef, Injector, Input, StaticProvider, ViewContainerRef } from '@angular/core'; import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; -import { Observable } from 'rxjs'; -import { PageLink } from '@shared/models/page/page-link'; -import { map, share } from 'rxjs/operators'; -import { PageData } from '@shared/models/page/page-data'; -import { Store } from '@ngrx/store'; -import { AppState } from '@app/core/core.state'; import { TooltipPosition } from '@angular/material/tooltip'; import { RuleChain, RuleChainType } from '@shared/models/rule-chain.models'; -import { RuleChainService } from '@core/http/rule-chain.service'; import { isDefinedAndNotNull } from '@core/utils'; import { coerceBoolean } from '@shared/decorators/coercion'; -import { Direction } from '@shared/models/page/sort-order'; +import { Overlay, OverlayConfig, OverlayRef } from '@angular/cdk/overlay'; +import { + RULE_CHAIN_SELECT_PANEL_DATA, RuleChainSelectPanelComponent, + RuleChainSelectPanelData +} from '@shared/components/rule-chain/rule-chain-select-panel.component'; +import { ComponentPortal } from '@angular/cdk/portal'; +import { POSITION_MAP } from '@shared/models/overlay.models'; @Component({ selector: 'tb-rule-chain-select', @@ -39,7 +38,7 @@ import { Direction } from '@shared/models/page/sort-order'; multi: true }] }) -export class RuleChainSelectComponent implements ControlValueAccessor, OnInit { +export class RuleChainSelectComponent implements ControlValueAccessor { @Input() tooltipPosition: TooltipPosition = 'above'; @@ -55,25 +54,14 @@ export class RuleChainSelectComponent implements ControlValueAccessor, OnInit { @Input() ruleChainType: RuleChainType = RuleChainType.CORE; - ruleChains$: Observable>; + ruleChain: RuleChain | null; - ruleChainId: string | null; + panelOpened = false; private propagateChange = (v: any) => { }; - constructor(private ruleChainService: RuleChainService) { - } - - ngOnInit() { - const pageLink = new PageLink(1024, 0, null, { - property: 'name', - direction: Direction.ASC - }); - - this.ruleChains$ = this.getRuleChains(pageLink).pipe( - map((pageData) => pageData.data), - share() - ); + constructor(private overlay: Overlay, + private viewContainerRef: ViewContainerRef) { } registerOnChange(fn: any): void { @@ -83,14 +71,13 @@ export class RuleChainSelectComponent implements ControlValueAccessor, OnInit { registerOnTouched(fn: any): void { } - setDisabledState(isDisabled: boolean): void { this.disabled = isDisabled; } - writeValue(value: string | null): void { + writeValue(value: RuleChain): void { if (isDefinedAndNotNull(value)) { - this.ruleChainId = value; + this.ruleChain = value; } } @@ -98,12 +85,54 @@ export class RuleChainSelectComponent implements ControlValueAccessor, OnInit { this.updateView(); } - private updateView() { - this.propagateChange(this.ruleChainId); + openRuleChainSelectPanel($event: Event) { + if ($event) { + $event.stopPropagation(); + } + if (!this.disabled) { + const target = $event.currentTarget; + const config = new OverlayConfig({ + panelClass: 'tb-filter-panel', + backdropClass: 'cdk-overlay-transparent-backdrop', + hasBackdrop: true, + width: (target as HTMLElement).offsetWidth + }); + config.positionStrategy = this.overlay.position() + .flexibleConnectedTo(target as HTMLElement) + .withPositions([POSITION_MAP.bottom]); + const overlayRef = this.overlay.create(config); + overlayRef.backdropClick().subscribe(() => { + overlayRef.dispose(); + }); + const providers: StaticProvider[] = [ + { + provide: RULE_CHAIN_SELECT_PANEL_DATA, + useValue: { + ruleChainId: this.ruleChain.id?.id, + ruleChainType: this.ruleChainType + } as RuleChainSelectPanelData + }, + { + provide: OverlayRef, + useValue: overlayRef + } + ]; + const injector = Injector.create({parent: this.viewContainerRef.injector, providers}); + const componentRef = overlayRef.attach(new ComponentPortal(RuleChainSelectPanelComponent, + this.viewContainerRef, injector)); + this.panelOpened = true; + componentRef.onDestroy(() => { + this.panelOpened = false; + if (componentRef.instance.ruleChainSelected) { + this.ruleChain = componentRef.instance.result; + this.updateView(); + } + }); + } } - private getRuleChains(pageLink: PageLink): Observable> { - return this.ruleChainService.getRuleChains(pageLink, this.ruleChainType, {ignoreLoading: true}); + private updateView() { + this.propagateChange(this.ruleChain); } } diff --git a/ui-ngx/src/app/shared/shared.module.ts b/ui-ngx/src/app/shared/shared.module.ts index 380fb4d822..0abf2167f6 100644 --- a/ui-ngx/src/app/shared/shared.module.ts +++ b/ui-ngx/src/app/shared/shared.module.ts @@ -216,6 +216,7 @@ import { GalleryImageInputComponent } from '@shared/components/image/gallery-ima import { MultipleGalleryImageInputComponent } from '@shared/components/image/multiple-gallery-image-input.component'; import { EmbedImageDialogComponent } from '@shared/components/image/embed-image-dialog.component'; import { ImageGalleryDialogComponent } from '@shared/components/image/image-gallery-dialog.component'; +import { RuleChainSelectPanelComponent } from '@shared/components/rule-chain/rule-chain-select-panel.component'; export function MarkedOptionsFactory(markedOptionsService: MarkedOptionsService) { return markedOptionsService; @@ -397,6 +398,7 @@ export function MarkedOptionsFactory(markedOptionsService: MarkedOptionsService) StringAutocompleteComponent, MaterialIconsComponent, RuleChainSelectComponent, + RuleChainSelectPanelComponent, TbIconComponent, HintTooltipIconComponent, ImportDialogComponent, @@ -648,6 +650,7 @@ export function MarkedOptionsFactory(markedOptionsService: MarkedOptionsService) StringAutocompleteComponent, MaterialIconsComponent, RuleChainSelectComponent, + RuleChainSelectPanelComponent, TbIconComponent, HintTooltipIconComponent, ImportDialogComponent,