Merge pull request #9002 from ArtemDzhereleiko/AD/imp/multiple-input/color-picker
Add color datakey type for multiple input widget
This commit is contained in:
Igor Kulikov
GitHub
commit
daf215691d
@ -23,12 +23,12 @@
|
||||
<fieldset *ngFor="let source of sources" [ngClass]="{'fields-group': settings.showGroupTitle}">
|
||||
<legend class="group-title" *ngIf="settings.showGroupTitle">{{ getGroupTitle(source.datasource) }}
|
||||
</legend>
|
||||
<div fxLayout="row" class="layout-wrap"
|
||||
<div class="tb-multiple-input-layout layout-wrap"
|
||||
[ngClass]="{'vertical-alignment': isVerticalAlignment || changeAlignment}">
|
||||
<div *ngFor="let key of visibleKeys(source)"
|
||||
[ngStyle]="{width: (isVerticalAlignment || changeAlignment) ? '100%' : inputWidthSettings}">
|
||||
<div class="input-field" *ngIf="key.settings.dataKeyValueType === 'string'">
|
||||
<mat-form-field class="mat-block">
|
||||
<mat-form-field class="mat-block" appearance="outline">
|
||||
<mat-label>{{key.label}}</mat-label>
|
||||
<input matInput
|
||||
formControlName="{{key.formId}}"
|
||||
@ -50,7 +50,7 @@
|
||||
</div>
|
||||
<div class="input-field" *ngIf="key.settings.dataKeyValueType === 'double' ||
|
||||
key.settings.dataKeyValueType === 'integer'">
|
||||
<mat-form-field class="mat-block">
|
||||
<mat-form-field class="mat-block" appearance="outline">
|
||||
<mat-label>{{key.label}}</mat-label>
|
||||
<input matInput
|
||||
formControlName="{{key.formId}}"
|
||||
@ -86,7 +86,7 @@
|
||||
</mat-checkbox>
|
||||
</div>
|
||||
<div class="input-field" *ngIf="key.settings.dataKeyValueType === 'JSON'">
|
||||
<mat-form-field class="mat-block">
|
||||
<mat-form-field class="mat-block" appearance="outline">
|
||||
<mat-label>{{key.label}}</mat-label>
|
||||
<input
|
||||
matInput
|
||||
@ -134,7 +134,7 @@
|
||||
<div class="input-field mat-block date-time-input" *ngIf="(key.settings.dataKeyValueType === 'dateTime') ||
|
||||
(key.settings.dataKeyValueType === 'date') ||
|
||||
(key.settings.dataKeyValueType === 'time')" fxLayout="column">
|
||||
<mat-form-field>
|
||||
<mat-form-field appearance="outline">
|
||||
<mat-label>{{key.label}}</mat-label>
|
||||
<mat-datetimepicker-toggle [for]="datePicker" matPrefix></mat-datetimepicker-toggle>
|
||||
<mat-datetimepicker #datePicker type="{{datePickerType(key.settings.dataKeyValueType)}}"
|
||||
@ -155,7 +155,7 @@
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="input-field" *ngIf="key.settings.dataKeyValueType === 'select'">
|
||||
<mat-form-field class="mat-block">
|
||||
<mat-form-field class="mat-block" appearance="outline">
|
||||
<mat-label>{{key.label}}</mat-label>
|
||||
<mat-select formControlName="{{key.formId}}"
|
||||
[required]="key.settings.required"
|
||||
@ -172,30 +172,46 @@
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
<div class="tb-form-row space-between color-picker-input" *ngIf="key.settings.dataKeyValueType === 'color'">
|
||||
<div class="label-container">
|
||||
<ng-container *ngIf="key.settings.icon || key.settings.safeCustomIcon">
|
||||
<mat-icon *ngIf="!key.settings.safeCustomIcon; else customToggleIcon">{{key.settings.icon}}</mat-icon>
|
||||
<ng-template #customToggleIcon>
|
||||
<img class="mat-icon" [src]="key.settings.safeCustomIcon" alt="icon">
|
||||
</ng-template>
|
||||
</ng-container>
|
||||
{{key.label}}
|
||||
</div>
|
||||
<tb-color-input asBoxInput
|
||||
[required]="key.settings.required"
|
||||
[requiredText]="getErrorMessageText(key.settings, 'required')"
|
||||
openOnInput
|
||||
formControlName="{{key.formId}}">
|
||||
</tb-color-input>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
</div>
|
||||
<div class="mat-padding" fxLayout="row" fxLayoutAlign="end center"
|
||||
<div class="mat-padding tb-multiple-input--buttons-container"
|
||||
*ngIf="entityDetected && isAllParametersValid && settings.showActionButtons">
|
||||
<button mat-button color="primary" type="button"
|
||||
(click)="discardAll()" style="max-height: 50px; margin-right:20px;"
|
||||
(click)="discardAll()" class="tb-multiple-input--buttons-container__button"
|
||||
[disabled]="!multipleInputFormGroup.dirty">
|
||||
{{ resetButtonLabel }}
|
||||
</button>
|
||||
<button mat-button mat-raised-button color="primary" type="submit"
|
||||
style="max-height: 50px; margin-right:20px;"
|
||||
class="tb-multiple-input--buttons-container__button"
|
||||
[disabled]="!multipleInputFormGroup.dirty || multipleInputFormGroup.invalid">
|
||||
{{ saveButtonLabel }}
|
||||
</button>
|
||||
</div>
|
||||
<div class="tb-multiple-input__errors" fxLayout="column" fxLayoutAlign="center center" style="height: 100%;"
|
||||
*ngIf="(!entityDetected || !isAllParametersValid) && datasourceDetected">
|
||||
<div style="text-align: center; font-size: 18px; color: #a0a0a0;" [fxHide]="entityDetected">
|
||||
<div class="tb-multiple-input--errors-container" *ngIf="(!entityDetected || !isAllParametersValid) && datasourceDetected">
|
||||
<div class="tb-multiple-input--errors-container__error" [fxHide]="entityDetected">
|
||||
{{ 'widgets.input-widgets.no-entity-selected' | translate }}
|
||||
</div>
|
||||
<div style="text-align: center; font-size: 18px; color: #a0a0a0;"
|
||||
[fxShow]="entityDetected && !isAllParametersValid">
|
||||
<div class="tb-multiple-input--errors-container__error" [fxShow]="entityDetected && !isAllParametersValid">
|
||||
{{ 'widgets.input-widgets.not-allowed-entity' | translate }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -21,7 +21,7 @@
|
||||
flex-direction: column;
|
||||
|
||||
.tb-multiple-input-container {
|
||||
padding: 0 8px;
|
||||
padding: 8px 8px 0;
|
||||
flex: 1 1 100%;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
@ -37,6 +37,28 @@
|
||||
}
|
||||
}
|
||||
|
||||
.tb-multiple-input-layout {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.color-picker-input {
|
||||
padding: 7px 16px 7px 12px;
|
||||
margin: 0 10px 22px 0;
|
||||
border-color: rgba(0, 0, 0, 0.4);
|
||||
|
||||
.label-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.mat-icon, img {
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.input-field {
|
||||
padding-right: 10px;
|
||||
|
||||
@ -61,6 +83,30 @@
|
||||
.vertical-alignment {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
&--buttons-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: end;
|
||||
&__button {
|
||||
max-height: 50px;
|
||||
margin-right:20px;
|
||||
}
|
||||
}
|
||||
|
||||
&--errors-container {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
&__error {
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
color: #a0a0a0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -54,7 +54,7 @@ type FieldAlignment = 'row' | 'column';
|
||||
type MultipleInputWidgetDataKeyType = 'server' | 'shared' | 'timeseries';
|
||||
export type MultipleInputWidgetDataKeyValueType = 'string' | 'double' | 'integer' |
|
||||
'JSON' | 'booleanCheckbox' | 'booleanSwitch' |
|
||||
'dateTime' | 'date' | 'time' | 'select';
|
||||
'dateTime' | 'date' | 'time' | 'select' | 'color';
|
||||
type MultipleInputWidgetDataKeyEditableType = 'editable' | 'disabled' | 'readonly';
|
||||
|
||||
type ConvertGetValueFunction = (value: any, ctx: WidgetContext) => any;
|
||||
@ -390,6 +390,12 @@ export class MultipleInputWidgetComponent extends PageComponent implements OnIni
|
||||
}
|
||||
});
|
||||
}
|
||||
} else if (key.settings.dataKeyValueType === 'color') {
|
||||
formControl.valueChanges.pipe(
|
||||
takeUntil(this.destroy$)
|
||||
).subscribe(() => {
|
||||
this.inputChanged(source, key);
|
||||
});
|
||||
}
|
||||
this.multipleInputFormGroup.addControl(key.formId, formControl);
|
||||
}
|
||||
|
||||
@ -69,6 +69,9 @@
|
||||
<mat-option [value]="'JSON'">
|
||||
{{ 'widgets.input-widgets.datakey-value-type-json' | translate }}
|
||||
</mat-option>
|
||||
<mat-option [value]="'color'">
|
||||
{{ 'widgets.input-widgets.datakey-value-type-color' | translate }}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
</section>
|
||||
|
||||
@ -5255,6 +5255,7 @@
|
||||
"datakey-value-type-date": "Date",
|
||||
"datakey-value-type-time": "Time",
|
||||
"datakey-value-type-select": "Select",
|
||||
"datakey-value-type-color": "Color",
|
||||
"value-is-required": "Value is required",
|
||||
"ability-to-edit-attribute": "Ability to edit attribute",
|
||||
"ability-to-edit-attribute-editable": "Editable (default)",
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user