@bizdoc/core 1.13.8 → 1.13.12

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

@@ -0,0 +1,89 @@
+import { Component, OnDestroy, OnInit, HostBinding, Inject } 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 { BizDocConfig, BIZDOC_CONFIG, OpenPolicy } from '../../core/configuration';
+import { RouterImpl } from '../../core/router';
+import { SessionService } from '../../core/session.service';
+import { PromptService } from '../../core/prompt.service';
+@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<RecipientInfo[]>, OnInit, OnDestroy {
+  dataSource: MatTableDataSource<RecipientInfo>;
+  @HostBinding('style.height')
+  height: string;
+  readonly search = new FormControl();
+  readonly enableAnalysis: boolean;
+  readonly columns = ['number', 'subject', 'state', 'option'];
+  private readonly _destroy = new Subject<void>();
+  constructor(
+    private _router: RouterImpl,
+    private _service: MailboxService,
+    private _ps: PromptService,
+    ref: WidgetRef,
+    session: SessionService,
+    @Inject(BIZDOC_CONFIG) config: BizDocConfig) {
+    ref.resize.subscribe(d => this.height = `${d.height}px`);
+    this.enableAnalysis = session.profile.views.length > 0;
+  }
+  ngOnInit(): void {
+    this._service.changed.pipe(takeUntil(this._destroy)).
+      subscribe(m => {
+        const item = this.dataSource.data.find(i => i.id === m.id);
+        item && 
+          this.dataSource.data.remove(item);
+        this.dataSource.data.splice(0, 0, m);
+        this.dataSource.filter = '';
+      });
+    this.search.valueChanges.pipe(takeUntil(this._destroy));
+  }
+  onBind(data: RecipientInfo[]) {
+    this.dataSource = new MatTableDataSource<RecipientInfo>(data);
+  }
+  private _navigate(item: RecipientInfo, commands: string[], extra?) {
+    item.loading = true;
+    this._service.get(item.id).
+      subscribe(i => {
+        this._router.navigate(['mailbox/i', item.id.encodeId(), ...commands], { ...extra, state: { item: i } });
+        item.loading = false;
+      }, () => {
+        this._ps.error();
+        item.loading = false;
+      });
+  }
+  open(item: RecipientInfo) {
+    this._navigate(item, [], { policy: OpenPolicy.Clear });
+  }
+  view(item: RecipientInfo, evt: Event) {
+    this._navigate(item, ['views'], { policy: OpenPolicy.Tab });
+    evt.stopPropagation();
+  }
+  ngOnDestroy(): void {
+    this._destroy.next();
+    this._destroy.complete();
+  }
+}
+interface RecipientInfo {
+  id: number;
+  formId: string;
+  number?: string;
+  subject?: string;
+  stateId: string;
+  loading?: boolean;
+}

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>-->

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

@@ -0,0 +1,164 @@
+import { Component, OnDestroy, ViewChild, ElementRef } from "@angular/core";
+import { Subject } from "rxjs";
+import { takeUntil } from "rxjs/operators";
+import dayjs from 'dayjs';
+import { Chart, AxisModel, MarkerSettingsModel, CrosshairSettingsModel, TooltipSettingsModel, AnimationModel, LegendSettingsModel, SeriesModel, ZoomSettingsModel, ITooltipRenderEventArgs, ChartAreaModel, ChartComponent } from "@syncfusion/ej2-angular-charts";
+import { BizDoc } from "../../core/decorators";
+import { WidgetComponent } from "../../core/base";
+import { FONT_FAMILY } from "../../core/colors";
+import { TranslateService } from "../../core/translate.service";
+import { SessionService } from "../../core/session.service";
+import { WidgetRef } from "../widget-ref";
+
+@Component({
+  template: '',
+  //templateUrl: './activity.widget.html'
+})
+@BizDoc({
+  selector: 'bizdoc-personal-activity'
+})
+export class PersonalActivityWidget implements WidgetComponent<Model>, OnDestroy {
+  @ViewChild(ChartComponent) chart: Chart;
+  height: string;
+  width: string;
+  data: Model;
+  readonly dir = this._session.direction;
+  readonly primaryXAxis: AxisModel = {
+    valueType: 'DateTime',
+    labelFormat: 'MMM dd',
+    edgeLabelPlacement: 'Shift',
+    majorGridLines: { width: 0 },
+    labelStyle: {
+      fontFamily: FONT_FAMILY
+    },
+    labelIntersectAction: 'Hide',
+    maximumLabels: 2
+  };
+  readonly zoomSettings: ZoomSettingsModel = {
+    mode: 'X',
+    enableMouseWheelZooming: true,
+    enablePinchZooming: true,
+    toolbarItems: [],
+    enableSelectionZooming: false,
+    enableScrollbar: true
+  };
+  readonly crosshair: CrosshairSettingsModel = {
+    enable: true,
+    lineType: 'Vertical'
+  };
+  readonly tooltip: TooltipSettingsModel = {
+    enable: true, shared: true,
+    textStyle: {
+      fontFamily: FONT_FAMILY
+    }
+  };
+  readonly animation: AnimationModel = { enable: true };
+  readonly primaryYAxis: AxisModel = {
+    skeleton: 'duration',
+    labelStyle: {
+      size: '0px'
+    },
+    minorTickLines: { width: 0 }
+  };
+  readonly standardMarker: MarkerSettingsModel = {
+    visible: false,
+    height: 6,
+    width: 6,
+    shape: 'Pentagon'
+  };
+  readonly youMarker: MarkerSettingsModel = {
+    visible: false, height: 6, width: 6,
+    shape: 'Diamond'
+  };
+  readonly everyoneMarker: MarkerSettingsModel = {
+    height: 6,
+    width: 6,
+    visible: false
+  };
+  readonly chartArea: ChartAreaModel = {
+    border: {
+      width: 0
+    }
+  };
+  readonly legendSettings: LegendSettingsModel = {
+    textStyle: {
+      fontFamily: FONT_FAMILY
+    },
+    isInversed: this._session.inverse,
+    visible: true
+  };
+  theme: 'MaterialDark' | 'Material' = this._session.theme.dark ? 'MaterialDark' : 'Material';
+  palettes = this._session.accentPalette;
+  fill = this._session.getPrimery(400);
+  private readonly _destroy = new Subject<void>();
+  constructor(
+    ref: WidgetRef,
+    private _elementRef: ElementRef,
+    private _translate: TranslateService, private _session: SessionService) {
+    this._session.themeChange.pipe(
+      takeUntil(this._destroy)).subscribe(t => {
+        this.theme = t.dark ? 'MaterialDark' : 'Material';
+        this.palettes = this._session.accentPalette;
+        this.fill = this._session.getPrimery(400);
+        this._draw();
+      });
+    ref.resize.subscribe(d => {
+      this.height = `${d.height}px`;
+      if (this.chart) this.chart.height = this.height;
+      this.width = `${d.width}px`;
+    });
+  }
+  onBind(data: Model) {
+    this.data = data;
+    this._prepare();
+    this._draw();
+  }
+
+  private _prepare() {
+    this.data.timeline.forEach(p => {
+      p.time = new Date(p.time);
+    });
+    this.data.everyone.forEach(p => {
+      p.time = new Date(p.time);
+    });
+  }
+  tooltipRender(evt: ITooltipRenderEventArgs) {
+    evt.text = `${evt.series.name} : <b>${dayjs.duration(evt.point.y as number, 's').humanize()}</b>`;
+  }
+  private _draw() {
+    const series: SeriesModel[] = [{
+      dataSource: this.data.everyone, type: 'Line', xName: 'time', yName: 'duration', name: this._translate.get('Average'), width: 2, marker: this.everyoneMarker, animation: this.animation
+    },
+    {
+      dataSource: this.data.timeline, type: 'Line', xName: 'time', yName: 'standard', fill: this.fill, name: this._translate.get('Standard'), width: 2, marker: this.standardMarker, dashArray: '5', animation: this.animation
+    },
+    {
+      dataSource: this.data.timeline, type: 'Line', xName: 'time', yName: 'duration', name: this._translate.get('You'), width: 2, marker: this.youMarker, animation: this.animation
+    }];
+    this.chart && this.chart.destroy();
+    this.chart = new Chart({
+      crosshair: this.crosshair, tooltip: this.tooltip, background: 'transparent', chartArea: this.chartArea,
+      primaryXAxis: this.primaryXAxis, primaryYAxis: this.primaryYAxis, width: '100%',
+      theme: this.theme, legendSettings: this.legendSettings,
+      height: this.height,
+      zoomSettings: this.zoomSettings,
+      tooltipRender: this.tooltipRender.bind(this),
+      enableAnimation: true, palettes: this.palettes, useGroupingSeparator: true,
+      enableRtl: false,
+      series
+    }, this._elementRef.nativeElement);
+  }
+  ngOnDestroy(): void {
+    this._destroy.next();
+    this._destroy.complete();
+  }
+}
+interface Model {
+  timeline: Point[];
+  everyone: Point[];
+}
+interface Point {
+  time: Date;
+  duration: number;
+  standard?: number;
+}

package/src/lib/dashboard/score/compare-departments.widget.html

@@ -0,0 +1,8 @@
+<!--<ejs-chart [axes]='axes' [rows]='rows' [height]="height"
+  [legendSettings]='legend' [crosshair]='crosshair' [tooltip]='tooltip'
+  background="transparent" [chartArea]='chartArea'
+  [primaryXAxis]='primaryXAxis' [primaryYAxis]='primaryYAxis'
+  [enableRtl]='enableRtl' [theme]='theme' [margin]="margin"
+  [useGroupingSeparator]='true' [palettes]='palettes' [id]="id"
+  [enableAnimation]="true" [zoomSettings]="zoomSettings" dir="ltr" (tooltipRender)="tooltipRender($event)"> 
+</ejs-chart>-->

package/src/lib/dashboard/score/compare-departments.widget.ts

@@ -0,0 +1,210 @@
+import { Component, OnDestroy, ViewChild, ElementRef } from "@angular/core";
+import { Chart, AxisModel, CrosshairSettingsModel, TooltipSettingsModel, SeriesModel, LegendSeriesModel, RowModel, LineSeriesService, CrosshairService, ColumnSeriesService, MarginModel, ZoomSettingsModel, ITooltipRenderEventArgs, ChartAreaModel, ChartComponent } from "@syncfusion/ej2-angular-charts";
+import { WidgetComponent } from "../../core/base";
+import { BizDoc } from "../../core/decorators";
+import { TranslateService } from "../../core/translate.service";
+import { SessionService } from "../../core/session.service";
+import { Subject } from "rxjs";
+import { takeUntil } from "rxjs/operators";
+import dayjs from 'dayjs';
+import { WidgetRef } from "../widget-ref";
+import { FONT_FAMILY } from "../../core/colors";
+/** */
+@Component({
+  //templateUrl: './compare-departments.widget.html',
+  template: '',
+  providers: [LineSeriesService, CrosshairService, ColumnSeriesService],
+  host: {
+    '[id]': 'id',
+    dir: 'ltr'
+  }
+})
+@BizDoc({
+  selector: 'bizdoc-compare-departments'
+})
+export class CompareDepartmentsWidget implements WidgetComponent<Department[]>, OnDestroy {
+  static nextId = 0;
+  readonly id = `department-compare-${CompareDepartmentsWidget.nextId++}`;
+  palettes = this._session.accentPalette;
+  @ViewChild(ChartComponent) chart: Chart;
+  theme: 'Material' | 'MaterialDark' = this._session.theme.dark ? 'MaterialDark' : 'Material'
+  readonly enableRtl = this._session.inverse;
+  readonly rows: RowModel[] = [
+    {
+      height: '15%'
+    }, {
+      height: '85%'
+    }
+  ];
+  readonly axes: AxisModel[] = [{
+    name: 'primary',
+    labelStyle: { size: '0px' },
+    rowIndex: 1
+  }, {
+    name: 'volume',
+    rowIndex: 0,
+    majorGridLines: { width: 0 }, lineStyle: { width: 0 },
+    labelStyle: { size: '0px' },
+    majorTickLines: { width: 0 }
+  }];
+  readonly chartArea: ChartAreaModel = {
+    border: {
+      width: 0
+    }
+  };
+  readonly zoomSettings: ZoomSettingsModel = {
+    mode: 'X',
+    enableMouseWheelZooming: true,
+    enablePinchZooming: true,
+    toolbarItems: [],
+    enableSelectionZooming: false,
+    enableScrollbar: true
+  };
+  readonly primaryXAxis: AxisModel = {
+    valueType: 'DateTime',
+    labelFormat: 'MMM dd',
+    labelStyle: {
+      fontFamily: FONT_FAMILY
+    },
+    labelIntersectAction: 'Hide',
+    majorGridLines: { width: 0 }
+  };
+  readonly crosshair: CrosshairSettingsModel = {
+    enable: true,
+    lineType: 'Vertical'
+  };
+  readonly tooltip: TooltipSettingsModel = {
+    enable: true, shared: true, textStyle: {
+      fontFamily: FONT_FAMILY
+    }
+  };
+  readonly legend: LegendSeriesModel = {
+    visible: true,
+    isInversed: this._session.inverse,
+    textStyle: {
+      fontFamily: FONT_FAMILY
+    },
+  };
+  readonly primaryYAxis: AxisModel = {
+    skeleton: 'duration',
+    labelStyle: {
+      size: '0px'
+    },
+    lineStyle: { width: 0 },
+    minorTickLines: { width: 0 }
+  };
+  readonly margin: MarginModel = {
+    bottom: 0
+  };
+  series: SeriesModel[];
+  height: string;
+  private readonly _destroy = new Subject<void>();
+  data: Department[];
+  constructor(private _translate: TranslateService,
+    widgetRef: WidgetRef,
+    private _elementRef: ElementRef,
+    private _session: SessionService) {
+    _session.themeChange.pipe(takeUntil(this._destroy)).subscribe(t => {
+      this.theme = t.dark ? 'MaterialDark' : 'Material';
+      this.palettes = _session.accentPalette;
+      this._draw();
+    });
+    widgetRef.resize.subscribe(d => {
+      this.height = `${d.height}px`;
+      if (this.chart) this.chart.height = this.height;
+    });
+  }
+  onBind(data: Department[]) {
+    this._prepare(data);
+    this.data = data;
+    this._draw();
+  }
+  private _draw() {
+    this.chart && this.chart.destroy();
+    this.chart = new Chart({
+      axes: this.axes,
+      series: this.series,
+      height: this.height,
+      rows: this.rows,
+      legendSettings: this.legend,
+      crosshair: this.crosshair,
+      tooltip: this.tooltip,
+      background: 'transparent',
+      chartArea: this.chartArea,
+      primaryXAxis: this.primaryXAxis,
+      primaryYAxis: this.primaryYAxis,
+      theme: this.theme,
+      margin: this.margin,
+      useGroupingSeparator: true,
+      palettes: this.palettes,
+      zoomSettings: this.zoomSettings,
+      tooltipRender: this.tooltipRender.bind(this)
+    }, this._elementRef.nativeElement);
+
+  }
+  tooltipRender(evt: ITooltipRenderEventArgs) {
+    evt.headerText = dayjs(evt.point.x as Date).format('MMM DD');
+    if (evt.series.yName !== 'count')
+      evt.text = `${evt.series.name} : <b>${dayjs.duration(evt.point.y as number, 's').humanize()}</b>`;
+  }
+  private _prepare(data: Department[]) {
+    const indicatorData: Volume[] = [], series = data.map(s => {
+      s.points.forEach(p => {
+        const date = p.date = new Date(p.date),
+          indicator = indicatorData.find(i => i.date.valueOf() === date.valueOf());
+        if (indicator)
+          indicator.count += p.count;
+        else
+          indicatorData.push({ count: p.count, date });
+      });
+      const serie: SeriesModel = {
+        type: 'Line',
+        xName: 'date',
+        yName: 'duration',
+        yAxisName: 'primary',
+        name: s.title,
+        dataSource: s.points,
+        marker: {
+          width: 6,
+          height: 6,
+          visible: false
+        }
+      };
+      return serie;
+    });
+    series.push({
+      type: 'Column',
+      xName: 'date',
+      yName: 'count',
+      name: this._translate.get('Volume'),
+      dataSource: indicatorData,
+      yAxisName: 'volume',
+      marker: {
+        width: 0,
+        height: 0,
+        visible: false
+      }
+    });
+    this.series = series;
+  }
+
+  ngOnDestroy(): void {
+    this.chart && this.chart.destroy();
+    this._destroy.next();
+    this._destroy.complete();
+  }
+}
+
+interface Department {
+  points: Point[];
+  title: string;
+}
+interface Point {
+  date: Date;
+  duration: number;
+  count: number;
+}
+interface Volume {
+  date: Date;
+  count: number;
+}

package/src/lib/dashboard/score/peers-performance.widget.html

@@ -0,0 +1,23 @@
+<!--<ejs-circulargauge [tooltip]='tooltip'
+                   style="display: block"
+                   [id]='id'
+                   dir='ltr'
+                   (tooltipRender)='tooltipRender($event)'
+                   [margin]='margin'
+                   centerY='50%'
+                   width='100%'
+                   description=''
+                   [height]='height'
+                   centerX='50%'
+                   [width]='width'
+                   [enableRtl]=false
+                   [legendSettings]=legendSettings
+                   background='transparent'
+                   [theme]='theme'>
+  <e-axes>
+    <e-axis radius='90%' [maximum]='max' startAngle=200 endAngle=160 [majorTicks]='majorTicks' [direction]='direction'
+            [labelStyle]='labelStyle' [lineStyle]='lineStyle' [minorTicks]='minorTicks' [annotations]='annotations'
+            [ranges]='ranges' [pointers]='pointers'>
+    </e-axis>
+  </e-axes>
+</ejs-circulargauge>-->