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

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

@@ -1,242 +0,0 @@
-import { GridFooterPositions } from './types/grid-footer-positions';
-import {
-  AfterViewInit,
-  ChangeDetectorRef,
-  Component,
-  ComponentFactoryResolver,
-  EventEmitter,
-  Input,
-  OnChanges,
-  OnInit,
-  Output,
-  ViewChild,
-  ViewContainerRef
-} from '@angular/core';
-import {FormioAlerts} from '@formio/angular';
-import {each} from 'lodash';
-import {Formio} from 'formiojs';
-import {GridHeaderComponent} from './GridHeaderComponent';
-import {GridBodyComponent} from './GridBodyComponent';
-import {GridFooterComponent} from './GridFooterComponent';
-import FormComponents from './form/index';
-import SubmissionComponents from './submission/index';
-import {FormioPromiseService} from '@formio/angular';
-import {GridColumn} from './types/grid-column';
-import {GridHeader, SortType} from './types/grid-header';
-
-@Component({
-  selector: 'formio-grid',
-  styleUrls: ['./grid.component.scss'],
-  templateUrl: './grid.component.html'
-})
-export class FormioGridComponent implements OnChanges, OnInit, AfterViewInit {
-  @Input() footerPosition = GridFooterPositions.bottom;
-  @Input() src?: string;
-  @Input() items?: Array<any>;
-  @Input() onForm?: Promise<any>;
-  @Input() query?: any;
-  @Input() refresh?: EventEmitter<object>;
-  @Input() columns?: Array<GridColumn>;
-  @Input() gridType?: string;
-  @Input() size?: number;
-  @Input() components?: any;
-  @Input() formio?: FormioPromiseService;
-  @Input() label?: string;
-  @Input() createText: String;
-  @Input() isActionAllowed: any;
-  @Output() select: EventEmitter<object>;
-  @Output() rowSelect: EventEmitter<object>;
-  @Output() rowAction: EventEmitter<object>;
-  @Output() createItem: EventEmitter<any>;
-  @Output() error: EventEmitter<any>;
-  @ViewChild('headerTemplate', {read: ViewContainerRef, static: true}) headerElement: ViewContainerRef;
-  @ViewChild('bodyTemplate', {read: ViewContainerRef, static: true}) bodyElement: ViewContainerRef;
-  @ViewChild('footerTemplate', {read: ViewContainerRef, static: true}) footerElement: ViewContainerRef;
-
-  public page = 0;
-  public isLoading = false;
-  public initialized = false;
-  public header: GridHeaderComponent;
-  public body: GridBodyComponent;
-  public footer: GridFooterComponent;
-  public footerPositions = GridFooterPositions;
-
-  constructor(
-    public alerts: FormioAlerts,
-    private resolver: ComponentFactoryResolver,
-    private ref: ChangeDetectorRef
-  ) {
-    this.select = this.rowSelect = new EventEmitter();
-    this.rowAction = new EventEmitter();
-    this.createItem = new EventEmitter();
-    this.error = new EventEmitter();
-    this.isLoading = true;
-  }
-
-  createComponent(property, component) {
-    const factory = this.resolver.resolveComponentFactory(component);
-    const componentRef = property.createComponent(factory);
-    return componentRef.instance;
-  }
-
-  loadGrid(src?: string) {
-    // If no source is provided, then skip.
-    if (!src && !this.formio) {
-      return;
-    }
-    // Do not double load.
-    if (this.formio && this.src && (src === this.src)) {
-      return;
-    }
-
-    if (src) {
-      this.src = src;
-      this.formio = new FormioPromiseService(this.src, { formOnly: true });
-    }
-
-    // Load the header.
-    this.header.load(this.formio, {}, this.columns)
-      .then(() => this.setPage(0))
-      .catch(error => this.onError(error));
-  }
-
-  ngOnInit() {
-    // Create our components.
-    const comps = this.components || ((this.gridType === 'form') ? FormComponents : SubmissionComponents);
-
-    this.header = this.createComponent(this.headerElement, comps.header);
-    this.header.actionAllowed = this.actionAllowed.bind(this);
-    this.header.sort.subscribe(header => this.sortColumn(header));
-
-    this.body = this.createComponent(this.bodyElement, comps.body);
-    this.body.header = this.header;
-    this.body.actionAllowed = this.actionAllowed.bind(this);
-    this.body.rowSelect.subscribe(row => this.rowSelect.emit(row));
-    this.body.rowAction.subscribe(action => this.rowAction.emit(action));
-
-    this.footer = this.createComponent(this.footerElement, comps.footer);
-    this.footer.header = this.header;
-    this.footer.body = this.body;
-    this.footer.actionAllowed = this.actionAllowed.bind(this);
-    this.footer.createText = this.createText;
-    this.footer.size = this.size;
-    this.footer.pageChanged.subscribe(page => this.pageChanged(page));
-    this.footer.createItem.subscribe(item => this.createItem.emit(item));
-  }
-
-  ngOnChanges(changes: any) {
-    if (this.initialized) {
-      if (
-        (changes.src && changes.src.currentValue) ||
-        (changes.formio && changes.formio.currentValue)
-      ) {
-        this.loadGrid(changes.src.currentValue);
-      }
-
-      if (changes.items && changes.items.currentValue) {
-        this.refreshGrid();
-      }
-    }
-
-    if (this.footer &&
-        (changes.createText && changes.createText.currentValue)) {
-      this.footer.createText = changes.createText.currentValue;
-    }
-  }
-
-  ngAfterViewInit() {
-    this.alerts.setAlerts([]);
-    this.query = this.query || {};
-    if (this.refresh) {
-      this.refresh.subscribe((query: object) => this.refreshGrid(query));
-    }
-    this.loadGrid(this.src);
-    this.initialized = true;
-    this.ref.detectChanges();
-  }
-
-  actionAllowed(action) {
-    if (this.isActionAllowed) {
-      return this.isActionAllowed(action);
-    } else {
-      return true;
-    }
-  }
-
-  onError(error: any) {
-    this.isLoading = false;
-    this.error.emit(error);
-    if (typeof error === 'string' || error.message) {
-      this.alerts.setAlert({
-        type: 'danger',
-        message: error.message || error
-      });
-    }
-  }
-
-  refreshGrid(query?: any) {
-    this.alerts.setAlerts([]);
-    this.query = query || this.query;
-    if (!this.query.hasOwnProperty('limit')) {
-      this.query.limit = 10;
-    }
-    if (!this.query.hasOwnProperty('skip')) {
-      this.query.skip = 0;
-    }
-    this.isLoading = true;
-    this.ref.detectChanges();
-    Formio.cache = {};
-    let loader = null;
-    if (this.items) {
-      loader = Promise.resolve(this.body.setRows(this.query, this.items));
-    } else {
-      loader = this.body.load(this.formio, this.query);
-    }
-
-    return loader.then(info => {
-      this.isLoading = false;
-      this.initialized = true;
-      this.ref.detectChanges();
-    }).catch(error => this.onError(error));
-  }
-
-  setPage(num = -1) {
-    this.page = num !== -1 ? num : this.page;
-    if (!this.query.hasOwnProperty('limit')) {
-      this.query.limit = 10;
-    }
-    if (!this.query.hasOwnProperty('skip')) {
-      this.query.skip = 0;
-    }
-    this.query.skip = this.page * this.query.limit;
-    this.refreshGrid();
-  }
-
-  sortColumn(header: GridHeader) {
-    // Reset all other column sorts.
-    each(this.header.headers, (col: any) => {
-      if (col.key !== header.key) {
-        col.sort = '';
-      }
-    });
-    switch (header.sort) {
-      case 'asc':
-        header.sort = SortType.DESC;
-        this.query.sort = '-' + header.key;
-        break;
-      case 'desc':
-        header.sort = undefined;
-        delete this.query.sort;
-        break;
-      case undefined:
-        header.sort = SortType.ASC;
-        this.query.sort = header.key;
-        break;
-    }
-    this.refreshGrid();
-  }
-
-  pageChanged(page: any) {
-    this.setPage(page.page - 1);
-  }
-}

package/projects/angular-formio/grid/src/grid.footer.scss

@@ -1,14 +0,0 @@
-tfoot.formio-grid-footer {
-  td {
-    padding: 0.3rem;
-  }
-
-  .page-num {
-    font-size: 1.4em;
-  }
-
-  ul.pagination {
-    margin-top: 5px;
-    margin-bottom: 0;
-  }
-}

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

@@ -1,57 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { FormsModule } from '@angular/forms';
-import { RouterModule } from '@angular/router';
-import { FormioModule } from '@formio/angular';
-import { FormioAlerts } from '@formio/angular';
-import { FormioGridComponent } from './grid.component';
-import { PaginationModule } from 'ngx-bootstrap/pagination';
-import { FormGridHeaderComponent } from './form/FormGridHeader.component';
-import { FormGridBodyComponent } from './form/FormGridBody.component';
-import { FormGridFooterComponent } from './form/FormGridFooter.component';
-import { SubmissionGridHeaderComponent } from './submission/SubmissionGridHeader.component';
-import { SubmissionGridBodyComponent } from './submission/SubmissionGridBody.component';
-import { SubmissionGridFooterComponent } from './submission/SubmissionGridFooter.component';
-import { GridHeaderComponent } from './GridHeaderComponent';
-import { GridBodyComponent } from './GridBodyComponent';
-import { GridFooterComponent } from './GridFooterComponent';
-import { GridService } from './grid.service';
-import { TimeSince } from './form/time-since.pipe'
-@NgModule({
-  imports: [
-    CommonModule,
-    FormsModule,
-    FormioModule,
-    RouterModule,
-    PaginationModule.forRoot()
-  ],
-  declarations: [
-    FormioGridComponent,
-    FormGridHeaderComponent,
-    FormGridBodyComponent,
-    FormGridFooterComponent,
-    SubmissionGridHeaderComponent,
-    SubmissionGridBodyComponent,
-    SubmissionGridFooterComponent,
-    GridHeaderComponent,
-    GridBodyComponent,
-    GridFooterComponent,
-    TimeSince
-  ],
-  exports: [
-    FormioGridComponent
-  ],
-  entryComponents: [
-    FormGridHeaderComponent,
-    FormGridBodyComponent,
-    FormGridFooterComponent,
-    SubmissionGridHeaderComponent,
-    SubmissionGridBodyComponent,
-    SubmissionGridFooterComponent
-  ],
-  providers: [
-    FormioAlerts,
-    GridService
-  ]
-})
-export class FormioGrid {}

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

@@ -1,16 +0,0 @@
-import { Injectable } from '@angular/core';
-import _intersection from 'lodash/intersection';
-
-@Injectable()
-export class GridService {
-  public rows: Array<any>;
-  constructor() {}
-
-  setRows(rows) {
-    this.rows = rows;
-  }
-
-  getFormsPerPage() {
-    return this.rows?.length;
-  }
-}

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

@@ -1,12 +0,0 @@
-export { FormioGrid } from './grid.module';
-export { GridHeaderComponent } from './GridHeaderComponent';
-export { GridFooterComponent } from './GridFooterComponent';
-export { GridBodyComponent } from './GridBodyComponent';
-export { FormGridHeaderComponent } from './form/FormGridHeader.component';
-export { FormGridBodyComponent } from './form/FormGridBody.component';
-export { FormGridFooterComponent } from './form/FormGridFooter.component';
-export { SubmissionGridHeaderComponent } from './submission/SubmissionGridHeader.component';
-export { SubmissionGridBodyComponent } from './submission/SubmissionGridBody.component';
-export { SubmissionGridFooterComponent } from './submission/SubmissionGridFooter.component';
-export { FormioGridComponent } from './grid.component';
-export { GridService } from './grid.service';

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

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

package/projects/angular-formio/grid/src/submission/SubmissionGridBody.component.html

@@ -1,7 +0,0 @@
-<ng-template>
-  <tbody>
-    <tr *ngFor="let row of rows" (click)="onRowSelect($event, row)">
-      <td *ngFor="let rowHeader of header.headers" [innerHTML]="view(row, rowHeader)"></td>
-    </tr>
-  </tbody>
-</ng-template>

package/projects/angular-formio/grid/src/submission/SubmissionGridBody.component.ts

@@ -1,39 +0,0 @@
-import { Component } from '@angular/core';
-import { each, get } from 'lodash';
-import { GridBodyComponent } from '../GridBodyComponent';
-import {FormioPromiseService} from '@formio/angular';
-import { GridHeader } from '../types/grid-header';
-import {FormioSubmission} from '@formio/angular';
-@Component({
-  templateUrl: './SubmissionGridBody.component.html'
-})
-export class SubmissionGridBodyComponent extends GridBodyComponent {
-  load(formio: FormioPromiseService, query?: any) {
-    query = query || {};
-    return formio.loadSubmissions({ params: query })
-      .then((submissions: any) => this.setRows(query, submissions));
-  }
-
-  /**
-   * Render the cell data.
-   *
-   * @param submission
-   * @param header
-   * @return any
-   */
-  view(submission: FormioSubmission, header: GridHeader): string {
-    const cellValue: any = get(submission, header.key);
-    if (header.renderCell) {
-      return header.renderCell(cellValue, header.component);
-    } else {
-      if (header.component) {
-        if (header.component.getView) {
-          return header.component.getView(cellValue);
-        }
-        return header.component.asString(cellValue);
-      } else {
-        return cellValue.toString();
-      }
-    }
-  }
-}

package/projects/angular-formio/grid/src/submission/SubmissionGridFooter.component.html

@@ -1,18 +0,0 @@
-<ng-template #footer let-position="position">
-  <thead class="formio-grid-footer" *ngIf="position === footerPositions.top">
-    <ng-container [ngTemplateOutlet]="defaultFooterTemplate"></ng-container>
-  </thead>
-  <tfoot class="formio-grid-footer" *ngIf="position === footerPositions.bottom">
-    <ng-container [ngTemplateOutlet]="defaultFooterTemplate"></ng-container>
-  </tfoot>
-</ng-template>
-
-<ng-template #defaultFooterTemplate>
-  <tr>
-    <td *ngIf="header" [colSpan]="header.numHeaders">
-      <button *ngIf="actionAllowed('submissionCreate') && createText" class="btn btn-primary pull-left float-left" (click)="createItem.emit('form')"><i class="glyphicon glyphicon-plus fa fa-plus"></i> {{ createText }}</button>
-      <span class="pull-right float-right item-counter"><span class="page-num">{{ body.firstItem }} - {{ body.lastItem }}</span> / {{ body.total }} total</span>
-      <pagination [totalItems]="body.total" [itemsPerPage]="body.limit" [(ngModel)]="body.skip" (pageChanged)="pageChanged.emit($event)" [maxSize]="size" class="justify-content-center pagination-sm"></pagination>
-    </td>
-  </tr>
-</ng-template>

package/projects/angular-formio/grid/src/submission/SubmissionGridFooter.component.ts

@@ -1,20 +0,0 @@
-import {Component, OnInit, ViewEncapsulation} from '@angular/core';
-import { GridFooterComponent } from '../GridFooterComponent';
-
-@Component({
-  templateUrl: './SubmissionGridFooter.component.html',
-  styleUrls: ['../grid.footer.scss'],
-  encapsulation: ViewEncapsulation.None
-})
-export class SubmissionGridFooterComponent extends GridFooterComponent implements OnInit {
-
-  constructor() {
-    super();
-  }
-
-  ngOnInit() {
-    if (!this.size) {
-      this.size = 7;
-    }
-  }
-}

package/projects/angular-formio/grid/src/submission/SubmissionGridHeader.component.html

@@ -1,11 +0,0 @@
-<ng-template>
-  <thead>
-    <tr>
-      <th *ngFor="let header of headers">
-        <a (click)="sort.emit(header)">
-          {{ header.label }}&nbsp;<span [ngClass]="{'glyphicon-triangle-top': (header.sort === 'asc'), 'glyphicon-triangle-bottom': (header.sort === 'desc')}" class="glyphicon" *ngIf="header.sort"></span>
-        </a>
-      </th>
-    </tr>
-  </thead>
-</ng-template>

package/projects/angular-formio/grid/src/submission/SubmissionGridHeader.component.ts

@@ -1,72 +0,0 @@
-import {Component, EventEmitter} from '@angular/core';
-import {Utils, Components, ExtendedComponentSchema} from 'formiojs';
-import {GridHeaderComponent} from '../GridHeaderComponent';
-import {FormioPromiseService} from '@formio/angular';
-import {ComponentInstance, FormioForm} from '@formio/angular';
-import {GridColumn} from '../types/grid-column';
-import {GridHeader, SortType} from '../types/grid-header';
-
-@Component({
-  templateUrl: './SubmissionGridHeader.component.html'
-})
-export class SubmissionGridHeaderComponent extends GridHeaderComponent {
-
-  // Map structure where the key is the path and the value is the component
-  formComponents: Map<string, ExtendedComponentSchema>;
-
-  load(formio: FormioPromiseService, query?: any, columns?: Array<GridColumn>) {
-    query = query || {};
-    return formio.loadForm({params: query}).then((form: FormioForm) => {
-      this.headers = [];
-      this.formComponents = new Map<string, ExtendedComponentSchema>();
-      this.setComponents(form.components);
-      columns ? columns.forEach(column => {
-          this.setHeader(this.getHeaderForColumn(column, this.formComponents.get(column.path)));
-        }) : this.setComponentsHeaders(this.formComponents);
-
-      return this.headers;
-    });
-  }
-
-  setHeader(header: GridHeader) {
-    this.headers.push(header);
-  }
-
-  getHeaderForColumn(column: GridColumn, component?: ExtendedComponentSchema, sort?: SortType) {
-    return {
-      label: column.label,
-      key: column.path,
-      sort: sort,
-      component: component ? Components.create(component, null, null, true) as ComponentInstance : undefined,
-      renderCell: column ? column.renderCell : undefined
-    };
-  }
-
-  getHeaderForComponent(component: ExtendedComponentSchema, path: string, sort?: SortType) {
-    return {
-      label: component.label,
-      key: path,
-      sort: sort,
-      component: component ? Components.create(component, null, null, true) as ComponentInstance : undefined,
-    };
-  }
-  // Set headers from components in case if columns are not provided
-  setComponentsHeaders(components: Map<string, ExtendedComponentSchema>, sort?: SortType) {
-    components.forEach((component, path) => {
-      if (
-        component.input &&
-        (!component.hasOwnProperty('tableView') || component.tableView)
-      ) {
-        this.setHeader(this.getHeaderForComponent(component, path, sort));
-      }
-    });
-  }
-
-  // Map components
-  setComponents(components) {
-    Utils.eachComponent(components, (component: ExtendedComponentSchema, newPath: string) => {
-      this.formComponents.set(`data.${newPath}`, component);
-    });
-  }
-}
-

package/projects/angular-formio/grid/src/submission/index.ts

@@ -1,8 +0,0 @@
-import { SubmissionGridHeaderComponent } from './SubmissionGridHeader.component';
-import { SubmissionGridBodyComponent } from './SubmissionGridBody.component';
-import { SubmissionGridFooterComponent } from './SubmissionGridFooter.component';
-export default {
-  header: SubmissionGridHeaderComponent,
-  body: SubmissionGridBodyComponent,
-  footer: SubmissionGridFooterComponent
-};

package/projects/angular-formio/grid/src/types/grid-column.ts

@@ -1,7 +0,0 @@
-import { ComponentInstance } from '@formio/angular';
-
-export interface GridColumn {
-  label?: string;
-  path: string;
-  renderCell?(cellValue: any, component?: ComponentInstance): string;
-}

package/projects/angular-formio/grid/src/types/grid-footer-positions.ts

@@ -1,5 +0,0 @@
-export enum GridFooterPositions {
-  bottom,
-  top,
-  both
-}

package/projects/angular-formio/grid/src/types/grid-header.ts

@@ -1,14 +0,0 @@
-import {ComponentInstance} from '@formio/angular';
-
-export interface GridHeader {
-  component?: ComponentInstance;
-  key: string;
-  sort?: SortType;
-  label: string;
-  renderCell?(cellValue: any, component?: ComponentInstance): string;
-}
-
-export enum SortType {
-  ASC = 'asc',
-  DESC = 'desc'
-}

package/projects/angular-formio/karma.conf.js

@@ -1,32 +0,0 @@
-// Karma configuration file, see link for more information
-// https://karma-runner.github.io/1.0/config/configuration-file.html
-
-module.exports = function (config) {
-  config.set({
-    basePath: '',
-    frameworks: ['jasmine', '@angular-devkit/build-angular'],
-    plugins: [
-      require('karma-jasmine'),
-      require('karma-chrome-launcher'),
-      require('karma-jasmine-html-reporter'),
-      require('karma-coverage-istanbul-reporter'),
-      require('@angular-devkit/build-angular/plugins/karma')
-    ],
-    client: {
-      clearContext: false // leave Jasmine Spec Runner output visible in browser
-    },
-    coverageIstanbulReporter: {
-      dir: require('path').join(__dirname, '../../coverage/angular-formio'),
-      reports: ['html', 'lcovonly', 'text-summary'],
-      fixWebpackSourcePaths: true
-    },
-    reporters: ['progress', 'kjhtml'],
-    port: 9876,
-    colors: true,
-    logLevel: config.LOG_INFO,
-    autoWatch: true,
-    browsers: ['Chrome'],
-    singleRun: false,
-    restartOnFileChange: true
-  });
-};

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

@@ -1,15 +0,0 @@
-{
-  "ngPackage": {
-    "lib": {
-      "umdModuleIds": {
-        "lodash": "_",
-        "ngx-bootstrap/modal": "ngx-bootstrap/modal",
-        "ngx-bootstrap/pagination": "ngx-bootstrap/pagination",
-        "lodash/each": "_each",
-        "lodash/intersection": "_intersection",
-        "formiojs": "formiojs",
-        "ngx-bootstrap": "ngx-bootstrap"
-      }
-    }
-  }
-}

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

@@ -1,11 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { FormManagerEditComponent } from '../edit/edit.component';
-
-@Component({
-  templateUrl: '../edit/edit.component.html'
-})
-export class FormManagerCreateComponent extends FormManagerEditComponent implements OnInit {
-  ngOnInit() {
-    this.service.reset();
-  }
-}

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

@@ -1,6 +0,0 @@
-<formio-alerts [alerts]="alerts"></formio-alerts>
-<h3>Are you sure you wish to delete this form?</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/delete/delete.component.ts

@@ -1,37 +0,0 @@
-import { Component } from '@angular/core';
-import { FormManagerService } from '../form-manager.service';
-import { ActivatedRoute, Router } from '@angular/router';
-import { FormioAlerts } from '@formio/angular';
-import { GridService } from '@formio/angular/grid';
-
-@Component({
-  templateUrl: './delete.component.html'
-})
-export class FormManagerDeleteComponent {
-  constructor(
-    public managerService: FormManagerService,
-    public router: Router,
-    public route: ActivatedRoute,
-    public alerts: FormioAlerts,
-    public gridService?: GridService
-  ) {}
-
-  onDelete() {
-    this.managerService.formio.deleteForm().then(() => {
-      if (this.gridService) {
-        const currentPage = +localStorage.getItem('currentPage') || 0;
-        const formsNumberPerPage = this.gridService.getFormsPerPage();
-
-        if (formsNumberPerPage === 1 && currentPage !== 0) {
-          localStorage.setItem('currentPage', `${currentPage - 1}`);
-        }
-      }
-
-      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 });
-  }
-}