@formio/angular 5.2.1-rc.3 → 5.2.1

package/projects/angular-formio/manager/src/form-manager.routes.ts

@@ -0,0 +1,75 @@
+import { Routes } from '@angular/router';
+import { FormManagerIndexComponent } from './index/index.component';
+import { FormManagerCreateComponent } from './create/create.component';
+import { FormManagerFormComponent } from './form/form.component';
+import { FormManagerViewComponent } from './view/view.component';
+import { FormManagerEditComponent } from './edit/edit.component';
+import { FormManagerDeleteComponent } from './delete/delete.component';
+import { SubmissionEditComponent } from './submission/edit/edit.component';
+import { SubmissionDeleteComponent } from './submission/delete/delete.component';
+import { SubmissionViewComponent } from './submission/view/view.component';
+import { SubmissionIndexComponent } from './submission/index/index.component';
+import { SubmissionComponent } from './submission/submission/submission.component';
+import { FormManagerRouteConfig } from './form-manager.config';
+export function FormManagerRoutes(config?: FormManagerRouteConfig): Routes {
+  return [
+    {
+      path: '',
+      component: config && config.formIndex ? config.formIndex : FormManagerIndexComponent
+    },
+    {
+      path: 'create',
+      component: config && config.formCreate ? config.formCreate : FormManagerCreateComponent
+    },
+    {
+      path: ':id',
+      component: config && config.form ? config.form : FormManagerFormComponent,
+      children: [
+        {
+          path: '',
+          redirectTo: 'view',
+          pathMatch: 'full'
+        },
+        {
+          path: 'view',
+          component: config && config.formView ? config.formView : FormManagerViewComponent
+        },
+        {
+          path: 'edit',
+          component: config && config.formEdit ? config.formEdit : FormManagerEditComponent
+        },
+        {
+          path: 'delete',
+          component: config && config.formDelete ? config.formDelete : FormManagerDeleteComponent
+        },
+        {
+          path: 'submission',
+          component: config && config.submissionIndex ? config.submissionIndex : SubmissionIndexComponent
+        },
+        {
+          path: 'submission/:id',
+          component: config && config.submission ? config.submission : SubmissionComponent,
+          children: [
+            {
+              path: '',
+              redirectTo: 'view',
+              pathMatch: 'full'
+            },
+            {
+              path: 'view',
+              component: config && config.submissionView ? config.submissionView : SubmissionViewComponent
+            },
+            {
+              path: 'edit',
+              component: config && config.submissionEdit ? config.submissionEdit : SubmissionEditComponent
+            },
+            {
+              path: 'delete',
+              component: config && config.submissionDelete ? config.submissionDelete : SubmissionDeleteComponent
+            }
+          ]
+        }
+      ]
+    }
+  ];
+}

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

@@ -0,0 +1,195 @@
+import { Injectable } from '@angular/core';
+import { FormioAppConfig } from '@formio/angular';
+import { FormManagerConfig } from './form-manager.config';
+import { Formio } from 'formiojs';
+import { ActivatedRoute } from '@angular/router';
+import { FormioAuthService } from '@formio/angular/auth';
+import _each from 'lodash/each';
+import _intersection from 'lodash/intersection';
+
+@Injectable()
+export class FormManagerService {
+  public formio: Formio;
+  public access: any;
+  public allAccessMap: any;
+  public ownAccessMap: any;
+  public ready: Promise<any>;
+  public formReady: Promise<any>;
+  public actionAllowed: any;
+  public form = null;
+  public formSrc = '';
+  public perms = {delete: false, edit: false};
+
+  constructor(
+    public appConfig: FormioAppConfig,
+    public config: FormManagerConfig,
+    public auth: FormioAuthService
+  ) {
+    if (this.appConfig && this.appConfig.appUrl) {
+      Formio.setBaseUrl(this.appConfig.apiUrl);
+      Formio.setProjectUrl(this.appConfig.appUrl);
+    } else {
+      console.error('You must provide an AppConfig within your application!');
+    }
+
+    this.allAccessMap = {
+      'update_all': 'formEdit',
+      'delete_all': 'formDelete'
+    };
+    this.ownAccessMap = {
+      'update_own': 'formEdit',
+      'delete_own': 'formDelete'
+    };
+    this.actionAllowed = (action) => this.isActionAllowed(action);
+    this.reset();
+  }
+
+  isActionAllowed(action: string) {
+    return this.access[action];
+  }
+
+  setAccess() {
+    this.access = {
+      formCreate: true,
+      formView: true,
+      formSubmission: true,
+      formEdit: true,
+      formPermission: true,
+      formDelete: true,
+      projectSettings: true,
+      userManagement: true
+    };
+    if (this.auth) {
+      this.access = {
+        formCreate: false,
+        formView: false,
+        formSubmission: false,
+        formEdit: false,
+        formPermission: false,
+        formDelete: false,
+        projectSettings: false,
+        userManagement: false
+      };
+      this.ready = this.auth.ready.then(() => {
+        let administrator = this.auth.roles["administrator"];
+        let formbuilder = this.auth.roles["formbuilder"];
+        let formadmin = this.auth.roles["formadmin"];
+
+        if (this.auth.user && this.auth.user.roles) {
+          this.auth.user.roles.forEach((roleId: string) => {
+            if (administrator._id === roleId) {
+              this.access.formCreate = true;
+              this.access.formView = true;
+              this.access.formSubmission= true;
+              this.access.formEdit = true;
+              this.access.formPermission = true;
+              this.access.formDelete = true;
+              this.access.projectSettings = true;
+              this.access.userManagement = true;
+            }
+            else {
+              if (formadmin._id === roleId) {
+                this.access.formCreate = this.auth.formAccess.create_all.includes(roleId);
+                this.access.formEdit = this.auth.formAccess.update_all.includes(roleId);
+                this.access.formPermission = this.auth.formAccess.update_all.includes(roleId);
+                this.access.formDelete =  this.auth.formAccess.delete_all.includes(roleId);
+                this.access.formView = this.auth.formAccess.read_all.includes(roleId);
+                this.access.formSubmission = this.auth.formAccess.read_all.includes(roleId);
+              }
+              if (formbuilder._id === roleId) {
+                this.access.formCreate = this.auth.formAccess.create_all.includes(roleId);
+                this.access.formEdit = this.auth.formAccess.update_all.includes(roleId);
+                this.access.formPermission = this.auth.formAccess.update_all.includes(roleId);
+                this.access.formDelete =  this.auth.formAccess.delete_all.includes(roleId);
+                this.access.formView = this.auth.formAccess.read_all.includes(roleId);
+              }
+            }
+          });
+        }
+      });
+    } else {
+      this.ready = Promise.resolve(false);
+    }
+  }
+
+  reset(route?: ActivatedRoute) {
+    if (route) {
+      route.params.subscribe(params => {
+        if (params.id) {
+          this.formio = new Formio(`${this.formio.formsUrl}/${params.id}`);
+        } else {
+          this.reset();
+        }
+      });
+    } else {
+      this.formio = new Formio(this.appConfig.appUrl);
+      this.setAccess();
+    }
+  }
+
+  hasAccess(roles) {
+    if (!this.auth.user) {
+      return false;
+    }
+    return !!_intersection(roles, this.auth.user.roles).length;
+  }
+
+  setForm(form: any) {
+    this.form = form;
+    this.formSrc = this.appConfig.appUrl + '/' + form.path;
+    if (form.access) {
+      // Check if they have access here.
+      form.access.forEach(access => {
+        // Check for all access.
+        if (this.allAccessMap[access.type] && !this.access[this.allAccessMap[access.type]]) {
+          this.access[this.allAccessMap[access.type]] = this.hasAccess(access.roles);
+        }
+
+        // Check for own access.
+        if (
+          this.auth && this.auth.user &&
+          (form._id === this.auth.user._id) &&
+          this.ownAccessMap[access.type] &&
+          !this.access[this.ownAccessMap[access.type]]
+        ) {
+          this.access[this.ownAccessMap[access.type]] = this.hasAccess(access.roles);
+        }
+      });
+    }
+    return form;
+  }
+
+  loadForm() {
+    this.form = null;
+    this.formReady = this.formio.loadForm().then(form => this.setForm(form));
+    return this.formReady;
+  }
+
+  setSubmission(route: ActivatedRoute) {
+    return new Promise((resolve) => {
+      route.params.subscribe(params => {
+        this.formio = new Formio(`${this.formio.submissionsUrl}/${params.id}`);
+        resolve(this.formio);
+      });
+    });
+  }
+
+  submissionLoaded(submission: any) {
+    this.auth.ready.then(() => {
+      this.formio.userPermissions(this.auth.user, this.form, submission).then((perms) => {
+        this.perms.delete = perms.delete;
+        this.perms.edit = perms.edit;
+      });
+    });
+  }
+
+  loadForms() {
+    return this.formio.loadForms({params: {
+      tags: this.config.tag
+    }});
+  }
+
+  createForm(form: any) {
+    return this.formio.createform(form);
+  }
+}

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

@@ -0,0 +1,14 @@
+<div role="search" class="input-group mb-3" *ngIf="config.includeSearch">
+  <input type="text" (keyup)="onSearch()" class="form-control" [(ngModel)]="search" placeholder="Search Forms" aria-label="Search Forms" aria-describedby="button-search">
+  <span *ngIf="search && search !== ''" class="form-clear input-group-addon" (click)="clearSearch()"><span class="fa fa-times"></span></span>
+</div>
+<formio-grid
+  *ngIf="service.ready"
+  [formio]="service.formio"
+  [gridType]="'form'"
+  [query]="gridQuery"
+  [isActionAllowed]="service.actionAllowed"
+  (rowAction)="onAction($event)"
+  (rowSelect)="onSelect($event)"
+  (createItem)="onCreateItem()"
+></formio-grid>

package/projects/angular-formio/manager/src/index/index.component.scss

@@ -0,0 +1,22 @@
+.form-clear {
+  background: #cecece;
+  border-radius: 50%;
+  bottom: 8px;
+  color: rgba(0, 0, 0, 0.3);
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding-bottom: 2px;
+  height: 24px;
+  position: absolute;
+  right: 10px;
+  top: 6px;
+  width: 24px;
+  z-index: 10;
+}
+
+.form-clear .fa {
+  font-size: 16px;
+  font-weight: 500;
+}

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

@@ -0,0 +1,84 @@
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { Router, ActivatedRoute } from '@angular/router';
+import { FormManagerService } from '../form-manager.service';
+import { FormManagerConfig } from '../form-manager.config';
+import { FormioGridComponent } from '@formio/angular/grid';
+import { debounce } from 'lodash';
+
+@Component({
+  templateUrl: './index.component.html',
+  styleUrls: ['./index.component.scss']
+})
+export class FormManagerIndexComponent implements OnInit {
+  @ViewChild(FormioGridComponent, {static: false}) formGrid: FormioGridComponent;
+  public gridQuery: any;
+  public search = '';
+  constructor(
+    public service: FormManagerService,
+    public route: ActivatedRoute,
+    public router: Router,
+    public config: FormManagerConfig
+  ) {
+    this.gridQuery = {tags: this.config.tag, type: 'form', sort: 'title'};
+    this.onSearch = debounce(this.onSearch, 300);
+  }
+
+  loadGrid() {
+    this.search = localStorage.getItem('searchInput');
+    this.gridQuery = JSON.parse(localStorage.getItem('query')) || this.gridQuery;
+    const currentPage = +localStorage.getItem('currentPage') || 0;
+    this.formGrid
+      .refreshGrid(this.gridQuery)
+      .then(() => this.formGrid.setPage(currentPage - 1));
+  }
+
+  ngOnInit() {
+    this.gridQuery = {tags: this.config.tag, type: 'form', sort: 'title'};
+    this.service.reset();
+    this.service.ready.then(() => {
+      this.loadGrid();
+      this.formGrid.footer.pageChanged.subscribe(page => {
+        localStorage.setItem('currentPage', page.page);
+      });
+    });
+  }
+
+  onSearch(event?: KeyboardEvent) {
+    const searchInput = this.search;
+    if (searchInput.length > 0) {
+      this.gridQuery.skip = 0;
+      this.gridQuery.title__regex = '/' + searchInput + '/i';
+      this.gridQuery.title__regex = '/' + searchInput.trim() + '/i';
+    } else {
+      delete this.gridQuery.title__regex;
+    }
+    localStorage.setItem('query', JSON.stringify(this.gridQuery));
+    localStorage.setItem('searchInput', this.search);
+    this.formGrid.pageChanged({page: 1, itemPerPage: this.gridQuery.limit});
+    this.formGrid.refreshGrid(this.gridQuery);
+  }
+
+  clearSearch() {
+    this.gridQuery = {tags: this.config.tag, type: 'form', sort: 'title'};
+    localStorage.removeItem('query');
+    localStorage.removeItem('searchInput');
+    localStorage.removeItem('currentPage');
+    this.search = '';
+    this.formGrid.pageChanged({page: 1});
+    this.formGrid.query = {};
+    this.formGrid.refreshGrid({tags: this.config.tag, type: 'form', sort: 'title'});
+  }
+
+  onAction(action: any) {
+    this.service.form = null; // Reset previous form data
+    this.router.navigate([action.row._id, action.action], { relativeTo: this.route });
+  }
+
+  onSelect(row: any) {
+    this.router.navigate([row._id], { relativeTo: this.route });
+  }
+
+  onCreateItem() {
+    this.router.navigate(['create'], { relativeTo: this.route });
+  }
+}

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

@@ -0,0 +1,16 @@
+export { FormManagerConfig } from './form-manager.config';
+export { FormManagerService } from './form-manager.service';
+export { FormManagerRoutes } from './form-manager.routes';
+export { FormManagerIndexComponent } from './index/index.component';
+export { FormManagerCreateComponent } from './create/create.component';
+export { FormManagerFormComponent } from './form/form.component';
+export { FormManagerViewComponent } from './view/view.component';
+export { FormManagerEditComponent } from './edit/edit.component';
+export { FormManagerDeleteComponent } from './delete/delete.component';
+export { SubmissionEditComponent } from './submission/edit/edit.component';
+export { SubmissionDeleteComponent } from './submission/delete/delete.component';
+export { SubmissionViewComponent } from './submission/view/view.component';
+export { SubmissionIndexComponent } from './submission/index/index.component';
+export { SubmissionComponent } from './submission/submission/submission.component';
+export { FormManagerRouteConfig } from './form-manager.config';
+export { FormManagerModule } from './form-manager.module';

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

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

package/projects/angular-formio/manager/src/submission/delete/delete.component.html

@@ -0,0 +1,6 @@
+<formio-alerts [alerts]="alerts"></formio-alerts>
+<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-default">No</button>
+</div>

package/projects/angular-formio/manager/src/submission/delete/delete.component.ts

@@ -0,0 +1,26 @@
+import { Component } from '@angular/core';
+import { FormManagerService } from '../../form-manager.service';
+import { ActivatedRoute, Router } from '@angular/router';
+import { FormioAlerts } from '@formio/angular';
+
+@Component({
+  templateUrl: './delete.component.html'
+})
+export class SubmissionDeleteComponent {
+  constructor(
+    public service: FormManagerService,
+    public router: Router,
+    public route: ActivatedRoute,
+    public alerts: FormioAlerts
+  ) {}
+
+  onDelete() {
+    this.service.formio.deleteSubmission().then(() => {
+      this.router.navigate(['../../'], { relativeTo: this.route });
+    }).catch(err => this.alerts.setAlert({type: 'danger', message: (err.message || err)}));
+  }
+
+  onCancel() {
+    this.router.navigate(['../', 'view'], { relativeTo: this.route });
+  }
+}

package/projects/angular-formio/manager/src/submission/edit/edit.component.html

@@ -0,0 +1,7 @@
+<formio
+  [renderer]="service.config.renderer"
+  [src]="service.formio.submissionUrl"
+  (submit)="onSubmit($event)"
+  (formLoad)="service.setForm($event)"
+  (submissionLoad)="service.submissionLoaded($event)"
+></formio>

package/projects/angular-formio/manager/src/submission/edit/edit.component.ts

@@ -0,0 +1,18 @@
+import { Component } from '@angular/core';
+import { FormManagerService } from '../../form-manager.service';
+import { ActivatedRoute, Router } from '@angular/router';
+
+@Component({
+  templateUrl: './edit.component.html'
+})
+export class SubmissionEditComponent {
+  constructor(
+    public service: FormManagerService,
+    public router: Router,
+    public route: ActivatedRoute
+  ) { }
+
+  onSubmit(submission) {
+    this.router.navigate(['../../'], {relativeTo: this.route});
+  }
+}

package/projects/angular-formio/manager/src/submission/index/index.component.html

@@ -0,0 +1 @@
+<formio-grid [formio]="service.formio" (rowSelect)="onSelect($event)"></formio-grid>

package/projects/angular-formio/manager/src/submission/index/index.component.ts

@@ -0,0 +1,18 @@
+import { Component } from '@angular/core';
+import { Router, ActivatedRoute } from '@angular/router';
+import { FormManagerService } from '../../form-manager.service';
+
+@Component({
+  templateUrl: './index.component.html'
+})
+export class SubmissionIndexComponent {
+  constructor(
+    public service: FormManagerService,
+    public route: ActivatedRoute,
+    public router: Router
+  ) {}
+
+  onSelect(row: any) {
+    this.router.navigate([row._id, 'view'], {relativeTo: this.route});
+  }
+}

package/projects/angular-formio/manager/src/submission/submission/submission.component.html

@@ -0,0 +1,8 @@
+<a *ngIf="downloadUrl" [href]="downloadUrl" target="_blank" class="pull-right"><img src="https://pro.formview.io/assets/pdf.png" style="height: 2em;" /></a>
+<ul aria-label="Submission" role="navigation" 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"><i class="fa fa-eye glyphicon glyphicon-eye"></i> View</a></li>
+  <li class="nav-item" routerLinkActive="active" *ngIf="service.perms.edit"><a class="nav-link" routerLink="edit" routerLinkActive="active"><i class="fa fa-edit glyphicon glyphicon-edit"></i> Edit</a></li>
+  <li class="nav-item" routerLinkActive="active" *ngIf="service.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/manager/src/submission/submission/submission.component.ts

@@ -0,0 +1,24 @@
+import { Component, OnInit } from '@angular/core';
+import { FormManagerService } from '../../form-manager.service';
+import { ActivatedRoute } from '@angular/router';
+
+@Component({
+  templateUrl: './submission.component.html'
+})
+export class SubmissionComponent implements OnInit {
+  public downloadUrl: string;
+  constructor(
+    public service: FormManagerService,
+    public route: ActivatedRoute
+  ) { }
+
+  setDownloadUrl(url) {
+    this.downloadUrl = url;
+  }
+
+  ngOnInit() {
+    this.service.setSubmission(this.route).then((formio: any) => {
+      formio.getDownloadUrl().then((url) => this.setDownloadUrl(url));
+    });
+  }
+}

package/projects/angular-formio/manager/src/submission/view/view.component.html

@@ -0,0 +1,7 @@
+<formio
+  [renderer]="service.config.renderer"
+  [src]="service.formio.submissionUrl"
+  [readOnly]="true"
+  (formLoad)="service.setForm($event)"
+  (submissionLoad)="service.submissionLoaded($event)"
+></formio>

package/projects/angular-formio/manager/src/submission/view/view.component.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+import { FormManagerService } from '../../form-manager.service';
+
+@Component({
+  templateUrl: './view.component.html'
+})
+export class SubmissionViewComponent {
+  constructor(public service: FormManagerService) { }
+}

package/projects/angular-formio/manager/src/view/view.component.html

@@ -0,0 +1,10 @@
+<formio *ngIf="service.form"
+  [renderer]="config.renderer"
+  [renderOptions]="renderOptions"
+  [url]="service.formio.formUrl"
+  [form]="service.form"
+  [submission]="submission"
+  [success]="onSuccess"
+  [error]="onError"
+  (submit)="onSubmit($event)"
+></formio>

package/projects/angular-formio/manager/src/view/view.component.ts

@@ -0,0 +1,41 @@
+import { Component, OnInit, EventEmitter } from '@angular/core';
+import { FormManagerConfig } from '../form-manager.config';
+import { FormManagerService } from '../form-manager.service';
+import { ActivatedRoute, Router } from '@angular/router';
+import { FormioAuthService } from '@formio/angular/auth';
+import { Formio } from 'formiojs';
+
+@Component({
+  templateUrl: './view.component.html'
+})
+export class FormManagerViewComponent implements OnInit {
+  public submission: any;
+  public renderOptions: any;
+  public onSuccess: EventEmitter<object> = new EventEmitter();
+  public onError: EventEmitter<object> = new EventEmitter();
+  constructor(
+    public service: FormManagerService,
+    public router: Router,
+    public route: ActivatedRoute,
+    public config: FormManagerConfig,
+    public auth: FormioAuthService
+  ) {
+    this.renderOptions = {
+      saveDraft: this.config.saveDraft
+    };
+    this.submission = {data: {}};
+  }
+
+  ngOnInit() {
+    this.service.formio = new Formio(this.service.formio.formUrl);
+  }
+
+  onSubmit(submission: any) {
+    this.submission.data = submission.data;
+    this.submission.state = 'complete';
+    this.service.formio.saveSubmission(this.submission).then(saved => {
+      this.onSuccess.emit();
+      this.router.navigate(['../', 'submission', saved._id], {relativeTo: this.route});
+    }).catch((err) => this.onError.emit(err));
+  }
+}

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

@@ -0,0 +1,14 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/angular-formio",
+  "lib": {
+    "entryFile": "src/public-api.ts",
+    "umdModuleIds": {
+      "lodash": "_",
+      "formiojs": "formiojs",
+      "ngx-bootstrap": "ngx-bootstrap",
+      "native-promise-only": "Promise",
+      "formiojs/utils/Evaluator": "Evaluator"
+    }
+  }
+}

package/projects/angular-formio/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "@formio/angular",
+  "version": "5.2.1",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/formio/angular-formio"
+  },
+  "author": {
+    "name": "Travis Tidwell",
+    "email": "travis@form.io"
+  },
+  "keywords": [
+    "angular",
+    "forms",
+    "json forms",
+    "javascript forms",
+    "model driven forms",
+    "form.io"
+  ],
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/formio/angular-formio/issues"
+  },
+  "engines": {
+    "node": ">=6.0.0"
+  },
+  "peerDependencies": {
+    "@angular/core": "^9.0.0 || ^10.0.0 || ^11.0.0 || ^12.0.0",
+    "@angular/common": "^9.0.0 || ^10.0.0 || ^11.0.0 || ^12.0.0",
+    "@angular/elements": "^9.0.0 || ^10.0.0 || ^11.0.0|| ^12.0.0",
+    "zone.js": "~0.11.4",
+    "formiojs": "^4.13.8",
+    "lodash": "^4.17.20",
+    "ngx-bootstrap": "^5.6.1"
+  },
+  "dependencies": {
+    "tslib": "^2.0.0"
+  }
+}