@bizdoc/core 1.14.8 → 1.14.9

package/src/lib/admin/document-trace/document-trace.component.html

@@ -0,0 +1,96 @@
+<ng-container [ngSwitch]="mode">
+  <!-- diagram -->
+  <div *ngSwitchCase="'diagram'" class="column" fxFlex>
+    <mat-toolbar>
+      <button mat-icon-button (click)="browse()" [bizdocTooltip]="'Back' | translate"><mat-icon class="mat-icon-rtl-mirror">arrow_back</mat-icon></button>
+      |
+      <button mat-icon-button (click)="pan()" [bizdocTooltip]="'Pan' | translate"><span class="e-icons sf-icon-pan"></span></button>
+      <button mat-icon-button (click)="cursor()" [bizdocTooltip]="'Cursor' | translate"><span class="e-icons sf-icon-cursor"></span></button>
+      <span class="divider"></span>
+      <button mat-icon-button (click)="guide()" [bizdocTooltip]="'Help' | translate"><mat-icon>help_outline</mat-icon></button>
+    </mat-toolbar>
+    <div class="row" fxFlex>
+      <!-- timeline -->
+      <div class="timeline" *ngIf="timeline?.items.length > 1" data-help="timeline">
+        <div *ngFor="let date of timeline.items; let last = last" class="item"
+             [class.active]="date.time === timeline.date"
+             (click)="highlightTime(date.time)" matRipple>
+          <div class="title">
+            <ng-container *ngIf="!last || !timeline.estimate; else estimate">
+              <span class="who" *ngIf="userId">
+                {{date.userId | userName | async }}
+              </span>
+              <br />
+              <span class="time">
+                {{date.time | amDateFormat: 'MMM Do H:mm' }}
+              </span>
+            </ng-container>
+          </div>
+          <div class="indicator-container">
+            <div class="indicator"></div>
+          </div>
+        </div>
+      </div>
+      <div fxFlex #diagram dir="ltr">
+      </div>
+    </div>
+  </div>
+  <!-- browse -->
+  <div *ngSwitchDefault fxFlex fxLayout="column" fxFlexFill>
+    <mat-toolbar fxLayout="row">
+      <span class="divider"></span>
+      <button mat-icon-button (click)="openFilter($event)" [bizdocTooltip]="'Filter'|translate"><mat-icon>filter_list</mat-icon></button>
+    </mat-toolbar>
+    <mat-progress-bar [mode]="loading" [style.visibility]="loading ? 'visible':'hidden'"></mat-progress-bar>
+    <!-- table -->
+    <mat-table fxFlex [dataSource]="dataSource" matSort>
+      <!-- Number column -->
+      <ng-container matColumnDef="number">
+        <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Number' | translate}}</mat-header-cell>
+        <mat-cell *matCellDef="let item" class="data-column"> {{item.number}} </mat-cell>
+      </ng-container>
+
+      <!-- Subject column -->
+      <ng-container matColumnDef="subject">
+        <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Subject' | translate}}</mat-header-cell>
+        <mat-cell *matCellDef="let item" class="data-column"> {{item.subject}} </mat-cell>
+      </ng-container>
+      <!-- StateId column -->
+      <ng-container matColumnDef="stateId">
+        <mat-header-cell *matHeaderCellDef mat-sort-header="stateId">{{'Status' | translate }}</mat-header-cell>
+        <mat-cell *matCellDef="let item" class="data-column">
+          <bizdoc-status [stateId]="item.stateId"></bizdoc-status>
+        </mat-cell>
+      </ng-container>
+      <mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row>
+      <mat-row *matRowDef="let item; columns: displayedColumns;"
+               (click)="open(item)">
+      </mat-row>
+    </mat-table>
+    <!-- range -->
+    <ejs-rangenavigator valueType='DateTime' [value]=range labelFormat='MMM-dd' background="transparent"
+                        [theme]="theme" labelIntersectAction='Hide' enableGrouping="false"
+                        groupBy="Years" intervalType='Days'
+                        (changed)='rangeChanged($event)'>
+      <e-rangenavigator-series-collection>
+        <e-rangenavigator-series [dataSource]='rangeData' [fill]="accent" type='Area' xName='date' yName='count' width=2>
+        </e-rangenavigator-series>
+      </e-rangenavigator-series-collection>
+    </ejs-rangenavigator>
+  </div>
+</ng-container>
+<!-- args -->
+<ng-template #args>
+  <form autocomplete="off" [formGroup]="form" fxLayout="column">
+    <mat-form-field>
+      <input matInput type="search" #search formControlName="search" data-help="search" [placeholder]="'Number'|translate" />
+      <mat-icon matSuffix class="mat-icon-rtl-mirror">search</mat-icon>
+    </mat-form-field>
+    <mat-form-field>
+      <bizdoc-select type="forms" [placeholder]="'Form'|translate" formControlName="formId"></bizdoc-select>
+    </mat-form-field>
+  </form>
+</ng-template>
+<ng-template #estimate>
+  {{'Estimate' | translate}}
+</ng-template>

package/src/lib/admin/document-trace/document-trace.component.scss

@@ -0,0 +1,16 @@
+:host {
+  display: flex;
+  -ms-flex-direction: column;
+  -webkit-flex-direction: column;
+  flex-direction: column;
+  flex-grow: 1;
+  height: 100%;
+}
+
+:host ::ng-deep .mat-row {
+  cursor: pointer
+}
+
+form {
+  margin: 8px
+}

package/src/lib/admin/document-trace/document-trace.component.ts

@@ -0,0 +1,526 @@
+import { Component, ViewChild, OnInit, OnDestroy, Inject, HostListener, ElementRef, ChangeDetectorRef, TemplateRef } from '@angular/core';
+import { trigger } from '@angular/animations';
+import {
+  DiagramConstraints, PointPortModel, NodeConstraints, ScrollSettingsModel, SelectorModel, SelectorConstraints,
+  ToolBase, Diagram, MouseEventArgs, ConnectorModel, NodeModel, SnapSettingsModel, DiagramTools, TextModel, ConnectorConstraints, ISelectionChangeEventArgs, LayerModel, ConnectionPointOrigin, LayoutModel
+} from '@syncfusion/ej2-angular-diagrams';
+import { FormBuilder } from '@angular/forms';
+import { MatTableDataSource } from '@angular/material/table';
+import { ProgressBarMode } from '@angular/material/progress-bar';
+import { MatSort } from '@angular/material/sort';
+import { MatInput } from '@angular/material/input';
+import { Subject } from 'rxjs';
+import { takeUntil, debounceTime } from 'rxjs/operators';
+import dayjs from 'dayjs';
+import { IChangedEventArgs, RangeNavigator } from '@syncfusion/ej2-angular-charts';
+import { BizDoc } from '../../core/decorators';
+import { getWarn } from '../../core/functions';
+import { GuideStep } from '../../core/models';
+import { PromptService } from '../../core/prompt.service';
+import { UtilityRef } from '../utility-ref';
+import { DocumentInfo, FormService, RangeModel } from '../form/form.service';
+import { TranslateService } from '../../core/translate.service';
+import { GuideService } from '../../core/guide/guide.service';
+import { PanesRouter } from '../../core/slots/router.service';
+import { PaneRef } from '../../core/slots/pane-ref';
+import { SessionService } from '../../core/session.service';
+import { ConnectorData, DiagramInfo, MoveModel, NodeData, Timeline } from './timeline';
+import { EnterExitRight } from '../../core/animations';
+import { Popup } from '../../core/popup/popup.service';
+import { ElementData, TraceElementComponent } from './trace-element.component';
+import { OpenPolicy } from '../../core/configuration';
+
+const WARNNING_PATH = 'M 13.763735,1.8433735 H 6.3037349 l -5.27,5.27 v 7.4599995 l 5.27,5.27 h 7.4600001 l 5.27,-5.27 V 7.1133735 Z m -3.73,14.2999995 c -0.7200001,0 -1.3000001,-0.58 -1.3000001,-1.3 0,-0.72 0.58,-1.3 1.3000001,-1.3 0.72,0 1.3,0.58 1.3,1.3 0,0.72 -0.58,1.3 -1.3,1.3 z m 1,-4.3 H 9.0337349 V 5.8433735 h 2.0000001 z',
+  JUMP_PATH = 'M 6,18 14.5,12 6,6 Z M 16,6 v 12 h 2 V 6 Z';
+
+function getPorts(): PointPortModel[] {
+  return [
+    { id: 'port1', shape: 'Circle', offset: { x: 0, y: 0.5 } },
+    { id: 'port2', shape: 'Circle', offset: { x: 0.5, y: 1 } },
+    { id: 'port3', shape: 'Circle', offset: { x: 1, y: 0.5 } },
+    { id: 'port4', shape: 'Circle', offset: { x: 0.5, y: 0 } }
+  ];
+}
+
+class InfoTool extends ToolBase {
+  public mouseDown(args: MouseEventArgs): void {
+    if (this.diagram.selectedItems.nodes.length > 0) {
+      const node = this.diagram.selectedItems.nodes[0];
+      super.mouseDown(args)
+      this.tap.next(node);
+      this.inAction = true;
+    }
+  }
+  constructor(public diagram: Diagram, public tap: Subject<NodeModel>) {
+    super(diagram.commandHandler);
+  }
+}
+
+@Component({
+  templateUrl: './document-trace.component.html',
+  styleUrls: ['./document-trace.component.scss'],
+  host: {
+    class: 'pane'
+  }, animations: [trigger('element', EnterExitRight)]
+})
+@BizDoc({ selector: 'bizdoc-trace-utility' })
+/** workflow component*/
+export class DocumentTraceComponent implements OnInit, OnDestroy {
+  @ViewChild('diagram') diagramElement: ElementRef<HTMLDivElement>;
+  theme = this._session.theme.dark ? 'MaterialDark' : 'Material';
+  accent = this._session.getAccent();
+  diagram: Diagram;
+  readonly form = this._fb.group({ search: null, formId: null });
+  model: DiagramInfo;
+  timeline: Timeline;
+  diagramConstraints: DiagramConstraints = DiagramConstraints.Default | DiagramConstraints.Bridging |
+    DiagramConstraints.LineRouting |
+    DiagramConstraints.Pan |
+    DiagramConstraints.Zoom;
+  diagramTool: DiagramTools = DiagramTools.SingleSelect;
+  public readonly layout = {
+    type: 'ComplexHierarchicalTree',
+    connectionPointOrigin: ConnectionPointOrigin.DifferentPoint,
+    horizontalSpacing: 50,
+    enableRouting: true,
+    verticalSpacing: 50,
+    horizontalAlignment: 'Center',
+    connectionDirection: 'Orientation',
+    orientation: 'TopToBottom'
+  } as LayoutModel;
+  readonly snapSettings: SnapSettingsModel = {
+  };
+  readonly scrollSettings: ScrollSettingsModel = {
+    minZoom: .5,
+    maxZoom: 2.5
+  };
+  private readonly _accentColor = this._session.getAccent(800);
+  private readonly _primeryColor = this._session.getPrimery();
+  public readonly selectedItems: SelectorModel = {
+    constraints: SelectorConstraints.UserHandle,
+    userHandles: [
+      {
+        name: 'info',
+        pathData: 'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z',
+        visible: true,
+        offset: 0,
+        side: 'Right',
+        verticalAlignment: 'Bottom',
+        backgroundColor: 'transparent',
+        pathColor: this._primeryColor,
+        size: 40,
+        margin: { top: 0, bottom: 0, left: 0, right: 0 }
+      }
+    ]
+  };
+  public getCustomTool: Function = this.getTool.bind(this);
+  node: NodeModel;
+  private _start: number | Date;
+  private _end: number | Date;
+  private _infoRef: PaneRef<TraceElementComponent>;
+  public getTool(action: string): ToolBase {
+    let tool: ToolBase;
+    if (action === 'info') {
+      tool = new InfoTool(this.diagram, this._tap);
+    }
+    return tool;
+  }
+  mode: 'diagram' | 'browse' | null = 'browse';
+  range: (Date | number)[];
+  rangeData: RangeModel[];
+  loading: ProgressBarMode = 'query';
+  @ViewChild('args') filterArgs: TemplateRef<any>;
+  @ViewChild('search') searchInput: MatInput;
+  dataSource: MatTableDataSource<DocumentInfo>;
+  @ViewChild(MatSort) sort: MatSort;
+  @ViewChild(RangeNavigator) rangeNavigator: RangeNavigator;
+  readonly displayedColumns = ['number', 'subject', 'stateId'];
+  private _highLightedIds: string[] = [];
+  private readonly _tap = new Subject<NodeModel>();
+  private readonly _destroy = new Subject<void>();
+  private readonly _dateschange = new Subject<{ start: number | Date, end: number | Date }>();
+  /** workflow ctor */
+  constructor(
+    @Inject(UtilityRef)
+    private _utilityRef: UtilityRef<DiagramInfo, MoveModel, DiagramInfo, number>,
+    private _service: FormService,
+    private _session: SessionService,
+    private _pane: PaneRef<DocumentTraceComponent>,
+    private _router: PanesRouter,
+    private _sb: PromptService,
+    private _translate: TranslateService,
+    private _popup: Popup,
+    private _guide: GuideService,
+    private _cd: ChangeDetectorRef,
+    private _fb: FormBuilder) {
+  }
+  ngOnInit(): void {
+    const now = dayjs();
+    this._session.themeChange.pipe(takeUntil(this._destroy)).subscribe(t => {
+      this.theme = t.dark ? 'MaterialDark' : 'Material';
+      this.accent = this._session.getAccent();
+      //this.rangeNavigator.refresh();
+    });
+    this._service.range().subscribe(r => this.rangeData = r);
+    this._dateschange.pipe(takeUntil(this._destroy), debounceTime(200)).subscribe(r => {
+      this._start = r.start, this._end = r.end;
+      this._list();
+    });
+    //let r = localStorage.getItem('trace-range');
+
+    this.range = [now.add(-2, 'w').toDate(),
+    now.toDate()];
+    this.form.valueChanges.pipe(takeUntil(this._destroy), debounceTime(200)).
+      subscribe(this._list.bind(this));
+    this._pane.queryParamsChange.subscribe(p => {
+      const { documentId } = p;
+      documentId && this._open((documentId as string).decodeId());
+    });
+    this._pane.resized.pipe(takeUntil(this._destroy)).subscribe(() =>
+      this.diagram?.refresh()
+    );
+  }
+  openFilter(evt: Event) {
+    this._popup.open(this.filterArgs, evt.target as HTMLButtonElement).opened.subscribe(() =>
+      this.searchInput.focus());
+  }
+  private _list() {
+    this.loading = 'query';
+    this._service.findAll({ ...this.form.value, start: this._start, end: this._end }).subscribe(l => {
+      this.dataSource = new MatTableDataSource(l);
+      this.dataSource.sort = this.sort;
+      this.loading = null;
+    });
+  }
+
+  public rangeChanged(args: IChangedEventArgs): void {
+    //localStorage.setItem('trace-range', args.);
+    this._dateschange.next(args);
+  }
+  @HostListener('window:keydown.f1', ['$event'])
+  guide(evt?: Event | KeyboardEvent) {
+    const steps: GuideStep[] = [];
+    if (this.timeline) {
+      if (this.timeline.items.length > 1)
+        steps.push({
+          selector: '[data-help=timeline]',
+          content: this._translate.get('TraceTimelineHelp')
+        });
+      steps.push({
+        selector: 'g[id^=start]',
+        content: this._translate.get('TraceElementHelp'),
+      });
+    }
+    else steps.push({
+      selector: '[data-help=search]',
+      position: 'Below',
+      content: this._translate.get('TraceSearchHelp')
+    });
+    this._guide.start({
+      name: 'trace',
+      steps
+    });
+    evt && evt.preventDefault();
+  }
+  browse() {
+    this._router.navigate([]);
+    this._router.collapse();
+    this.mode = 'browse';
+    this._cd.detectChanges();
+    this.dataSource.sort = this.sort;
+  }
+  private _open(id: number) {
+    this.diagram?.destroy();
+    this.loading = 'buffer';
+    this._utilityRef.populate(id).subscribe(e => {
+      this._highLightedIds = [];
+      this.model = e;
+      this._timeline();
+      this.mode = 'diagram';
+      this.loading = null;
+      this._cd.detectChanges();
+      this.diagram = new Diagram({
+        width: '100%', height: '100%',
+        snapSettings: this.snapSettings,
+        layout: this.layout,
+        getConnectorDefaults: this.connDefaults,
+        selectedItems: this.selectedItems,
+        tool: this.diagramTool,
+        constraints: this.diagramConstraints,
+        getNodeDefaults: this.nodeDefaults,
+        scrollSettings: this.scrollSettings,
+        nodes: e.diagram.nodes,
+        connectors: e.diagram.connectors,
+        selectionChange: this.selectionChange.bind(this)
+      }, this.diagramElement.nativeElement);
+      this._version();
+      this._indicators();
+      this.diagram.fitToPage();
+
+    }, () => {
+      this.loading = null;
+      this._sb.error();
+    });
+  }
+  nodeDefaults = (node: NodeModel): NodeModel => {
+    const { indicator, virtual } = node.addInfo as NodeData || {};
+
+    if (indicator) {
+      node.constraints = NodeConstraints.PointerEvents | NodeConstraints.Tooltip,
+        node.style.strokeWidth = 0,
+        node.width = node.height = 15;
+    }
+    else if (node.id !== 'version') {
+      node.constraints = NodeConstraints.InConnect | NodeConstraints.OutConnect |
+        NodeConstraints.PointerEvents | NodeConstraints.Select;
+      this._decorateNode(node);
+      node.ports = getPorts();
+    }
+    return node;
+  }
+  public connDefaults = (connector: ConnectorModel) => {
+    const { virtual } = connector.addInfo as ConnectorData || {};
+    connector.constraints = ConnectorConstraints.ReadOnly & ~ConnectorConstraints.Select;
+
+    this._decorateConnector(connector);
+  }
+  open(item: DocumentInfo) {
+    this._router.navigate([], { queryParams: { documentId: item.id.encodeId() } });
+  }
+
+  private _timeline() {
+    const items = [], submissions: Date[] = [];
+    let minDate: Date, maxDate: Date, estimate: boolean;
+    this.model.log.forEach(l => {
+      const { time, userId } = l;
+      switch (l.type) {
+        case 'Submit':
+          submissions.push(time);
+          break;
+        default:
+      }
+      if (!items.find(t => t.time === time))
+        items.push({ time, userId });
+      if (!minDate || dayjs(time).isBefore(minDate)) minDate = time;
+      if (!maxDate || dayjs(time).isAfter(maxDate)) maxDate = time;
+      if (l.estimate) estimate = true;
+    });
+    this.timeline = {
+      items, minDate, maxDate,
+      submissions, estimate
+    } as any;
+    this._scope(submissions[submissions.length - 1]);
+  }
+  /**
+   * 
+   * @param date
+   */
+  private _scope(date: Date) {
+    const startDate = this.timeline.submissions.reverse().
+      find(s => s <= date),
+      nextDate = this.timeline.submissions.find(s => s > date),
+      endDate = nextDate ? new Date(new Date(nextDate).valueOf() - 1).toJSON() as any : this.timeline.maxDate;
+    Object.assign(this.timeline, {
+      startDate,
+      endDate,
+      recipients: this.model.recipients.filter(r => r.received >= startDate && r.received <= endDate),
+      log: this.model.log.filter(l => l.time >= startDate && l.time <= endDate)
+    });
+  }
+  private _indicators() {
+    const indicators: NodeModel[] = [];
+    this.model.log.forEach(l => {
+      switch (l.type) {
+        case 'Node':
+          if (l.error)
+            indicators.push({
+              shape: {
+                type: 'Path',
+                data: WARNNING_PATH,
+                align: 'XMinYMax'
+              },
+              tooltip: {
+                content: l.error,
+                position: 'BottomCenter'
+              },
+              style: {
+                fill: getWarn(800)
+              },
+              addInfo: {
+                indicator: true,
+                parentId: l.nodeId
+              }
+            });
+          break;
+        case 'NodeJump':
+          //indicators.push({
+          //  shape: {
+          //    type: 'Path',
+          //    data: JUMP_PATH,
+          //    align: 'XMinYMax'
+          //  },
+          //  style: {
+          //    fill: 'black'
+          //  },
+          //  addInfo: {
+          //    indicator: true,
+          //    parentId: l.nodeId
+          //  }
+          //});
+          break;
+      }
+    });
+    this.diagram.removeLayer('indicators');
+    indicators.forEach(i => {
+      const parent = this.diagram.getNodeObject((i.addInfo as NodeData).parentId);
+      i.offsetX = parent.offsetX + parent.width / 2 - 15,
+        i.offsetY = parent.offsetY + parent.height / 2 - 15;
+      this.diagram.add(i);
+    });
+    this.diagram.addLayer({ id: 'indicators' }, indicators);
+  }
+  private _decorateNode(node: NodeModel) {
+    const log = this.timeline.log.filter(r => r.nodeId === node.id);
+
+    if (log.length) {
+      const recipients = this.timeline.recipients.filter(r => r.nodeId === node.id);
+
+      node.style.strokeColor = this._accentColor;
+      node.style.strokeDashArray = log.find(l => l.estimate) ? '3 2' : '';
+
+      node.style.fill = recipients.find(r => r.pending && !r.estimate) ? this._accentColor : 'white';
+    }
+    else
+      node.style.fill = 'white',
+        node.style.strokeColor = 'darkgray',
+        node.style.strokeDashArray = '6 2';
+  }
+  private _decorateConnector(connector: ConnectorModel) {
+    const log = this.timeline.log.filter(l => l.sourceId === connector.sourceID && l.targetId == connector.targetID);
+
+    if (log.length) {
+      connector.style.strokeColor = connector.targetDecorator.style.strokeColor = connector.targetDecorator.style.fill =
+        this._accentColor;
+      connector.style.strokeDashArray = log.find(l => l.estimate) ? '3 2' : '';
+    }
+    else
+      connector.style.strokeColor = connector.targetDecorator.style.strokeColor = connector.targetDecorator.style.fill = 'darkgray',
+        connector.style.strokeDashArray = '6 2';
+  }
+  private _version() {
+    this.diagram.removeLayer(
+      'version');
+    const version = {
+      id: 'version',
+      shape: {
+        type: 'Text',
+        content: this._translate.get('DiagramVersion', this.model.diagram.version)
+      },
+      offsetY: 5,
+      offsetX: 5,
+      style: {
+        fontSize: 50,
+        opacity: .1
+      },
+      constraints: NodeConstraints.ReadOnly
+    } as TextModel;
+    this.diagram.addLayer({
+      id: 'version',
+      objects: [
+        version]
+    } as LayerModel);
+    this.diagram.add(version);
+  }
+  selectionChange(evt: ISelectionChangeEventArgs) {
+    if (evt.state !== 'Changed') return;
+    this._unhighlight();
+    if (evt.newValue.length) {
+      let node = evt.newValue[0] as NodeModel;
+
+      const { indicator, parentId } = node.addInfo as NodeData || {};
+
+      if (indicator) {
+        node = this.diagram.getNodeObject(parentId);
+        this.diagram.select([node]);
+      }
+      else {
+        const ids = ((node as any).inEdges).concat((node as any).outEdges);
+        ids.push(node.id);
+        this._highlight(ids);
+      }
+      this.diagram.dataBind();
+      if (node) {
+        if (this._infoRef) this._infoRef.close();
+        this._router.navigate(TraceElementComponent, {
+          state: {
+            node,
+            timeline: this.timeline,
+            model: this.model,
+            utilityRef: this._utilityRef,
+          } as ElementData,
+          policy: OpenPolicy.Tab
+        }).then((e: PaneRef) => {
+          this._infoRef = e;
+          e.animation
+        });
+      }
+      else this._router.collapse();
+    }
+    else
+      this.node = null;
+  }
+  public highlightTime(time: Date) {
+    this.timeline.date = time;
+    this.diagram.clearSelection();
+    this._unhighlight();
+    if (time < this.timeline.startDate || time > this.timeline.endDate) {
+      this._scope(time);
+      for (let i = 0; i < this.diagram.nodes.length; i++)
+        this._decorateNode(this.diagram.nodes[i]);
+      for (let i = 0; i < this.diagram.connectors.length; i++)
+        this._decorateConnector(this.diagram.connectors[i]);
+    }
+
+    const ids = this.timeline.log.filter(l => l.nodeId && l.time === time).map(l => l.nodeId).
+      filter((v, i, a) => a.indexOf(v) === i);
+
+    this._highlight(ids);
+    this.diagram.dataBind();
+  }
+
+  pan() {
+    this.diagram.constraints = this.diagram.constraints | DiagramConstraints.Pan;
+    this.diagram.tool = DiagramTools.ZoomPan;
+  }
+  cursor() {
+    this.diagram.constraints = this.diagram.constraints & ~DiagramConstraints.Pan;
+    this.diagram.tool = DiagramTools.SingleSelect;
+  }
+  private _highlight(ids: string[]) {
+    for (let i = 0; i < ids.length; i++) {
+      const obj = this.diagram.getObject(ids[i]) as any;
+      if (obj.sourceID)
+        obj.style.strokeColor =
+          obj.targetDecorator.style.strokeColor =
+          obj.targetDecorator.style.fill = this._primeryColor;
+      else
+        obj.style.strokeColor = this._primeryColor;
+    }
+    this._highLightedIds = ids;
+  }
+
+  private _unhighlight(): void {
+    for (let i: number = this._highLightedIds.length - 1; i >= 0; i--) {
+      const obj = this.diagram.getObject(this._highLightedIds[i]) as any;
+      if (obj.sourceID)
+        this._decorateConnector(obj);
+      else
+        this._decorateNode(obj);
+    }
+    this._highLightedIds = [];
+  }
+  ngOnDestroy(): void {
+    this._destroy.next();
+    this._destroy.complete();
+  }
+}

package/src/lib/admin/document-trace/reassign.dialog.html

@@ -0,0 +1,24 @@
+<h2 mat-dialog-title>{{'Reassign' | translate }}</h2>
+<mat-dialog-content>
+  <form [formGroup]="form" autocomplete="off" fxLayout="column">
+    <mat-form-field>
+      <mat-select placeholder="{{'Who' | translate}}" formControlName="userId" required>
+        <mat-option *ngFor="let u of users$ | async" [value]="u.id">{{u.name}}</mat-option>
+      </mat-select>
+    </mat-form-field>
+    <!--<mat-form-field>
+      <mat-select placeholder="{{'Role' | translate}}" formControlName="role">
+        <mat-option>{{'None'| translate}}</mat-option>
+        <mat-option *ngFor="let r of roles" [value]="r.name">{{r.title}}</mat-option>
+      </mat-select>
+    </mat-form-field>-->
+  <mat-form-field>
+    <textarea matInput cdkTextareaAutosize formControlName="note" placeholder="{{'Note'| translate}}" maxlength="200"></textarea>
+    <mat-hint align="end">{{form.controls['note'].value?.length || 0}} / {{200}}</mat-hint>
+  </mat-form-field>
+  </form>
+</mat-dialog-content>
+<mat-dialog-actions>
+  <button mat-button [mat-dialog-close]="form.value" color="primary" [disabled]="!form.valid">{{'OK' | translate}}</button>
+  <button mat-button mat-dialog-close>{{'Cancel' | translate}}</button>
+</mat-dialog-actions>