Artem Dzhereleiko
3 years ago
9 changed files with 260 additions and 47 deletions
@ -0,0 +1,26 @@ |
|||
<!-- |
|||
|
|||
Copyright © 2016-2023 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. |
|||
|
|||
--> |
|||
<mat-select fxFlex |
|||
[required]="required" |
|||
[disabled]="disabled" |
|||
[(ngModel)]="ruleChainId" |
|||
(ngModelChange)="ruleChainIdChanged()"> |
|||
<mat-option *ngFor="let ruleChain of ruleChains$ | async" [value]="ruleChain.id.id"> |
|||
{{ruleChain.name}} |
|||
</mat-option> |
|||
</mat-select> |
|||
@ -0,0 +1,38 @@ |
|||
/** |
|||
* Copyright © 2016-2023 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. |
|||
*/ |
|||
:host { |
|||
min-width: 52px; |
|||
width: 100%; |
|||
padding: 0 6px; |
|||
.mat-mdc-select { |
|||
display: flex; |
|||
max-width: 300px; |
|||
height: 48px; |
|||
min-height: 100%; |
|||
pointer-events: all; |
|||
} |
|||
} |
|||
|
|||
:host ::ng-deep { |
|||
.mat-mdc-select { |
|||
.mat-mdc-select-value { |
|||
max-width: 282px; |
|||
} |
|||
.mat-mdc-select-arrow { |
|||
width: 24px; |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,117 @@ |
|||
///
|
|||
/// Copyright © 2016-2023 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 { Component, ElementRef, forwardRef, Inject, Input, OnInit, ViewChild, 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 { coerceBooleanProperty } from '@angular/cdk/coercion'; |
|||
import { TooltipPosition } from '@angular/material/tooltip'; |
|||
import { CdkOverlayOrigin, Overlay } from '@angular/cdk/overlay'; |
|||
import { BreakpointObserver } from '@angular/cdk/layout'; |
|||
import { DOCUMENT } from '@angular/common'; |
|||
import { WINDOW } from '@core/services/window.service'; |
|||
import { RuleChain, RuleChainType } from '@shared/models/rule-chain.models'; |
|||
import { RuleChainService } from '@core/http/rule-chain.service'; |
|||
|
|||
// @dynamic
|
|||
@Component({ |
|||
selector: 'tb-rule-chain-select', |
|||
templateUrl: './rule-chain-select.component.html', |
|||
styleUrls: ['./rule-chain-select.component.scss'], |
|||
providers: [{ |
|||
provide: NG_VALUE_ACCESSOR, |
|||
useExisting: forwardRef(() => RuleChainSelectComponent), |
|||
multi: true |
|||
}] |
|||
}) |
|||
export class RuleChainSelectComponent implements ControlValueAccessor, OnInit { |
|||
|
|||
@Input() |
|||
tooltipPosition: TooltipPosition = 'above'; |
|||
|
|||
private requiredValue: boolean; |
|||
get required(): boolean { |
|||
return this.requiredValue; |
|||
} |
|||
@Input() |
|||
set required(value: boolean) { |
|||
this.requiredValue = coerceBooleanProperty(value); |
|||
} |
|||
|
|||
@Input() |
|||
disabled: boolean; |
|||
|
|||
ruleChains$: Observable<Array<RuleChain>>; |
|||
|
|||
ruleChainId: string | null; |
|||
|
|||
@ViewChild('ruleChainSelectPanelOrigin') ruleChainSelectPanelOrigin: CdkOverlayOrigin; |
|||
|
|||
private propagateChange = (v: any) => { }; |
|||
|
|||
constructor(private store: Store<AppState>, |
|||
private ruleChainService: RuleChainService, |
|||
private overlay: Overlay, |
|||
private breakpointObserver: BreakpointObserver, |
|||
private viewContainerRef: ViewContainerRef, |
|||
private nativeElement: ElementRef, |
|||
@Inject(DOCUMENT) private document: Document, |
|||
@Inject(WINDOW) private window: Window) { |
|||
} |
|||
|
|||
registerOnChange(fn: any): void { |
|||
this.propagateChange = fn; |
|||
} |
|||
|
|||
registerOnTouched(fn: any): void { |
|||
} |
|||
|
|||
ngOnInit() { |
|||
|
|||
const pageLink = new PageLink(100); |
|||
|
|||
this.ruleChains$ = this.getRuleChains(pageLink).pipe( |
|||
map((pageData) => pageData.data), |
|||
share() |
|||
); |
|||
} |
|||
|
|||
setDisabledState(isDisabled: boolean): void { |
|||
this.disabled = isDisabled; |
|||
} |
|||
|
|||
writeValue(value: string | null): void { |
|||
this.ruleChainId = value; |
|||
} |
|||
|
|||
ruleChainIdChanged() { |
|||
this.updateView(); |
|||
} |
|||
|
|||
private updateView() { |
|||
this.propagateChange(this.ruleChainId); |
|||
} |
|||
|
|||
private getRuleChains(pageLink: PageLink): Observable<PageData<RuleChain>> { |
|||
return this.ruleChainService.getRuleChains(pageLink, RuleChainType.CORE, {ignoreLoading: true}); |
|||
} |
|||
|
|||
} |
|||
Loading…
Reference in new issue