@bizdoc/core 1.8.5 → 1.8.9

package/src/lib/admin/document-trace/_timeline-theme.scss

@@ -0,0 +1,70 @@
+@mixin timeline-theme($theme) {
+  $accent: map-get($theme, accent);
+  $background: map-get($theme, background);
+  $foreground: map-get($theme, foreground);
+
+  .timeline {
+      width: 120px;
+
+    .item {
+        font-size: 12px !important;
+      display: flex;
+      -ms-flex-direction: column;
+      -webkit-flex-direction: column;
+      flex-direction: column;
+      text-align: center;
+      align-items: center;
+      height: auto;
+      padding: 10px;
+      color: mat-color($foreground, text);
+      cursor: pointer;
+
+      &:hover, &:focus {
+        background: mat-color($background, 'hover');
+      }
+
+      .title {
+
+        span {
+          -ms-word-break: keep-all;
+          word-break: keep-all;
+
+          &.time {
+            font-size: 12px;
+          }
+        }
+      }
+
+      &.active{
+          border-left-color: mat-color($accent, 500); 
+          border-left-width: 1px;
+          border-left-style: dotted;
+      }
+      /*      &:hover {
+        .indicator-container &:after {
+          background-color: mat-color($accent, 400);
+        }
+      }
+
+      .indicator-container {
+        text-align: -webkit-center;
+
+        .indicator {
+          border-left: 2px dashed mat-color($accent, 400);
+          width: 2px;
+          height: 30px;
+        }
+
+        &:after {
+          content: '\00a0';
+          border: 2px solid mat-color($accent, 400);
+          border-radius: 6px 6px;
+          width: 8px;
+          height: 8px;
+          display: block
+        }
+      }
+*/
+    }
+  }
+}

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

@@ -0,0 +1,55 @@
+<ng-container [ngSwitch]="mode">
+  <div *ngSwitchCase="'diagram'" class="column" fxFlex>
+    <mat-toolbar>
+      <button mat-icon-button (click)="pan()" [matTooltip]="'Pan' | translate"><span class="e-icons sf-icon-pan"></span></button>
+      <button mat-icon-button (click)="cursor()" [matTooltip]="'Cursor' | translate"><span class="e-icons sf-icon-cursor"></span></button>
+      <span class="divider"></span>
+      <button mat-icon-button (click)="mode = null" [matTooltip]="'Refresh' | translate"><mat-icon>refresh</mat-icon></button>
+      <button mat-icon-button (click)="guide()" [matTooltip]="'Help' | translate"><mat-icon>help_outline</mat-icon></button>
+    </mat-toolbar>
+    <div class="row" fxFlex>
+      <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">
+                {{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>
+      <bizdoc-document-trace-element [timeline]="timeline" [node]="node" *ngIf="node"
+                                     [model]=model (assign)="assign($event)"></bizdoc-document-trace-element>
+      <div fxFlex #diagram dir="ltr">
+      </div>
+    </div>
+  </div>
+  <div *ngSwitchCase="'search'" fxFlex fxLayoutAlign="center">
+    <form>
+      <mat-form-field>
+        <input matInput type="search" [matAutocomplete]="auto" [formControl]="search" data-help="search" width="40" [placeholder]="'Number'|translate" />
+        <mat-autocomplete #auto="matAutocomplete" [displayWith]="display"
+                          (optionSelected)="change($event)">
+          <mat-option *ngFor="let d of documents$ | async" [value]="d">
+            <span>{{d.number}} | {{d.subject}}</span>
+          </mat-option>
+        </mat-autocomplete>
+        <mat-icon matSuffix class="mat-icon-rtl-mirror">search</mat-icon>
+      </mat-form-field>
+    </form>
+  </div>
+  <mat-progress-bar mode="indeterminate" *ngSwitchDefault></mat-progress-bar>
+</ng-container>
+<ng-template #estimate>
+  {{'Estimate' | translate}}
+</ng-template>

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

@@ -0,0 +1,10 @@
+:host {
+  display: flex;
+  -ms-flex-direction: column;
+  -webkit-flex-direction: column;
+  flex-direction: column;
+  flex-grow: 1;
+  height: 100%;
+}
+
+form {}

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

@@ -0,0 +1,463 @@
+import { Component, ViewChild, OnInit, OnDestroy, Inject, HostListener, ElementRef } from '@angular/core';
+import {
+  DiagramConstraints, PointPortModel, NodeConstraints, ScrollSettingsModel, SelectorModel, SelectorConstraints,
+  ToolBase, Diagram, MouseEventArgs, ConnectorModel, NodeModel, SnapSettingsModel, DiagramTools, TextModel, ConnectorConstraints, ISelectionChangeEventArgs, LayerModel
+} from '@syncfusion/ej2-angular-diagrams';
+import { FormBuilder } from '@angular/forms';
+import { MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
+import { MatDialog } from "@angular/material/dialog";
+import { Subject, Observable } from 'rxjs';
+import { takeUntil, debounceTime, switchMap, filter, map } from 'rxjs/operators';
+const moment = require('moment');
+import { BizDoc } from '../../core/decorators';
+import { getWarn, isObject } from '../../core/functions';
+import { Recipient, HeaderModel, DocumentModel, GuideStep } from '../../core/models';
+import { PromptService } from '../../core/prompt.service';
+import { UtilityRef } from '../utility-ref';
+import { ReassignDialog, ReassignModel } from "./reassign.dialog";
+import { FormService } 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 { DiagramInfo, MoveModel, NodeInfo, Timeline } from './Timeline';
+import { trigger } from '@angular/animations';
+import { EnterExitRight } from '../../core/animations';
+import { ChangeDetectorRef } from '@angular/core';
+
+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[] {
+  const ports: PointPortModel[] = [
+    { 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 } }
+  ];
+  return ports;
+}
+
+//Defines the tool used
+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>;
+  diagram: Diagram;
+  readonly search = this._fb.control(null);
+  documents$: Observable<DocumentModel[]>;
+  model: DiagramInfo;
+  timeline: Timeline;
+  diagramConstraints: DiagramConstraints = DiagramConstraints.Default | DiagramConstraints.Bridging |
+    DiagramConstraints.LineRouting |
+    DiagramConstraints.Pan |
+    DiagramConstraints.Zoom
+    & ~DiagramConstraints.UndoRedo;
+  diagramTool: DiagramTools = DiagramTools.SingleSelect;
+  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;
+  public getTool(action: string): ToolBase {
+    let tool: ToolBase;
+    if (action === 'info') {
+      tool = new InfoTool(this.diagram, this._tap);
+    }
+    return tool;
+  }
+  mode: 'diagram' | 'search' | null = 'search';
+  private _highLightedIds: string[] = [];
+  private readonly _tap = new Subject<NodeModel>();
+  private readonly _destroy = new Subject<void>();
+  /** workflow ctor */
+  constructor(
+    @Inject(UtilityRef) private _utilityRef: UtilityRef<DiagramInfo, MoveModel, DiagramInfo, number>,
+    private _service: FormService,
+    private _session: SessionService,
+    private _slot: PaneRef<DocumentTraceComponent>,
+    private _router: PanesRouter,
+    private _sb: PromptService,
+    private _translate: TranslateService,
+    private _dialog: MatDialog,
+    private _guide: GuideService,
+    private _cd: ChangeDetectorRef,
+    private _fb: FormBuilder) {
+  }
+  ngOnInit(): void {
+    this.documents$ = this.search.valueChanges.pipe(takeUntil(this._destroy), debounceTime(250),
+      filter(v => !isObject(v)),
+      switchMap(v => this._service.findAll(v)));
+    this._tap.pipe(takeUntil(this._destroy)).subscribe(n => this._info(n));
+    this._slot.queryParamsChange.pipe(takeUntil(this._destroy)).subscribe(p => {
+      const { id } = p;
+      id && this._open((id as string).decodeId());
+    });
+    this._slot.resize.pipe(takeUntil(this._destroy)).subscribe(() =>
+      this.diagram &&
+      this.diagram.refresh()
+    );
+  }
+  @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'),
+          simulate: true
+        });
+    }
+    else steps.push({
+      selector: '[data-help=search]',
+      position: 'Below',
+      content: this._translate.get('TraceSearchHelp')
+    });
+    this._guide.start({
+      name: 'trace',
+      steps
+    });
+    evt && evt.preventDefault();
+  }
+
+  private _open(id: number) {
+    this.mode = null;
+    this.diagram && this.diagram.destroy();
+    this._utilityRef.populate(id).subscribe(e => {
+      this._highLightedIds = [];
+      this.model = e;
+      this._timeline();
+      this.mode = 'diagram';
+      this._cd.detectChanges();
+      this.diagram = new Diagram({
+        width: "100%", height: "100%",
+        snapSettings: this.snapSettings,
+        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._sb.error());
+  }
+  nodeDefaults = (node: NodeModel): NodeModel => {
+    const { indicator, virtual } = node.addInfo as NodeInfo || {};
+
+    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) => {
+    connector.constraints = ConnectorConstraints.ReadOnly & ~ConnectorConstraints.Select;
+
+    this._decorateConnector(connector);
+  }
+  display(item: HeaderModel) {
+    return item ? item.number : null;
+  }
+  change(evt: MatAutocompleteSelectedEvent) {
+    const { id } = evt.option.value;
+    this._router.navigate([], { queryParams: { id: (id as number).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 || moment(time).isBefore(minDate)) minDate = time;
+      if (!maxDate || moment(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 'Jump':
+          //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 NodeInfo).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 = 'transparent',
+        node.style.strokeColor = 'darkgray',
+        node.style.strokeDashArray = '6 2';
+  }
+  private _decorateConnector(connector: ConnectorModel) {
+    const log = this.timeline.log.filter(r => r.nodeId === connector.id);
+
+    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);
+  }
+  fileName(fileId: number) {
+    const file = this.model.attachments.find(f => f.id === fileId);
+    return file.fileName;
+  }
+  selectionChange(evt: ISelectionChangeEventArgs) {
+    this._unhighlight();
+    if (evt.newValue.length) {
+      let node = evt.newValue[0] as NodeModel;
+
+      const { indicator, parentId } = node.addInfo as NodeInfo || {};
+
+      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();
+      this._info(node);
+    }
+    else
+      this.node = null;
+  }
+  /** */
+  assign(recipient: Recipient) {
+    this._dialog.open(ReassignDialog, { data: { exclude: [recipient.userId] } }).afterClosed().
+      subscribe((m: ReassignModel) => {
+        m && this._utilityRef.execute({ id: recipient.id, ...m }).subscribe(r => {
+          Object.assign(this.model, r);
+        }, () =>
+          this._sb.error());
+      });
+  }
+  private _info(node: NodeModel): void {
+    this.node = node;
+  }
+  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>

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

@@ -0,0 +1,34 @@
+import { Component, Inject } from "@angular/core";
+import { FormGroup, FormControl, Validators } from "@angular/forms";
+import { SessionService } from "../../core/session.service";
+import { MAT_DIALOG_DATA } from "@angular/material/dialog";
+import { Role, UserInfo } from "../../core/models";
+import { AccountService } from "../../core/account.service";
+import { Observable } from "rxjs";
+import { map } from "rxjs/operators";
+
+@Component({
+  templateUrl: './reassign.dialog.html'
+})
+export class ReassignDialog {
+  readonly form = new FormGroup({
+    userId: new FormControl(null, [Validators.required]),
+    note: new FormControl(null)
+  });
+  readonly roles: Role[];
+  readonly users$: Observable<UserInfo[]>;
+  constructor(@Inject(MAT_DIALOG_DATA) private _data: ReassignData, session: SessionService, account: AccountService) {
+    this.roles = session.profile.roles;
+    this.users$ = account.findAll('').
+      pipe(map(r => r.filter(u => this._data.exclude.indexOf(u.id) < 0)));
+  }
+}
+export interface ReassignData {
+  exclude: string[];
+}
+
+export interface ReassignModel {
+  userId: string;
+//  role?: string;
+  note?: string;
+}