@formio/angular 5.2.1-rc.2 → 5.3.0-rc.1

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

@@ -1,19 +0,0 @@
-<div class="loader" *ngIf="loading"></div>
-<div class="form-group row">
-  <div class="col-sm-8">
-    <input type="text" class="form-control" id="formTitle" placeholder="Enter a Title" #title>
-  </div>
-  <div class="col-sm-2">
-    <select class="form-control" id="formSelect" (change)="onDisplaySelect($event)" #type>
-      <option value="form">Form</option>
-      <option value="wizard">Wizard</option>
-      <option value="pdf">PDF</option>
-    </select>
-  </div>
-  <div class="col-sm-2">
-    <button class="btn btn-primary btn-block" (click)="onSave()">Save Form</button>
-  </div>
-</div>
-<formio-alerts [alerts]="alerts"></formio-alerts>
-<form-builder *ngIf="formReady" [formbuilder]="config.builder" [form]="form" #builder></form-builder>
-<button class="btn btn-primary" style="margin-top: 10px;" (click)="onSave()">Save Form</button>

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

@@ -1,107 +0,0 @@
-import { Component, ViewChild, ElementRef, AfterViewInit, ChangeDetectorRef } from '@angular/core';
-import { FormManagerService } from '../form-manager.service';
-import { ActivatedRoute, Router } from '@angular/router';
-import { FormManagerConfig } from '../form-manager.config';
-import { FormioAlerts } from '@formio/angular';
-import { FormBuilderComponent } from '@formio/angular';
-import _ from 'lodash';
-
-@Component({
-  templateUrl: './edit.component.html'
-})
-export class FormManagerEditComponent implements AfterViewInit {
-  @ViewChild(FormBuilderComponent, {static: false}) builder: FormBuilderComponent;
-  @ViewChild('title', {static: false}) formTitle: ElementRef;
-  @ViewChild('type', {static: false}) formType: ElementRef;
-  public form: any;
-  public loading: Boolean;
-  public formReady: Boolean;
-  public editMode: Boolean;
-
-  constructor(
-    public service: FormManagerService,
-    public router: Router,
-    public route: ActivatedRoute,
-    public config: FormManagerConfig,
-    public ref: ChangeDetectorRef,
-    public alerts: FormioAlerts
-  ) {
-    this.form = {components: []};
-    this.formReady = false;
-    this.loading = false;
-    this.editMode = false;
-  }
-
-  initBuilder(editing) {
-    if (editing) {
-      this.loading = true;
-      this.editMode = true;
-      return this.service.formReady.then(() => {
-        this.form = this.service.form;
-        this.formTitle.nativeElement.value = this.service.form.title;
-        this.formType.nativeElement.value = this.service.form.display || 'form';
-        this.formReady = true;
-        this.loading = false;
-        this.ref.detectChanges();
-        return true;
-      }).catch(err => {
-        this.alerts.setAlert({type: 'danger', message: (err.message || err)});
-        this.loading = false;
-        this.ref.detectChanges();
-        this.formReady = true;
-      });
-    } else {
-      this.formReady = true;
-      return Promise.resolve(true);
-    }
-  }
-
-  ngAfterViewInit() {
-    this.route.url.subscribe( url => {
-      setTimeout(() => this.initBuilder((url[0].path === 'edit')), 0);
-    });
-  }
-
-  onDisplaySelect(event) {
-    this.builder.setDisplay(event.target.value);
-  }
-
-  saveForm() {
-    this.loading = true;
-    this.form = _.cloneDeep(this.builder.formio.schema);
-    this.form.title = this.formTitle.nativeElement.value.trim();
-    this.form.display = this.formType.nativeElement.value;
-
-    if (this.config.tag) {
-      this.form.tags = this.form.tags || [];
-      this.form.tags.push(this.config.tag);
-      this.form.tags = _.uniq(this.form.tags);
-    }
-    if (!this.form._id) {
-      this.form.name = _.camelCase(this.form.title).toLowerCase();
-      this.form.path = this.form.name;
-    }
-    return this.service.formio.saveForm(this.form).then(form => {
-      this.form = this.service.setForm(form);
-      this.loading = false;
-      return this.form;
-    }).catch(err => {
-      this.loading = false;
-      // Catch if a form is returned as an error. This is a conflict.
-      if (err._id && err.type) {
-        throw err;
-      }
-      this.alerts.setAlert({type: 'danger', message: (err.message || err)});
-    });
-  }
-
-  onSave() {
-    return this.saveForm().then((form) => {
-      if (this.editMode) {
-        this.router.navigate(['../', 'view'], {relativeTo: this.route});
-      } else {
-        this.router.navigate(['../', form._id, 'view'], {relativeTo: this.route});
-      }
-    });
-  }
-}

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

@@ -1,32 +0,0 @@
-<button *ngIf="options.viewer" class="pull-right btn btn-outline-primary" (click)="openEmbed(content)"><i class="fa fa-share-alt glyphicon glyphicon-share"></i> Share</button>
-<ul class="nav nav-tabs mb-2">
-  <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-pencil glyphicon glyphicon-pencil"></i> Enter Data</a></li>
-  <li class="nav-item" routerLinkActive="active"><a class="nav-link" routerLink="submission" routerLinkActive="active"><i class="fa fa-list-alt glyphicon glyphicon-list-alt"></i> View Data</a></li>
-  <li *ngIf="service.actionAllowed('formEdit')" class="nav-item" routerLinkActive="active"><a class="nav-link" routerLink="edit" routerLinkActive="active"><i class="fa fa-edit glyphicon glyphicon-edit"></i> Edit Form</a></li>
-  <li *ngIf="service.actionAllowed('formDelete')" class="nav-item" routerLinkActive="active"><a class="nav-link" routerLink="delete" routerLinkActive="active"><span class="fa fa-trash glyphicon glyphicon-trash"></span></a></li>
-</ul>
-<router-outlet></router-outlet>
-<ng-template #content>
-  <div class="modal-header">
-    <h4 class="modal-title">Share or Embed this form</h4>
-    <button type="button" class="close" aria-label="Close" (click)="modalRef.hide()">
-      <span aria-hidden="true">&times;</span>
-    </button>
-  </div>
-  <div class="modal-body">
-    <ul class="nav nav-tabs mr-auto mb-2">
-      <li class="nav-item">
-        <a class="nav-link" [ngClass]="{'active': choice === 'isUrl'}" (click)="choices('isUrl')"><i class="fa fa-link"></i> URL</a>
-      </li>
-      <li class="nav-item">
-        <a class="nav-link" [ngClass]="{'active': choice === 'isEmbed'}" (click)="choices('isEmbed')"><i class="fa fa-code"></i> Embed</a>
-      </li>
-    </ul>
-    <pre  *ngIf="choice === 'isEmbed'"><textarea onclick="this.focus();this.select()" readonly="readonly" style="width:100%;" rows="8" [ngModel]="embedCode"></textarea></pre>
-    <input *ngIf="choice === 'isUrl'" type="text" onclick="this.focus();this.select()" readonly="readonly" class="form-control" [ngModel]="shareUrl" placeholder="https://examples.form.io/example">
-  </div>
-  <div class="modal-footer">
-    <button type="button" class="btn btn-light" (click)="modalRef.hide()">Close</button>
-  </div>
-</ng-template>

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

@@ -1,73 +0,0 @@
-import { Component, OnInit, TemplateRef } from '@angular/core';
-import { FormManagerService } from '../form-manager.service';
-import { FormManagerConfig } from '../form-manager.config';
-import { ActivatedRoute } from '@angular/router';
-import { FormioAppConfig } from '@formio/angular';
-import { BsModalService, BsModalRef } from 'ngx-bootstrap/modal';
-
-@Component({
-  templateUrl: './form.component.html'
-})
-export class FormManagerFormComponent implements OnInit {
-  choice: any = 'isUrl';
-  embedCode: any;
-  shareUrl: any;
-  projectId: any;
-  pathName: any;
-  goTo: any = '';
-  modalRef: BsModalRef;
-  constructor(
-    public service: FormManagerService,
-    public route: ActivatedRoute,
-    public appConfig: FormioAppConfig,
-    public options: FormManagerConfig,
-    private modalService: BsModalService
-  ) { }
-
-  ngOnInit() {
-    this.service.reset(this.route);
-    this.service.loadForm().then(form => {
-      this.service.formSrc = this.appConfig.appUrl + '/' + form.path;
-      this.projectId = form.project;
-      this.pathName = form.path;
-      this.getShareUrl();
-    });
-  }
-
-  public getShareUrl() {
-    const src = this.appConfig.appUrl + '/' + this.pathName;
-    this.shareUrl = `${this.options.viewer}/#/?src=${encodeURIComponent(src)}`;
-    return this.shareUrl;
-  }
-
-  openEmbed(content: TemplateRef<any>) {
-    let goto = '';
-    if (this.goTo) {
-      goto += `if (d && d.formSubmission && d.formSubmission._id) { window.location.href = "${this.goTo}";}`;
-    }
-    let embedCode = '<script type="text/javascript">';
-    embedCode += '(function a(d, w, u) {';
-    embedCode +=    'var h = d.getElementsByTagName("head")[0];';
-    embedCode +=    'var s = d.createElement("script");';
-    embedCode +=    's.type = "text/javascript";';
-    embedCode +=    's.src = "' + this.options.viewer + '/assets/lib/seamless/seamless.parent.min.js";';
-    embedCode +=    's.onload = function b() {';
-    embedCode +=       'var f = d.getElementById("formio-form-' + this.service.formio.formId + '");';
-    embedCode +=       'if (!f || (typeof w.seamless === u)) {';
-    embedCode +=          'return setTimeout(b, 100);';
-    embedCode +=       '}';
-    embedCode +=       'w.seamless(f, {fallback:false}).receive(function(d, e) {' + goto + '});';
-    embedCode +=    '};';
-    embedCode +=    'h.appendChild(s);';
-    embedCode += '})(document, window);';
-    embedCode += '</script>';
-    embedCode += '<iframe id="formio-form-' + this.service.formio.formId + '" ';
-    embedCode +=     'style="width:100%;border:none;" height="800px" src="' + this.shareUrl + '&iframe=1"></iframe>';
-    this.embedCode = embedCode;
-    this.modalRef = this.modalService.show(content, { class: 'modal-lg' });
-  }
-
-  choices(string) {
-    this.choice = string;
-  }
-}

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

@@ -1,26 +0,0 @@
-import { Injectable } from '@angular/core';
-
-export interface FormManagerRouteConfig {
-  formIndex?: any;
-  formCreate?: any;
-  form?: any;
-  formView?: any;
-  formEdit?: any;
-  formEmbed?: any;
-  formDelete?: any;
-  submissionIndex?: any;
-  submission?: any;
-  submissionView?: any;
-  submissionEdit?: any;
-  submissionDelete?: any;
-}
-
-@Injectable()
-export class FormManagerConfig {
-  public tag = '';
-  public includeSearch = false;
-  public saveDraft = false;
-  public builder?: any;
-  public viewer?: string;
-  public renderer: any;
-}

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

@@ -1,54 +0,0 @@
-import { NgModule } from '@angular/core';
-import { RouterModule } from '@angular/router';
-import { CommonModule } from '@angular/common';
-import { FormsModule } from '@angular/forms';
-import { FormioModule } from '@formio/angular';
-import { FormioGrid } from '@formio/angular/grid';
-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 { SubmissionComponent } from './submission/submission/submission.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 { FormManagerRouteConfig } from './form-manager.config';
-import { FormManagerRoutes } from './form-manager.routes';
-import { PaginationModule } from 'ngx-bootstrap/pagination';
-import { ModalModule } from 'ngx-bootstrap/modal';
-import { extendRouter } from '@formio/angular';
-@NgModule({
-  imports: [
-    CommonModule,
-    FormioModule,
-    RouterModule,
-    FormsModule,
-    FormioGrid,
-    ModalModule.forRoot(),
-    PaginationModule.forRoot()
-  ],
-  declarations: [
-    FormManagerIndexComponent,
-    FormManagerCreateComponent,
-    FormManagerFormComponent,
-    FormManagerViewComponent,
-    FormManagerEditComponent,
-    FormManagerDeleteComponent,
-    SubmissionComponent,
-    SubmissionEditComponent,
-    SubmissionDeleteComponent,
-    SubmissionViewComponent,
-    SubmissionIndexComponent
-  ]
-})
-export class FormManagerModule {
-  static forChild(config?: FormManagerRouteConfig): any {
-    return extendRouter(FormManagerModule, config, FormManagerRoutes);
-  }
-  static forRoot(config?: FormManagerRouteConfig): any {
-    return extendRouter(FormManagerModule, config, FormManagerRoutes);
-  }
-}

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

@@ -1,75 +0,0 @@
-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

@@ -1,195 +0,0 @@
-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

@@ -1,14 +0,0 @@
-<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

@@ -1,22 +0,0 @@
-.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;
-}