142 lines
7.2 KiB
HTML
142 lines
7.2 KiB
HTML
<!--
|
|
|
|
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.
|
|
|
|
-->
|
|
<form [formGroup]="widgetActionFormGroup" (ngSubmit)="save()" style="width: 900px;">
|
|
<mat-toolbar color="primary">
|
|
<h2>{{ (isAdd ? 'widget-config.add-action' : 'widget-config.edit-action' ) | translate }}</h2>
|
|
<span class="flex-1"></span>
|
|
<button mat-icon-button
|
|
(click)="cancel()"
|
|
type="button">
|
|
<mat-icon class="material-icons">close</mat-icon>
|
|
</button>
|
|
</mat-toolbar>
|
|
<mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
|
|
</mat-progress-bar>
|
|
<div style="height: 4px;" *ngIf="(isLoading$ | async) === false"></div>
|
|
<div mat-dialog-content>
|
|
<fieldset [disabled]="isLoading$ | async">
|
|
<div class="tb-form-panel no-padding no-border">
|
|
<div class="tb-form-row">
|
|
<div class="fixed-title-width">{{'widget-config.action-source' | translate}}*</div>
|
|
<mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
|
|
<mat-select required formControlName="actionSourceId" placeholder="{{ 'widget-config.select-action-source' | translate }}">
|
|
<mat-option *ngFor="let actionSourceItem of data.actionsData.actionSources | keyvalue" [value]="actionSourceItem.key">
|
|
{{ actionSourceName(actionSourceItem.value) }}
|
|
</mat-option>
|
|
</mat-select>
|
|
<mat-icon matSuffix
|
|
matTooltipPosition="above"
|
|
matTooltipClass="tb-error-tooltip"
|
|
[matTooltip]="'widget-config.action-source-required' | translate"
|
|
*ngIf="widgetActionFormGroup.get('actionSourceId').hasError('required')
|
|
&& widgetActionFormGroup.get('actionSourceId').touched"
|
|
class="tb-error">
|
|
warning
|
|
</mat-icon>
|
|
</mat-form-field>
|
|
</div>
|
|
<div class="tb-form-row" *ngIf="widgetActionFormGroup.get('actionSourceId').value === 'cellClick'">
|
|
<div class="fixed-title-width">{{'widget-config.column-index' | translate}}*</div>
|
|
<mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
|
|
<mat-select #columnIndexSelect formControlName="columnIndex" placeholder="{{ columnIndexPlaceholderText }}">
|
|
<mat-option *ngFor="let column of configuredColumns; let $index = index"
|
|
[value]="$index"
|
|
[disabled]="usedCellClickColumns.includes($index)">
|
|
{{ getCellClickColumnInfo($index, column) }}
|
|
</mat-option>
|
|
</mat-select>
|
|
<mat-icon matSuffix
|
|
matTooltipPosition="above"
|
|
matTooltipClass="tb-error-tooltip"
|
|
[matTooltip]="'widget-config.column-index-required' | translate"
|
|
*ngIf="widgetActionFormGroup.get('columnIndex').hasError('required') &&
|
|
widgetActionFormGroup.get('columnIndex').touched"
|
|
class="tb-error">
|
|
warning
|
|
</mat-icon>
|
|
</mat-form-field>
|
|
</div>
|
|
<div class="tb-form-row">
|
|
<div class="fixed-title-width">{{'widget-config.action-name' | translate}}*</div>
|
|
<mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
|
|
<input required matInput formControlName="name" placeholder="{{ 'widget-config.set' | translate }}">
|
|
<mat-icon matSuffix
|
|
matTooltipPosition="above"
|
|
matTooltipClass="tb-error-tooltip"
|
|
[matTooltip]="(widgetActionFormGroup.get('name').hasError('required')
|
|
? 'widget-config.action-name-required'
|
|
: 'widget-config.action-name-not-unique') | translate"
|
|
*ngIf="widgetActionFormGroup.get('name').invalid
|
|
&& (widgetActionFormGroup.get('name').touched || widgetActionFormGroup.get('name').hasError('actionNameNotUnique'))"
|
|
class="tb-error">
|
|
warning
|
|
</mat-icon>
|
|
</mat-form-field>
|
|
</div>
|
|
<div class="tb-form-row space-between">
|
|
<div>{{'widget-config.icon' | translate}}</div>
|
|
<tb-material-icon-select asBoxInput
|
|
formControlName="icon">
|
|
</tb-material-icon-select>
|
|
</div>
|
|
<div class="tb-form-panel stroked tb-slide-toggle" *ngIf="displayShowWidgetActionForm()">
|
|
<mat-expansion-panel class="tb-settings" [expanded]="widgetActionFormGroup.get('useShowWidgetActionFunction').value"
|
|
[disabled]="!widgetActionFormGroup.get('useShowWidgetActionFunction').value">
|
|
<mat-expansion-panel-header class="flex flex-row flex-wrap">
|
|
<mat-panel-title>
|
|
<mat-slide-toggle class="mat-slide flex justify-center items-stretch" formControlName="useShowWidgetActionFunction" (click)="$event.stopPropagation()">
|
|
{{ 'widget-config.show-hide-action-using-function' | translate }}
|
|
</mat-slide-toggle>
|
|
</mat-panel-title>
|
|
</mat-expansion-panel-header>
|
|
<ng-template matExpansionPanelContent>
|
|
<tb-js-func formControlName="showWidgetActionFunction"
|
|
functionTitle="{{ 'widget-config.show-action-function' | translate }}"
|
|
[helpId]="getWidgetActionFunctionHelpId()"
|
|
[functionArgs]="['widgetContext', 'data']"
|
|
[globalVariables]="functionScopeVariables"
|
|
[validationArgs]="[]"
|
|
[resultType]="'boolean'"
|
|
[editorCompleter]="customActionEditorCompleter"
|
|
></tb-js-func>
|
|
</ng-template>
|
|
</mat-expansion-panel>
|
|
</div>
|
|
<tb-widget-action
|
|
formControlName="widgetAction"
|
|
[callbacks]="data.callbacks"
|
|
[widgetType]="data.widgetType">
|
|
</tb-widget-action>
|
|
</div>
|
|
</fieldset>
|
|
</div>
|
|
<div mat-dialog-actions class="flex justify-end items-center">
|
|
<button mat-button color="primary"
|
|
type="button"
|
|
[disabled]="(isLoading$ | async)"
|
|
(click)="cancel()" cdkFocusInitial>
|
|
{{ 'action.cancel' | translate }}
|
|
</button>
|
|
<button mat-raised-button color="primary"
|
|
type="submit"
|
|
[disabled]="(isLoading$ | async) || widgetActionFormGroup.invalid || !widgetActionFormGroup.dirty">
|
|
{{ (isAdd ? 'action.add' : 'action.save') | translate }}
|
|
</button>
|
|
</div>
|
|
</form>
|