committed by
GitHub
9 changed files with 259 additions and 51 deletions
@ -0,0 +1,27 @@ |
|||||
|
<!-- |
||||
|
|
||||
|
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 |
||||
|
class="tb-rule-chain-select" |
||||
|
[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,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. |
||||
|
*/ |
||||
|
:host { |
||||
|
min-width: 52px; |
||||
|
width: 100%; |
||||
|
padding: 0 6px; |
||||
|
.tb-rule-chain-select { |
||||
|
display: flex; |
||||
|
height: 48px; |
||||
|
min-height: 100%; |
||||
|
pointer-events: all; |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,109 @@ |
|||||
|
///
|
||||
|
/// 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, forwardRef, Input, OnInit } 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'; |
||||
|
|
||||
|
@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'; |
||||
|
|
||||
|
@Input() |
||||
|
@coerceBoolean() |
||||
|
required: boolean; |
||||
|
|
||||
|
@Input() |
||||
|
@coerceBoolean() |
||||
|
disabled: boolean; |
||||
|
|
||||
|
@Input() |
||||
|
ruleChainType: RuleChainType = RuleChainType.CORE; |
||||
|
|
||||
|
ruleChains$: Observable<Array<RuleChain>>; |
||||
|
|
||||
|
ruleChainId: string | null; |
||||
|
|
||||
|
private propagateChange = (v: any) => { }; |
||||
|
|
||||
|
constructor(private ruleChainService: RuleChainService) { |
||||
|
} |
||||
|
|
||||
|
ngOnInit() { |
||||
|
const pageLink = new PageLink(100, 0, null, { |
||||
|
property: 'name', |
||||
|
direction: Direction.ASC |
||||
|
}); |
||||
|
|
||||
|
this.ruleChains$ = this.getRuleChains(pageLink).pipe( |
||||
|
map((pageData) => pageData.data), |
||||
|
share() |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
registerOnChange(fn: any): void { |
||||
|
this.propagateChange = fn; |
||||
|
} |
||||
|
|
||||
|
registerOnTouched(fn: any): void { |
||||
|
} |
||||
|
|
||||
|
|
||||
|
setDisabledState(isDisabled: boolean): void { |
||||
|
this.disabled = isDisabled; |
||||
|
} |
||||
|
|
||||
|
writeValue(value: string | null): void { |
||||
|
if (isDefinedAndNotNull(value)) { |
||||
|
this.ruleChainId = value; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
ruleChainIdChanged() { |
||||
|
this.updateView(); |
||||
|
} |
||||
|
|
||||
|
private updateView() { |
||||
|
this.propagateChange(this.ruleChainId); |
||||
|
} |
||||
|
|
||||
|
private getRuleChains(pageLink: PageLink): Observable<PageData<RuleChain>> { |
||||
|
return this.ruleChainService.getRuleChains(pageLink, this.ruleChainType, {ignoreLoading: true}); |
||||
|
} |
||||
|
|
||||
|
} |
||||
Loading…
Reference in new issue