@formio/angular 5.2.1-rc.3 → 5.2.1

package/projects/angular-formio/resource/package.json

@@ -0,0 +1,11 @@
+{
+  "ngPackage": {
+    "lib": {
+      "umdModuleIds": {
+        "lodash": "_",
+        "formiojs": "formiojs",
+        "native-promise-only": "Promise"
+      }
+    }
+  }
+}

package/projects/angular-formio/resource/src/create/create.component.html

@@ -0,0 +1,13 @@
+<h3 *ngIf="service.form" style="margin-top:0;">
+  <a routerLink="../" class="back-button">
+    <i class="fa fa-chevron-left glyphicon glyphicon-chevron-left"></i>
+  </a> | New {{ service.form.title }}
+</h3>
+<formio
+  [form]="service.form"
+  [submission]="service.resource"
+  [refresh]="service.refresh"
+  [error]="onError"
+  [success]="onSuccess"
+  (submit)="onSubmit($event)"
+></formio>

package/projects/angular-formio/resource/src/create/create.component.scss

@@ -0,0 +1,3 @@
+.back-button {
+  font-size: 0.8em;
+}

package/projects/angular-formio/resource/src/create/create.component.ts

@@ -0,0 +1,37 @@
+import { Component, EventEmitter, OnInit } from '@angular/core';
+import { Router, ActivatedRoute } from '@angular/router';
+import { FormioResourceService } from '../resource.service';
+import { FormioResourceConfig } from '../resource.config';
+
+@Component({
+  styleUrls: ['./create.component.scss'],
+  templateUrl: './create.component.html'
+})
+export class FormioResourceCreateComponent implements OnInit {
+  public onError: EventEmitter<any>;
+  public onSuccess: EventEmitter<any>;
+  constructor(
+    public service: FormioResourceService,
+    public route: ActivatedRoute,
+    public router: Router,
+    public config: FormioResourceConfig
+  ) {
+    this.onError = new EventEmitter();
+    this.onSuccess = new EventEmitter();
+  }
+
+  ngOnInit() {
+    this.service.setContext(this.route);
+  }
+
+  onSubmit(submission: any) {
+    this.service
+      .save(submission)
+      .then(() => {
+        this.router.navigate(['../', this.service.resource._id, 'view'], {
+          relativeTo: this.route
+        });
+      })
+      .catch((err: any) => this.onError.emit(err));
+  }
+}

package/projects/angular-formio/resource/src/delete/delete.component.html

@@ -0,0 +1,5 @@
+<h3>Are you sure you wish to delete this record?</h3>
+<div class="btn-toolbar">
+  <button type="button" (click)="onDelete()" class="btn btn-danger" style="margin-right: 10px;">Yes</button>
+  <button type="button" (click)="onCancel()" class="btn btn-danger">No</button>
+</div>

package/projects/angular-formio/resource/src/delete/delete.component.ts

@@ -0,0 +1,24 @@
+import { Component } from '@angular/core';
+import { Router, ActivatedRoute } from '@angular/router';
+import { FormioResourceService } from '../resource.service';
+
+@Component({
+  templateUrl: './delete.component.html'
+})
+export class FormioResourceDeleteComponent {
+  constructor(
+    public service: FormioResourceService,
+    public route: ActivatedRoute,
+    public router: Router
+  ) {}
+
+  onDelete() {
+    this.service.remove().then(() => {
+      this.router.navigate(['../../'], { relativeTo: this.route });
+    });
+  }
+
+  onCancel() {
+    this.router.navigate(['../', 'view'], { relativeTo: this.route });
+  }
+}

package/projects/angular-formio/resource/src/edit/edit.component.html

@@ -0,0 +1,6 @@
+<formio
+  [form]="service.form"
+  [submission]="service.resource"
+  [error]="triggerError"
+  (submit)="onSubmit($event)"
+></formio>

package/projects/angular-formio/resource/src/edit/edit.component.ts

@@ -0,0 +1,33 @@
+import {Component, EventEmitter, OnDestroy} from '@angular/core';
+import { Router, ActivatedRoute } from '@angular/router';
+import { FormioResourceService } from '../resource.service';
+import { FormioResourceConfig } from '../resource.config';
+import { Formio } from 'formiojs';
+
+@Component({
+  templateUrl: './edit.component.html'
+})
+export class FormioResourceEditComponent implements OnDestroy {
+  public triggerError: EventEmitter<any> = new EventEmitter();
+  public submission = {data: {}};
+  constructor(
+    public service: FormioResourceService,
+    public route: ActivatedRoute,
+    public router: Router,
+    public config: FormioResourceConfig
+  ) {}
+
+  onSubmit(submission: any) {
+    const edit = this.service.resource;
+    edit.data = submission.data;
+    this.service.save(edit)
+      .then(() => {
+        this.router.navigate(['../', 'view'], { relativeTo: this.route });
+      })
+      .catch((err) => this.triggerError.emit(err));
+  }
+
+  ngOnDestroy() {
+    Formio.clearCache();
+  }
+}

package/projects/angular-formio/resource/src/index/index.component.html

@@ -0,0 +1,10 @@
+<formio-alerts [alerts]="service.alerts"></formio-alerts>
+<formio-grid
+  [src]="gridSrc"
+  [query]="gridQuery"
+  [onForm]="service.formLoaded"
+  (rowSelect)="onSelect($event)"
+  (error)="service.onError($event)"
+  (createItem)="onCreateItem()"
+  [createText]="createText"
+></formio-grid>

package/projects/angular-formio/resource/src/index/index.component.ts

@@ -0,0 +1,66 @@
+import { Component, OnInit, ChangeDetectorRef, NgZone } from '@angular/core';
+import { Router, ActivatedRoute } from '@angular/router';
+import { FormioResourceService } from '../resource.service';
+import { FormioResourceConfig } from '../resource.config';
+import { each } from 'lodash';
+
+@Component({
+  templateUrl: './index.component.html'
+})
+export class FormioResourceIndexComponent implements OnInit {
+  public gridSrc?: string;
+  public gridQuery: any;
+  public createText: String;
+
+  constructor(
+    public service: FormioResourceService,
+    public route: ActivatedRoute,
+    public router: Router,
+    public config: FormioResourceConfig,
+    public cdr: ChangeDetectorRef,
+    public ngZone: NgZone,
+  ) {
+  }
+
+  ngOnInit() {
+    this.gridQuery = {};
+    this.service.setContext(this.route);
+    this.service.formLoaded.then(() => {
+      if (
+        this.service &&
+        this.config.parents &&
+        this.config.parents.length
+      ) {
+        this.service.loadParents().then((parents: any) => {
+          each(parents, (parent: any) => {
+            if (parent && parent.filter) {
+              this.gridQuery['data.' + parent.name + '._id'] =
+                parent.resource._id;
+            }
+          });
+
+          // Set the source to load the grid.
+          this.gridSrc = this.service.formUrl;
+          this.createText = `New ${this.service.form.title}`;
+        });
+      } else if (this.service.formUrl) {
+        this.gridSrc = this.service.formUrl;
+        this.createText = `New ${this.service.form.title}`;
+      }
+
+      this.cdr.detectChanges();
+    });
+  }
+
+  onSelect(row: any) {
+    this.ngZone.run(() => {
+      this.router.navigate([row._id, 'view'], { relativeTo: this.route });
+    });
+  }
+
+  onCreateItem() {
+    this.ngZone.run(() => {
+      this.router.navigate(['new'], { relativeTo: this.route });
+    });
+  }
+}

package/projects/angular-formio/resource/src/index.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var resource_config_1 = require("./resource.config");
+exports.FormioResourceConfig = resource_config_1.FormioResourceConfig;
+var resources_service_1 = require("./resources.service");
+exports.FormioResources = resources_service_1.FormioResources;
+var resource_service_1 = require("./resource.service");
+exports.FormioResourceService = resource_service_1.FormioResourceService;
+var resource_component_1 = require("./resource.component");
+exports.FormioResourceComponent = resource_component_1.FormioResourceComponent;
+var view_component_1 = require("./view/view.component");
+exports.FormioResourceViewComponent = view_component_1.FormioResourceViewComponent;
+var edit_component_1 = require("./edit/edit.component");
+exports.FormioResourceEditComponent = edit_component_1.FormioResourceEditComponent;
+var delete_component_1 = require("./delete/delete.component");
+exports.FormioResourceDeleteComponent = delete_component_1.FormioResourceDeleteComponent;
+var create_component_1 = require("./create/create.component");
+exports.FormioResourceCreateComponent = create_component_1.FormioResourceCreateComponent;
+var index_component_1 = require("./index/index.component");
+exports.FormioResourceIndexComponent = index_component_1.FormioResourceIndexComponent;
+var resource_routes_1 = require("./resource.routes");
+exports.FormioResourceRoutes = resource_routes_1.FormioResourceRoutes;
+var resource_module_1 = require("./resource.module");
+exports.FormioResource = resource_module_1.FormioResource;

package/projects/angular-formio/resource/src/index.ts

@@ -0,0 +1,11 @@
+export { FormioResourceConfig } from './resource.config';
+export { FormioResources } from './resources.service';
+export { FormioResourceService } from './resource.service';
+export { FormioResourceComponent } from './resource.component';
+export { FormioResourceViewComponent } from './view/view.component';
+export { FormioResourceEditComponent } from './edit/edit.component';
+export { FormioResourceDeleteComponent } from './delete/delete.component';
+export { FormioResourceCreateComponent } from './create/create.component';
+export { FormioResourceIndexComponent } from './index/index.component';
+export { FormioResourceRoutes } from './resource.routes';
+export { FormioResource } from './resource.module';

package/projects/angular-formio/resource/src/public_api.ts

@@ -0,0 +1,5 @@
+/*
+ * Public API Surface of angular-formio
+ */
+
+export * from './index';

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

@@ -0,0 +1,7 @@
+<ul class="nav nav-tabs" style="margin-bottom: 10px">
+  <li class="nav-item"><a class="nav-link" routerLink="../"><i class="fa fa-chevron-left glyphicon glyphicon-chevron-left"></i></a></li>
+  <li class="nav-item" routerLinkActive="active"><a class="nav-link" routerLink="view" routerLinkActive="active">View</a></li>
+  <li class="nav-item" routerLinkActive="active" *ngIf="perms.edit"><a class="nav-link" routerLink="edit" routerLinkActive="active">Edit</a></li>
+  <li class="nav-item" routerLinkActive="active" *ngIf="perms.delete"><a class="nav-link" routerLink="delete" routerLinkActive="active"><span class="fa fa-trash glyphicon glyphicon-trash"></span></a></li>
+</ul>
+<router-outlet></router-outlet>

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

@@ -0,0 +1,48 @@
+import { Component, OnDestroy, OnInit } from '@angular/core';
+import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
+import { FormioAuthService } from '@formio/angular/auth';
+import { FormioResourceService } from './resource.service';
+import { Subscription } from 'rxjs';
+
+@Component({
+  templateUrl: './resource.component.html'
+})
+export class FormioResourceComponent implements OnInit, OnDestroy {
+  private paramsSubscription: Subscription;
+  public perms = {delete: false, edit: false};
+
+  constructor(
+    public service: FormioResourceService,
+    public route: ActivatedRoute,
+    public auth: FormioAuthService,
+  ) {
+    // subscribe to the route param changes, so that we could re-load the submission if navigation happens from one submission to another
+    this.paramsSubscription = this.route.params.subscribe((params) => {
+      this.init();
+    });
+  }
+
+  ngOnInit() {
+    this.init();
+  }
+
+  init() {
+    this.service.loadResource(this.route);
+    this.service.formLoaded.then((form) => {
+      this.auth.ready.then(() => {
+        this.service.resourceLoaded.then((resource) => {
+          this.service.formFormio.userPermissions(this.auth.user, form, resource).then((perms) => {
+            this.perms.delete = perms.delete;
+            this.perms.edit = perms.edit;
+          });
+        });
+      });
+    });
+  }
+
+  ngOnDestroy() {
+    if (this.paramsSubscription) {
+      this.paramsSubscription.unsubscribe();
+    }
+  }
+}

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

@@ -0,0 +1,17 @@
+import { Injectable } from '@angular/core';
+
+export interface FormioResourceRouteConfig {
+  index?: any;
+  create?: any;
+  resource?: any;
+  view?: any;
+  edit?: any;
+  delete?: any;
+}
+
+@Injectable()
+export class FormioResourceConfig {
+  name = '';
+  form = '';
+  parents: any[] = [];
+}

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

@@ -0,0 +1,43 @@
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { CommonModule } from '@angular/common';
+import { FormioModule } from '@formio/angular';
+import { FormioAlerts } from '@formio/angular';
+import { FormioGrid } from '@formio/angular/grid';
+import { FormioResourceComponent } from './resource.component';
+import { FormioResourceViewComponent } from './view/view.component';
+import { FormioResourceEditComponent } from './edit/edit.component';
+import { FormioResourceDeleteComponent } from './delete/delete.component';
+import { FormioResourceCreateComponent } from './create/create.component';
+import { FormioResourceIndexComponent } from './index/index.component';
+import { FormioResourceRouteConfig } from './resource.config';
+import { FormioResourceRoutes } from './resource.routes';
+import { extendRouter } from '@formio/angular';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormioModule,
+    FormioGrid,
+    RouterModule
+  ],
+  declarations: [
+    FormioResourceComponent,
+    FormioResourceCreateComponent,
+    FormioResourceIndexComponent,
+    FormioResourceViewComponent,
+    FormioResourceEditComponent,
+    FormioResourceDeleteComponent
+  ],
+  providers: [
+    FormioAlerts
+  ]
+})
+export class FormioResource {
+  static forChild(config?: FormioResourceRouteConfig): any {
+    return extendRouter(FormioResource, config, FormioResourceRoutes);
+  }
+  static forRoot(config?: FormioResourceRouteConfig): any {
+    return extendRouter(FormioResource, config, FormioResourceRoutes);
+  }
+}

package/projects/angular-formio/resource/src/resource.routes.ts

@@ -0,0 +1,43 @@
+import { Routes } from '@angular/router';
+import { FormioResourceComponent } from './resource.component';
+import { FormioResourceViewComponent } from './view/view.component';
+import { FormioResourceEditComponent } from './edit/edit.component';
+import { FormioResourceDeleteComponent } from './delete/delete.component';
+import { FormioResourceCreateComponent } from './create/create.component';
+import { FormioResourceIndexComponent } from './index/index.component';
+import { FormioResourceRouteConfig } from './resource.config';
+export function FormioResourceRoutes(config?: FormioResourceRouteConfig): Routes {
+  return [
+    {
+      path: '',
+      component: config && config.index ? config.index : FormioResourceIndexComponent
+    },
+    {
+      path: 'new',
+      component: config && config.create ? config.create : FormioResourceCreateComponent
+    },
+    {
+      path: ':id',
+      component: config && config.resource ? config.resource : FormioResourceComponent,
+      children: [
+        {
+          path: '',
+          redirectTo: 'view',
+          pathMatch: 'full'
+        },
+        {
+          path: 'view',
+          component: config && config.view ? config.view : FormioResourceViewComponent
+        },
+        {
+          path: 'edit',
+          component: config && config.edit ? config.edit : FormioResourceEditComponent
+        },
+        {
+          path: 'delete',
+          component: config && config.delete ? config.delete : FormioResourceDeleteComponent
+        }
+      ]
+    }
+  ];
+}

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

@@ -0,0 +1,232 @@
+import { ApplicationRef, EventEmitter, Injectable, Optional } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { FormioResourceConfig } from './resource.config';
+import { FormioResources } from './resources.service';
+import { FormioPromiseService } from '@formio/angular';
+import { FormioAlerts } from '@formio/angular';
+import { FormioAppConfig } from '@formio/angular';
+import { FormioRefreshValue } from '@formio/angular';
+import Promise from 'native-promise-only';
+import { Formio, Utils } from 'formiojs';
+import _ from 'lodash';
+
+@Injectable()
+export class FormioResourceService {
+  public initialized = false;
+  public form: any;
+  public alerts: FormioAlerts;
+  public resource: any;
+  public resourceUrl?: string;
+  public formUrl: string;
+  public formFormio: FormioPromiseService;
+  public formio: FormioPromiseService;
+  public refresh: EventEmitter<FormioRefreshValue>;
+
+  public resourceLoading?: Promise<any>;
+  public resourceLoaded?: Promise<any>;
+  public resourceId?: string;
+  public resources: any;
+
+  public formLoading?: Promise<any>;
+  public formLoaded: Promise<any>;
+  public formResolve: any;
+  public formReject: any;
+  public isLoading: boolean;
+
+  constructor(
+    public appConfig: FormioAppConfig,
+    public config: FormioResourceConfig,
+    @Optional() public resourcesService: FormioResources,
+    public appRef: ApplicationRef,
+  ) {
+    this.isLoading = true;
+    this.alerts = new FormioAlerts();
+    this.refresh = new EventEmitter();
+    this.formLoaded = new Promise((resolve: any, reject: any) => {
+      this.formResolve = resolve;
+      this.formReject = reject;
+    });
+    this.init();
+  }
+
+  initialize() {
+    console.warn('FormioResourceService.initialize() has been deprecated.');
+  }
+
+  init() {
+    if (this.initialized) {
+      return;
+    }
+    this.initialized = true;
+    if (this.appConfig && this.appConfig.appUrl) {
+      Formio.setBaseUrl(this.appConfig.apiUrl);
+      Formio.setProjectUrl(this.appConfig.appUrl);
+      Formio.formOnly = this.appConfig.formOnly;
+    } else {
+      console.error('You must provide an AppConfig within your application!');
+    }
+
+    // Create the form url and load the resources.
+    this.formUrl = this.appConfig.appUrl + '/' + this.config.form;
+    this.resource = { data: {} };
+
+    // Add this resource service to the list of all resources in context.
+    if (this.resourcesService) {
+      this.resources = this.resourcesService.resources;
+      this.resources[this.config.name] = this;
+    }
+
+    return this.loadForm();
+  }
+
+  onError(error: any) {
+    this.alerts.setAlert({
+      type: 'danger',
+      message: error.message || error
+    });
+    if (this.resourcesService) {
+      this.resourcesService.error.emit(error);
+    }
+    throw error;
+  }
+
+  onFormError(err: any) {
+    this.formReject(err);
+    this.onError(err);
+  }
+
+  setContext(route: ActivatedRoute) {
+    this.resourceId = route.snapshot.params['id'];
+    this.resource = { data: {} };
+    this.resourceUrl = this.appConfig.appUrl + '/' + this.config.form;
+    if (this.resourceId) {
+      this.resourceUrl += '/submission/' + this.resourceId;
+    }
+    this.formio = new FormioPromiseService(this.resourceUrl);
+    if (this.resourcesService) {
+      this.resources[this.config.name] = this;
+    }
+    this.loadParents();
+  }
+
+  loadForm() {
+    this.formFormio = new FormioPromiseService(this.formUrl);
+    this.isLoading = true;
+    this.formLoading = this.formFormio
+      .loadForm()
+      .then(
+        (form: any) => {
+          this.form = form;
+          this.formResolve(form);
+          this.isLoading = false;
+          this.loadParents();
+          return form;
+        },
+        (err: any) => this.onFormError(err)
+      )
+      .catch((err: any) => this.onFormError(err));
+    return this.formLoading;
+  }
+
+  loadParents() {
+    if (!this.config.parents || !this.config.parents.length) {
+      return Promise.resolve([]);
+    }
+    if (!this.resourcesService) {
+      console.warn(
+        'You must provide the FormioResources within your application to use nested resources.'
+      );
+      return Promise.resolve([]);
+    }
+    return this.formLoading.then((form) => {
+      // Iterate through the list of parents.
+      const _parentsLoaded: Array<Promise<any>> = [];
+      this.config.parents.forEach((parent: any) => {
+        const resourceName = parent.resource || parent;
+        const resourceField = parent.field || parent;
+        const filterResource = parent.hasOwnProperty('filter') ? parent.filter : true;
+        if (this.resources.hasOwnProperty(resourceName) && this.resources[resourceName].resourceLoaded) {
+          _parentsLoaded.push(
+            this.resources[resourceName].resourceLoaded.then((resource: any) => {
+              let parentPath = '';
+              Utils.eachComponent(form.components, (component, path) => {
+                if (component.key === resourceField) {
+                  component.hidden = true;
+                  component.clearOnHide = false;
+                  _.set(this.resource.data, path, resource);
+                  parentPath = path;
+                  return true;
+                }
+              });
+              return {
+                name: parentPath,
+                filter: filterResource,
+                resource
+              };
+            })
+          );
+        }
+      });
+
+      // When all the parents have loaded, emit that to the onParents emitter.
+      return Promise.all(_parentsLoaded).then((parents: any) => {
+        this.refresh.emit({
+          form: form,
+          submission: this.resource
+        });
+        return parents;
+      });
+    });
+  }
+
+  onSubmissionError(err: any) {
+    this.onError(err);
+  }
+
+  loadResource(route: ActivatedRoute) {
+    this.setContext(route);
+    this.isLoading = true;
+    this.resourceLoading = this.resourceLoaded = this.formio
+      .loadSubmission(null, {ignoreCache: true})
+      .then(
+        (resource: any) => {
+          this.resource = resource;
+          this.isLoading = false;
+          this.refresh.emit({
+            property: 'submission',
+            value: this.resource
+          });
+          return resource;
+        },
+        (err: any) => this.onSubmissionError(err)
+      )
+      .catch((err: any) => this.onSubmissionError(err));
+    return this.resourceLoading;
+  }
+
+  save(resource: any) {
+    const formio = resource._id ? this.formio : this.formFormio;
+    return formio
+      .saveSubmission(resource)
+      .then(
+        (saved: any) => {
+          this.resource = saved;
+          return saved;
+        },
+        (err: any) => this.onError(err)
+      )
+      .catch((err: any) => this.onError(err));
+  }
+
+  remove() {
+    return this.formio
+      .deleteSubmission()
+      .then(
+        () => {
+          this.resource = null;
+        },
+        (err: any) => this.onError(err)
+      )
+      .catch((err: any) => this.onError(err));
+  }
+}