@bizdoc/core 1.13.8 → 1.13.12

package/src/lib/options/options.component.html

@@ -0,0 +1,149 @@
+<form [formGroup]="form" autocomplete="off">
+  <mat-accordion>
+    <mat-expansion-panel #notifications>
+      <mat-expansion-panel-header>
+        <mat-panel-title>
+          {{'Notifications' | translate}}
+        </mat-panel-title>
+        <mat-panel-description>
+          <!--<mat-icon>notifications</mat-icon>-->
+        </mat-panel-description>
+      </mat-expansion-panel-header>
+      <div formGroupName="notifications" fxLayout="column">
+        <div fxLayout="row">
+          <mat-slide-toggle formControlName="active">{{'Active' | translate}}</mat-slide-toggle>
+          <span class="divider"></span>
+          <button mat-icon-button (click)="toggleSound()" [bizdocTooltip]="'Sound'|translate"><mat-icon>{{options.notifications.sound ? 'volume_up' : 'volume_off'}}</mat-icon></button>
+        </div>
+        <br />
+        <mat-slide-toggle formControlName="myDocumentStateChange">{{'MyStateChange' | translate}}</mat-slide-toggle>
+        <mat-slide-toggle formControlName="anyDocumentStateChange">{{'AnyStateChange' | translate}}</mat-slide-toggle>
+        <mat-slide-toggle formControlName="commentMyDocument">{{'CommentMyDocument' | translate}}</mat-slide-toggle>
+        <mat-slide-toggle formControlName="commentAnyDocument">{{'CommentAnyDocument' | translate}}</mat-slide-toggle>
+        <mat-slide-toggle formControlName="likes" [style.display]="voating?'':'none'">{{'LikedComment' | translate}}</mat-slide-toggle>
+        <mat-slide-toggle formControlName="tagged">{{'TaggedInComments' | translate}}</mat-slide-toggle>
+        <mat-slide-toggle formControlName="upcomingEvents">{{'UpcomingEvents' | translate}}</mat-slide-toggle>
+        <mat-slide-toggle formControlName="cubeAnomaly">{{'CubeAnomaly' | translate}}</mat-slide-toggle>
+      </div>
+    </mat-expansion-panel>
+    <mat-expansion-panel #emails>
+      <mat-expansion-panel-header>
+        <mat-panel-title>
+          {{'Emails' | translate}}
+        </mat-panel-title>
+        <mat-panel-description>
+          <!--<mat-icon>alternate_email</mat-icon>-->
+        </mat-panel-description>
+      </mat-expansion-panel-header>
+      <div formGroupName="emails" fxLayout="column">
+        <mat-slide-toggle formControlName="active">{{'Active' | translate}}</mat-slide-toggle>
+        <br />
+        <mat-slide-toggle formControlName="mail">{{'Mails' | translate}}</mat-slide-toggle>
+        <mat-slide-toggle formControlName="chat">{{'Conversations' | translate}}</mat-slide-toggle>
+        <mat-slide-toggle formControlName="notifications">{{'EmailNotifications' | translate}}</mat-slide-toggle>
+        <mat-slide-toggle formControlName="events">{{'AlarmEvents' | translate}}</mat-slide-toggle>
+      </div>
+    </mat-expansion-panel>
+    <mat-expansion-panel #outOfOffice>
+      <mat-expansion-panel-header>
+        <mat-panel-title>
+          {{'OutOfOffice' | translate}}
+        </mat-panel-title>
+        <mat-panel-description>
+          <!--<mat-icon>trending_flat</mat-icon>-->
+          <!--{{'OutOfOfficeTip' | translate}}-->
+        </mat-panel-description>
+      </mat-expansion-panel-header>
+      <div formGroupName="outOfOffice" fxLayout="column">
+        <mat-slide-toggle formControlName="active">{{'Active' | translate}}</mat-slide-toggle>
+        <br />
+        <mat-form-field fxFlex>
+          <input matInput [formControl]="substitueId" type="search" [matAutocomplete]="sauto"
+                 [placeholder]="'Associate' | translate" [required]="form.value.outOfOffice.active" />
+          <mat-autocomplete #sauto="matAutocomplete" [displayWith]="display"
+                            (optionSelected)="setSubstitute($event)">
+            <mat-option *ngFor="let u of susers$ | async" [value]="u">
+              <span>{{u.name}}</span>
+            </mat-option>
+          </mat-autocomplete>
+          <mat-hint>{{'OutOfOfficeTip' | translate}}</mat-hint>
+        </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.outOfOffice?.from" placeholder="{{'To'| translate}}" />
+            <mat-datepicker-toggle [for]="to" matSuffix></mat-datepicker-toggle>
+            <mat-datepicker #to></mat-datepicker>
+          </mat-form-field>
+        </div>
+      </div>
+    </mat-expansion-panel>
+    <mat-expansion-panel #grantAccess>
+      <mat-expansion-panel-header>
+        <mat-panel-title>
+          {{'GrantAccess' | translate}}
+        </mat-panel-title>
+        <mat-panel-description>
+          <!--<mat-icon>account_circle</mat-icon>-->
+        </mat-panel-description>
+      </mat-expansion-panel-header>
+      <div formGroupName="grantAccess" class="grant-section">
+        <mat-slide-toggle formControlName="active">{{'Active' | translate}}</mat-slide-toggle>
+        <mat-form-field>
+          <mat-chip-list #grantList [attr.aria-label]="">
+            <mat-chip *ngFor="let u of (form.value.grantAccess.users || [])"
+                      [removable]="form.value.grantAccess.active"
+                      (removed)="removeGrant(u)">
+              {{nameOf(u) | async}}
+              <mat-icon matChipRemove *ngIf="form.value.grantAccess.active">cancel</mat-icon>
+            </mat-chip>
+            <input [formControl]="gusers" placeholder="{{'Users'| translate}}"
+                   #grantInput
+                   [matAutocomplete]="grantAuto"
+                   [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-hint>{{'GrantTip' | translate}}</mat-hint>
+        </mat-form-field>
+      </div>
+    </mat-expansion-panel>
+    <mat-expansion-panel #preferences>
+      <mat-expansion-panel-header>
+        <mat-panel-title>
+          {{'Preferences' | translate}}
+        </mat-panel-title>
+        <mat-panel-description>
+          <!--<mat-icon></mat-icon>-->
+        </mat-panel-description>
+      </mat-expansion-panel-header>
+      <div fxLayout="column">
+        <mat-form-field>
+          <mat-chip-list #chips [selectable]="false" multiple>
+            <mat-chip *ngFor="let item of form.value.tags"
+                      [removable]="true" (removed)="removeTag(item)">
+              {{item}}
+              <mat-icon matChipRemove>cancel</mat-icon>
+            </mat-chip>
+            <input [placeholder]="'Tags'|translate"
+                   [matChipInputFor]="chips"
+                   [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
+                   [matChipInputAddOnBlur]="true"
+                   (matChipInputTokenEnd)="addTag($event)">
+          </mat-chip-list>
+        </mat-form-field>
+        <mat-slide-toggle [formControl]="aRIA">{{'ARIA' | translate}}</mat-slide-toggle>
+      </div>
+    </mat-expansion-panel>
+  </mat-accordion>
+</form>

package/src/lib/options/options.component.scss

@@ -0,0 +1,19 @@
+ /*.mat-expansion-panel-header-title,
+ .mat-expansion-panel-header-description {
+  flex-basis: 0;
+}
+
+ .mat-expansion-panel-header-description {
+  justify-content: space-between;
+  align-items: center;
+}*/
+
+ :host{
+   max-width: 80vw;
+
+ }
+
+.grant-section {
+  display: flex;
+  flex-direction: column;
+}

package/src/lib/options/options.component.ts

@@ -0,0 +1,244 @@
+import { Component, OnInit, OnDestroy, ViewChild, InjectionToken, Inject } from '@angular/core';
+import { AbstractControl, FormBuilder, FormGroup } from '@angular/forms';
+import { Subject, Observable, merge, of } from 'rxjs';
+import { debounceTime, takeUntil, filter, map, switchMap, tap } from 'rxjs/operators';
+import { OverlayRef } from '@angular/cdk/overlay';
+import { MatExpansionPanel } from '@angular/material/expansion';
+import { MatChipInputEvent } from '@angular/material/chips';
+import { COMMA, ENTER } from '@angular/cdk/keycodes';
+import { MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
+import { BIZDOC_CONFIG, BizDocConfig } from '../core/configuration';
+import { isString } from '../core/functions';
+import { Options, UserInfo } from '../core/models';
+import { AccountService } from '../core/account.service';
+import { SessionService } from '../core/session.service';
+import { PromptService } from '../core/prompt.service';
+
+export type OptionType = 'notifications' | 'outofoffice' | 'emails' | 'grantaccess';
+
+export const OPTION_PANEL = new InjectionToken<OptionData>('options');
+
+interface OptionData {
+  open: OptionType;
+}
+
+@Component({
+  selector: 'bizdoc-options',
+  templateUrl: './options.component.html',
+  styleUrls: ['./options.component.scss']
+})
+/** options component*/
+export class OptionsComponent implements OnInit, OnDestroy {
+  private readonly _destroy = new Subject<void>();
+  private _requiredValidator = (control: AbstractControl): { [key: string]: any } | null => {
+    const parent = (control.parent as FormGroup);
+    if (parent && parent.controls['active'].value && !control.value) return {
+      required: true
+    }
+  }
+  readonly language = this._fb.control(this._session.language);
+  readonly aRIA = this._fb.control(this._session.aria);
+  readonly languages = this._session.languages;
+  readonly gusers = this._fb.control(null);
+  readonly substitueId = this._fb.control(null);
+  readonly form = this._fb.group({
+    notifications: this._fb.group({
+      active: this._fb.control(false),
+      likes: this._fb.control(false),
+      commentMyDocument: this._fb.control(false),
+      commentAnyDocument: this._fb.control(false),
+      upcomingEvents: this._fb.control(false),
+      tagged: this._fb.control(false),
+      anyDocumentStateChange: this._fb.control(false),
+      myDocumentStateChange: this._fb.control(false),
+      cubeAnomaly: this._fb.control(false),
+      sound: this._fb.control(false),
+    }),
+    tags: this._fb.control(null),
+    emails: this._fb.group({
+      active: this._fb.control(false),
+      mail: this._fb.control(false),
+      chat: this._fb.control(false),
+      notifications: this._fb.control(false),
+      events: this._fb.control(false)
+    }),
+    outOfOffice: this._fb.group({
+      active: this._fb.control(false),
+      substitueId: this._fb.control(null, this._requiredValidator),
+      from: this._fb.control(null),
+      to: this._fb.control(null)
+    }),
+    grantAccess: this._fb.group({
+      active: this._fb.control(false),
+      users: this._fb.control(null, this._requiredValidator)
+    })
+  });
+  susers$: Observable<UserInfo[]>;
+  gusers$: Observable<UserInfo[]>;
+  voating: boolean;
+  options: Options;
+  readonly separatorKeysCodes: number[] = [ENTER, COMMA];
+  @ViewChild('outOfOffice', { read: MatExpansionPanel, static: true }) outOfOffice: MatExpansionPanel;
+  @ViewChild('notifications', { read: MatExpansionPanel, static: true }) notifications: MatExpansionPanel;
+  private readonly _me = this._session.userId;
+  /** options ctor */
+  constructor(@Inject(OPTION_PANEL) private _option: OptionData, overlayRef: OverlayRef, private _fb: FormBuilder,
+    private _accounts: AccountService, private _sb: PromptService,
+    private _session: SessionService,
+    @Inject(BIZDOC_CONFIG) config: BizDocConfig) {
+    this.voating = !config.comments || config.comments.voting !== false;
+    merge(overlayRef.keydownEvents().pipe(filter(k => k.keyCode === 27)), overlayRef.backdropClick()).
+      subscribe(() => overlayRef.dispose());
+  }
+  ngOnInit(): void {
+    this.aRIA.valueChanges.pipe(takeUntil(this._destroy)).
+      subscribe(v => this._session.aria = v);
+    this.language.valueChanges.subscribe(v => this._session.language = v);
+    const outOfOffice = this.form.controls['outOfOffice'] as FormGroup;
+    const grantAccess = this.form.controls['grantAccess'] as FormGroup;
+    const notifications = this.form.controls['notifications'] as FormGroup;
+    const emails = this.form.controls['emails'] as FormGroup;
+    const options = this.options = this._session.profile.options;
+    this.form.patchValue(options, { emitEvent: false });
+    if (!options.notifications.active)
+      this._toggle(notifications, false, 'likes',
+        'commentMyDocument',
+        'commentAnyDocument',
+        'upcomingEvents',
+        'tagged',
+        'anyDocumentStateChange',
+        'myDocumentStateChange',
+        'cubeAnomaly');
+    if (!options.emails.active)
+      this._toggle(emails, false, 'mail',
+        'chat',
+        'notifications',
+        'events');
+    if (!options.grantAccess.active)
+      this.gusers.disable();
+    if (!options.outOfOffice.active) {
+      this.substitueId.disable();
+      this._toggle(outOfOffice, false, 'from', 'to');
+    }
+    else if (!options.outOfOffice.from)
+      this._toggle(outOfOffice, false, 'to');
+    // change
+    notifications.controls['active'].valueChanges.pipe(takeUntil(this._destroy)).
+      subscribe(active => this._toggle(notifications, active, 'likes',
+        'commentMyDocument',
+        'commentAnyDocument',
+        'upcomingEvents',
+        'tagged',
+        'anyDocumentStateChange',
+        'myDocumentStateChange',
+        'cubeAnomaly'));
+    emails.controls['active'].valueChanges.pipe(takeUntil(this._destroy)).
+      subscribe(active => this._toggle(emails, active, 'mail',
+        'chat',
+        'notifications',
+        'events'));
+    grantAccess.controls['active'].valueChanges.pipe(takeUntil(this._destroy)).
+      subscribe(active => active ? this.gusers.enable() : this.gusers.enable());
+    outOfOffice.controls['active'].valueChanges.pipe(takeUntil(this._destroy)).
+      subscribe(active => {
+        active ? this.substitueId.enable() : this.substitueId.disable();
+        this._toggle(outOfOffice, active, 'from');
+        this._toggle(outOfOffice, active && outOfOffice.controls['from'].value, 'to');
+      });
+    outOfOffice.controls['from'].valueChanges.pipe(takeUntil(this._destroy)).
+      subscribe(from =>
+        this._toggle(outOfOffice, from !== null, 'to'));
+    this.gusers$ = this.gusers.valueChanges.pipe(takeUntil(this._destroy),
+      switchMap(v => isString(v) ? this._accounts.findAll(v) : of([])),
+      map(r => r.filter(u => u.id !== this._me)));
+    this.susers$ = this.substitueId.valueChanges.pipe(takeUntil(this._destroy),
+      tap(v =>
+        !v && outOfOffice.controls['substitueId'].setValue(null)
+      ),
+      switchMap(v => isString(v) ? this._accounts.findAll(v) : of([])),
+      map(r => r.filter(u => u.id !== this._me)));
+    if (options.outOfOffice.substitueId)
+      this._accounts.get(options.outOfOffice.substitueId).subscribe(u =>
+        this.substitueId.setValue(u, { emitEvent: false }));
+    if (this._option)
+      switch (this._option.open) {
+        case 'outofoffice':
+          this.outOfOffice.open();
+          break;
+        default:
+          this.notifications.open();
+      }
+    this.form.valueChanges.pipe(debounceTime(200), takeUntil(this._destroy)).subscribe(() =>
+      this.form.valid &&
+      this._session.update(this.form.getRawValue()).subscribe(undefined, () => this._sb.error()));
+  }
+  private _toggle(group: FormGroup, active: boolean, ...controls: string[]) {
+    controls.forEach(name => {
+      if (!active) group.controls[name].disable({ emitEvent: false });
+      else group.controls[name].enable({ emitEvent: false });
+    });
+  }
+  toggleSound() {
+    (this.form.controls['notifications'] as FormGroup).controls['sound'].setValue(!this.options.notifications.sound);
+  }
+  nameOf(id: string) {
+    return this._accounts.get(id).pipe(map(u => u.name));
+  }
+  display = (item: UserInfo) => {
+    return item ? item.name : null;
+  }
+
+  addTag(event: MatChipInputEvent) {
+    const input = event.input;
+    const value = event.value;
+
+    // Add our fruit
+    if ((value || '').trim()) {
+      this.options.tags.push(value.trim());
+      this.form.patchValue({});
+    }
+
+    // Reset the input value 
+    if (input) {
+      input.value = '';
+    }
+  }
+  removeTag(tag: string) {
+    this.options.tags.remove(tag);
+    this.form.patchValue({});
+  }
+  /**
+   * 
+   * @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.form.controls['grantAccess'] as FormGroup).controls['users'].setValue([id]);
+    else
+      users.push(id);
+    inp.value = '';
+    this.form.patchValue({});
+  }
+  setSubstitute(event: MatAutocompleteSelectedEvent) {
+    (this.form.controls['outOfOffice'] as FormGroup).controls['substitueId'].setValue((event.option.value as UserInfo).id);
+  }
+  ngOnDestroy(): void {
+    this._destroy.next();
+    this._destroy.complete();
+  }
+}

package/src/lib/options/options.service.ts

@@ -0,0 +1,30 @@
+import { Injectable, Injector } from '@angular/core';
+import { OverlayRef, Overlay, OverlayConfig } from '@angular/cdk/overlay';
+import { Directionality } from '@angular/cdk/bidi';
+import { ComponentPortal } from '@angular/cdk/portal';
+import { OptionType, OPTION_PANEL, OptionsComponent } from './options.component';
+
+@Injectable()
+export class OptionsService {
+  constructor(private _dir: Directionality, private _overlay: Overlay, private _injector: Injector) {
+  }
+  open(section?: OptionType) {
+    const position = this._overlay.position().global().centerHorizontally().centerVertically();
+    const config = new OverlayConfig({
+      positionStrategy: position,
+      hasBackdrop: true,
+      disposeOnNavigation: true,
+      backdropClass: 'cdk-overlay-dark-backdrop',
+      direction: this._dir.value
+    });
+
+    const oRef = this._overlay.create(config);
+    const injector = Injector.create([
+      { provide: OPTION_PANEL, useValue: { open: section } },
+      { provide: OverlayRef, useValue: oRef },
+    ], this._injector);
+    const portal = new ComponentPortal(OptionsComponent, null, injector);
+    oRef.attach(portal);
+    oRef.backdropClick().subscribe(() => oRef.dispose());
+  }
+}

package/src/lib/reports/arguments-component.ts

@@ -0,0 +1,73 @@
+import { Component, OnInit, OnDestroy, ViewContainerRef, Injector, Input, Output, EventEmitter, ComponentFactoryResolver } from '@angular/core';
+import { Subject } from 'rxjs';
+import { debounceTime, takeUntil } from 'rxjs/operators';
+import { ArgumentsComponent } from '../core/base';
+import { FieldInfo } from '../core/models';
+import { ReportRef } from './report-ref';
+import { LayoutComponent } from '../core/layout/layout.component';
+import { BizDocComponentFactoryResolver } from '../core/component-factory-resolver';
+import { cleanup } from '../core/functions';
+
+export const ARGUMENTS_DEBOUNCE = 250;
+
+@Component({
+  selector: 'bizdoc-report-arguments',
+  template: ''
+})
+/** report arguments component*/
+export class ReportArgumentsComponent implements OnInit, OnDestroy {
+  @Input() reportRef: ReportRef;
+  @Input() template: string;
+  @Input() arguments: FieldInfo[];
+  @Input() args = {};
+  @Output() argsChange = new EventEmitter<any>();
+  private readonly _destroy = new Subject<void>();
+  constructor(
+    private _injector: Injector,
+    private _container: ViewContainerRef,
+    private _componentFactoryResolver: ComponentFactoryResolver,
+    private _factoryResolver: BizDocComponentFactoryResolver) { }
+
+  ngOnInit(): void {
+    this._container.clear();
+      if (this.template) this._fromTemplate();
+      else this._fromLayout();
+  }
+  /** */
+  private _fromTemplate() {
+    const componentFactory = this._factoryResolver.resolve(this.template);
+    const injector = Injector.create([{ provide: ReportRef, useValue: this.reportRef }], this._injector);
+    const componentRef = this._container.createComponent(componentFactory, 0, injector);
+    const form = (componentRef.instance as ArgumentsComponent<any>).form;
+    form.patchValue(this.args, { emitEvent: false });
+     form.valueChanges.pipe(debounceTime(ARGUMENTS_DEBOUNCE),
+      takeUntil(this._destroy)).subscribe(c => {
+        if (form.valid) {
+          cleanup(c);
+          this.args = c;
+          this.argsChange.emit(c);
+        }
+      });
+  }
+  /** */
+  private _fromLayout() {
+    const componentFactory = this._componentFactoryResolver.resolveComponentFactory(LayoutComponent);
+    const injector = Injector.create([], this._injector);
+    const componentRef = this._container.createComponent(componentFactory, 0, injector);
+    const instance = componentRef.instance;
+    instance.fields = this.arguments;
+    instance.model = this.args;
+    instance.create();
+    instance.modelChange.pipe(debounceTime(ARGUMENTS_DEBOUNCE),
+      takeUntil(this._destroy)).subscribe(c => {
+        if (instance.valid) {
+          this.args = c;
+          this.argsChange.emit(c);
+        }
+      });
+  }
+  ngOnDestroy(): void {
+    this._destroy.next();
+    this._destroy.complete();
+  }
+}

package/src/lib/reports/cube/grid-documents.component.html

@@ -0,0 +1,25 @@
+<ejs-grid [dataSource]="dataSource" (rowSelected)="rowSelected($event)" [pageSettings]="pageSettings"
+          [allowPaging]=false
+          [allowExcelExport]="true"
+          [height]="height"
+          [allowGrouping]=true
+          [allowSorting]=true
+          [groupSettings]="groupSettings">
+  <e-columns>
+    <e-column field="number" [headerText]="'Number'|translate"></e-column>
+    <e-column field="subject" [headerText]="'Subject'|translate"></e-column>
+    <e-column field="stateId" [headerText]="'Status'|translate">
+      <ng-template #template let-data>{{data.stateId | state}}</ng-template>
+    </e-column>
+    <e-column field="date" [headerText]="'Date'|translate">
+      <ng-template #template let-data>{{data.date | amDateFormat: 'lll'}}</ng-template>
+    </e-column>
+    <e-column field="formId" [headerText]="'Form'|translate">
+      <ng-template #template let-data>{{data.formId | form}}</ng-template>
+    </e-column>
+    <e-column field="userName" [headerText]="'Name'|translate">
+    </e-column>
+    <e-column field="total" [headerText]="'Value'|translate" textAlign="Right" [format]="valueFormat">
+    </e-column>
+  </e-columns>
+</ejs-grid>

package/src/lib/reports/cube/grid-documents.component.ts

@@ -0,0 +1,85 @@
+import { Component, ViewChild, OnDestroy } from '@angular/core';
+import { Observable, forkJoin, Subject } from 'rxjs';
+import { tap, takeUntil } from 'rxjs/operators';
+import { NumberFormatOptions } from '@syncfusion/ej2-base';
+import { GridComponent, Grid, GroupSettingsModel, RowSelectEventArgs, PageSettingsModel } from '@syncfusion/ej2-angular-grids';
+import { BizDoc } from '../../core/decorators';
+import { ReportComponent } from '../../core/base';
+import { CubeService } from '../../cube/cube.service';
+import { SessionService } from '../../core/session.service';
+import { AccountService } from '../../core/account.service';
+import { DocumentInfo } from '../../core/info/document-info.service';
+import { ReportRef } from '../report-ref';
+
+@Component({
+  templateUrl: './grid-documents.component.html'
+})
+@BizDoc({
+  selector: 'bizdoc-cube-documents-grid'
+})
+export class CubeGridDocumentsComponent implements ReportComponent<Model>, OnDestroy {
+  @ViewChild(GridComponent) grid: Grid;
+  readonly groupSettings: GroupSettingsModel = {};
+  readonly pageSettings: PageSettingsModel = {};
+  readonly valueFormat: NumberFormatOptions;
+  dataSource: Model[];
+  height: number;
+  private readonly _destroy = new Subject<void>();
+  constructor(ref: ReportRef<Options>, private _info: DocumentInfo,
+    session: SessionService,
+    private _accounts: AccountService,
+    service: CubeService) {
+    const { cube: name, group } = ref.options;
+    this.groupSettings.columns = group || ['userName'];
+    const cube = name ? session.profile.cubes.find(c => c.name === name) : session.profile.cubes[0];
+    this.valueFormat = {
+      format: 'C',
+      currency: cube.currencyCode || service.currencyCode,
+      maximumFractionDigits: service.fractionDigits
+    }
+    ref.resize.
+      pipe(takeUntil(this._destroy)).
+      subscribe(d => this.height = d.height - 107);
+    ref.exporting().
+      pipe(takeUntil(this._destroy)).
+      subscribe(e => {
+        e.cancel = true;
+        const report = session.profile.reports.find(r => r.name === ref.name);
+        this.grid && this.grid.excelExport({ fileName: `${report.title}.xlsx` });
+      });
+  }
+  onBind(data: Model[]) {
+    if (data.length) {
+      const observables: Observable<any>[] = data.map(r =>
+        this._accounts.get(r.userId).pipe(tap(u => r.userName = u.name)));
+      forkJoin(observables).subscribe(() =>
+        this.dataSource = data);
+    }
+    else this.dataSource = [];
+  }
+  rowSelected(evt: RowSelectEventArgs) {
+    const { id } = evt.data as Model;
+    this._info.open(id);
+  }
+  ngOnDestroy(): void {
+    this._destroy.next();
+    this._destroy.complete();
+  }
+}
+interface Model {
+  id: number;
+  number: string;
+  subject: string;
+  stateId: string;
+  userId: string;
+  userName: string;
+  value: number;
+  total: number;
+  formId: string;
+  currencyCode: string;
+}
+interface Options {
+  cube?: string;
+  axes?: string[];
+  group?: string[];
+}

package/src/lib/reports/cube/table-documents.component.css

@@ -0,0 +1,18 @@
+/*::ng-deep tbody tr {
+  cursor: pointer;
+}
+*/
+
+table {
+  width: 100%
+}
+
+td.figure{
+    text-align: right
+}
+.document-state {
+  border-radius: 2px 3px;
+  padding: 4px;
+  border-width: 1px;
+  border-style: solid;
+}