@bizdoc/core 1.14.8 → 1.14.9

package/src/lib/compose/form-selector/form-selector.sheet.ts

@@ -0,0 +1,84 @@
+import { Component } from '@angular/core';
+import { HttpErrorResponse } from '@angular/common/http';
+import { Router } from '@angular/router';
+import { MatBottomSheetRef } from '@angular/material/bottom-sheet';
+import { MatDialog } from '@angular/material/dialog';
+import { Subject } from 'rxjs';
+import { Form, RecipientModel } from '../../core/models';
+import { SessionService } from '../../core/session.service';
+import { MailboxService } from '../../core/mailbox.service';
+import { PromptService } from '../../core/prompt.service';
+import { CopyDialog } from '../copy/copy.dialog';
+
+@Component({
+  selector: 'bizdoc-form-selector',
+  templateUrl: './form-selector.sheet.html'
+})
+/** form selector component */
+export class FormSelectorSheet {
+  private readonly _done = new Subject<RecipientModel<any>>();
+  public readonly done = this._done.asObservable();
+  readonly forms: Form[];
+  /** form selector ctor */
+  constructor(private _dialog: MatDialog,
+    private _bsRef: MatBottomSheetRef<FormSelectorSheet>,
+    private _sb: PromptService,
+    private _mailbox: MailboxService,
+    private _router: Router,
+    private _session: SessionService) {
+    this.forms = _session.profile.forms.filter(f => f.creatable);
+  }
+  open(form: string) {
+    this._mailbox.create(form).subscribe(i =>
+      this._route(i), e => this._error(e));
+    this._bsRef.dismiss();
+  }
+  copy(event: MouseEvent) {
+    event.preventDefault();
+    this._bsRef.afterDismissed().subscribe(() =>
+      this._dialog.open(CopyDialog).afterClosed().subscribe(i => {
+        i &&
+          this._mailbox.copy(i.documentId).subscribe(i => {
+            this._sb.toast('Copied', i.number || this._getForm(i.formId).title);
+            this._route(i);
+          }, e => this._error(e));
+      }));
+    this._bsRef.dismiss();
+  }
+  private _getForm(name: string) {
+    return this._session.profile.forms.find(f => f.name === name);
+  }
+
+  private _error(response: HttpErrorResponse | GeolocationPositionError) {
+    if (response.constructor.name === 'PositionError')
+      switch ((response as GeolocationPositionError).code) {
+        case 1:
+          this._sb.error('UserDeniedGeoErr');
+          break;
+        default:
+          this._sb.error('GeoErr');
+      }
+    else switch ((response as HttpErrorResponse).status) {
+      case 401:
+        this._sb.error('Unauthorized');
+        break;
+      case 406:
+        this._sb.errorString((response as HttpErrorResponse).error);
+        break;
+      case 426: // license
+        this._sb.error('LicenseErr');
+        break;
+      default:
+        this._sb.error();
+    }
+  }
+  private _route(item: RecipientModel<any>) {
+    this._done.next(item);
+    this._router.navigate(['mailbox/i', item.id.encodeId()],
+      {
+        state: {
+          item
+        }
+      });
+  }
+}

package/src/lib/compose/form.component.html

@@ -0,0 +1,13 @@
+<div class="form-header">
+  <bizdoc-people [model]="model" *ngIf="mode !== 'compose' && contacts"></bizdoc-people>
+  <bizdoc-attachments [model]="model" [includeDeleted]="true" [viewedIndicator]="false"></bizdoc-attachments>
+  <div *ngIf="!model.replied && mode !== 'compose' && model.note" class="compose-note">
+    <mat-icon color="primary">info</mat-icon> <span class="mat-body-2">{{model.note}}</span>
+  </div>
+  <div *ngIf="model.tags">
+    <span *ngFor="let tag of model.tags" class="mat-chip mat-standard-chip small-chip">{{tag}}</span>
+  </div>
+</div>
+<ng-container #component></ng-container>
+<div *ngIf="editing">{{ editing }}</div>
+<form style="display:none"><input type="file" #file multiple /></form>

package/src/lib/compose/form.component.ts

@@ -0,0 +1,456 @@
+import { Injector, OnDestroy, ElementRef, ViewContainerRef, Component, ViewChild, OnChanges, SimpleChanges, Input, EventEmitter, Output, OnInit } from '@angular/core';
+import { HttpErrorResponse } from '@angular/common/http';
+import { MatDialog } from '@angular/material/dialog';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { Subject, Observable, of, from, filter, forkJoin } from 'rxjs';
+import { debounceTime, takeUntil, tap, switchMap, startWith, map, catchError } from 'rxjs/operators';
+import { deepAssign, isBoolean, isPromise, queryParams } from '../core/functions';
+import { RecipientModel, Form, Action, Attachment } from '../core/models';
+import { FormComponent, ViewMode } from '../core/base';
+import { SessionService } from '../core/session.service';
+import { MailboxService, ItemExtra, DOCUMENT_MODEL, AttachmentExtra } from '../core/mailbox.service';
+import { PromptService } from '../core/prompt.service';
+import { HubService } from '../core/hub.service';
+import { GuideService } from '../core/guide/guide.service';
+import { AccountService } from '../core/account.service';
+import { TranslateService } from '../core/translate.service';
+import { BizDocComponentFactoryResolver } from '../core/component-factory-resolver';
+import { FormRef, SaveEventArgs } from './form-ref';
+import { AttachmentsComponent } from './attachments/attachments.component';
+import { TagsComponent } from './tag/tags.component';
+import { Popup } from '../core/popup/popup.service';
+import { RouterImpl } from "../core/router";
+import { ActionDialog, ActionDialogData } from './action/action.dialog';
+
+export const
+  REPORT_EDITING_DELAY = 2000,
+  /** save draft ms */
+  AUTO_SAVE_DELAY = 5000,
+  EDITING_MESSAGE_DELAY = 3000;
+
+@Component({
+  selector: 'bizdoc-form',
+  templateUrl: './form.component.html',
+  host: {
+    class: 'form-container bizdoc-compose'
+  }
+})
+export class ComposeFormComponent implements OnDestroy, OnInit, OnChanges {
+  @Input() model: RecipientModel<any>;
+  @Output() readonly modelChange = new EventEmitter<RecipientModel<any>>();
+  form: Form;
+  @Input()
+  working = false;
+  @Output() readonly workingChange = new EventEmitter<boolean>();
+  @Input()
+  dirty = false;
+  @Output() readonly dirtyChange = new EventEmitter<boolean>();
+  @Input()
+  valid = false;
+  @Output() readonly validChange = new EventEmitter<boolean>();
+  @Output() readonly saved = new EventEmitter<void>();
+  @Input() mode: ViewMode;
+  @Input() contacts = true;
+  actions: Action[] = [];
+  page: string | number;
+  help: string;
+  editing: string;
+  @ViewChild('file', { static: true }) _fileElement: ElementRef<HTMLInputElement>;
+  @ViewChild(AttachmentsComponent, { static: true }) attachments: AttachmentsComponent;
+  @ViewChild('component', { read: ViewContainerRef, static: true }) _container: ViewContainerRef;
+  private _formRef: FormRef;
+  private _instance: FormComponent<any>;
+  private _editingTask: NodeJS.Timeout;
+  private readonly _destroy = new Subject<void>();
+  constructor(
+    private _popup: Popup,
+    private _mailbox: MailboxService,
+    private _accounts: AccountService,
+    private _router: RouterImpl,
+    private _dialog: MatDialog,
+    private _sb: PromptService,
+    private _session: SessionService,
+    private _injector: Injector,
+    private _snackbar: MatSnackBar,
+    private _cf: BizDocComponentFactoryResolver,
+    private _guide: GuideService,
+    private _translate: TranslateService,
+    private _messaging: HubService
+  ) {
+  }
+  ngOnInit(): void {
+    this._fileElement.nativeElement.addEventListener('change', this._fileChangeListener.bind(this));
+    this._messaging.callback$.pipe(takeUntil(this._destroy)).subscribe(e =>
+      this._instance.onMessage
+      && this._instance.onMessage(e.message));
+    this._messaging.editing$.pipe(takeUntil(this._destroy)).subscribe(e =>
+      e.id === this.model.id &&
+      this._editing(e.userId));
+    this._messaging.update$.pipe(takeUntil(this._destroy)).subscribe(e => {
+      if (e.model.id === this.model.id) {
+        (e.userId !== this._session.userId) &&
+          this._accounts.get(e.userId).subscribe(u =>
+            this._snackbar.open(this._translate.get('MailVersionUpdate', this.model.number, u.name),
+              this._translate.get('OK'), {
+              direction: this._session.direction,
+            }).onAction().subscribe(() => {
+              this._assign(e.model);
+              this._reset();
+            })
+          );
+      }
+    });
+    this._mailbox.changed.pipe(takeUntil(this._destroy)).
+      subscribe(e => !this.working && e.id === this.model.id && this._assign(e));
+  }
+  private _editing(userId: string) {
+    this._accounts.get(userId).subscribe(u => {
+      this.editing = this._translate.personalize('Editing', u.gender, u.name);
+      clearTimeout(this._editingTask);
+      this._editingTask = setTimeout(() => this.editing = null, EDITING_MESSAGE_DELAY);
+    })
+  }
+
+  ngOnChanges(_changes: SimpleChanges): void {
+    this._formRef && this._formRef._destroy();
+    this.form = this._session.profile.forms.find(f => f.name === this.model.formId);
+    this.help = this.form.guide;
+    if (!this.form.template)
+      throw (`Form '${this.form.name}' model missing '[Template()]' attribute.`);
+    const factory = this._cf.resolve(this.form.template);
+    this._formRef = new FormRef();
+    this._formRef._navigating.
+      subscribe(p => this.page = p);
+    this._formRef._stateChange.pipe(startWith()).
+      subscribe(() => this.help = this._formRef.help);
+    const injector = Injector.create([
+      {
+        provide: FormRef, useValue: this._formRef
+      }, {
+        provide: DOCUMENT_MODEL, useValue: this.model
+      }
+    ], this._injector
+    );
+    this._container.clear();
+    const componentRef = this._container.createComponent(factory, 0, injector);
+
+    this._instance = componentRef.instance as FormComponent<any>;
+    this._formRef._mode = this._instance.mode = this.mode;
+    this._instance.form.statusChanges.pipe(takeUntil(this._destroy)).subscribe(() => {
+      const { dirty, valid } = this._instance.form;
+      this.dirty = dirty;
+      this.dirtyChange.emit(dirty);
+      this.valid = valid;
+      this.validChange.emit(valid);
+    });
+    this.model.draft && this._instance.form.valueChanges.pipe(takeUntil(this._destroy),
+      //debounceTime(REPORT_EDITING_DELAY),
+      //tap(() => !this.working && this._mailbox.editing(this.model.documentId)),
+      debounceTime(AUTO_SAVE_DELAY)
+    ).subscribe(() => !this.working && this.dirty &&
+      this.save(false).subscribe());
+    this._instance.onBind(this.model);
+    this._reset();
+  }
+  private _fileChangeListener(ev: Event) {
+    const { files } = ev.srcElement as HTMLInputElement,
+      arr: File[] = [];
+    if (files && files.length) {
+      for (let i = 0; i < files.length; i++)
+        arr.push(files[i]);
+      this.upload(arr).subscribe(() => {
+        this._fileElement.nativeElement.value = null;
+        this.attachments.ngOnChanges();
+      });
+    }
+  }
+  private _apply() {
+    deepAssign(this.model.model, this._instance.form.value);
+  }
+  navigate(page: any) {
+    const pagen = parseInt(page);
+    this._formRef._navigating.next(isNaN(pagen) ? page : pagen);
+  }
+  private _getActionAdjective(name: string): string {
+    const action = this._session.profile.actions.find(a => a.name === name);
+    return (action.adjective || action.past || action.title).toLowerCase();
+  }
+  /**
+   * 
+   * @param feedback
+   */
+  private _save(feedback: boolean): Observable<boolean> {
+    this.working = true;
+    this.workingChange.emit(true);
+    const { id, version, formId, model, draft } = this.model;
+    return this._mailbox.save(id, formId, version, model).pipe(
+      tap(m => {
+        this._assign(m, false);
+        this._reset();
+        feedback &&
+          this._sb.toast(draft ? 'DraftSaved' : 'ChangesSaved');
+        this.saved.emit();
+        this.working = false;
+        this.workingChange.emit(false);
+      }, e => {
+        feedback &&
+          this._handleError(e, 'SaveErr');
+        this.working = false;
+        this.workingChange.emit(false);
+      }), map(() => true));
+  }
+  upload(files: File[]): Observable<any> {
+    this.working = true;
+    this.workingChange.emit(true);
+    let exists: boolean;
+    const observables = [];
+    files.forEach(f => {
+      if (!exists)
+        exists = this.model.attachments.some(a => a.fileName === f.name && !a.deleted && !(a as AttachmentExtra).failed);
+      const retry = this.model.attachments.findIndex(a => a.fileName === f.name && (a as AttachmentExtra).failed);
+      if (retry > -1)
+        this.model.attachments.splice(retry, 1);
+      const model = this._constructAttachment(f);
+      const observable = this._mailbox.upload(this.model.id, this.model.formId, this.model.version, f).
+        pipe(tap((r: Attachment) => {
+          this._sb.toast(
+            !exists ? 'UploadOk' : 'UploadVersionOk', f.name);
+          Object.assign(model, r, { progress: null, });
+          this.model.attachments.push(model);
+          this.working = false;
+          this.workingChange.emit(false);
+        }), catchError(e => {
+          this._handleError(e, 'UploadFailed', f.name);
+          this.working = false;
+          this.workingChange.emit(false);
+          return of(false);
+        }));
+      observables.push(observable);
+    });
+    return forkJoin(observables);
+  }
+  private _constructAttachment(file: File) {
+    const now = new Date(), utc = new Date(now.getTime() + now.getTimezoneOffset() * 60000);
+    return {
+      userId: this._session.profile.userId,
+      byId: this._session.profile.byId,
+      time: utc.toJSON() as any,
+      fileName: file.name,
+      contentType: file.type
+    } as Attachment;
+  }
+  tag(evt: MouseEvent) {
+    this._popup.open(TagsComponent, (evt.currentTarget as HTMLElement), {
+      data: this.model
+    })
+  }
+  private _reset() {
+    function sortActions(a: Action, b: Action) {
+      if (a.group && b.group && a.group !== b.group)
+        return a.group < b.group ? -1 : 1;
+      return 0;
+    }
+    this._instance.form.reset(this.model.model, { emitEvent: false });
+    this.valid = this._instance.form.valid;
+    this.validChange.emit(this.valid);
+    this.dirty = false;
+    this.dirtyChange.emit(this.dirty);
+    this.actions = this.model.actions.length ?
+      this._session.profile.actions.
+        filter(a => this.model.actions.indexOf(a.name) > -1).
+        sort(sortActions) : [];
+  }
+
+  guide(name: string) {
+    this._guide.start(name);
+  }
+  attach() {
+    const elem = this._fileElement.nativeElement as HTMLInputElement;
+    elem.click();
+  }
+  /**
+   *
+   * @param feedback
+   */
+  save(feedback = true): Observable<boolean> {
+    this._apply();
+    const saveArgs = { cancel: false } as SaveEventArgs;
+    this._formRef._saving.next(saveArgs);
+    if (saveArgs.cancel)
+      return of(false);
+    if (this._instance.onSave) {
+      const result = this._instance.onSave();
+      if (isBoolean(result)) {
+        if (!result) {
+          feedback && this._sb.toast('ValidateErr');
+          return of(false);
+        }
+      }
+      else if (isPromise(result))
+        return from(result).pipe(switchMap(() => this._save(feedback)));
+      else
+        return result.pipe(switchMap(() => this._save(feedback)));
+    }
+    return this._save(feedback);
+  }
+  flag() {
+    const extra = this.model as ItemExtra, { flag } = this.model;
+    extra.working = true;
+    this.working = true;
+    this._mailbox.flag(this.model.id, !flag).subscribe(() => {
+      this.model.flag = !flag;
+      extra.working = false;
+    }, () => {
+      extra.working = false;
+      this.working = false;
+    });
+  }
+  submit() {
+    this._apply();
+    const { id, version, formId, model, number } = this.model;
+    this.working = true;
+    this.workingChange.emit(true);
+    return this._mailbox.submit(id, version, formId, model).
+      pipe(tap(() => {
+        this._sb.toast('Submitted', number);
+        this.working = false;
+        this.workingChange.emit(false);
+      }, e => {
+        this.working = false;
+        this.workingChange.emit(false);
+        this._handleError(e, 'SubmitErr');
+      }));
+  }
+  back() {
+    this._formRef.navigate();
+  }
+  discard() {
+    return new Observable(observe => {
+      this._sb.ask('DiscardAsk', 'Discard', {
+        color: 'warn', ok: 'Discard'
+      }).subscribe(ok => {
+        if (ok) {
+          this.workingChange.emit(true);
+          this._mailbox.delete(this.model.id).
+            subscribe(() => {
+              observe.next();
+              observe.complete();
+              this.workingChange.emit(false);
+            },
+              e => {
+                this.working = false;
+                this.workingChange.emit(false);
+                this._handleError(e, 'NetworkErr');
+                observe.error();
+                observe.complete();
+              });
+        }
+        else {
+          observe.complete();
+        }
+      });
+    });
+  }
+  send(action: string) {
+    return new Observable(observe => {
+      this._dialog.open(ActionDialog, {
+        data: {
+          action,
+          item: this.model
+        } as ActionDialogData,
+        closeOnNavigation: true
+      }).afterClosed().subscribe(args => {
+        if (args) {
+          this._apply();
+          const params = queryParams(args);
+          this.working = true;
+          this.workingChange.emit(true);
+          const { id, version, number, model, formId } = this.model;
+          return this._mailbox.send(id, version, formId, model, action, params).
+            subscribe(r => {
+              const origin = r.recipients.filter(r => r.originId === id);
+              if (origin.length)
+                this._accounts.getAll(origin.map(r => r.userId)).subscribe(u =>
+                  this._sb.toast('SentTo', number, this._getActionAdjective(action), this._translate.join(u.map(u => u.name))));
+              else
+                this._sb.toast('Sent', number, this._getActionAdjective(action));
+              this.working = false;
+              this.workingChange.emit(false);
+              observe.next();
+              observe.complete();
+            }, e => {
+              this.working = false;
+              this.workingChange.emit(false);
+              this._handleError(e, 'SendErr');
+              observe.error();
+              observe.complete();
+            });
+        }
+        else {
+          observe.error();
+          observe.complete();
+        }
+      })
+    });
+  }
+  copy() {
+    this._mailbox.copy(this.model.documentId).subscribe(i => {
+      this._sb.toast('Copied', i.number || this.form.title);
+      this._router.navigate(['mailbox/i', i.id.encodeId()], {
+        state: { item: i }
+      });
+    }, () => this._sb.error());
+  }
+  /**
+   *
+   * @param response
+   * @param item
+   * @param message resource
+   * @param args
+   */
+  private _handleError(response: HttpErrorResponse | any, message: string, ...args: string[]) {
+    if (response.constructor.name === 'PositionError')
+      switch (response.code) {
+        case 1:
+          this._sb.error('UserDeniedGeoErr');
+          break;
+        default:
+          this._sb.error('GeoErr');
+      }
+    else
+      switch (response.status) {
+        case 401:
+          this._sb.error('Unauthorized');
+          break;
+        case 409: // version change
+          {
+            const obj = response.error /* serialized model */ as RecipientModel<any>;
+            obj && this._assign(obj);
+            this._reset();
+            this._sb.error('VersionErr', this.model.number);
+            break;
+          }
+        case 406: // validation
+          this._sb.errorString(response.error);
+          break;
+        case 426: // license 
+          this._sb.error('LicenseErr');
+          break;
+        default:
+          this._sb.error(message, ...args);
+      }
+  }
+  private _assign(model: RecipientModel, emitEvent?: boolean) {
+    Object.assign(this.model, model, { // preserve object ref in model
+      model: this.model.model
+    });
+    if (emitEvent !== false) {
+      this.modelChange.emit(this.model);
+      this._formRef._modelChange.next(this.model);
+    }
+  }
+  ngOnDestroy(): void {
+    this._destroy.next();
+    this._destroy.complete();
+  }
+}

package/src/lib/compose/maps/maps.component.html

@@ -0,0 +1,3 @@
+<div>
+  <button *ngFor="let l of locations" mat-icon-button (click)='open(l)'><mat-icon>map</mat-icon></button>
+</div>

package/src/lib/compose/maps/maps.component.ts

@@ -0,0 +1,22 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { DocumentModel, LatLng } from '../../core/models';
+import { MapInfo } from '../../core/info/map-info';
+
+@Component({
+  selector: 'bizdoc-maps',
+  templateUrl: './maps.component.html'
+})
+/** */
+export class DocumentMapPinsComponent implements OnInit {
+  @Input()
+  item: DocumentModel;
+  locations: LatLng[];
+  constructor(private _info: MapInfo) {
+  }
+  ngOnInit(): void {
+    this.locations = [...this.item.locations.map(l => l.location), ...this.item.events.filter(e => e.location).map(e => e.location)]
+  }
+  open(location: LatLng) {
+    this._info.open(location);
+  }
+}

package/src/lib/compose/new-menu.component.html

@@ -0,0 +1,13 @@
+<mat-progress-bar mode="indeterminate" [style.visibility]="working ? 'visible':'hidden'"></mat-progress-bar>
+<div class="container">
+  <span class="mat-subheader">BizDoc</span>
+  <h1 class="mat-display-1">{{'New'|translate}}</h1>
+
+  <mat-nav-list>
+    <mat-list-item *ngFor="let f of forms" (click)="create(f.name)" [attr.data-help]="f.name + '-form'">
+      <mat-icon matListIcon>{{f.icon}}</mat-icon>
+      <span matLine>{{f.title}}</span>
+      <!--<mat-spinner radius="25" *ngIf="creating===f.name"></mat-spinner>-->
+    </mat-list-item>
+  </mat-nav-list>
+</div>

package/src/lib/compose/new-menu.component.scss

@@ -0,0 +1,11 @@
+h1 {
+  margin: 0 16px;
+}
+
+form {
+  padding: 8px;
+}
+
+hr {
+  opacity: .4;
+}