@bizdoc/core 1.8.5 → 1.8.9

package/src/lib/admin/positions/positions.component.ts

@@ -0,0 +1,285 @@
+import { Component, OnInit, ViewChild, OnDestroy, TemplateRef, Inject } from '@angular/core';
+import { MatDialog } from '@angular/material/dialog';
+import { Subject, of, EMPTY } from 'rxjs';
+import { takeUntil, filter, switchMap } from 'rxjs/operators';
+import { FormControl, FormGroup, Validators } from '@angular/forms';
+import { MatSort } from '@angular/material/sort';
+import { MatTableDataSource } from '@angular/material/table';
+import { ENTER } from '@angular/cdk/keycodes';
+import { Role, Type, UserInfo } from '../../core/models';
+import { AdminComponent } from '../admin-dismiss.service';
+import { SessionService } from '../../core/session.service';
+import { DatasourceService } from '../../core/datasource.service';
+import { PromptService } from '../../core/prompt.service';
+import { WindowTitleService } from '../../core/window-title.service';
+import { TranslateService } from '../../core/translate.service';
+import { UtilityComponent } from '../../core/base';
+import { UtilityRef } from '../utility-ref';
+import { BizDoc } from '../../core/decorators';
+import { Popup } from '../../core/popup/popup.service';
+import { PositionsPopup, PositionsData } from './positions-popup.component';
+import { ProgressBarMode } from '@angular/material/progress-bar';
+
+@Component({
+  templateUrl: './positions.component.html',
+  styleUrls: ['./positions.component.scss']
+})
+@BizDoc({ selector: 'bizdoc-positions' })
+/** positions component*/
+export class PositionsComponent implements OnInit, OnDestroy, UtilityComponent<boolean, TypeMap>, AdminComponent {
+  dataSource: MatTableDataSource<any>;
+  @ViewChild(MatSort) sort: MatSort;
+  readonly types: Type[];
+  roles: Role[];
+  displayedColumns: string[];
+  users: UserInfo[];
+  type?: Type;
+  dirty = false;
+  saving = false;
+  @ViewChild('noRoleTpl', { static: true }) noRoleTpl: TemplateRef<any>;
+  @ViewChild('roleTpl', { static: true }) roleTpl: TemplateRef<any>;
+  @ViewChild('patternTpl', { static: true }) patternTpl: TemplateRef<any>;
+  @ViewChild('groupTpl', { static: true }) newGroupTpl: TemplateRef<any>;
+  source: { key: string; value: any; }[];
+  readonly form = new FormGroup({
+  });
+  readonly role = new FormGroup({
+    title: new FormControl(null, Validators.required)
+  });
+  readonly pattern = new FormGroup({
+    title: new FormControl(null, Validators.required),
+    expression: new FormControl(null, Validators.required)
+  });
+  readonly group = new FormGroup({
+    title: new FormControl(null, Validators.required),
+    items: new FormControl(null, Validators.required)
+  });
+  private _everything: TypeMap;
+  positions: { [role: string]: { [key: string]: string[] } };
+  private readonly _destroy = new Subject<void>();
+  loading: ProgressBarMode;
+  /** positions ctor */
+  constructor(private _session: SessionService,
+    @Inject(UtilityRef) private _utilityRef: UtilityRef<boolean, TypeMap>,
+    private _datasources: DatasourceService,
+    private _ps: PromptService,
+    title: WindowTitleService,
+    translate: TranslateService,
+    private _popup: Popup,
+    private _dialog: MatDialog) {
+    this.types = _session.profile.types.filter(t => t.assignable);
+    title.set(translate.get('Roles'));
+  }
+  ngOnInit(): void {
+    this._utilityRef.populate().subscribe(r => {
+      this._everything = r;
+      const type = this.types.find(t => this._session.profile.roles.findIndex(r => r.dataType === t.name) > -1 && t.assignable);
+      type && this.change(type.name);
+    });
+  }
+  search(value: string) {
+    this.dataSource.filter = value;
+  }
+  change(name: string) {
+    const type = this.type = this.types.find(t => t.name === name);
+    const roles = this.roles = this._session.profile.roles.filter(r => r.dataType === name);
+    this.loading = 'query';
+    this._datasources.all(type.name).subscribe(t => {
+      this.source = t;
+      const model = this._everything[type.name];
+      let positions = model.positions;
+      if (!positions)
+        positions = model.positions = {};
+      if (!model.groups) model.groups = [];
+      if (!model.patterns) model.patterns = [];
+      roles.forEach(r => {
+        if (!positions[r.name]) positions[r.name] = {};
+      });
+      this.positions = positions;
+      const rows: Model[] = [];
+      model.patterns && model.patterns.forEach(p => {
+        const row = { type: 'pattern', key: p.name } as Model;
+        row[type.columns ? type.columns[0].name : 'value'] = p.title;
+        rows.push(row);
+      });
+      model.groups && model.groups.forEach(g => {
+        const row = { type: 'group', key: g.name } as Model;
+        row[type.columns ? type.columns[0].name : 'value'] = g.title;
+        rows.push(row);
+      });
+      t.forEach(t => {
+        const row = { type: 'key', ...t } as Model;
+        type.columns && type.columns.forEach(c => {
+          row[c.name] = t.value[c.name];
+        });
+        rows.push(row);
+      });
+
+      this.dataSource = new MatTableDataSource(rows);
+      this.dataSource.sort = this.sort;
+      this._columns();
+      !roles.length &&
+        this._dialog.open(this.noRoleTpl).afterClosed().subscribe(ok =>
+          ok && this.newRole());
+      this.loading = null;
+    }, () => {
+      this.loading = null;
+      this._ps.error();
+    });
+  }
+  private _columns() {
+    this.displayedColumns = (this.type.columns ? this.type.columns.map(c => c.name) : ['key', 'value']).concat(
+      this.roles.map(r => r.name)).concat(['options']);
+  }
+  /**
+   * 
+   * @param key
+   * @param evt
+   */
+  edit(key: any, evt: MouseEvent) {
+    if ((evt.target as HTMLElement).tagName === 'MAT-ICON') return;
+
+    let cell = evt.srcElement as HTMLElement;
+    while (cell.tagName !== 'TD')
+      cell = cell.parentElement;
+
+    const role = cell.getAttribute('data-role');
+
+    if (!role) return;
+
+    const crole = this.roles.find(r => r.name === role);
+
+    let positions = this.positions[role][key];
+
+    if (!positions) positions = this.positions[role][key] = [];
+
+    this._popup.open(PositionsPopup, evt.srcElement as HTMLElement, {
+      data: { title: crole.title, positions } as PositionsData
+    }).opened.subscribe(e => e.valueChange.pipe(takeUntil(this._destroy)).subscribe(() => this.dirty = true));
+  }
+  private _openDialog(tmpl: TemplateRef<any>, form: FormGroup, values: any) {
+    form.reset(values);
+    const dialogRef = this._dialog.open(tmpl);
+    dialogRef.keydownEvents().pipe(filter(k => k.keyCode === ENTER), takeUntil(dialogRef.afterClosed())).
+      subscribe(() => form.valid && dialogRef.close(form.value));
+    return dialogRef.afterClosed().pipe(switchMap(v => v ? of(v) : EMPTY));
+  }
+  newRole() {
+    this._openDialog(this.roleTpl, this.role, { title: null }).
+      subscribe((r: Role) => {
+        const name = r.title.normalize(), role = { name, ...r };
+        this.positions[name] = {};
+        this._everything[this.type.name].roles.push(role);
+        this.roles.push(role);
+        this._columns();
+        this.dirty = true;
+      });
+  }
+  newGroup() {
+    this._openDialog(this.newGroupTpl, this.group, { items: [], title: null }).subscribe((g: { title: string; items: string[] }) => {
+      const name = g.title.normalize();
+      this._everything[this.type.name].groups.push({ name, ...g });
+      const row = { key: name, type: 'group' } as Model;
+      row[this.type.columns ? this.type.columns[0].name : 'value'] = g.title;
+      this.dataSource.data.splice(0, 0, row);
+      this.dataSource.filter = '';
+      this.dirty = true;
+    });
+  }
+  newPattern() {
+    this._openDialog(this.patternTpl, this.pattern, { title: null, expression: null }).subscribe((p: Pattern) => {
+      const name = p.title.normalize();
+      this._everything[this.type.name].patterns.push({ name, ...p });
+      const row = { key: name, type: 'pattern' } as Model;
+      row[this.type.columns ? this.type.columns[0].name : 'value'] = p.title;
+      this.dataSource.data.splice(0, 0, row);
+      this.dataSource.filter = '';
+      this.dirty = true;
+    });
+  }
+  deleteGroup(name: string) {
+    const groups = this._everything[this.type.name].groups, group = groups.find(g => g.name === name);
+    this._ps.ask('RemoveAsk', null, { ok: 'Yes', cancel: 'No' }).subscribe(ok => {
+      if (ok) {
+        groups.remove(group);
+        Object.keys(this.positions).forEach(r => {
+          const positions = this.positions[r][group.name];
+          if (positions)
+            delete this.positions[r][group.name];
+        });
+        this.dataSource.data.remove(this.dataSource.data.find(g => g.key === group.name && g.type === 'group'));
+        this.dataSource.filter = '';
+      }
+    });
+  }
+  deletePattern(name: string) {
+    const patterns = this._everything[this.type.name].patterns, pattern = patterns.find(p => p.name === name);
+    this._ps.ask('RemoveAsk', null, { ok: 'Yes', cancel: 'No' }).subscribe(ok => {
+      if (ok) {
+        patterns.remove(pattern);
+        this.dataSource.data.remove(this.dataSource.data.find(p => p.key === pattern.name && p.type === 'pattern'));
+        this.dataSource.filter = '';
+        Object.keys(this.positions).forEach(r => {
+          const positions = this.positions[r][pattern.name];
+          if (positions)
+            delete this.positions[r][pattern.name];
+        });
+      }
+    });
+  }
+  editGroup(name: string) {
+    const groups = this._everything[this.type.name].groups, group = groups.find(g => g.name === name);
+    this._openDialog(this.newGroupTpl, this.group, group).subscribe((g: Group) => {
+      Object.assign(group, g);
+      this.dirty = true;
+    });
+  }
+  editPattern(name: string) {
+    const patterns = this._everything[this.type.name].patterns, pattern = patterns.find(p => p.name === name);
+    this._openDialog(this.patternTpl, this.pattern, pattern).subscribe((p: Pattern) => {
+      Object.assign(pattern, p);
+      this.dirty = true;
+    });
+  }
+  save(): Promise<any> {
+    this.saving = true;
+    this.loading = 'indeterminate';
+    return this._utilityRef.execute(this._everything).toPromise().then(() => {
+      this._ps.toast('ChangesSaved');
+      this.dirty = false;
+      this.loading = null;
+      this._session.refresh().subscribe();
+    }, () =>
+      this._ps.error()).finally(() => {
+        this.saving = false;
+      this.loading = null;
+      });
+  }
+  ngOnDestroy(): void {
+    this._destroy.next();
+    this._destroy.complete();
+  }
+}
+interface Model {
+  key: any;
+  type: 'group' | 'pattern' | 'key';
+}
+
+type TypeMap = { [name: string]: DataTypeModel }
+
+interface DataTypeModel {
+  patterns: Pattern[];
+  positions: { [role: string]: { [key: string]: string[] } };
+  groups: Group[];
+  roles: [{ name: string; title: string }];
+}
+interface Group {
+  title: string;
+  name: string;
+  items: string[];
+}
+interface Pattern {
+  title: string;
+  name: string;
+  expression: string;
+}

package/src/lib/admin/profiler/profiler.component.html

@@ -0,0 +1,109 @@
+<mat-toolbar>
+  <mat-icon (click)="null" class="mat-icon-rtl-mirror">search</mat-icon>
+  <div>
+    <input matInput type="search" [matAutocomplete]="auto" [formControl]="search" data-help="search" width="20" />
+    <mat-autocomplete #auto="matAutocomplete" [displayWith]="display"
+                      (optionSelected)="change($event)">
+      <mat-option *ngFor="let u of users$ | async" [value]="u">
+        <span>{{u.name}}</span>
+      </mat-option>
+    </mat-autocomplete>
+  </div>
+  <span class="divider"></span>
+  <button mat-icon-button (click)="reassign()" [matTooltip]="'ReassignAll' | translate" [disabled]="!data || !data.positions.length" data-help="reassign"><mat-icon>swap_horiz</mat-icon></button>
+  <button mat-icon-button (click)="guide()" [matTooltip]="'Help' | translate"><mat-icon>help_outline</mat-icon></button>
+</mat-toolbar>
+<mat-grid-list [cols]="cols" [style.display]="data ? '': 'none'">
+  <mat-grid-tile>
+    <mat-card>
+      <mat-card-header>
+        <mat-card-title>
+          <span>{{data?.info.name}}</span>
+        </mat-card-title>
+      </mat-card-header>
+      <mat-card-content>
+        <button mat-icon-button (click)="chat(data.info.id)" [matTooltip]="'Chat' | translate" [disabled]="!data"><mat-icon>chat</mat-icon></button>
+      </mat-card-content>
+    </mat-card>
+  </mat-grid-tile>
+  <mat-grid-tile>
+    <mat-card data-help="activity">
+      <mat-card-header>
+        <mat-card-title>
+          {{'Activity' | translate}}
+        </mat-card-title>
+      </mat-card-header>
+      <mat-card-content>
+        <ejs-chart #activity [primaryXAxis]="primaryXAxis" [primaryYAxis]="primaryYAxis" [zoomSettings]="zoomSettings" [tooltip]='tooltip' (tooltipRender)="tooltipRender($event)" [palettes]="palettes" background="transparent" [theme]='theme' [border]="border" (pointClick)="pointClick($event)">
+          <e-series-collection>
+          </e-series-collection>
+        </ejs-chart>
+      </mat-card-content>
+    </mat-card>
+  </mat-grid-tile>
+  <mat-grid-tile>
+    <mat-card data-help="pending">
+      <mat-card-header>
+        <mat-card-title>
+          {{'Pending' | translate}}
+        </mat-card-title>
+      </mat-card-header>
+      <mat-card-content>
+        <table class="mat-table" *ngIf="data?.pending.length; else none">
+          <thead>
+            <tr class="mat-row">
+              <td class="mat-header-cell"></td>
+              <td class="mat-header-cell"></td>
+            </tr>
+          </thead>
+          <tbody>
+            <tr *ngFor="let r of data?.pending" class="mat-row">
+              <td class="mat-cell"><a (click)="trace(r.id)">{{r.number}}</a></td>
+              <td class="mat-cell">{{ r.received | amDifference : null : 's' | amDuration : 's'}}</td>
+            </tr>
+          </tbody>
+        </table>
+      </mat-card-content>
+    </mat-card>
+  </mat-grid-tile>
+  <mat-grid-tile>
+    <mat-card data-help="positions">
+      <mat-card-header>
+        <mat-card-title>
+          {{'Positions' | translate}}
+        </mat-card-title>
+      </mat-card-header>
+      <mat-card-content>
+        <table class="mat-table" *ngIf="data?.positions.length; else none">
+          <tr *ngFor="let p of data?.positions" class="mat-row">
+            <td class="mat-cell">{{p.value }}</td>
+            <td class="mat-cell">{{p.role | role}}</td>
+            <td class="mat-cell">
+              <button mat-icon-button (click)="reassign(p)" [matTooltip]="'Reassign' | translate"><mat-icon>swap_horiz</mat-icon></button>
+            </td>
+          </tr>
+        </table>
+      </mat-card-content>
+    </mat-card>
+  </mat-grid-tile>
+</mat-grid-list>
+<!-- dialog -->
+<ng-template #assign>
+  <h2 mat-dialog-title>{{'Reassign' | translate }}</h2>
+  <mat-dialog-content>
+    <form autocomplete="off" fxLayout="column">
+      <mat-form-field>
+        <mat-select placeholder="{{'Who' | translate}}" [formControl]="who" required>
+          <mat-option *ngFor="let u of assignable$ | async" [value]="u.id">{{u.name}}</mat-option>
+        </mat-select>
+      </mat-form-field>
+    </form>
+  </mat-dialog-content>
+  <mat-dialog-actions>
+    <button mat-button [mat-dialog-close]="who.value" color="primary" [disabled]="!who.valid">{{'OK' | translate}}</button>
+    <button mat-button mat-dialog-close>{{'Cancel' | translate}}</button>
+  </mat-dialog-actions>
+</ng-template>
+<ng-template #none>
+  <span class="mat-body-2">{{'None' | translate }}</span>
+</ng-template>

package/src/lib/admin/profiler/profiler.component.scss

@@ -0,0 +1,22 @@
+:host {
+  min-width: 560px;
+  display: block;
+}
+
+.mat-card {
+  width: calc(100% - 50px);
+  height: calc(100% - 50px);
+  overflow: hidden;
+
+  .mat-card-content {
+    height: inherit;
+  }
+
+  &:hover {
+    box-shadow: 0px 3px 3px -2px rgba(0, 0, 0, 0.2), 0px 3px 4px 0px rgba(0, 0, 0, 0.14), 0px 1px 8px 0px rgba(0, 0, 0, 0.12);
+  }
+}
+
+.mat-table {
+  width: 100%;
+}

package/src/lib/admin/profiler/profiler.component.ts

@@ -0,0 +1,268 @@
+import { Component, ViewChild, OnInit, OnDestroy, Inject, TemplateRef, ElementRef, HostListener } from '@angular/core';
+import { FormBuilder, Validators } from '@angular/forms';
+import { MatDialog } from '@angular/material/dialog';
+import { MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
+import { MediaObserver } from '@angular/flex-layout';
+import { AxisModel, BorderModel, ChartComponent, IPointEventArgs, ITooltipRenderEventArgs, LegendSeriesModel, MarkerOptionsModel, SeriesModel, TooltipSettingsModel, ZoomSettingsModel } from '@syncfusion/ej2-angular-charts';
+import { Subject, Observable } from 'rxjs';
+import { takeUntil, debounceTime, switchMap, filter, map } from 'rxjs/operators';
+const moment = require('moment');
+import { isObject } from '../../core/functions';
+import { BizDoc } from '../../core/decorators';
+import { GuideStep, UserInfo } from '../../core/models';
+import { UtilityRef } from '../utility-ref';
+import { PromptService } from '../../core/prompt.service';
+import { AccountService } from '../../core/account.service';
+import { DocumentInfo } from '../../core/info/document-info.service';
+import { SessionService } from '../../core/session.service';
+import { GuideService } from '../../core/guide/guide.service';
+import { TranslateService } from '../../core/translate.service';
+import { FONT_FAMILY } from '../../core/colors';
+import { PanesRouter } from '../../core/slots/router.service';
+import { ChatInfo } from '../../chat/chat-info';
+import { PaneRef } from '../../core/slots/pane-ref';
+import { OpenPolicy } from '../../core/configuration';
+
+@Component({
+  templateUrl: './profiler.component.html',
+  styleUrls: ['./profiler.component.scss'],
+  host: {
+    class: 'pane'
+  }
+})
+@BizDoc({ selector: 'bizdoc-user-profiler' })
+/** component*/
+export class ProfilerComponent implements OnInit, OnDestroy {
+  readonly search = this._fb.control(null);
+  @ViewChild('activity') chart: ChartComponent;
+  @ViewChild('activity', { read: ElementRef }) chartElement: ElementRef;
+  @ViewChild('assign') assign: TemplateRef<any>;
+  readonly who = this._fb.control(null, Validators.required);
+  readonly primaryXAxis = {
+    valueType: 'DateTime',
+    labelFormat: 'MMM dd',
+    labelStyle: {
+      fontFamily: FONT_FAMILY
+    }
+  } as AxisModel;
+  readonly primaryYAxis = {
+    labelStyle: {
+      size: '0px'
+    },
+  } as AxisModel;
+  readonly zoomSettings: ZoomSettingsModel = {
+    enableMouseWheelZooming: true,
+    enablePinchZooming: true,
+    toolbarItems: [],
+    enableSelectionZooming: false,
+    enableScrollbar: true
+  };
+  readonly tooltip: TooltipSettingsModel = {
+    enable: true,
+    shared: true,
+    textStyle: {
+      fontFamily: FONT_FAMILY
+    }
+  };
+  readonly legend: LegendSeriesModel = {
+    visible: false,
+    textStyle: {
+      fontFamily: FONT_FAMILY
+    }
+  };
+  readonly border = { width: 0 } as BorderModel;
+  readonly marker: MarkerOptionsModel = {
+    visible: true,
+    width: 10,
+    height: 10
+  }
+  users$: Observable<UserInfo[]>;
+  assignable$: Observable<UserInfo[]>;
+  palettes: string[] = this._session.accentPalette;
+  theme: 'Material' | 'MaterialDark' = this._session.theme.dark ? 'MaterialDark' : 'Material';
+  data: ProfileInfo;
+  cols = 2;
+  private readonly _destroy = new Subject<void>();
+  /** ctor */
+  constructor(private _sb: PromptService,
+    private _utilityRef: UtilityRef<boolean, ReassignModel, ProfileInfo, string>,
+    private _session: SessionService,
+    private _dialog: MatDialog,
+    private _documentInfo: DocumentInfo,
+    media: MediaObserver,
+    private _chat: ChatInfo,
+    private _guide: GuideService,
+    private _router: PanesRouter,
+    private _slot: PaneRef<ProfilerComponent>,
+    private _translate: TranslateService,
+    private _accounts: AccountService,
+    private _fb: FormBuilder) {
+    media.media$.pipe(takeUntil(this._destroy)).subscribe(m => this.cols = m.mqAlias === 'sm' || m.mqAlias === 'xm' ? 1 : 2);
+    _session.themeChange.pipe(takeUntil(this._destroy)).subscribe(t => {
+      this.theme = t.dark ? 'MaterialDark' : 'Material';
+      this.palettes = _session.accentPalette;
+    });
+  }
+  ngOnInit(): void {
+    this._slot.queryParamsChange.pipe(takeUntil(this._destroy)).subscribe(p => {
+      const { id } = p;
+      id && this._open(id);
+    });
+    this._slot.resize.pipe(takeUntil(this._destroy)).subscribe(this.resize.bind(this));
+    this.users$ = this.search.valueChanges.pipe(takeUntil(this._destroy),
+      debounceTime(250),
+      filter(v => !isObject(v)),
+      switchMap(v => this._accounts.findAll(v)));
+  }
+  @HostListener('window:keydown.f1', ['$event'])
+  guide(evt?: Event | KeyboardEvent) {
+    const steps: GuideStep[] = [{
+      selector: '[data-help=search]',
+      position: 'Below',
+      content: this._translate.get('ProfilerSearchHelp')
+    }];
+    if (this.data) {
+      steps.push({
+        selector: '[data-help=reassign]',
+        content: this._translate.get('ReassignHelp')
+      });
+      Object.keys(this.data.activity).length &&
+        steps.push({
+          selector: '[data-help=activity]',
+          content: this._translate.get('ActivityHelp')
+        });
+      this.data.pending.length &&
+        steps.push({
+          selector: '[data-help=pending]',
+          content: this._translate.get('PendingHelp')
+        });
+      this.data.positions.length &&
+        steps.push({
+          selector: '[data-help=positions]',
+          content: this._translate.get('PositionsHelp')
+        });
+    }
+    this._guide.start({
+      name: 'profiler',
+      steps
+    });
+    evt && evt.preventDefault();
+  }
+  change(evt: MatAutocompleteSelectedEvent) {
+    const { id } = evt.option.value;
+    this._router.navigate([], { queryParams: { id } });
+  }
+  /**
+   * 
+   * @param userId
+   */
+  private _open(userId: string) {
+    this._utilityRef.populate(userId).subscribe(e => {
+      this.data = e;
+      while (this.chart.series.length) this.chart.removeSeries(0);
+      this.chart.addSeries(this._series());
+    }, () => this._sb.error());
+  }
+  /** */
+  private _series(): SeriesModel[] {
+    return Object.keys(this.data.activity).map(a => {
+      const log = this.data.activity[a];
+      return {
+        type: 'Scatter',
+        name: this._actionName(a),
+        xName: 'time',
+        yName: 'duration',
+        dataSource: log.map(l => {
+          return {
+            id: l.id,
+            time: new Date(l.time),
+            duration: l.duration
+          };
+        })
+      };
+    });
+  }
+
+  private _actionName(name: string): string {
+    const action = this._session.profile.actions.find(a => a.name === name);
+    return action ? action.past || action.title : name;
+  }
+  @HostListener('window:resize')
+  resize() {
+    const { width, height } = getComputedStyle(this.chartElement.nativeElement.parentElement);
+    this.chart.width = width;
+    this.chart.height = height;
+  }
+  pointClick(evt: IPointEventArgs) {
+    const { id } = evt.series.dataSource[evt.pointIndex];
+    this._documentInfo.open(id);
+  }
+  display(item: UserInfo) {
+    return item ? item.name : null;
+  }
+  trace(id: number) {
+    this._router.navigate(['admin', 'utilities', 'document-trace'], {
+      queryParams: { id },
+      policy: OpenPolicy.Defer | OpenPolicy.Pinnable
+    });
+  }
+  chat(userId) {
+    this._chat.open(userId);
+  }
+  reassign(position?: PositionInfo) {
+    this.assignable$ = this._accounts.findAll().pipe(map(u => u.filter(u => u.id !== this.data.info.id)));
+    this._dialog.open(this.assign, {}).afterClosed().
+      subscribe(u =>
+        u && this._reassign(u, position)
+      );
+  }
+  /** */
+  private _reassign(who: string, position?: PositionInfo) {
+    this._utilityRef.execute({ who, ...position, userId: this.data.info.id }).subscribe(() => {
+      this._sb.toast('Assigned');
+      if (position)
+        this.data.positions.remove(position);
+      else
+        this.data.positions = [];
+    }, () =>
+      this._sb.error());
+  }
+  tooltipRender(e: ITooltipRenderEventArgs) {
+    e.text = `${moment.duration(e.point.y, 's').humanize()}`;
+  }
+  ngOnDestroy(): void {
+    this._destroy.next();
+    this._destroy.complete();
+  }
+}
+
+interface ProfileInfo {
+  positions: PositionInfo[];
+  activity: {
+    [action: string]: {
+      id: number;
+      /** seconds */
+      duration: number;
+      number: string;
+      time: Date;
+    }[]
+  };
+  pending: {
+    id: number;
+    received: Date;
+    number: string;
+  }[];
+  info: UserInfo;
+}
+interface PositionInfo {
+  type: string;
+  key: string;
+  value: string;
+  role: string;
+}
+interface ReassignModel {
+  userId: string;
+  who: string;
+  role?: string;
+  key?: any;
+}