@bizdoc/core 1.8.8 → 1.8.9

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

@@ -0,0 +1,166 @@
+import { Component, OnInit, Inject, OnDestroy, ViewChild, TemplateRef } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { FormBuilder, Validators } from '@angular/forms';
+import { Subject, Observable } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+import { Cube, AxisType } from '../../core/models';
+import { BizDoc } from '../../core/decorators';
+import { UtilityComponent } from '../../core/base';
+import { SessionService } from '../../core/session.service';
+import { UtilityRef } from "../utility-ref";
+import { PromptService } from '../../core/prompt.service';
+import { Directionality } from '@angular/cdk/bidi';
+import { MatTableDataSource } from '@angular/material/table';
+import { MatDialog } from '@angular/material/dialog';
+import { MatCheckboxChange } from '@angular/material/checkbox';
+import { DatasourceService } from '../../core/datasource.service';
+import { AXIS_VALUE_PATTERN } from '../../cube/cube.service';
+import { MatSort } from '@angular/material/sort';
+import { MatPaginator } from '@angular/material/paginator';
+
+const PAGE_SIZE = 20;
+
+@Component({
+  templateUrl: './patterns.component.html'
+})
+@BizDoc({
+  selector: 'bizdoc-patterns'
+})
+export class PatternsComponent implements UtilityComponent<boolean, any>, OnInit, OnDestroy {
+  readonly PAGE_SIZE = PAGE_SIZE;
+  readonly pattern = AXIS_VALUE_PATTERN;
+  dataSource: MatTableDataSource<Pattern>;
+  dirty = false;
+  readonly segments: { [key: string]: Observable<Source[]> } = {};
+  roles: Role[] = [];
+  @ViewChild('properties', { static: true }) properties: TemplateRef<any>;
+  @ViewChild(MatSort) sort: MatSort;
+  @ViewChild(MatPaginator) paginator: MatPaginator;
+  include: string[];
+  cube: Cube;
+  readonly displayedColumns = ['title'];
+  readonly axes = this._fb.group({});
+  readonly form = this._fb.group({
+    axes: this.axes,
+    title: this._fb.control(null, Validators.required),
+    roles: this._fb.control([], Validators.required)
+  });
+  private readonly _destroy = new Subject<void>();
+  paging: boolean;
+  constructor(private _session: SessionService,
+    private _dir: Directionality,
+    private _fb: FormBuilder, @Inject(UtilityRef) private _ref: UtilityRef<boolean, Pattern[], Pattern[], any, Options>, private _type: DatasourceService, private _http: HttpClient, private _sb: PromptService, private _dialog: MatDialog) {
+    const { cube, axes } = this._ref.options;
+    const ccube = cube ? this._session.profile.cubes.find(c => c.name === cube) : this._session.profile.cubes[0];
+    if (!ccube)
+      throw 'cube not found.';
+    this.cube = ccube;
+    this.include = axes || ccube.axes.filter(a => !a.hidden && a.combination).map(a => a.name);
+    this.cube.axes.forEach(a => {
+      this.axes.addControl(a.name, this._fb.control(null));
+      this.segments[a.name] = this._type.all(a.dataType);
+    });
+  }
+  ngOnInit() {
+    this.form.valueChanges.pipe(takeUntil(this._destroy)).subscribe(() => this.dirty = true);
+    this._http.get<Role[]>('api/positions/roles').subscribe(r => {
+      this._ref.populate().subscribe(p => {
+        this._columns(r);
+        this._datasource(p);
+      });
+    });
+  }
+  private _datasource(data: Pattern[]) {
+    // roles sorting
+    data.forEach(p => p.roles && p.roles.forEach(r => p[r] = true));
+    this.dataSource = new MatTableDataSource(data || []);
+    this.dataSource.sort = this.sort;
+    this.paging = data.length > PAGE_SIZE;
+    this.dataSource.paginator = this.paginator;
+  }
+
+  private _columns(roles: Role[]) {
+    this.roles = roles;
+    roles.forEach(e => this.displayedColumns.push(e.name));
+    this.displayedColumns.push('options');
+  }
+
+  toggle(pattern: Pattern, role: string, evt: MatCheckboxChange) {
+    if (!pattern.roles) pattern.roles = [];
+    if (evt.checked) {
+      pattern.roles.push(role);
+      pattern[role] = true;
+    }
+    else {
+      pattern.roles.remove(role);
+      pattern[role] = false;
+    }
+    this.dirty = true;
+  }
+  create() {
+    this.form.reset({ axes: {}, roles: [] }, { emitEvent: false });
+    this._dialog.open(this.properties, {
+      direction: this._dir.value,
+      minWidth: '66vw',
+      closeOnNavigation: true
+    }).afterClosed().subscribe((pattern: Pattern) => {
+      if (pattern) {
+        pattern.name = pattern.title.normalize();
+        this._normalize(pattern);
+        this.dataSource.data.push(pattern);
+        this.dataSource.filter = '';
+      }
+    });
+  }
+  private _normalize(pattern: Pattern) {
+    this.roles.forEach(r => pattern[r.name] = pattern.roles.indexOf(r.name) > -1);
+    Object.keys(pattern.axes).forEach(k => {
+      if (pattern.axes[k] === null)
+        delete pattern.axes[k];
+    });
+  }
+
+  delete(pattern: Pattern) {
+    this.dataSource.data.remove(pattern);
+  }
+  edit(pattern: Pattern) {
+    this.form.patchValue(pattern, { emitEvent: false });
+    this._dialog.open(this.properties).afterClosed().subscribe(r => {
+      if (r) {
+        Object.assign(pattern, r);
+        this._normalize(pattern);
+        this.dirty = true;
+      }
+    });
+  }
+  save() {
+    this._ref.execute(this.dataSource.data).subscribe(() => {
+      this.dirty = false;
+      this._sb.toast('ChangesSaved');
+    }, () => this._sb.error());
+  }
+  ngOnDestroy(): void {
+    this._destroy.next();
+    this._destroy.complete();
+  }
+}
+interface Options {
+  cube: string;
+  axes: string[];
+}
+interface Pattern {
+  name: string;
+  title: string;
+  roles: string[];
+  axes: {
+    [axis: string]: AxisType;
+  };
+}
+interface Role {
+  title: string;
+  name: string;
+}
+interface Source {
+  key: any;
+  value: any;
+}

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

@@ -0,0 +1,21 @@
+<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-button [matMenuTriggerFor]="formMenu">{{form?.title}} <mat-icon>arrow_drop_down</mat-icon></button>
+  <mat-menu #formMenu>
+    <button mat-menu-item *ngFor="let f of forms" (click)="formChange(f.name)">{{f.title}}</button>
+  </mat-menu>
+</mat-toolbar>
+<table mat-table matSort [dataSource]="dataSource">
+  <ng-container matColumnDef="title" sticky>
+    <th mat-header-cell *matHeaderCellDef mat-sort-header>{{'Permission' | translate}}</th>
+    <td mat-cell *matCellDef="let item"> {{item.title || item.name}}</td>
+  </ng-container>
+  <ng-container [matColumnDef]="r.name" *ngFor="let r of roles">
+    <th mat-header-cell *matHeaderCellDef mat-sort-header>{{r.title}}</th>
+    <td mat-cell *matCellDef="let item"> <mat-checkbox [checked]="item[r.name]" [value]="r.name" (change)="change(item, $event)"></mat-checkbox> </td>
+  </ng-container>
+  <tr mat-header-row *matHeaderRowDef="displayColumns; sticky: true"></tr>
+  <tr mat-row *matRowDef="let item; columns: displayColumns;"></tr>
+</table>

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

@@ -0,0 +1,7 @@
+table {
+  width: 100%;
+}
+
+::ng-deep .mat-row {
+  cursor: pointer;
+}

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

@@ -0,0 +1,89 @@
+import { Component, ViewChild, OnInit, Inject } from "@angular/core";
+import { SessionService } from "../../core/session.service";
+import { Role, Form } from "../../core/models";
+import { FormBuilder } from "@angular/forms";
+import { BizDoc } from "../../core/decorators";
+import { UtilityComponent } from "../../core/base";
+import { UtilityRef } from "../utility-ref";
+import { PromptService } from "../../core/prompt.service";
+import { MatTableDataSource } from "@angular/material/table";
+import { MatSort } from "@angular/material/sort";
+import { MatCheckboxChange } from "@angular/material/checkbox";
+
+@Component({
+  templateUrl: './permissions.component.html',
+  styleUrls: ['./permissions.component.scss']
+})
+@BizDoc({
+  selector: 'bizdoc-permissions'
+})
+export class PermissionsUtility implements OnInit, UtilityComponent<boolean, PermisionMap> {
+  readonly roles: Role[];
+  readonly forms: Form[];
+  readonly displayColumns: string[];
+  dirty = false;
+  form: Form;
+  dataSource: MatTableDataSource<Model>;
+  @ViewChild(MatSort, { static: true }) sort: MatSort;
+  private _data: PermisionMap;
+  constructor(@Inject(UtilityRef) private _utilityRef: UtilityRef<boolean, any, PermisionMap, any>, private _session: SessionService,
+    private _sb: PromptService, private _fb: FormBuilder) {
+    this.roles = _session.profile.roles;
+    this.forms = _session.profile.forms;
+    this.displayColumns = ['title'].concat(this.roles.map(r => r.name));
+  }
+  ngOnInit(): void {
+    this._utilityRef.populate().subscribe(r => {
+      this._data = r;
+      this._populate((this.forms.find(f => r[f.name]) || this.forms[0]).name);
+    });
+  }
+  search(value: string) {
+    this.dataSource.filter = value;
+  }
+  formChange(form: string) {
+    this._populate(form);
+  }
+  private _populate(form: string) {
+    this.form = this._session.profile.forms.find(f => f.name === form);
+    if (!this._data[form]) this._data[form] = {};
+    const data = Object.keys(this._data[form]).map(k => {
+      const obj = this._data[form][k];
+      if (!obj.roles)
+        obj.roles = [];
+      else obj.roles.forEach(r=> obj[r] = true);
+      return Object.assign({ name: k }, obj);
+    });
+    this.dataSource = new MatTableDataSource(data);
+    this.dataSource.sort = this.sort;
+  }
+  change(item: Model, e: MatCheckboxChange) {
+    const { value: role } = e.source;
+    if (e.checked) {
+      item.roles.push(role);
+      item[role] = true;
+    }
+    else {
+      item.roles.remove(role);
+      item[role] = false;
+    }
+    this.dirty = true;
+  }
+  save() {
+    this._utilityRef.execute(this._data).subscribe(() => {
+      this.dirty = false;
+      this._sb.toast('ChangesSaved');
+    }, () => this._sb.error());
+  }
+}
+interface Model {
+  name: string;
+  title: string;
+  roles: string[];
+}
+
+interface PermisionMap {
+  [form: string]: {
+    [name: string]: Model;
+  };
+}

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

@@ -0,0 +1,23 @@
+<mat-form-field>
+  <mat-chip-list #chipList [attr.aria-label]="data.title">
+    <mat-chip *ngFor="let u of data.positions"
+              selectable="true"
+              removable="true"
+              (removed)="removed(u)">
+      <bizdoc-identity-name [identity]=u></bizdoc-identity-name>
+      <mat-icon matChipRemove>cancel</mat-icon>
+    </mat-chip>
+    <input [placeholder]="data.title"
+           [formControl]=control
+           #nameInput
+           [matAutocomplete]="auto"
+           [matChipInputFor]="chipList"
+           [matChipInputSeparatorKeyCodes]="separatorKeysCodes">
+  </mat-chip-list>
+  <mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected(nameInput, $event)">
+    <mat-option *ngFor="let u of users$ | async" [value]="u.id">
+      {{u.name}}
+      <span *ngIf="u.email">&nbsp; - {{u.email}}</span>
+    </mat-option>
+  </mat-autocomplete>
+</mat-form-field>

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

@@ -0,0 +1,67 @@
+import { Component, OnInit, OnDestroy, Inject, AfterViewInit, ViewChild, ElementRef, ChangeDetectorRef } from '@angular/core';
+import { Observable, Subject } from 'rxjs';
+import { switchMap, debounceTime, takeUntil } from 'rxjs/operators';
+import { FormControl } from '@angular/forms';
+import { MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
+import { COMMA, ENTER } from '@angular/cdk/keycodes';
+import { UserInfo } from '../../core/models';
+import { AccountService } from '../../core/account.service';
+import { POPUP_DATA } from '../../core/popup/popup.component';
+
+export interface PositionsData {
+  title: string,
+  positions: string[]
+}
+
+@Component({
+  templateUrl: './positions-popup.component.html',
+  styles:[`:host {padding: 8px}`]
+})
+export
+  class PositionsPopup implements OnInit, AfterViewInit, OnDestroy {
+  readonly separatorKeysCodes: number[] = [ENTER, COMMA];
+  readonly valueChange = new Subject<void>(); 
+  readonly control = new FormControl(null);
+  @ViewChild('nameInput', { static: true, read: ElementRef }) nameInput: ElementRef<HTMLInputElement>;
+  users$: Observable<UserInfo[]>;
+  private readonly _destroy = new Subject<void>();
+  constructor(
+    @Inject(POPUP_DATA) public data: PositionsData,
+    private _cd: ChangeDetectorRef,
+    private _service: AccountService) { }
+  ngOnInit(): void {
+    this.users$ = this.control.valueChanges.pipe(debounceTime(200), takeUntil(this._destroy), switchMap(v => this._service.findAll(v, { take: 20 })));
+  //  this._pRef.backdropClick().subscribe(() => {
+  //    this._pRef.close(this.dirty ? this.positions : null);
+  //  });
+  }
+    ngAfterViewInit(): void {
+      this.nameInput.nativeElement.focus();
+      this._cd.detectChanges();
+    }
+  /**
+   *
+   * @param inp
+   * @param event
+   */
+  selected(inp: HTMLInputElement, event: MatAutocompleteSelectedEvent): void {
+    this.data.positions.push(event.option.value);
+    inp.value = '';
+    this.valueChange.next();
+  }
+  /**
+   *
+   * @param id
+   */
+  removed(id: string): void {
+    const index = this.data.positions.indexOf(id);
+
+    if (index >= 0)
+      this.data.positions.splice(index, 1);
+    this.valueChange.next();
+  }
+  ngOnDestroy(): void {
+    this._destroy.next();
+    this._destroy.complete();
+  }
+}

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

@@ -0,0 +1,142 @@
+<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-button [matMenuTriggerFor]="typeMenu">{{type?.title}} <mat-icon>arrow_drop_down</mat-icon></button>
+  <mat-menu #typeMenu>
+    <button mat-menu-item *ngFor="let t of types" (click)="change(t.name)">{{t.title}}</button>
+  </mat-menu>
+  <button mat-icon-button [matMenuTriggerFor]="newMenu" [matTooltip]="'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>
+</mat-toolbar>
+<mat-progress-bar [mode]="loading" [style.visibility]="loading ? 'visible':'hidden'"></mat-progress-bar>
+<table mat-table matSort [dataSource]="dataSource" [style.display]="dataSource ? '': 'none'">
+  <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">
+      {{element.key}}
+    </td>
+  </ng-container>
+  <ng-container matColumnDef="value">
+    <th mat-header-cell *matHeaderCellDef mat-sort-header>{{''}}</th>
+    <td mat-cell *matCellDef="let element">
+      {{element.value}}
+      <span [ngSwitch]="element.type">
+        <ng-container *ngSwitchCase="'group'">&nbsp;({{'Group'|translate}})</ng-container>
+        <ng-container *ngSwitchCase="'pattern'">&nbsp;({{'Pattern'|translate}})</ng-container>
+      </span>
+    </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>
+          <bizdoc-identity-name [identity]=u chating="none"></bizdoc-identity-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>
+<!-- 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>

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

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