@bizdoc/core 1.8.8 → 1.8.9

package/src/lib/dashboard/score/pending-results.widget.ts

@@ -0,0 +1,57 @@
+import { Component, ViewChild, OnDestroy, HostBinding } from "@angular/core";
+import { MatSort } from "@angular/material/sort";
+import { MatTableDataSource } from "@angular/material/table";
+import { Subject } from "rxjs";
+const moment = require('moment');
+import { BizDoc } from "../../core/decorators";
+import { WidgetComponent } from "../../core/base";
+import { listAnimation, itemAnimation } from "../../core/animations";
+import { WidgetRef } from "../widget-ref";
+
+@Component({
+  selector: 'bizdoc-pending-results',
+  templateUrl: './pending-results.widget.html',
+  styleUrls: ['../_table.widget.scss'],
+  animations: [
+    listAnimation,
+    itemAnimation
+  ]
+})
+@BizDoc({
+  selector: 'bizdoc-pending-results'
+})
+export class PendingResultsWidget implements WidgetComponent<DataModel[]>, OnDestroy {
+  @ViewChild(MatSort) sort: MatSort;
+  @HostBinding('style.height')
+  height: string;
+  readonly columns = ['name', 'duration', 'standard', 'count'];
+  dataSource: MatTableDataSource<DataModel>;
+  private readonly _destroy = new Subject<void>();
+  constructor(
+    ref: WidgetRef) {
+    ref.resize.subscribe(d => this.height = `${d.height}px`);
+  }
+  onBind(data: DataModel[]) {
+    this.dataSource = new MatTableDataSource(data);
+    this.sort.active = 'duration';
+    this.sort.direction = 'desc';
+    this.dataSource.sort = this.sort;
+  }
+  asDays(seconds: number) {
+    const duration = moment.duration(seconds, 's');
+    return `${Math.floor(duration.asDays())}:${Math.round(duration.hours())}`;
+  }
+  ngOnDestroy(): void {
+    this._destroy.next();
+    this._destroy.complete();
+  }
+}
+
+interface DataModel {
+  name: string;
+  userId: string;
+  pending: number;
+  processed: number;
+  duration?: number;
+  standard?: number;
+}

package/src/lib/dashboard/score/personal-score.widget.html

@@ -0,0 +1,18 @@
+<!--<ejs-circulargauge [tooltip]='tooltip' (tooltipRender)='tooltipRender($event)' style="display: block;"
+                   centerY='50%' [width]='width' [height]='height' centerX='50%' background='transparent' [theme]='theme'
+                   [legendSettings]='legendSettings'>
+  <e-axes>
+    <e-axis radius='90%' [maximum]='max' startAngle=270 endAngle=90 [majorTicks]='majorTicks' [direction]='direction'
+            [labelStyle]='labelStyle' [lineStyle]='lineStyle' [minorTicks]='minorTicks'
+            [ranges]='ranges' [pointers]='pointers'>
+      <e-pointers>
+        <e-pointer value=0 radius='' [cap]='cap' [animation]='animation' color=''>
+        </e-pointer>
+      </e-pointers>
+      <e-ranges>
+        <e-range start=0 end=50 radius='0%' color=''>
+        </e-range>
+      </e-ranges>
+    </e-axis>
+  </e-axes>
+</ejs-circulargauge>-->

package/src/lib/dashboard/score/personal-score.widget.ts

@@ -0,0 +1,225 @@
+import { Component, OnDestroy, ViewChild, ElementRef } from "@angular/core";
+import { WidgetComponent } from "../../core/base";
+import { BizDoc } from "../../core/decorators";
+import { GaugeDirection, CircularGauge, RangeModel, PointerModel, TickModel, LabelModel, LineModel, TooltipSettingsModel, ITooltipRenderEventArgs, MarginModel, Annotations, GaugeTooltip, Legend, CircularGaugeComponent } from "@syncfusion/ej2-angular-circulargauge";
+import { SessionService } from "../../core/session.service";
+import { takeUntil } from "rxjs/operators";
+import { Subject } from "rxjs";
+import { LegendSettingsModel } from "@syncfusion/ej2-circulargauge/src/circular-gauge/legend/legend-model";
+import { TranslateService } from "../../core/translate.service";
+import { Directionality } from "@angular/cdk/bidi";
+import { DurationFormatPipe } from "../../core/pipes/duration.pipe";
+import { WidgetRef } from "../widget-ref";
+import { FONT_FAMILY } from "../../core/colors";
+CircularGauge.Inject(GaugeTooltip, Legend);
+@Component({
+  //templateUrl: './personal-score.widget.html',
+  template: '',
+  //styles: [':host ::ng-deep .score {font-size: 50px}'],
+  host: {
+    style: 'display: block',
+    dir: 'ltr'
+  }
+})
+@BizDoc({
+  selector: 'bizdoc-personal-score'
+})
+export class PersonalScoreWidget implements WidgetComponent<Model>, OnDestroy {
+  @ViewChild(CircularGaugeComponent) gauge: CircularGauge;
+  ranges: RangeModel[];
+  pointers: PointerModel[];
+  max = 0;
+  theme: 'Material' | 'MaterialDark' = this._session.theme.dark ? 'MaterialDark' : 'Material';
+  readonly margin: MarginModel = { left: 0, top: 0, right: 0, bottom: 0 };
+  readonly tooltip: TooltipSettingsModel = {
+    rangeSettings: {
+      enableAnimation: true,
+      //showAtMousePosition: true,
+      textStyle: {
+        fontFamily: FONT_FAMILY
+      }      
+    },
+    textStyle: {
+      fontFamily: FONT_FAMILY
+    },
+    enable: true,
+    //showAtMousePosition: true,
+    type: ['Pointer', 'Range'],
+    enableAnimation: true
+  }
+  readonly lineStyle: LineModel = { width: 0, color: '#1d1d1d' };
+  readonly labelStyle: LabelModel = {
+    font: {
+      fontFamily: FONT_FAMILY,
+      size: '0px'
+    }
+  };
+  readonly majorTicks: TickModel = {
+    width: 0, position: 'Outside'
+  };
+  readonly legendSettings: LegendSettingsModel = {
+    visible: true, position: 'Top', shape: 'Diamond', alignment: 'Center', padding: 0, margin: { top: 0 }, location: { y: 0 }, textStyle: {
+      fontFamily: FONT_FAMILY
+    }
+  };
+  readonly direction: GaugeDirection = this._dir.value === 'ltr' ? 'ClockWise' : 'AntiClockWise';
+  readonly minorTicks: TickModel = { width: 0, position: 'Outside' };
+  readonly enableRtl = this._session.inverse;
+  height: string;
+  width: string;
+  private _data: Model;
+  private readonly _destroy = new Subject<void>();
+
+  constructor(
+    ref: WidgetRef,
+    private _session: SessionService,
+    private _dir: Directionality,
+    private _duration: DurationFormatPipe,
+    private _elementRef: ElementRef,
+    private _translate: TranslateService) {
+    _session.themeChange.pipe(takeUntil(this._destroy)).
+      subscribe(t => {
+        this.theme = t.dark ? 'MaterialDark' : 'Material';
+        this.gauge.theme = this.theme;
+        this._prepare();
+        this._refresh();
+        this._animate();
+      });
+    ref.resize.subscribe(d => {
+      this.height = `${d.height}px`;
+      this.width = `${d.width}px`;
+      if (this.gauge) {
+        this.gauge.height = this.height;
+        this.gauge.width = this.width;
+    this._animate();
+      }
+    });
+  }
+  onBind(data: Model) {
+    this._data = data;
+    this._prepare();
+    if (!this.gauge) this._draw();
+    else
+      this._refresh();
+    this._animate();
+  }
+  private _prepare() {
+    this.max = Math.max(this._data.you.max, this._data.everybody.max, this._data.everybody.standardHigh);
+    const palettes = this._session.accentPalette;
+    const ranges: RangeModel[] = [{
+      start: this._data.everybody.standardLow < this._data.everybody.standardHigh ? this._data.everybody.standardLow : this._data.everybody.min || 0,
+      end: this._data.everybody.standardHigh,
+      color: this._session.getPrimery(400),
+      legendText: this._translate.get('Standard'),
+      startWidth: 6,
+      endWidth: 6,
+      radius: '93%'
+    }, {
+      start: this._data.everybody.min || 0,
+      end: this._data.everybody.max || 0,
+      startWidth: 15,
+      endWidth: 15,
+      legendText: this._translate.get('EverybodyRange'),
+      color: palettes[1],
+      radius: '90%'
+    }, {
+      start: this._data.you.min || 0,
+      end: this._data.you.max || 0,
+      radius: '70%',
+      color: palettes[5],
+      legendText: this._translate.get('YourRange'),
+      startWidth: 15,
+      endWidth: 15
+    }];
+    const pointers: PointerModel[] = [{
+      type: 'Needle',
+      radius: '50%',
+      animation: { enable: true, duration: 1000 },
+      value: 0,
+      needleTail: { length: '0px' },
+      cap: { radius: 0, },
+      color: palettes[5],
+      border: {
+        width: 0
+      }
+    }, {
+      type: 'Marker',
+      markerShape: 'InvertedTriangle',
+      radius: '100%',
+      animation: { enable: true, duration: 1000 },
+      value: 0,
+      markerWidth: 15,
+      markerHeight: 15,
+      color: palettes[1],
+      border: {
+        width: 0
+      }
+    }];
+    this.ranges = ranges,
+      this.pointers = pointers;
+  }
+  private _animate() {
+    this._data.you.duration &&
+      setTimeout(() => this.gauge.setPointerValue(0, 0, this._data.you.duration), 100);
+    this._data.everybody.duration &&
+      setTimeout(() => this.gauge.setPointerValue(0, 1, this._data.everybody.duration), 100);
+  }
+  tooltipRender(e: ITooltipRenderEventArgs) {
+    if (e.pointer) {
+      const idx = e.axis.pointers.indexOf(e.pointer);
+      e.content = idx === 0 ? `${this._translate.get('Average')} ${this._duration.transform(e.pointer.value)}` :
+        `${this._translate.get('Average')} ${this._duration.transform(e.pointer.value)}`;
+    }
+    else if (e.range) {
+      e.content = e.range.start ? `${e.range.legendText} ${this._duration.transform(e.range.end)}`
+        : `${e.range.legendText} ${this._duration.transform(e.range.end)}`;
+    }
+  }
+  private _draw() {
+    this.gauge && this.gauge.destroy();
+    this.gauge = new CircularGauge({
+      tooltip: this.tooltip,
+      centerY: '50%',
+      centerX: '50%',
+      width: this.width,
+      height: this.height,
+      moveToCenter: true,
+      background: 'transparent',
+      theme: this.theme,
+      margin: this.margin,
+      legendSettings: this.legendSettings,
+      tooltipRender: this.tooltipRender.bind(this),
+      enableRtl: this._session.inverse,
+      axes: [{
+        radius: '90%', maximum: this.max,
+        startAngle: 270,
+        endAngle: 90,
+        majorTicks: this.majorTicks, direction: this.direction,
+        labelStyle: this.labelStyle, lineStyle: this.lineStyle, minorTicks: this.minorTicks,
+        ranges: this.ranges,
+        pointers: this.pointers
+      }]
+    }, this._elementRef.nativeElement);
+  }
+  private _refresh() {
+    this.gauge.axes[0].pointers = this.pointers;
+    this.gauge.axes[0].ranges = this.ranges;
+    this.gauge.refresh();
+  }
+  ngOnDestroy(): void {
+    this.gauge && this.gauge.destroy();
+    this._destroy.next();
+    this._destroy.complete();
+  }
+}
+interface Model {
+  you: Range;
+  everybody: Range;
+}
+interface Range {
+  duration: number;
+  standardHigh?: number;
+  standardLow?: number;
+  min?: number;
+  max?: number;
+}

package/src/lib/dashboard/widget-item.component.ts

@@ -0,0 +1,90 @@
+import { Component, Input, ViewContainerRef, OnDestroy, Injector, HostListener, AfterViewInit, OnInit } from '@angular/core';
+import { ComponentType } from '@angular/cdk/portal';
+import { HttpClient } from '@angular/common/http';
+import { Subject } from 'rxjs';
+import { debounceTime, takeUntil } from 'rxjs/operators';
+import { queryParams } from '../core/functions';
+import { ArgumentsComponent, WidgetComponent } from '../core/base';
+import { REGISTRY } from '../core/decorators';
+import { Widget } from '../core/models';
+import { WidgetRef } from "./widget-ref";
+import { BizDocComponentFactoryResolver } from '../core/component-factory-resolver';
+import { PromptService } from '../core/prompt.service';
+import { Popup } from '../core/popup/popup.service';
+import { LayoutComponent } from '../core/layout/layout.component';
+
+@Component({
+  selector: 'bizdoc-widget',
+  template: ''
+})
+export class WidgetItemComponent implements OnInit, AfterViewInit, OnDestroy {
+  @Input() model: Widget;
+  private _instance: WidgetComponent<any>;
+  private _widgetRef: WidgetRef<any>;
+  private readonly _resizing = new Subject<void>();
+  private readonly _destroy = new Subject<void>();
+  args: any;
+  constructor(
+    private _popup: Popup,
+    private _http: HttpClient,
+    private _sb: PromptService,
+    private _injector: Injector,
+    private _vc: ViewContainerRef,
+    private _cf: BizDocComponentFactoryResolver) { }
+  ngOnInit(): void {
+    this._resizing.pipe(debounceTime(150)).subscribe(() => this._widgetRef._resize.next(this._dim()));
+  }
+  ngAfterViewInit(): void {
+    // dom height
+    setTimeout(() => {
+      const factory = this._cf.resolve(this.model.template);
+      this._widgetRef = new WidgetRef(this.model, this._dim());
+      const injector = Injector.create([{ provide: WidgetRef, useValue: this._widgetRef }], this._injector);
+      this._instance = this._vc.createComponent(factory, null, injector).instance as WidgetComponent<any>;
+      this.refresh();
+    }, 100);
+  }
+  private _dim(): { height: number; width: number; } {
+    return (this._vc.element.nativeElement as HTMLDivElement).parentElement.getBoundingClientRect();
+  }
+
+  refresh(args?) {
+    const params = queryParams(args || this.args || {});
+    this._http.put<any>(`/api/dashboard/${this.model.name}`, params).subscribe(d => {
+      this._instance.onBind(d);
+      this.args = args;
+    }, () => this._sb.error());
+  }
+  filter(evt: Event) {
+    if (this.model.argumentsTemplate) {
+      const comp = REGISTRY[this.model.argumentsTemplate] as ComponentType<any>;
+      const injector = Injector.create([{ provide: WidgetRef, useValue: this._widgetRef }], this._injector);
+      this._popup.open(comp, evt.srcElement as HTMLElement, { injector }).opened.subscribe((e: ArgumentsComponent<any>) => {
+        this.args && e.form.patchValue(this.args);
+        e.form.valueChanges.pipe(takeUntil(this._destroy), debounceTime(100)).subscribe(v =>
+          e.form.valid && this.refresh(v)
+        );
+      });
+    } else 
+      this._popup.open(LayoutComponent, evt.srcElement as HTMLElement).opened.subscribe(f => {
+        f.fields = this.model.arguments;
+        f.model = this.args || {};
+        f.create();
+        f.modelChange.pipe(takeUntil(this._destroy), debounceTime(100)).subscribe(v =>
+          f.valid &&
+          this.refresh(v)
+        );
+      });
+  }
+
+  @HostListener('window:resize')
+  resize() {
+    this._resizing.next();
+  }
+  ngOnDestroy(): void {
+    this._widgetRef._destroy();
+    this._resizing.complete();
+    this._destroy.next();
+    this._destroy.complete();
+  }
+}

package/src/lib/dashboard/widget-ref.ts

@@ -0,0 +1,20 @@
+import { Widget, Dimentions } from '../core/models';
+import { Observable, BehaviorSubject } from 'rxjs';
+
+export
+  class WidgetRef<O = any> {
+  _resize: BehaviorSubject<Dimentions>;
+  constructor(private _widget: Widget, dim: Dimentions) {
+    this._resize = new BehaviorSubject(dim);
+  }
+  get options(): O {
+    return this._widget.options || {};
+  }
+  get name(): string {
+    return this._widget.name;
+  }
+  get resize(): Observable<Dimentions> { return this._resize.asObservable(); }
+  _destroy() {
+    this._resize.complete();
+  }
+}

package/src/lib/desktop.module.ts

@@ -0,0 +1,93 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { HttpClientModule } from '@angular/common/http';
+import { FlexLayoutModule } from '@angular/flex-layout';
+import { ReactiveFormsModule } from '@angular/forms';
+import { RouterModule } from '@angular/router';
+import { MomentModule } from 'ngx-moment';
+import { SharedModule } from './shared.module';
+
+import { SchedulerPaneComponent } from './scheduler/scheduler.pane.component';
+import { SlotRouterDirective } from './core/slots/router.directive';
+import { PanesRouter } from './core/slots/router.service';
+import { ContactsPaneComponent } from './chat/contacts.pane.component';
+import { ConversationPaneComponent } from './chat/conversation.pane.component';
+import { BrowsePaneComponent } from './browse/browse.pane.component';
+import { FoldersMenuComponent } from './browse/folders-menu.component';
+import { ActionPaneDialog } from './compose/action/action.pane.dialog';
+import { CommentsPaneComponent } from './compose/comments/comments.pane.component';
+import { ComposePaneComponent } from './compose/compose.pane.component';
+import { ComposeMenuComponent } from './compose/new-menu.component';
+import { TracePaneComponent } from './compose/trace/trace.pane.component';
+import { VersionPaneComponent } from './compose/version-compare/version.pane.component';
+import { SlotsComponent } from './core/slots/slots.component';
+import { CubeMenuComponent } from './cube/cube-menu.component';
+import { ExploreItemPaneComponent } from './cube/explore/item.pane.component';
+import { CubeExplorePaneComponent } from './cube/explore/explore.pane.component';
+import { CubeMatrixPaneComponent } from './cube/matrix/matrix.pane.component';
+import { CubeViewPaneComponent } from './cube/view.pane.component';
+import { NotificationsPaneComponent } from "./notifications/notifications.pane.component";
+import { ReportPaneComponent } from './reports/report.pane.component';
+import { ReportsMenuComponent } from './reports/reports-menu.component';
+import { HomeComponent } from './home/home.desktop.component';
+import { QuickOptionsComponent } from './home/options/options.component';
+import { QuickSignComponent } from './home/sign/sign.component';
+import { AdminMenuComponent } from './admin/admin-menu.component';
+import { AdminDismiss } from "./admin/admin-dismiss.service";
+import { DashboardPaneComponent } from './dashboard/dashboard.pane.component';
+import { QuickNotificationsComponent } from './home/notifications/notifications.component';
+import { SearchService } from './home/search.service';
+import { QuickToolsComponent } from './home/tools.component';
+import { DocumentViewPaneComponent } from './views/views.pane.component';
+import { DocumentInfoPaneComponent } from './compose/document.pane.component';
+import { ItemResolver } from './cube/explore/item-resolver.service';
+import { DocumentResolver } from './compose/document-resolver.service';
+import { RecipientResolver } from './compose/recipient-resolver.service';
+
+@NgModule({
+  declarations: [DocumentInfoPaneComponent,
+    DocumentViewPaneComponent,
+    QuickToolsComponent,
+    QuickNotificationsComponent,
+    DashboardPaneComponent,
+    AdminMenuComponent,
+    HomeComponent,
+    QuickSignComponent, QuickOptionsComponent,
+    SlotRouterDirective, SlotsComponent,
+    CubeMenuComponent, CubeViewPaneComponent, ExploreItemPaneComponent, CubeExplorePaneComponent, NotificationsPaneComponent,
+    TracePaneComponent, VersionPaneComponent,
+    ActionPaneDialog, CommentsPaneComponent,
+    ReportsMenuComponent, ReportPaneComponent,
+    FoldersMenuComponent,
+    BrowsePaneComponent,
+    ComposeMenuComponent, ComposePaneComponent,
+    CubeMatrixPaneComponent,
+    SchedulerPaneComponent,
+    ContactsPaneComponent, ConversationPaneComponent],
+  providers: [SearchService, DocumentResolver, RecipientResolver, ItemResolver,
+    PanesRouter, AdminDismiss]
+  ,
+  imports: [
+    CommonModule,
+    HttpClientModule,
+    ReactiveFormsModule,
+    FlexLayoutModule,
+    RouterModule,
+    MomentModule,
+    SharedModule
+  ],
+  exports: [SlotRouterDirective, SlotsComponent,
+    DashboardPaneComponent,
+    CubeMenuComponent, CubeViewPaneComponent, ExploreItemPaneComponent, CubeExplorePaneComponent, NotificationsPaneComponent,
+    TracePaneComponent, VersionPaneComponent,
+    ActionPaneDialog, CommentsPaneComponent,
+    ReportsMenuComponent, ReportPaneComponent,
+    FoldersMenuComponent,
+    BrowsePaneComponent,
+    ComposeMenuComponent, ComposePaneComponent,
+    CubeMatrixPaneComponent,
+    SchedulerPaneComponent,
+    ContactsPaneComponent, ConversationPaneComponent]
+})
+export class DesktopModule {
+}

package/src/lib/diagram.module.ts

@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { DiagramModule, ConnectorBridgingService, LineRoutingService, ComplexHierarchicalTreeService, BpmnDiagramsService, LayoutAnimationService, UndoRedoService, SnappingService, ConnectorEditingService, SymbolPaletteModule } from '@syncfusion/ej2-angular-diagrams';
+
+
+@NgModule({
+  declarations: [],
+  imports: [
+    CommonModule,
+    DiagramModule,
+    SymbolPaletteModule
+  ],
+  exports: [
+    DiagramModule,
+    SymbolPaletteModule
+  ],
+  providers: [ConnectorBridgingService, LineRoutingService, ComplexHierarchicalTreeService, BpmnDiagramsService, LayoutAnimationService, UndoRedoService, SnappingService, ConnectorEditingService]
+})
+export class SyncfusionDiagramModule { }

package/src/lib/grid.module.ts

@@ -0,0 +1,16 @@
+import { NgModule } from "@angular/core";
+import {
+  ExcelExportService, GridModule, PagerModule, AggregateService, FreezeService,
+  GroupService, PageService, ResizeService, SortService, SelectionService
+} from '@syncfusion/ej2-angular-grids';
+
+@NgModule({
+  imports: [GridModule, PagerModule],
+  exports: [GridModule, PagerModule],
+  providers: [
+    ExcelExportService, AggregateService, FreezeService,
+    GroupService, PageService, ResizeService, SortService, SelectionService]
+})
+export
+  class SyncfusionGridModule {
+}