@bizdoc/core 1.8.5 → 1.8.9

package/src/lib/compose/trace/trace.base.ts

@@ -0,0 +1,66 @@
+import { Directive } from "@angular/core";
+const moment = require('moment');
+import { Observable, Subject } from "rxjs";
+import { takeUntil, filter } from "rxjs/operators";
+import { NodeInfo, DocumentModel } from "../../core/models";
+import { HubService } from "../../core/hub.service";
+
+export const START_NODE = 'start';
+@Directive()
+export abstract class TraceBase {
+  abstract model: DocumentModel<any>;
+  private _standardTime: { [nodeId: string]: { min: number; max: number } } = {};
+  protected _destroy = new Subject<void>();
+  constructor(hub: HubService) {
+    hub.update$.pipe(takeUntil(this._destroy), filter(e => e.model.id === this.model.documentId)).
+      subscribe(e => {
+        this.refresh();
+        //this.refresh();
+      })
+  }
+  onLoad(): Observable<any> | null {
+    return null;
+  }
+  abstract refresh();
+  protected resetEstimateTime() { this._standardTime = {}; }
+  /**
+   * 
+   * @param nodeId
+   */
+  protected _estimateTime(node: NodeInfo): { min: number; max: number } {
+    if (this._standardTime[node.id])
+      return this._standardTime[node.id];
+    this._standardTime[node.id] = { min: 0, max: 0 }; // recursive safe
+    let min = 0, max = 0;
+    if (node.estimate) {
+      const conns = this.model.workflow.connectors.filter(c => c.targetId === node.id);
+      for (let i = 0; i < conns.length; i++) {
+        const { sourceId } = conns[i];
+        const source = this.model.workflow.nodes.find(n => n.id === sourceId);
+        if (source.type === START_NODE) continue;
+        if (!source.estimate &&
+          !this.model.recipients.find(r => r.nodeId === sourceId && r.pending)) continue;
+        const { min: cmin, max: cmax } = this._estimateTime(source);
+        min = min > 0 ? Math.min(min, cmin) : cmin,
+          max = Math.max(max, cmax);
+      }
+      if (node.standardTime)
+        min += node.standardTime, max += node.standardTime;
+    }
+    else {
+      const recipients = this.model.recipients.filter(r => r.nodeId === node.id && !r.estimate && r.replied);
+      if (recipients.length) for (let i = 0; i < recipients.length; i++) {
+        const recipient = recipients[i],
+          duration = moment(new Date(recipient.replied)).diff(new Date(recipient.received), 's');
+        min = min > 0 ? Math.min(min, duration) : duration,
+          max = Math.max(max, duration);
+      }
+      else if (node.standardTime)
+        min += node.standardTime, max += node.standardTime;
+    }
+    return this._standardTime[node.id] = { min, max };
+  }
+  ngOnDestroy(): void {
+    this._destroy.next();
+  }
+}

package/src/lib/compose/trace/trace.component.html

@@ -0,0 +1,43 @@
+<table class="mat-table">
+  <thead role="rowgroup">
+    <tr class="mat-header-row">
+      <th class="mat-header-cell"></th>
+      <th class="mat-header-cell"></th>
+      <th class="mat-header-cell"></th>
+      <th class="mat-header-cell"></th>
+    </tr>
+  </thead>
+  <tbody role="rowgroup">
+    <tr class="mat-row" *ngFor="let l of data">
+      <td class="mat-cell">
+        <span [innerHTML]="l.name | sanitizeHtml" (click)="chat($event)"></span>
+        <span *ngIf=l.role>{{'JoinComma'|translate}}{{l.role}}</span>
+      </td>
+      <td class="mat-cell">
+        <ng-container [ngSwitch]="l.type">
+          <span *ngSwitchCase="'ActionTaken'">{{ l.action }}</span>
+          <span *ngSwitchCase="'Owner'">{{'Owner' | translate}}</span>
+          <span *ngSwitchCase="'Pending'">{{'IsPending' | translate}}</span>
+          <span *ngSwitchCase="'Estimate'">{{'Estimate' | translate}}</span>
+          <span *ngSwitchCase="'ModelChange'">{{'Changed' | translate}}</span>
+        </ng-container>
+        <span *ngIf="l.fyi">&nbsp;{{'FYI'|translate}}</span>
+      </td>
+      <td class="mat-cell" [ngSwitch]="l.estimate">
+        <ng-container *ngSwitchCase="true">
+          <span *ngIf="l.durationMax && l.durationMax === l.durationMin" [matTooltip]="l.durationMax|amDurationFormat">{{'EstimateTime'| translate : (l.durationMax | amDuration:'s')}}</span>
+          <span *ngIf="l.durationMax && l.durationMax !== l.durationMin"
+                [matTooltip]="l.durationMax|amDurationFormat">{{'EstimateTimeRange'| translate : (l.durationMin | amDuration:'s') : (l.durationMax | amDuration:'s')}}</span>
+        </ng-container>
+        <ng-container *ngSwitchDefault>
+          <span>{{l.time | amCalendar : null : CALENDAR_SPEC }}</span>
+          <span *ngIf="l.duration" [matTooltip]="l.duration|amDurationFormat">&nbsp;({{l.duration | amDuration:'s'}})</span>
+        </ng-container>
+      </td>
+      <td class="mat-cell">
+        <span *ngIf="l.note">{{l.note}}</span>
+        <button mat-icon-button *ngIf="l.model" (click)="compare(l)" [matTooltip]="'Compare'|translate"><mat-icon>more_horiz</mat-icon></button>
+      </td>
+    </tr>
+  </tbody>
+</table>

package/src/lib/compose/trace/trace.component.scss

@@ -0,0 +1,16 @@
+:host {
+  width: 100%;
+}
+
+table {
+  width: 100%;
+  background: transparent;
+}
+
+td {
+  padding: 0 4px 0 4px;
+}
+
+:host ::ng-deep .mat-icon {
+  vertical-align: sub
+}

package/src/lib/compose/trace/trace.component.ts

@@ -0,0 +1,289 @@
+import { Component, Input, Output, EventEmitter, OnChanges, SimpleChanges } from "@angular/core";
+import { Observable, forkJoin, of } from "rxjs";
+import { tap, map } from "rxjs/operators";
+const moment = require('moment');
+import { CalendarSpec } from "moment";
+import { Log, UserInfo, LogType, DocumentModel, Action } from "../../core/models";
+import { SessionService } from "../../core/session.service";
+import { TranslateService } from "../../core/translate.service";
+import { AccountService } from "../../core/account.service";
+import { TraceBase } from "./trace.base";
+import { HubService } from "../../core/hub.service";
+import { ChatInfo } from "../../chat/chat-info";
+
+const You = 'you';
+
+type UserInfoYou = UserInfo | 'you';
+
+/** component showing trace table */
+@Component({
+  selector: 'bizdoc-trace',
+  templateUrl: 'trace.component.html',
+  styleUrls: ['trace.component.scss']
+})
+export class TraceViewComponent extends TraceBase implements OnChanges {
+  @Input() model: DocumentModel<any>;
+  @Output() readonly versionSelected = new EventEmitter<Date>();
+  data: Trace[] = [];
+  readonly CALENDAR_SPEC: CalendarSpec = {
+    lastDay: `[${this._translate.get('Yesterday')}] HH:mm`,
+    lastWeek: 'dddd HH:mm',
+    sameDay: `[${this._translate.get('Today')}] HH:mm`,
+    sameElse: 'MMM Do HH:mm'
+  };
+  constructor(private _session: SessionService,
+    private _translate: TranslateService,
+    private _accounts: AccountService,
+    private _chat: ChatInfo,
+    hub: HubService) {
+    super(hub);
+  }
+  ngOnChanges(_changes: SimpleChanges): void {
+    const { ownerId, ownerById, issued, log, recipients } = this.model;
+    const observables: Observable<any>[] = [];
+
+    const node = {
+      type: 'Owner',
+      time: issued
+    } as Trace,
+      trace: Trace[] = [node];
+
+    const profiles = [this._userOf(ownerId)];
+
+    ownerById &&
+      profiles.push(this._userOf(ownerById));
+
+    const observe = forkJoin(profiles).pipe(tap(ns => {
+      const [who, by] = ns;
+
+      if (by) {
+        node.name = by === You ?
+          this._translate.get('ByYou', this._nameOf(who))
+          : this._translate.get('By', this._nameOf(who), this._nameOf(by));
+        if (by !== You && by.role) node.role = by.role;
+      }
+      else {
+        node.name = this._nameOf(who);
+
+        if (who !== You && who.role) node.role = who.role;
+      }
+    }
+    ));
+    observables.push(observe);
+
+    log.forEach(l => {
+      let action: Action;
+      switch (l.type) {
+        case 'ActionTaken':
+          {
+            action = this._session.profile.actions.find(a => a.name === l.action);
+            if (action && action.loggable === false)
+              return;
+            break;
+          }
+        case 'ModelChange':
+          break;
+        default:
+          return;
+      }
+      const step = { ...l } as Trace;
+
+      const profiles = [this._userOf(l.userId)];
+
+      profiles.push(l.byId ? this._userOf(l.byId) : of(null));
+
+      if (l.recipientId) {
+        const recipient = recipients.find(r => r.id === l.recipientId);
+        if (recipient.role) step.role = this._roleName(recipient.role);
+        recipient.substitutingId &&
+          profiles.push(this._userOf(recipient.substitutingId));
+        if (recipient.nodeId) {
+          const node = this.model.workflow.nodes.find(n => n.id === recipient.nodeId);
+          step.fyi = node.fyi;
+        }
+      }
+
+      const observe = forkJoin(profiles).pipe(tap(ns => {
+        const [who, by, substituting] = ns;
+
+        this._decorate(who, by, substituting, [], step);
+        if (action)
+          step.action = action ? this._actionName(action, by || who) : l.action;
+      }));
+      observables.push(observe);
+      trace.push(step);
+    });
+    recipients.forEach(r => {
+      if (!r.pending && !r.estimate) return;
+      const step = {
+        ...r,
+        type: r.estimate ? 'Estimate' : 'Pending',
+        time: r.received,
+        duration: r.pending ? moment().diff(r.received, 's') : null,
+        role: r.role ? this._roleName(r.role) : null
+      } as Trace;
+
+      if (r.nodeId) {
+        const node = this.model.workflow.nodes.find(n => n.id === r.nodeId);
+        if (r.estimate) {
+          const { min, max } = super._estimateTime(node);
+          if (max)
+            step.durationMin = min,
+              step.durationMax = max;
+        }
+        step.fyi = node.fyi;
+      }
+
+      const escalations = this.model.log.filter(l => l.time > this.model.issued && l.type === 'Escalation' && l.recipientId === r.id);
+
+      const profiles = [this._userOf(r.userId)];
+      profiles.push(r.byId ? this._userOf(r.byId) : of(null));
+      profiles.push(r.substitutingId ? this._userOf(r.substitutingId) : of(null));
+      escalations.length &&
+        this.model.recipients.
+          filter(r => r.originId === escalations[0].recipientId).
+          forEach(e => profiles.push(this._userOf(e.userId)));
+      const observe = forkJoin(profiles).pipe(map(ns => {
+        const [who, by, substituting, ...escalations] = ns;
+        this._decorate(who, by, substituting, escalations, step);
+      }));
+      observables.push(observe);
+      trace.push(step);
+    });
+
+    (observables.length ? forkJoin(observables) : of(null)).subscribe(() =>
+      this.data = trace.sort((a, b) => a.time > b.time ? -1 : 1));
+  }
+  public refresh() {
+    this.ngOnChanges(null);
+  }
+  /**
+   * 
+   * @param who
+   * @param by
+   * @param substituting
+   * @param escalations
+   * @param node
+   */
+  private _decorate(who: UserInfoYou, by: UserInfoYou, substituting: UserInfoYou, escalations: UserInfoYou[], node: Trace) {
+    if (substituting) {
+      if (by) {
+        if (by === You) {
+          if (substituting === You)
+            node.name = this._translate.get('ByYou', this._nameOf(who));
+          else
+            node.name = this._translate.personalize('SubstitutingByYou', (who as UserInfo).gender, this._nameOf(who), this._nameOf(substituting));
+        }
+        else
+          node.name = this._translate.get('SubstitutingBy', this._nameOf(who), this._nameOf(substituting), this._nameOf(by));
+        if (by !== You && by.role)
+          node.role = by.role;
+      }
+      else {
+        if (substituting === You)
+          node.name = this._translate.personalize('SubstitutingForYou', (who as UserInfo).gender, this._nameOf(who));
+        else if (who === You)
+          node.name = this._translate.personalize('YouSubstitute', this._session.profile.byGender, this._nameOf(who));
+        else
+          node.name = this._translate.personalize('Substituting', (who as UserInfo).gender, this._nameOf(who), this._nameOf(substituting));
+        if (who !== You && who.role)
+          node.role = who.role;
+      }
+    }
+    else if (by) {
+      if (by === You)
+        node.name = this._translate.get('ByYou', this._nameOf(who));
+      else
+        node.name = this._translate.get('By', this._nameOf(who), this._nameOf(by));
+      if (by !== You && by.role)
+        node.role = by.role;
+    }
+    else if (escalations.length) {
+      if (escalations.length === 1 && escalations[0] === You)
+        node.name = this._translate.get('EscalatedByYou', this._nameOf(who));
+      else
+        node.name = this._translate.get('EscalatedBy', this._nameOf(who), this._translate.join(escalations.map(e => this._nameOf(e))));
+    }
+    else {
+      if (who === You)
+        node.name =
+          this._translate.get('You');
+      else {
+        node.name = this._nameOf(who);
+        if (who.role)
+          node.role = who.role;
+      }
+    }
+  }
+  /**
+   * user name, chat anchor tag or You
+   * @param user
+   */
+  private _nameOf(user: UserInfoYou): string {
+    if (user === You)
+      return this._translate.get('You');
+    else
+      return this._chat.format(user);
+  }
+  /**
+   * 
+   * @param userId
+   */
+  private _userOf(userId: string): Observable<UserInfoYou> {
+    return (userId === this._session.userId) ?
+      of(You) : this._accounts.get(userId);
+  }
+  private _roleName(name): string {
+    const role = this._session.profile.roles.find(r => r.name === name);
+    return role ? role.title : name;
+  }
+  /**
+   * 
+   * @param action
+   * @param user
+   */
+  private _actionName(action: Action, user: UserInfoYou): string {
+    if (user === You) {
+      const gender = this._session.profile.byGender || this._session.profile.gender;
+      return (gender === 'Male' ? (action.youMale || action.you) :
+        gender === 'Female' ? (action.youFemale || action.you) :
+          action.you) ||
+        action.past ||
+        action.title;
+    }
+    else {
+      const { gender } = user;
+      return (gender === 'Male' ? (action.pastMale || action.past) :
+        gender === 'Female' ? (action.pastFemale || action.past) :
+          action.past)
+        || action.title;
+    }
+  }
+  chat(e: MouseEvent) {
+    const userId = (e.srcElement as HTMLElement).getAttribute('data-info');
+    userId &&
+      this._chat.open(userId);
+  }
+  /**
+   * model version compare, form component in 'compare' view mode
+   * @param log
+   */
+  compare(log: Log) {
+    this.versionSelected.emit(log.time);
+  }
+}
+interface Trace {
+  fyi?: boolean;
+  type: LogType | 'Owner' | 'Pending' | 'Estimate';
+  name?: string;
+  estimate?: boolean;
+  pending?: boolean;
+  action?: string;
+  role?: string;
+  note?: string;
+  duration?: number;
+  durationMin?: number;
+  durationMax?: number;
+  time?: Date;
+  model?: {};
+}

package/src/lib/compose/trace/trace.pane.component.html

@@ -0,0 +1,3 @@
+<bizdoc-trace [model]="model" (versionSelected)="version($event)"></bizdoc-trace>
+
+<bizdoc-flow [model]="model"></bizdoc-flow>

package/src/lib/compose/trace/trace.pane.component.scss

@@ -0,0 +1,5 @@
+:host {
+  padding: 0 8px;
+  display: block;
+  min-width: 400px;
+}

package/src/lib/compose/trace/trace.pane.component.ts

@@ -0,0 +1,43 @@
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { DocumentModel } from '../../core/models';
+import { PanesRouter } from '../../core/slots/router.service';
+import { PaneRef } from '../../core/slots/pane-ref';
+import { TranslateService } from '../../core/translate.service';
+import { FlowViewComponent } from './flow.component';
+import { TraceViewComponent } from './trace.component';
+
+@Component({
+  templateUrl: './trace.pane.component.html',
+  styleUrls: ['./trace.pane.component.scss'],
+  host: {
+    class: 'pane'
+  }
+})
+export class TracePaneComponent implements OnInit {
+  model: DocumentModel<any>;
+  @ViewChild(TraceViewComponent, { static: true }) trace: TraceViewComponent;
+  @ViewChild(FlowViewComponent, { static: true }) flow: FlowViewComponent;
+  constructor(translate: TranslateService,
+    private _pane: PaneRef<TracePaneComponent>,
+    private _router: PanesRouter
+  ) {
+    _pane.title = translate.get('Trace');
+  }
+  ngOnInit(): void {
+    this._pane.dataChange.subscribe(d => {
+      this.model = d['item'];
+      this._pane.group = `#${this.model.number}`;
+    });
+    this._pane.resize.subscribe(() => {
+      this.flow.resize();
+    });
+  }
+  version(time: Date) {
+    this._router.navigate(['..', 'version', new Date(time).valueOf().encodeId()], {
+      relativeTo: this._pane,
+      state: {
+        item: this.model
+      }
+    });
+  }
+}

package/src/lib/compose/version-compare/_compare-theme.scss

@@ -0,0 +1,147 @@
+@mixin compare-theme($theme) {
+  $accent: map-get($theme, accent);
+  $warn: map-get($theme, warn);
+  $background: map-get($theme, background);
+  $green-palette: mat-palette($mat-green);
+  $background-waight: 800;
+  $color-waight: 50;
+  $added-color: mat-color($green-palette, $background-waight);
+  $added-background: mat-color($green-palette, $color-waight);
+
+  $modified-color: mat-color($accent, $background-waight);
+  $modified-background: mat-color($accent, $color-waight);
+
+  $removed-color: mat-color($warn, $background-waight);
+  $removed-background: mat-color($warn, $color-waight);
+
+  .compare {
+    &.added {
+      color: $added-color;
+
+      .label {
+        border-color: $added-color;
+
+        > span {
+          background-color: $added-background;
+
+          &:before {
+            border-top-color: $added-color;
+          }
+        }
+      }
+    }
+
+    &.modified {
+      color: $modified-color;
+
+      .original {
+        font-variant-caps: normal;
+        font-weight: 100;
+        padding-left: 2px;
+      }
+
+      .label {
+        border-color: $modified-color;
+
+        > span {
+          background-color: $modified-background;
+
+          &:before {
+            border-top-color: $modified-color;
+          }
+        }
+      }
+    }
+
+    &.removed {
+      color: $removed-color;
+
+      .label {
+        border-color: $removed-color;
+
+        > span {
+          text-decoration: none;
+          background-color: $removed-background;
+
+          &:before {
+            border-top-color: $removed-color;
+          }
+        }
+      }
+    }
+
+    .label {
+      border-top: 1px dotted;
+      display: flex;
+      flex-direction: row-reverse;
+      font-size: small;
+
+      > span {
+        font-variant-caps: all-small-caps;
+        padding-right: 4px;
+        padding-left: 4px;
+        position: relative;
+
+        &:before, &:after {
+          content: '';
+          position: absolute;
+          width: 0;
+          height: 0;
+        }
+
+        &:before {
+          right: 0;
+          border: 8px solid transparent;
+          border-right: 0;
+        }
+
+        &:after {
+          left: 0;
+          bottom: 0;
+          border: 5px solid transparent;
+          border-bottom-color: mat-color($background, card);
+          border-left: 0;
+        }
+      }
+    }
+  }
+
+  tr.compare.added td {
+    color: $added-color;
+  }
+
+  tr.compare.removed td {
+    color: $removed-color;
+  }
+
+  tr.compare.modified td {
+    color: $modified-color;
+  }
+
+  [dir=rtl] .compare {
+    &.modified {
+      .original {
+        padding-left: 0;
+        padding-right: 2px;
+      }
+    }
+
+    .label {
+      > span {
+        &:before {
+          left: 0;
+          right: auto;
+          border-right: 8px solid transparent;
+          border-left: 0;
+        }
+
+        &:after {
+          left: auto;
+          right: 0;
+          border-left: 5px solid transparent;
+          border-right: 0;
+        }
+      }
+    }
+  }
+}

package/src/lib/compose/version-compare/version-compare.component.ts

@@ -0,0 +1,51 @@
+import { Component, ViewContainerRef, Injector, Input, OnChanges, SimpleChanges } from '@angular/core';
+import { Form, DocumentModel } from '../../core/models';
+import { FormComponent } from '../../core/base';
+import { DOCUMENT_MODEL } from '../../core/mailbox.service';
+import { SessionService } from '../../core/session.service';
+import { BizDocComponentFactoryResolver } from '../../core/component-factory-resolver';
+import { FormRef } from '../../compose/form-ref';
+import { PanesRouter } from '../../core/slots/router.service';
+
+@Component({
+  selector: 'bizdoc-version-compare',
+  template: ''
+})
+/** component*/
+export class VersionCompareComponent implements OnChanges {
+  @Input() model: DocumentModel<any>;
+  @Input() version: Date;
+  private _currentVersion: any;
+  private _baseVersion?: any;
+  private _form: Form;
+  public get form(): Form { return this._form; }
+  public get currentVersion(): any { return this._currentVersion; }
+  public get baseVersion(): any { return this._baseVersion; }
+  /** ctor */
+  constructor(private _session: SessionService,
+    private _cf: BizDocComponentFactoryResolver,
+    private _container: ViewContainerRef,
+    private _router: PanesRouter,
+    private _injector: Injector) {
+  }
+  ngOnChanges(changes: SimpleChanges): void {
+    this._form = this._session.profile.forms.find(f => f.name === this.model.formId);
+    const log = this.model.log.find(l => l.type === 'ModelChange' && l.time === this.version);
+    const idx = this.model.log.indexOf(log);
+    const base = this.model.log.find((l, i) => l.type === 'ModelChange' && i > idx);
+    this._baseVersion = log.model;
+    this._currentVersion = JSON.parse(JSON.stringify(base ? base.model : this.model.model));
+    const componentFactory = this._cf.resolve(this._form.template);
+    const injector = Injector.create([
+      { provide: VersionCompareComponent, useValue: this },
+      {provide:FormRef, useValue: new FormRef(this._router) },
+      { provide: DOCUMENT_MODEL, useValue: this.model } 
+    ], this._injector);
+    this._container.clear();
+    const componentRef = this._container.createComponent(componentFactory, null, injector);
+    const instance = componentRef.instance as FormComponent<any>;
+    instance.mode = 'version';
+    const newModel = Object.assign({}, this.model, { model: this._currentVersion });
+    instance.onBind(newModel, this._baseVersion);
+  }
+}