@bizdoc/core 1.8.8 → 1.8.9

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

@@ -0,0 +1,48 @@
+<mat-toolbar class="nav-toolbar">
+  <button mat-icon-button color="primary" (click)="form.back()" [matTooltip]="'Back'|translate" *ngIf="form.page !== undefined" tabindex="1">
+    <mat-icon class="mat-icon-rtl-mirror">arrow_back</mat-icon>
+  </button>
+  <button mat-stroked-button color="primary" *ngIf="model.draft" data-help="submit"
+          (click)="submit()" [disabled]="!valid||working">
+    <span>{{'Submit' | translate}}</span>
+  </button>
+  <button mat-stroked-button color="primary" *ngIf="model.actions?.length === 1" [attr.data-help]="'action-'+form.actions[0].name" (click)="send(model.actions[0])" [disabled]="!valid||working">
+    <span>{{form.actions[0].title}}</span>
+  </button>
+  <button mat-stroked-button data-help="send" color="primary" *ngIf="model.actions?.length > 1" [matMenuTriggerFor]="actionMenu" [disabled]="!valid||working" [matTooltip]="'Send' | translate">
+    <span>{{'Send' | translate}}</span>
+  </button>
+  <!-- action -->
+  <mat-menu #actionMenu>
+    <ng-template matMenuContent>
+      <ng-container *ngFor="let a of form.actions; let i = index">
+        <mat-divider *ngIf="i > 0 && form.actions[i - 1].group !== a.group"></mat-divider>
+        <button mat-menu-item (click)="send(a.name)">{{a.title}}</button>
+      </ng-container>
+    </ng-template>
+  </mat-menu>
+  <button mat-icon-button (click)="save()" data-help="save" [disabled]="!dirty||working" [matTooltip]="'Save'|translate" *ngIf="mode === 'compose'">
+    <mat-icon>save</mat-icon>
+  </button>
+  <button mat-icon-button data-help="tag" (click)="form.tag($event)" [matTooltip]="'Tags' | translate" [disabled]="working"><mat-icon class="filled">{{model.tags && model.tags.length ?'bookmark':'bookmark_border'}}</mat-icon></button>
+  <button mat-icon-button data-help="flag" [matTooltip]="'Flagged'| translate" [disabled]="working" (click)="form.flag()"><mat-icon [class.document-flag]="model.flag">{{model.flag ? 'star' : 'star_border'}}</mat-icon></button>
+  <button mat-icon-button (click)="form.attach()" data-help="attach" [matTooltip]="'AttachFile' | translate" [disabled]="working"><mat-icon>attach_file</mat-icon></button>
+  <button mat-icon-button [disabled]="working" data-help="edit" (click)="edit()" [matTooltip]="'Edit' | translate" *ngIf="mode !== 'compose' && model.pending && !model.completed"><mat-icon>create</mat-icon></button>
+  <button mat-icon-button (click)="form.copy()" data-help="copy" [matTooltip]="'Copy' | translate" *ngIf="!model.draft" [disabled]="working"><mat-icon>content_copy</mat-icon></button>
+  <button mat-icon-button (click)="discard()" [matTooltip]="'Discard' | translate" *ngIf="model.draft && !model.issued" [disabled]="working"><mat-icon>delete_outlined</mat-icon></button>
+  <span class="divider"></span>
+  <button mat-icon-button (click)="navTrace()" [matTooltip]="'Trace' | translate" tabindex="1"><mat-icon>timeline</mat-icon></button>
+  <button mat-icon-button (click)="navComments()" data-help="comments" [matTooltip]="'Comments' | translate" [matBadge]="newCommentsCount" [matBadgeHidden]="!newCommentsCount" matBadgeColor="accent">
+    <mat-icon [class.filled]="model.comments.length > 0">format_quote</mat-icon>
+  </button>
+  <button mat-icon-button (click)="view()" [matTooltip]="'View' | translate" [attr.aria-label]="'View' | translate" class="tool"><mat-icon>data_usage</mat-icon></button>
+  <button mat-icon-button (click)="form.guide(form.help)" [matTooltip]="'Help' | translate" *ngIf="form.help" tabindex="1"><mat-icon>help_outline</mat-icon></button>
+  <button mat-icon-button (click)="expand()" [matTooltip]="'Expand' | translate" *ngIf="expendable" [attr.aria-label]="'Expand' | translate"><mat-icon>open_in_new</mat-icon></button>
+</mat-toolbar>
+<div class="file-dropable" #dropable>
+  <bizdoc-form [model]=model #form
+               (modelChange)="change()"
+               (validChange)="valid=$event"
+               (workingChange)="working=$event"
+               (dirtyChange)="dirty=$event" [mode]="mode"></bizdoc-form>
+</div>

package/src/lib/compose/compose.pane.component.scss

@@ -0,0 +1,26 @@
+.nav-toolbar {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+}
+
+.file-dropable {
+  /*pointer-events: none;*/
+  &.drag {
+    opacity: .5;
+    /*width: 100%;*/
+    /*height: 100%;*/
+    overflow: hidden;
+    margin: 8px;
+    border-style: dashed;
+    border-color: #777;
+    border-width: 5px;
+    background-color: whitesmoke;
+    z-index: 2;
+    /*position: absolute;*/
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+  }
+}

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

@@ -0,0 +1,181 @@
+import { Component, HostListener, OnDestroy, ViewChild, ElementRef, OnInit } from '@angular/core';
+import { Subject } from 'rxjs';
+import { filter, first, takeUntil } from 'rxjs/operators';
+import { RecipientModel } from '../core/models';
+import { PanesRouter } from '../core/slots/router.service';
+import { NavigationPaneBase, NavigationStart, PaneRef } from '../core/slots/pane-ref';
+import { CommentsPaneComponent } from './comments/Comments.pane.component';
+import { ComposeFormComponent } from './form.component';
+import { ViewMode } from '../core/base';
+import { MailboxService } from '../core/mailbox.service';
+import { SessionService } from '../core/session.service';
+
+@Component({
+  selector: 'bizdoc-compose.pane',
+  templateUrl: './compose.pane.component.html',
+  styleUrls: ['./compose.pane.component.scss'],
+  host: {
+    class: 'pane'
+  }
+})
+/** compose component responsible for editing a form */
+export class ComposePaneComponent implements OnInit, OnDestroy {
+  @ViewChild(ComposeFormComponent, { static: true }) form: ComposeFormComponent;
+  @ViewChild('dropable', { static: true, read: ElementRef }) dropableElement: ElementRef;
+  model: RecipientModel<any>;
+  newCommentsCount: number;
+  working: boolean;
+  dirty: boolean;
+  valid: boolean;
+  mode: ViewMode;
+  expendable: boolean;
+  private readonly _dragDrop = new Subject<boolean>();
+  private readonly _destroy = new Subject<void>();
+  /** compose ctor */
+  constructor(
+    private _session: SessionService,
+    private _mailbox: MailboxService,
+    private _pane: PaneRef<ComposePaneComponent>,
+    private _router: PanesRouter) {
+  }
+
+  ngOnInit(): void {
+    this._pane.dataChange.subscribe(d => {
+      this.model = d.item;
+      const form = this._session.profile.forms.find(f => f.name === this.model.formId);
+      this._pane.icon = form.icon;
+      if (this.model.draft) {
+        this.mode = 'compose';
+        //this._pane.expand();
+      }
+      else
+        this.mode = 'preview';
+      this.newCommentsCount = this.model.unreadComments;
+      this._pane.title = this._pane.group = `#${this.model.number}`;
+    });
+    this._router.events.pipe(takeUntil(this._destroy),
+      filter(e => e instanceof NavigationStart &&
+        e.pane.component === CommentsPaneComponent
+        && e.pane.parent === this._pane)).
+      subscribe((e: NavigationPaneBase) => {
+        (e.pane.instance as CommentsPaneComponent).comments.change.
+          pipe(takeUntil(this._destroy)).subscribe(() =>
+            this.newCommentsCount = (e.pane.instance as CommentsPaneComponent).comments.unreadComments);
+      });
+    this._pane.queryParamsChange.subscribe(p => {
+      const { page } = p;
+      if (page !== undefined) {
+        //   const pagen = parseInt(page);
+        //  this.form.navigate(isNaN(pagen) ? page : pagen);
+      }
+    });
+    this._mailbox.changed.pipe(takeUntil(this._destroy)).subscribe(e => {
+      if (e.id === this.model.id && !this.working) {
+        if (e.folderId && e.folderId !== this.model.folderId) this._close();
+      }
+    });
+    this._mailbox.deleted.pipe(takeUntil(this._destroy)).subscribe(e =>
+      e === this.model.id && !this.working &&
+      this._close()
+    );
+    const container = this.dropableElement.nativeElement;
+    this._dragDrop.subscribe(ok => {
+      if (ok) container.classList.add('drag');
+      else container.classList.remove('drag');
+    });
+    this._pane.fullscreenChange.subscribe(f =>
+      this.expendable = !f);
+  }
+  edit() {
+    this.mode = 'compose';
+    this.expendable && this.expand();
+  }
+  expand() {
+    this._pane.expand();
+  }
+  change() {
+    this._pane.focus();
+  }
+  save() {
+    this.form.save().subscribe();
+  }
+  navComments() {
+    this._navigate('comments');
+  }
+  navTrace() {
+    this._navigate('trace')
+  }
+  private _navigate(command: string) {
+    return this._router.navigate([command], {
+      pathMode: 'relative',
+      relativeTo: this._pane
+    });
+  }
+  @HostListener('document:drop', ['$event'])
+  handleDocumentDrop(event: KeyboardEvent) {
+    event.stopPropagation();
+    event.preventDefault();
+  }
+  @HostListener('drop', ['$event'])
+  handleDrop(event: DragEvent) {
+    event.preventDefault();
+    this._dragDrop.next(false);
+    const { items } = event.dataTransfer;
+    const arr: File[] = [];
+    for (let i = 0; i < items.length; i++) {
+      const file = items[i].getAsFile();
+      arr.push(file);
+    }
+    this.form.upload(arr).subscribe();
+  }
+  @HostListener('dragenter', ['$event'])
+  handleEnter(event: DragEvent) {
+    event.preventDefault();
+    this._dragDrop.next(true);
+  }
+  @HostListener('dragleave', ['$event'])
+  handleLeave(event: DragEvent) {
+    event.preventDefault();
+    this._dragDrop.next(false);
+  }
+  @HostListener('dragover', ['$event'])
+  handleOver(event: DragEvent) {
+    event.preventDefault();
+    this._dragDrop.next(true);
+  }
+  /**
+   * Ctrl-s save
+   * @param event
+   */
+  @HostListener('document:keydown', ['$event'])
+  handleKeydown(event: KeyboardEvent) {
+    if (event.ctrlKey && (event.which === 83 || event.which === 115)) {
+      if (this.dirty && !this.working) {
+        this.form.save().subscribe();
+      }
+      event.preventDefault();
+    }
+  }
+  discard() {
+    this.form.discard().subscribe(this._close.bind(this))
+  }
+  send(action: string) {
+    this.form.send(action).subscribe(this._close.bind(this));
+  }
+  submit() {
+    this.form.submit().subscribe(this._close.bind(this))
+  }
+  private _close() {
+    this.form.dirty = false;
+    this._pane.close();
+  }
+  ngOnDestroy(): void {
+    this._dragDrop.complete();
+
+    this._destroy.next();
+    this._destroy.complete();
+  }
+  view() {
+    this._navigate('views')
+  }
+}

package/src/lib/compose/copy/copy.dialog.html

@@ -0,0 +1,21 @@
+<h2 mat-dialog-title>{{'Copy' | translate}}</h2>
+<mat-dialog-content>
+  <form>
+    <mat-form-field>
+      <input matInput type="search" [matAutocomplete]="index" placeholder="{{'Number' | translate}}" [formControl]="search" required />
+      <mat-icon matSuffix>search</mat-icon>
+      <!--<button mat-button *ngIf="search.value" matSuffix mat-icon-button aria-label="Clear" (click)="search.setValue('')">
+        <mat-icon>close</mat-icon>
+      </button>-->
+      <mat-autocomplete #index="matAutocomplete" [displayWith]="display" [autoActiveFirstOption]="true" (optionSelected)="select($event)">
+        <mat-option *ngFor="let m of results$ | async" [value]="m">
+          <span>{{m.number}} | {{m.subject}}</span>
+        </mat-option>
+      </mat-autocomplete>
+    </mat-form-field>
+  </form>
+</mat-dialog-content>
+<mat-dialog-actions>
+  <button mat-button type="submit" [disabled]="!selectedItem" [mat-dialog-close]="selectedItem" color="primary">{{'OK' | translate}}</button>
+  <button mat-button mat-dialog-close>{{'Cancel' | translate}}</button>
+</mat-dialog-actions>

package/src/lib/compose/copy/copy.dialog.ts

@@ -0,0 +1,40 @@
+import { Component, OnInit, OnDestroy } from '@angular/core';
+import { MailboxService } from '../../core/mailbox.service';
+import { HeaderModel } from '../../core/models';
+import { FormControl } from '@angular/forms';
+import { Subscription, Observable, of } from 'rxjs';
+import { startWith, debounceTime, filter } from 'rxjs/operators';
+import { MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
+import { MatDialogRef } from '@angular/material/dialog';
+import { ENTER } from '@angular/cdk/keycodes';
+
+@Component({
+  selector: 'bizdoc-copy',
+  templateUrl: './copy.dialog.html'
+})
+/** copy dialog */
+export class CopyDialog implements OnInit, OnDestroy {
+  private _subscription: Subscription;
+  readonly search = new FormControl();
+  results$: Observable<HeaderModel[]>;
+  selectedItem: HeaderModel;
+  /** copy ctor */
+  constructor(private _service: MailboxService, dialogRef: MatDialogRef<CopyDialog>) {
+    dialogRef.keydownEvents().pipe(filter(k => k.keyCode === ENTER)).
+      subscribe(() => this.selectedItem && dialogRef.close(this.selectedItem));
+  }
+  ngOnInit(): void {
+    this._subscription = this.search.valueChanges.pipe(startWith(''), debounceTime(250)).subscribe(v =>
+      this.results$ = v.length > 0 ? this._service.findAll({ contains: v, }, { take: 5 }) : of([]));
+  }
+  display(item: HeaderModel) {
+    return item ? item.number : null;
+  }
+  select(evt: MatAutocompleteSelectedEvent) {
+    this.selectedItem = evt.option.value;
+  }
+
+  ngOnDestroy(): void {
+    this._subscription.unsubscribe();
+  }
+}

package/src/lib/compose/dismiss.service.ts

@@ -0,0 +1,26 @@
+import { Injectable } from "@angular/core";
+import { CanDismiss } from "../core/configuration";
+import { ComposePaneComponent } from "./compose.pane.component";
+import { Observable, of } from "rxjs";
+import { switchMap, tap } from "rxjs/operators";
+import { MatDialog } from "@angular/material/dialog";
+import { SaveChangesDialog } from "./save-changes.dialog";
+
+@Injectable()
+export class ComposeDismiss implements CanDismiss<ComposePaneComponent> {
+  constructor(
+    private _dialog: MatDialog
+  ) {
+  }
+  onDismiss(component: ComposePaneComponent): Observable<boolean> | boolean {
+    if (component.form.dirty) {
+      component.form.working = true;
+      return this._dialog.open(SaveChangesDialog).afterClosed().pipe(tap(() =>
+        component.form.working = false
+      ), switchMap(ok =>
+        ok ? component.form.save(true) : of(ok !== false)));
+    }
+    else
+      return true;
+  }
+}

package/src/lib/compose/document-resolver.service.ts

@@ -0,0 +1,13 @@
+import { Injectable } from "@angular/core";
+import { DocumentModel } from "../core/models";
+import { MailboxService } from "../core/mailbox.service";
+import { PaneResolve, ParamMap } from "../core/configuration";
+import { Observable } from "rxjs";
+
+@Injectable()
+export class DocumentResolver implements PaneResolve<DocumentModel<any>> {
+    constructor(private _mailbox: MailboxService) { }
+    onResolve(params: ParamMap): Observable<DocumentModel<any>> {
+      return this._mailbox.info(((params['id'] as string).decodeId()));
+    }
+}

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

@@ -0,0 +1,5 @@
+<div class="form-header">
+  <bizdoc-people [model]="model"></bizdoc-people>
+  <bizdoc-attachments [model]="model" [includeDeleted]="false" [viewedIndicator]="true"></bizdoc-attachments>
+</div>
+<ng-container #component></ng-container>

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

@@ -0,0 +1,44 @@
+import { Component, ViewContainerRef, Injector, OnDestroy, Input, OnChanges, SimpleChanges, ViewChild } from '@angular/core';
+import { DocumentModel } from '../core/models';
+import { FormComponent } from '../core/base';
+import { SessionService } from '../core/session.service';
+import { FormRef } from '../compose/form-ref';
+import { DOCUMENT_MODEL } from '../core/mailbox.service';
+import { BizDocComponentFactoryResolver } from '../core/component-factory-resolver';
+import { RouterImpl } from '../core/router';
+
+
+@Component({
+    selector: 'bizdoc-document',
+  templateUrl: 'document.component.html'
+})
+export
+    class DocumentInfoComponent implements OnChanges, OnDestroy {
+    @ViewChild('component', { read: ViewContainerRef, static: true }) _container: ViewContainerRef;
+    private _formRef: FormRef;
+    constructor(
+        private _session: SessionService,
+        private _cf: BizDocComponentFactoryResolver,
+        private _router: RouterImpl,
+        private _injector: Injector) { }
+    ngOnChanges(changes: SimpleChanges): void {
+        const form = this._session.profile.forms.find(f => f.name === this.model.formId);
+        this._formRef && this._formRef._destroy();
+        this._formRef = new FormRef(this._router);
+        const factory = this._cf.resolve(form.template);
+        const injector = Injector.create([{
+            provide: DOCUMENT_MODEL, useValue: this.model
+        },
+        { provide: FormRef, useValue: this._formRef }], this._injector);
+        this._container.clear();
+        const cRef = this._container.createComponent(factory, null, injector);
+        const instance = cRef.instance as FormComponent<any>;
+        instance.mode = this._formRef._mode = 'preview';
+        instance.onBind(this.model);
+    }
+    @Input()
+    model: DocumentModel<any>;
+    ngOnDestroy(): void {
+        this._formRef._destroy();
+    }
+}

package/src/lib/compose/document.mobile.component.ts

@@ -0,0 +1,20 @@
+import { Component } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { DocumentModel } from '../core/models';
+import { WindowTitleService } from '../core/window-title.service';
+
+@Component({
+  template: `<bizdoc-document [model]=model></bizdoc-document>`
+})
+export
+  class DocumentInfoPageComponent {
+  model: DocumentModel<any>;
+  constructor(
+    route: ActivatedRoute,
+    title: WindowTitleService) {
+    route.data.subscribe(d => {
+      this.model = d['item'];
+      title.set(`#${this.model.number}`);
+    });
+  }
+}

package/src/lib/compose/document.pane.component.ts

@@ -0,0 +1,22 @@
+import { Component } from '@angular/core';
+import { DocumentModel } from '../core/models';
+import { SessionService } from '../core/session.service';
+import { PaneRef } from '../core/slots/pane-ref';
+
+@Component({
+  template: `<bizdoc-document [model]=model></bizdoc-document>`
+})
+export
+  class DocumentInfoPaneComponent {
+  model: DocumentModel<any>;
+  constructor(
+    private _pane: PaneRef,
+    private _session: SessionService) {
+    _pane.dataChange.subscribe(d => {
+      this.model = d['item'];
+      const form = this._session.profile.forms.find(f => f.name === this.model.formId);
+      this._pane.icon = form.icon;
+      this._pane.title = this._pane.group = `#${this.model.number}`;
+    });
+  }
+}

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

@@ -0,0 +1,6 @@
+<div *ngFor="let e of model.events | sort : 'time'">
+  <button mat-button (click)='open(e)'><mat-icon>{{e.time < today ? 'timer' : 'timer'}}</mat-icon><span> {{e.time | amCalendar}}</span></button>
+  <!--[matMenuTriggerFor]="event"
+  <mat-menu #event>
+  </mat-menu>-->
+</div>

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

@@ -0,0 +1,21 @@
+import { Component, Input } from '@angular/core';
+import { DocumentModel, ScheduledEvent } from '../../core/models';
+import { RouterImpl } from '../../core/router';
+
+@Component({
+  selector: 'bizdoc-events',
+  templateUrl: './events.component.html'
+})
+/** events component*/
+export class DocumentEventsComponent {
+  @Input() model!: DocumentModel;
+  readonly today = new Date();
+  /** events ctor */
+  constructor(private _router: RouterImpl) {
+  }
+  open(event: ScheduledEvent) {
+    this._router.navigate(['schedule'], {
+      queryParams: { date: new Date(event.starting).valueOf().encodeId() }
+    });
+  }
+}

package/src/lib/compose/form-ref.ts

@@ -0,0 +1,53 @@
+import { Subject } from "rxjs"
+import { ViewMode } from "../core/base";
+import { RouterImpl } from "../core/router";
+
+export class FormRef<M = any> {
+  readonly _saving = new Subject<SaveEventArgs>();
+  readonly _stateChange = new Subject<void>();
+  readonly _modelChange = new Subject<M>();
+  readonly _navigating = new Subject<string | number>();
+  _mode?: ViewMode;
+  constructor(private _router: RouterImpl) {
+  }
+  private _help: string;
+  /** intercept save */
+  get saving() {
+    return this._saving.asObservable();
+  }
+  /** listen to navigate events */
+  get navigating() {
+    return this._navigating.asObservable();
+  }
+  get modelChange() {
+    return this._modelChange.asObservable();
+  }
+  public get mode(): ViewMode { return this._mode; }
+  /** user guide */
+  public get help(): string { return this._help; }
+  public set help(val: string) {
+    this._help = val;
+    this._stateChange.next();
+  }
+  /**
+   * navigate to a form page
+   * @param page
+   */
+  navigate(page?: (string | number)) {
+    this._router.navigate([], {
+      queryParams: { page },
+      state: { paging: true }
+    });
+    this._navigating.next(page);
+  }
+  /** release events */
+  _destroy() {
+    this._saving.complete();
+    this._stateChange.complete();
+    this._modelChange.complete();
+    this._navigating.complete();
+  }
+}
+export interface SaveEventArgs {
+  cancel: boolean;
+}

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

@@ -0,0 +1,10 @@
+<mat-nav-list role="list">
+  <a mat-list-item role="listitem" *ngFor="let f of forms" (click)="open(f.name)">
+    <div matLine>{{f.title}}</div>
+    <mat-icon>{{f.icon}}</mat-icon>
+  </a>
+  <mat-divider></mat-divider>
+  <a mat-list-item role="listitem" (click)="copy($event)">
+    <div matLine>{{'Elipsis'| translate: ('Copy' | translate)}}</div>
+  </a>
+</mat-nav-list>

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

@@ -0,0 +1,74 @@
+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 => {
+        if (i)
+          this._mailbox.copy(i.id).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(e: HttpErrorResponse | any) {
+    if (e.constructor.name === 'PositionError')
+      switch (e.code) {
+        case 1:
+          this._sb.error('UserDeniedGeoErr');
+          break;
+        default:
+          this._sb.error('GeoErr');
+      }
+    else switch (e.status) {
+      case 406:
+        this._sb.errorString(e.error);
+        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,12 @@
+<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>
+<form style="display:none"><input type="file" #file multiple /></form>