@bizdoc/core 1.8.5 → 1.8.9

package/src/lib/admin/utility-ref.ts

@@ -0,0 +1,44 @@
+import { HttpClient, HttpErrorResponse, HttpResponse } from '@angular/common/http';
+import { Observable, throwError } from 'rxjs';
+import { tap, map, filter, catchError } from 'rxjs/operators';
+import { HubService, JobProgress } from '../core/hub.service';
+import { Utility } from '../core/models';
+import { isObject } from '../core/functions';
+import { PromptService } from '../core/prompt.service';
+
+export class UtilityRef<TResult = any, TResultArgs = any, TModel = any, TModelArgs = any, O = any> {
+  private _jobId: string;
+  get jobId(): string { return this._jobId; }
+  constructor(private _utility: Utility,
+    private _hub: HubService,
+    private _sb: PromptService,
+    private _http: HttpClient) {
+  }
+  public get progress(): Observable<JobProgress> {
+    return this._hub.jobProgress$.pipe(
+      filter(e => e.jobId === this.jobId),
+      map(e => e.event));
+  }
+  execute(args?: TResultArgs): Observable<TResult> {
+    return this._http.post(`/api/utility/${this._utility.name}`, args, { observe: 'response' }).pipe(tap((r: HttpResponse<TResult>) => {
+      this._jobId = r.headers.get('job-id');
+    }), map((r: HttpResponse<TResult>) => r.body), catchError((e: HttpErrorResponse) => {
+      if (e.status === 406) // validation exception
+        this._sb.errorString(e.error);
+      else
+        this._sb.error('NetworkErr');
+      return throwError(e);
+    }));
+  }
+  abort(): Observable<any> {
+    return this._http.delete(`/api/utility/${this.jobId}`, null);
+  }
+  populate(args?: TModelArgs): Observable<TModel> {
+    return this._http.get<TModel>(`/api/utility/${this._utility.name}`, {
+      params: isObject(args) ? args : args !== undefined ? { value: args } as any: undefined,
+    });
+  }
+  get options(): O {
+    return this._utility.options || {};
+  }
+}

package/src/lib/admin/utility-wrapper.component.ts

@@ -0,0 +1,52 @@
+import { Component, OnInit, OnDestroy, Injector, ViewContainerRef } from '@angular/core';
+import { SessionService } from '../core/session.service';
+import { HttpClient } from '@angular/common/http';
+import { Subscription } from 'rxjs';
+import { Utility } from '../core/models';
+import { UtilityRef } from "./utility-ref";
+import { WindowTitleService } from '../core/window-title.service';
+import { HubService } from '../core/hub.service';
+import { PromptService } from '../core/prompt.service';
+import { BizDocComponentFactoryResolver } from '../core/component-factory-resolver';
+import { ActivatedRoute } from '@angular/router';
+
+@Component({
+  template: ''
+})
+/** utility-wrapper component*/
+export class UtilityWrapperComponent implements OnInit, OnDestroy {
+  private _utility: Utility;
+  private _routing: Subscription;
+  /** ctor */
+  constructor(private _session: SessionService, private _route: ActivatedRoute,
+    private _title: WindowTitleService, private _http: HttpClient,
+    private _sb: PromptService,
+    private _messaging: HubService,
+    private _vc: ViewContainerRef,
+    private _cf: BizDocComponentFactoryResolver,
+    private _injector: Injector) {
+  }
+  ngOnInit(): void {
+    this._routing = this._route.params.subscribe(p => {
+      const id = p['id'];
+      this._utility = this._session.profile.utilities.find(u => u.name === id);
+
+      const factory = this._cf.resolve(this._utility.template);
+      this._vc.clear();
+      const uRef = new UtilityRef(this._utility, this._messaging,
+        this._sb,
+        this._http);
+      const injector = Injector.create(
+        [{
+          provide: UtilityRef, useValue: uRef
+        }],
+        this._injector);
+      this._vc.createComponent(factory, null, injector);
+      this._title.set(this._utility.title);
+    });
+  }
+  ngOnDestroy(): void {
+    this._routing.unsubscribe();
+  }
+}
+

package/src/lib/admin/utility.pane.component.ts

@@ -0,0 +1,49 @@
+import { Component, OnInit, Injector, ViewContainerRef, ViewChild } from '@angular/core';
+import { SessionService } from '../core/session.service';
+import { HttpClient } from '@angular/common/http';
+import { Utility } from '../core/models';
+import { UtilityRef } from "./utility-ref";
+import { HubService } from '../core/hub.service';
+import { PromptService } from '../core/prompt.service';
+import { BizDocComponentFactoryResolver } from '../core/component-factory-resolver';
+import { PaneRef } from '../core/slots/pane-ref';
+
+
+@Component({
+  template: '<ng-container #container></ng-container>',
+  host: {
+    class: 'pane'
+  }
+})
+/** utility-wrapper component*/
+export class UtilityPaneComponent implements OnInit {
+  @ViewChild('container', { static: true, read: ViewContainerRef }) vc: ViewContainerRef;
+  private _utility: Utility;
+  /** ctor */
+  constructor(private _session: SessionService,
+    private _pane: PaneRef<UtilityPaneComponent>,
+    private _http: HttpClient,
+    private _sb: PromptService,
+    private _messaging: HubService,
+    private _cf: BizDocComponentFactoryResolver,
+    private _injector: Injector) {
+  }
+  ngOnInit(): void {
+    this._pane.paramsChange.subscribe(p => {
+      const id = p['id'];
+      this._utility = this._session.profile.utilities.find(u => u.name === id);
+      this._pane.title = this._utility.title;
+      const factory = this._cf.resolve(this._utility.template);
+      this.vc.clear();
+      const uRef = new UtilityRef(this._utility, this._messaging,
+        this._sb,
+        this._http);
+      const injector = Injector.create(
+        [{
+          provide: UtilityRef, useValue: uRef
+        }],
+        this._injector);
+      this.vc.createComponent(factory, null, injector);
+    });
+  }
+}

package/src/lib/app.component.ts

@@ -0,0 +1,86 @@
+import { Component, ComponentFactoryResolver, OnInit, ViewContainerRef } from '@angular/core';
+import { Direction } from '@angular/cdk/bidi';
+import { HubConnectionState } from '@microsoft/signalr';
+import { Subject } from 'rxjs';
+import { startWith, debounceTime } from 'rxjs/operators';
+import { enableRtl } from '@syncfusion/ej2-base';
+import { SessionService } from './core/session.service';
+import { HubService } from './core/hub.service';
+import { isMobile, playAudio } from './core/functions';
+import { HomeComponent } from './home/home.desktop.component';
+import { HomeMobileComponent } from './home/home.mobile.component';
+
+const REVISIT_TAB_REFRESH = 10000;
+
+@Component({
+  template: ''
+})
+export class BrokenPage {
+}
+
+@Component({
+  selector: 'bizdoc',
+  template: ''
+})
+export class BizDocApp implements OnInit {
+  dir: Direction = 'ltr';
+  private _refresh = new Subject<void>();
+  constructor(
+    private _vc: ViewContainerRef,
+    private _cfr: ComponentFactoryResolver,
+    private _session: SessionService,
+    private _messaging: HubService,
+  ) {
+    const doc = document.getElementsByTagName('html')[0],
+      body = doc.getElementsByTagName('body')[0];
+    doc.lang = _session.language;
+    if (_session.inverse) {
+      document.dir = doc.dir = body.dir = this.dir = 'rtl';
+      enableRtl();
+    }
+    this._session.refresh().subscribe(this._initialize.bind(this));
+  }
+  private _initialize() {
+    if (isMobile()) {
+      const factory = this._cfr.resolveComponentFactory(HomeMobileComponent);
+      this._vc.createComponent(factory);
+    }
+    else {
+      const factory = this._cfr.resolveComponentFactory(HomeComponent);
+      this._vc.createComponent(factory);
+    }
+    this._refresh.pipe(debounceTime(REVISIT_TAB_REFRESH)).
+      subscribe(() => this._session.refresh().subscribe());
+    document.addEventListener('visibilitychange', () => {
+      if (!document.hidden && this._messaging.state === HubConnectionState.Disconnected && this._session.ok)
+        this._refresh.next();
+    });
+    window.addEventListener('online', () => this._refresh.next());
+  }
+
+  ngOnInit(): void {
+    const meta = document.querySelector('meta[name=theme-color]') as HTMLMetaElement;
+    this._session.themeChange.
+      pipe(startWith(this._session.theme)).
+      subscribe(t => {
+        meta && (meta.content = this._session.getPrimery());
+        document.body.classList.value = t.name;
+      });
+    this._messaging.notify$.subscribe(() =>
+      this._session.profile.options.notifications.sound &&
+      playAudio('notification_simple-01')
+    );
+    // respond to new mail
+    this._messaging.new$.subscribe(m => {
+      this._session.profile.options.notifications.sound &&
+        playAudio('notification_simple-01');
+    });
+
+    if (isMobile())
+      try {
+        document.documentElement.requestFullscreen();
+      } catch (e) {
+        console.log(e);
+      }
+  }
+}

package/src/lib/bizdoc.module.ts

@@ -0,0 +1,81 @@
+import { BrowserModule } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { NgModule, ModuleWithProviders, Provider } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { MomentModule } from 'ngx-moment';
+import { MaterialModule } from './material.module'
+import { BIZDOC_CONFIG, BizDocConfig, BizDocChildConfig } from './core/configuration';
+import { PANES_DATA } from './core/slots/pane-ref';
+import { PANES_CONFIG } from './routes.desktop';
+import { ROUTES } from './routes.mobile';
+import { SharedModule } from './shared.module';
+import { MobileModule } from './mobile.module';
+import { SystemModule } from './system.module';
+import { DesktopModule } from './desktop.module';
+import { registerComponents } from './core/component-factory-resolver';
+import { isMobile } from './core/functions';
+import { MAT_DATE_FORMATS } from '@angular/material/core';
+
+@NgModule({
+  declarations: [],
+  imports: [
+    BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
+    BrowserAnimationsModule,
+    RouterModule.forRoot(ROUTES, { initialNavigation: 'disabled' }),
+    MomentModule.forRoot({
+      relativeTimeThresholdOptions: {
+        s: 30
+      },
+    }),
+    MobileModule,
+    DesktopModule,
+    SystemModule.forChild(),
+    SharedModule.forChild({ routing: isMobile() ? 'ng' : 'pane'})
+  ],
+  exports: [
+    SharedModule,
+    MaterialModule
+  ]
+})
+export class BizDocModule {
+  static forChild(config: BizDocChildConfig): ModuleWithProviders<BizDocModule> {
+    const { components } = config;
+    registerComponents(components);
+    return {
+      ngModule: BizDocModule,
+      providers: []
+    };
+}
+  static forRoot(config: BizDocConfig): ModuleWithProviders<BizDocModule> {
+    const { formats, routes, components, baseUrl } = config;
+    registerComponents(components);
+    const providers = [
+      { provide: PANES_DATA, useValue: PANES_CONFIG.concat(routes || []) },
+      {
+        provide: BIZDOC_CONFIG,
+        useValue: config
+      },
+      {
+        provide: MAT_DATE_FORMATS, useValue: {
+          parse: {
+            dateInput: 'LL',
+          },
+          display: {
+            dateInput: (formats || {}).date || 'll',
+            monthYearLabel: 'MMM YYYY',
+            dateA11yLabel: 'LL',
+            monthYearA11yLabel: 'MMMM YYYY',
+          }
+        }
+      },
+    ] as Provider[];
+    baseUrl &&
+      providers.push({
+        provide: 'BASE_URL', useValue: baseUrl
+      });
+    return {
+      ngModule: BizDocModule,
+      providers
+    };
+  }
+}

package/src/lib/browse/_browse-theme.scss

@@ -0,0 +1,86 @@
+@mixin browse-theme($theme) {
+  $primary: map-get($theme, primary);
+  $accent: map-get($theme, accent);
+  $background: map-get($theme, background);
+  $is-dark-theme: map-get($theme, is-dark);
+
+  $selected-row-background: mat-color($accent, 500);
+  $odd-row-background: mat-color($mat-gray, if($is-dark-theme, 900, 50));
+
+  input.search-box {
+    border: solid 1px mat-color($mat-gray, if($is-dark-theme, 700, 300));
+    border-radius: 2px;
+    padding: 2px 5px;
+    height: 28px;
+    width: 320px;
+    font-weight: 400;
+    background: mat-color($mat-gray, if($is-dark-theme, 800, 200));
+    font-size: medium;
+
+    &:hover {
+      background: mat-color($mat-gray, if($is-dark-theme, 900, 300));
+    }
+
+    &::-webkit-input-placeholder { /* Edge */
+      font-weight: 100;
+    }
+
+    &:-ms-input-placeholder { /* Internet Explorer 10-11 */
+    }
+
+    &::placeholder {
+      font-weight: 100;
+    }
+
+    ~ .mat-icon {
+      position: relative;
+      left: -30px;
+      color: mat-color($mat-gray, 400);
+    }
+  }
+
+  [dir=rtl]
+  input.search-box {
+    ~ .mat-icon {
+      right: -30px;
+      left: auto;
+    }
+  }
+
+  .small-chip {
+    border-radius: 5px;
+    font-size: 11px;
+    padding: 3px 5px;
+    min-height: 15px !important;
+    margin: 2px;
+  }
+
+  .selecteded-row {
+
+    .mat-cell:last-child {
+      border-right: 4px solid $selected-row-background;
+      padding-right: 20px;
+    }
+  }
+
+  [dir=rtl] .selecteded-row {
+    .mat-cell:last-child {
+      border-right: none;
+      border-left: 4px solid $selected-row-background;
+      padding-left: 20px;
+      padding-right: 24px;
+    }
+  }
+
+  .element-row {
+    border-bottom-width: 0;
+  }
+
+  .data-table {
+    width: 100%;
+
+    .odd-row {
+      background-color: $odd-row-background;
+    }
+  }
+}

package/src/lib/browse/browse-items.component.html

@@ -0,0 +1,163 @@
+<bizdoc-none *ngIf="dataSource?.data.length === 0" title="NoMessages" [subtitle]="!isMobile && folderId === DRAFT ? 'AltN' : null" icon="mail_outline"></bizdoc-none>
+<mat-progress-bar mode="query" [style.visibility]="loading ? 'visible':'hidden'"></mat-progress-bar>
+<mat-table cdkDropList class="data-table"
+           [cdkDropListDisabled]="isMobile"
+           [cdkDropListData]="dataSource?.data"
+           cdkDropListConnectedTo="folders"
+           cdkDropListSortingDisabled
+           [dataSource]="dataSource" matSort multiTemplateDataRows (matSortChange)="sortData()"
+           id="browse-table" [@list]="dataSource" [style.display]="dataSource?.data.length ?'':'none'">
+  <ng-container matColumnDef="select">
+    <mat-header-cell *matHeaderCellDef>
+      <div class=""></div>
+      <mat-checkbox (change)="$event ? masterToggle() : null" [aria-label]="'Check'|translate"
+                    [checked]="selection.hasValue() && isAllSelected()"
+                    [indeterminate]="selection.hasValue() && !isAllSelected()">
+      </mat-checkbox>
+    </mat-header-cell>
+    <mat-cell *matCellDef="let item">
+      <mat-checkbox (click)="$event.stopPropagation()" [aria-label]="'Check'|translate"
+                    (change)="$event ? selection.toggle(item) : null"
+                    [checked]="selection.isSelected(item)">
+      </mat-checkbox>
+      <!-- drag -->
+      <button mat-icon-button cdkDragHandle
+              (mousedown)="dragDisabled = false"
+              (mouseup)="dragDisabled = true"
+              (touchstart)="dragDisabled = false"
+              (touchend)="dragDisabled = true"
+              class="drag" aria-disabled="true" fxHide.xs>
+        <mat-icon>drag_indicator</mat-icon>
+      </button>
+      <button mat-icon-button (click)="toggleExpanded(item, $event)" [matTooltip]="'Details' | translate" [attr.aria-label]="'Details' | translate" class="tool"><mat-icon>{{item == expandedElement ? 'unfold_less' : 'unfold_more'}}</mat-icon></button>
+    </mat-cell>
+  </ng-container>
+  <!-- Number column -->
+  <ng-container matColumnDef="number">
+    <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Number' | translate}}</mat-header-cell>
+    <mat-cell *matCellDef="let item" class="data-column"> {{item.number}} </mat-cell>
+  </ng-container>
+
+  <!-- Subject column -->
+  <ng-container matColumnDef="subject">
+    <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Subject' | translate}}</mat-header-cell>
+    <mat-cell *matCellDef="let item" class="data-column"> {{item.subject}} </mat-cell>
+  </ng-container>
+
+  <ng-container matColumnDef="owner">
+    <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Owner' | translate}}</mat-header-cell>
+    <mat-cell *matCellDef="let item" class="data-column">
+      <bizdoc-identity-name *ngIf="item.ownerId" [identity]="item.ownerId" [by]="item.ownerById"></bizdoc-identity-name>
+    </mat-cell>
+  </ng-container>
+  <ng-container matColumnDef="sender">
+    <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Sender' | translate}}</mat-header-cell>
+    <mat-cell *matCellDef="let item" class="data-column">
+      <bizdoc-identity-name *ngIf="item.senderId" [identity]="item.senderId" [by]="item.byId"></bizdoc-identity-name>
+    </mat-cell>
+  </ng-container>
+
+  <ng-container matColumnDef="received">
+    <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Received' | translate}}</mat-header-cell>
+    <mat-cell *matCellDef="let item" class="data-column"> {{item.received | amCalendar}} </mat-cell>
+  </ng-container>
+
+  <ng-container matColumnDef="replied">
+    <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Replied' | translate}}</mat-header-cell>
+    <mat-cell *matCellDef="let item" class="data-column"> {{item.replied | amCalendar}} </mat-cell>
+  </ng-container>
+  <ng-container matColumnDef="issued">
+    <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Issued' | translate}}</mat-header-cell>
+    <mat-cell *matCellDef="let item" class="data-column"> {{item.issued | amCalendar}} </mat-cell>
+  </ng-container>
+
+  <ng-container matColumnDef="stateId">
+    <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Status' | translate }}</mat-header-cell>
+    <mat-cell *matCellDef="let item" class="data-column">
+      <bizdoc-status [stateId]="item.stateId"></bizdoc-status>
+    </mat-cell>
+  </ng-container>
+
+  <ng-container *ngIf="customColumns">
+    <ng-container *ngFor="let c of customColumns" [matColumnDef]="c.name">
+      <mat-header-cell *matHeaderCellDef mat-sort-header> {{c.title}} </mat-header-cell>
+      <mat-cell *matCellDef="let item" class="data-column">
+        <span [ngSwitch]="c.type">
+          <span *ngSwitchCase="'Date'">
+            {{item.model[c.name] | amCalendar}}
+          </span>
+          <span *ngSwitchCase="'Decimal'">
+            {{item.model[c.name] | number }}
+          </span>
+          <span *ngSwitchCase="'Boolean'">
+            <mat-checkbox [checked]="item.model[c.name]" disabled="true"></mat-checkbox>
+          </span>
+          <span *ngSwitchDefault>
+            {{item.model[c.name]}}
+          </span>
+        </span>
+      </mat-cell>
+    </ng-container>
+  </ng-container>
+
+  <!-- Value column -->
+  <ng-container matColumnDef="value">
+    <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Amount' | translate}}</mat-header-cell>
+    <mat-cell *matCellDef="let item" class="data-column"> {{item.value | currency : item.currencyCode : 'symbol' : currencyFormat}} </mat-cell>
+  </ng-container>
+
+  <!-- options column -->
+  <ng-container matColumnDef="options">
+    <mat-header-cell *matHeaderCellDef></mat-header-cell>
+    <mat-cell *matCellDef="let item">
+      <button mat-icon-button (click)="flag(item, $event)" [matTooltip]="'Flagged'| translate" [attr.aria-label]="'ToggleFlagged' | translate" class="tool"><mat-icon [class.document-flag]="item.flag">{{item.flag ? 'star' : 'star_border'}}</mat-icon></button>
+      <button mat-icon-button (click)="view(item, $event)" [matTooltip]="'View' | translate" [attr.aria-label]="'View' | translate" class="tool"><mat-icon>data_usage</mat-icon></button>
+    </mat-cell>
+  </ng-container>
+  <!-- Expanded Content Column -->
+  <ng-container matColumnDef="expandedDetail">
+    <mat-cell *matCellDef="let item" [attr.colspan]="displayedColumns.length" [@updated]="item == updatedElement"
+              [class.read-row]="item.read">
+      <div [@detailExpand]="item == expandedElement ? 'expanded' : 'collapsed'" style="width: 100%">
+        <bizdoc-expanded-item [item]="item" *ngIf="item == expandedElement"></bizdoc-expanded-item>
+      </div>
+    </mat-cell>
+  </ng-container>
+  <mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row>
+  <mat-row @item [@updated]="item == updatedElement"
+           *matRowDef="let item; let dataIndex = dataIndex; columns: displayedColumns;" class="element-row"
+           cdkDrag [cdkDragData]="item"
+           [cdkDragDisabled]="dragDisabled"
+           (cdkDragReleased)="dragDisabled = true"
+           [ngClass]="{'selecteded-row': selectedElement === item,
+      'expanded-row': expandedElement === item,
+           'odd-row': dataIndex % 2,
+      'read-row': item.read}" matRipple
+           (click)="open(item, $event)" (contextmenu)="onContextMenu($event, item)">
+    <div *cdkDragPreview>
+      <button mat-icon-button aria-disabled="true"><mat-icon>drag_indicator</mat-icon></button> <span>#{{item.number}}</span>
+    </div>
+    <div *cdkDragPlaceholder>
+      <!-- none -->
+    </div>
+  </mat-row>
+  <mat-row *matRowDef="let item; ; let dataIndex = dataIndex; columns: ['expandedDetail']"
+           class="detail-row" matRipple
+           [ngClass]="{ 'selecteded-row': selectedElement === item,
+           'odd-row': dataIndex % 2
+           }"></mat-row>
+</mat-table>
+<mat-paginator #paginator [hidePageSize]="true" [pageSize]="PAGE_SIZE" [style.display]="!isMobile && dataSource?.data.length>PAGE_SIZE ? '':'none'"></mat-paginator>
+<!--style="display:none"-->
+<div style="visibility: hidden; position: fixed"
+     [style.left]="contextMenuPosition.x"
+     [style.top]="contextMenuPosition.y"
+     [matMenuTriggerFor]="contextMenu">
+</div>
+<mat-menu #contextMenu="matMenu">
+  <ng-template matMenuContent let-item="item">
+    <button mat-menu-item (click)="open(item, $event)">{{'Open'|translate}}</button>
+    <mat-divider></mat-divider>
+    <button mat-menu-item (click)="toggleRead(item)">{{(item.read ?'MarkAsUnread':'MarkAsRead')|translate}}</button>
+  </ng-template>
+</mat-menu>

package/src/lib/browse/browse-items.component.scss

@@ -0,0 +1,52 @@
+#browse-table {
+  width: 100%;
+
+  .detail-row {
+    min-height: 0;
+  }
+
+  .element-row {
+    cursor: pointer;
+
+    .drag {
+      cursor: move
+    }
+  }
+
+  .read-row {
+    font-weight: 100
+  }
+}
+
+
+@media screen and (min-width: 600px) {
+  .mat-row .tool {
+    opacity: .05
+  }
+
+  .mat-row:hover .tool {
+    opacity: 1
+  }
+}
+
+.element-row.cdk-drag-preview {
+}
+
+::ng-deep .mat-column-options {
+  /*text-align: end;*/
+  justify-content: end;
+  padding-inline-end: 8px;
+}
+
+::ng-deep .mat-column-value {
+  /*text-align: right;*/
+  justify-content: right;
+}
+
+::ng-deep .mat-column-select {
+  white-space: nowrap;
+}
+
+::ng-deep .mat-column-number {
+  white-space: nowrap;
+}