@bizdoc/core 1.14.5 → 1.14.9

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

@@ -0,0 +1,64 @@
+<h2 mat-dialog-title>{{'Settings' | translate }}</h2>
+<mat-dialog-content>
+  <form autocomplete="off" [formGroup]="form">
+    <div fxLayout="column" formGroupName="outOfOffice">
+      <h3 class="mat-body-strong">{{'OutOfOffice'|translate}}</h3>
+      <mat-slide-toggle formControlName="active">{{'Active' | translate}}</mat-slide-toggle>
+      <br />
+      <mat-form-field fxFlex>
+        <input matInput [formControl]="substitute" type="search" [matAutocomplete]="sauto" #substitueInput
+               [placeholder]="'Associate' | translate" [required]="outOfOffice.value.active" />
+        <mat-autocomplete #sauto="matAutocomplete" [displayWith]="userDisplay"
+                          (optionSelected)="setId($event)">
+          <mat-option *ngFor="let u of ousers$ | async" [value]="u">
+            <span>{{u.name}}</span>
+          </mat-option>
+        </mat-autocomplete>
+      </mat-form-field>
+      <div>
+        <mat-form-field>
+          <input matInput [matDatepicker]="from" formControlName="from" placeholder="{{'From'| translate}}" />
+          <mat-datepicker-toggle [for]="from" matSuffix></mat-datepicker-toggle>
+          <mat-datepicker #from></mat-datepicker>
+        </mat-form-field>
+        &nbsp;
+        <mat-form-field>
+          <input matInput [matDatepicker]="to" formControlName="to" [min]="form.value?.from" placeholder="{{'To'| translate}}" />
+          <mat-datepicker-toggle [for]="to" matSuffix></mat-datepicker-toggle>
+          <mat-datepicker #to></mat-datepicker>
+        </mat-form-field>
+      </div>
+    </div>
+    <!--<hr />-->
+    <div fxLayout="column" formGroupName="grantAccess">
+      <h3 class="mat-body-strong">{{'GrantAccess'|translate}}</h3>
+      <mat-slide-toggle formControlName="active">{{'Active' | translate}}</mat-slide-toggle>
+      <mat-form-field>
+        <mat-chip-list #grantList [attr.aria-label]="" [disabled]="!grantAccess.value.active">
+          <mat-chip *ngFor="let u of grantAccess.value.users || []"
+                    [removable]="grantAccess.value.active"
+                    (removed)="removeGrant(u)">
+            {{u | userName | async}}
+            <mat-icon matChipRemove>cancel</mat-icon>
+          </mat-chip>
+          <input [formControl]="grants" placeholder="{{'Users'| translate}}"
+                 [required]="grantAccess.value.active"
+                 [matAutocomplete]="grantAuto"
+                 #grantInput
+                 [matChipInputFor]="grantList"
+                 [matChipInputSeparatorKeyCodes]="separatorKeysCodes">
+        </mat-chip-list>
+        <mat-autocomplete #grantAuto="matAutocomplete" (optionSelected)="addGrant(grantInput, $event)">
+          <mat-option *ngFor="let u of gusers$ | async" [value]="u.id">
+            {{u.name}}
+            <span *ngIf="u.email">&nbsp; - {{u.email}}</span>
+          </mat-option>
+        </mat-autocomplete>
+      </mat-form-field>
+    </div> 
+  </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/profiler/outofoffice.component.ts

@@ -0,0 +1,146 @@
+import { ENTER, COMMA, SEMICOLON } from "@angular/cdk/keycodes";
+import { ViewChild } from "@angular/core";
+import { Component, OnInit, Inject } from "@angular/core";
+import { FormBuilder, FormGroup, Validators } from "@angular/forms";
+import { MatAutocompleteSelectedEvent } from "@angular/material/autocomplete";
+import { MatChipInput } from "@angular/material/chips";
+import { MatDialogRef, MAT_DIALOG_DATA } from "@angular/material/dialog";
+import { MatInput } from "@angular/material/input";
+import { Observable, takeUntil, startWith, tap, filter, switchMap, map } from "rxjs";
+import { AccountService } from "../../core/account.service";
+import { isString } from "../../core/functions";
+import { OutOfOfficeSettings, GrantSettings, UserInfo, } from "../../core/models";
+
+export interface OutOfOfficeData {
+  userId: string;
+  outOfOffice: OutOfOfficeSettings;
+  grantAccess: GrantSettings;
+}
+
+@Component({ templateUrl: 'outofoffice.component.html' })
+export class ProfileSettingsDialog implements OnInit {
+  readonly separatorKeysCodes: number[] = [ENTER, COMMA, SEMICOLON];
+  readonly substitute = this._fb.control([]);
+  readonly grants = this._fb.control([]);
+  @ViewChild('substitueInput', { read: MatInput }) substitueInput: MatInput;
+  @ViewChild('grantInput', { read: MatChipInput }) grantInput: MatChipInput;
+  readonly outOfOffice = this._fb.group({
+    active: this._fb.control(false),
+    substitueId: this._fb.control(null),
+    from: this._fb.control(null),
+    to: this._fb.control(null)
+  });
+  readonly grantAccess = this._fb.group({
+    active: this._fb.control(false),
+    users: this._fb.control(null)
+  });
+  readonly form = this._fb.group({
+    outOfOffice: this.outOfOffice,
+    grantAccess: this.grantAccess
+  });
+  ousers$: Observable<UserInfo[]>;
+  gusers$: Observable<UserInfo[]>;
+
+  constructor(private _accounts: AccountService,
+    private _dialogRef: MatDialogRef<ProfileSettingsDialog>,
+    private _fb: FormBuilder,
+    @Inject(MAT_DIALOG_DATA)
+    public model: OutOfOfficeData) {
+  }
+  ngOnInit(): void {
+    this.form.patchValue(this.model);
+    const { active, to, from } = this.outOfOffice.controls;
+    if (!this.model.outOfOffice || !this.model.outOfOffice.active) {
+      to.disable({ emitEvent: false });
+      from.disable({ emitEvent: false });
+      this.substitute.disable({ emitEvent: false });
+    }
+    else {
+          this.substitute.addValidators(Validators.required);
+      if (!this.model.outOfOffice.from)
+        to.disable({ emitEvent: false });
+    }
+    this.model.outOfOffice.substitueId &&
+      this._accounts.get(this.model.outOfOffice.substitueId).subscribe(u =>
+        this.substitute.setValue(u, { emitEvent: false }));
+    active.valueChanges.pipe(takeUntil(this._dialogRef.afterClosed())).
+      subscribe(active => {
+        if (active) {
+          from.enable();
+          from.value && to.enable();
+          this.substitute.enable();
+          this.substitute.addValidators(Validators.required);
+          this.substitueInput.focus();
+        }
+        else {
+          from.disable();
+          to.disable();
+          this.substitute.clearValidators();
+          this.substitute.disable();
+        }
+      });
+    this.ousers$ = this.substitute.valueChanges.pipe(takeUntil(this._dialogRef.afterClosed()),
+      filter(v => isString(v)),
+      switchMap(v => this._accounts.findAll(v)),
+      map(r => r.filter(u => u.id !== this.model.userId)));
+    from.valueChanges.pipe(takeUntil(this._dialogRef.afterClosed())).
+      subscribe(v => {
+        if (v)
+          to.enable();
+        else
+          to.disable();
+      });
+    if (!this.model.grantAccess || !this.model.grantAccess.active) {
+      this.grants.disable({ emitEvent: false });
+    }
+    this.grantAccess.controls['active'].valueChanges.pipe(takeUntil(this._dialogRef.afterClosed())).
+      subscribe(v => {
+        if (v) {
+          this.grants.enable();
+          this.grants.addValidators(Validators.required);
+          this.grantInput.focus();
+        }
+        else {
+          this.grants.clearValidators();
+        }
+      });
+    this.gusers$ = this.grants.valueChanges.pipe(takeUntil(this._dialogRef.afterClosed()),
+      filter(v => isString(v)),
+      switchMap(v => this._accounts.findAll(v)),
+      map(r => r.filter(u => u.id !== this.model.userId)));
+  }
+  userDisplay = (item: UserInfo) => {
+    return item ? item.name : null;
+  }
+  setId(event: MatAutocompleteSelectedEvent) {
+    const { id } = event.option.value as UserInfo;
+    this.outOfOffice.controls['substitueId'].setValue(id);
+  }
+  /**
+   * 
+   * @param id
+   */
+  removeGrant(id: string): void {
+    const users = this.form.value.grantAccess.users as string[];
+    const index = users.indexOf(id);
+
+    if (index >= 0)
+      users.splice(index, 1);
+    this.form.patchValue({});
+  }
+  /**
+   * 
+   * @param inp
+   * @param event
+   */
+  addGrant(inp: HTMLInputElement, event: MatAutocompleteSelectedEvent): void {
+    const users = this.form.value.grantAccess.users as string[];
+    const id = event.option.value as string;
+    if (!users)
+      this.grantAccess.controls['users'].setValue([id]);
+    else
+      users.push(id);
+    inp.value = '';
+    this.form.patchValue({});
+  }
+}

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

@@ -0,0 +1,110 @@
+<mat-toolbar>
+  <mat-icon (click)="null" class="mat-icon-rtl-mirror">search</mat-icon>
+  <input matInput type="search" [matAutocomplete]="auto" [formControl]="search" data-help="search" width="20" />
+  <mat-autocomplete #auto="matAutocomplete" [displayWith]="userDisplay"
+                    (optionSelected)="change($event)">
+    <mat-option *ngFor="let u of users$ | async" [value]="u">
+      <span>{{u.name}}</span>
+    </mat-option>
+  </mat-autocomplete>
+  <span class="divider"></span>
+  <button mat-icon-button (click)="guide()" [bizdocTooltip]="'Help' | translate"><mat-icon>help_outline</mat-icon></button>
+</mat-toolbar>
+<div *ngIf="data" fxLayout="row wrap">
+  <!-- info -->
+  <mat-card fxFlex>
+    <mat-card-header>
+      <mat-card-title>
+        <span>{{data.info.name}}</span>
+      </mat-card-title>
+    </mat-card-header>
+    <mat-card-content>
+      <br />
+    </mat-card-content>
+    <mat-card-actions>
+      <button mat-icon-button (click)="chat()" [bizdocTooltip]="'Chat' | translate" [disabled]="!data"><mat-icon>chat</mat-icon></button>
+      <span class="divider"></span>
+      <button mat-icon-button (click)="settings()" [bizdocTooltip]="'Settings' | translate" [disabled]="!data" data-help="settings"><mat-icon>settings</mat-icon></button>
+    </mat-card-actions>
+  </mat-card>
+  <mat-card fxFlex 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>
+  <!-- pending -->
+  <mat-card fxFlex 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>
+  <!-- positions -->
+  <mat-card fxFlex 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)" [bizdocTooltip]="'Reassign' | translate"><mat-icon>swap_horiz</mat-icon></button>
+          </td>
+        </tr>
+      </table>
+    </mat-card-content>
+    <mat-card-actions>
+      <span class="divider"></span>
+      <button mat-icon-button (click)="reassign()" [bizdocTooltip]="'ReassignAll' | translate" [disabled]="!data || !data.positions.length" data-help="reassign"><mat-icon>swap_horiz</mat-icon></button>
+    </mat-card-actions>
+  </mat-card>
+</div>
+<!-- assign dialog -->
+<ng-template #assignTpl>
+  <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,23 @@
+:host {
+  min-width: 560px;
+  display: block;
+}
+
+.mat-card {
+    margin: 5px;
+/*  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,302 @@
+import { Component, ViewChild, OnInit, OnDestroy, TemplateRef, ElementRef, HostListener, ChangeDetectorRef } from '@angular/core';
+import { FormBuilder, Validators } from '@angular/forms';
+import { MatDialog } from '@angular/material/dialog';
+import { MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
+import { COMMA, ENTER, SEMICOLON } from '@angular/cdk/keycodes';
+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';
+import dayjs from 'dayjs';
+import { isObject } from '../../core/functions';
+import { BizDoc } from '../../core/decorators';
+import { GrantSettings, GuideStep, OutOfOfficeSettings, 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';
+import { ProfileSettingsDialog, OutOfOfficeData } from './outofoffice.component';
+
+@Component({
+  templateUrl: './profiler.component.html',
+  styleUrls: ['./profiler.component.scss'],
+  host: {
+    class: 'pane'
+  },
+  entryComponents: [ProfileSettingsDialog]
+})
+@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('assignTpl') assignTpl: 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>();
+  readonly separatorKeysCodes: number[] = [ENTER, COMMA, SEMICOLON];
+  /** ctor */
+  constructor(private _sb: PromptService,
+    private _utilityRef: UtilityRef<boolean, ProfilerModel, ProfileInfo, string>,
+    private _session: SessionService,
+    private _dialog: MatDialog,
+    private _documentInfo: DocumentInfo,
+    media: MediaObserver,
+    private _chat: ChatInfo,
+    private _guide: GuideService,
+    private _router: PanesRouter,
+    private _cd: ChangeDetectorRef,
+    private _pane: 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._pane.queryParamsChange.subscribe(p => {
+      const { userId } = p;
+      userId && this._open(userId);
+    });
+    this._pane.resized.pipe(takeUntil(this._destroy)).subscribe(() => this.chart?.chartResize());
+    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[] = [];
+    if (this.data) {
+      steps.push({
+        selector: '[data-help=settings]',
+        content: this._translate.get('OutOfOfficeHelp')
+      });
+      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')
+        });
+      steps.push({
+        selector: '[data-help=reassign]',
+        content: this._translate.get('ReassignHelp')
+      });
+    }
+    else steps.push({
+      selector: '[data-help=search]',
+      position: 'Below',
+      content: this._translate.get('ProfilerSearchHelp')
+    });
+    this._guide.start({
+      name: 'profiler',
+      steps
+    });
+    evt && evt.preventDefault();
+  }
+  change(evt: MatAutocompleteSelectedEvent) {
+    const { id: userId } = evt.option.value;
+    this._router.navigate([], { queryParams: { userId } });
+  }
+  /**
+   * 
+   * @param userId
+   */
+  private _open(userId: string) {
+    this._utilityRef.populate(userId).subscribe(e => {
+      this.data = e;
+      this.search.reset(null, { emitEvent: false });
+      this._cd.detectChanges();
+      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;
+  }
+  pointClick(evt: IPointEventArgs) {
+    const { id } = evt.series.dataSource[evt.pointIndex];
+    this._documentInfo.open(id);
+  }
+  userDisplay(item: UserInfo) {
+    return item ? item.name : null;
+  }
+  trace(id: number) {
+    this._router.navigate(['admin', 'utilities', 'document-trace'], {
+      queryParams: { documentId: id.encodeId() },
+      policy: OpenPolicy.Defer | OpenPolicy.Pinnable
+    });
+  }
+  chat() {
+    this._chat.open(this.data.info.id);
+  }
+  reassign(position?: PositionInfo) {
+    this.assignable$ = this._accounts.findAll().pipe(map(u => u.filter(u => u.id !== this.data.info.id)));
+    this._dialog.open(this.assignTpl, {}).afterClosed().
+      subscribe(u =>
+        u && this._reassign(u, position)
+      );
+  }
+  settings() {
+    this._dialog.open(ProfileSettingsDialog, {
+      closeOnNavigation: true,
+      data: {
+        userId: this.data.info.id,
+        grantAccess: this.data.grantAccess,
+        outOfOffice: this.data.outOfOffice
+      } as OutOfOfficeData
+    }).afterClosed().
+      subscribe(v =>
+        v && this._utilityRef.execute({
+          outOfOffice: v.outOfOffice,
+          grantAccess: v.grantAccess,
+          userId: this.data.info.id
+        }).subscribe(() => {
+          Object.assign(this.data);
+          this._sb.toast('ChangesSaved');
+        }, () =>
+          this._sb.error()));
+  }
+  /** */
+  private _reassign(who: string, position?: PositionInfo) {
+    this._utilityRef.execute({ reassign: { 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 = `${dayjs.duration(e.point.y as number, 's').humanize()}`;
+  }
+  ngOnDestroy(): void {
+    this._destroy.next();
+    this._destroy.complete();
+  }
+}
+
+interface ProfileInfo {
+  outOfOffice: OutOfOfficeSettings;
+  grantAccess: GrantSettings;
+  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 ProfilerModel {
+  outOfOffice?: OutOfOfficeSettings;
+  grantAccess?: GrantSettings;
+  userId: string;
+  reassign?: {
+    who: string;
+    role?: string;
+    key?: any;
+  }
+}
+

package/src/lib/admin/utility-ref.ts

@@ -0,0 +1,44 @@
+import { HttpClient, HttpErrorResponse, HttpResponse } from '@angular/common/http';
+import { Observable, throwError } from 'rxjs';
+import { tap, map, filter, catchError } from 'rxjs/operators';
+import { HubService, JobProgress } from '../core/hub.service';
+import { Utility } from '../core/models';
+import { isObject } from '../core/functions';
+import { PromptService } from '../core/prompt.service';
+
+export class UtilityRef<TResult = any, TResultArgs = any, TModel = any, TModelArgs = any, O = any> {
+  private _jobId: string;
+  get jobId(): string { return this._jobId; }
+  constructor(private _utility: Utility,
+    private _hub: HubService,
+    private _sb: PromptService,
+    private _http: HttpClient) {
+  }
+  public get progress(): Observable<JobProgress> {
+    return this._hub.jobProgress$.pipe(
+      filter(e => e.jobId === this.jobId),
+      map(e => e.event));
+  }
+  execute(args?: TResultArgs): Observable<TResult> {
+    return this._http.post(`/api/utility/${this._utility.name}`, args, { observe: 'response' }).pipe(tap((r: HttpResponse<TResult>) => {
+      this._jobId = r.headers.get('job-id');
+    }), map((r: HttpResponse<TResult>) => r.body), catchError((e: HttpErrorResponse) => {
+      if (e.status === 406) // validation exception
+        this._sb.errorString(e.error);
+      else
+        this._sb.error('NetworkErr');
+      return throwError(e);
+    }));
+  }
+  abort(): Observable<any> {
+    return this._http.delete(`/api/utility/${this.jobId}`, null);
+  }
+  populate(args?: TModelArgs): Observable<TModel> {
+    return this._http.get<TModel>(`/api/utility/${this._utility.name}`, {
+      params: isObject(args) ? args : args !== undefined ? { value: args } as any: undefined,
+    });
+  }
+  get options(): O {
+    return this._utility.options || {};
+  }
+}