@bizdoc/core 1.14.8 → 1.14.9

package/src/lib/views/timeline/timeline.component.exp.ts

@@ -0,0 +1,333 @@
+import { Component, Inject, HostBinding } from '@angular/core';
+import { SessionService } from '../../core/session.service';
+import { TranslateService } from '../../core/translate.service';
+import { PromptService } from '../../core/prompt.service';
+import { AccountService } from '../../core/account.service';
+import { Observable, forkJoin } from 'rxjs';
+import { tap, map } from 'rxjs/operators';
+import { DocumentViewComponent } from '../../core/base';
+import { Chain, DocumentModel } from '../../core/models';
+import { BizDocConfig, BIZDOC_CONFIG } from '../../core/configuration';
+import { BizDoc } from '../../core/decorators';
+import { ColumnModel, DayMarkersService, DayWorkingTimeModel, EventMarkerModel, Gantt, HolidayModel, LabelSettingsModel, SelectionService, SelectionSettingsModel, SplitterSettingsModel, TaskFieldsModel, TimelineSettingsModel } from '@syncfusion/ej2-angular-gantt';
+import { ElementRef } from '@angular/core';
+import { RouterImpl } from '../../core/router';
+import { DocumentViewRef } from '../document-view-ref';
+import { MailboxService } from '../../core/mailbox.service';
+import dayjs from 'dayjs';
+
+@Component({
+  selector: 'bizdoc-timeline',
+  template: '',
+  styleUrls: ['timeline.component.scss'],
+  host: { class: 'view' },
+  providers: [SelectionService, DayMarkersService]
+})
+@BizDoc({ selector: 'bizdoc-timeline' })
+/** timeline-view component*/
+export class TimelineViewComponent implements DocumentViewComponent {
+  data: Task[];
+  @HostBinding()
+  readonly dir = this._session.direction;
+  readonly locale = this._session.language;
+  item: DocumentModel<any>;
+  gantt: Gantt;
+  dateFormat: string;
+  holidays: HolidayModel[];
+  width: number;
+  readonly selectionSettings = {} as SelectionSettingsModel;
+  /** timeline-view ctor */
+  constructor(
+    private _ps: PromptService,
+    viewRef: DocumentViewRef<Options>,
+    @Inject(BIZDOC_CONFIG) config: BizDocConfig,
+    private _users: AccountService,
+    private _mailbox: MailboxService,
+    private _session: SessionService,
+    private _translate: TranslateService,
+    private _router: RouterImpl,
+    private _element: ElementRef) {
+    this.columns = [
+      { field: 'title', headerText: _translate.get('Task') },
+      { field: 'name', headerText: _translate.get('Who') },
+      { field: 'time', headerText: _translate.get('When') }
+    ];
+    this.dateFormat = config && config.formats && config.formats.dateTime || 'MMMM d, yyyy hh:mm';
+    this.holidays = _session.profile.holidays &&
+      _session.profile.holidays.map(h => ({ from: h.startDate, to: h.fromDate, label: h.title }))
+    viewRef.resize.subscribe(d => {
+      this.width = d.width - 16;
+      if (this.gantt) {
+        this.gantt.width = d.width - 16;
+        this.gantt.windowResize();
+      }
+    });
+  }
+  onBind(model: DocumentModel<any>) {
+    this.item = model;
+    this._prepare(model).subscribe(tasks => {
+      this._draw(tasks);
+      //this.gantt.scrollToDate(new Date().toString());
+    });
+  }
+  private _draw(tasks: Task[]) {
+    this.gantt && this.gantt.destroy();
+    this.gantt = new Gantt({
+      dataSource: tasks,
+      taskFields: this.taskFields,
+      columns: this.columns,
+      enableRtl: this._session.inverse,
+      //  timelineSettings: this.timelineSettings,
+      labelSettings: this.labelSettings,
+      eventMarkers: this.eventMarkers,
+      readOnly: true,
+      selectionSettings: this.selectionSettings,
+      allowSelection: true,
+      dateFormat: this.dateFormat,
+      tooltipSettings: this.tooltipSettings,
+      rowSelecting: this.rowSelecting.bind(this),
+      holidays: this.holidays,
+      //  includeWeekend: true,
+      splitterSettings: this.splitterSettings,
+      //  durationUnit: 'Hour',
+      taskbarHeight: 30,
+      rowHeight: 40,
+      width: this.width
+      //  dayWorkingTime: this.dayWorkingTime
+    }, this._element.nativeElement)
+    this.columns.forEach(c =>
+      this.gantt.hideColumn(c.field)
+    )
+  }
+  private _prepare(model: DocumentModel<any>): Observable<Task[]> {
+    const promisses: Observable<any>[] = [];
+    let i = 0;
+    const tasks: Task[] = [];
+
+    //const observable = this._mailbox.timeline(model.documentId).pipe(tap(t => {
+    //}))
+
+    const process = (model: DocumentModel)=>{
+    model.log.forEach(l => {
+      let task: Task;
+      switch (l.type) {
+        case 'Submit':
+          this.eventMarkers.push({
+            day: new Date(l.time),
+            label: this._translate.get('Submition')
+          });
+          return;
+        case 'StateChange':
+          {
+            const state = this._session.profile.states.find(s => s.name === l.state);
+            task = {
+              id: i++,
+              type: l.type,
+              nodeId: l.nodeId,
+              time: new Date(l.time),
+              title: state ? state.past || state.title : l.state
+            };
+            if (l.duration) {
+              task.ending = new Date(task.time.valueOf() + l.duration * 1000);
+              task.duration = l.duration * 1000;
+            }
+            else
+              task.ending = model.completed ? new Date(l.time) : new Date();
+            tasks.push(task);
+            break;
+          }
+        case 'ModelChange':
+          {
+            task = {
+              id: i++,
+              type: l.type,
+              nodeId: l.nodeId,
+              time: new Date(l.time),
+              title: this._translate.get('Edited')
+            };
+            if (l.duration) {
+              task.ending = new Date(task.time.valueOf() + l.duration * 1000);
+              task.duration = l.duration * 1000;
+            }
+            else task.ending = new Date();
+
+            const state = tasks.find(t => t.type === 'StateChange' && t.time <= task.time && (!t.ending || t.ending >= task.ending));
+            if (state) {
+              if (!state.subtasks) state.subtasks = [];
+              state.subtasks.push(task);
+            }
+            else
+              tasks.push(task);
+            break;
+          }
+        case 'ActionTaken':
+          {
+            const action = this._session.profile.actions.find(a => a.name === l.action);
+            if (l.action === 'delete') return;
+            const time = dayjs(l.time);
+            task = {
+              id: i++,
+              type: l.type,
+              nodeId: l.nodeId,
+              ending: time.toDate(),
+              time: time.add(- l.duration, 's').toDate(),
+              duration: l.duration * 1000,
+              title: action ? action.past || action.title : l.action
+            };
+            if (l.nodeId) {
+              model.workflow.connectors.filter(c => c.targetId === l.nodeId).forEach(c => {
+                const dependencies = tasks.filter(l => l.nodeId === c.sourceId).map(l => `FS${l.id}`);
+                if (dependencies.length) task.dependencies = dependencies.join(',');
+              });
+            }
+            const state = tasks.find(t => t.type === 'StateChange' && t.time <= task.time && (!t.ending || t.ending >= task.ending));
+            if (state) {
+              if (!state.subtasks) state.subtasks = [];
+              state.subtasks.push(task);
+            }
+            else
+              tasks.push(task);
+            break;
+          }
+        default:
+          return;
+      }
+      if (l.byId) {
+        const who = this._users.get(l.userId),
+          by = this._users.get(l.byId);
+        const promise = forkJoin(who, by).pipe(tap(ns => {
+          const [who, by] = ns;
+          task.name = this._translate.get('By', who.name, by.name);
+          //    if (l.role) {
+          //        const role = this.session.profile.roles.find(o => o.name === l.role);
+          //        if (role) task.name += `, ${role.name}`;
+          //    }
+        }, () => this._ps.error()));
+
+        promisses.push(promise);
+      }
+      else if (l.userId) {
+        const promise = this._users.get(l.userId).pipe(tap(u => {
+          task.name = u.name;
+          //    if (l.role) {
+          //        const role = this.session.profile.roles.find(o => o.name === l.role);
+          //        if (role) task.name += `, ${role.name}`;
+          //    }
+        }, () => this._ps.error()));
+        promisses.push(promise);
+      }
+    });
+    model.events.forEach(e => {
+      this.eventMarkers.push({
+        day: new Date(e.starting),
+        label: e.title
+      });
+    });
+    model.recipients.forEach(r => {
+      if (!r.pending)
+        return;
+      const task: Task = {
+        id: i++,
+        type: 'pending',
+        time: new Date(r.received),
+        title: this._translate.get('IsPending')
+      };
+      if (r.substituteId) {
+        const byPromise = this._users.get(r.substituteId);
+        const whoPromise = this._users.get(r.userId);
+        const promise = forkJoin(whoPromise, byPromise).pipe(tap(n => {
+          task.name = this._translate.get('WhoSubstituting', n[0].name, n[1].name);
+          if (r.role) {
+            const role = this._session.profile.roles.find(o => o.name === r.role);
+            if (role) task.name += `, ${role.name}`;
+          }
+        }, () => this._ps.error()));
+
+        promisses.push(promise);
+      }
+      else {
+        const promise = this._users.get(r.userId).pipe(tap(u => {
+          task.name = u.name;
+          if (r.role) {
+            const role = this._session.profile.roles.find(o => o.name === r.role);
+            if (role) task.name += `, ${role.name}`;
+          }
+        }, () => this._ps.error()));
+        promisses.push(promise);
+      }
+      if (r.nodeId) {
+        model.workflow.connectors.filter(c => c.targetId === r.nodeId).forEach(c => {
+          const predecessors = tasks.filter(l => l.nodeId === c.sourceId).map(l => l.id);
+          if (predecessors.length) task.dependencies = predecessors.join(',');
+        });
+      }
+      const state = tasks.find(t => t.type === 'StateChange' && t.time <= task.time && (!t.ending || t.ending >= task.time));
+      if (state) {
+        if (!state.subtasks) state.subtasks = [];
+        state.subtasks.push(task);
+      }
+      else
+        tasks.push(task);
+    });
+  }
+    process(model);
+    return forkJoin(promisses).
+      pipe(map(() => tasks.sort((t0, t1) => t0.time > t1.time ? 1 : -1)));
+  }
+  rowSelecting(r) {
+    if (r.data.taskData.type === 'ModelChange')
+      this._compare(r.data);
+  }
+  public _compare(task: Task) {
+    this._router.navigate(['mailbox/d', this.item.documentId.encodeId(), 'version', task.time.valueOf().encodeId()], { state: { item: this.item } })
+  }
+  readonly taskFields: TaskFieldsModel = {
+    id: 'id',
+    name: 'title',
+    startDate: 'time',
+    endDate: 'ending',
+    duration: 'duration',
+    dependency: 'dependencies',
+    child: 'subtasks'
+  };
+  columns: ColumnModel[];
+  readonly tooltipSettings = { showTooltip: false };
+  readonly timelineSettings: TimelineSettingsModel = {
+    timelineUnitSize: 60,
+    topTier: {
+      format: 'MMM dd, yyyy',
+      unit: 'Day',
+    },
+    bottomTier: {
+      unit: 'Hour',
+      format: 'h.mm a'
+    }
+  };
+  readonly eventMarkers: EventMarkerModel[] = [
+  ];
+  public labelSettings: LabelSettingsModel = {
+    rightLabel: 'name', leftLabel: 'title'
+  };
+  public splitterSettings: SplitterSettingsModel = {
+    columnIndex: 3,
+    view: 'Chart',
+    separatorSize: 0
+  };
+  public dayWorkingTime: DayWorkingTimeModel[] = [{ from: 0, to: 24 }];
+}
+interface Task {
+  id: number;
+  type: string;
+  nodeId?: string;
+  name?: string;
+  title?: string;
+  time: Date;
+  ending?: Date;
+  duration?: number;
+  subtasks?: Task[];
+  dependencies?: string;
+  indicators?: any[],
+}
+interface Options {
+
+}

package/src/lib/views/timeline/timeline.component.html

@@ -0,0 +1,6 @@
+<!--<ejs-gantt id="gantt" height="430px" [dataSource]="data" [taskFields]="taskSettings" [columns]="columns"
+           #gantt [timelineSettings]="timelineSettings" [labelSettings]="labelSettings" [toolbar]="null" [dir]="dir"
+           [eventMarkers]="eventMarkers" [treeColumnIndex]="0" [allowSelection]="true" [dateFormat]="dateFormat" [tooltipSettings]="tooltipSettings"
+           [projectStartDate]="starting" [projectEndDate]="ending"
+           (rowSelecting)="rowSelecting($event)" [includeWeekend]="true" [splitterSettings]="splitterSettings" durationUnit="Hour" [dayWorkingTime]="dayWorkingTime">
+</ejs-gantt>-->

package/src/lib/views/timeline/timeline.component.scss

@@ -0,0 +1,6 @@
+:host{
+    padding: 8px;
+}
+:host ::ng-deep .e-split-bar {
+  display: none !important
+}

package/src/lib/views/view-item.component.ts

@@ -0,0 +1,67 @@
+import { AfterViewInit, Component, HostListener, Injector, Input, OnDestroy, ViewContainerRef } from "@angular/core";
+import { HttpClient } from "@angular/common/http";
+import { takeUntil } from "rxjs";
+import { Subject } from "rxjs";
+import { debounceTime } from "rxjs/operators";
+import { DocumentViewComponent } from "../core/base";
+import { BizDocComponentFactoryResolver } from "../core/component-factory-resolver";
+import { Dimentions, DocumentModel, View } from "../core/models";
+import { DocumentViewRef } from "./document-view-ref";
+
+@Component({
+  selector: 'bizdoc-document-view-item',
+  template: '',
+  //host: { class: 'bz-view' }
+})
+export class ViewItemComponent implements AfterViewInit, OnDestroy {
+  @Input()
+  model: DocumentModel;
+  @Input()
+  view: View;
+  args: any;
+  get hidden() { return this._viewRef && this._viewRef.hidden }
+  get viewRef() { return this._viewRef; }
+  private _viewRef: DocumentViewRef<unknown>;
+  private _instance: DocumentViewComponent<any, any, any>;
+  private readonly _resizing = new Subject<void>();
+  private readonly _destroy = new Subject<void>();
+  constructor(
+    private _http: HttpClient,
+    private _vc: ViewContainerRef,
+    private _injector: Injector,
+    private _cf: BizDocComponentFactoryResolver) {
+  }
+
+  ngAfterViewInit(): void {
+    // dom
+    const factory = this._cf.resolve(this.view.template);
+    this._viewRef = new DocumentViewRef(this._http, this.model, this.view, this._dim());
+    const injector = Injector.create([{ provide: DocumentViewRef, useValue: this._viewRef }], this._injector);
+    this._instance = this._vc.createComponent(factory, 0, injector).instance as DocumentViewComponent<any>;
+    try {
+      this._instance.onBind(this.model);
+
+    } catch (e) {
+
+    }
+    this._resizing.pipe(debounceTime(150), takeUntil(this._destroy)).subscribe(() =>
+      this._viewRef._resize.next(this._dim()));
+  }
+  private _dim(): Dimentions {
+    let el = (this._vc.element.nativeElement as HTMLElement).parentElement, dim = el.getBoundingClientRect();
+    while (dim.width === 0) {
+      el = el.parentElement;
+      dim = el.getBoundingClientRect();
+    }
+    return dim;
+  }
+  @HostListener('window:resize')
+  public resize() {
+    this._resizing.next();
+  }
+  ngOnDestroy(): void {
+    this._viewRef._destroy();
+    this._destroy.next();
+    this._destroy.complete();
+  }
+}

package/src/lib/views/views.component.html

@@ -0,0 +1,4 @@
+<ng-container *ngFor="let v of views; let last = last;">
+  <bizdoc-document-view-item [model]="model" [view]="v" #view></bizdoc-document-view-item>
+  <!--<hr *ngIf="!view.hidden && !last" />-->
+</ng-container>

package/src/lib/views/views.component.scss

@@ -0,0 +1,33 @@
+:host {
+  display: flex;
+  -ms-flex-direction: column;
+  -webkit-flex-direction: column;
+  flex-direction: column;
+}
+
+hr {
+  opacity: .4;
+  margin: 4px 8px;
+}
+
+
+:host ::ng-deep .nav-toolbar {
+  display: flex;
+  -ms-flex-direction: row;
+  -webkit-flex-direction: row;
+  flex-direction: row;
+}
+:host ::ng-deep .view {
+  display: flex;
+  -ms-flex-direction: column;
+  -webkit-flex-direction: column;
+  flex-direction: column;
+  position: relative;
+}
+
+:host ::ng-deep .loading-view {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  text-align: -webkit-center;
+}

package/src/lib/views/views.component.ts

@@ -0,0 +1,29 @@
+import { QueryList, ViewChildren } from "@angular/core";
+import { ChangeDetectorRef, Component, Input, OnChanges, SimpleChanges } from "@angular/core";
+import { DocumentModel, View } from "../core/models";
+import { SessionService } from "../core/session.service";
+import { ViewItemComponent } from "./view-item.component";
+
+@Component({
+  selector: 'bizdoc-document-views',
+  templateUrl: 'views.component.html',
+  styleUrls: ['views.component.scss']
+})
+export class DocumentViewsComponent implements OnChanges {
+  @ViewChildren(ViewItemComponent) components: QueryList<ViewItemComponent>;
+  @Input()
+model: DocumentModel;
+  views: View[];
+  constructor(private _cd: ChangeDetectorRef,
+    private _session: SessionService) {
+  }
+  ngOnChanges(_: SimpleChanges): void {
+    this.views = [];
+    this._cd.detectChanges();
+    this.views = this._session.profile.views.filter(v => !v.forms || v.forms.indexOf(this.model.formId) > -1);
+  }
+  public resize() {
+    this.components.forEach(c => c.resize());
+  }
+}
+

package/src/lib/views/views.mobile.component.ts

@@ -0,0 +1,19 @@
+import { Component } from "@angular/core";
+import { ActivatedRoute } from "@angular/router";
+import { DocumentModel } from "../core/models";
+import { WindowTitleService } from "../core/window-title.service";
+
+@Component({ template: '<bizdoc-document-views [model]=model></bizdoc-document-views>' })
+export class DocumentViewMobileComponent {
+  model: DocumentModel; 
+  constructor(
+    route: ActivatedRoute,
+    title: WindowTitleService
+  ) {
+    route.data.subscribe(d => {
+      this.model = d['item'];
+      title.set(`#${this.model.number}`);
+    })
+  }
+}
+

package/src/lib/views/views.pane.component.ts

@@ -0,0 +1,33 @@
+import { ViewChild } from "@angular/core";
+import { Component } from "@angular/core";
+import { DocumentModel } from "../core/models";
+import { SessionService } from "../core/session.service";
+import { PaneRef } from "../core/slots/pane-ref";
+import { TranslateService } from "../core/translate.service";
+import { DocumentViewsComponent } from "./views.component";
+
+@Component({
+  template: '<bizdoc-document-views [model]=model></bizdoc-document-views>',
+  styles: [`:host {
+  min-width: 450px;
+    flex-grow: 1;}`]
+})
+export class DocumentViewPaneComponent {
+  @ViewChild(DocumentViewsComponent) views: DocumentViewsComponent;
+  model: DocumentModel;
+  constructor(
+    session: SessionService,
+    translate: TranslateService,
+    pane: PaneRef
+  ) {
+    pane.title = translate.get('View');
+    pane.dataChange.subscribe(d => {
+      this.model = d['item'];
+      const form = session.profile.forms.find(f => f.name === this.model.formId);
+      pane.group = `#${this.model.number}`;
+      pane.icon = form.icon;
+    });
+    pane.resized.subscribe(()=> this.views.resize());
+  }
+}
+

package/src/polyfills.ts

@@ -0,0 +1,81 @@
+/**
+ * This file includes polyfills needed by Angular and is loaded before the app.
+ * You can add your own extra polyfills to this file.
+ *
+ * This file is divided into 2 sections:
+ *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
+ *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
+ *      file.
+ *
+ * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
+ * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
+ * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
+ *
+ * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html
+ */
+
+/***************************************************************************************************
+ * BROWSER POLYFILLS
+ */
+
+/** IE9, IE10 and IE11 requires all of the following polyfills. **/
+// import 'core-js/es6/symbol';
+// import 'core-js/es6/object';
+// import 'core-js/es6/function';
+// import 'core-js/es6/parse-int';
+// import 'core-js/es6/parse-float';
+// import 'core-js/es6/number';
+// import 'core-js/es6/math';
+// import 'core-js/es6/string';
+// import 'core-js/es6/date';
+// import 'core-js/es6/array';
+// import 'core-js/es6/regexp';
+// import 'core-js/es6/map';
+// import 'core-js/es6/weak-map';
+// import 'core-js/es6/set';
+
+/** IE10 and IE11 requires the following for NgClass support on SVG elements */
+// import 'classlist.js';  // Run `npm install --save classlist.js`.
+
+/** IE10 and IE11 requires the following for the Reflect API. */
+// import 'core-js/es6/reflect';
+
+
+/** Evergreen browsers require these. **/
+// Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove.
+//import 'core-js/es7/reflect';
+
+
+/**
+ * Required to support Web Animations `@angular/platform-browser/animations`.
+ * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation
+ **/
+// import 'web-animations-js';  // Run `npm install --save web-animations-js`.
+
+/**
+ * By default, zone.js will patch all possible macroTask and DomEvents
+ * user can disable parts of macroTask/DomEvents patch by setting following flags
+ */
+
+ // (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
+ // (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
+ // (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
+
+ /*
+ * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
+ * with the following flag, it will bypass `zone.js` patch for IE/Edge
+ */
+// (window as any).__Zone_enable_cross_context_check = true;
+
+/***************************************************************************************************
+ * Zone JS is required by default for Angular itself.
+ */
+import 'zone.js';  // Included with Angular CLI.
+
+
+
+/***************************************************************************************************
+ * APPLICATION IMPORTS
+ */
+
+(window as any).global = window;