@bizdoc/core 1.14.8 → 1.14.9

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

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

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

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

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

@@ -0,0 +1,292 @@
+import { Input, Directive, OnInit, ElementRef, Optional, Host, AfterViewInit, ChangeDetectorRef, SkipSelf, ViewContainerRef, TemplateRef } from "@angular/core";
+import { DomSanitizer } from "@angular/platform-browser";
+import { isObject } from "../../core/functions";
+import { FieldInfo } from "../../core/models";
+import { TranslateService } from "../../core/translate.service";
+import { VersionCompareComponent } from "./version-compare.component";
+
+enum CompareState {
+  Removed = -1,
+  Unchanged = 0,
+  Added = 1,
+  Modified = 2
+}
+
+export abstract class CompareDirectiveBase {
+  abstract get base(): any;
+  abstract get version(): any;
+  abstract get structure(): FieldInfo;
+}
+/** */
+@Directive({ selector: '[bizdocCompareGroup],[bizdocCompareArray]' })
+export
+  class CompareGroupDirective extends CompareDirectiveBase implements OnInit {
+  @Input('bizdocCompareGroup') name: string;
+  private _keys: string[];
+  private _structure: FieldInfo;
+  private _base: any;
+  private _version: any;
+  public get structure(): FieldInfo { return this._structure; }
+  public get base(): any { return this._base ? this._base[this.name] : null; }
+  public get version(): any { return this._version[this.name]; }
+  public get keys(): string[] { return this._keys; }
+  constructor(
+    @Optional() private _comparision: VersionCompareComponent,
+    @Optional() @Host() private _context: CompareContextDirective,
+    @Optional() @Host() @SkipSelf() private _parent: CompareGroupDirective) {
+    super();
+  }
+  ngOnInit(): void {
+    if (!this._comparision) return;
+    if (this._context) {
+      this._structure = this._context.structure.fields.find(e => e.name === this.name);
+      this._base = this._context.base;
+      this._version = this._context.version;
+    }
+    else if (this._parent) {
+      this._structure = this._parent.structure.fields.find(e => e.name === this.name);
+      this._base = this._parent.base;
+      this._version = this._parent.version;
+    }
+    else {
+      this._structure = this._comparision.form.structure.find(e => e.name === this.name);
+      const { currentVersion, baseVersion } = this._comparision;
+      this._base = baseVersion;
+      this._version = currentVersion;
+    }
+    if (!this._structure) throw `No form field with name ${this.name}`;
+    if (!this._structure.isObject) throw `bizdocCompareGroup ${this.name}`;
+    this.structure.isArray && this._normalize();
+  }
+  private _normalize() {
+    this._keys = this.structure.fields.filter(f => f.key).map(k => k.name);
+    this.base.forEach((b, i) => !this.version.find(v => this._keys.every(k => v[k] === b[k])) /* doesn't have a version */ &&
+      this.version.splice(i, 0, Object.assign({ _compare: CompareState.Removed }, b)));
+    this.version.forEach(v => {
+      if (v['_compare'] === undefined) {
+        const base = this.base.find(b => this._keys.every(k => b[k] === v[k]));
+        if (!base)
+          v['_compare'] = CompareState.Added;
+        else if (JSON.stringify(v) !== JSON.stringify(base))
+          v['_compare'] = CompareState.Modified;
+      }
+    });
+  }
+}
+/** */
+@Directive({ selector: '[bizdocCompareName]' })
+export
+  class CompareNameDirective extends CompareDirectiveBase implements OnInit, AfterViewInit {
+  private _name: string[];
+  @Input('bizdocCompareName') set name(val: string) {
+    this._name = val.split(',');
+  }
+  private _structure: FieldInfo;
+  private _base: any;
+  private _version: any;
+  private _state: CompareState = CompareState.Unchanged;
+  public get structure(): FieldInfo { return this._structure; }
+  public get base(): any { return this._base ? this._base[this._name[0]] : null; }
+  public get version(): any { return this._version[this._name[0]]; }
+  get state(): CompareState { return this._state };
+  constructor(
+    @Optional() private _comparision: VersionCompareComponent,
+    @Optional() @Host() private _context: CompareContextDirective,
+    @Optional() @Host() private _group: CompareGroupDirective,
+    private _translate: TranslateService,
+    private _cd: ChangeDetectorRef,
+    private _dom: DomSanitizer,
+    private _element: ElementRef<HTMLElement>) {
+    super();
+  }
+  ngOnInit(): void {
+    if (!this._comparision) return;
+    if (this._context) {
+      this._structure = this._context.structure.fields.find(e => e.name === this._name[0]);
+      this._base = this._context.base;
+      this._version = this._context.version;
+    }
+    else if (this._group) {
+      this._structure = this._group.structure.fields.find(e => e.name === this._name[0]);
+      this._base = this._group.base;
+      this._version = this._group.version;
+    if (!this._structure) throw `No form field with name ${this._name[0]}`;
+    }
+    else {
+      this._structure = this._comparision.form.structure.find(e => e.name === this._name[0]);
+      const { currentVersion, baseVersion } = this._comparision;
+      this._base = baseVersion;
+      this._version = currentVersion;
+    }
+  }
+  ngAfterViewInit(): void {
+    if (!this._comparision) return;
+    // if object has state
+    const state = this._version['_compare'];
+    if (state !== undefined) {
+      switch (state) {
+        case CompareState.Removed:
+          this._decorate('removed', 'Deleted');
+          this._state = state;
+          return;
+        case CompareState.Added:
+          this._decorate('added', 'Added');
+          this._state = state;
+          return;
+      }
+    }
+    const versionData: { [field: string]: any } = {};
+    // iterate names
+    let name: string, i = 0;
+    while (i < this._name.length) {
+      name = this._name[i];
+      if (!this._base) {
+        if (this._version[name] !== undefined)
+          this._state = CompareState.Added;
+      }
+      else if (this._version[name] !== this._base[name]) {
+        if (this._version[name] === undefined) {
+          this._version[name] = this._base[name];
+          versionData[name] = undefined;
+          this._state = CompareState.Removed;
+        }
+        else if (this._base[name] === undefined)
+          this._state = CompareState.Added;
+        else if (JSON.stringify(this._version[name]) !== JSON.stringify(this._base[name])) {
+          // store version data
+          versionData[name] = this._version[name];
+          this._version[name] = this._base[name];
+          this._state = CompareState.Modified;
+        }
+      }
+      i++;
+    }
+    if (this._state !== CompareState.Unchanged)
+      switch (this._state) {
+        case CompareState.Removed:
+          // detect with base value(s)
+          setTimeout(() => {
+            this._cd.detectChanges();
+            this._decorate('removed', 'Deleted');
+            Object.assign(this._version, versionData);
+          });
+          break;
+        case CompareState.Added:
+          this._decorate('added', 'Added');
+          break;
+        case CompareState.Modified:
+          {
+            const versionHTML = this._element.nativeElement.innerHTML;
+//            this._cd.markForCheck();
+            setTimeout(() => {
+              // detect again with base value(s)
+              this._cd.detectChanges();
+              const originalHTML = this._element.nativeElement.innerHTML;
+              // restore version html
+              this._element.nativeElement.innerHTML = versionHTML;
+              const labelEl = this._decorate('modified', 'Modified');
+              const el = document.createElement('span');
+              el.className = 'original';
+              el.innerHTML = originalHTML; //this._dom.sanitize();
+              labelEl.append(el);
+              // restore version value(s)
+              Object.assign(this._version, versionData);
+            });
+            break;
+          }
+      }
+  }
+  private _decorate(className: string, label: string): HTMLElement {
+    this._element.nativeElement.classList.add('compare', className);
+    const labelContainerEl = document.createElement('div');
+    labelContainerEl.className = 'label';
+    const labelEl = document.createElement('span');
+    labelEl.innerText = this._translate.get(label);
+    labelContainerEl.append(labelEl);
+    this._element.nativeElement.appendChild(labelContainerEl);
+    return labelEl;
+  }
+}
+/** */
+@Directive({ selector: '[bizdocCompareContext],[bizdocCompare]', exportAs: 'bizdocCompare' })
+export
+  class CompareContextDirective extends CompareDirectiveBase implements OnInit, AfterViewInit {
+  private _version: {};
+  @Input('bizdocCompareOf') set compareOf(val: {}) { this._version = val; }
+  @Input('bizdocCompareContext') set context(val: {}) { this._version = val; }
+  get version(): {} { return this._version; }
+  @Input('bizdocCompareDecorate') decorate: 'group' | 'single' | 'table';
+  private _base: {};
+  public get base(): {} { return this._base; }
+  public get structure(): FieldInfo { return this._group.structure; }
+  constructor(
+    @Optional() private _comparision: VersionCompareComponent,
+    @Optional() @Host() private _group: CompareGroupDirective,
+    private _vc: ViewContainerRef,
+    @Optional() private _template: TemplateRef<any>,
+    private _element: ElementRef<HTMLElement>) {
+    super();
+    this.decorate = _element.nativeElement.tagName === 'TR' ? 'table' : 'group';
+  }
+  ngOnInit(): void {
+    if (this._comparision) {
+      if (!this._group) throw `Missing enclosing bizdocCompareGroup directive`;
+      if (!isObject(this.version)) throw `[bizdocCompareContext] syntax`;
+      this._base = this._group.base.find(b => this._group.keys.every(k => b[k] === this.version[k]));
+    }
+    if (this._template) {
+      this._vc.createEmbeddedView(this._template, {
+        $implicit: this._base
+      });
+    }
+  }
+  ngAfterViewInit(): void {
+    if (!this._comparision) return;
+    switch (this.decorate) {
+      case 'table':
+        this._table();
+        break;
+      case 'group':
+        this._collapse();
+        break;
+    }
+  }
+  /** */
+  private _table() {
+    let className: string;
+    switch (this._version['_compare'] as CompareState) {
+      case CompareState.Added:
+        className = 'added';
+        break;
+      case CompareState.Removed:
+        className = 'removed';
+        break;
+      case CompareState.Modified:
+        className = 'modified';
+        break;
+    }
+    this._element.nativeElement.classList.add('compare', className);
+  }
+  /** removes repeated added and removed tags */
+  private _collapse() {
+    const els = this._element.nativeElement.parentElement.querySelectorAll('.compare');
+    let prevState: CompareState = CompareState.Unchanged;
+    for (let i = els.length - 1; i >= 0; i--) {
+      const el = els[i];
+      let state: CompareState;
+      if (el.classList.contains('added'))
+        state = CompareState.Added;
+      else if (el.classList.contains('removed'))
+        state = CompareState.Removed;
+      else {
+        state = CompareState.Unchanged;
+        continue;
+      }
+      if (prevState === state) {
+        const labelEl = el.querySelector('.label');
+        labelEl && labelEl.remove();
+      }
+      prevState = state;
+    }
+  }
+}

package/src/lib/compose/version-compare/version.pane.component.html

@@ -0,0 +1,19 @@
+<div class="row">
+  <span class="divider"></span>
+  <button mat-icon-button *ngIf="versions.length" [matMenuTriggerFor]="menu" [attr.aria-label]="'Version' | translate">
+    <mat-icon>filter_list</mat-icon>
+  </button>
+  <mat-menu #menu>
+    <button mat-menu-item (click)="switch(l.time)" *ngFor="let l of versions">
+      <bizdoc-identity-name [identity]="l.userId" [by]="l.byId" chating="none"></bizdoc-identity-name>
+      {{l.time | amCalendar : null : CALENDAR_SPEC}}
+    </button>
+  </mat-menu>
+</div>
+<div class="info mat-body-1">
+  <bizdoc-identity-name [identity]="log.userId" [by]="log.byId"></bizdoc-identity-name>
+  | <span>{{log.time | amCalendar : null : CALENDAR_SPEC }}</span>
+</div>
+<div>
+  <bizdoc-version-compare [model]="model" [version]="log.time"></bizdoc-version-compare>
+</div>

package/src/lib/compose/version-compare/version.pane.component.scss

@@ -0,0 +1,8 @@
+:host {
+  padding: 0 8px;
+  display: block;
+  min-width: 350px;
+}
+
+.info {
+}

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

@@ -0,0 +1,53 @@
+import { Component, OnInit } from '@angular/core';
+import { CalendarSpec } from "../../core/pipes/calendar.pipe";
+import { DocumentModel, Log } from '../../core/models';
+import { PanesRouter } from '../../core/slots/router.service';
+import { PaneRef } from '../../core/slots/pane-ref';
+import { TranslateService } from '../../core/translate.service';
+import { OpenPolicy } from '../../core/configuration';
+
+@Component({
+  selector: 'bizdoc-version.pane',
+  templateUrl: './version.pane.component.html',
+  styleUrls: ['./version.pane.component.scss'],
+  host: {
+    class: 'pane'
+  }
+})
+export class VersionPaneComponent implements OnInit {
+  model: DocumentModel<any>;
+  log: Log;
+  versions: Log[];
+  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 _pane: PaneRef<VersionPaneComponent>,
+    private _translate: TranslateService,
+    private _router: PanesRouter
+  ) {
+    _pane.title = _translate.get('Version');
+  }
+  ngOnInit(): void {
+    this._pane.dataChange.subscribe(d => {
+      this.model = d['item'];
+      this._pane.group = `#${this.model.number}`;
+    });
+    this._pane.paramsChange.subscribe(p => {
+      const v = p['version'];
+      if (v) {
+        const version = v.decodeId();
+        this.log = this.model.log.find(l => l.type === 'ModelChange' && new Date(l.time).valueOf() === version);
+        this.versions = this.model.log.filter(l => l.type === 'ModelChange' && l !== this.log);
+      }
+      else
+        this._pane.close();
+    });
+  }
+  switch(time: Date) {
+    this._router.navigate(['../', 'version', new Date(time).valueOf().encodeId()], { policy: OpenPolicy.Tab });
+  }
+}

package/src/lib/core/NgComponentOutlet.ts

@@ -0,0 +1,31 @@
+import { Type, Injector, ComponentFactoryResolver, ComponentRef, Directive, Input, ViewContainerRef, Output, EventEmitter, OnInit } from "@angular/core";
+
+@Directive({ selector: 'ngx-component-outlet' })
+export class NgxComponentOutlet implements OnInit {
+  @Input('type') ngxComponentOutlet!: Type<any>;
+  @Input('injector') ngxComponentOutletInjector!: Injector;
+  @Input() ngxComponentOutletContent!: any[][];
+
+  @Output('create') createEvents = new EventEmitter<any>();
+
+  private _componentRef: ComponentRef<any> | null = null;
+
+  constructor(private _viewContainerRef: ViewContainerRef,
+    private _componentFactoryResolver: ComponentFactoryResolver  ) { }
+
+  ngOnInit() {
+    this._viewContainerRef.clear();
+    this._componentRef = null;
+
+    if (this.ngxComponentOutlet) {
+      const elInjector = this.ngxComponentOutletInjector || this._viewContainerRef.parentInjector;
+
+      const componentFactory = this._componentFactoryResolver.resolveComponentFactory(this.ngxComponentOutlet);
+
+      this._componentRef = this._viewContainerRef.createComponent(
+        componentFactory, this._viewContainerRef.length, elInjector,
+        this.ngxComponentOutletContent);
+      this.createEvents.emit(this._componentRef.instance);
+    }
+  }
+}

package/src/lib/core/account.service.ts

@@ -0,0 +1,30 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { UserInfo } from '../core/models';
+import { HubService } from './hub.service';
+import { Observable, forkJoin } from 'rxjs';
+import { shareReplay } from 'rxjs/operators';
+
+@Injectable({ providedIn: "root" })
+export class AccountService {
+  private readonly _cache: { [key: string]: Observable<UserInfo> } = {};
+  constructor(private _http: HttpClient, messaging: HubService) {
+    messaging.profileChange$.subscribe(c => {
+      const info = this._cache[c.userId];
+      info && Object.assign(info, { mode: c.mode });
+    });
+  }
+  getAll(ids: string[]): Observable<UserInfo[]> {
+    return forkJoin(ids.map(i => this.get(i)));
+  }
+  get(id: string): Observable<UserInfo> {
+    return this._cache[id] || (this._cache[id] = this._http.get<UserInfo>(`/api/account/info/${id}`).pipe(shareReplay()));
+  }
+  findAll(name?: string, options?: { skip?: number, take?: number }): Observable<UserInfo[]> {
+    const params = { ...options };
+    if (name) params['name'] = name;
+    return this._http.get<UserInfo[]>('/api/account/list', {
+      params
+    });
+  }
+}

package/src/lib/core/animated-icon/animated-icon.directive.html

@@ -0,0 +1,3 @@
+<mat-icon
+  
+  [ngClass]="{'animate' : animate}" color="{{animate ? colorEnd : colorStart}}" (click)="toggle()">{{animate ? end : start}}</mat-icon>

package/src/lib/core/animated-icon/animated-icon.directive.scss

@@ -0,0 +1,12 @@
+/*@import '../../../scss/mixins';*/
+
+:host {
+  /*@include mat-design-icon-mixin();*/
+
+  .material-icons {
+    transition: transform .5s;
+    &.animate {
+      transform: rotate(360deg);
+    }
+  }
+}