Merge pull request #9553 from Dmitriymush/enhacements/add-dashboard-dialog

Dashboard form redesign

ui-ngx/src/app/modules/home/pages/dashboard/dashboard-form.component.html

@@ -124,18 +124,26 @@
           <textarea matInput formControlName="description" rows="2"></textarea>
         </mat-form-field>
       </div>
-      <div translate>dashboard.mobile-app-settings</div>
-      <tb-gallery-image-input fxFlex
-                      label="{{'dashboard.image' | translate}}"
-                      formControlName="image">
-      </tb-gallery-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>
+      <tb-entity-list
+        *ngIf="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 margin 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-gallery-image-input fxFlex
+                                label="{{'dashboard.image' | translate}}"
+                                formControlName="image">
+        </tb-gallery-image-input>
+      </div>
     </fieldset>
   </form>
 </div>

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,
@@ -78,7 +80,7 @@ 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],
@@ -91,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
@@ -109,7 +110,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 DashboardSetup);
     this.config.onEntityAction = action => this.onDashboardAction(action);
     this.config.detailsReadonly = () => (this.config.componentsData.dashboardScope === 'customer_user' ||
       this.config.componentsData.dashboardScope === 'edge_customer_user');
@@ -675,4 +676,17 @@ export class DashboardsTableConfigResolver implements Resolve<EntityTableConfig<
     );
   }
 
+  saveAndAssignDashboard(dashboard: DashboardSetup): 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);
+      })
+    );
+  }
+
 }

ui-ngx/src/app/shared/models/dashboard.models.ts

@@ -138,6 +138,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