@bizdoc/core 1.14.8 → 1.14.9

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

@@ -0,0 +1,33 @@
+import { Component, Input, OnChanges, SimpleChanges } from "@angular/core";
+import { AccountService } from "../../core/account.service";
+import { DocumentModel, RecipientModel, UserInfo } from "../../core/models";
+import { SessionService } from "../../core/session.service";
+
+/** component */
+@Component({
+  selector: 'bizdoc-people',
+  host: { class: 'bizdoc-people' },
+  template: `<bizdoc-avatar *ngFor="let p of people" [person]="p"></bizdoc-avatar>`
+})
+export class PeopleComponent implements OnChanges {
+  @Input() model!: DocumentModel<any> | RecipientModel<any>;
+  people: UserInfo[];
+  private readonly _userIds: string[] = [];
+  private readonly _me: string;
+  constructor(
+    private _accounts: AccountService,
+    session: SessionService
+  ) {
+    this._me = session.profile.byId || session.profile.userId;
+  }
+  ngOnChanges(changes: SimpleChanges): void {
+    this._push(this.model.ownerId, this.model.ownerById, (this.model as RecipientModel).senderId);
+    this.model.recipients.reverse().forEach(r =>
+      this._push(r.userId, r.byId, r.substituteId));
+    this._accounts.getAll(this._userIds).subscribe(us =>
+      this.people = us);
+  }
+  private _push(...userId: string[]) {
+    userId.forEach(u => u && this._userIds.indexOf(u) < 0 && u !== this._me && this._userIds.push(u));
+  }
+}

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

@@ -0,0 +1,72 @@
+import { Directive } from "@angular/core";
+import dayjs from 'dayjs';
+import { Observable, Subject } from "rxjs";
+import { takeUntil } from "rxjs/operators";
+import { NodeInfo, DocumentModel } from "../../core/models";
+import { HubService } from "../../core/hub.service";
+import { OnChanges } from "@angular/core";
+
+export const START_NODE = 'start';
+
+export const You = 'you';
+
+@Directive()
+export abstract class TraceBase implements OnChanges {
+  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)).
+      subscribe(e => 
+        e.model.id === this.model.documentId && this.refresh()
+      )
+  }
+  onLoad(): Observable<any> | null {
+    return null;
+  }
+  public refresh() {
+    this.ngOnChanges(null);
+  }
+  abstract ngOnChanges(changes);
+  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 = dayjs(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,57 @@
+<div class="nav-toolbar row">
+  <span class="divider"></span>
+  <button mat-icon-button [matMenuTriggerFor]="menu" [bizdocTooltip]="'ShowAll'|translate"><mat-icon>filter_list</mat-icon></button>
+  <mat-menu #menu> 
+    <button mat-menu-item (click)="showMode='route'">
+      <mat-icon>{{ showMode === 'route' ? 'check':'' }}</mat-icon>
+      <span>{{'Route' | translate }}</span>
+    </button>
+    <button mat-menu-item (click)="showMode='active'">
+      <mat-icon>{{ showMode === 'active' ? 'check':'' }}</mat-icon>
+      <span>{{'ActiveRoute' | translate }}</span>
+    </button>
+    <button mat-menu-item (click)="showMode='everything'">
+      <mat-icon>{{ showMode === 'everything' ? 'check':'' }}</mat-icon>
+      <span>{{'Everything' | translate }}</span>
+    </button>
+  </mat-menu>
+</div>
+<table class="mat-table" @list>
+  <tbody role="rowgroup">
+    <tr class="mat-row" *ngFor="let l of data" @item>
+      <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">
+          <ng-container *ngSwitchCase="'ActionTaken'">
+            <span [innerHTML]="l.action | sanitizeHtml" (click)="chat($event)" class="to"></span>
+          </ng-container>
+          <span *ngSwitchCase="'Submit'">{{'Issued' | translate}}</span>
+          <span *ngSwitchCase="'Pending'">{{'IsPending' | translate}}</span>
+          <span *ngSwitchCase="'CheckOut'">{{'CheckedIn' | translate : l.fileName}}</span>
+          <span *ngSwitchCase="'CheckIn'">{{'CheckedOut' | translate : l.fileName}}</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" [bizdocTooltip]="l.durationMax|amDurationFormat">{{'EstimateTime'| translate : (l.durationMax | amDuration:'s')}}</span>
+          <span *ngIf="l.durationMax && l.durationMax !== l.durationMin"
+                [bizdocTooltip]="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" [bizdocTooltip]="l.duration|amDurationFormat" class="duration">&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.type==='ModelChange'" (click)="compare(l)" [bizdocTooltip]="'Compare'|translate" bizdocTooltipPosition="start"><mat-icon>more_horiz</mat-icon></button>
+      </td>
+    </tr>
+  </tbody>
+</table>

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

@@ -0,0 +1,21 @@
+:host {
+  width: 100%;
+}
+
+table {
+  width: 100%;
+  background: transparent;
+
+  td {
+    padding: 0 4px 0 4px;
+  }
+}
+
+
+.duration {
+  white-space: nowrap
+}
+
+.to{
+    /*text-transform:lowercase*/
+}

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

@@ -0,0 +1,388 @@
+import { Component, Input, Output, EventEmitter, OnChanges, SimpleChanges } from "@angular/core";
+import dayjs from 'dayjs';
+import { CalendarSpec } from "../../core/pipes/calendar.pipe";
+import { UserInfo, LogType, DocumentModel, Action, Gender } from "../../core/models";
+import { SessionService } from "../../core/session.service";
+import { TranslateService } from "../../core/translate.service";
+import { AccountService } from "../../core/account.service";
+import { TraceBase, You } from "./trace.base";
+import { HubService } from "../../core/hub.service";
+import { ChatInfo } from "../../chat/chat-info";
+import { itemAnimation, listAnimation } from "../../core/animations";
+
+/** component showing trace table */
+@Component({
+  selector: 'bizdoc-trace',
+  templateUrl: 'trace.component.html',
+  styleUrls: ['trace.component.scss'],
+  animations: [listAnimation, itemAnimation]
+})
+export class TraceViewComponent extends TraceBase implements OnChanges {
+  @Input() model: DocumentModel<any>;
+  @Output() readonly versionSelected = new EventEmitter<Date>();
+  data: Trace[] = [];
+  private _data: Trace[];
+  readonly CALENDAR_SPEC: CalendarSpec = {
+    lastDay: this._translate.get('YesterdayAt', 'HH:mm'),
+    lastWeek: 'dddd HH:mm',
+    sameDay: this._translate.get('TodayAt', 'HH:mm'),
+    sameElse: 'MMM D HH:mm'
+  };
+  constructor(private _session: SessionService,
+    private _translate: TranslateService,
+    private _accounts: AccountService,
+    private _chat: ChatInfo,
+    hub: HubService) {
+    super(hub);
+    this._showMode = localStorage.getItem('traceMode') as ShowMode || 'everything';
+  }
+  ngOnChanges(_changes: SimpleChanges): void {
+    this._initialize();
+  }
+  private async _initialize() {
+    const { issued, log, recipients, attachments } = this.model;
+
+    const me = this;
+    /**
+     * account info as promise
+     * @param id
+     */
+    function profileOf(id) {
+      return me._accounts.get(id).toPromise();
+    }
+    /**
+     * user name, chat anchor tag
+     * @param user
+     */
+    function nameOf(user: UserInfo): string {
+      return me._chat.format(user);
+    }
+
+    async function actionBy(action: Action, gender: Gender | 'you', id?: number) {
+      let name: string;
+      if (gender === You) {
+        const { gender } = me._session;
+        name = (gender === 'Male' ? (action.youMale || action.you) :
+          gender === 'Female' ? (action.youFemale || action.you) :
+            action.you) ||
+          action.past ||
+          action.title;
+      }
+      else
+        name = (gender === 'Male' ? (action.pastMale || action.past) :
+          gender === 'Female' ? (action.pastFemale || action.past) :
+            action.past)
+          || action.title;
+
+      if (id) {
+        const to = me.model.recipients.filter(r => r.originId === id);
+        if (to.length) {
+          const users = [];
+          for (let who of to) {
+            let profile = await profileOf(who.substituteId || who.userId);
+            users.push(nameOf(profile));
+          }
+          return me._translate.get('ActionTo', name, me._translate.join(users));
+        }
+      }
+      return name;
+    }
+    const trace: Trace[] = [];
+
+    for (let l of log) {
+      let action: Action;
+
+      switch (l.type) {
+        case 'ActionTaken':
+          {
+            action = this._session.profile.actions.find(a => a.name === l.action);
+            if (action.loggable === false)
+              continue;
+            break;
+          }
+        case 'CheckIn':
+        case 'CheckOut':
+          break;
+        case 'ModelChange':
+          break;
+        case 'Submit':
+          if (l.estimate) continue;
+          break;
+        default:
+          continue;
+      }
+
+      let step = {
+        estimate: l.estimate,
+        time: l.time,
+        type: l.type,
+        duration: l.duration,
+        note: l.note,
+        state: l.state
+      } as Trace;
+
+      trace.push(step);
+
+      switch (l.type) {
+        case 'CheckIn':
+        case 'CheckOut':
+          let attachment = attachments.find(f => f.id === l.fileId);
+          step.fileName = attachment.fileName;
+          break;
+      }
+
+      if (l.recipientId) {
+        let recipient = recipients.find(r => r.id === l.recipientId);
+        if (recipient.role)
+          step.role = this._roleName(recipient.role);
+        step.fyi = recipient.fyi;
+
+        if (recipient.substituteId) {
+          if (recipient.byId) {
+            if (recipient.byId === this._session.userId) {
+              let who = await profileOf(recipient.userId);
+              if (recipient.substituteId === this._session.userId)
+                step.name = this._translate.get('ByYou', nameOf(who));
+              else {
+                let substituting = await profileOf(recipient.substituteId);
+                step.name = this._translate.personalize('SubstitutingByYou', who.gender, nameOf(who), nameOf(substituting));
+              }
+              if (action)
+                step.action = await actionBy(action, You, recipient.id);
+            }
+            else {
+              let by = await profileOf(recipient.byId),
+                who = await profileOf(recipient.userId),
+                substituting = await profileOf(recipient.substituteId);
+              step.name = this._translate.get('SubstitutingBy', nameOf(who), nameOf(substituting), nameOf(by));
+              if (by.role)
+                step.role = by.role;
+              if (action)
+                step.action = await actionBy(action, by.gender, recipient.id);
+            }
+          }
+          else if (recipient.userId === this._session.userId) {
+            let substituting = await profileOf(recipient.substituteId);
+            step.name = this._translate.personalize('YouSubstituting', this._session.gender, nameOf(substituting));
+            if (action)
+              step.action = await actionBy(action, this._session.gender, recipient.id);
+          }
+          else if (recipient.substituteId === this._session.userId) {
+            let who = await profileOf(recipient.userId);
+            step.name = this._translate.personalize('SubstitutingForYou', who.gender, nameOf(who));
+            if (action)
+              step.action = await actionBy(action, who.gender, recipient.id);
+          }
+          else {
+            let who = await profileOf(recipient.userId),
+              substituting = await profileOf(recipient.substituteId);
+            step.name = this._translate.personalize('Substituting', who.gender, nameOf(who), nameOf(substituting));
+            if (who.role)
+              step.role = who.role;
+            if (action)
+              step.action = await actionBy(action, who.gender, recipient.id);
+          }
+        }
+        else if (recipient.byId) {
+          if (recipient.userId === this._session.userId) {
+            let by = await profileOf(recipient.byId);
+            step.name = this._translate.get('YouBy', nameOf(by));
+            if (action)
+              step.action = await actionBy(action, by.gender, recipient.id);
+          }
+          else {
+            let who = await profileOf(recipient.userId);
+            if (recipient.byId === this._session.userId) {
+              step.name = this._translate.get('ByYou', nameOf(who));
+              if (action)
+                step.action = await actionBy(action, You, recipient.id);
+            }
+            else {
+              let by = await profileOf(recipient.byId);
+              step.name = this._translate.get('By', nameOf(who), nameOf(by));
+              if (by.role)
+                step.role = by.role;
+              if (action)
+                step.action = await actionBy(action, by.gender, recipient.id);
+            }
+          }
+        }
+        else {
+          if (recipient.userId === this._session.userId) {
+            step.name = this._translate.get('You');
+            if (action)
+              step.action = await actionBy(action, You, recipient.id);
+          }
+          else {
+            let who = await profileOf(recipient.userId);
+            step.name = nameOf(who);
+            if (who.role)
+              step.role = who.role;
+            if (action)
+              step.action = await actionBy(action, who.gender, recipient.id);
+          }
+        }
+      }
+      else if (l.byId) {
+        let who = await profileOf(l.userId);
+        if (l.byId === this._session.profile.byId)
+          step.name = this._translate.get('ByYou', nameOf(who));
+        else {
+          let by = await profileOf(l.byId);
+
+          step.name = this._translate.get('By', nameOf(who), nameOf(by));
+
+          if (by.role)
+            step.role = by.role;
+        }
+      }
+      else if (l.userId === this._session.userId)
+        step.name = this._translate.get('You');
+      else {
+        let who = await profileOf(l.userId);
+        step.name = nameOf(who);
+        if (who.role)
+          step.role = who.role;
+      }
+    }
+    for (let recipient of recipients) {
+      if (!recipient.pending && !recipient.estimate) continue;
+
+      let step = {
+        time: recipient.received,
+        fyi: recipient.fyi,
+        estimate: recipient.estimate,
+        pending: recipient.pending,
+        action: recipient.action,
+        note: recipient.note,
+        type: recipient.estimate ? 'Estimate' : 'Pending',
+        duration: recipient.pending ? dayjs().diff(recipient.received, 's') : null,
+        role: recipient.role ? this._roleName(recipient.role) : null
+      } as Trace;
+
+      if (recipient.nodeId) {
+        const node = this.model.workflow.nodes.find(n => n.id === recipient.nodeId);
+        if (node) {
+          if (recipient.estimate) {
+            const { min, max } = super._estimateTime(node);
+            if (max)
+              step.durationMin = min,
+                step.durationMax = max;
+          }
+        }
+      }
+
+      if (recipient.substituteId) {
+        if (recipient.substituteId === this._session.userId) {
+          let who = await profileOf(recipient.userId);
+          step.name = this._translate.personalize('SubstitutingForYou', who.gender, nameOf(who));
+        }
+        else if (recipient.userId === this._session.userId) {
+          let substituting = await profileOf(recipient.substituteId);
+          step.name = this._translate.personalize('YouSubstituting', this._session.gender, nameOf(substituting));
+        }
+        else {
+          let who = await profileOf(recipient.userId),
+            substituting = await profileOf(recipient.substituteId);
+          step.name = this._translate.personalize('Substituting', who.gender, nameOf(who), nameOf(substituting));
+          if (who.role)
+            step.role = who.role;
+        }
+      }
+      else if (recipient.byId) {
+        let who = await profileOf(recipient.userId);
+        if (recipient.byId === this._session.userId)
+          step.name = this._translate.get('ByYou', nameOf(who));
+        else {
+          let by = await profileOf(recipient.byId);
+          step.name = this._translate.get('By', nameOf(who), nameOf(by));
+          if (by.role)
+            step.role = by.role;
+        }
+      }
+      else if (recipient.escalated) {
+        let escalation = this.model.log.find(l => l.type === 'Escalation' && l.recipientId === recipient.originId);
+
+        let to = await profileOf(recipient.userId);
+        if (escalation.userId === this._session.userId)
+          step.name = this._translate.get('EscalatedByYou', nameOf(to));
+        else {
+          let who = await profileOf(escalation.userId);
+          step.name = this._translate.get('EscalatedBy', nameOf(who),
+            nameOf(to));
+        }
+      }
+      else {
+        if (recipient.userId === this._session.userId)
+          step.name = this._translate.get('You');
+        else {
+          let who = await profileOf(recipient.userId);
+          step.name = nameOf(who);
+          if (who.role)
+            step.role = who.role;
+        }
+      }
+      trace.push(step);
+    }
+
+    this._data = trace.sort((a, b) => a.time > b.time ? 1 : a.time === b.time ? 0 : -1);
+
+    this._filter();
+  }
+  private _filter() {
+    switch (this._showMode) {
+      case 'active':
+        this.data = this.model.issued ? this._data.filter(l => l.time >= this.model.issued) : this._data;
+        break;
+      case 'route':
+        this.data = this._data.filter(l => l.type === 'ActionTaken' || l.type === 'Estimate' || l.type === 'Pending');
+        break;
+      default:
+        this.data = this._data;
+        break;
+    }
+  }
+  private _showMode: ShowMode;
+
+  public get showMode() {
+    return this._showMode;
+  }
+  public set showMode(value: ShowMode) {
+    this._showMode = value;
+    localStorage.setItem('traceMode', value);
+    this._data && this._filter();
+  }
+  private _roleName(name): string {
+    const role = this._session.profile.roles.find(r => r.name === name);
+    return role ? role.title : name;
+  }
+  chat(e: MouseEvent) {
+    const userId = (e.srcElement as HTMLElement).getAttribute('data-info');
+    userId &&
+      this._chat.open(userId);
+  }
+  /**
+   * model version compare
+   * @param log
+   */
+  compare(log: Trace) {
+    this.versionSelected.emit(log.time);
+  }
+}
+interface Trace {
+  fyi?: boolean;
+  type: LogType | 'Pending' | 'Estimate';
+  name?: string;
+  estimate?: boolean;
+  pending?: boolean;
+  action?: string;
+  role?: string;
+  note?: string;
+  duration?: number;
+  durationMin?: number;
+  durationMax?: number;
+  fileName?: string;
+  time?: Date;
+}
+
+declare type ShowMode = 'everything' | 'active' | 'route';

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,47 @@
+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 => {
+      if (this.model == d['item']) {
+        this.trace.refresh();
+        this.flow.refresh();
+      }
+      this.model = d['item'];
+      this._pane.group = `#${this.model.number}`;
+    });
+    this._pane.resized.subscribe(() => {
+      this.flow.resize();
+    });
+  }
+  version(time: Date) {
+    this._router.navigate(['..', 'version', new Date(time).valueOf().encodeId()], {
+      relativeTo: this._pane,
+      state: {
+        item: this.model
+      }
+    });
+  }
+}