Merge pull request #9002 from ArtemDzhereleiko/AD/imp/multiple-input/color-picker

Add color datakey type for multiple input widget

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

@@ -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>

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

@@ -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;
+      }
+    }
   }
 }
 

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

@@ -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);
       }

ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-multiple-attributes-key-settings.component.html

@@ -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>

ui-ngx/src/assets/locale/locale.constant-en_US.json

@@ -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)",