@bizdoc/core 1.14.5 → 1.14.9

package/src/lib/cube/explore/document-item.component.ts

@@ -0,0 +1,28 @@
+import { Component } from '@angular/core';
+import { DocumentModel } from '../../core/models';
+import { ExploreItemComponent } from '../../core/base';
+import { BizDoc } from '../../core/decorators';
+import { Optional } from '@angular/core';
+import { PaneRef } from '../../core/slots/pane-ref';
+import { ExploreItemPaneComponent } from './item.pane.component';
+import { SessionService } from '../../core/session.service';
+/** preview of cube explore item for form */
+@Component({
+  template: `<bizdoc-document [model]=model></bizdoc-document>`
+})
+@BizDoc({ selector: 'bizdoc-document-info' })
+export
+  class ExploreDocumentComponent implements ExploreItemComponent<DocumentModel<any>> {
+  model: DocumentModel<any>;
+  constructor(@Optional() private _pane: PaneRef<ExploreItemPaneComponent>,
+    private _session: SessionService) {
+  }
+  onBind(data: DocumentModel<any>): void {
+    if (this._pane) {
+      this._pane.title =`#${data.number}`;
+      const form = this._session.profile.forms.find(f => f.name === data.formId);
+      this._pane.icon = form.icon;
+    }
+    this.model = data;
+  }
+}

package/src/lib/cube/explore/explore-item.component.scss

@@ -0,0 +1,4 @@
+:host {
+    padding: 8px;
+    display: block;
+  }

package/src/lib/cube/explore/explore-item.component.ts

@@ -0,0 +1,23 @@
+import { Component, ViewContainerRef, AfterViewInit, Input } from '@angular/core';
+import { ExploreItemComponent } from '../../core/base';
+import { BizDocComponentFactoryResolver } from '../../core/component-factory-resolver';
+
+/** shows an item on explore. */
+@Component({
+  selector: 'bizdoc-cube-item',
+  template: '',
+  styleUrls: ['explore-item.component.scss']
+})
+export class ExploreItemImplComponent implements AfterViewInit {
+  @Input() template: string;
+  @Input() model: any;
+  constructor(private _vc: ViewContainerRef,
+    private _resolver: BizDocComponentFactoryResolver) {
+  }
+  ngAfterViewInit(): void {
+      const factory = this._resolver.resolve(this.template);
+      const cRef = this._vc.createComponent(factory);
+      const view = cRef.instance as ExploreItemComponent<any>;
+      view.onBind(this.model);
+  }
+}

package/src/lib/cube/explore/explore-items.component.html

@@ -0,0 +1,25 @@
+<mat-table matSort [dataSource]="dataSource" @list>
+  <ng-container [matColumnDef]="c.name" *ngFor="let c of columns">
+    <mat-header-cell *matHeaderCellDef mat-sort-header>{{c.label || c.name}}</mat-header-cell>
+    <mat-cell *matCellDef="let element" [class.figure]="c.type === 'Currency'">
+      <ng-container [ngSwitch]="c.type">
+        <ng-container *ngSwitchCase="'Date'">
+          {{element[c.name] | amDateFormat: 'll'}}
+        </ng-container>
+        <ng-container *ngSwitchCase="'Number'">
+          {{element[c.name] | number }}
+        </ng-container>
+        <ng-container *ngSwitchCase="'Currency'">
+          {{element[c.name] | currency : (element.currencyCode || currencyCode) : 'symbol' : CURRENCY_FORMAT }}
+        </ng-container>
+        <mat-checkbox [checked]="element.model[c.name]" disabled="true" *ngSwitchCase="'Boolean'"></mat-checkbox>
+        <ng-container *ngSwitchDefault>
+          {{element[c.name] }}
+        </ng-container>
+      </ng-container>
+    </mat-cell>
+  </ng-container>
+  <mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row>
+  <mat-row *matRowDef="let element; columns: displayedColumns;" (click)="expand(element)" [class.selectable]="selectable" @item></mat-row>
+</mat-table>
+<mat-paginator #paginator [pageSize]="pageSize" hidePageSize style="display: none"></mat-paginator>

package/src/lib/cube/explore/explore-items.component.scss

@@ -0,0 +1,7 @@
+.selectable {
+  cursor: pointer;
+}
+
+.figure {
+  justify-content: right;
+}

package/src/lib/cube/explore/explore-items.component.ts

@@ -0,0 +1,185 @@
+import { Component, ViewChild, Input, OnChanges, SimpleChanges, Output, EventEmitter, OnDestroy, OnInit } from '@angular/core';
+import { MatTableDataSource } from '@angular/material/table';
+import { MatSort } from '@angular/material/sort';
+import { MatPaginator } from '@angular/material/paginator';
+import { Workbook, Worksheet, Column, Row } from '@syncfusion/ej2-excel-export';
+import { Cube, FieldInfo, FieldType, AxesMap } from '../../core/models';
+import { CubeService } from '../cube.service';
+import { PromptService } from '../../core/prompt.service';
+import { TranslateService } from '../../core/translate.service';
+import { itemAnimation, listAnimation } from '../../core/animations';
+import { SessionService } from '../../core/session.service';
+import { isMobile } from '../../core/functions';
+import { Subject } from 'rxjs';
+import { debounceTime } from 'rxjs';
+import { ScopeType } from '../../core/configuration';
+
+const PAGE_SIZE = 14, MOBILE_PAGE_SIZE = 8;
+
+@Component({
+  selector: 'bizdoc-cube-explore',
+  templateUrl: './explore-items.component.html',
+  styleUrls: ['./explore-items.component.scss'],
+  animations: [
+    listAnimation,
+    itemAnimation]
+})
+/** drill-down component*/
+export class ExploreItemsComponent implements OnInit, OnChanges, OnDestroy {
+  readonly CURRENCY_FORMAT = this._service.digitsInfo;
+  private _pageSize;
+  private _data: any[];
+  public get pageSize() {
+    return this._pageSize;
+  }
+  @Input()
+  public set pageSize(value: number) {
+    if (value) this._pageSize = value;
+  }
+  @Input() cube!: string;
+  @Input() index?: string;
+  @Input() scope?: ScopeType;
+  @Input() axes!: AxesMap;
+  @Output() readonly explore = new EventEmitter<ExploreItemEvent>();
+  @Output() readonly load = new EventEmitter();
+  dataSource: MatTableDataSource<any>;
+  @Input() loading: boolean = false;
+  @Output() readonly loadingChange = new EventEmitter<boolean>();
+  @ViewChild(MatSort) sort: MatSort;
+  @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
+  columns: FieldInfo[];
+  selectable: boolean;
+  displayedColumns: string[];
+  currencyCode: string;
+  private readonly _loading$ = new Subject<boolean>();
+  private _template: string;
+  private _cube: Cube;
+  /** drill-down ctor */
+  constructor(
+    private _service: CubeService,
+    private _sb: PromptService,
+    private _session: SessionService,
+    private _translate: TranslateService) {
+    this._pageSize = isMobile() ? MOBILE_PAGE_SIZE : PAGE_SIZE;
+  }
+  ngOnInit(): void {
+    this._loading$.pipe(debounceTime(200)).subscribe(v => this.loadingChange.emit(this.loading = v));
+  }
+  refresh() { this.ngOnChanges(null); }
+
+  ngOnChanges(_: SimpleChanges): void {
+    this._cube = this._session.profile.cubes.find(c => c.name === this.cube);
+    this.currencyCode = this._cube.currencyCode;
+    this._view();
+  }
+  /** */
+  private _view() {
+    this._loading$.next(true);
+    (this.index ? this._service.resolveIndex(this.cube, this.index) :
+      this._service.resolve(this.cube, this.axes)).subscribe(e => {
+        const { columns, template } = e;
+        (this.index ? this._service.indices(this.cube, this.index, this.axes, { scope: this.scope }) :
+          this._service.explore(this.cube, this.axes, { scope: this.scope })).subscribe(r => {
+            if (this.index && !columns.length) {
+              this._cube.axes.
+                filter(a => this.axes[a.name] === undefined && !a.hidden &&
+                  r.find(row => row[a.name] !== undefined)).
+                forEach(a =>
+                  columns.push({ name: a.name, label: a.title })
+                );
+              const index = this._cube.indices.find(i => i.name === this.index);
+              columns.push({ name: 'value', label: index.title, type: FieldType.Currency });
+              this.columns = columns;
+              this.displayedColumns = columns.map(c => c.name);
+              this._template = null;
+              this.selectable = false;
+            }
+            else {
+              this.columns = columns;
+              this.displayedColumns =
+                columns.filter(c => !c.hidden && !c.key).
+                  map(c => c.name);
+              this._template = template;
+              this.selectable = template !== null;
+            }
+            this._datasource(r);
+          }, () => {
+            this._loading$.next(false);
+            this._sb.error();
+          });
+      }, () => {
+        this._loading$.next(false);
+        this._sb.error();
+      });
+  }
+
+  private _datasource(data: any[]) {
+    this._data = data;
+    this.dataSource = new MatTableDataSource(data);
+    this.dataSource.sort = this.sort;
+    this.dataSource.paginator = this.paginator;
+    this._loading$.next(false);
+    this.load.emit();
+  }
+  expand(item: any) {
+    if (!this._template) return;
+    const keys = this.columns.filter(f => f.key).map(f => item[f.name]);
+    if (!keys.length) throw 'no column with Key attribute in IBrowseable model.';
+    this.explore.emit({ keys, template: this._template });
+  }
+  exportExcel() {
+    const numberFormat = this._service.numberFormat,
+      columns = this.columns.filter(c => !c.hidden),
+      rows = [{
+        index: 1,
+        cells: columns.map((c, i) => ({
+          index: i + 1, value: c.label || c.name,
+          style: {
+            bold: true
+          }
+        } as Cell))
+      }] as Row[];
+    this._data.forEach((r, i) => rows.push(
+      {
+        index: i + 2,
+        cells: columns.map((c, j) => {
+          const isnumber = c.type === 'Currency';
+          return {
+            type: isnumber ? 'number' : 'text',
+            index: j + 1, value: r[c.name],
+            style: {
+              numberFormat,
+              hAlign: isnumber ? 'right' : 'general'
+            }
+          } as Cell;
+        }
+        )
+      } as Row));
+
+    const book = new Workbook(
+      {
+        worksheets: [
+          {
+            enableRtl: this._session.inverse,
+            name: this._translate.get('SheetN', 1),
+            columns: columns.map((_, i) => ({ index: i + 1, width: 250 } as Column)),
+            rows
+          } as Worksheet
+        ],
+      },
+      'xlsx'
+    );
+
+    this._service.nameOf(this.axes, this.cube).
+      subscribe(o =>
+        book.save(`${this._cube.title} ${o}.xlsx`));
+  }
+  ngOnDestroy(): void {
+    this._loading$.unsubscribe();
+  }
+}
+export interface ExploreItemEvent {
+  keys: (string | number)[];
+  template: string;
+}
+interface Cell { }

package/src/lib/cube/explore/explore.pane.component.html

@@ -0,0 +1,12 @@
+<mat-toolbar class="nav-toolbar">
+  <button mat-icon-button (click)="items.refresh()" [bizdocTooltip]="'Refresh' | translate"><mat-icon matAnimate="rotate">autorenew</mat-icon></button>
+  <span class="divider"></span>
+  <button mat-icon-button (click)="items.exportExcel()" [bizdocTooltip]="'DownloadExcel' | translate"><mat-icon>save_alt</mat-icon></button>
+  <button mat-icon-button (click)="items.paginator.previousPage()" [bizdocTooltip]="'PrevPage' | translate" [attr.aria-label]="'PrevPage' | translate" [disabled]="!items.paginator.hasPreviousPage()"><mat-icon class="mat-icon-rtl-mirror">keyboard_arrow_left</mat-icon></button>
+  <button mat-icon-button (click)="items.paginator.nextPage()" [bizdocTooltip]="'NextPage' | translate" [attr.aria-label]="'NextPage' | translate" [disabled]="!items.paginator.hasNextPage()"><mat-icon class="mat-icon-rtl-mirror">keyboard_arrow_right</mat-icon></button>
+</mat-toolbar>
+<mat-progress-bar mode="query" [style.visibility]="loading ? 'visible':'hidden'"></mat-progress-bar>
+<bizdoc-cube-tags [interactive]=false [cube]="cube" [axes]="axes"></bizdoc-cube-tags>
+<bizdoc-cube-explore #items [cube]="cube" [index]="index" [axes]=axes
+                     (explore)="item($event)" (loadingChange)="loading = $event"
+                     [scope]="scope" [pageSize]="pageSize"></bizdoc-cube-explore>

package/src/lib/cube/explore/explore.pane.component.ts

@@ -0,0 +1,78 @@
+import { Component, HostListener } from '@angular/core';
+import { AxesMap, Cube } from '../../core/models';
+import { SessionService } from '../../core/session.service';
+import { PanesRouter } from '../../core/slots/router.service';
+import { PaneRef } from '../../core/slots/pane-ref';
+import { TranslateService } from '../../core/translate.service';
+import { CubeService } from '../cube.service';
+import { ExploreItemEvent } from './explore-items.component';
+import { PromptService } from '../../core/prompt.service';
+import { OpenPolicy, ScopeType } from '../../core/configuration';
+
+
+@Component({
+  templateUrl: './explore.pane.component.html', styles: [`
+:host {
+    min-width: 360px;
+}`],
+  host: {
+    class: 'pane'
+  }
+})
+export
+  class CubeExplorePaneComponent {
+  cube: string;
+  axes: AxesMap;
+  pageSize: number;
+  index?: string;
+  scope?: ScopeType;
+  loading = true;
+  private _cube: Cube;
+  constructor(
+    private _pane: PaneRef<CubeExplorePaneComponent>,
+    private _sb: PromptService,
+    private _session: SessionService,
+    private _service: CubeService,
+    private _translate: TranslateService,
+    private _router: PanesRouter) {
+    this.resize();
+    this._pane.paramsChange.subscribe(p => {
+      this.cube = p['cube'];
+      this._cube = this._session.profile.cubes.find(c => c.name === this.cube);
+      if (!this._pane.group) this._pane.group = this._cube.title;
+      this._pane.title = this._translate.get('Explore');
+    });
+    this._pane.dataChange.subscribe(d => {
+      const { index, scope } = d;
+      this.index = index;
+      if (index)
+        this._pane.title = this._cube.indices.find(i => i.name === index).title;
+      this.scope = scope;
+    });
+    this._pane.queryParamsChange.subscribe(q => {
+      this.axes = q;
+    });
+  }
+  @HostListener('window:resize')
+  resize() {
+    this.pageSize = Math.floor((window.innerHeight - 180) / 50);
+  }
+  item(evt: ExploreItemEvent) {
+    const { keys } = evt;
+    this.loading = true;
+    this._service.item(this.cube, this.axes, keys).subscribe(item => {
+      this._router.navigate(['i', evt.template, keys[0]], {
+        pathMode: 'relative',
+        relativeTo: this._pane,
+        queryParams: this.axes,
+        state: { item },
+        policy: OpenPolicy.Tab | OpenPolicy.Expandable | OpenPolicy.Dismissable,
+        group: this._pane.group
+      });
+      this.loading = false;
+    }, e => {
+      this.loading = false;
+      this._sb.error(e.status === 401 ? 'Unauthorized' : null);
+    });
+  }
+}

package/src/lib/cube/explore/item-resolver.service.ts

@@ -0,0 +1,24 @@
+import { Injectable } from '@angular/core';
+import { CubeService } from '../cube.service';
+import { PaneResolve, ParamMap } from '../../core/configuration';
+import { Observable } from 'rxjs';
+import { ActivatedRouteSnapshot, Resolve, Router } from '@angular/router';
+
+@Injectable()
+export class ItemResolver implements PaneResolve<any> {
+    constructor(
+        private _service: CubeService
+    ) { }
+    onResolve(params: ParamMap, queryParams: ParamMap): Observable<any> {
+        return this._service.item(params['cube'], queryParams, params['key']);
+    }
+}
+
+@Injectable()
+export class ItemResolveService implements Resolve<void | any>{
+  constructor(private _service: CubeService
+    , private _router: Router) {
+  } resolve(route: ActivatedRouteSnapshot): Observable<void | any> {
+    return this._service.item(route.params['cube'], route.queryParams, route.params['key']);
+  }
+}

package/src/lib/cube/explore/item.pane.component.html

@@ -0,0 +1,3 @@
+<bizdoc-cube-item [template]="template" [model]="model"></bizdoc-cube-item>
+
+<!--<lottie name="4958-404-not-found" *ngIf="problem"></lottie>-->

package/src/lib/cube/explore/item.pane.component.ts

@@ -0,0 +1,23 @@
+import { Component, OnInit } from '@angular/core';
+import { PaneRef } from '../../core/slots/pane-ref';
+
+/** shows an item on explore. */
+@Component({
+  templateUrl: './item.pane.component.html',
+  host: {
+    class: 'pane'
+  }
+})
+export class ExploreItemPaneComponent implements OnInit {
+  template: string;
+    model: any;
+  constructor(
+    private _pane: PaneRef<ExploreItemPaneComponent>) {
+  }
+  ngOnInit(): void {
+    this._pane.dataChange.subscribe(d => this.model = d.item);
+    this._pane.paramsChange.subscribe(p =>
+      this.template = p['template']
+    );
+  }
+}

package/src/lib/cube/filter/filter-tags.component.exp.ts

@@ -0,0 +1,70 @@
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges } from '@angular/core';
+import { forkJoin, map, Observable } from 'rxjs';
+import { DatasourceService } from '../../core/datasource.service';
+import { isArray } from '../../core/functions';
+import { AxesMap, Cube } from '../../core/models';
+import { SessionService } from '../../core/session.service';
+
+type Tag = {
+  /** axis name */
+  axis: string;
+  key: string | number;
+  /** filter key */
+  value: string | number;
+  /** type value */
+};
+/** accepts filters */
+@Component({
+  selector: 'bizdoc-cube-tags',
+  templateUrl: './filter-tags.component.html',
+  styleUrls: ['./filter-tags.component.scss']
+})
+export class FilterTagsComponent implements OnChanges {
+  @Input() axes: AxesMap;
+  @Input() cube!: string;
+  private _interactive: boolean;
+  public get interactive(): boolean {
+    return this._interactive;
+  }
+  @Input()
+  public set interactive(value: boolean) {
+    this._interactive = coerceBooleanProperty(value);
+  }
+  private _cube: Cube;
+  @Output() readonly axesChange = new EventEmitter<AxesMap>();
+  tags: Tag[];
+  constructor(private _session: SessionService, private _ds: DatasourceService) { }
+  ngOnChanges(_: SimpleChanges): void {
+    const observables: Observable<Tag>[] = [];
+    if (!this._cube) this._cube = this._session.profile.cubes.find(c => c.name === this.cube) || this._session.profile.cubes[0];
+    this._cube.axes.forEach(a => {
+      const key = this.axes[a.name];
+      if (key === undefined) return;
+      if (isArray(key))
+        key.forEach(key => {
+          const observe = this._ds.get(a.dataType, key as string).pipe(map(value => {
+            return { axis: a.name, value, key } as Tag
+          }));
+          observables.push(observe);
+        });
+      else {
+        const observe = this._ds.get(a.dataType, key as string).pipe(map(value => {
+          return { axis: a.name, value, key } as Tag
+        }));
+        observables.push(observe);
+      }
+    });
+    if (observables.length) forkJoin(observables).subscribe(tags => {
+      this.tags = tags;
+    });
+    else this.tags = [];
+  }
+  remove(tag: Tag) {
+    if (isArray(this.axes[tag.axis]) && (this.axes[tag.axis] as any[]).length > 1)
+      (this.axes[tag.axis] as any[]).remove(tag.key);
+    else
+      delete this.axes[tag.axis];
+    this.axesChange.emit(this.axes);
+  }
+}

package/src/lib/cube/filter/filter-tags.component.html

@@ -0,0 +1,11 @@
+<mat-chip-list aria-label="" *ngIf="interactive; else readonly">
+  <mat-chip *ngFor="let t of tags" class="small-chip"
+            [removable]="true"
+            (removed)="remove(t)">
+    {{t.value}}
+    <mat-icon matChipRemove>cancel</mat-icon>
+  </mat-chip>
+</mat-chip-list>
+<ng-template #readonly>
+  <span *ngFor="let tag of tags" class="mat-chip mat-standard-chip small-chip">{{tag.value}}</span>
+</ng-template>

package/src/lib/cube/filter/filter-tags.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FilterTagsComponent } from './filter-tags.component.exp';
+
+describe('FilterTagsComponent', () => {
+  let component: FilterTagsComponent;
+  let fixture: ComponentFixture<FilterTagsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ FilterTagsComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FilterTagsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/cube/filter/filter.component.html

@@ -0,0 +1,25 @@
+<form [formGroup]="form" fxLayout="column">
+  <mat-form-field *ngFor="let a of visibleAxes" [ngSwitch]="a.selectionMode" [attr.data-help]="'axis-'+a.name">
+    <ng-container *ngSwitchCase="'Pattern'">
+      <input matInput autocomplete="off"
+             [pattern]="pattern" [autofocus]
+             [formControlName]="a.name" [placeholder]="a.title" />
+      <mat-error *ngIf="form.controls[a.name].invalid">{{'SimplePatternErr' |translate}}</mat-error>
+    </ng-container>
+    <ng-container *ngSwitchCase="'Search'">
+      <input matInput autocomplete="off" type="search"
+             [matAutocomplete]="segment" #inp
+             [placeholder]="a.title" />
+      <mat-autocomplete #segment [displayWith]="display"
+                        (optionSelected)="change(a.name, $event)">
+        <mat-option *ngFor="let r of sources[a.name] | async | filter : 'value' : inp.value | slice:0:50" [value]="r">{{r.value}}</mat-option>
+      </mat-autocomplete>
+      <button mat-icon-button *ngIf="inp.value" matSuffix aria-label="" (click)="inp.value = ''; form.controls[a.name].setValue(null)"><mat-icon>close</mat-icon></button>
+      <mat-error *ngIf="form.controls[a.name].invalid">{{'SimplePatternErr' |translate}}</mat-error>
+    </ng-container>
+    <mat-select [formControlName]="a.name" [placeholder]="a.title" [multiple]="a.selectionMode === 'Multiple'" *ngSwitchDefault>
+      <mat-option *ngIf="a.selectionMode !== 'Multiple'">{{'All' | translate}}</mat-option>
+      <mat-option *ngFor="let r of sources[a.name] | async" [value]="r.key">{{r.value}}</mat-option>
+    </mat-select>
+  </mat-form-field>
+</form>

package/src/lib/cube/filter/filter.component.scss

@@ -0,0 +1,8 @@
+form {
+  padding: 8px
+}
+
+/*form ::ng-deep .mat-form-field-infix {
+    display: flex;
+}
+*/