fix(composer): update components with new config

re orchestratora/rfcs#2
orchestratora · Jan 14, 2022 · 28d954d · 28d954d
1 parent 2123516
commit 28d954d
Show file tree

Hide file tree

Showing 4 changed files with 77 additions and 54 deletions.
diff --git a/libs/composer/src/lib/composer-configurator/composer-configurator.component.ts b/libs/composer/src/lib/composer-configurator/composer-configurator.component.ts
@@ -3,7 +3,7 @@ import {
   Component,
   Input,
   OnChanges,
-  OnInit,
+  Output,
   SimpleChanges,
 } from '@angular/core';
 import {
@@ -16,12 +16,27 @@ import {
   ComponentLocatorService,
   ConfigurationMeta,
   ConfigurationService,
+  OptionAllowedValues,
   OptionInteger,
   OptionRange,
   OptionRequired,
   OrchestratorDynamicComponentType,
-  OptionAllowedValues,
 } from '@orchestrator/core';
+import { Observable, Subject } from 'rxjs';
+import { switchAll } from 'rxjs/operators';
+
+export interface ControlConfig {
+  validators: ValidatorFn[];
+  tag: string;
+  type?: string;
+  options?: any[];
+  extras: any;
+  default?: any;
+}
+
+export interface ControlConfigObject {
+  [key: string]: ControlConfig;
+}
 
 /**
  * @internal
@@ -32,9 +47,13 @@ import {
   styleUrls: ['./composer-configurator.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class ComposerConfiguratorComponent implements OnInit, OnChanges {
+export class ComposerConfiguratorComponent implements OnChanges {
+  setFormChanges$ = new Subject<Observable<any>>();
+
   @Input() component: OrchestratorDynamicComponentType;
 
+  @Output() configUpdate = this.setFormChanges$.pipe(switchAll());
+
   formConfig: ControlConfigObject;
   formGroup: FormGroup;
 
@@ -44,17 +63,13 @@ export class ComposerConfiguratorComponent implements OnInit, OnChanges {
     private fb: FormBuilder,
   ) {}
 
-  ngOnInit() {
-    this.updateConfigMeta();
-  }
-
   ngOnChanges(changes: SimpleChanges) {
     if ('component' in changes) {
-      this.updateConfigMeta();
+      this.updateConfig();
     }
   }
 
-  private updateConfigMeta() {
+  private updateConfig() {
     const configType = this.componentLocatorService.getConfigType(
       this.component,
     );
@@ -67,7 +82,7 @@ export class ComposerConfiguratorComponent implements OnInit, OnChanges {
     this.formConfig = this.genConfigFromMeta(groupedConfig, defaultConfig);
     this.formGroup = this.genFormGroupFromConfig(this.formConfig);
 
-    console.log(this.formConfig);
+    this.setFormChanges$.next(this.formGroup.valueChanges);
   }
 
   private genFormGroupFromConfig(config: ControlConfigObject): FormGroup {
@@ -173,16 +188,3 @@ export class ComposerConfiguratorComponent implements OnInit, OnChanges {
     );
   }
 }
-
-export interface ControlConfig {
-  validators: ValidatorFn[];
-  tag: string;
-  type?: string;
-  options?: any[];
-  extras: any;
-  default?: any;
-}
-
-export interface ControlConfigObject {
-  [key: string]: ControlConfig;
-}
diff --git a/libs/composer/src/lib/composer-droppable/composer-droppable.component.html b/libs/composer/src/lib/composer-droppable/composer-droppable.component.html
@@ -1,21 +1,16 @@
 <div class="rendered-item" *ngIf="config?.item?.component; else dropTpl">
   <orc-render-item [item]="config.item"></orc-render-item>
-  <orc-composer-configurator
-    [component]="config.item.component"
-  ></orc-composer-configurator>
+  <nz-collapse [nzBordered]="false">
+    <nz-collapse-panel nzHeader="Configuration Form">
+      <orc-composer-configurator
+        [component]="config.item.component"
+        (configUpdate)="configUpdated($event)"
+      ></orc-composer-configurator>
+    </nz-collapse-panel>
+  </nz-collapse>
 </div>
 <ng-template #dropTpl>
-  <div
-    class="drop-list"
-    cdkDropList
-    (cdkDropListDropped)="drop($event, configInput.value)"
-  >
+  <div class="drop-list" cdkDropList (cdkDropListDropped)="drop($event)">
     <span class="drop-list-hint">Drop component here!</span>
   </div>
-  <nz-divider nzText="Set component configuration" nzDashed></nz-divider>
-  <textarea
-    #configInput
-    nz-input
-    [nzAutosize]="{ minRows: 2, maxRows: 6 }"
-  ></textarea>
 </ng-template>
diff --git a/libs/composer/src/lib/composer-droppable/composer-droppable.component.ts b/libs/composer/src/lib/composer-droppable/composer-droppable.component.ts
@@ -49,15 +49,19 @@ export class ComposerDroppableComponent
   >();
 
   private droppedConfig: OrchestratorConfigItem;
+  private component: OrchestratorDynamicComponentType;
+  private compConfig: any;
+  private prevItem: OrchestratorConfigItem;
 
   static wrapComponent<C>(
     comp: OrchestratorDynamicComponentType<C>,
     config?: C,
+    items?: OrchestratorConfigItem[],
   ): OrchestratorConfigItem<C> {
     return {
       component: comp,
       config,
-      items: [ComposerDroppableComponent.wrapperConfig],
+      items: items || [ComposerDroppableComponent.wrapperConfig],
     };
   }
 
@@ -80,33 +84,53 @@ export class ComposerDroppableComponent
     }
   }
 
-  drop(e: CdkDragDrop<any>, conf?: string) {
+  drop(e: CdkDragDrop<any>) {
     const compType = e.item.data as OrchestratorDynamicComponentType;
-    const config = ComposerDroppableComponent.wrapComponent(
-      compType,
-      JSON.parse(conf || 'null'),
-    );
 
-    this.droppedConfig = config;
+    this.compConfig = undefined;
+    this.component = compType;
 
-    if (this.parentDroppable) {
-      this.parentDroppable.addItem(config);
-    } else {
-      this.config = { item: config };
-    }
+    this.updateItem();
 
     this.componentDropped.emit(compType);
   }
 
-  addItem(item: OrchestratorConfigItem) {
+  replaceItem(item: OrchestratorConfigItem, prevItem?: OrchestratorConfigItem) {
     this.renderComponent.removeItem(ComposerDroppableComponent.wrapperConfig);
 
-    this.renderComponent.addItem(
-      ComposerDroppableComponent.wrapComponent(ComposerDroppableComponent, {
-        item,
-      }),
+    if (prevItem) {
+      this.renderComponent.removeItem(prevItem);
+    }
+
+    const newItem = ComposerDroppableComponent.wrapComponent(
+      ComposerDroppableComponent,
+      { item },
     );
 
+    this.renderComponent.addItem(newItem);
     this.renderComponent.addItem(ComposerDroppableComponent.wrapperConfig);
+
+    return newItem;
+  }
+
+  configUpdated(compConfig: any) {
+    this.compConfig = compConfig;
+    this.updateItem();
+  }
+
+  private updateItem() {
+    const config = ComposerDroppableComponent.wrapComponent(
+      this.component,
+      this.compConfig,
+      this.config ? this.config.item.items : undefined,
+    );
+
+    this.droppedConfig = config;
+
+    if (this.parentDroppable) {
+      this.prevItem = this.parentDroppable.replaceItem(config, this.prevItem);
+    } else {
+      this.config = { item: config };
+    }
   }
 }
diff --git a/libs/composer/src/lib/composer-droppable/composer-droppable.module.ts b/libs/composer/src/lib/composer-droppable/composer-droppable.module.ts
@@ -2,6 +2,7 @@ import { DragDropModule } from '@angular/cdk/drag-drop';
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { OrchestratorCoreModule } from '@orchestrator/core';
+import { NzCollapseModule } from 'ng-zorro-antd/collapse';
 import { NzDividerModule } from 'ng-zorro-antd/divider';
 import { NzInputModule } from 'ng-zorro-antd/input';
 
@@ -17,6 +18,7 @@ import { ComposerDroppableComponent } from './composer-droppable.component';
     DragDropModule,
     NzInputModule,
     NzDividerModule,
+    NzCollapseModule,
     OrchestratorCoreModule.withComponents([ComposerDroppableComponent]),
     ComposerConfiguratorModule,
   ],