Merge pull request #1105 from formio/expand-embed-lib

Expanding the components to allow for more functionality.

Author: lane-formio

CHANGELOG.md

@@ -2,6 +2,9 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+## [Unreleased: 8.1.0-rc.1]
+ - Expanding the components to allow for more functionality
+ 
 ## 8.0.0
 ### Changed
  - Official Release

package.json

@@ -10,7 +10,7 @@
     "docs:build": "compodoc -p tsconfig.json -n angular-formio -d docs --hideGenerator",
     "docs:serve": "npm run docs:build -- -s",
     "docs:watch": "npm run docs:build -- -s -w",
-    "publish": "npm run build:prod && npm publish ./dist/angular-formio --tag=8x",
+    "publish": "npm run build:prod && npm publish ./dist/angular-formio --tag=rc",
     "publish:latest": "npm run build:prod && npm publish ./dist/angular-formio",
     "test": "ng test",
     "lint": "ng lint",

projects/angular-formio/embed/src/builder.component.ts

@@ -1,5 +1,6 @@
 import { Component, ElementRef, Input, ViewChild, Output, EventEmitter, AfterViewInit } from '@angular/core';
-import { FormioCore as Formio } from '@formio/js';
+import { FormBuilder } from '@formio/js';
+import WebformBuilder from '@formio/js/lib/cjs/WebformBuilder';
 
 @Component({
     selector: 'formio-builder',
@@ -9,11 +10,59 @@ export class FormioBuilder implements AfterViewInit {
     @ViewChild('formio') element: ElementRef;
     @Input() form?: Object | null;
     @Input() options?: Object = {};
-    @Output() ready = new EventEmitter<Formio>();
+    @Output() change = new EventEmitter<any>();
+    @Output() ready = new EventEmitter<any>();
     @Output() error = new EventEmitter<any>();
+    public builder: FormBuilder;
+    public componentAdding = false;
+    get instance(): WebformBuilder {
+        return this.builder.instance;
+    }
     ngAfterViewInit(): void {
-        Formio.builder(this.element.nativeElement, this.form, this.options).then((builder) => {
-            this.ready.emit(builder);
+        this.builder = new FormBuilder(this.element.nativeElement, this.form, this.options);
+        this.builder.ready.then(() => {
+            this.instance.on('addComponent', (component, parent, path, index, isNew) => {
+                if (isNew) {
+                    this.componentAdding = true;
+                } else {
+                    this.change.emit({
+                        type: 'addComponent',
+                        builder: this.instance,
+                        form: this.instance.schema,
+                        component: component,
+                        parent: parent,
+                        path: path,
+                        index: index
+                    });
+                    this.componentAdding = false;
+                }
+            });
+            this.instance.on('saveComponent', (component, original, parent, path, index, isNew) => {
+                this.change.emit({
+                    type: this.componentAdding ? 'addComponent' : 'saveComponent',
+                    builder: this.instance,
+                    form: this.instance.schema,
+                    component: component,
+                    originalComponent: original,
+                    parent: parent,
+                    path: path,
+                    index: index,
+                    isNew: isNew || false
+                });
+                this.componentAdding = false;
+            });
+            this.instance.on('removeComponent', (component, parent, path, index) => {
+                this.change.emit({
+                    type: 'deleteComponent',
+                    builder: this.instance,
+                    form: this.instance.schema,
+                    component: component,
+                    parent: parent,
+                    path: path,
+                    index: index
+                });
+            });
+            this.ready.emit(this.instance);
         }).catch((err) => this.error.emit(err));
     }
 }

projects/angular-formio/embed/src/formio.component.ts

@@ -1,27 +1,36 @@
 import { Component, ViewChild, ElementRef, Input, Output, EventEmitter, OnChanges, AfterViewInit } from '@angular/core';
-import { FormioCore as Formio } from '@formio/js';
+import { FormioCore as Formio, Webform } from '@formio/js';
+import { Form, Submission } from '@formio/core/types'
 
 @Component({
     selector: 'formio',
     template: '<div #formio></div>'
 })
 export class FormioComponent implements AfterViewInit {
     @Input() src?: string;
-    @Input() form?: Object | null;
-    @Input() submission?: Object | null;
-    @Input() options?: Object = {};
-    @Output() ready = new EventEmitter<Formio>();
+    @Input() form?: Form | null;
+    @Input() submission?: Submission | null;
+    @Input() url?: string;
+    @Input() options?: Webform["options"] = {};
+    @Output() ready = new EventEmitter<Webform>();
     @Output() submit = new EventEmitter<object>();
     @Output() error = new EventEmitter<any>();
+    @Output() change = new EventEmitter<any>();
     @ViewChild('formio') element: ElementRef;
+    public instance: Webform;
     ngAfterViewInit(): void {
-        Formio.createForm(this.element.nativeElement, this.src || this.form, this.options).then((form) => {
+        Formio.createForm(this.element.nativeElement, this.src || this.form, this.options).then((form: Webform) => {
+            this.instance = form;
+            if (this.url) {
+                form.url = this.url;
+            }
             if (this.submission) {
                 form.submission = this.submission;
             }
             this.ready.emit(form);
             form.on('submit', (submission) => this.submit.emit(submission));
             form.on('error', (err) => this.error.emit(err));
+            form.on('change', (event) => this.change.emit(event));
         }).catch((err) => this.error.emit(err));
     }
 }

projects/angular-formio/src/formio.config.ts

@@ -14,7 +14,7 @@ export class FormioAppConfig {
     apiUrl?: string,
     baseUrl?: string, 
     appUrl?: string,
-    projectUrl?: string 
+    projectUrl?: string
   } = {}) {
     this.apiUrl = config.apiUrl || config.baseUrl;
     this.appUrl = config.appUrl || config.projectUrl;

projects/angular-formio/src/formio.utils.ts

@@ -1,5 +1,5 @@
 import { RouterModule } from '@angular/router';
-import { find, trim, each, intersection } from 'lodash';
+import { each } from 'lodash';
 
 export function extendRouter(Class: any, config: any, ClassRoutes: any) {
   each(Class.decorators, decorator => {
@@ -11,7 +11,9 @@ export function extendRouter(Class: any, config: any, ClassRoutes: any) {
         each(arg.imports, (_import, index) => {
           if (
             (_import.ngModule && (_import.ngModule.name === 'RouterModule')) ||
-            (_import.name === 'RouterModule')
+            (_import.ngModule && (_import.ngModule.name === '_RouterModule')) ||
+            (_import.name === 'RouterModule') ||
+            (_import.name === '_RouterModule')
           ) {
             arg.imports[index] = RouterModule.forChild(ClassRoutes(config));
           }