Browse Source

New Feature add the Select input on multiple input widget

pull/5153/head
ArtemDzhereleiko 5 years ago
parent
commit
75fa28f6fd
  1. 18
      ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.html
  2. 12
      ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.ts

18
ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.html

@ -104,6 +104,24 @@
</mat-error>
</mat-form-field>
</div>
<div class="input-field" *ngIf="key.settings.dataKeyValueType === 'select'">
<mat-form-field class="mat-block">
<mat-label>{{key.label}}</mat-label>
<mat-select formControlName="{{key.formId}}"
[required]="key.settings.required"
(focus)="key.isFocused = true;"
(blur)="key.isFocused = false; inputChanged(source, key)">
<mat-option *ngFor="let option of key.settings.selectOptions"
[value]="option.value !== 'null' ? option.value : null"
[disabled]="key.settings.isEditable === 'readonly'">
{{ getCustomTranslationText(option.label ? option.label : option.value) }}
</mat-option>
</mat-select>
<mat-error *ngIf="multipleInputFormGroup.get(key.formId).hasError('required')">
{{ getErrorMessageText(key.settings, 'required') }}
</mat-error>
</mat-form-field>
</div>
</div>
</div>
</fieldset>

12
ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.ts

@ -41,7 +41,7 @@ type FieldAlignment = 'row' | 'column';
type MultipleInputWidgetDataKeyType = 'server' | 'shared' | 'timeseries';
type MultipleInputWidgetDataKeyValueType = 'string' | 'double' | 'integer' |
'booleanCheckbox' | 'booleanSwitch' |
'dateTime' | 'date' | 'time';
'dateTime' | 'date' | 'time' | 'select';
type MultipleInputWidgetDataKeyEditableType = 'editable' | 'disabled' | 'readonly';
interface MultipleInputWidgetSettings {
@ -58,9 +58,15 @@ interface MultipleInputWidgetSettings {
attributesShared?: boolean;
}
interface MultipleInputWidgetSelectOption {
value: string;
label: string;
}
interface MultipleInputWidgetDataKeySettings {
dataKeyType: MultipleInputWidgetDataKeyType;
dataKeyValueType: MultipleInputWidgetDataKeyValueType;
selectOptions: MultipleInputWidgetSelectOption[];
required: boolean;
isEditable: MultipleInputWidgetDataKeyEditableType;
disabledOnDataKey: string;
@ -445,6 +451,10 @@ export class MultipleInputWidgetComponent extends PageComponent implements OnIni
return messageText;
}
public getCustomTranslationText(value): string {
return this.utils.customTranslation(value, value);
}
public visibleKeys(source: MultipleInputWidgetSource): MultipleInputWidgetDataKey[] {
return source.keys.filter(key => !key.settings.dataKeyHidden);
}

Loading…
Cancel
Save