dendi-wang/thingsboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #5153 from ArtemDzhereleiko/imp/add-select-input/multiple-input-widget

Browse Source 
[3.3.2] UI: Multiple Attributes widget added select type for input
This commit is contained in:
Igor Kulikov 2021-10-21 15:45:14 +03:00 committed by GitHub
commit b0f9c8ff29
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 43 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
application/src/main/data/json/system/widget_bundles/input_widgets.json
View File

File diff suppressed because one or more lines are too long

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

@ -104,6 +104,24 @@
</mat-error> </mat-error>
</mat-form-field> </mat-form-field>
</div> </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"
[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>
</div> </div>
</fieldset> </fieldset>

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

@ -24,7 +24,7 @@ import { UtilsService } from '@core/services/utils.service';
import { TranslateService } from '@ngx-translate/core'; import { TranslateService } from '@ngx-translate/core';
import { DataKey, Datasource, DatasourceData, DatasourceType, WidgetConfig } from '@shared/models/widget.models'; import { DataKey, Datasource, DatasourceData, DatasourceType, WidgetConfig } from '@shared/models/widget.models';
import { IWidgetSubscription } from '@core/api/widget-api.models'; import { IWidgetSubscription } from '@core/api/widget-api.models';
import { createLabelFromDatasource, isDefined, isDefinedAndNotNull, isEqual, isUndefined } from '@core/utils'; import { createLabelFromDatasource, isDefinedAndNotNull, isEqual, isNotEmptyStr, isUndefined } from '@core/utils';
import { EntityType } from '@shared/models/entity-type.models'; import { EntityType } from '@shared/models/entity-type.models';
import * as _moment from 'moment'; import * as _moment from 'moment';
import { FormBuilder, FormGroup, ValidatorFn, Validators } from '@angular/forms'; import { FormBuilder, FormGroup, ValidatorFn, Validators } from '@angular/forms';
@ -41,7 +41,7 @@ type FieldAlignment = 'row' | 'column';
type MultipleInputWidgetDataKeyType = 'server' | 'shared' | 'timeseries'; type MultipleInputWidgetDataKeyType = 'server' | 'shared' | 'timeseries';
type MultipleInputWidgetDataKeyValueType = 'string' | 'double' | 'integer' | type MultipleInputWidgetDataKeyValueType = 'string' | 'double' | 'integer' |
'booleanCheckbox' | 'booleanSwitch' | 'booleanCheckbox' | 'booleanSwitch' |
'dateTime' | 'date' | 'time'; 'dateTime' | 'date' | 'time' | 'select';
type MultipleInputWidgetDataKeyEditableType = 'editable' | 'disabled' | 'readonly'; type MultipleInputWidgetDataKeyEditableType = 'editable' | 'disabled' | 'readonly';
interface MultipleInputWidgetSettings { interface MultipleInputWidgetSettings {
@ -58,9 +58,15 @@ interface MultipleInputWidgetSettings {
attributesShared?: boolean; attributesShared?: boolean;
} }
interface MultipleInputWidgetSelectOption {
value: string | null;
label: string;
}
interface MultipleInputWidgetDataKeySettings { interface MultipleInputWidgetDataKeySettings {
dataKeyType: MultipleInputWidgetDataKeyType; dataKeyType: MultipleInputWidgetDataKeyType;
dataKeyValueType: MultipleInputWidgetDataKeyValueType; dataKeyValueType: MultipleInputWidgetDataKeyValueType;
selectOptions: MultipleInputWidgetSelectOption[];
required: boolean; required: boolean;
isEditable: MultipleInputWidgetDataKeyEditableType; isEditable: MultipleInputWidgetDataKeyEditableType;
disabledOnDataKey: string; disabledOnDataKey: string;
@ -251,6 +257,14 @@ export class MultipleInputWidgetComponent extends PageComponent implements OnIni
} }
// For backward compatibility // For backward compatibility
if (dataKey.settings.dataKeyValueType === 'select') {
dataKey.settings.selectOptions.forEach((option) => {
if (option.value.toLowerCase() === 'null') {
option.value = null;
}
});
}
source.keys.push(dataKey); source.keys.push(dataKey);
}); });
} else { } else {
@ -345,6 +359,9 @@ export class MultipleInputWidgetComponent extends PageComponent implements OnIni
case 'booleanSwitch': case 'booleanSwitch':
value = (keyData[0][1] === 'true'); value = (keyData[0][1] === 'true');
break; break;
case 'select':
value = keyData[0][1].toString();
break;
default: default:
value = keyData[0][1]; value = keyData[0][1];
} }
@ -449,6 +466,10 @@ export class MultipleInputWidgetComponent extends PageComponent implements OnIni
return messageText; return messageText;
} }
public getCustomTranslationText(value): string {
return this.utils.customTranslation(value, value);
}
public visibleKeys(source: MultipleInputWidgetSource): MultipleInputWidgetDataKey[] { public visibleKeys(source: MultipleInputWidgetSource): MultipleInputWidgetDataKey[] {
return source.keys.filter(key => !key.settings.dataKeyHidden); return source.keys.filter(key => !key.settings.dataKeyHidden);
} }
@ -472,7 +493,7 @@ export class MultipleInputWidgetComponent extends PageComponent implements OnIni
if (!this.settings.showActionButtons && !this.isSavingInProgress) { if (!this.settings.showActionButtons && !this.isSavingInProgress) {
this.isSavingInProgress = true; this.isSavingInProgress = true;
const currentValue = this.multipleInputFormGroup.get(key.formId).value; const currentValue = this.multipleInputFormGroup.get(key.formId).value;
if (!key.settings.required || (key.settings.required && isDefined(currentValue))) { if (!key.settings.required || (key.settings.required && isDefinedAndNotNull(currentValue) && isNotEmptyStr(currentValue.toString()))) {
const dataToSave: MultipleInputWidgetSource = { const dataToSave: MultipleInputWidgetSource = {
datasource: source.datasource, datasource: source.datasource,
keys: [key] keys: [key]