@bizdoc/core 1.14.5 → 1.14.9

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

@@ -0,0 +1,97 @@
+import { Component, OnDestroy, ViewChild, OnInit, Inject } from '@angular/core';
+import { MatSidenav } from '@angular/material/sidenav';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+import { RecipientModel, INBOX } from '../core/models';
+import { SessionService } from '../core/session.service';
+import { WindowTitleService } from '../core/window-title.service';
+import { CommentsComponent } from './comments/comments.component';
+import { ActivatedRoute, Router } from '@angular/router';
+import { ComposeFormComponent } from './form.component';
+import { isMobile } from '../core/functions';
+import { ViewMode } from '../core/base';
+import { BizDocConfig, BIZDOC_CONFIG } from '../core/configuration';
+
+@Component({
+  templateUrl: './compose.mobile.component.html',
+  styleUrls: ['./compose.mobile.component.scss']
+})
+/** compose component responsible for editing a form */
+export class ComposeComponent implements OnInit, OnDestroy {
+  @ViewChild(ComposeFormComponent, { static: true }) form: ComposeFormComponent;
+  @ViewChild(CommentsComponent, {}) comments: CommentsComponent;
+  @ViewChild(MatSidenav, { static: true }) drawer: MatSidenav;
+  working: boolean;
+  dirty: boolean;
+  valid: boolean;
+  mode: ViewMode;
+  model: RecipientModel<any>;
+  newCommentsCount: number;
+  viewMode: 'comments' | 'views';
+  readonly isMobile = isMobile();
+  readonly   enableAnalysis: boolean;
+  private readonly _destroy = new Subject<void>();
+  /** compose ctor */
+  constructor(
+    private _title: WindowTitleService,
+    private _session: SessionService,
+    private _router: Router,
+    private _route: ActivatedRoute,
+    @Inject(BIZDOC_CONFIG) config: BizDocConfig  ) {
+    this.enableAnalysis = _session.profile.views.length > 0;
+  }
+  ngOnInit(): void {
+    this._route.data.subscribe(() => {
+      this.model = this._route.snapshot.data['item'];
+      this.newCommentsCount = this.model.unreadComments || null;
+      const form = this._session.profile.forms.find(f => f.name === this.model.formId);
+      this._title.set(this.model.number ? `#${this.model.number}` : form.title);
+      this.newCommentsCount &&
+        this.drawer.open();
+      const { page } = this._route.snapshot.queryParams;
+      page &&
+        this.form.navigate(page);
+      this.mode = this.model.draft ? 'compose' : 'preview';
+    });
+    this.drawer.openedChange.pipe(takeUntil(this._destroy)).subscribe(o => {
+      if (o) {
+        if (this.comments) {
+          !this.newCommentsCount && this.comments.focus();
+          this.comments.change.pipe(takeUntil(this._destroy)).subscribe(() =>
+            this.newCommentsCount = this.comments.unreadComments);
+        }
+      }
+    });
+  }
+  toggle(mode: 'comments' | 'views') {
+    if (this.viewMode === mode) {
+      this.drawer.close();
+      this.viewMode = null;
+    }
+    else {
+      this.viewMode = mode;
+      !this.drawer.opened && this.drawer.open();
+    }
+  }
+  send(action: string) {
+    this.form.send(action).subscribe(this._close.bind(this));
+  }
+  edit() {
+    this.mode = 'compose';
+  }
+  discard() {
+    this.form.discard().subscribe(this._close.bind(this))
+  }
+  submit() {
+    this.form.submit().subscribe(this._close.bind(this));
+  }
+  private _close(): void {
+    this._router.navigate(['mailbox/f', INBOX], {
+      queryParamsHandling: 'preserve'
+    });
+  }
+  ngOnDestroy(): void {
+    this._destroy.next();
+    this._destroy.complete();
+  }
+}

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

@@ -0,0 +1,68 @@
+<mat-toolbar class="nav-toolbar">
+  <button mat-icon-button color="primary" (click)="form.back()" [bizdocTooltip]="'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="form.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="form.actions.length > 1" [matMenuTriggerFor]="actionMenu" [disabled]="!valid||working">
+    <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" [bizdocTooltip]="'Save'|translate" *ngIf="mode === 'compose'">
+    <mat-icon>save</mat-icon>
+  </button>
+  <button mat-icon-button data-help="tag" (click)="form.tag($event)" [bizdocTooltip]="'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" [bizdocTooltip]="'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" [bizdocTooltip]="'AttachFile' | translate" [disabled]="working"><mat-icon>attach_file</mat-icon></button>
+  <button mat-icon-button [disabled]="working" data-help="edit" (click)="edit()" [bizdocTooltip]="'Edit' | translate" *ngIf="mode !== 'compose' && model.pending && !model.completed"><mat-icon>create</mat-icon></button>
+  <span class="divider"></span>
+  <button mat-icon-button (click)="navTrace()" [bizdocTooltip]="'Trace' | translate" tabindex="1"><mat-icon>timeline</mat-icon></button>
+  <button mat-icon-button (click)="navComments()" data-help="comments" [bizdocTooltip]="'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()" [bizdocTooltip]="'View' | translate" [attr.aria-label]="'View' | translate" *ngIf="enableAnalysis" class="tool"><mat-icon>data_usage</mat-icon></button>
+  <button mat-icon-button (click)="expand()" [bizdocTooltip]="'Expand' | translate" *ngIf="expendable" [attr.aria-label]="'Expand' | translate"><mat-icon>open_in_new</mat-icon></button>
+  <button mat-icon-button [matMenuTriggerFor]="optionsMenu" [bizdocTooltip]="'Options' | translate" [attr.aria-label]="'Options' | translate"><mat-icon>more_vert</mat-icon></button>
+  <mat-menu #optionsMenu="matMenu">
+    <ng-template matMenuContent>
+      <button mat-menu-item (click)="form.copy()" [disabled]="working">
+        <!--<mat-icon>content_copy</mat-icon>-->
+        <span>{{'Copy' | translate}}</span>
+      </button>
+      <button mat-menu-item (click)="discard()" *ngIf="model.draft && !model.issued" [disabled]="working">
+        <!--<mat-icon>delete_outlined</mat-icon>-->
+        <span>{{'Discard' | translate}}</span>
+      </button>
+      <ng-container *ngIf="form.help">
+        <mat-divider></mat-divider>
+        <button mat-menu-item (click)="form.guide(form.help)">
+          <!--<mat-icon>help_outline</mat-icon>-->
+          <span>{{'Help' | translate}}</span>
+        </button>
+      </ng-container>
+      <mat-divider></mat-divider>
+      <button mat-menu-item (click)="close()"><!--<mat-icon></mat-icon>--><span>{{'Close'| translate}}</span></button>
+    </ng-template>
+  </mat-menu>
+</mat-toolbar>
+<div class="file-dropable" #dropable>
+  <bizdoc-form [model]=model #form
+               (modelChange)="change()"
+               (saved)="saved()"
+               (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,6 @@
+.nav-toolbar {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+}
+

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

@@ -0,0 +1,188 @@
+import { Component, HostListener, OnDestroy, ViewChild, ElementRef, OnInit, Inject } from '@angular/core';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+import { RecipientModel } from '../core/models';
+import { PanesRouter } from '../core/slots/router.service';
+import { 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';
+import { BizDocConfig, BIZDOC_CONFIG, OpenPolicy } from '../core/configuration';
+
+@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;
+  readonly enableAnalysis: 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,
+    @Inject(BIZDOC_CONFIG) config: BizDocConfig) {
+    this.enableAnalysis = _session.profile.views.length > 0;
+  }
+
+  ngOnInit(): void {
+    this._pane.dataChange.subscribe(d => {
+      if (this.model == d.item) return;
+      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';
+        //setTimeout(()=>this._pane.expand());
+      }
+      else
+        this.mode = 'preview';
+      this.newCommentsCount = this.model.unreadComments;
+      this._pane.title = this._pane.group = `#${this.model.number}`;
+    });
+    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.expendable = !this._pane.expanded;
+    this._pane.expandeding.subscribe(e => this.expendable = !e);
+  }
+  close() {
+    this._pane.close();
+  }
+  edit() {
+    this.mode = 'compose';
+    this.expendable && this.expand();
+  }
+  expand() {
+    this._pane.expand();
+  }
+  change() {
+    this._pane.focus();
+  }
+  save() {
+    this.form.save().subscribe();
+  }
+  saved() {
+    this._pane.recycle();
+  }
+  navComments() {
+    this._navigate('comments').then(paneRef => {
+      (paneRef.instance as CommentsPaneComponent).comments.change.
+        pipe(takeUntil(this._destroy)).subscribe(() =>
+          this.newCommentsCount = (paneRef.instance as CommentsPaneComponent).
+            comments.unreadComments);
+    });
+  }
+  navTrace() {
+    this._navigate('trace')
+  }
+  private _navigate(command: string) {
+    return this._router.navigate([command], {
+      pathMode: 'relative',
+      relativeTo: this._pane,
+      policy: OpenPolicy.Toggle
+    });
+  }
+  @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.save();
+      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() : 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,41 @@
+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';
+
+@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 _injector: Injector) { }
+    ngOnChanges(_: SimpleChanges): void {
+        const form = this._session.profile.forms.find(f => f.name === this.model.formId);
+        this._formRef && this._formRef._destroy();
+        this._formRef = new FormRef();
+        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, 0, 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>