@bizdoc/core 1.14.8 → 1.14.9

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

@@ -0,0 +1,150 @@
+<mat-toolbar>
+  <button mat-button (click)="save()" color="primary" [disabled]="!dirty">{{'SaveChanges'|translate}}</button>
+  <span class="divider"></span>
+  <bizdoc-search-input (valueChange)="search($event)"></bizdoc-search-input>
+  <button mat-icon-button [matMenuTriggerFor]="newMenu" [bizdocTooltip]="'Add'|translate"><mat-icon>add</mat-icon></button>
+  <mat-menu #newMenu>
+    <button mat-menu-item (click)="newRole()">{{'Role'|translate}}</button>
+    <button mat-menu-item (click)="newPattern()">{{'Pattern'|translate}}</button>
+    <button mat-menu-item (click)="newGroup()">{{'Group'|translate}} </button>
+  </mat-menu>
+  <button mat-icon-button [bizdocTooltip]="'Download' | translate" (click)="download()" [disabled]="dirty"><mat-icon>save_alt</mat-icon></button>
+</mat-toolbar>
+<mat-progress-bar [mode]="loading" [style.visibility]="loading ? 'visible':'hidden'"></mat-progress-bar>
+<div fxLayout="row" fxFlex>
+  <mat-nav-list class="timeline">
+    <mat-list-item *ngFor="let t of types" (click)="change(t.name)" [class.active]="t === type">{{t.title}}</mat-list-item>
+  </mat-nav-list>
+
+  <table mat-table matSort [dataSource]="dataSource" [style.display]="dataSource ? '': 'none'" fxFlex>
+    <ng-container *ngFor="let column of (type?.columns ||[])" [matColumnDef]="column.name">
+      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{column.label}}</th>
+      <td mat-cell *matCellDef="let element"> {{element[column.name]}} </td>
+    </ng-container>
+    <ng-container matColumnDef="key">
+      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{''}}</th>
+      <td mat-cell *matCellDef="let element">
+        <span [ngSwitch]="element.type">
+          <ng-container *ngSwitchCase="'group'">({{'Group'|translate}})</ng-container>
+          <ng-container *ngSwitchCase="'pattern'">({{'Pattern'|translate}})</ng-container>
+          <ng-container *ngSwitchDefault>
+            {{element.key}}
+          </ng-container>
+        </span>
+      </td>
+    </ng-container>
+    <ng-container matColumnDef="value">
+      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{''}}</th>
+      <td mat-cell *matCellDef="let element">
+        {{element.value}}
+      </td>
+    </ng-container>
+    <ng-container *ngFor="let role of roles" [matColumnDef]="role.name">
+      <th mat-header-cell *matHeaderCellDef>{{role.title}}</th>
+      <td mat-cell *matCellDef="let element" [attr.data-role]="role.name">
+        <ng-container *ngIf="positions[role.name][element.key]">
+          <ng-container *ngFor="let u of positions[role.name][element.key]; let first = first">
+            <ng-container *ngIf="!first">, </ng-container>
+            {{profiles[u]?.name}}
+          </ng-container>
+        </ng-container>
+      </td>
+    </ng-container>
+    <ng-container matColumnDef="options">
+      <th mat-header-cell *matHeaderCellDef></th>
+      <td mat-cell *matCellDef="let element">
+        <button mat-icon-button [matMenuTriggerFor]="options" *ngIf="element.type === 'pattern' || element.type === 'group'"><mat-icon>more_vert</mat-icon></button>
+        <mat-menu #options>
+          <ng-container *ngIf="element.type === 'pattern'">
+            <button mat-menu-item (click)="editPattern(element.key)">{{'Edit'|translate}}</button>
+            <mat-divider></mat-divider>
+            <button mat-menu-item (click)="deletePattern(element.key)">{{'Remove'|translate}} </button>
+          </ng-container>
+          <ng-container *ngIf="element.type === 'group'">
+            <button mat-menu-item (click)="editGroup(element.key)">{{'Edit'|translate}}</button>
+            <mat-divider></mat-divider>
+            <button mat-menu-item (click)="deleteGroup(element.key)">{{'Remove'|translate}} </button>
+          </ng-container>
+        </mat-menu>
+      </td>
+    </ng-container>
+
+    <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
+    <tr mat-row *matRowDef="let element; columns: displayedColumns" (click)="edit(element.key, $event)"></tr>
+  </table>
+</div>
+<!-- role template -->
+<ng-template #roleTpl>
+  <h2 mat-dialog-title>{{'Role' | translate }}</h2>
+  <mat-dialog-content>
+    <form [formGroup]="role" fxLayout="column">
+      <mat-form-field>
+        <input matInput formControlName="title" [placeholder]="'Title'| translate" required autocomplete="off" />
+      </mat-form-field>
+    </form>
+  </mat-dialog-content>
+  <mat-dialog-actions>
+    <button mat-button [mat-dialog-close]="role.value" color="primary" [disabled]="!role.valid">{{'OK' | translate}}</button>
+    <button mat-button mat-dialog-close>{{'Cancel' | translate}}</button>
+  </mat-dialog-actions>
+</ng-template>
+<!-- pattern template -->
+<ng-template #patternTpl>
+  <h2 mat-dialog-title>{{'Pattern' | translate }}</h2>
+  <mat-dialog-content>
+    <form [formGroup]="pattern" fxLayout="column">
+      <mat-form-field>
+        <input matInput formControlName="title" [placeholder]="'Title'| translate" required autocomplete="off" />
+      </mat-form-field>
+      <mat-form-field>
+        <input matInput formControlName="expression" [placeholder]="'Regex'| translate" required autocomplete="off" />
+        <mat-hint><span [innerHTML]="'RegexHint' | translate : 'https://regex101.com/'| sanitizeHtml"></span></mat-hint>
+      </mat-form-field>
+    </form>
+  </mat-dialog-content>
+  <mat-dialog-actions>
+    <button mat-button [mat-dialog-close]="pattern.value" color="primary" [disabled]="!pattern.valid">{{'OK' | translate}}</button>
+    <button mat-button mat-dialog-close>{{'Cancel' | translate}}</button>
+  </mat-dialog-actions>
+</ng-template>
+<!-- group -->
+<ng-template #groupTpl>
+  <h2 mat-dialog-title>{{'Group' | translate }}</h2>
+  <mat-dialog-content>
+    <form [formGroup]="group" fxLayout="column">
+      <mat-form-field>
+        <input matInput formControlName="title" [placeholder]="'Title'| translate" required autocomplete="off" />
+      </mat-form-field>
+      <mat-form-field>
+        <mat-select [placeholder]="'Items'|translate" multiple formControlName="items" required>
+          <mat-select-trigger>
+            {{group.value.items ? group.value.items[0] : ''}}
+            <span *ngIf="group.value.items?.length > 1" class="additional-selection">
+              (+{{group.value.items.length - 1}} {{(group.value.items?.length === 2 ? 'Other' : 'Others')|translate}})
+            </span>
+          </mat-select-trigger>
+          <mat-option *ngFor="let v of source" [value]="v.key">
+            <span *ngIf="!type.columns">{{v.value}}</span>
+            <span *ngIf="type.columns"><span *ngFor="let c of type.columns">{{v.value[c.name]}}</span></span>
+          </mat-option>
+        </mat-select>
+      </mat-form-field>
+    </form>
+  </mat-dialog-content>
+  <mat-dialog-actions>
+    <button mat-button [mat-dialog-close]="group.value" color="primary" [disabled]="!group.valid">{{'OK' | translate}}</button>
+    <button mat-button mat-dialog-close>{{'Cancel' | translate}}</button>
+  </mat-dialog-actions>
+</ng-template>
+<ng-template #noRoleTpl>
+  <mat-dialog-content>
+    {{'NoRoles'|translate : type?.title}}
+  </mat-dialog-content>
+  <mat-dialog-actions>
+    <button mat-button [mat-dialog-close]="true" color="primary">{{'CreateRole' | translate}}</button>
+    <button mat-button mat-dialog-close>{{'Cancel' | translate}}</button>
+  </mat-dialog-actions>
+</ng-template>
+<!--<form style="display:none">
+  <input type="file" name="file" (onchange)="upload($event)" #file/>
+</form>-->

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

@@ -0,0 +1,20 @@
+:host {
+  -ms-flex-direction: column;
+  -webkit-flex-direction: column;
+  flex-direction: column;
+}
+
+table {
+  width: 100%;
+}
+
+.form {
+  padding: 8px;
+}
+
+table :ng-deep .mat-cell {
+  cursor: pointer;
+  border-left-width: 1px;
+  border-left-style: outset;
+  padding: 0 4px !important;
+}

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

@@ -0,0 +1,464 @@
+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);
+        this.loading = null;
+      });
+    });
+  }
+  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/assign.component.html

@@ -0,0 +1,14 @@
+<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>