@bizdoc/core 1.14.9 → 1.14.12

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

@@ -1,96 +0,0 @@
-<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

@@ -1,16 +0,0 @@
-: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

@@ -1,526 +0,0 @@
-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

@@ -1,24 +0,0 @@
-<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>