@bizdoc/core 1.13.8 → 1.13.12

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

@@ -0,0 +1,463 @@
+import { Component, OnInit, ViewChild, OnDestroy, TemplateRef, Inject, ElementRef, HostListener } 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';
+import { Workbook } from '@syncfusion/ej2-excel-export';
+import { Worksheet } from '@syncfusion/ej2-excel-export/src/worksheet';
+import { Row } from '@syncfusion/ej2-excel-export/src/row';
+import { Column } from '@syncfusion/ej2-excel-export/src/column';
+import { AccountService } from '../../core/account.service';
+
+@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 {
+  @ViewChild('file', { static: true }) _fileElement: ElementRef<HTMLInputElement>;
+  dataSource: MatTableDataSource<any>;
+  @ViewChild(MatSort) sort: MatSort;
+  readonly types: Type[];
+  roles: Role[];
+  displayedColumns: string[];
+  profiles: { [id: string]: 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,
+    private _accounts: AccountService,
+    title: WindowTitleService,
+    private _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.loading = 'query';
+    this._datasources.map('users').subscribe(users => {
+      this.profiles = users;
+      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);
+        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;
+    });
+  }
+  /**
+   * Ctrl-s save
+   * @param event
+   */
+  @HostListener('document:keydown', ['$event'])
+  handleKeyboardEvent(event: KeyboardEvent) {
+    if (this.dirty && event.ctrlKey && (event.which === 83 || event.which === 115)) {
+      this.save();
+      event.preventDefault();
+    }
+  }
+  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;
+      });
+  }
+  async download() {
+    const { profiles } = this, worksheets = [];
+    for (let i = 0; i < this.types.length; i++) {
+      let type = this.types[i];
+      const model = this._everything[type.name];
+      let positions = model.positions;
+      if (!positions || !Object.keys(positions).length) continue;
+      const roles = this._session.profile.roles.filter(r => r.dataType === type.name && positions[r.name]);
+      const cells = [{
+        index: 1,
+        value: this._translate.get('Type'),
+        style: {
+          bold: true
+        }
+      }, {
+        index: 2,
+        value: this._translate.get('Value'),
+        style: {
+          bold: true
+        }
+      }, {
+        index: 3,
+        value: ''
+      }] as Cell[];
+      if (type.columns) type.columns.slice(2).forEach((c, i) => cells.push({
+        index: i + 4,
+        value: ''
+      } as Cell));
+      roles.forEach(r => cells.push({
+        index: cells.length + 1,
+        value: r.title,
+        style: {
+          bold: true
+        }
+      } as Cell));
+      const rows = [] as Row[];
+      rows.push({
+        index: 1,
+        cells
+      } as Row);
+      model.patterns && model.patterns.forEach(p => {
+        const row = {
+          index: rows.length + 1,
+          cells: [{
+            index: 1,
+            value: this._translate.get('Pattern')
+          }, {
+            index: 2,
+            value: p.expression
+          }, {
+            index: 3,
+            value: p.title
+          }]
+        } as Row;
+        addcolumns(p.name, row);
+        rows.push(row);
+      });
+      model.groups && model.groups.forEach(g => {
+        const row = {
+          index: rows.length + 1,
+          cells: [{
+            index: 1,
+            value: this._translate.get('Group')
+          }, {
+            index: 2,
+            value: g.items.join(', ')
+          }, {
+            index: 3,
+            value: g.title
+          }]
+        } as Row;
+        addcolumns(g.name, row);
+        rows.push(row);
+      });
+      let datasource = await this._datasources.all(type.name).toPromise();
+      datasource.forEach(d => {
+        const row = {
+          index: rows.length + 1,
+          cells: [{
+            index: 1,
+            value: this._translate.get('Key')
+          }]
+        } as Row;
+        if (type.columns) type.columns.forEach((c, i) => row.cells.push({
+          index: i + 2,
+          value: d.value[c.name]
+        }));
+        else row.cells.push({ index: 2, value: d.value });
+        addcolumns(d.key, row);
+        rows.push(row);
+      });
+      const columns = [];
+      type.columns && type.columns.forEach((_, i) => columns.push({ index: i + 1, width: 250 } as Column));
+      roles.forEach((_, i) => columns.push({ index: columns.length + i + 2 } as Column));
+      worksheets.push({
+        name: type.title,
+        columns,
+        rows
+      } as Worksheet
+      );
+      function addcolumns(key, row: Row) {
+        roles.forEach(r => {
+          const users = positions[r.name][key];
+          row.cells.push({
+            index: row.cells.length + 1,
+            value: users ? users.map(u => profiles[u] ? profiles[u].name : u).join(', ') : ''
+          });
+        });
+      }
+    }
+    const book = new Workbook(
+      {
+        worksheets,
+      },
+      'xlsx'
+    );
+    book.save(`${this._translate.get('Positions')}.xlsx`);
+  }
+  // async upload(evt: InputEvent) {
+  //   const { files } = evt.srcElement as HTMLInputElement;
+  //   if (files && files.length) {
+  //     const file = files.item(0);
+  //     var reader = new FileReader();
+  //     reader.onload = e => { };
+  //     const text = await file.text();
+  //     //reader.readAs(text);
+  //     const wb = XLSX.readFile(file.name, {});
+  //     for (let i = 0; i < wb.SheetNames.length; i++) {
+  //       let title = wb.SheetNames[i], ws = wb.Sheets[title];
+  //       let type = this.types.find(t => t.title === title);
+  //       if (!type) throw '';
+  //       let roles = this._session.profile.roles.filter(r => r.dataType === type.name);
+  //       let row = ws['!rows'][0];
+  //       for (let c = 0; c < ws['!cols'].length; c++) {
+  //         let col = ws['!cols'][c];
+  //         //let role = roles.find(r => r.title === ws.);
+  //       //  if (!role) {
+  //       //    this._everything[type.name].roles.push({name: '', title: ''});
+  //       //  }
+  //       }
+  //       for (let r = 0; r < ws['!rows'].length; r++) {
+  //         let row = ws['!rows'][r];
+  //         for (let c = 0; c < ws['!cols'].length; c++) {
+  //           let col = ws['!cols'][c], content = '';
+  //           if (content) {
+  //             //let users = content.split(', ').map(name=> this.profiles.find(u=> u.name === name));
+
+  //           }
+  //           else { }
+
+  //         }
+  //       }
+  //     }
+  //   }
+  //}
+  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;
+}
+interface Cell { }

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()" [bizdocTooltip]="'ReassignAll' | translate" [disabled]="!data || !data.positions.length" data-help="reassign"><mat-icon>swap_horiz</mat-icon></button>
+  <button mat-icon-button (click)="guide()" [bizdocTooltip]="'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)" [bizdocTooltip]="'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)" [bizdocTooltip]="'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%;
+}