feat(page-builder): connected save methods #77

package.json

@@ -43,7 +43,7 @@
     "@angular/router": "13.1.1",
     "@jaspero/fb-fields-mat": "file:projects/fields-mat",
     "@jaspero/fb-form-ui": "2.4.7",
-    "@jaspero/fb-page-builder": "3.17.1",
+    "@jaspero/fb-page-builder": "file:projects/page-builder",
     "@jaspero/fb-segments-mat": "file:projects/segments-mat",
     "@jaspero/fb-tinymce": "file:projects/tinymce",
     "@jaspero/form-builder": "file:projects/form-builder",

projects/form-builder/src/lib/form-builder.component.ts

@@ -139,8 +139,6 @@ export class FormBuilderComponent implements OnChanges, OnDestroy {
       .sort((p1, p2) => p1[1].priority - p2[1].priority)
       .filter(process => process[1].save);
 
-    console.log(processes);
-
     if (!processes.length) {
       return of(data);
     }
@@ -233,8 +231,7 @@ export class FormBuilderComponent implements OnChanges, OnDestroy {
           try {
             value = get(config.outputValue, config.pointer);
           } catch (e) {
-            console.error(e);
-            return {exists: false}
+            return {exists: false};
           }
 
           return {value, exists: true};

projects/page-builder/src/lib/block-form/block-form.component.html

@@ -3,5 +3,6 @@
   [data]="formData"
   [id]="id"
   [parser]="parser"
+  [parent]="parent"
   (cdkObserveContent)="changedFormBuilder()">
 </fb-form-builder>

projects/page-builder/src/lib/block-form/block-form.component.ts

@@ -33,7 +33,10 @@ export class BlockFormComponent implements OnDestroy {
   parser: Parser;
   id: string;
   formData: FormBuilderData | undefined;
-  metadata: any;
+  parent: {
+    id: string;
+    pointer: string;
+  };
 
   private formSub: Subscription;
   private _selected: Selected;
@@ -65,10 +68,10 @@ export class BlockFormComponent implements OnDestroy {
     setTimeout(() => {
       this.id = [this.parentFormId || 'main', 'blocks', selected.index].join('-');
 
+      let pointer = `/blocks/${selected.index}/value`;
+
       if (selected.nested && typeof selected.nested.index === 'number' && selected.nested.arrayProperty) {
-        this.metadata = {array: selected.nested.arrayProperty, index: selected.nested.index};
-      } else {
-        this.metadata = null;
+        pointer += '/' + selected.nested.arrayProperty + '/' + selected.nested.index;
       }
 
       if (selected.form.segments) {
@@ -85,6 +88,10 @@ export class BlockFormComponent implements OnDestroy {
         this.formData = selected.form;
       }
 
+      this.parent = {
+        id: this.parentFormId,
+        pointer
+      };
       this.formData.value = selected.value;
       this.cdr.markForCheck();
 

projects/page-builder/src/lib/page-builder/page-builder.component.html

@@ -83,7 +83,7 @@
           <main>
             <fb-pb-block-form
               [selected]="selected"
-              [parentFormId]="cData.parentFormId"
+              [parentFormId]="cData.formId"
               (remove)="removeBlock()"
               (optionsChanged)="optionsChanged($event)">
             </fb-pb-block-form>

src/app/app.module.ts

@@ -8,16 +8,16 @@ import {BrowserModule} from '@angular/platform-browser';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 import {RouterModule, Routes} from '@angular/router';
 import {FbFieldsMatModule} from '@jaspero/fb-fields-mat';
-import {CUSTOM_COMPONENTS, DbService, FormBuilderModule, ROLE, STORAGE_URL, StorageService} from '@jaspero/form-builder';
-import {TRANSLOCO_CONFIG, TranslocoConfig, TranslocoModule} from '@ngneat/transloco';
 import {FbSegmentsMatModule} from '@jaspero/fb-segments-mat';
+import {TinymceModule} from '@jaspero/fb-tinymce';
+import {CUSTOM_COMPONENTS, DbService, FormBuilderModule, ROLE, StorageService, STORAGE_URL} from '@jaspero/form-builder';
+import {TranslocoConfig, TranslocoModule, TRANSLOCO_CONFIG} from '@ngneat/transloco';
 import {environment} from '../environments/environment';
 import {AppComponent} from './app.component';
 import {ExampleCustomComponent} from './example-custom/example-custom.component';
 import {MockDbService} from './mock/mock-db.service';
 import {MockStorageService} from './mock/mock-storage.service';
 import {translocoLoader} from './transloco.loader';
-import {TinymceModule} from '@jaspero/fb-tinymce';
 
 const routes: Routes = [
   {

src/app/examples/page-builder/blocks/blocks.module.ts

@@ -3,7 +3,7 @@ import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {MatCardModule} from '@angular/material/card';
 import {SanitizeModule} from '@jaspero/ng-helpers';
-import {InlineEditorModule} from '../../../../../projects/page-builder/src/lib/inline-editor/inline-editor.module';
+import {InlineEditorModule} from '@jaspero/page-builder';
 import {CardsComponent} from './cards/cards.component';
 import {DividerComponent} from './divider/divider.component';
 import {SimpleComponent} from './simple/simple.component';

src/app/examples/page-builder/blocks/cards/cards.component.ts

@@ -1,6 +1,5 @@
 import {ChangeDetectionStrategy, Component} from '@angular/core';
-import {BlockData, BlockDataOptions} from '../../../../../../projects/page-builder/src/lib/block-data.component';
-import {Block} from '../../../../../../projects/page-builder/src/lib/decorators/block.decorator';
+import {Block, BlockData, BlockDataOptions} from '@jaspero/page-builder';
 import {COMMON_OPTIONS} from '../../common-options.const';
 
 interface Data extends BlockDataOptions {

src/app/examples/page-builder/blocks/divider/divider.component.ts

@@ -1,7 +1,5 @@
 import {ChangeDetectionStrategy, Component, HostBinding} from '@angular/core';
-import {blockStyle} from '../../../../../../projects/page-builder/src/public-api';
-import {BlockData} from '../../../../../../projects/page-builder/src/lib/block-data.component';
-import {Block, BlockOptions} from '../../../../../../projects/page-builder/src/lib/decorators/block.decorator';
+import {Block, BlockData, BlockOptions, blockStyle} from '@jaspero/page-builder';
 
 /**
  * Set options for the block

src/app/examples/page-builder/blocks/simple/simple.component.ts

@@ -1,6 +1,5 @@
-import {ChangeDetectionStrategy, Component, Input, OnInit} from '@angular/core';
-import {BlockData, BlockDataOptions} from '../../../../../../projects/page-builder/src/lib/block-data.component';
-import {Block} from '../../../../../../projects/page-builder/src/lib/decorators/block.decorator';
+import {ChangeDetectionStrategy, Component} from '@angular/core';
+import {Block, BlockData, BlockDataOptions} from '@jaspero/page-builder';
 
 interface Data extends BlockDataOptions {
   title: string;

src/app/examples/page-builder/page-builder.component.ts

@@ -1,7 +1,7 @@
 import {AfterViewInit, ChangeDetectionStrategy, Component, ViewChild} from '@angular/core';
 import {FormBuilderComponent} from '@jaspero/form-builder';
-import {SCHEMA} from './schema.const';
 import {tap} from 'rxjs/operators';
+import {SCHEMA} from './schema.const';
 
 @Component({
   selector: 'sc-page-builder',

src/app/examples/page-builder/page-builder.module.ts

@@ -1,9 +1,9 @@
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {RouterModule, Routes} from '@angular/router';
-import {LoadClickModule} from '@jaspero/ng-helpers';
 import {FormBuilderModule} from '@jaspero/form-builder';
-import {PageBuilderModule as PBModule} from '../../../../projects/page-builder/src/lib/page-builder.module';
+import {LoadClickModule} from '@jaspero/ng-helpers';
+import {PageBuilderModule as PBModule} from '@jaspero/page-builder';
 import {BlocksModule} from './blocks/blocks.module';
 import {PageBuilderComponent} from './page-builder.component';