@bizdoc/core 1.8.8 → 1.8.9

package/src/lib/admin/diff/_configuration-diff-theme.scss

@@ -0,0 +1,72 @@
+@mixin configuration-diff-theme($theme) {
+  $accent: map-get($theme, accent);
+  $background: map-get($theme, background);
+  $foreground: map-get($theme, foreground);
+  $is-dark-theme: map-get($theme, is-dark);
+
+  .configuration-diff {
+    padding: 8px;
+    direction: ltr;
+
+    .scope {
+      .scope-content {
+        margin-left: 8px;
+      }
+
+      .alternate, .brackets {
+        cursor: pointer;
+      }
+
+      .alternate {
+        display: none;
+      }
+
+      &.collapse {
+        .alternate {
+          display: inline;
+        }
+
+        .scope-content {
+          display: none;
+        }
+      }
+
+      .structure {
+        font-weight: 500;
+      }
+
+      .color {
+        width: 10px;
+        height: 10px;
+        display: inline-block;
+      }
+
+      .value:hover {
+        -moz-text-decoration-line: underline;
+        text-decoration-line: underline;
+        -moz-text-decoration-style: dotted;
+        text-decoration-style: dotted;
+      }
+
+      &.focus {
+        /*        background: mat-color($background, 'hover');
+*/
+        > .brackets {
+          border: 1px solid black;
+        }
+      }
+    }
+  }
+
+  .timeline {
+    .mat-list-item.active:after {
+      content: '\00a0';
+      background: mat-color($accent);
+      width: 6px;
+      height: 100%;
+      top: 0;
+      position: absolute;
+      right: 0;
+    }
+  }
+}

package/src/lib/admin/diff/configuration-diff.component.html

@@ -0,0 +1,24 @@
+<mat-toolbar>
+  <button mat-icon-button (click)="properties.toggle()" [matTooltip]="'Collapse' | translate"><mat-icon>view_sidebar</mat-icon></button>
+  <span class="divider"></span>
+</mat-toolbar>
+<mat-sidenav-container autosize fxFlex>
+  <mat-sidenav-content>
+    <mat-progress-bar mode="buffer" [value]=progress [bufferValue]=0 [style.visibility]="progress > 0 && progress < 100 ? 'visible':'hidden'"></mat-progress-bar>
+    <div [innerHTML]="html | sanitizeHtml" (mouseleave)="focusOut()" (mousemove)="focusIn($event)" class="configuration-diff" (click)="collapse($event)" #contents></div>
+  </mat-sidenav-content>
+  <mat-sidenav mode="side" opened #properties class="timeline">
+    <mat-nav-list *ngIf="versions">
+      <ng-container *ngFor="let v of versions; let index = index; let last = last">
+        <mat-list-item (click)="compare(index)" [class.active]="v.time === activeDate" *ngIf="!last">
+          <h3 matLine>
+            {{(v.author || 'System') | userName | async }}
+          </h3>
+          <p class="time" matLine>
+            {{v.time | amCalendar: null: CALENDAR_SPEC }}
+          </p>
+        </mat-list-item>
+      </ng-container>
+    </mat-nav-list>
+  </mat-sidenav>
+</mat-sidenav-container>

package/src/lib/admin/diff/configuration-diff.component.scss

@@ -0,0 +1,16 @@
+:host {
+  flex: 1 1 auto;
+}
+
+.timeline {
+  border: none;
+  width: 150px;
+
+  .time {
+    font-size: 12px !important;
+  }
+}
+
+:host ::ng-deep .mat-drawer-inner-container {
+  overflow: auto;
+}

package/src/lib/admin/diff/configuration-diff.component.ts

@@ -0,0 +1,549 @@
+import { Component, OnInit, OnDestroy, Inject, ViewChild, ElementRef } from '@angular/core';
+import { Subject } from 'rxjs';
+import { debounceTime, takeUntil } from 'rxjs/operators';
+import { CalendarSpec } from 'moment';
+import { BizDoc } from '../../core/decorators';
+import { isArray, isObject, isString } from '../../core/functions';
+import { UtilityComponent } from '../../core/base';
+import { UtilityRef } from '../utility-ref';
+import { PromptService } from '../../core/prompt.service';
+import { AccountService } from '../../core/account.service';
+import { TranslateService } from '../../core/translate.service';
+import { DatasourceService } from '../../core/datasource.service';
+
+const IGNORE_NODE = ['author', 'history', 'targetDecorator', 'sourceDecorator', 'offsetX', 'offsetY', 'rotateAngle', 'width', 'height',
+  'style', 'segments', 'offset', 'targetPortID', 'sourcePortID', 'horizontalAlignment', 'verticalAlignment',
+  'connectors.constraints', 'nodes.constraints', 'annotations.constraints', 'annotations.id'],
+  SVG_PATH_REGEX = /^[mM].+[zZ]$/,
+  INDEX_PROPERTY = ['name', 'id'], DATA_TYPE = 'dataType', ORIGINAL_VALUE = '_', STATE = '__';
+
+
+@Component({
+  templateUrl: './configuration-diff.component.html',
+  styleUrls: ['./configuration-diff.component.scss'],
+  host: {
+    class: 'pane'
+  }
+})
+@BizDoc({ selector: 'bizdoc-configuration-diff' })
+/** component*/
+export class SystemDiffComponent implements OnInit, OnDestroy, UtilityComponent {
+  @ViewChild('contents') contents: ElementRef<HTMLDivElement>;
+  html = '';
+  versions: VersionInfo[];
+  activeDate: Date;
+  progress = 0;
+  none: boolean;
+  private _working = new Subject<number>();
+  readonly CALENDAR_SPEC: CalendarSpec = {
+    lastDay: `[${this._translate.get('Yesterday')}] HH:mm`,
+    lastWeek: 'ddd HH:mm',
+    sameDay: 'HH:mm',
+    sameElse: 'MMM D HH:mm'
+  };
+  private readonly _destroy = new Subject<void>();
+  /** ctor */
+  constructor(private _sb: PromptService,
+    @Inject(UtilityRef) private _utilityRef: UtilityRef<ConfigurtionInfo[], CompareModel, VersionInfo[], number>,
+    private _translate: TranslateService,
+    private _ds: DatasourceService,
+    private _accounts: AccountService) {
+  }
+  ngOnInit(): void {
+    // delay progress
+    this._working.pipe(takeUntil(this._destroy), debounceTime(100)).subscribe(v => v && (this.progress = v));
+    this._working.next(50);
+    // populate versions
+    this._utilityRef.populate().subscribe(e => {
+      this.versions = e;
+      this._working.next(100);
+      e.length > 1 &&
+        this.compare(0);
+    }, () => this._sb.error());
+  }
+  /**
+   * 
+   * @param index
+   */
+  compare(index: number) {
+    const { time: date1 } = this.versions[index],
+      { time: date2 } = this.versions[index + 1];
+    this._working.next(25);
+    this._utilityRef.execute({ date1, date2 }).subscribe(r => {
+      this.html = '';
+      this._working.next(50);
+      this.activeDate = date1;
+      const results = this._compare(r[0], r[1]);
+      if (results) results.then(d => {
+        this._working.next(75);
+        this.html = this._generate(d);
+        this._scrollTop();
+        this._working.next(100);
+        this.none = false;
+      });
+      else {
+        this._working.next(100);
+        this.none = true;
+      }
+    }, () => this._sb.error());
+  }
+  private _scrollTop() {
+    setTimeout(() => this.contents.nativeElement.parentElement.scroll({ top: 0, behavior: 'smooth' }));
+  }
+
+  /**
+   * 
+   * @param a
+   * @param b
+   * @param diff
+   * @param scope
+   */
+  private _compare(a: {} | [], b: {} | [], diff: {} | [] = {}, scope: Scope = { nodes: [] }): Promise<{} | []> | false {
+    const promises: Promise<any>[] = [];
+    if (isArray(a)) {
+      a.forEach((e, i) => {
+        const bVal = b[i];
+        if (e === bVal) return;
+        else if (isObject(e)) {
+          const aJson = JSON.stringify(e), bJson = JSON.stringify(bVal);
+          if (aJson === bJson) return;
+          if (bVal && this._match(bVal, e)) {
+            const obj = {};
+            const promise = this._compare(e, bVal, obj, { nodes: scope.nodes, type: e[DATA_TYPE] || scope.type });
+            if (!promise) return;
+            (diff as any[]).push(this._rekey(e, obj, scope.nodes));
+            promises.push(promise);
+          }
+          else if ((b as []).find(b => JSON.stringify(b) === aJson)) return;
+          else {
+            const bObj = (b as []).find(b => this._match(b, e));
+            if (bObj) {
+              const obj = {};
+              const promise = this._compare(e, bObj, obj, { nodes: scope.nodes, type: e[DATA_TYPE] || scope.type });
+              if (!promise) return;
+              (diff as any[]).push(this._rekey(e, obj, scope.nodes));
+              promises.push(promise);
+            }
+            else {
+              const obj = isArray(e) ? [] : {};
+              const promise = this._branch(e, obj, { nodes: scope.nodes, type: e[DATA_TYPE] || scope.type });
+              if (!promise) return;
+              const length = (diff as any[]).push(obj);
+              diff[STATE + (length - 1).toString()] = ChangeState.Added;
+              promises.push(promise);
+            }
+          }
+        }
+        else if (!(b as []).find(b => b == e)) {
+          const length = (diff as any[]).push(e);
+          if (scope.nodes.indexOf('positions') > -1) {
+            const promise = this._accounts.get(e).toPromise().then(v =>
+              diff[length - 1] = v.name);
+            promises.push(promise);
+          }
+          diff[STATE + (length - 1).toString()] = ChangeState.Added;
+        }
+      });
+      (b as []).forEach((e, i) => {
+        if (e !== a[i]) {
+          if (isObject(e)) {
+            const bJson = JSON.stringify(e);
+            if (bJson === JSON.stringify(a[i]) || (a as []).find(a => JSON.stringify(a) === bJson ||
+              this._match(a, e))) return;
+            const obj = isArray(e) ? [] : {};
+            const promise = this._branch(e, obj, { nodes: scope.nodes, type: e[DATA_TYPE] || scope.type });
+            if (!promise) return;
+            const length = (diff as any[]).push(obj);
+            diff[STATE + (length - 1).toString()] = ChangeState.Removed;
+            promises.push(promise);
+          }
+          else if (!(a as []).find(a => a == e)) {
+            const length = (diff as []).push(e);
+            if (scope.nodes.indexOf('positions') > -1) {
+              const promise = this._accounts.get(e).toPromise().then(v =>
+                diff[length - 1] = v.name);
+              promises.push(promise);
+            }
+            diff[STATE + (length - 1).toString()] = ChangeState.Removed;
+          }
+        }
+      });
+      if (!(diff as any[]).length) return false;
+    }
+    else {
+      Object.keys(a).forEach(k => {
+        if (this._ignore(k, scope.nodes)) return;
+        const aVal = a[k], bVal = b[k];
+        if (aVal === bVal) return;
+        else if (isObject(aVal)) {
+          if (JSON.stringify(aVal) === JSON.stringify(bVal)) return;
+          if (bVal !== undefined && isArray(bVal) !== isArray(aVal)) {
+            diff[k] = aVal;
+            diff[ORIGINAL_VALUE + k] = isArray(bVal) ? bVal.join(', ') : bVal;
+            diff[STATE + k] = ChangeState.Modified;
+          }
+          else {
+            let obj = isArray(aVal) ? [] : {},
+              extra = { type: aVal[DATA_TYPE] || scope.type, nodes: [...scope.nodes, k] } as Scope;
+            if (bVal !== undefined) {
+              const promise = this._compare(aVal, bVal, obj, extra);
+              if (!promise) return;
+              if (!isArray(aVal))
+                obj = this._rekey(aVal, obj, scope.nodes);
+              promises.push(promise);
+            }
+            else {
+              const promise = this._branch(aVal, obj, extra);
+              if (!promise) return;
+              promises.push(promise);
+            }
+
+            if (scope.nodes.indexOf('positions') > -1) {
+              diff[ORIGINAL_VALUE + k] = aVal;
+              const promise = this._ds.get(scope.type, k).toPromise().then(v => {
+                const name = isString(v) ? v : v[Object.keys(v)[0]];
+                diff[name] = obj
+                if (bVal === undefined) diff[STATE + name] = ChangeState.Added;
+              });
+              promises.push(promise);
+            }
+            else {
+              diff[k] = obj;
+              if (bVal === undefined) diff[STATE + k] = ChangeState.Added;
+            }
+          }
+        }
+        else {
+          diff[k] = aVal;
+          if (k === 'userId') {
+            const promise = this._accounts.get(aVal).toPromise().then(v =>
+              diff[k] = v.name);
+            promises.push(promise);
+          }
+          if (bVal !== undefined) {
+            if (k === 'userId') {
+              const promise = this._accounts.get(bVal).toPromise().then(v =>
+                diff[ORIGINAL_VALUE + k] = v.name);
+              promises.push(promise);
+            }
+            else
+              diff[ORIGINAL_VALUE + k] = bVal;
+            diff[STATE + k] = ChangeState.Modified;
+          }
+          else
+            diff[STATE + k] = ChangeState.Added;
+        }
+      });
+      Object.keys(b).forEach(k => {
+        if (a[k] !== undefined || this._ignore(k, scope.nodes)) return;
+        const bVal = b[k];
+        if (scope.nodes.indexOf('positions') > -1) {
+          const obj = [];
+          diff[ORIGINAL_VALUE + k] = bVal;
+          const promise = this._ds.get(scope.type, k).toPromise().then(v => {
+            const name = isString(v) ? v : v[Object.keys(v)[0]];
+            diff[name] = obj;
+            diff[STATE + name] = ChangeState.Removed;
+          });
+          promises.push(promise);
+          bVal && (bVal as any[]).forEach((e, i) => {
+            const promise = this._accounts.get(e).toPromise().then(v =>
+              obj[i] = v.name);
+            promises.push(promise);
+          });
+        }
+        else {
+          if (isObject(bVal)) {
+            const obj = isArray(bVal) ? [] : {};
+            const promise = this._branch(bVal, obj, { type: bVal[DATA_TYPE] || scope.type, nodes: [...scope.nodes, k] });
+            if (!promise) return;
+            diff[k] = obj;
+            promise && promises.push(promise);
+          }
+          else {
+            diff[k] = bVal;
+            if (k === 'userId') {
+              const promise = this._accounts.get(bVal).toPromise().then(v =>
+                diff[k] = v.name);
+              promises.push(promise);
+            }
+          }
+          diff[STATE + k] = ChangeState.Removed;
+        }
+      });
+      if (!Object.keys(diff).length) return false;
+    }
+    return promises.length ? Promise.all(promises).then(() => diff) : Promise.resolve(diff);
+  }
+  /**
+   * 
+   * @param obj1
+   * @param obj2
+   */
+  private _match(obj1: any, obj2: any) {
+    return INDEX_PROPERTY.findIndex(k => obj1[k] && obj1[k] === obj2[k]) > -1;
+  }
+
+  /**
+   * 
+   * @param base
+   * @param obj
+   * @param nodes
+   */
+  private _rekey(base: {}, obj: {}, nodes: string[]) {
+    const newObj = {};
+    let ok = false;
+    INDEX_PROPERTY.forEach(k => {
+      if (this._ignore(k, nodes)) return;
+      if (base[k]) {
+        newObj[k] = base[k];
+        ok = true;
+      }
+    });
+    return ok ? Object.assign(newObj, obj) : obj;
+  }
+
+  /**
+   * 
+   * @param name
+   * @param nodes
+   */
+  private _ignore(name: string, nodes: string[]) {
+    return IGNORE_NODE.indexOf(name) > -1 || IGNORE_NODE.indexOf(nodes[nodes.length - 1] + '.' + name) > -1;
+  }
+  /**
+   * 
+   * @param base
+   * @param prestine
+   * @param scope
+   */
+  private _branch(base: {} | [], prestine: {} | [], scope: Scope): Promise<any> | false {
+    const promises: Promise<any>[] = [];
+    if (isArray(base)) {
+      base.forEach(e => {
+        if (isObject(e)) {
+          const obj = isArray(e) ? [] : {};
+          const promise = this._branch(e, obj, { nodes: scope.nodes, type: e[DATA_TYPE] || scope.type });
+          if (!promise)
+            return;
+          promises.push(promise);
+          (prestine as any[]).push(obj);
+        }
+        else {
+          const length = (prestine as any[]).push(e);
+          if (scope.nodes.indexOf('positions') > -1) {
+            const promise = this._accounts.get(e).toPromise().then(v =>
+              prestine[length - 1] = v.name);
+            promises.push(promise);
+          }
+        }
+      });
+      if (!(prestine as any[]).length) return false;
+    } else {
+      Object.keys(base).forEach(k => {
+        if (this._ignore(k, scope.nodes)) return;
+        const aVal = base[k];
+        if (isObject(aVal)) {
+          const obj = isArray(aVal) ? [] : {};
+          const promise = this._branch(aVal, obj, { type: aVal[DATA_TYPE] || scope.type, nodes: [...scope.nodes, k] });
+          if (!promise)
+            return;
+          promises.push(promise);
+          if (scope.nodes.indexOf('positions') > -1) {
+            const promise = this._ds.get(scope.type, k).toPromise().then(v =>
+              prestine[isString(v) ? v : v[Object.keys(v)[0]]] = obj
+            );
+            promises.push(promise);
+          }
+          else
+            prestine[k] = obj;
+        }
+        else {
+          prestine[k] = aVal;
+          if (k === 'userId') {
+            const promise = this._accounts.get(aVal).toPromise().then(v =>
+              prestine[k] = v.name);
+            promises.push(promise);
+          }
+        }
+      });
+      if (!Object.keys(prestine).length) return false;
+    }
+    return promises.length ? Promise.all(promises) : Promise.resolve();
+  }
+  /**
+   * return html from diff tree
+   * @param diff
+   * @param objstate
+   * @param propertyName
+   * @param sibling array entry
+   */
+  private _generate(diff: {} | [], objstate: ChangeState = ChangeState.Unchanged,
+    propertyName = undefined, sibling = false) {
+    let h = '';
+    if (isArray(diff)) {
+      h += this._write(objstate, TokenKind.ArrayStart, false, false, propertyName);
+      const n = diff.length;
+      diff.forEach((e, i) => {
+        const state = diff[STATE + i.toString()];
+        if (isObject(e))
+          h += this._generate(e, state, undefined, i < n - 1);
+        else
+          h += this._write(state, TokenKind.Value,
+            i === n - 1 || diff[STATE + (i + 1).toString()] !== state,
+            i < n - 1, undefined, e);
+      });
+      h += this._write(objstate, TokenKind.ArrayEnd, true, sibling);
+    }
+    else {
+      h += this._write(objstate, TokenKind.ObjectStart, false, false, propertyName);
+      const keys = Object.keys(diff).filter(k => !k.startsWith(ORIGINAL_VALUE));
+      keys.forEach((k, i) => {
+        const val = diff[k], state = diff[STATE + k], n = keys.length;
+        if (isObject(val))
+          h += this._generate(val, state, k, i < n - 1);
+        else
+          h += this._write(state, TokenKind.Value, state !== objstate, i < n - 1, k, val, diff[ORIGINAL_VALUE + k]);
+      });
+      h += this._write(objstate, TokenKind.ObjectEnd, true, sibling);
+    }
+    return h;
+  }
+  /**
+   * write html line
+   * @param state
+   * @param annotate
+   * @param token
+   * @param sibling array entry
+   * @param propertyName
+   * @param value
+   * @param originalValue
+   */
+  private _write(state: ChangeState,
+    token: TokenKind,
+    annotate: boolean,
+    sibling?: boolean,
+    propertyName?: string,
+    value?: string | number | boolean,
+    originalValue?: string | number | boolean
+  ) {
+    let h = '', brackets: string, cls: string;
+    switch (state) {
+      case ChangeState.Removed:
+        cls = 'compare removed';
+        break;
+      case ChangeState.Added:
+        cls = 'compare added';
+        break;
+      case ChangeState.Modified:
+        cls = 'compare modified';
+        break;
+      default:
+        cls = '';
+    }
+    switch (token) {
+      case TokenKind.ArrayStart:
+        brackets = '[';
+        break;
+      case TokenKind.ObjectStart:
+        brackets = '{';
+        break;
+      case TokenKind.ArrayEnd:
+        brackets = ']';
+        break;
+      case TokenKind.ObjectEnd:
+        brackets = '}';
+        break;
+    }
+    if (token == TokenKind.ObjectStart || token == TokenKind.ArrayStart)
+      h = `<div class="scope ${cls}">`;
+    if (propertyName)
+      h += `<span class="structure ${cls}">${propertyName}: </span>`;
+    if (brackets) {
+      if (token == TokenKind.ObjectEnd || token == TokenKind.ArrayEnd)
+        h += '</div>';
+      h += `<span class="brackets">${brackets}</span>`
+      if (token == TokenKind.ObjectStart || token == TokenKind.ArrayStart)
+        h += '<span class="alternate">...</span><div class="scope-content">';
+    }
+    if (token == TokenKind.Value) {
+      if (propertyName === 'color') h += `<div class="color" style="background-color:${value}"></div>&nbsp;`;
+      else if ((propertyName === 'shape' || propertyName === 'data') && SVG_PATH_REGEX.test(value as string)) h += `<svg width=12 height=12 viewBox="0 0 35 35" preserveAspectRatio="none"><path d="${value}"></path></svg>&nbsp;`;
+      h += `<span class="value ${cls}">${value}</span>`;
+    }
+    if (sibling) h += '<span class="structure">,</span>';
+    if (state && annotate) {
+      const resource = state === ChangeState.Removed ? 'Deleted' : state === ChangeState.Added ? 'Added' : 'Modified';
+      h += `<div class="${cls}"> <div class="label"><span>${this._translate.get(resource)}`;
+      if (originalValue)
+        h += `&nbsp;<span class="original">${originalValue}</span>`;
+      h += '</span></div></div>';
+    }
+    else if (token === TokenKind.Value)
+      h += '<br/>';
+    if (token == TokenKind.ObjectEnd || token == TokenKind.ArrayEnd)
+      h += '</div>';
+    return h;
+  }
+  /**
+   * toggle
+   * @param evt
+   */
+  collapse(evt: MouseEvent) {
+    let el = evt.srcElement as HTMLElement;
+    while (el && !el.classList.contains('scope'))
+      el = el.parentElement;
+    el && el.classList.toggle('collapse') && el.classList.remove('focus');
+    evt.stopPropagation();
+  }
+  /**
+   * remove cls
+   */
+  focusOut() {
+    this.contents.nativeElement.querySelectorAll('.scope.focus').forEach(e =>
+      e.classList.remove('focus')
+    );
+  }
+  /**
+   * 
+   * @param evt
+   */
+  focusIn(evt: MouseEvent) {
+    this.focusOut();
+    let el = evt.srcElement as HTMLElement;
+    while (el && !el.classList.contains('scope'))
+      el = el.parentElement;
+    el && !el.classList.contains('collapse') && el.classList.add('focus');
+  }
+  ngOnDestroy(): void {
+    this._destroy.next();
+    this._destroy.complete();
+  }
+}
+interface VersionInfo {
+  time: Date;
+  author: string;
+}
+interface ConfigurtionInfo {
+}
+interface CompareModel {
+  date1: Date;
+  date2: Date;
+}
+interface Scope {
+  type?: string;
+  nodes: string[];
+}
+enum ChangeState {
+  Unchanged,
+  Added,
+  Modified,
+  Removed
+}
+enum TokenKind {
+  Value,
+  ArrayStart,
+  ArrayEnd,
+  ObjectStart,
+  ObjectEnd
+}

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

@@ -0,0 +1,41 @@
+import { Attachment, Log, Recipient, Workflow } from '../../core/models';
+
+export interface MoveModel {
+  id: number;
+  userId: string;
+  note?: string;
+  role?: string;
+}
+
+export interface DiagramInfo {
+  diagram: Workflow;
+  documentId: number;
+  log: Log[];
+  form: string;
+  model: any;
+  attachments: Attachment[];
+  recipients: Recipient[];
+}
+
+export interface NodeInfo {
+  parentId?: string;
+  indicator?: boolean;
+  virtual?: boolean;
+}
+
+export interface Timeline {
+    date: Date;
+    submissions: Date[];
+    minDate: Date;
+    maxDate: Date;
+    items: {
+        time?: Date;
+        userId?: string;
+        state?: string;
+    }[];
+    estimate: boolean;
+    startDate: Date;
+    endDate: Date;
+    recipients?: Recipient[];
+    log?: Log[];
+}