UI: dashboard redesing editions after review

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

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

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) {

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(

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