Maksym Dudnik
3 years ago
59 changed files with 2145 additions and 362 deletions
@ -0,0 +1,86 @@ |
|||||
|
<!-- |
||||
|
|
||||
|
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. |
||||
|
|
||||
|
--> |
||||
|
<ng-container [formGroup]="entitiesTableWidgetConfigForm"> |
||||
|
<tb-timewindow-config-panel *ngIf="displayTimewindowConfig" |
||||
|
[onlyHistoryTimewindow]="onlyHistoryTimewindow()" |
||||
|
formControlName="timewindowConfig"> |
||||
|
</tb-timewindow-config-panel> |
||||
|
<tb-datasources |
||||
|
[configMode]="basicMode" |
||||
|
hideDataKeys |
||||
|
formControlName="datasources"> |
||||
|
</tb-datasources> |
||||
|
<tb-data-keys-panel |
||||
|
panelTitle="{{ 'widgets.table.columns' | translate }}" |
||||
|
addKeyTitle="{{ 'widgets.table.add-column' | translate }}" |
||||
|
removeKeyTitle="{{ 'widgets.table.remove-column' | translate }}" |
||||
|
noKeysText="{{ 'widgets.table.no-columns' | translate }}" |
||||
|
hideDataKeyColor |
||||
|
[datasourceType]="datasource?.type" |
||||
|
[deviceId]="datasource?.deviceId" |
||||
|
[entityAliasId]="datasource?.entityAliasId" |
||||
|
formControlName="columns"> |
||||
|
</tb-data-keys-panel> |
||||
|
<div class="tb-widget-config-panel"> |
||||
|
<div class="tb-widget-config-panel-title" translate>widget-config.appearance</div> |
||||
|
<div class="tb-widget-config-row"> |
||||
|
<mat-slide-toggle class="mat-slide" formControlName="showTitle"> |
||||
|
{{ 'widget-config.card-title' | translate }} |
||||
|
</mat-slide-toggle> |
||||
|
<mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic"> |
||||
|
<input matInput formControlName="title" placeholder="{{ 'widget-config.set' | translate }}"> |
||||
|
</mat-form-field> |
||||
|
</div> |
||||
|
<div class="tb-widget-config-row space-between same-padding"> |
||||
|
<mat-slide-toggle class="mat-slide" formControlName="showTitleIcon"> |
||||
|
{{ 'widget-config.card-icon' | translate }} |
||||
|
</mat-slide-toggle> |
||||
|
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="16px"> |
||||
|
<tb-material-icon-select asBoxInput |
||||
|
[color]="entitiesTableWidgetConfigForm.get('iconColor').value" |
||||
|
formControlName="titleIcon"> |
||||
|
</tb-material-icon-select> |
||||
|
<mat-divider vertical></mat-divider> |
||||
|
<tb-color-input asBoxInput |
||||
|
formControlName="iconColor"> |
||||
|
</tb-color-input> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="tb-widget-config-row space-between same-padding"> |
||||
|
<div>{{ 'widget-config.text-color' | translate }}</div> |
||||
|
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="16px"> |
||||
|
<mat-divider vertical></mat-divider> |
||||
|
<tb-color-input asBoxInput |
||||
|
formControlName="color"> |
||||
|
</tb-color-input> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="tb-widget-config-row space-between same-padding"> |
||||
|
<div>{{ 'widget-config.background' | translate }}</div> |
||||
|
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="16px"> |
||||
|
<mat-divider vertical></mat-divider> |
||||
|
<tb-color-input asBoxInput |
||||
|
formControlName="backgroundColor"> |
||||
|
</tb-color-input> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<tb-widget-actions-panel |
||||
|
formControlName="actions"> |
||||
|
</tb-widget-actions-panel> |
||||
|
</ng-container> |
||||
@ -0,0 +1,154 @@ |
|||||
|
///
|
||||
|
/// 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 } from '@angular/core'; |
||||
|
import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms'; |
||||
|
import { Store } from '@ngrx/store'; |
||||
|
import { AppState } from '@core/core.state'; |
||||
|
import { BasicWidgetConfigComponent } from '@home/components/widget/config/widget-config.component.models'; |
||||
|
import { WidgetConfigComponentData } from '@home/models/widget-component.models'; |
||||
|
import { |
||||
|
DataKey, |
||||
|
Datasource, |
||||
|
datasourcesHasAggregation, |
||||
|
datasourcesHasOnlyComparisonAggregation |
||||
|
} from '@shared/models/widget.models'; |
||||
|
import { WidgetConfigComponent } from '@home/components/widget/widget-config.component'; |
||||
|
import { DataKeyType } from '@shared/models/telemetry/telemetry.models'; |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'tb-entities-table-basic-config', |
||||
|
templateUrl: './entities-table-basic-config.component.html', |
||||
|
styleUrls: ['../basic-config.scss'] |
||||
|
}) |
||||
|
export class EntitiesTableBasicConfigComponent extends BasicWidgetConfigComponent { |
||||
|
|
||||
|
public get displayTimewindowConfig(): boolean { |
||||
|
const datasources = this.entitiesTableWidgetConfigForm.get('datasources').value; |
||||
|
return datasourcesHasAggregation(datasources); |
||||
|
} |
||||
|
|
||||
|
public onlyHistoryTimewindow(): boolean { |
||||
|
const datasources = this.entitiesTableWidgetConfigForm.get('datasources').value; |
||||
|
return datasourcesHasOnlyComparisonAggregation(datasources); |
||||
|
} |
||||
|
|
||||
|
public get datasource(): Datasource { |
||||
|
const datasources: Datasource[] = this.entitiesTableWidgetConfigForm.get('datasources').value; |
||||
|
if (datasources && datasources.length) { |
||||
|
return datasources[0]; |
||||
|
} else { |
||||
|
return null; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
entitiesTableWidgetConfigForm: UntypedFormGroup; |
||||
|
|
||||
|
constructor(protected store: Store<AppState>, |
||||
|
protected widgetConfigComponent: WidgetConfigComponent, |
||||
|
private fb: UntypedFormBuilder) { |
||||
|
super(store, widgetConfigComponent); |
||||
|
} |
||||
|
|
||||
|
protected configForm(): UntypedFormGroup { |
||||
|
return this.entitiesTableWidgetConfigForm; |
||||
|
} |
||||
|
|
||||
|
protected setupDefaults(configData: WidgetConfigComponentData) { |
||||
|
this.setupDefaultDatasource(configData, [{ name: 'name', type: DataKeyType.entityField }]); |
||||
|
} |
||||
|
|
||||
|
protected onConfigSet(configData: WidgetConfigComponentData) { |
||||
|
this.entitiesTableWidgetConfigForm = this.fb.group({ |
||||
|
timewindowConfig: [{ |
||||
|
useDashboardTimewindow: configData.config.useDashboardTimewindow, |
||||
|
displayTimewindow: configData.config.useDashboardTimewindow, |
||||
|
timewindow: configData.config.timewindow |
||||
|
}, []], |
||||
|
datasources: [configData.config.datasources, []], |
||||
|
columns: [this.getColumns(configData.config.datasources), []], |
||||
|
showTitle: [configData.config.showTitle, []], |
||||
|
title: [configData.config.settings?.entitiesTitle, []], |
||||
|
showTitleIcon: [configData.config.showTitleIcon, []], |
||||
|
titleIcon: [configData.config.titleIcon, []], |
||||
|
iconColor: [configData.config.iconColor, []], |
||||
|
color: [configData.config.color, []], |
||||
|
backgroundColor: [configData.config.backgroundColor, []], |
||||
|
actions: [configData.config.actions || {}, []] |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
protected prepareOutputConfig(config: any): WidgetConfigComponentData { |
||||
|
this.widgetConfig.config.useDashboardTimewindow = config.timewindowConfig.useDashboardTimewindow; |
||||
|
this.widgetConfig.config.displayTimewindow = config.timewindowConfig.displayTimewindow; |
||||
|
this.widgetConfig.config.timewindow = config.timewindowConfig.timewindow; |
||||
|
this.widgetConfig.config.datasources = config.datasources; |
||||
|
this.setColumns(config.columns, this.widgetConfig.config.datasources); |
||||
|
this.widgetConfig.config.actions = config.actions; |
||||
|
this.widgetConfig.config.showTitle = config.showTitle; |
||||
|
this.widgetConfig.config.settings = this.widgetConfig.config.settings || {}; |
||||
|
this.widgetConfig.config.settings.entitiesTitle = config.title; |
||||
|
this.widgetConfig.config.showTitleIcon = config.showTitleIcon; |
||||
|
this.widgetConfig.config.titleIcon = config.titleIcon; |
||||
|
this.widgetConfig.config.iconColor = config.iconColor; |
||||
|
this.widgetConfig.config.color = config.color; |
||||
|
this.widgetConfig.config.backgroundColor = config.backgroundColor; |
||||
|
return this.widgetConfig; |
||||
|
} |
||||
|
|
||||
|
protected validatorTriggers(): string[] { |
||||
|
return ['showTitle', 'showTitleIcon']; |
||||
|
} |
||||
|
|
||||
|
protected updateValidators(emitEvent: boolean, trigger?: string) { |
||||
|
const showTitle: boolean = this.entitiesTableWidgetConfigForm.get('showTitle').value; |
||||
|
const showTitleIcon: boolean = this.entitiesTableWidgetConfigForm.get('showTitleIcon').value; |
||||
|
if (showTitle) { |
||||
|
this.entitiesTableWidgetConfigForm.get('title').enable(); |
||||
|
this.entitiesTableWidgetConfigForm.get('showTitleIcon').enable({emitEvent: false}); |
||||
|
if (showTitleIcon) { |
||||
|
this.entitiesTableWidgetConfigForm.get('titleIcon').enable(); |
||||
|
this.entitiesTableWidgetConfigForm.get('iconColor').enable(); |
||||
|
} else { |
||||
|
this.entitiesTableWidgetConfigForm.get('titleIcon').disable(); |
||||
|
this.entitiesTableWidgetConfigForm.get('iconColor').disable(); |
||||
|
} |
||||
|
} else { |
||||
|
this.entitiesTableWidgetConfigForm.get('title').disable(); |
||||
|
this.entitiesTableWidgetConfigForm.get('showTitleIcon').disable({emitEvent: false}); |
||||
|
this.entitiesTableWidgetConfigForm.get('titleIcon').disable(); |
||||
|
this.entitiesTableWidgetConfigForm.get('iconColor').disable(); |
||||
|
} |
||||
|
this.entitiesTableWidgetConfigForm.get('title').updateValueAndValidity({emitEvent}); |
||||
|
this.entitiesTableWidgetConfigForm.get('showTitleIcon').updateValueAndValidity({emitEvent: false}); |
||||
|
this.entitiesTableWidgetConfigForm.get('titleIcon').updateValueAndValidity({emitEvent}); |
||||
|
this.entitiesTableWidgetConfigForm.get('iconColor').updateValueAndValidity({emitEvent}); |
||||
|
} |
||||
|
|
||||
|
private getColumns(datasources?: Datasource[]): DataKey[] { |
||||
|
if (datasources && datasources.length) { |
||||
|
return datasources[0].dataKeys || []; |
||||
|
} |
||||
|
return []; |
||||
|
} |
||||
|
|
||||
|
private setColumns(columns: DataKey[], datasources?: Datasource[]) { |
||||
|
if (datasources && datasources.length) { |
||||
|
datasources[0].dataKeys = columns; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
} |
||||
@ -0,0 +1,170 @@ |
|||||
|
<!-- |
||||
|
|
||||
|
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. |
||||
|
|
||||
|
--> |
||||
|
<div [formGroup]="keyRowFormGroup" class="tb-data-key-row"> |
||||
|
<mat-form-field fxFlex class="tb-inline-field tb-key-field" subscriptSizing="dynamic"> |
||||
|
<mat-chip-grid #chipList> |
||||
|
<mat-chip-row class="tb-datakey-chip" *ngIf="modelValue.type" |
||||
|
(removed)="removeKey()"> |
||||
|
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="4px" class="tb-attribute-chip"> |
||||
|
<div class="tb-chip-labels"> |
||||
|
<div class="tb-chip-label"> |
||||
|
<ng-container *ngIf="isEntityDatasource"> |
||||
|
<mat-icon class="tb-mat-18 tb-datakey-icon" *ngIf="modelValue.type === dataKeyTypes.alarm" |
||||
|
matTooltip="{{'datakey.alarm' | translate }}" |
||||
|
matTooltipPosition="above">notifications</mat-icon> |
||||
|
<mat-icon class="tb-mat-18 tb-datakey-icon" *ngIf="modelValue.type === dataKeyTypes.attribute" |
||||
|
matTooltip="{{'datakey.attributes' | translate }}" |
||||
|
matTooltipPosition="above" svgIcon="mdi:alpha-a-circle-outline"></mat-icon> |
||||
|
<mat-icon class="tb-mat-18 tb-datakey-icon" *ngIf="modelValue.type === dataKeyTypes.entityField" |
||||
|
matTooltip="{{'datakey.entity-field' | translate }}" |
||||
|
matTooltipPosition="above" svgIcon="mdi:alpha-e-circle-outline"></mat-icon> |
||||
|
<mat-icon class="tb-mat-18 tb-datakey-icon" *ngIf="modelValue.type === dataKeyTypes.timeseries" |
||||
|
matTooltip="{{'datakey.timeseries' | translate }}" |
||||
|
matTooltipPosition="above">timeline</mat-icon> |
||||
|
</ng-container> |
||||
|
</div> |
||||
|
<div class="tb-chip-label"> |
||||
|
<strong> |
||||
|
<ng-container *ngTemplateOutlet="keyName"></ng-container> |
||||
|
</strong> |
||||
|
</div> |
||||
|
</div> |
||||
|
<button type="button" |
||||
|
(click)="editKey()" mat-icon-button class="tb-mat-24"> |
||||
|
<mat-icon class="tb-mat-18">edit</mat-icon> |
||||
|
</button> |
||||
|
<button matChipRemove |
||||
|
type="button" |
||||
|
mat-icon-button class="tb-mat-24"> |
||||
|
<mat-icon class="tb-mat-18">close</mat-icon> |
||||
|
</button> |
||||
|
</div> |
||||
|
</mat-chip-row> |
||||
|
<input matInput |
||||
|
type="text" |
||||
|
placeholder="{{ 'widget-config.set' | translate }}" |
||||
|
#keyInput |
||||
|
[formControl]="keyFormControl" |
||||
|
matAutocompleteOrigin |
||||
|
[fxHide]="!!modelValue.type" |
||||
|
[readonly]="!!modelValue.type" |
||||
|
#origin="matAutocompleteOrigin" |
||||
|
[matAutocompleteConnectedTo]="origin" |
||||
|
(focusin)="onKeyInputFocus()" |
||||
|
(drop)="$event.preventDefault();" |
||||
|
[matAutocomplete]="keyAutocomplete" |
||||
|
[matChipInputFor]="chipList" |
||||
|
[matChipInputSeparatorKeyCodes]="separatorKeysCodes" |
||||
|
(matChipInputTokenEnd)="addKey($event)" |
||||
|
/> |
||||
|
</mat-chip-grid> |
||||
|
<mat-autocomplete #keyAutocomplete="matAutocomplete" |
||||
|
class="tb-autocomplete" |
||||
|
panelWidth="fit-content" |
||||
|
[displayWith]="displayKeyFn"> |
||||
|
<mat-option *ngFor="let key of filteredKeys | async" [value]="key"> |
||||
|
<span style="white-space: nowrap;"> |
||||
|
<ng-container *ngIf="isEntityDatasource"> |
||||
|
<mat-icon class="tb-datakey-icon" *ngIf="key.type === dataKeyTypes.alarm" |
||||
|
matTooltip="{{'datakey.alarm' | translate }}" |
||||
|
matTooltipPosition="above">notifications</mat-icon> |
||||
|
<mat-icon class="tb-datakey-icon" *ngIf="key.type === dataKeyTypes.attribute" |
||||
|
matTooltip="{{'datakey.attributes' | translate }}" |
||||
|
matTooltipPosition="above" svgIcon="mdi:alpha-a-circle-outline"></mat-icon> |
||||
|
<mat-icon class="tb-datakey-icon" *ngIf="key.type === dataKeyTypes.entityField" |
||||
|
matTooltip="{{'datakey.entity-field' | translate }}" |
||||
|
matTooltipPosition="above" svgIcon="mdi:alpha-e-circle-outline"></mat-icon> |
||||
|
<mat-icon class="tb-datakey-icon" *ngIf="key.type === dataKeyTypes.timeseries" |
||||
|
matTooltip="{{'datakey.timeseries' | translate }}" |
||||
|
matTooltipPosition="above">timeline</mat-icon> |
||||
|
</ng-container> |
||||
|
<span [innerHTML]="key.name | highlight:keySearchText"></span> |
||||
|
</span> |
||||
|
</mat-option> |
||||
|
<mat-option *ngIf="!(filteredKeys | async)?.length" [value]="null" class="tb-not-found"> |
||||
|
<div class="tb-not-found-content" (click)="$event.stopPropagation()"> |
||||
|
<div *ngIf="!textIsNotEmpty(keySearchText); else searchNotEmpty"> |
||||
|
<span translate>entity.no-keys-found</span> |
||||
|
</div> |
||||
|
<ng-template #searchNotEmpty> |
||||
|
<span> |
||||
|
{{ translate.get('entity.no-key-matching', |
||||
|
{key: truncate.transform(keySearchText, true, 6, '...')}) | async }} |
||||
|
</span> |
||||
|
<span *ngIf="!isEntityDatasource; else createEntityKey"> |
||||
|
<a translate (click)="createKey(keySearchText)">entity.create-new-key</a> |
||||
|
</span> |
||||
|
<ng-template #createEntityKey> |
||||
|
<span>{{'entity.create-new-key' | translate }} </span> |
||||
|
<mat-icon class="tb-datakey-icon new-key" *ngIf="widgetType === widgetTypes.alarm" |
||||
|
matTooltip="{{'datakey.alarm' | translate }}" |
||||
|
matTooltipPosition="above" |
||||
|
(click)="createKey(keySearchText, dataKeyTypes.alarm)">notifications</mat-icon> |
||||
|
<mat-icon class="tb-datakey-icon new-key" *ngIf="widgetType === widgetTypes.latest || widgetType === widgetTypes.alarm" |
||||
|
matTooltip="{{'datakey.attributes' | translate }}" |
||||
|
matTooltipPosition="above" svgIcon="mdi:alpha-a-circle-outline" |
||||
|
(click)="createKey(keySearchText, dataKeyTypes.attribute)"></mat-icon> |
||||
|
<mat-icon class="tb-datakey-icon new-key" *ngIf="widgetType === widgetTypes.latest || widgetType === widgetTypes.alarm" |
||||
|
matTooltip="{{'datakey.entity-field' | translate }}" |
||||
|
matTooltipPosition="above" svgIcon="mdi:alpha-e-circle-outline" |
||||
|
(click)="createKey(keySearchText, dataKeyTypes.entityField)"></mat-icon> |
||||
|
<mat-icon class="tb-datakey-icon new-key" |
||||
|
matTooltip="{{'datakey.timeseries' | translate }}" |
||||
|
matTooltipPosition="above" |
||||
|
(click)="createKey(keySearchText, dataKeyTypes.timeseries)">timeline</mat-icon> |
||||
|
</ng-template> |
||||
|
</ng-template> |
||||
|
</div> |
||||
|
</mat-option> |
||||
|
</mat-autocomplete> |
||||
|
</mat-form-field> |
||||
|
<mat-form-field fxFlex class="tb-inline-field" appearance="outline" subscriptSizing="dynamic"> |
||||
|
<input matInput formControlName="label" placeholder="{{ 'widget-config.set' | translate }}"> |
||||
|
</mat-form-field> |
||||
|
<div *ngIf="!hideDataKeyColor" class="tb-color-field"> |
||||
|
<tb-color-input asBoxInput |
||||
|
formControlName="color"> |
||||
|
</tb-color-input> |
||||
|
</div> |
||||
|
<div class="tb-units-field"> |
||||
|
<tb-widget-units *ngIf="displayUnitsOrDigits" |
||||
|
formControlName="units"> |
||||
|
</tb-widget-units> |
||||
|
</div> |
||||
|
<div class="tb-decimals-field"> |
||||
|
<mat-form-field *ngIf="displayUnitsOrDigits" appearance="outline" class="tb-inline-field center number" subscriptSizing="dynamic"> |
||||
|
<input matInput formControlName="decimals" type="number" min="0" max="15" step="1" placeholder="{{ 'widget-config.set' | translate }}"> |
||||
|
</mat-form-field> |
||||
|
</div> |
||||
|
</div> |
||||
|
<ng-template #keyName> |
||||
|
<ng-container *ngIf="dataKeyHasPostprocessing(); else keyName"> |
||||
|
<span>f(</span><ng-container *ngTemplateOutlet="keyNameTemplate"></ng-container><span>)</span> |
||||
|
</ng-container> |
||||
|
<ng-template #keyName> |
||||
|
<ng-container *ngTemplateOutlet="keyNameTemplate"></ng-container> |
||||
|
</ng-template> |
||||
|
</ng-template> |
||||
|
<ng-template #keyNameTemplate> |
||||
|
<ng-container *ngIf="dataKeyHasAggregation(); else keyName;"> |
||||
|
<span class="tb-agg-func">{{ modelValue?.aggregationType }}</span><span>({{ modelValue?.name }})</span> |
||||
|
</ng-container> |
||||
|
<ng-template #keyName> |
||||
|
<span>{{modelValue?.name}}</span> |
||||
|
</ng-template> |
||||
|
</ng-template> |
||||
@ -0,0 +1,53 @@ |
|||||
|
/** |
||||
|
* 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. |
||||
|
*/ |
||||
|
.tb-data-key-row { |
||||
|
height: 38px; |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
gap: 12px; |
||||
|
padding-left: 12px; |
||||
|
|
||||
|
.mat-mdc-form-field.tb-inline-field.tb-key-field { |
||||
|
.mat-mdc-text-field-wrapper:not(.mdc-text-field--outlined) { |
||||
|
.mat-mdc-form-field-infix { |
||||
|
padding-top: 0; |
||||
|
padding-bottom: 6px; |
||||
|
.mdc-evolution-chip-set .mdc-evolution-chip { |
||||
|
margin: 0; |
||||
|
} |
||||
|
input.mat-mdc-chip-input { |
||||
|
height: 32px; |
||||
|
margin-left: 0; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.mat-mdc-chip.mat-mdc-standard-chip.tb-datakey-chip { |
||||
|
.tb-attribute-chip { |
||||
|
.tb-chip-labels { |
||||
|
background: transparent; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.tb-color-field, .tb-units-field, .tb-decimals-field { |
||||
|
width: 60px; |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
place-content: center; |
||||
|
align-items: center; |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,426 @@ |
|||||
|
///
|
||||
|
/// 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 { |
||||
|
ChangeDetectorRef, |
||||
|
Component, |
||||
|
ElementRef, |
||||
|
forwardRef, |
||||
|
Input, |
||||
|
OnChanges, |
||||
|
OnInit, |
||||
|
SimpleChanges, |
||||
|
ViewChild, |
||||
|
ViewEncapsulation |
||||
|
} from '@angular/core'; |
||||
|
import { |
||||
|
AbstractControl, |
||||
|
ControlValueAccessor, |
||||
|
NG_VALUE_ACCESSOR, |
||||
|
UntypedFormBuilder, |
||||
|
UntypedFormControl, |
||||
|
UntypedFormGroup, |
||||
|
ValidationErrors |
||||
|
} from '@angular/forms'; |
||||
|
import { MatDialog } from '@angular/material/dialog'; |
||||
|
import { WidgetConfigComponent } from '@home/components/widget/widget-config.component'; |
||||
|
import { DataKey, DatasourceType, JsonSettingsSchema, Widget, widgetType } from '@shared/models/widget.models'; |
||||
|
import { DataKeysPanelComponent } from '@home/components/widget/config/basic/common/data-keys-panel.component'; |
||||
|
import { DataKeyType } from '@shared/models/telemetry/telemetry.models'; |
||||
|
import { AggregationType } from '@shared/models/time/time.models'; |
||||
|
import { COMMA, ENTER, SEMICOLON } from '@angular/cdk/keycodes'; |
||||
|
import { MatChipGrid, MatChipInputEvent } from '@angular/material/chips'; |
||||
|
import { DataKeysCallbacks } from '@home/components/widget/config/data-keys.component.models'; |
||||
|
import { MatAutocomplete, MatAutocompleteTrigger } from '@angular/material/autocomplete'; |
||||
|
import { Observable, of } from 'rxjs'; |
||||
|
import { filter, map, mergeMap, publishReplay, refCount, share, tap } from 'rxjs/operators'; |
||||
|
import { TranslateService } from '@ngx-translate/core'; |
||||
|
import { TruncatePipe } from '@shared/pipe/truncate.pipe'; |
||||
|
import { |
||||
|
DataKeyConfigDialogComponent, |
||||
|
DataKeyConfigDialogData |
||||
|
} from '@home/components/widget/config/data-key-config-dialog.component'; |
||||
|
import { deepClone } from '@core/utils'; |
||||
|
import { Dashboard } from '@shared/models/dashboard.models'; |
||||
|
import { IAliasController } from '@core/api/widget-api.models'; |
||||
|
|
||||
|
export const dataKeyRowValidator = (control: AbstractControl): ValidationErrors | null => { |
||||
|
const dataKey: DataKey = control.value; |
||||
|
if (!dataKey || !dataKey.type || !dataKey.name) { |
||||
|
return { |
||||
|
dataKey: true |
||||
|
}; |
||||
|
} |
||||
|
return null; |
||||
|
}; |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'tb-data-key-row', |
||||
|
templateUrl: './data-key-row.component.html', |
||||
|
styleUrls: ['./data-key-row.component.scss', '../../data-keys.component.scss'], |
||||
|
providers: [ |
||||
|
{ |
||||
|
provide: NG_VALUE_ACCESSOR, |
||||
|
useExisting: forwardRef(() => DataKeyRowComponent), |
||||
|
multi: true |
||||
|
} |
||||
|
], |
||||
|
encapsulation: ViewEncapsulation.None |
||||
|
}) |
||||
|
export class DataKeyRowComponent implements ControlValueAccessor, OnInit, OnChanges { |
||||
|
|
||||
|
dataKeyTypes = DataKeyType; |
||||
|
widgetTypes = widgetType; |
||||
|
|
||||
|
separatorKeysCodes: number[] = [ENTER, COMMA, SEMICOLON]; |
||||
|
|
||||
|
@ViewChild('keyInput') keyInput: ElementRef<HTMLInputElement>; |
||||
|
@ViewChild('keyAutocomplete') matAutocomplete: MatAutocomplete; |
||||
|
@ViewChild(MatAutocompleteTrigger) autocomplete: MatAutocompleteTrigger; |
||||
|
@ViewChild('chipList') chipList: MatChipGrid; |
||||
|
|
||||
|
@Input() |
||||
|
disabled: boolean; |
||||
|
|
||||
|
@Input() |
||||
|
datasourceType: DatasourceType; |
||||
|
|
||||
|
@Input() |
||||
|
entityAliasId: string; |
||||
|
|
||||
|
@Input() |
||||
|
deviceId: string; |
||||
|
|
||||
|
keyFormControl: UntypedFormControl; |
||||
|
|
||||
|
keyRowFormGroup: UntypedFormGroup; |
||||
|
|
||||
|
modelValue: DataKey; |
||||
|
|
||||
|
filteredKeys: Observable<Array<DataKey>>; |
||||
|
|
||||
|
keySearchText = ''; |
||||
|
|
||||
|
private latestKeySearchTextResult: Array<DataKey> = null; |
||||
|
private keyFetchObservable$: Observable<Array<DataKey>> = null; |
||||
|
|
||||
|
get dataKeyType(): DataKeyType { |
||||
|
return this.dataKeysPanelComponent.dataKeyType; |
||||
|
} |
||||
|
|
||||
|
get alarmKeys(): Array<DataKey> { |
||||
|
return this.dataKeysPanelComponent.alarmKeys; |
||||
|
} |
||||
|
|
||||
|
get functionTypeKeys(): Array<DataKey> { |
||||
|
return this.dataKeysPanelComponent.functionTypeKeys; |
||||
|
} |
||||
|
|
||||
|
get hideDataKeyColor(): boolean { |
||||
|
return this.dataKeysPanelComponent.hideDataKeyColor; |
||||
|
} |
||||
|
|
||||
|
get widgetType(): widgetType { |
||||
|
return this.widgetConfigComponent.widgetType; |
||||
|
} |
||||
|
|
||||
|
get callbacks(): DataKeysCallbacks { |
||||
|
return this.widgetConfigComponent.widgetConfigCallbacks; |
||||
|
} |
||||
|
|
||||
|
get widget(): Widget { |
||||
|
return this.widgetConfigComponent.widget; |
||||
|
} |
||||
|
|
||||
|
get dashboard(): Dashboard { |
||||
|
return this.widgetConfigComponent.dashboard; |
||||
|
} |
||||
|
|
||||
|
get aliasController(): IAliasController { |
||||
|
return this.widgetConfigComponent.aliasController; |
||||
|
} |
||||
|
|
||||
|
get datakeySettingsSchema(): JsonSettingsSchema { |
||||
|
return this.widgetConfigComponent.modelValue?.dataKeySettingsSchema; |
||||
|
} |
||||
|
|
||||
|
get dataKeySettingsDirective(): string { |
||||
|
return this.widgetConfigComponent.modelValue?.dataKeySettingsDirective; |
||||
|
} |
||||
|
|
||||
|
get isEntityDatasource(): boolean { |
||||
|
return [DatasourceType.device, DatasourceType.entity].includes(this.datasourceType); |
||||
|
} |
||||
|
|
||||
|
get displayUnitsOrDigits() { |
||||
|
return this.modelValue.type && ![ DataKeyType.alarm, DataKeyType.entityField, DataKeyType.count ].includes(this.modelValue.type); |
||||
|
} |
||||
|
|
||||
|
private propagateChange = (_val: any) => {}; |
||||
|
|
||||
|
constructor(private fb: UntypedFormBuilder, |
||||
|
private dialog: MatDialog, |
||||
|
private cd: ChangeDetectorRef, |
||||
|
public translate: TranslateService, |
||||
|
public truncate: TruncatePipe, |
||||
|
private dataKeysPanelComponent: DataKeysPanelComponent, |
||||
|
private widgetConfigComponent: WidgetConfigComponent) { |
||||
|
} |
||||
|
|
||||
|
ngOnInit() { |
||||
|
this.keyFormControl = this.fb.control(''); |
||||
|
this.keyRowFormGroup = this.fb.group({ |
||||
|
label: [null, []], |
||||
|
color: [null, []], |
||||
|
units: [null, []], |
||||
|
decimals: [null, []], |
||||
|
}); |
||||
|
this.keyRowFormGroup.valueChanges.subscribe( |
||||
|
() => this.updateModel() |
||||
|
); |
||||
|
this.filteredKeys = this.keyFormControl.valueChanges |
||||
|
.pipe( |
||||
|
tap((value: string | DataKey) => { |
||||
|
if (value && typeof value !== 'string') { |
||||
|
this.addKeyFromChipValue(value); |
||||
|
} else if (value === null) { |
||||
|
this.clearKeyChip(this.keyInput.nativeElement.value); |
||||
|
} |
||||
|
}), |
||||
|
filter((value) => typeof value === 'string'), |
||||
|
map((value) => value ? (typeof value === 'string' ? value : value.name) : ''), |
||||
|
mergeMap(name => this.fetchKeys(name) ), |
||||
|
share() |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
private reset() { |
||||
|
if (this.keyInput) { |
||||
|
this.keyInput.nativeElement.value = ''; |
||||
|
} |
||||
|
this.keyFormControl.patchValue('', {emitEvent: false}); |
||||
|
this.latestKeySearchTextResult = null; |
||||
|
} |
||||
|
|
||||
|
ngOnChanges(changes: SimpleChanges): void { |
||||
|
for (const propName of Object.keys(changes)) { |
||||
|
const change = changes[propName]; |
||||
|
if (!change.firstChange && change.currentValue !== change.previousValue) { |
||||
|
if (['deviceId', 'entityAliasId'].includes(propName)) { |
||||
|
this.clearKeySearchCache(); |
||||
|
} else if (['datasourceType'].includes(propName)) { |
||||
|
if ([DatasourceType.device, DatasourceType.entity].includes(change.previousValue) && |
||||
|
[DatasourceType.device, DatasourceType.entity].includes(change.currentValue)) { |
||||
|
this.clearKeySearchCache(); |
||||
|
} else { |
||||
|
this.clearKeySearchCache(); |
||||
|
setTimeout(() => { |
||||
|
this.reset(); |
||||
|
}, 1); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
registerOnChange(fn: any): void { |
||||
|
this.propagateChange = fn; |
||||
|
} |
||||
|
|
||||
|
registerOnTouched(fn: any): void { |
||||
|
} |
||||
|
|
||||
|
setDisabledState(isDisabled: boolean): void { |
||||
|
this.disabled = isDisabled; |
||||
|
if (isDisabled) { |
||||
|
this.keyRowFormGroup.disable({emitEvent: false}); |
||||
|
} else { |
||||
|
this.keyRowFormGroup.enable({emitEvent: false}); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
writeValue(value: DataKey): void { |
||||
|
this.modelValue = value || {} as DataKey; |
||||
|
this.keyRowFormGroup.patchValue( |
||||
|
{ |
||||
|
label: value?.label, |
||||
|
color: value?.color, |
||||
|
units: value?.units, |
||||
|
decimals: value?.decimals |
||||
|
}, {emitEvent: false} |
||||
|
); |
||||
|
this.cd.markForCheck(); |
||||
|
} |
||||
|
|
||||
|
dataKeyHasAggregation(): boolean { |
||||
|
return this.widgetConfigComponent.widgetType === widgetType.latest && this.modelValue?.type === DataKeyType.timeseries |
||||
|
&& this.modelValue?.aggregationType && this.modelValue?.aggregationType !== AggregationType.NONE; |
||||
|
} |
||||
|
|
||||
|
dataKeyHasPostprocessing(): boolean { |
||||
|
return !!this.modelValue?.postFuncBody; |
||||
|
} |
||||
|
|
||||
|
displayKeyFn(key?: DataKey): string | undefined { |
||||
|
return key ? key.name : undefined; |
||||
|
} |
||||
|
|
||||
|
createKey(name: string, dataKeyType: DataKeyType = this.dataKeyType) { |
||||
|
this.addKeyFromChipValue({name: name ? name.trim() : '', type: dataKeyType}); |
||||
|
} |
||||
|
|
||||
|
addKey(event: MatChipInputEvent): void { |
||||
|
const value = event.value; |
||||
|
if ((value || '').trim() && this.dataKeyType) { |
||||
|
this.addKeyFromChipValue({name: value.trim(), type: this.dataKeyType}); |
||||
|
} else { |
||||
|
this.clearKeyChip(); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
editKey() { |
||||
|
this.dialog.open<DataKeyConfigDialogComponent, DataKeyConfigDialogData, DataKey>(DataKeyConfigDialogComponent, |
||||
|
{ |
||||
|
disableClose: true, |
||||
|
panelClass: ['tb-dialog', 'tb-fullscreen-dialog'], |
||||
|
data: { |
||||
|
dataKey: deepClone(this.modelValue), |
||||
|
dataKeySettingsSchema: this.datakeySettingsSchema, |
||||
|
dataKeySettingsDirective: this.dataKeySettingsDirective, |
||||
|
dashboard: this.dashboard, |
||||
|
aliasController: this.aliasController, |
||||
|
widget: this.widget, |
||||
|
widgetType: this.widgetType, |
||||
|
deviceId: this.deviceId, |
||||
|
entityAliasId: this.entityAliasId, |
||||
|
showPostProcessing: this.widgetType !== widgetType.alarm, |
||||
|
callbacks: this.callbacks, |
||||
|
hideDataKeyLabel: false, |
||||
|
hideDataKeyColor: this.hideDataKeyColor, |
||||
|
hideDataKeyUnits: !this.displayUnitsOrDigits, |
||||
|
hideDataKeyDecimals: !this.displayUnitsOrDigits |
||||
|
} |
||||
|
}).afterClosed().subscribe((updatedDataKey) => { |
||||
|
if (updatedDataKey) { |
||||
|
this.modelValue = updatedDataKey; |
||||
|
this.keyRowFormGroup.get('label').patchValue(this.modelValue.label, {emitEvent: false}); |
||||
|
this.keyRowFormGroup.get('color').patchValue(this.modelValue.color, {emitEvent: false}); |
||||
|
this.keyRowFormGroup.get('units').patchValue(this.modelValue.units, {emitEvent: false}); |
||||
|
this.keyRowFormGroup.get('decimals').patchValue(this.modelValue.decimals, {emitEvent: false}); |
||||
|
this.updateModel(); |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
removeKey() { |
||||
|
this.modelValue = {} as DataKey; |
||||
|
this.updateModel(); |
||||
|
this.clearKeyChip(); |
||||
|
} |
||||
|
|
||||
|
textIsNotEmpty(text: string): boolean { |
||||
|
return text && text.length > 0; |
||||
|
} |
||||
|
|
||||
|
clearKeyChip(value: string = '', focus = true) { |
||||
|
this.autocomplete.closePanel(); |
||||
|
this.keyInput.nativeElement.value = value; |
||||
|
this.keyFormControl.patchValue(value, {emitEvent: focus}); |
||||
|
if (focus) { |
||||
|
setTimeout(() => { |
||||
|
this.keyInput.nativeElement.blur(); |
||||
|
this.keyInput.nativeElement.focus(); |
||||
|
}, 0); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
onKeyInputFocus() { |
||||
|
if (!this.modelValue.type) { |
||||
|
this.keyFormControl.updateValueAndValidity({onlySelf: true, emitEvent: true}); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
private fetchKeys(searchText?: string): Observable<Array<DataKey>> { |
||||
|
if (this.keySearchText !== searchText || this.latestKeySearchTextResult === null) { |
||||
|
this.keySearchText = searchText; |
||||
|
const dataKeyFilter = this.createDataKeyFilter(this.keySearchText); |
||||
|
return this.getKeys().pipe( |
||||
|
map(name => name.filter(dataKeyFilter)), |
||||
|
tap(res => this.latestKeySearchTextResult = res) |
||||
|
); |
||||
|
} |
||||
|
return of(this.latestKeySearchTextResult); |
||||
|
} |
||||
|
|
||||
|
private getKeys(): Observable<Array<DataKey>> { |
||||
|
if (this.keyFetchObservable$ === null) { |
||||
|
let fetchObservable: Observable<Array<DataKey>>; |
||||
|
if (this.datasourceType === DatasourceType.function) { |
||||
|
const targetKeysList = this.widgetType === widgetType.alarm ? this.alarmKeys : this.functionTypeKeys; |
||||
|
fetchObservable = of(targetKeysList); |
||||
|
} else if (this.datasourceType === DatasourceType.entity && this.entityAliasId || |
||||
|
this.datasourceType === DatasourceType.device && this.deviceId) { |
||||
|
const dataKeyTypes = [DataKeyType.timeseries]; |
||||
|
if (this.widgetType === widgetType.latest || this.widgetType === widgetType.alarm) { |
||||
|
dataKeyTypes.push(DataKeyType.attribute); |
||||
|
dataKeyTypes.push(DataKeyType.entityField); |
||||
|
if (this.widgetType === widgetType.alarm) { |
||||
|
dataKeyTypes.push(DataKeyType.alarm); |
||||
|
} |
||||
|
} |
||||
|
if (this.datasourceType === DatasourceType.device) { |
||||
|
fetchObservable = this.callbacks.fetchEntityKeysForDevice(this.deviceId, dataKeyTypes); |
||||
|
} else { |
||||
|
fetchObservable = this.callbacks.fetchEntityKeys(this.entityAliasId, dataKeyTypes); |
||||
|
} |
||||
|
} else { |
||||
|
fetchObservable = of([]); |
||||
|
} |
||||
|
this.keyFetchObservable$ = fetchObservable.pipe( |
||||
|
publishReplay(1), |
||||
|
refCount() |
||||
|
); |
||||
|
} |
||||
|
return this.keyFetchObservable$; |
||||
|
} |
||||
|
|
||||
|
private createDataKeyFilter(query: string): (key: DataKey) => boolean { |
||||
|
const lowercaseQuery = query.toLowerCase(); |
||||
|
return key => key.name.toLowerCase().startsWith(lowercaseQuery); |
||||
|
} |
||||
|
|
||||
|
private addKeyFromChipValue(chip: DataKey) { |
||||
|
this.modelValue = this.callbacks.generateDataKey(chip.name, chip.type, this.datakeySettingsSchema); |
||||
|
if (!this.keyRowFormGroup.get('label').value) { |
||||
|
this.keyRowFormGroup.get('label').patchValue(this.modelValue.label, {emitEvent: false}); |
||||
|
} |
||||
|
this.updateModel(); |
||||
|
this.clearKeyChip('', false); |
||||
|
} |
||||
|
|
||||
|
private clearKeySearchCache() { |
||||
|
this.keySearchText = ''; |
||||
|
this.keyFetchObservable$ = null; |
||||
|
this.latestKeySearchTextResult = null; |
||||
|
} |
||||
|
|
||||
|
private updateModel() { |
||||
|
const value: DataKey = this.keyRowFormGroup.value; |
||||
|
this.modelValue = {...this.modelValue, ...value}; |
||||
|
this.propagateChange(this.modelValue); |
||||
|
} |
||||
|
|
||||
|
} |
||||
@ -0,0 +1,67 @@ |
|||||
|
<!-- |
||||
|
|
||||
|
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. |
||||
|
|
||||
|
--> |
||||
|
<div class="tb-widget-config-panel"> |
||||
|
<div class="tb-widget-config-panel-title">{{ panelTitle }}</div> |
||||
|
<div class="tb-data-keys-table"> |
||||
|
<div class="tb-data-keys-header"> |
||||
|
<div class="tb-data-keys-header-cell" fxFlex translate>datakey.key</div> |
||||
|
<div class="tb-data-keys-header-cell" fxFlex translate>datakey.label</div> |
||||
|
<div *ngIf="!hideDataKeyColor" class="tb-data-keys-header-cell tb-color-header" translate>datakey.color</div> |
||||
|
<div class="tb-data-keys-header-cell tb-units-header" translate>widget-config.units-short</div> |
||||
|
<div class="tb-data-keys-header-cell tb-decimals-header" translate>widget-config.decimals-short</div> |
||||
|
<div class="tb-data-keys-header-cell tb-actions-header"></div> |
||||
|
</div> |
||||
|
<div *ngIf="keysFormArray().controls.length; else noKeys" class="tb-data-keys-body tb-drop-list" cdkDropList cdkDropListOrientation="vertical" |
||||
|
(cdkDropListDropped)="keyDrop($event)"> |
||||
|
<div cdkDrag class="tb-data-keys-table-row tb-draggable" *ngFor="let keyControl of keysFormArray().controls; trackBy: trackByKey; |
||||
|
let $index = index;"> |
||||
|
<tb-data-key-row fxFlex |
||||
|
[formControl]="keyControl" |
||||
|
[datasourceType]="datasourceType" |
||||
|
[deviceId]="deviceId" |
||||
|
[entityAliasId]="entityAliasId"> |
||||
|
</tb-data-key-row> |
||||
|
<div class="tb-data-keys-table-row-buttons"> |
||||
|
<button type="button" |
||||
|
mat-icon-button |
||||
|
(click)="removeKey($index)" |
||||
|
[matTooltip]="removeKeyTitle" |
||||
|
matTooltipPosition="above"> |
||||
|
<mat-icon>delete</mat-icon> |
||||
|
</button> |
||||
|
<button mat-icon-button |
||||
|
type="button" |
||||
|
cdkDragHandle |
||||
|
matTooltip="{{ 'action.drag' | translate }}" |
||||
|
matTooltipPosition="above"> |
||||
|
<mat-icon>drag_indicator</mat-icon> |
||||
|
</button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div> |
||||
|
<button type="button" mat-stroked-button color="primary" (click)="addKey()"> |
||||
|
{{ addKeyTitle }} |
||||
|
</button> |
||||
|
</div> |
||||
|
</div> |
||||
|
<ng-template #noKeys> |
||||
|
<span fxLayoutAlign="center center" |
||||
|
class="tb-prompt">{{ noKeysText }}</span> |
||||
|
</ng-template> |
||||
@ -0,0 +1,76 @@ |
|||||
|
/** |
||||
|
* 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. |
||||
|
*/ |
||||
|
.tb-data-keys-table { |
||||
|
border: 1px solid rgba(0, 0, 0, 0.12); |
||||
|
border-radius: 6px; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
gap: 12px; |
||||
|
padding-bottom: 12px; |
||||
|
.tb-data-keys-header { |
||||
|
height: 48px; |
||||
|
border-bottom: 1px solid rgba(0, 0, 0, 0.12); |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
place-content: center flex-start; |
||||
|
align-items: center; |
||||
|
gap: 12px; |
||||
|
padding-left: 12px; |
||||
|
.tb-data-keys-header-cell { |
||||
|
font-weight: 400; |
||||
|
font-size: 14px; |
||||
|
line-height: 20px; |
||||
|
letter-spacing: 0.2px; |
||||
|
color: rgba(0, 0, 0, 0.54); |
||||
|
&.tb-color-header, &.tb-units-header, &.tb-decimals-header { |
||||
|
width: 60px; |
||||
|
} |
||||
|
&.tb-actions-header { |
||||
|
width: 76px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.tb-data-keys-body { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
gap: 12px; |
||||
|
} |
||||
|
.tb-prompt { |
||||
|
height: 38px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.tb-data-keys-table-row { |
||||
|
height: 38px; |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
gap: 12px; |
||||
|
background: #fff; |
||||
|
|
||||
|
.tb-data-keys-table-row-buttons { |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
button.mat-mdc-icon-button.mat-mdc-button-base { |
||||
|
padding: 7px; |
||||
|
width: 38px; |
||||
|
height: 38px; |
||||
|
.mat-icon { |
||||
|
color: rgba(0, 0, 0, 0.38); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
} |
||||
@ -0,0 +1,237 @@ |
|||||
|
///
|
||||
|
/// 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 { |
||||
|
ChangeDetectorRef, |
||||
|
Component, |
||||
|
forwardRef, |
||||
|
Input, |
||||
|
OnChanges, |
||||
|
OnInit, |
||||
|
SimpleChanges, |
||||
|
ViewEncapsulation |
||||
|
} from '@angular/core'; |
||||
|
import { |
||||
|
AbstractControl, |
||||
|
ControlValueAccessor, |
||||
|
NG_VALIDATORS, |
||||
|
NG_VALUE_ACCESSOR, |
||||
|
UntypedFormArray, |
||||
|
UntypedFormBuilder, |
||||
|
UntypedFormControl, |
||||
|
UntypedFormGroup, |
||||
|
Validator |
||||
|
} from '@angular/forms'; |
||||
|
import { MatDialog } from '@angular/material/dialog'; |
||||
|
import { WidgetConfigComponent } from '@home/components/widget/widget-config.component'; |
||||
|
import { DataKey, DatasourceType, JsonSettingsSchema, widgetType } from '@shared/models/widget.models'; |
||||
|
import { dataKeyRowValidator } from '@home/components/widget/config/basic/common/data-key-row.component'; |
||||
|
import { CdkDragDrop } from '@angular/cdk/drag-drop'; |
||||
|
import { DataKeyType } from '@shared/models/telemetry/telemetry.models'; |
||||
|
import { alarmFields } from '@shared/models/alarm.models'; |
||||
|
import { UtilsService } from '@core/services/utils.service'; |
||||
|
import { DataKeysCallbacks } from '@home/components/widget/config/data-keys.component.models'; |
||||
|
import { coerceBoolean } from '@shared/decorators/coercion'; |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'tb-data-keys-panel', |
||||
|
templateUrl: './data-keys-panel.component.html', |
||||
|
styleUrls: ['./data-keys-panel.component.scss'], |
||||
|
providers: [ |
||||
|
{ |
||||
|
provide: NG_VALUE_ACCESSOR, |
||||
|
useExisting: forwardRef(() => DataKeysPanelComponent), |
||||
|
multi: true |
||||
|
}, |
||||
|
{ |
||||
|
provide: NG_VALIDATORS, |
||||
|
useExisting: forwardRef(() => DataKeysPanelComponent), |
||||
|
multi: true |
||||
|
} |
||||
|
], |
||||
|
encapsulation: ViewEncapsulation.None |
||||
|
}) |
||||
|
export class DataKeysPanelComponent implements ControlValueAccessor, OnInit, OnChanges, Validator { |
||||
|
|
||||
|
@Input() |
||||
|
disabled: boolean; |
||||
|
|
||||
|
@Input() |
||||
|
panelTitle: string; |
||||
|
|
||||
|
@Input() |
||||
|
addKeyTitle: string; |
||||
|
|
||||
|
@Input() |
||||
|
removeKeyTitle: string; |
||||
|
|
||||
|
@Input() |
||||
|
noKeysText: string; |
||||
|
|
||||
|
@Input() |
||||
|
datasourceType: DatasourceType; |
||||
|
|
||||
|
@Input() |
||||
|
entityAliasId: string; |
||||
|
|
||||
|
@Input() |
||||
|
deviceId: string; |
||||
|
|
||||
|
@Input() |
||||
|
@coerceBoolean() |
||||
|
hideDataKeyColor = false; |
||||
|
|
||||
|
dataKeyType: DataKeyType; |
||||
|
alarmKeys: Array<DataKey>; |
||||
|
functionTypeKeys: Array<DataKey>; |
||||
|
|
||||
|
keysListFormGroup: UntypedFormGroup; |
||||
|
|
||||
|
get widgetType(): widgetType { |
||||
|
return this.widgetConfigComponent.widgetType; |
||||
|
} |
||||
|
|
||||
|
get callbacks(): DataKeysCallbacks { |
||||
|
return this.widgetConfigComponent.widgetConfigCallbacks; |
||||
|
} |
||||
|
|
||||
|
get datakeySettingsSchema(): JsonSettingsSchema { |
||||
|
return this.widgetConfigComponent.modelValue?.dataKeySettingsSchema; |
||||
|
} |
||||
|
|
||||
|
private propagateChange = (_val: any) => {}; |
||||
|
|
||||
|
constructor(private fb: UntypedFormBuilder, |
||||
|
private dialog: MatDialog, |
||||
|
private cd: ChangeDetectorRef, |
||||
|
private utils: UtilsService, |
||||
|
private widgetConfigComponent: WidgetConfigComponent) { |
||||
|
} |
||||
|
|
||||
|
ngOnInit() { |
||||
|
this.keysListFormGroup = this.fb.group({ |
||||
|
keys: [this.fb.array([]), []] |
||||
|
}); |
||||
|
this.keysListFormGroup.valueChanges.subscribe( |
||||
|
(val) => this.propagateChange(this.keysListFormGroup.get('keys').value) |
||||
|
); |
||||
|
this.alarmKeys = []; |
||||
|
for (const name of Object.keys(alarmFields)) { |
||||
|
this.alarmKeys.push({ |
||||
|
name, |
||||
|
type: DataKeyType.alarm |
||||
|
}); |
||||
|
} |
||||
|
this.functionTypeKeys = []; |
||||
|
for (const type of this.utils.getPredefinedFunctionsList()) { |
||||
|
this.functionTypeKeys.push({ |
||||
|
name: type, |
||||
|
type: DataKeyType.function |
||||
|
}); |
||||
|
} |
||||
|
this.updateParams(); |
||||
|
} |
||||
|
|
||||
|
ngOnChanges(changes: SimpleChanges): void { |
||||
|
for (const propName of Object.keys(changes)) { |
||||
|
const change = changes[propName]; |
||||
|
if (!change.firstChange && change.currentValue !== change.previousValue) { |
||||
|
if (['datasourceType'].includes(propName)) { |
||||
|
this.updateParams(); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
private updateParams() { |
||||
|
if (this.datasourceType === DatasourceType.function) { |
||||
|
this.dataKeyType = DataKeyType.function; |
||||
|
} else { |
||||
|
if (this.widgetType !== widgetType.latest && this.widgetType !== widgetType.alarm) { |
||||
|
this.dataKeyType = DataKeyType.timeseries; |
||||
|
} else { |
||||
|
this.dataKeyType = null; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
registerOnChange(fn: any): void { |
||||
|
this.propagateChange = fn; |
||||
|
} |
||||
|
|
||||
|
registerOnTouched(fn: any): void { |
||||
|
} |
||||
|
|
||||
|
setDisabledState(isDisabled: boolean): void { |
||||
|
this.disabled = isDisabled; |
||||
|
if (isDisabled) { |
||||
|
this.keysListFormGroup.disable({emitEvent: false}); |
||||
|
} else { |
||||
|
this.keysListFormGroup.enable({emitEvent: false}); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
writeValue(value: DataKey[] | undefined): void { |
||||
|
this.keysListFormGroup.setControl('keys', this.prepareKeysFormArray(value), {emitEvent: false}); |
||||
|
} |
||||
|
|
||||
|
public validate(c: UntypedFormControl) { |
||||
|
return this.keysListFormGroup.valid ? null : { |
||||
|
dataKeyRows: { |
||||
|
valid: false, |
||||
|
}, |
||||
|
}; |
||||
|
} |
||||
|
|
||||
|
keyDrop(event: CdkDragDrop<string[]>) { |
||||
|
const keysArray = this.keysListFormGroup.get('keys') as UntypedFormArray; |
||||
|
const key = keysArray.at(event.previousIndex); |
||||
|
keysArray.removeAt(event.previousIndex); |
||||
|
keysArray.insert(event.currentIndex, key); |
||||
|
} |
||||
|
|
||||
|
keysFormArray(): UntypedFormArray { |
||||
|
return this.keysListFormGroup.get('keys') as UntypedFormArray; |
||||
|
} |
||||
|
|
||||
|
trackByKey(index: number, keyControl: AbstractControl): any { |
||||
|
return keyControl; |
||||
|
} |
||||
|
|
||||
|
removeKey(index: number) { |
||||
|
(this.keysListFormGroup.get('keys') as UntypedFormArray).removeAt(index); |
||||
|
} |
||||
|
|
||||
|
addKey() { |
||||
|
const dataKey = this.callbacks.generateDataKey('', null, this.datakeySettingsSchema); |
||||
|
dataKey.label = ''; |
||||
|
dataKey.decimals = 0; |
||||
|
const keysArray = this.keysListFormGroup.get('keys') as UntypedFormArray; |
||||
|
const keyControl = this.fb.control(dataKey, [dataKeyRowValidator]); |
||||
|
keysArray.push(keyControl); |
||||
|
} |
||||
|
|
||||
|
private prepareKeysFormArray(keys: DataKey[] | undefined): UntypedFormArray { |
||||
|
const keysControls: Array<AbstractControl> = []; |
||||
|
if (keys) { |
||||
|
keys.forEach((key) => { |
||||
|
keysControls.push(this.fb.control(key, [dataKeyRowValidator])); |
||||
|
}); |
||||
|
} |
||||
|
return this.fb.array(keysControls); |
||||
|
} |
||||
|
|
||||
|
} |
||||
@ -1,169 +0,0 @@ |
|||||
/** |
|
||||
* 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. |
|
||||
*/ |
|
||||
.tb-widget-config-panel { |
|
||||
box-shadow: 0 0 10px 6px rgba(11, 17, 51, 0.04); |
|
||||
border-radius: 4px; |
|
||||
padding: 16px; |
|
||||
gap: 16px; |
|
||||
display: flex; |
|
||||
flex-direction: column; |
|
||||
color: rgba(0, 0, 0, 0.87); |
|
||||
letter-spacing: 0.15px; |
|
||||
position: relative; |
|
||||
&.no-padding-bottom { |
|
||||
padding-bottom: 0; |
|
||||
} |
|
||||
&.stroked { |
|
||||
box-shadow: none; |
|
||||
border: 1px solid rgba(0, 0, 0, 0.12); |
|
||||
border-radius: 6px; |
|
||||
} |
|
||||
} |
|
||||
.tb-widget-config-panel-title { |
|
||||
font-weight: 500; |
|
||||
font-size: 16px; |
|
||||
} |
|
||||
.tb-widget-config-panel-hint { |
|
||||
font-size: 12px; |
|
||||
color: #808080; |
|
||||
} |
|
||||
.tb-widget-config-row { |
|
||||
height: 56px; |
|
||||
display: flex; |
|
||||
flex-direction: row; |
|
||||
align-items: center; |
|
||||
gap: 16px; |
|
||||
padding-left: 16px; |
|
||||
padding-right: 12px; |
|
||||
border: 1px solid rgba(0, 0, 0, 0.12); |
|
||||
border-radius: 6px; |
|
||||
&.same-padding { |
|
||||
padding-right: 16px; |
|
||||
} |
|
||||
&.space-between { |
|
||||
justify-content: space-between; |
|
||||
} |
|
||||
.mat-divider-vertical { |
|
||||
height: 56px; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
:host ::ng-deep { |
|
||||
|
|
||||
.mat-slide { |
|
||||
margin: 8px 0; |
|
||||
.mdc-form-field>label { |
|
||||
font-weight: 400; |
|
||||
font-size: 16px; |
|
||||
line-height: 24px; |
|
||||
margin-left: 12px; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.slide-block { |
|
||||
display: block; |
|
||||
&:not(:last-child) { |
|
||||
margin-bottom: 8px; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.mat-mdc-form-field { |
|
||||
&.center { |
|
||||
.mat-mdc-text-field-wrapper.mdc-text-field--outlined { |
|
||||
.mat-mdc-form-field-infix { |
|
||||
.mdc-text-field__input { |
|
||||
text-align: center; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
&.number { |
|
||||
.mat-mdc-text-field-wrapper.mdc-text-field--outlined { |
|
||||
padding-right: 4px; |
|
||||
.mat-mdc-form-field-infix { |
|
||||
width: 80px; |
|
||||
input.mdc-text-field__input[type=number]::-webkit-inner-spin-button, |
|
||||
input.mdc-text-field__input[type=number]::-webkit-outer-spin-button { |
|
||||
opacity: 1; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.tb-widget-config-row { |
|
||||
.mat-mdc-form-field { |
|
||||
.mat-mdc-text-field-wrapper.mdc-text-field--outlined { |
|
||||
padding-right: 12px; |
|
||||
padding-left: 12px; |
|
||||
&:not(.mdc-text-field--focused):not(.mdc-text-field--disabled):not(:hover) { |
|
||||
.mdc-notched-outline__leading, .mdc-notched-outline__trailing { |
|
||||
border-color: rgba(0, 0, 0, 0.12); |
|
||||
} |
|
||||
} |
|
||||
.mat-mdc-form-field-infix { |
|
||||
padding-top: 7px; |
|
||||
padding-bottom: 7px; |
|
||||
min-height: 38px; |
|
||||
width: 72px; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.tb-widget-config-panel { |
|
||||
.mat-expansion-panel { |
|
||||
&.tb-settings { |
|
||||
box-shadow: none; |
|
||||
.mat-content { |
|
||||
overflow: visible; |
|
||||
} |
|
||||
.mat-expansion-panel-header { |
|
||||
font-weight: 500; |
|
||||
font-size: 16px; |
|
||||
line-height: 24px; |
|
||||
letter-spacing: 0.25px; |
|
||||
padding: 0; |
|
||||
.mat-content { |
|
||||
flex: 0; |
|
||||
white-space: nowrap; |
|
||||
} |
|
||||
&:hover { |
|
||||
background: none; |
|
||||
} |
|
||||
.mat-expansion-indicator { |
|
||||
height: 32px; |
|
||||
padding: 2px; |
|
||||
} |
|
||||
} |
|
||||
.mat-expansion-panel-header-description { |
|
||||
align-items: center; |
|
||||
} |
|
||||
> .mat-expansion-panel-content { |
|
||||
> .mat-expansion-panel-body { |
|
||||
padding: 0; |
|
||||
} |
|
||||
} |
|
||||
.tb-json-object-panel, .tb-css-content-panel { |
|
||||
margin: 0 0 8px; |
|
||||
} |
|
||||
} |
|
||||
.mat-expansion-panel-content { |
|
||||
font: inherit; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
@ -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