From 8138a714b07f8ea3493281360bf0239d61532b91 Mon Sep 17 00:00:00 2001
From: Dmitriymush <powder322@gmail.com>
Date: Thu, 2 Nov 2023 12:42:07 +0200
Subject: [PATCH 1/4] UI: dashboard form and image input redesign

---
 .../dashboard/dashboard-form.component.html   | 28 ++++++++++---------
 .../components/image-input.component.html     | 11 ++++++--
 .../components/image-input.component.scss     | 12 ++++----
 3 files changed, 29 insertions(+), 22 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/pages/dashboard/dashboard-form.component.html b/ui-ngx/src/app/modules/home/pages/dashboard/dashboard-form.component.html
index 0cb6adc7be..c9f9c85ccd 100644
--- a/ui-ngx/src/app/modules/home/pages/dashboard/dashboard-form.component.html
+++ b/ui-ngx/src/app/modules/home/pages/dashboard/dashboard-form.component.html
@@ -124,19 +124,21 @@
           <textarea matInput formControlName="description" rows="2"></textarea>
         </mat-form-field>
       </div>
-      <div translate>dashboard.mobile-app-settings</div>
-      <tb-image-input fxFlex
-                      label="{{'dashboard.image' | translate}}"
-                      maxSizeByte="524288"
-                      formControlName="image">
-      </tb-image-input>
-      <mat-checkbox fxFlex formControlName="mobileHide">
-        {{ 'dashboard.mobile-hide' | translate }}
-      </mat-checkbox>
-      <mat-form-field class="mat-block">
-        <mat-label translate>dashboard.mobile-order</mat-label>
-        <input matInput formControlName="mobileOrder" type="number" step="1">
-      </mat-form-field>
+      <div class="tb-form-panel stroked">
+        <div class="tb-form-panel-title" translate>dashboard.mobile-app-settings</div>
+        <mat-slide-toggle formControlName="mobileHide" class="mat-slide fixed-title-width">
+          {{ 'dashboard.mobile-hide' | translate }}
+        </mat-slide-toggle>
+        <mat-form-field class="mat-block">
+          <mat-label translate>dashboard.mobile-order</mat-label>
+          <input matInput formControlName="mobileOrder" type="number" step="1">
+        </mat-form-field>
+        <tb-image-input fxFlex
+                        label="{{'dashboard.image' | translate}}"
+                        maxSizeByte="524288"
+                        formControlName="image">
+        </tb-image-input>
+      </div>
     </fieldset>
   </form>
 </div>
diff --git a/ui-ngx/src/app/shared/components/image-input.component.html b/ui-ngx/src/app/shared/components/image-input.component.html
index 2ed771d8b2..1455014b2d 100644
--- a/ui-ngx/src/app/shared/components/image-input.component.html
+++ b/ui-ngx/src/app/shared/components/image-input.component.html
@@ -15,8 +15,14 @@
     limitations under the License.
 
 -->
-<div class="tb-container">
-  <label class="tb-title" *ngIf="label" [ngClass]="{'tb-error': !disabled && (required && !safeImageUrl), 'tb-required': !disabled && required}">{{label}}</label>
+<div class="tb-form-panel stroked">
+  <label class="tb-form-panel-title" *ngIf="label"
+         [ngClass]="{'tb-error': !disabled && (required && !safeImageUrl), 'tb-required': !disabled && required}">
+    {{label}}
+  </label>
+  <div class="tb-hint" *ngIf="maxSizeByte && !disabled" translate [translateParams]="{ size: maxSizeByte | fileSize}">
+    dashboard.maximum-upload-file-size
+  </div>
   <ng-container #flow="flow"
                 [flowConfig]="{singleFile: true, allowDuplicateUploads: true}">
     <div class="tb-image-select-container">
@@ -63,5 +69,4 @@
       </button>
   </div>
   </ng-container>
-  <div class="tb-hint" *ngIf="maxSizeByte && !disabled" translate [translateParams]="{ size: maxSizeByte | fileSize}">dashboard.maximum-upload-file-size</div>
 </div>
diff --git a/ui-ngx/src/app/shared/components/image-input.component.scss b/ui-ngx/src/app/shared/components/image-input.component.scss
index ee4f6451c4..b4108a296a 100644
--- a/ui-ngx/src/app/shared/components/image-input.component.scss
+++ b/ui-ngx/src/app/shared/components/image-input.component.scss
@@ -20,12 +20,12 @@ $previewSize: 78px !default;
 
 :host {
 
-  .tb-container {
-    margin-top: 0;
-    padding: 0 0 16px;
-    label.tb-title {
-      display: block;
-      padding-bottom: 8px;
+  .tb-form-panel.stroked {
+    gap: 8px;
+
+    .tb-hint {
+      padding: 0;
+      margin: 0;
     }
   }
 

From 7e0c798debc7b5b20dfc7c928cf292929150cb68 Mon Sep 17 00:00:00 2001
From: Dmitriymush <powder322@gmail.com>
Date: Sun, 5 Nov 2023 17:17:13 +0200
Subject: [PATCH 2/4] UI: implementation for assigned customers in add
 dashboard dialog, style fix and redo of image-input redesign

---
 .../pages/dashboard/dashboard-form.component.html |  7 +++++++
 .../pages/dashboard/dashboard-form.component.scss |  6 ++++++
 .../pages/dashboard/dashboard-form.component.ts   |  3 +++
 .../dashboard/dashboards-table-config.resolver.ts | 15 ++++++++++++++-
 .../shared/components/image-input.component.html  | 11 +++--------
 .../shared/components/image-input.component.scss  | 12 ++++++------
 ui-ngx/src/app/shared/models/dashboard.models.ts  |  1 +
 7 files changed, 40 insertions(+), 15 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/pages/dashboard/dashboard-form.component.html b/ui-ngx/src/app/modules/home/pages/dashboard/dashboard-form.component.html
index c9f9c85ccd..a8ce642865 100644
--- a/ui-ngx/src/app/modules/home/pages/dashboard/dashboard-form.component.html
+++ b/ui-ngx/src/app/modules/home/pages/dashboard/dashboard-form.component.html
@@ -124,6 +124,13 @@
           <textarea matInput formControlName="description" rows="2"></textarea>
         </mat-form-field>
       </div>
+      <div fxLayout="column" [fxShow]="isAdd">
+        <span>{{ 'dashboard.assigned-customers' | translate }}</span>
+        <tb-entity-list
+          formControlName="assignedCustomerIds"
+          [entityType]="entityType.CUSTOMER">
+        </tb-entity-list>
+      </div>
       <div class="tb-form-panel stroked">
         <div class="tb-form-panel-title" translate>dashboard.mobile-app-settings</div>
         <mat-slide-toggle formControlName="mobileHide" class="mat-slide fixed-title-width">
diff --git a/ui-ngx/src/app/modules/home/pages/dashboard/dashboard-form.component.scss b/ui-ngx/src/app/modules/home/pages/dashboard/dashboard-form.component.scss
index 66df772d2d..0226d68910 100644
--- a/ui-ngx/src/app/modules/home/pages/dashboard/dashboard-form.component.scss
+++ b/ui-ngx/src/app/modules/home/pages/dashboard/dashboard-form.component.scss
@@ -14,5 +14,11 @@
  * limitations under the License.
  */
 :host {
+  .tb-form-panel.stroked {
+    gap: 0;
 
+    .mat-slide.fixed-title-width {
+      margin: 16px 0;
+    }
+  }
 }
diff --git a/ui-ngx/src/app/modules/home/pages/dashboard/dashboard-form.component.ts b/ui-ngx/src/app/modules/home/pages/dashboard/dashboard-form.component.ts
index 053ee9326d..88c1dd5b0f 100644
--- a/ui-ngx/src/app/modules/home/pages/dashboard/dashboard-form.component.ts
+++ b/ui-ngx/src/app/modules/home/pages/dashboard/dashboard-form.component.ts
@@ -30,6 +30,7 @@ import {
 import { DashboardService } from '@core/http/dashboard.service';
 import { EntityTableConfig } from '@home/models/entity/entities-table-config.models';
 import { isEqual } from '@core/utils';
+import { EntityType } from '@shared/models/entity-type.models';
 
 @Component({
   selector: 'tb-dashboard-form',
@@ -43,6 +44,7 @@ export class DashboardFormComponent extends EntityComponent<Dashboard> {
 
   publicLink: string;
   assignedCustomersText: string;
+  entityType = EntityType;
 
   constructor(protected store: Store<AppState>,
               protected translate: TranslateService,
@@ -84,6 +86,7 @@ export class DashboardFormComponent extends EntityComponent<Dashboard> {
         image: [entity ? entity.image : null],
         mobileHide: [entity ? entity.mobileHide : false],
         mobileOrder: [entity ? entity.mobileOrder : null, [Validators.pattern(/^-?[0-9]+$/)]],
+        assignedCustomerIds: [[]],
         configuration: this.fb.group(
           {
             description: [entity && entity.configuration ? entity.configuration.description : ''],
diff --git a/ui-ngx/src/app/modules/home/pages/dashboard/dashboards-table-config.resolver.ts b/ui-ngx/src/app/modules/home/pages/dashboard/dashboards-table-config.resolver.ts
index 084faebefc..2ec3cf54d8 100644
--- a/ui-ngx/src/app/modules/home/pages/dashboard/dashboards-table-config.resolver.ts
+++ b/ui-ngx/src/app/modules/home/pages/dashboard/dashboards-table-config.resolver.ts
@@ -103,7 +103,7 @@ export class DashboardsTableConfigResolver implements Resolve<EntityTableConfig<
     this.config.deleteEntitiesContent = () => this.translate.instant('dashboard.delete-dashboards-text');
 
     this.config.loadEntity = id => this.dashboardService.getDashboard(id.id);
-    this.config.saveEntity = dashboard => this.dashboardService.saveDashboard(dashboard as Dashboard);
+    this.config.saveEntity = dashboard => this.saveAndAssignDashboard(dashboard as Dashboard);
     this.config.onEntityAction = action => this.onDashboardAction(action);
     this.config.detailsReadonly = () => (this.config.componentsData.dashboardScope === 'customer_user' ||
       this.config.componentsData.dashboardScope === 'edge_customer_user');
@@ -645,4 +645,17 @@ export class DashboardsTableConfigResolver implements Resolve<EntityTableConfig<
     );
   }
 
+  saveAndAssignDashboard(dashboard: Dashboard): Observable<Dashboard> {
+    const {assignedCustomerIds, ...dashboardToCreate} = dashboard;
+
+    return this.dashboardService.saveDashboard(dashboardToCreate as Dashboard).pipe(
+      mergeMap((createdDashboard) => {
+        if (assignedCustomerIds?.length) {
+          return this.dashboardService.addDashboardCustomers(createdDashboard.id.id, assignedCustomerIds);
+        }
+        return of(createdDashboard);
+      })
+    );
+  }
+
 }
diff --git a/ui-ngx/src/app/shared/components/image-input.component.html b/ui-ngx/src/app/shared/components/image-input.component.html
index 1455014b2d..2ed771d8b2 100644
--- a/ui-ngx/src/app/shared/components/image-input.component.html
+++ b/ui-ngx/src/app/shared/components/image-input.component.html
@@ -15,14 +15,8 @@
     limitations under the License.
 
 -->
-<div class="tb-form-panel stroked">
-  <label class="tb-form-panel-title" *ngIf="label"
-         [ngClass]="{'tb-error': !disabled && (required && !safeImageUrl), 'tb-required': !disabled && required}">
-    {{label}}
-  </label>
-  <div class="tb-hint" *ngIf="maxSizeByte && !disabled" translate [translateParams]="{ size: maxSizeByte | fileSize}">
-    dashboard.maximum-upload-file-size
-  </div>
+<div class="tb-container">
+  <label class="tb-title" *ngIf="label" [ngClass]="{'tb-error': !disabled && (required && !safeImageUrl), 'tb-required': !disabled && required}">{{label}}</label>
   <ng-container #flow="flow"
                 [flowConfig]="{singleFile: true, allowDuplicateUploads: true}">
     <div class="tb-image-select-container">
@@ -69,4 +63,5 @@
       </button>
   </div>
   </ng-container>
+  <div class="tb-hint" *ngIf="maxSizeByte && !disabled" translate [translateParams]="{ size: maxSizeByte | fileSize}">dashboard.maximum-upload-file-size</div>
 </div>
diff --git a/ui-ngx/src/app/shared/components/image-input.component.scss b/ui-ngx/src/app/shared/components/image-input.component.scss
index b4108a296a..ee4f6451c4 100644
--- a/ui-ngx/src/app/shared/components/image-input.component.scss
+++ b/ui-ngx/src/app/shared/components/image-input.component.scss
@@ -20,12 +20,12 @@ $previewSize: 78px !default;
 
 :host {
 
-  .tb-form-panel.stroked {
-    gap: 8px;
-
-    .tb-hint {
-      padding: 0;
-      margin: 0;
+  .tb-container {
+    margin-top: 0;
+    padding: 0 0 16px;
+    label.tb-title {
+      display: block;
+      padding-bottom: 8px;
     }
   }
 
diff --git a/ui-ngx/src/app/shared/models/dashboard.models.ts b/ui-ngx/src/app/shared/models/dashboard.models.ts
index ffe475d19d..e4cf4e35b9 100644
--- a/ui-ngx/src/app/shared/models/dashboard.models.ts
+++ b/ui-ngx/src/app/shared/models/dashboard.models.ts
@@ -126,6 +126,7 @@ export interface DashboardConfiguration {
 export interface Dashboard extends DashboardInfo {
   configuration?: DashboardConfiguration;
   dialogRef?: MatDialogRef<any>;
+  assignedCustomerIds?: Array<string>;
 }
 
 export interface HomeDashboard extends Dashboard {

From 489bced2defaad4015362047a1dbe0da7e836a0f Mon Sep 17 00:00:00 2001
From: Dmitriymush <powder322@gmail.com>
Date: Tue, 14 Nov 2023 15:33:55 +0200
Subject: [PATCH 3/4] UI: dashboard redesing editions after review

---
 .../dashboard/dashboard-form.component.html     | 17 ++++++++---------
 .../dashboard/dashboard-form.component.scss     |  6 ------
 .../pages/dashboard/dashboard-form.component.ts |  8 ++++++--
 .../dashboards-table-config.resolver.ts         |  5 +++--
 .../src/app/shared/models/dashboard.models.ts   |  5 ++++-
 5 files changed, 21 insertions(+), 20 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/pages/dashboard/dashboard-form.component.html b/ui-ngx/src/app/modules/home/pages/dashboard/dashboard-form.component.html
index a8ce642865..86acb4a093 100644
--- a/ui-ngx/src/app/modules/home/pages/dashboard/dashboard-form.component.html
+++ b/ui-ngx/src/app/modules/home/pages/dashboard/dashboard-form.component.html
@@ -124,16 +124,15 @@
           <textarea matInput formControlName="description" rows="2"></textarea>
         </mat-form-field>
       </div>
-      <div fxLayout="column" [fxShow]="isAdd">
-        <span>{{ 'dashboard.assigned-customers' | translate }}</span>
-        <tb-entity-list
-          formControlName="assignedCustomerIds"
-          [entityType]="entityType.CUSTOMER">
-        </tb-entity-list>
-      </div>
-      <div class="tb-form-panel stroked">
+      <tb-entity-list
+        [fxShow]="isAdd"
+        formControlName="assignedCustomerIds"
+        labelText="{{ 'dashboard.assigned-customers' | translate }}"
+        [entityType]="entityType.CUSTOMER">
+      </tb-entity-list>
+      <div class="tb-form-panel stroked no-gap">
         <div class="tb-form-panel-title" translate>dashboard.mobile-app-settings</div>
-        <mat-slide-toggle formControlName="mobileHide" class="mat-slide fixed-title-width">
+        <mat-slide-toggle formControlName="mobileHide" class="mat-slide margin fixed-title-width">
           {{ 'dashboard.mobile-hide' | translate }}
         </mat-slide-toggle>
         <mat-form-field class="mat-block">
diff --git a/ui-ngx/src/app/modules/home/pages/dashboard/dashboard-form.component.scss b/ui-ngx/src/app/modules/home/pages/dashboard/dashboard-form.component.scss
index 0226d68910..66df772d2d 100644
--- a/ui-ngx/src/app/modules/home/pages/dashboard/dashboard-form.component.scss
+++ b/ui-ngx/src/app/modules/home/pages/dashboard/dashboard-form.component.scss
@@ -14,11 +14,5 @@
  * limitations under the License.
  */
 :host {
-  .tb-form-panel.stroked {
-    gap: 0;
 
-    .mat-slide.fixed-title-width {
-      margin: 16px 0;
-    }
-  }
 }
diff --git a/ui-ngx/src/app/modules/home/pages/dashboard/dashboard-form.component.ts b/ui-ngx/src/app/modules/home/pages/dashboard/dashboard-form.component.ts
index 88c1dd5b0f..3da09f84c8 100644
--- a/ui-ngx/src/app/modules/home/pages/dashboard/dashboard-form.component.ts
+++ b/ui-ngx/src/app/modules/home/pages/dashboard/dashboard-form.component.ts
@@ -80,13 +80,12 @@ export class DashboardFormComponent extends EntityComponent<Dashboard> {
 
   buildForm(entity: Dashboard): UntypedFormGroup {
     this.updateFields(entity);
-    return this.fb.group(
+    const form = this.fb.group(
       {
         title: [entity ? entity.title : '', [Validators.required, Validators.maxLength(255)]],
         image: [entity ? entity.image : null],
         mobileHide: [entity ? entity.mobileHide : false],
         mobileOrder: [entity ? entity.mobileOrder : null, [Validators.pattern(/^-?[0-9]+$/)]],
-        assignedCustomerIds: [[]],
         configuration: this.fb.group(
           {
             description: [entity && entity.configuration ? entity.configuration.description : ''],
@@ -94,6 +93,11 @@ export class DashboardFormComponent extends EntityComponent<Dashboard> {
         )
       }
     );
+    if (this.isAdd) {
+      form.addControl('assignedCustomerIds', this.fb.control([]));
+    }
+
+    return form;
   }
 
   updateForm(entity: Dashboard) {
diff --git a/ui-ngx/src/app/modules/home/pages/dashboard/dashboards-table-config.resolver.ts b/ui-ngx/src/app/modules/home/pages/dashboard/dashboards-table-config.resolver.ts
index 2ec3cf54d8..9238ac4244 100644
--- a/ui-ngx/src/app/modules/home/pages/dashboard/dashboards-table-config.resolver.ts
+++ b/ui-ngx/src/app/modules/home/pages/dashboard/dashboards-table-config.resolver.ts
@@ -47,6 +47,7 @@ import {
 import {
   Dashboard,
   DashboardInfo,
+  DashboardSetup,
   getDashboardAssignedCustomersText,
   isCurrentPublicDashboardCustomer,
   isPublicDashboard
@@ -103,7 +104,7 @@ export class DashboardsTableConfigResolver implements Resolve<EntityTableConfig<
     this.config.deleteEntitiesContent = () => this.translate.instant('dashboard.delete-dashboards-text');
 
     this.config.loadEntity = id => this.dashboardService.getDashboard(id.id);
-    this.config.saveEntity = dashboard => this.saveAndAssignDashboard(dashboard as Dashboard);
+    this.config.saveEntity = dashboard => this.saveAndAssignDashboard(dashboard as DashboardSetup);
     this.config.onEntityAction = action => this.onDashboardAction(action);
     this.config.detailsReadonly = () => (this.config.componentsData.dashboardScope === 'customer_user' ||
       this.config.componentsData.dashboardScope === 'edge_customer_user');
@@ -645,7 +646,7 @@ export class DashboardsTableConfigResolver implements Resolve<EntityTableConfig<
     );
   }
 
-  saveAndAssignDashboard(dashboard: Dashboard): Observable<Dashboard> {
+  saveAndAssignDashboard(dashboard: DashboardSetup): Observable<Dashboard> {
     const {assignedCustomerIds, ...dashboardToCreate} = dashboard;
 
     return this.dashboardService.saveDashboard(dashboardToCreate as Dashboard).pipe(
diff --git a/ui-ngx/src/app/shared/models/dashboard.models.ts b/ui-ngx/src/app/shared/models/dashboard.models.ts
index e4cf4e35b9..8ccff354a7 100644
--- a/ui-ngx/src/app/shared/models/dashboard.models.ts
+++ b/ui-ngx/src/app/shared/models/dashboard.models.ts
@@ -126,7 +126,6 @@ export interface DashboardConfiguration {
 export interface Dashboard extends DashboardInfo {
   configuration?: DashboardConfiguration;
   dialogRef?: MatDialogRef<any>;
-  assignedCustomerIds?: Array<string>;
 }
 
 export interface HomeDashboard extends Dashboard {
@@ -138,6 +137,10 @@ export interface HomeDashboardInfo {
   hideDashboardToolbar: boolean;
 }
 
+export interface DashboardSetup extends Dashboard {
+  assignedCustomerIds?: Array<string>;
+}
+
 export const isPublicDashboard = (dashboard: DashboardInfo): boolean => {
   if (dashboard && dashboard.assignedCustomers) {
     return dashboard.assignedCustomers

From bc6d2ed5faa0f1f7646d7053954688cbee6a5623 Mon Sep 17 00:00:00 2001
From: Dmitriymush <powder322@gmail.com>
Date: Tue, 14 Nov 2023 15:43:13 +0200
Subject: [PATCH 4/4] UI: dashboard redesing minor fix

---
 .../modules/home/pages/dashboard/dashboard-form.component.html  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui-ngx/src/app/modules/home/pages/dashboard/dashboard-form.component.html b/ui-ngx/src/app/modules/home/pages/dashboard/dashboard-form.component.html
index 86acb4a093..15485fbcb0 100644
--- a/ui-ngx/src/app/modules/home/pages/dashboard/dashboard-form.component.html
+++ b/ui-ngx/src/app/modules/home/pages/dashboard/dashboard-form.component.html
@@ -125,7 +125,7 @@
         </mat-form-field>
       </div>
       <tb-entity-list
-        [fxShow]="isAdd"
+        *ngIf="isAdd"
         formControlName="assignedCustomerIds"
         labelText="{{ 'dashboard.assigned-customers' | translate }}"
         [entityType]="entityType.CUSTOMER">