@bizdoc/core 1.8.5 → 1.8.9

package/src/lib/dashboard/cube/cube-chart.widget.ts

@@ -0,0 +1,146 @@
+import { Component, ViewChild, ElementRef } from '@angular/core';
+import { SessionService } from '../../core/session.service';
+import { Chart, AxisModel, MarkerOptionsModel, LegendSeriesModel, TooltipSettingsModel, ChartSeriesType, AnimationModel, SeriesModel, ChartComponent, ITooltipRenderEventArgs, AreaSeries, BarSeries, BubbleSeries, ColumnSeries, DateTime, LineSeries, PolarSeries, RadarSeries, ScatterSeries, SplineAreaSeries, SplineSeries, StackingAreaSeries, StackingBarSeries, StackingColumnSeries, StackingLineSeries, StepAreaSeries, StepLineSeries, IPointEventArgs, Point } from '@syncfusion/ej2-angular-charts';
+import { CubeAnalysisBase } from './cube-analysis.base';
+import { DatasourceService } from '../../core/datasource.service';
+import { WidgetRef } from "../widget-ref";
+import { TranslateService } from '../../core/translate.service';
+import { AXES_CODE_DIVIDER, CubeService, Series } from '../../cube/cube.service';
+import { FONT_FAMILY } from '../../core/colors';
+import { CubeInfo } from '../../cube/cube-info.service';
+import { AxesMap } from '../../core/models';
+
+Chart.Inject(DateTime, BarSeries, AreaSeries, BubbleSeries, ColumnSeries, LineSeries, PolarSeries, RadarSeries, SplineSeries, SplineAreaSeries, ScatterSeries,
+  StackingLineSeries, StackingAreaSeries, StackingColumnSeries, StackingBarSeries, StepAreaSeries, StepLineSeries);
+
+@Component({
+  selector: 'bizdoc-cube-chart-analysis',
+  template: '',
+  //templateUrl: './cube-chart.widget.html'
+  host: {
+    '[id]': 'id',
+    dir: 'ltr'
+  }
+})
+/** statistics component*/
+export class CubeChartAnalysisWidget extends CubeAnalysisBase {
+  //@ViewChild(ChartComponent)
+  chart: Chart;
+  readonly type: ChartSeriesType = this._options.chartType as ChartSeriesType || 'Column';
+  readonly indexType: ChartSeriesType = this._options.indexChartType as ChartSeriesType || 'Line';
+  readonly marker: MarkerOptionsModel = {
+    visible: true,
+    width: 10,
+    height: 10
+  }
+  readonly primaryXAxis: AxisModel = {
+    valueType: 'Category',
+    labelStyle: {
+      fontFamily: FONT_FAMILY
+    }
+  };
+  readonly primaryYAxis: AxisModel = {
+    labelFormat: this.currencyCode ? 'c0' : 'n0',
+    labelStyle: {
+      fontFamily: FONT_FAMILY
+    }
+  };
+  readonly tooltip: TooltipSettingsModel = {
+    enable: true,
+    shared: false,
+    textStyle: {
+      fontFamily: FONT_FAMILY
+    }
+  };
+  readonly legend: LegendSeriesModel = {
+    visible: false,
+    textStyle: {
+      fontFamily: FONT_FAMILY
+    }
+  };
+  readonly animation: AnimationModel = { enable: true };
+  constructor(ref: WidgetRef,
+    session: SessionService,
+    ds: DatasourceService,
+    cube: CubeService,
+    info: CubeInfo,
+    private _elementRef: ElementRef,
+    private _translate: TranslateService) {
+    super(ref, info, session, ds, cube);
+  }
+  onLoad(data: Series[]) {
+    const series = data.map(s => {
+      if (s.index)
+        return {
+          yName: 'y', xName: 'name',
+          type: this.indexType,
+          name: s.title,
+          width: 2,
+          stackingGroup: 'index',
+          marker: {
+            shape: 'Diamond', width: 4
+          },
+          dataSource: s.points,
+          fill: this._session.getPrimery(400)
+        } as SeriesModel;
+      else return {
+        yName: 'y', xName: 'name', type: this.type,
+        dataSource: s.points,
+        name: s.title ||
+          this._translate.get('Usage')
+      } as SeriesModel;
+    });
+    this.chart && this.chart.destroy();
+    if (series.length) this.chart = new Chart({
+      width: '100%',
+      height: this.height,
+      background: 'transparent',
+      theme: this.theme,
+      enableAnimation: true,
+      useGroupingSeparator: true,
+      primaryXAxis: this.primaryXAxis,
+      primaryYAxis: this.primaryYAxis,
+      tooltip: this.tooltip,
+      palettes: this.palettes,
+      currencyCode: this.currencyCode,
+      series,
+      pointClick: this.pointClick.bind(this),
+      legendSettings: {
+        isInversed: this._session.inverse,
+        visible: series.length > 1
+      } as LegendSeriesModel
+    }, this._elementRef.nativeElement);
+  }
+  pointClick(evt: IPointEventArgs) {
+    const axes: AxesMap = {},
+      serie = this._data[evt.seriesIndex],
+      { index, name, points } = serie;
+    if (this.series.length && !index)
+      for (let i = 0; i < this.series.length; i++)
+        axes[this.series[i]] = name.split(AXES_CODE_DIVIDER)[i];
+    for (let i = 0; i < this.xAxis.length; i++) {
+      const x = points[evt.pointIndex].x;
+      axes[this.xAxis[i]] = x.split(AXES_CODE_DIVIDER)[i];
+    }
+    this.explore(axes, { index });
+  }
+  onThemeChange() {
+    this.onBind(this._data);
+  }
+  onResize() {
+    if (this.chart) {
+      this.chart.height = this.height;
+    }
+  }
+  tooltipRender(e: ITooltipRenderEventArgs) {
+    e.text = this._intl.formatNumber(e.point.y as number, {
+      currency: this.currencyCode,
+      format: this.currencyCode ? 'c' : 'n',
+      maximumFractionDigits: this._service.fractionDigits
+    });
+  }
+  ngOnDestroy() {
+    this.chart && this.chart.destroy();
+    super.ngOnDestroy();
+  }
+}

package/src/lib/dashboard/cube/documents.widget.html

@@ -0,0 +1,19 @@
+<table mat-table [dataSource]="dataSource" class="mat-elevation-z0" matSort @list>
+  <ng-container matColumnDef="number">
+    <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'Number' | translate}} </th>
+    <td mat-cell *matCellDef="let element"> <a (click)="open(element)">#{{element.number}}</a></td>
+  </ng-container>
+
+  <ng-container matColumnDef="subject">
+    <th mat-header-cell *matHeaderCellDef> {{'Subject' | translate}} </th>
+    <td mat-cell *matCellDef="let element" class="text"> {{element.subject}} </td>
+  </ng-container>
+
+  <ng-container matColumnDef="state">
+    <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'Status' | translate}} </th>
+    <td mat-cell *matCellDef="let element"> {{element.state | state }} </td>
+  </ng-container>
+
+  <tr mat-header-row *matHeaderRowDef="columns; sticky: true"></tr>
+  <tr mat-row @item *matRowDef="let row; columns: columns;"></tr>
+</table>

package/src/lib/dashboard/cube/documents.widget.ts

@@ -0,0 +1,59 @@
+import { Component, OnDestroy, ViewChild, HostBinding, OnInit } from '@angular/core';
+import { MatTableDataSource } from '@angular/material/table';
+import { MatSort } from '@angular/material/sort';
+import { Subscription } from 'rxjs';
+import { WidgetComponent } from '../../core/base';
+import { BizDoc } from '../../core/decorators';
+import { listAnimation, itemAnimation } from '../../core/animations';
+import { DocumentInfo } from '../../core/info/document-info.service';
+import { WidgetRef } from '../widget-ref';
+import { RouterImpl } from '../../core/router';
+import { MailboxService } from '../../core/mailbox.service';
+import { PromptService } from '../../core/prompt.service';
+@Component({
+  templateUrl: './documents.widget.html',
+  styleUrls: ['../_table.widget.scss'],
+  animations: [
+    listAnimation,
+    itemAnimation
+  ]
+})
+@BizDoc({
+  selector: 'bizdoc-cube-documents'
+})
+/** */
+export class CubeDocumentsWidget implements WidgetComponent<MailInfo[]> {
+  dataSource: MatTableDataSource<MailInfo>;
+  @ViewChild(MatSort) sort: MatSort;
+  @HostBinding('style.height')
+  height: string;
+  loading = false;
+  readonly columns = ['number', 'subject', 'state'];
+  constructor(
+    private _router: RouterImpl,
+    private _mailbox: MailboxService,
+    private _sb: PromptService,
+    widgetRef: WidgetRef) {
+    widgetRef.resize.subscribe(d => this.height = `${d.height}px`);
+  }
+  onBind(data: MailInfo[]) {
+    this.dataSource = new MatTableDataSource<MailInfo>(data);
+    this.dataSource.sort = this.sort;
+  }
+  open(item: MailInfo) {
+    this._mailbox.info(item.id).subscribe(item => {
+      this._router.navigate(['mailbox/d', item.documentId.encodeId()], {
+        state: {
+          item
+        }
+      })
+    }, () => this._sb.error())
+  }
+}
+interface MailInfo {
+  id: number;
+  number?: string;
+  subject?: string;
+  state: string;
+}
+

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

@@ -0,0 +1,3 @@
+<bizdoc-cube-filter [cube]="cube"
+                    [axes]="axes"
+                    (axesChange)="valuesChange($event)"></bizdoc-cube-filter>

package/src/lib/dashboard/cube/filter/filter.component.ts

@@ -0,0 +1,49 @@
+import { Component, OnInit } from '@angular/core';
+import { FormBuilder, FormGroup } from '@angular/forms';
+import { WidgetRef } from '../../widget-ref';
+import { Options } from '../cube-analysis.base';
+import { ArgumentsComponent } from '../../../core/base';
+import { BizDoc } from '../../../core/decorators';
+import { isArray } from '../../../core/functions';
+import { SessionService } from '../../../core/session.service';
+
+@Component({
+  templateUrl: './filter.component.html'
+})
+@BizDoc({ selector: 'bizdoc-cube-widget-filter' })
+/** filter component*/
+export class CubeWidgetFilterComponent implements OnInit, ArgumentsComponent {
+  form: FormGroup;
+  exclude: string[] = [];
+  cube: string;
+  axes : {};
+  /** filter ctor */
+  constructor(
+    private readonly _widgetRef: WidgetRef<Options>,
+    private _session: SessionService,
+    private readonly _fb: FormBuilder
+  ) {
+    const { xAxis, exclude, cube: name } = this._widgetRef.options;
+    this.cube = name;
+    if (xAxis) {
+      if (isArray(xAxis)) this.exclude = [...xAxis];
+      else this.exclude.push(xAxis);
+    }
+    if (exclude) {
+      if (isArray(exclude)) this.exclude = this.exclude.concat(exclude);
+      else this.exclude.push(exclude);
+    }
+    const cube = this._session.profile.cubes.find(c => c.name == name) || this._session.profile.cubes[0], controls = {};
+
+    cube.axes.filter(a => !a.hidden && a.selectionMode !== 'None').forEach(a => {
+      controls[a.name] = this._fb.control(null);
+    });
+    this.form = this._fb.group(controls);
+  }
+  ngOnInit(): void {
+    this.axes = this.form.value;
+  }
+  valuesChange(axes) {
+    this.form.patchValue(axes);
+  }
+}

package/src/lib/dashboard/cube/gauge.component.exp.ts

@@ -0,0 +1,18 @@
+import { Component, ElementRef } from '@angular/core';
+import { WidgetComponent } from '../../core/base';
+import { LinearGauge } from '@syncfusion/ej2-angular-lineargauge';
+
+
+@Component({ template: '' })
+export
+  class GaugeComponent implements WidgetComponent<any> {
+  gauge: LinearGauge;
+  constructor(private _element: ElementRef) { }
+  onBind(data: any, args?: any) {
+    this.gauge && this.gauge.destroy();
+    this.gauge = new LinearGauge({
+      
+    },
+      this._element.nativeElement);
+  }
+}

package/src/lib/dashboard/dashboard.component.html

@@ -0,0 +1,18 @@
+<mat-grid-list [cols]="cols" @deshboard>
+  <mat-grid-tile *ngFor="let w of widgets" [colspan]="w.cols && w.cols <= cols ? w.cols : 1" [rowspan]="w.rows || 1">
+    <mat-card @card>
+      <mat-card-header>
+        <mat-card-title [attr.data-guide]="'widget-'+w.name">
+          <span>{{w.title}}</span>
+          <span class="divider"></span>
+          <button mat-icon-button (click)="widget.refresh()" [matTooltip]="'Refresh'|translate" [attr.aria-label]="'Refresh'|translate"><mat-icon matAnimate="rotate">autorenew</mat-icon></button>
+          <button mat-icon-button (click)="widget.filter($event)" [matTooltip]="'Filter' | translate" [attr.aria-label]="'Filter'|translate" *ngIf="w.arguments.length"><mat-icon>filter_list</mat-icon></button>
+          <button mat-icon-button (click)="guide(w.guide)" [matTooltip]="'Help' | translate" [attr.aria-label]="'Help'|translate" *ngIf="w.guide"><mat-icon>help_outline</mat-icon></button>
+        </mat-card-title>
+      </mat-card-header>
+      <mat-card-content>
+        <bizdoc-widget [model]="w" #widget></bizdoc-widget>
+      </mat-card-content>
+    </mat-card>
+  </mat-grid-tile>
+</mat-grid-list>

package/src/lib/dashboard/dashboard.component.scss

@@ -0,0 +1,36 @@
+:host {
+  width: 100%;
+  height: 100%;
+  overflow-y: auto;
+}
+
+@media only screen and (min-width: 600px) {
+  :host {
+    min-width: 600px;
+  }
+}
+
+.mat-card {
+  width: calc(100% - 50px);
+  height: calc(100% - 50px);
+  overflow: hidden;
+
+  ::ng-deep .mat-card-header-text {
+    width: 100%;
+  }
+
+  .mat-card-title {
+    display: flex;
+    -ms-flex-direction: row;
+    -webkit-flex-direction: row;
+    flex-direction: row;
+  }
+
+  .mat-card-content {
+    height: inherit;
+  }
+
+  &:hover {
+    box-shadow: 0px 3px 3px -2px rgba(0, 0, 0, 0.2), 0px 3px 4px 0px rgba(0, 0, 0, 0.14), 0px 1px 8px 0px rgba(0, 0, 0, 0.12);
+  }
+}

package/src/lib/dashboard/dashboard.component.ts

@@ -0,0 +1,45 @@
+import { Component, OnDestroy } from '@angular/core';
+import { SessionService } from '../core/session.service';
+import { Widget } from '../core/models';
+import { MediaObserver } from '@angular/flex-layout';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+import { WindowTitleService } from '../core/window-title.service';
+import { TranslateService } from '../core/translate.service';
+import { GuideService } from '../core/guide/guide.service';
+import { cardsAnimation, deshboardAnimation } from '../core/animations';
+
+@Component({
+  selector: 'bizdoc-dashboard',
+  templateUrl: './dashboard.component.html',
+  styleUrls: ['./dashboard.component.scss'],
+  animations: [deshboardAnimation, cardsAnimation]
+})
+/** dashboard component*/
+export class DashboardComponent implements OnDestroy {
+  private readonly _destroy = new Subject<void>();
+  /** dashboard ctor */
+  readonly widgets: Widget[];
+  cols = 3;
+  constructor(
+    private _guide: GuideService,
+    observableMedia: MediaObserver,
+    session: SessionService,
+    title: WindowTitleService,
+    translate: TranslateService) {
+    title.set(translate.get('Dashboard'));
+    this.widgets = session.profile.widgets;
+    observableMedia.asObservable().pipe(takeUntil(this._destroy)).subscribe(m => {
+      const { mqAlias } = m[0];
+      this.cols = (mqAlias === 'xs' || mqAlias === 'sm') ? 1 : mqAlias === 'md' ? 2 : 3;
+    });
+  }
+  guide(name: string) {
+    this._guide.start(name);
+  }
+  ngOnDestroy(): void {
+    this._destroy.next();
+    this._destroy.complete();
+  }
+}
+

package/src/lib/dashboard/dashboard.pane.component.ts

@@ -0,0 +1,19 @@
+import { Component } from '@angular/core';
+import { PaneRef } from '../core/slots/pane-ref';
+import { TranslateService } from '../core/translate.service';
+
+@Component({
+  template: '<bizdoc-dashboard></bizdoc-dashboard>',
+  styles: [`:host {
+
+    min-width: 1200px;}`],
+  host: { class: 'pane' }
+})
+/** dashboard component*/
+export class DashboardPaneComponent {
+  constructor(
+    pane: PaneRef,
+    translate: TranslateService) {
+    pane.title = translate.get('Dashboard');
+  }
+}

package/src/lib/dashboard/recents/recents.widget.html

@@ -0,0 +1,27 @@
+<table mat-table [dataSource]="dataSource" class="mat-elevation-z0" @list>
+  <ng-container matColumnDef="number">
+    <th mat-header-cell *matHeaderCellDef> {{'Number' | translate}} </th>
+    <td mat-cell *matCellDef="let item"> <a (click)="open(item)">#{{item.number}}</a> </td>
+  </ng-container>
+
+  <ng-container matColumnDef="subject">
+    <th mat-header-cell *matHeaderCellDef> {{'Subject' | translate}} </th>
+    <td mat-cell *matCellDef="let item" class="text"> {{item.subject}} </td>
+  </ng-container>
+
+  <ng-container matColumnDef="state">
+    <th mat-header-cell *matHeaderCellDef> {{'Status' | translate}} </th>
+    <td mat-cell *matCellDef="let item"> {{item.stateId | state }} </td>
+  </ng-container>
+
+  <ng-container matColumnDef="option">
+    <th mat-header-cell *matHeaderCellDef> </th>
+    <td mat-cell *matCellDef="let item">
+      <button mat-icon-button (click)="view(item, $event)" [matTooltip]="'View' | translate" [attr.aria-label]="'View' | translate" class="tool" matAnimate="rotate"><mat-icon>data_usage</mat-icon></button>
+      <button mat-icon-button (click)="open(item)" [matTooltip]="'Open' | translate" [attr.aria-label]="'Open' | translate" class="tool"><mat-icon>more_horiz</mat-icon></button>
+    </td>
+  </ng-container>
+
+  <tr mat-header-row *matHeaderRowDef="columns; sticky: true"></tr>
+  <tr mat-row @item *matRowDef="let row; columns: columns;"></tr>
+</table>

package/src/lib/dashboard/recents/recents.widget.scss

@@ -0,0 +1,9 @@
+:host ::ng-deep tr
+.tool {
+  opacity: .1
+}
+
+:host ::ng-deep tr:hover
+.tool {
+  opacity: 1
+}

package/src/lib/dashboard/recents/recents.widget.ts

@@ -0,0 +1,74 @@
+import { Component, OnDestroy, OnInit, HostBinding } from '@angular/core';
+import { WidgetComponent } from '../../core/base';
+import { MatTableDataSource } from '@angular/material/table';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+import { BizDoc } from '../../core/decorators';
+import { listAnimation, itemAnimation } from '../../core/animations';
+import { MailboxService } from '../../core/mailbox.service';
+import { WidgetRef } from '../widget-ref';
+import { FormControl } from '@angular/forms';
+import { OpenPolicy } from '../../core/configuration';
+import { RouterImpl } from '../../core/router';
+@Component({
+  templateUrl: './recents.widget.html',
+  styleUrls: ['../_table.widget.scss', './recents.widget.scss'],
+  animations: [
+    listAnimation,
+    itemAnimation
+  ]
+})
+@BizDoc({
+  selector: 'bizdoc-recents'
+})
+/** performance component*/
+export class RecentsWidget implements WidgetComponent<MailInfo[]>, OnInit, OnDestroy {
+  dataSource: MatTableDataSource<MailInfo>;
+  loading = true;
+  @HostBinding('style.height')
+  height: string;
+  readonly search = new FormControl();
+  readonly columns = ['number', 'subject', 'state', 'option'];
+  private readonly _destroy = new Subject<void>();
+  constructor(
+    private _router: RouterImpl,
+    private _service: MailboxService,
+    ref: WidgetRef) {
+    ref.resize.subscribe(d => this.height = `${d.height}px`);
+  }
+  ngOnInit(): void {
+    this._service.changed.pipe(takeUntil(this._destroy)).
+      subscribe(m => {
+        const item = this.dataSource.data.find(i => i.id === m.id);
+        if (item) {
+          Object.assign(item, m);
+          this.dataSource.data.remove(item);
+        }
+        this.dataSource.data.splice(0, 0, m);
+        this.dataSource.filter = '';
+      });
+    this.search.valueChanges.pipe(takeUntil(this._destroy));
+  }
+  onBind(data: MailInfo[]) {
+    this.dataSource = new MatTableDataSource<MailInfo>(data);
+    this.loading = false;
+  }
+  open(item: MailInfo) {
+      this._router.navigate(['mailbox/i', item.id.encodeId()], { policy: OpenPolicy.Clear });
+  }
+  view(item: MailInfo, evt: Event) {
+    evt.stopPropagation();
+      this._router.navigate(['mailbox/i', item.id.encodeId(), 'views'], { policy: OpenPolicy.Tab });
+  }
+  ngOnDestroy(): void {
+    this._destroy.next();
+    this._destroy.complete();
+  }
+}
+interface MailInfo {
+  id: number;
+  formId: string;
+  number?: string;
+  subject?: string;
+  stateId: string;
+}

package/src/lib/dashboard/score/activity.widget.html

@@ -0,0 +1,9 @@
+<!--<ejs-chart [crosshair]='crosshair' [tooltip]='tooltip' background="transparent" [chartArea]='chartArea' [primaryXAxis]='primaryXAxis' [primaryYAxis]='primaryYAxis' width='100%' [theme]='theme'
+           [enableAnimation]="true" [palettes]="palettes" id="activity-chart" [height]="height" dir="ltr"
+           [useGroupingSeparator]="true" [zoomSettings]="zoomSettings" (tooltipRender)="tooltipRender($event)">
+  <e-series-collection>
+    <e-series [dataSource]='data?.everyone' type='Line' xName='time' yName='duration' [name]="'Average'|translate" width=2 [marker]='everyoneMarker' [animation]="animation"></e-series>
+    <e-series [dataSource]='data?.timeline' type='Line' xName='time' yName='standard' [name]="'Standard' | translate" width=2 [marker]='standardMarker' dashArray='5' [animation]="animation" [fill]="fill"> </e-series>
+    <e-series [dataSource]='data?.timeline' type='Line' xName='time' yName='duration' [name]="'You' | translate" width=2 [marker]='youMarker' [animation]="animation"> </e-series>
+  </e-series-collection>
+</ejs-chart>-->