From dc3f3ceafbfbf9cc06d402c1a8e0bc5c16b77094 Mon Sep 17 00:00:00 2001 From: Artem Dzhereleiko Date: Thu, 27 Jul 2023 17:23:53 +0300 Subject: [PATCH 1/7] UI: Add color picker input for multiple input widget --- .../widget/lib/multiple-input-widget.component.html | 11 +++++++++++ .../widget/lib/multiple-input-widget.component.ts | 2 +- ...te-multiple-attributes-key-settings.component.html | 3 +++ ui-ngx/src/assets/locale/locale.constant-en_US.json | 1 + 4 files changed, 16 insertions(+), 1 deletion(-) diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.html index 0a757fd34f..c0886046c0 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.html @@ -172,6 +172,17 @@ +
+ + +
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.ts index 534be7c676..05a972e296 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.ts +++ b/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' | 'colorPicker'; type MultipleInputWidgetDataKeyEditableType = 'editable' | 'disabled' | 'readonly'; type ConvertGetValueFunction = (value: any, ctx: WidgetContext) => any; diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-multiple-attributes-key-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-multiple-attributes-key-settings.component.html index 3c62810000..22eb191ec3 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-multiple-attributes-key-settings.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-multiple-attributes-key-settings.component.html @@ -69,6 +69,9 @@ {{ 'widgets.input-widgets.datakey-value-type-json' | translate }} + + {{ 'widgets.input-widgets.datakey-value-type-color-picker' | translate }} + diff --git a/ui-ngx/src/assets/locale/locale.constant-en_US.json b/ui-ngx/src/assets/locale/locale.constant-en_US.json index c5ec1fca40..fbfb96cac0 100644 --- a/ui-ngx/src/assets/locale/locale.constant-en_US.json +++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json @@ -4792,6 +4792,7 @@ "datakey-value-type-date": "Date", "datakey-value-type-time": "Time", "datakey-value-type-select": "Select", + "datakey-value-type-color-picker": "Color Picker", "value-is-required": "Value is required", "ability-to-edit-attribute": "Ability to edit attribute", "ability-to-edit-attribute-editable": "Editable (default)", From f9af643f6cb6e94842dbda04bda3da87afddf426 Mon Sep 17 00:00:00 2001 From: Artem Dzhereleiko Date: Fri, 28 Jul 2023 10:35:02 +0300 Subject: [PATCH 2/7] UI: Refactoring --- .../lib/multiple-input-widget.component.html | 21 +++++++++---------- 1 file changed, 10 insertions(+), 11 deletions(-) diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.html index c0886046c0..9d5bf1420c 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.html @@ -172,17 +172,16 @@ -
- - -
+ + From a659d1b7e6c8614923e4d9b1e42df524165dabab Mon Sep 17 00:00:00 2001 From: Artem Dzhereleiko Date: Fri, 28 Jul 2023 11:02:27 +0300 Subject: [PATCH 3/7] UI: Change value type for color --- .../widget/lib/multiple-input-widget.component.html | 2 +- .../components/widget/lib/multiple-input-widget.component.ts | 2 +- .../update-multiple-attributes-key-settings.component.html | 4 ++-- ui-ngx/src/assets/locale/locale.constant-en_US.json | 2 +- 4 files changed, 5 insertions(+), 5 deletions(-) diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.html index 9d5bf1420c..fa51899c4a 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.html @@ -173,7 +173,7 @@ any; diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-multiple-attributes-key-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-multiple-attributes-key-settings.component.html index 22eb191ec3..d69a4b0713 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-multiple-attributes-key-settings.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-multiple-attributes-key-settings.component.html @@ -69,8 +69,8 @@ {{ 'widgets.input-widgets.datakey-value-type-json' | translate }} - - {{ 'widgets.input-widgets.datakey-value-type-color-picker' | translate }} + + {{ 'widgets.input-widgets.datakey-value-type-color' | translate }} diff --git a/ui-ngx/src/assets/locale/locale.constant-en_US.json b/ui-ngx/src/assets/locale/locale.constant-en_US.json index fbfb96cac0..af441665bd 100644 --- a/ui-ngx/src/assets/locale/locale.constant-en_US.json +++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json @@ -4792,7 +4792,7 @@ "datakey-value-type-date": "Date", "datakey-value-type-time": "Time", "datakey-value-type-select": "Select", - "datakey-value-type-color-picker": "Color Picker", + "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)", From 49b149d484e99c802715eb81283ab245f2ee25f2 Mon Sep 17 00:00:00 2001 From: Artem Dzhereleiko Date: Fri, 28 Jul 2023 18:32:36 +0300 Subject: [PATCH 4/7] UI: Refactoring for new style --- .../lib/multiple-input-widget.component.html | 42 ++++++++++++------- .../lib/multiple-input-widget.component.scss | 26 +++++++++++- .../components/color-input.component.ts | 5 ++- 3 files changed, 56 insertions(+), 17 deletions(-) diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.html index fa51899c4a..9c228ec93f 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.html @@ -28,7 +28,7 @@
- + {{key.label}}
- + {{key.label}}
- + {{key.label}} - + {{key.label}}
- + {{key.label}}
- - + +
+
+ + {{key.settings.icon}} + + icon + + + {{key.label}} +
+
+ + + +
+
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.scss b/ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.scss index d0dd324e52..8fec24cf05 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.scss +++ b/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,30 @@ } } + .color-picker-input { + height: 56px; + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + gap: 16px; + padding: 7px 16px 7px 12px; + margin: 0 10px 22px 0; + border: 1px solid rgba(0, 0, 0, 0.4); + border-radius: 6px; + + .mat-icon, img { + margin-right: 5px; + } + + .mat-divider-vertical { + height: 56px; + margin-top: -7px; + margin-bottom: -7px; + border-right-color: rgba(0, 0, 0, 0.4); + } + } + .input-field { padding-right: 10px; diff --git a/ui-ngx/src/app/shared/components/color-input.component.ts b/ui-ngx/src/app/shared/components/color-input.component.ts index fa6c73116e..88a49f756e 100644 --- a/ui-ngx/src/app/shared/components/color-input.component.ts +++ b/ui-ngx/src/app/shared/components/color-input.component.ts @@ -14,7 +14,7 @@ /// limitations under the License. /// -import { ChangeDetectorRef, Component, forwardRef, Input, OnInit } from '@angular/core'; +import { ChangeDetectorRef, Component, EventEmitter, forwardRef, Input, OnInit, Output } from '@angular/core'; import { PageComponent } from '@shared/components/page.component'; import { Store } from '@ngrx/store'; import { AppState } from '@core/core.state'; @@ -91,6 +91,8 @@ export class ColorInputComponent extends PageComponent implements OnInit, Contro @Input() disabled: boolean; + @Output() colorChanged: EventEmitter = new EventEmitter(); + private modelValue: string; private propagateChange = null; @@ -150,6 +152,7 @@ export class ColorInputComponent extends PageComponent implements OnInit, Contro if (this.modelValue !== color) { this.modelValue = color; this.propagateChange(this.modelValue); + this.colorChanged.emit(color); } } From 08bd89d0bee76a86b51244ef3548a64b5dd6e423 Mon Sep 17 00:00:00 2001 From: Artem Dzhereleiko Date: Fri, 28 Jul 2023 18:44:22 +0300 Subject: [PATCH 5/7] UI: Remove divider --- .../widget/lib/multiple-input-widget.component.html | 1 - .../widget/lib/multiple-input-widget.component.scss | 7 ------- 2 files changed, 8 deletions(-) diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.html index 67c28bd878..6c749cab3b 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.html @@ -184,7 +184,6 @@ {{key.label}}
- Date: Mon, 31 Jul 2023 13:28:53 +0300 Subject: [PATCH 6/7] UI: Refactoring css and save color --- .../lib/multiple-input-widget.component.html | 35 +++++++-------- .../lib/multiple-input-widget.component.scss | 43 ++++++++++++++++--- .../lib/multiple-input-widget.component.ts | 6 +++ .../components/color-input.component.ts | 15 +------ 4 files changed, 58 insertions(+), 41 deletions(-) diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.html index 6c749cab3b..39b135b77a 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.html @@ -23,7 +23,7 @@
{{ getGroupTitle(source.datasource) }} -
@@ -173,8 +173,8 @@
-
-
+
+
{{key.settings.icon}} @@ -183,40 +183,35 @@ {{key.label}}
-
- - -
+ +
-
-
-
+
+
{{ 'widgets.input-widgets.no-entity-selected' | translate }}
-
+
{{ 'widgets.input-widgets.not-allowed-entity' | translate }}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.scss b/ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.scss index 7a27c39907..f6edd1fb52 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.scss +++ b/ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.scss @@ -37,17 +37,22 @@ } } - .color-picker-input { - height: 56px; + .tb-multiple-input-layout { display: flex; flex-direction: row; - align-items: center; - justify-content: space-between; - gap: 16px; + align-items: start; + } + + .color-picker-input { padding: 7px 16px 7px 12px; margin: 0 10px 22px 0; - border: 1px solid rgba(0, 0, 0, 0.4); - border-radius: 6px; + border-color: rgba(0, 0, 0, 0.4); + + .label-container { + display: flex; + flex-direction: row; + align-items: center; + } .mat-icon, img { margin-right: 5px; @@ -78,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 { + height: 100%; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + } + &__error { + text-align: center; + font-size: 18px; + color: #a0a0a0; + } } } diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.ts index 4c7fb1cfec..6f29a495cf 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.ts @@ -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); } diff --git a/ui-ngx/src/app/shared/components/color-input.component.ts b/ui-ngx/src/app/shared/components/color-input.component.ts index 8997409e7c..f22b91fde2 100644 --- a/ui-ngx/src/app/shared/components/color-input.component.ts +++ b/ui-ngx/src/app/shared/components/color-input.component.ts @@ -14,17 +14,7 @@ /// limitations under the License. /// -import { - ChangeDetectorRef, - Component, - EventEmitter, - forwardRef, - Input, - OnInit, - Output, - Renderer2, - ViewContainerRef -} from '@angular/core'; +import { ChangeDetectorRef, Component, forwardRef, Input, OnInit, Renderer2, ViewContainerRef } from '@angular/core'; import { PageComponent } from '@shared/components/page.component'; import { Store } from '@ngrx/store'; import { AppState } from '@core/core.state'; @@ -110,8 +100,6 @@ export class ColorInputComponent extends PageComponent implements OnInit, Contro @Input() disabled: boolean; - @Output() colorChanged: EventEmitter = new EventEmitter(); - private modelValue: string; private propagateChange = null; @@ -174,7 +162,6 @@ export class ColorInputComponent extends PageComponent implements OnInit, Contro if (this.modelValue !== color) { this.modelValue = color; this.propagateChange(this.modelValue); - this.colorChanged.emit(color); } } From 1569bee351715f203cb141377050e96d0fd3797c Mon Sep 17 00:00:00 2001 From: Artem Dzhereleiko Date: Mon, 31 Jul 2023 13:34:37 +0300 Subject: [PATCH 7/7] UI: Refactoring error container --- .../widget/lib/multiple-input-widget.component.html | 6 +++--- .../widget/lib/multiple-input-widget.component.scss | 12 ++++++------ 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.html index 39b135b77a..ae739332be 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.html @@ -207,11 +207,11 @@ {{ saveButtonLabel }}
-
-
+
+
{{ 'widgets.input-widgets.no-entity-selected' | translate }}
-
+
{{ 'widgets.input-widgets.not-allowed-entity' | translate }}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.scss b/ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.scss index f6edd1fb52..3185bc8b17 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.scss +++ b/ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.scss @@ -95,17 +95,17 @@ } } - &__errors { + &--errors-container { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; - } - &__error { - text-align: center; - font-size: 18px; - color: #a0a0a0; + &__error { + text-align: center; + font-size: 18px; + color: #a0a0a0; + } } } }