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

[3.3.2] UI: Multiple Attributes widget added select type for input

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"
+                            [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>

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

@@ -24,7 +24,7 @@ import { UtilsService } from '@core/services/utils.service';
 import { TranslateService } from '@ngx-translate/core';
 import { DataKey, Datasource, DatasourceData, DatasourceType, WidgetConfig } from '@shared/models/widget.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 * as _moment from 'moment';
 import { FormBuilder, FormGroup, ValidatorFn, Validators } from '@angular/forms';
@@ -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 | null;
+  label: string;
+}
+
 interface MultipleInputWidgetDataKeySettings {
   dataKeyType: MultipleInputWidgetDataKeyType;
   dataKeyValueType: MultipleInputWidgetDataKeyValueType;
+  selectOptions: MultipleInputWidgetSelectOption[];
   required: boolean;
   isEditable: MultipleInputWidgetDataKeyEditableType;
   disabledOnDataKey: string;
@@ -251,6 +257,14 @@ export class MultipleInputWidgetComponent extends PageComponent implements OnIni
             }
             // 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);
           });
         } else {
@@ -345,6 +359,9 @@ export class MultipleInputWidgetComponent extends PageComponent implements OnIni
             case 'booleanSwitch':
               value = (keyData[0][1] === 'true');
               break;
+            case 'select':
+              value = keyData[0][1].toString();
+              break;
             default:
               value = keyData[0][1];
           }
@@ -449,6 +466,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);
   }
@@ -472,7 +493,7 @@ export class MultipleInputWidgetComponent extends PageComponent implements OnIni
     if (!this.settings.showActionButtons && !this.isSavingInProgress) {
       this.isSavingInProgress = true;
       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 = {
           datasource: source.datasource,
           keys: [key]