@formio/angular 7.5.0-rc.2 → 7.5.0-rc.3

package/projects/angular-formio/src/components/formbuilder/formbuilder.component.ts

@@ -0,0 +1,213 @@
+import {
+  Component,
+  Input,
+  OnInit,
+  OnChanges,
+  OnDestroy,
+  ViewEncapsulation,
+  Optional,
+  ElementRef,
+  ViewChild,
+  EventEmitter,
+  Output,
+  NgZone
+} from '@angular/core';
+import { FormioAppConfig } from '../../formio.config';
+import {
+  FormioForm,
+  FormioOptions
+} from '../../formio.common';
+import { Formio, FormBuilder, Utils } from '@formio/js';
+import { assign } from 'lodash';
+import { Observable, Subscription } from 'rxjs';
+import { CustomTagsService } from '../../custom-tags.service';
+
+/* tslint:disable */
+@Component({
+  selector: 'form-builder',
+  templateUrl: './formbuilder.component.html',
+  styleUrls: ['../../../../../node_modules/@formio/js/dist/formio.builder.min.css'],
+  encapsulation: ViewEncapsulation.None
+})
+/* tslint:enable */
+export class FormBuilderComponent implements OnInit, OnChanges, OnDestroy {
+  public ready: Promise<object>;
+  public readyResolve: any;
+  public formio: any;
+  public builder: FormBuilder;
+  public componentAdding = false;
+  private refreshSubscription: Subscription;
+  @Input() form?: FormioForm;
+  @Input() options?: FormioOptions;
+  @Input() formbuilder?: any;
+  @Input() noeval ? = false;
+  @Input() refresh?: Observable<void>;
+  @Input() rebuild?: Observable<object>;
+  @Output() change: EventEmitter<object>;
+  @ViewChild('builder', { static: true }) builderElement?: ElementRef<any>;
+
+  constructor(
+    private ngZone: NgZone,
+    @Optional() private config: FormioAppConfig,
+    @Optional() private customTags?: CustomTagsService
+  ) {
+    if (this.config) {
+      Formio.setBaseUrl(this.config.apiUrl);
+      Formio.setProjectUrl(this.config.appUrl);
+    } else {
+      console.warn('You must provide an AppConfig within your application!');
+    }
+
+    this.change = new EventEmitter();
+    this.ready = new Promise((resolve: any) => {
+      this.readyResolve = resolve;
+    });
+  }
+
+  ngOnInit() {
+    Utils.Evaluator.noeval = this.noeval;
+
+    if (this.refresh) {
+      this.refreshSubscription = this.refresh.subscribe(() => {
+        this.ngZone.runOutsideAngular(() => {
+          this.buildForm(this.form);
+        });
+      });
+    }
+
+    if (this.rebuild) {
+      this.rebuild.subscribe((options) => {
+        this.ngZone.runOutsideAngular(() => {
+          this.rebuildForm(this.form, options);
+        });
+      });
+    }
+  }
+
+  setInstance(instance: any) {
+    this.formio = instance;
+    instance.off('addComponent');
+    instance.off('saveComponent');
+    instance.off('updateComponent');
+    instance.off('removeComponent');
+    instance.on('addComponent', (component, parent, path, index, isNew) => {
+      this.ngZone.run(() => {
+        if (isNew) {
+          this.componentAdding = true;
+        } else {
+          this.change.emit({
+            type: 'addComponent',
+            builder: instance,
+            form: instance.schema,
+            component: component,
+            parent: parent,
+            path: path,
+            index: index
+          });
+          this.componentAdding = false;
+        }
+      });
+    });
+    instance.on('saveComponent', (component, original, parent, path, index, isNew) => {
+      this.ngZone.run(() => {
+        this.change.emit({
+          type: this.componentAdding ? 'addComponent' : 'saveComponent',
+          builder: instance,
+          form: instance.schema,
+          component: component,
+          originalComponent: original,
+          parent: parent,
+          path: path,
+          index: index,
+          isNew: isNew || false
+        });
+        this.componentAdding = false;
+      });
+    });
+    instance.on('updateComponent', (component) => {
+      this.ngZone.run(() => {
+        this.change.emit({
+          type: 'updateComponent',
+          builder: instance,
+          form: instance.schema,
+          component: component
+        });
+      });
+    });
+    instance.on('removeComponent', (component, parent, path, index) => {
+      this.ngZone.run(() => {
+        this.change.emit({
+          type: 'deleteComponent',
+          builder: instance,
+          form: instance.schema,
+          component: component,
+          parent: parent,
+          path: path,
+          index: index
+        });
+      });
+    });
+    this.ngZone.run(() => {
+      this.readyResolve(instance);
+    });
+    return instance;
+  }
+
+  setDisplay(display: String, prevDisplay?: string) {
+    if (display && display !== prevDisplay) {
+      (this.builder as any).setDisplay(display);
+    }
+  }
+
+  buildForm(form: any, prevForm?: any) {
+    if (!form || !this.builderElement || !this.builderElement.nativeElement) {
+      return;
+    }
+
+    if (this.builder) {
+      this.setDisplay(form.display, prevForm?.display);
+      this.setInstance(this.builder.instance);
+      this.builder.form = form;
+      this.builder.instance.form = form;
+      return this.builder.instance;
+    }
+
+    return this.rebuildForm(form);
+  }
+
+  rebuildForm(form: any, options?: object) {
+    const Builder = this.formbuilder || FormBuilder;
+    const extraTags = this.customTags ? this.customTags.tags : [];
+    this.builder = new Builder(
+      this.builderElement.nativeElement,
+      form,
+      assign({
+        icons: 'fontawesome',
+        sanitizeConfig: {
+          addTags: extraTags
+        }
+      }, options || this.options || {})
+    );
+    return this.builder.ready.then(instance => this.setInstance(instance));
+  }
+
+  ngOnChanges(changes: any) {
+    Utils.Evaluator.noeval = this.noeval;
+
+    if (changes.form && changes.form.currentValue) {
+      this.ngZone.runOutsideAngular(() => {
+        this.buildForm(changes.form.currentValue || {components: []}, changes.form.previousValue);
+      });
+    }
+  }
+
+  ngOnDestroy() {
+    if (this.refreshSubscription) {
+      this.refreshSubscription.unsubscribe();
+    }
+
+    if (this.formio) {
+      this.formio.destroy();
+    }
+  }
+}

package/projects/angular-formio/src/components/formio/formio.component.html

@@ -0,0 +1,8 @@
+<div role="form" [attr.aria-label]="label">
+  <div *ngIf="isLoading && !hideLoading" style="position:relative;height:200px">
+    <formio-loader [isLoading]="isLoading"></formio-loader>
+  </div>
+  <formio-alerts *ngIf="this.options.alertsPosition === AlertsPosition.top || this.options.alertsPosition === AlertsPosition.both" (focusComponent)="focusOnComponet($event)" [alerts]="alerts"></formio-alerts>
+  <div #formio></div>
+  <formio-alerts *ngIf="this.options.alertsPosition === AlertsPosition.bottom || this.options.alertsPosition === AlertsPosition.both" (focusComponent)="focusOnComponet($event)" [alerts]="alerts"></formio-alerts>
+</div>

package/projects/angular-formio/src/components/formio/formio.component.ts

@@ -0,0 +1,33 @@
+import { Component, OnInit, Optional, ViewEncapsulation, Input, NgZone, OnChanges } from '@angular/core';
+import { FormioAppConfig } from '../../formio.config';
+import { Formio, Form } from '@formio/js';
+import { FormioBaseComponent } from '../../FormioBaseComponent';
+import { CustomTagsService } from '../../custom-tags.service';
+
+/* tslint:disable */
+@Component({
+  selector: 'formio',
+  templateUrl: './formio.component.html',
+  styleUrls: ['../../../../../node_modules/@formio/js/dist/formio.form.min.css'],
+  encapsulation: ViewEncapsulation.None,
+})
+/* tslint:enable */
+export class FormioComponent extends FormioBaseComponent implements OnInit, OnChanges {
+  constructor(
+    public ngZone: NgZone,
+    @Optional() public config: FormioAppConfig,
+    @Optional() public customTags?: CustomTagsService,
+  ) {
+    super(ngZone, config, customTags);
+    if (this.config) {
+      Formio.setBaseUrl(this.config.apiUrl);
+      Formio.setProjectUrl(this.config.appUrl);
+    } else {
+      console.warn('You must provide an AppConfig within your application!');
+    }
+  }
+
+  getRenderer() {
+    return this.renderer || Form;
+  }
+}

package/projects/angular-formio/src/components/formioreport/formioreport.component.html

@@ -0,0 +1,8 @@
+<div role="form" [attr.aria-label]="label">
+  <div *ngIf="isReportLoading && !hideLoading" style="position:relative;height:200px">
+    <formio-loader [isLoading]="isReportLoading"></formio-loader>
+  </div>
+  <formio-alerts *ngIf="this.options.alertsPosition === AlertsPosition.top || this.options.alertsPosition === AlertsPosition.both" (focusComponent)="focusOnComponet($event)" [alerts]="alerts"></formio-alerts>
+  <div #report></div>
+  <formio-alerts *ngIf="this.options.alertsPosition === AlertsPosition.bottom || this.options.alertsPosition === AlertsPosition.both" (focusComponent)="focusOnComponet($event)" [alerts]="alerts"></formio-alerts>
+</div>

package/projects/angular-formio/src/components/formioreport/formioreport.component.ts

@@ -0,0 +1,95 @@
+import { Component, OnInit, ViewEncapsulation, Input, OnChanges, ViewChild, ElementRef, EventEmitter, Output } from '@angular/core';
+import { Formio } from '@formio/js';
+import { FormioComponent } from '../formio/formio.component';
+import { FormioReport } from '../../formio.common';
+
+/* tslint:disable */
+@Component({
+  selector: 'formio-report',
+  templateUrl: './formioreport.component.html',
+  styleUrls: ['../../../../../node_modules/@formio/js/dist/formio.form.min.css'],
+  encapsulation: ViewEncapsulation.None,
+})
+/* tslint:enable */
+export class FormioReportComponent extends FormioComponent implements OnInit, OnChanges {
+  @Input() report?: FormioReport;
+  @Input() projectEndpoint?: string;
+  @Output() fetchDataError = new EventEmitter<any>();
+  @ViewChild('report', { static: true }) declare formioElement?: ElementRef<any>;
+
+  public isReportLoading: boolean;
+
+  setFormFromSrc() {
+    this.service.loadSubmission({ params: { live: 1 } }).subscribe(
+      (report: FormioReport) => {
+        this.report = report;
+        if (report && report.data) {
+          this.ngZone.runOutsideAngular(() => {
+            this.setForm({ components: [], report });
+            this.isReportLoading = false;
+          });
+        }
+      },
+      err => this.onError(err)
+    );
+  }
+
+  setFormUrl(url) {
+    return;
+  }
+
+  ngOnChanges(changes: any) {
+    super.ngOnChanges(changes)
+
+    if (changes.report && changes.report.currentValue) {
+      this.ngZone.runOutsideAngular(() => {
+        this.setForm({ report: changes.report.currentValue, components: [] });
+        this.isReportLoading = false;
+      });
+    }
+  }
+
+  getRendererOptions() {
+    const projectEndpoint = this.projectEndpoint || this.config?.appUrl || this.service?.formio?.projectUrl;
+
+    if (!projectEndpoint && !this.src) {
+      console.warn('The projectEndpoint url is required to render the Report using JSON schema.');
+    }
+    return {
+      projectEndpoint,
+      ...super.getRendererOptions(),
+    }
+  }
+  createRenderer() {
+    const Renderer = this.getRenderer();
+    if (!Renderer) {
+      return null;
+    }
+
+    const form = (new Renderer(
+      this.formioElement ? this.formioElement.nativeElement : null,
+      this.report,
+      this.getRendererOptions()
+    ));
+    return form.instance;
+  }
+ 
+  attachFormEvents() {
+    this.formio.on('fetchDataError', (error: any, component: any) =>  this.ngZone.run(() => {
+      this.alerts.addAlert({
+        type: 'danger',
+        message:  error ? JSON.stringify(error) : error,
+      });
+      this.fetchDataError.emit({error, component});
+    }));
+  }
+
+  getRenderer() {
+    const reportRenderer = (Formio as any).Report;
+    if (!reportRenderer) {
+      console.error('Report is not found in Formio. Please make sure that you are using the Formio Reporting module and it is correctly included in your application.');
+    }
+
+    return reportRenderer;
+  }
+}

package/projects/angular-formio/src/components/loader/formio.loader.component.html

@@ -0,0 +1,3 @@
+<div class="formio-loader-wrapper" *ngIf="isLoading">
+  <div class="formio-loader"></div>
+</div>

package/projects/angular-formio/src/components/loader/formio.loader.component.scss

@@ -0,0 +1,26 @@
+.formio-loader-wrapper {
+  position:absolute;
+  top: 0px;
+  bottom: 0px;
+  left: 0px;
+  right: 0px;
+  z-index: 1000;
+}
+
+.formio-loader {
+  position:absolute;
+  left: 50%;
+  top: 50%;
+  margin-left: -30px;
+  margin-top: -30px;
+  z-index: 10000;
+  display: inline-block;
+  border: 6px solid #f3f3f3;
+  border-top: 6px solid #3498db;
+  border-radius: 50%;
+  width: 60px;
+  height: 60px;
+  animation: spin 2s linear infinite;
+}
+
+@keyframes spin {0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); }}

package/projects/angular-formio/src/components/loader/formio.loader.component.ts

@@ -0,0 +1,10 @@
+import {Component, Input} from '@angular/core';
+
+@Component({
+  selector: 'formio-loader',
+  styleUrls: ['./formio.loader.component.scss'],
+  templateUrl: './formio.loader.component.html'
+})
+export class FormioLoaderComponent {
+  @Input() isLoading: boolean;
+}

package/projects/angular-formio/src/core.ts

@@ -0,0 +1,19 @@
+if (window && typeof (window as any).global === 'undefined') {
+  (window as any).global = window;
+}
+export * from './formio.config';
+export * from './formio.common';
+export * from './formio.service';
+export * from './formio-promise.service';
+export * from './formio.utils';
+export * from './FormioBaseComponent';
+export * from './components/formio/formio.component';
+export * from './components/formbuilder/formbuilder.component';
+export * from './components/formioreport/formioreport.component';
+export * from './components/loader/formio.loader.component';
+export * from './components/alerts/formio.alerts';
+export * from './components/alerts/formio.alerts.component';
+export { FormioModule } from './formio.module';
+export { ComponentSchema, ExtendedComponentSchema, ElementInfo } from '@formio/deprecated-types';
+export { Utils as FormioUtils } from '@formio/js';
+export { Formio } from '@formio/js';

package/projects/angular-formio/src/custom-tags.service.ts

@@ -0,0 +1,9 @@
+import { Injectable } from '@angular/core';
+@Injectable()
+export class CustomTagsService {
+  tags: string[] = [];
+
+  addCustomTag(tag: string) {
+    this.tags.push(tag);
+  }
+}

package/projects/angular-formio/src/formio-promise.service.ts

@@ -0,0 +1,36 @@
+import { from } from 'rxjs';
+import { FormioService } from './formio.service';
+import { FormioForm } from './formio.common';
+
+export class FormioPromiseService {
+  private formioService: FormioService;
+
+  constructor(public url: string, public options?: object) {
+    this.formioService = new FormioService(url, options);
+  }
+
+  saveForm(form: FormioForm, options?: any): Promise<any> {
+    return this.formioService.saveForm(form, options).toPromise();
+  }
+  loadForm(query?: any, options?: any): Promise<any> {
+    return this.formioService.loadForm(query, options).toPromise();
+  }
+  loadSubmission(query?: any, options?: any): Promise<any> {
+    return this.formioService.loadSubmission(query, options).toPromise();
+  }
+  userPermissions(user: any, form: any, submission: any): Promise<any> {
+    return this.formioService.userPermissions(user, form, submission).toPromise();
+  }
+  deleteSubmission(data?: any, options?: any): Promise<any> {
+    return this.formioService.deleteSubmission(data, options).toPromise();
+  }
+  loadForms(query: any, options?: any): Promise<any> {
+    return this.formioService.loadForms(query, options).toPromise();
+  }
+  saveSubmission(submission: {}, options?: any): Promise<any> {
+    return this.formioService.saveSubmission(submission, options).toPromise();
+  }
+  loadSubmissions(query?: any, options?: any): Promise<any> {
+    return this.formioService.loadSubmissions(query, options).toPromise();
+  }
+}

package/projects/angular-formio/src/formio.common.ts

@@ -0,0 +1,90 @@
+import { ExtendedComponentSchema, ValidateOptions } from '@formio/deprecated-types';
+import { AlertsPosition } from './types/alerts-position';
+
+export interface ComponentOptions<T = any, V extends ValidateOptions = ValidateOptions> extends ExtendedComponentSchema<T> {
+  validate?: V;
+}
+
+export interface FormioRefreshValue {
+  property?: string;
+  value?: object;
+  form?: object;
+  submission?: object;
+}
+
+export interface AccessSetting {
+  type: string;
+  roles: string[];
+}
+
+export interface FormioReport {
+  form: string,
+  roles: object,
+  access: object,
+  metadata: object,
+  data: object,
+  project: string,
+}
+
+export interface FormioForm {
+  title?: string;
+  display?: string;
+  name?: string;
+  path?: string;
+  type?: string;
+  project?: string;
+  template?: string;
+  components?: ExtendedComponentSchema[];
+  tags?: string[];
+  access?: AccessSetting[];
+  submissionAccess?: AccessSetting[];
+  report?: FormioReport
+}
+
+export interface ComponentInstance {
+  component: ExtendedComponentSchema;
+  id: string;
+  type: string;
+  asString?(value: any): string;
+  getView(value: any): string;
+}
+
+export interface AlertsOptions {
+  submitMessage: string;
+}
+
+export interface ErrorsOptions {
+  message: string;
+}
+
+export class FormioError {
+  constructor(
+    public message: string,
+    public component: ExtendedComponentSchema,
+    public silent?: boolean,
+  ) {}
+}
+
+export type FormioSubmissionCallback = (
+  error: FormioError,
+  submission: object
+) => void;
+export type FormioBeforeSubmit = (
+  submission: object,
+  callback: FormioSubmissionCallback
+) => void;
+
+export interface FormioHookOptions {
+  beforeSubmit: FormioBeforeSubmit;
+}
+
+export interface FormioOptions {
+  errors?: ErrorsOptions;
+  alerts?: AlertsOptions;
+  alertsPosition?: AlertsPosition;
+  disableAlerts?: boolean;
+  i18n?: object;
+  fileService?: object;
+  hooks?: FormioHookOptions;
+  sanitizeConfig?: any;
+}

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

@@ -0,0 +1,27 @@
+import { Inject, Injectable, InjectionToken } from '@angular/core';
+export const FORMIO_CONFIG = new InjectionToken('formio-config');
+import { Formio } from '@formio/js';
+
+@Injectable()
+export class FormioAppConfig {
+  [x: string]: any;
+  appUrl = '';
+  apiUrl = '';
+  icons?: string;
+  formOnly?: boolean;
+  formio?: Formio;
+  constructor(@Inject(FORMIO_CONFIG) config: {
+    apiUrl?: string,
+    baseUrl?: string, 
+    appUrl?: string,
+    projectUrl?: string
+  } = {}) {
+    this.apiUrl = config.apiUrl || config.baseUrl;
+    this.appUrl = config.appUrl || config.projectUrl;
+    if (this.apiUrl) {
+      Formio.setBaseUrl(this.apiUrl);
+      Formio.setProjectUrl(this.appUrl);
+      this.formio = new Formio(this.appUrl);
+    }
+  }
+}

package/projects/angular-formio/src/formio.module.ts

@@ -0,0 +1,38 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormioComponent } from './components/formio/formio.component';
+import { FormioReportComponent } from './components/formioreport/formioreport.component';
+import { FormBuilderComponent } from './components/formbuilder/formbuilder.component';
+import { FormioAlerts } from './components/alerts/formio.alerts';
+import { ParseHtmlContentPipe } from './components/alerts/parse-html-content.pipe';
+import { FormioAlertsComponent } from './components/alerts/formio.alerts.component';
+import { FormioLoaderComponent } from './components/loader/formio.loader.component';
+import { CustomTagsService } from './custom-tags.service';
+import { FormioBaseComponent } from './FormioBaseComponent';
+
+@NgModule({
+    declarations: [
+        FormioComponent,
+        FormioReportComponent,
+        FormioBaseComponent,
+        FormBuilderComponent,
+        FormioLoaderComponent,
+        FormioAlertsComponent,
+        ParseHtmlContentPipe
+    ],
+    imports: [
+        CommonModule
+    ],
+    exports: [
+        FormioComponent,
+        FormioReportComponent,
+        FormBuilderComponent,
+        FormioLoaderComponent,
+        FormioAlertsComponent
+    ],
+    providers: [
+        FormioAlerts,
+        CustomTagsService
+    ]
+})
+export class FormioModule {}

package/projects/angular-formio/src/formio.service.ts

@@ -0,0 +1,57 @@
+import { Observable, Observer } from 'rxjs';
+import { FormioForm } from './formio.common';
+import { FormioCore as Formio } from '@formio/js';
+
+export class FormioService {
+  public formio: any;
+  constructor(public url: string, public options?: object) {
+    this.formio = new Formio(this.url, this.options);
+  }
+  requestWrapper(fn: any) {
+    let record: any;
+    let called = false;
+    return Observable.create((observer: Observer<any>) => {
+      try {
+        if (!called) {
+          called = true;
+          fn()
+            .then((_record: any) => {
+              record = _record;
+              observer.next(record);
+              observer.complete();
+            })
+            .catch((err: any) => observer.error(err));
+        } else if (record) {
+          observer.next(record);
+          observer.complete();
+        }
+      } catch (err) {
+        observer.error(err);
+      }
+    });
+  }
+  saveForm(form: FormioForm, options?: any): Observable<FormioForm> {
+    return this.requestWrapper(() => this.formio.saveForm(form, options));
+  }
+  loadForm(query?: any, options?: any): Observable<FormioForm> {
+    return this.requestWrapper(() => this.formio.loadForm(query, options));
+  }
+  loadForms(query: any, options?: any): Observable<FormioForm> {
+    return this.requestWrapper(() => this.formio.loadForms(query, options));
+  }
+  loadSubmission(query?: any, options?: any): Observable<{}> {
+    return this.requestWrapper(() => this.formio.loadSubmission(query, options));
+  }
+  userPermissions(user: any, form: any, submission: any): Observable<{}> {
+    return this.requestWrapper(() => this.formio.userPermissions(user, form, submission));
+  }
+  deleteSubmission(data?: any, options?: any): Observable<{}> {
+    return this.requestWrapper(() => this.formio.deleteSubmission(data, options));
+  }
+  saveSubmission(submission: {}, options?: any): Observable<{}> {
+    return this.requestWrapper(() => this.formio.saveSubmission(submission, options));
+  }
+  loadSubmissions(query?: any, options?: any): Observable<{}> {
+    return this.requestWrapper(() => this.formio.loadSubmissions(query, options));
+  }
+}