@bizdoc/core 1.14.8 → 1.14.9

package/src/lib/compose/action/action-picker.component.html

@@ -0,0 +1,25 @@
+<ng-container *ngIf="actions.length">
+  <button mat-raised-button color="primary" [attr.data-help]="'action-'+actions[0].name" (click)="send(actions[0])" [disabled]="working">
+    <span>{{actions[0].title}}</span>
+  </button>
+  &nbsp;
+  <ng-container [ngSwitch]="actions.length">
+    <button mat-stroked-button [attr.data-help]="'action-'+actions[1].name" *ngSwitchCase="2" [disabled]="working" (click)="send(actions[1])">
+      <span>{{actions[1].title}}</span>
+    </button>
+    <ng-container *ngSwitchDefault>
+      <button mat-stroked-button data-help="send" [matMenuTriggerFor]="actionMenu" [disabled]="working" [bizdocTooltip]="'Send' | translate">
+        <span>{{'Actions' | translate}}</span> <mat-icon>arrow_drop_down</mat-icon>
+      </button>
+      <!-- action -->
+      <mat-menu #actionMenu>
+        <ng-template matMenuContent>
+          <ng-container *ngFor="let a of actions.slice(1); let i = index">
+            <mat-divider *ngIf="i > 1 && actions[i - 1].group !== a.group"></mat-divider>
+            <button mat-menu-item (click)="send(a)">{{a.title}}</button>
+          </ng-container>
+        </ng-template>
+      </mat-menu>
+    </ng-container>
+  </ng-container>
+</ng-container>

package/src/lib/compose/action/action-picker.component.scss

@@ -0,0 +1,4 @@
+:host {
+  display: flex;
+  flex-direction: row;
+}

package/src/lib/compose/action/action-picker.component.ts

@@ -0,0 +1,72 @@
+import { AfterViewInit, EventEmitter, Inject, OnChanges, Output, SimpleChanges } from '@angular/core';
+import { Component, Input } from '@angular/core';
+import { MatDialog } from '@angular/material/dialog';
+import { queryParams } from '../../core/functions';
+import { DOCUMENT_MODEL, MailboxService } from '../../core/mailbox.service';
+import { Action, RecipientModel } from '../../core/models';
+import { SessionService } from '../../core/session.service';
+import { ActionDialog, ActionDialogData } from './action.dialog';
+import { ActionBase } from './action.base';
+import { PromptService } from '../../core/prompt.service';
+import { AccountService } from '../../core/account.service';
+import { TranslateService } from '../../core/translate.service';
+
+@Component({
+  selector: 'bizdoc-action-picker',
+  templateUrl: './action-picker.component.html',
+  styleUrls: ['./action-picker.component.scss'],
+})
+/** action-picker component*/
+export class ActionPicker extends ActionBase implements OnChanges, AfterViewInit {
+  @Input() working = false;
+  @Output() readonly workingChange = new EventEmitter<boolean>();
+  actions: Action[] = [];
+  constructor(
+    @Inject(DOCUMENT_MODEL) public model: RecipientModel<any>,
+    private _session: SessionService,
+    mailbox: MailboxService,
+    private _dialog: MatDialog,
+    accounts: AccountService,
+    translate: TranslateService,
+    sb: PromptService
+  ) {
+    super(mailbox, accounts, sb, translate);
+  }
+  ngAfterViewInit(): void {
+    const btn = (document.querySelector('[data-help=send]') as HTMLButtonElement);
+    if (btn) btn.style.display = 'none';
+  }
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes['model'])
+      this.actions = this._session.profile.actions.filter(a => this.model.actions.indexOf(a.name) > -1).
+        sort(this._sortActions);
+  }
+  private _sortActions(a: Action, b: Action) {
+    if (a.group && b.group && a.group !== b.group)
+      return a.group < b.group ? -1 : 1;
+    return 0;
+  }
+  send(action: Action) {
+    this._dialog.open(ActionDialog, {
+      data: {
+        action: action.name,
+        item: this.model
+      } as ActionDialogData,
+      closeOnNavigation: true
+    }).afterClosed().subscribe(args => {
+      if (args) {
+        const params = queryParams(args);
+        this.workingChange.emit(true);
+        this.working = true;
+        return super._ok(action, params).
+          subscribe(() => {
+            this.working = false;
+            this.workingChange.emit(false);
+          }, e => {
+            this.working = false;
+            this.workingChange.emit(false);
+          });
+      }
+    })
+  }
+}

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

@@ -0,0 +1,19 @@
+import { Action, RecipientModel } from "../../core/models";
+
+export class ActionRef<T = any> {
+  public get name(): string {
+      return this._action.name;
+  }
+  public get options(): T {
+      return this._action.options;
+  }
+  public get item(): RecipientModel {
+      return this._items[0];
+  }
+  public get items(): RecipientModel[] {
+      return this._items;
+  }
+  constructor(private _items: RecipientModel[], private _action: Action) {
+
+  }
+}

package/src/lib/compose/action/action.base.ts

@@ -0,0 +1,58 @@
+import { HttpErrorResponse } from '@angular/common/http';
+import { tap } from 'rxjs';
+import { Action, RecipientModel } from '../../core/models';
+import { AccountService } from '../../core/account.service';
+import { MailboxService } from '../../core/mailbox.service';
+import { PromptService } from '../../core/prompt.service';
+import { TranslateService } from '../../core/translate.service';
+
+export abstract class ActionBase {
+  public model: RecipientModel<any>;
+  constructor(
+    private _mailbox: MailboxService,
+    private _accounts: AccountService,
+    protected _sb: PromptService,
+    private _translate: TranslateService
+  ) { }
+  protected _ok(action: Action, args) {
+    const { id, version, number, model, formId } = this.model;
+    return this._mailbox.send(id, version, formId, model, action.name, args).
+      pipe(tap(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, (action.adjective || action.past || action.title).toLowerCase(), this._translate.join(u.map(u => u.name))));
+        else
+          this._sb.toast('Sent', number, (action.adjective || action.past || action.title).toLowerCase());
+      }, e => {
+        this._handleError(e, 'SendErr');
+      }));
+  }
+  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:
+          break;
+        case 409: // version change
+          {
+            const obj = response.error /* serialized model */ as RecipientModel<any>;
+            this._sb.error('VersionErr', this.model.number);
+            break;
+          }
+        case 406: // validation exception
+          this._sb.errorString(response.error);
+          break;
+        default:
+          this._sb.error(message, ...args);
+      }
+  }
+}

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

@@ -0,0 +1,17 @@
+<h2 mat-dialog-title>{{action.title}}</h2>
+<mat-dialog-content fxLayout="column">
+  <p *ngIf="!action.arguments.length">
+    {{ 'ActionAsk' | translate : (action.verb || action.title).toLowerCase() }}
+  </p>
+  <bizdoc-layout [fields]="action.arguments"
+              *ngIf="!action.template; else template"
+              [(model)]="arguments"
+              [(valid)]="valid"></bizdoc-layout>
+</mat-dialog-content>
+<mat-dialog-actions>
+  <button mat-button type="submit" [disabled]="!valid" [mat-dialog-close]="arguments" color="primary">{{'Yes'|translate}}</button>
+  <button mat-button mat-dialog-close>{{'No' | translate}}</button>
+</mat-dialog-actions>
+<ng-template #template>
+  <ngx-component-outlet [type]="comp" [injector]="injector" (create)="bind($event)"></ngx-component-outlet>
+</ng-template>

package/src/lib/compose/action/action.dialog.scss

@@ -0,0 +1 @@
+:host ::ng-deep form{display:flex}

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

@@ -0,0 +1,57 @@
+import { Component, Inject, Injector, OnDestroy, OnInit, TemplateRef, Type, ViewChild, ViewContainerRef } from '@angular/core';
+import { MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+import { SessionService } from '../../core/session.service';
+import { Action, RecipientModel } from '../../core/models';
+import { ArgumentsComponent } from '../../core/base';
+import { BizDocComponentFactoryResolver } from '../../core/component-factory-resolver';
+import { ActionRef } from './action-ref';
+
+@Component({
+  templateUrl: './action.dialog.html',
+  styleUrls: ['./action.dialog.scss']
+})
+/** action-dialog component*/
+export class ActionDialog implements OnInit, OnDestroy {
+  readonly action: Action;
+  arguments = {};
+  valid: boolean;
+  @ViewChild('container', { read: ViewContainerRef }) container: ViewContainerRef;
+  /** action-dialog ctor */
+  private readonly _destroy = new Subject<void>();
+  injector: Injector;
+  comp: Type<ArgumentsComponent>;
+  constructor(@Inject(MAT_DIALOG_DATA) public data: ActionDialogData, session: SessionService,
+    private _fr: BizDocComponentFactoryResolver) {
+    this.action = session.profile.actions.find(a => a.name === data.action);
+  }
+  ngOnInit(): void {
+    if (this.action.template) {
+      this.injector = Injector.create([{
+        provide: ActionRef,
+        useValue: new ActionRef(this.data.items || [this.data.item], this.action)
+      }]);
+      this.comp = this._fr.component(this.action.template);
+    }
+    else {
+      if (this.action.arguments.length === 0)
+        this.valid = true;
+    }
+  }
+  bind(instance: ArgumentsComponent) {
+    instance.form.valueChanges.pipe(takeUntil(this._destroy)).subscribe(v => this.arguments = v);
+    instance.form.statusChanges.pipe(takeUntil(this._destroy)).
+      subscribe(() => this.valid = instance.form.valid);
+  }
+  ngOnDestroy(): void {
+    this._destroy.next();
+    this._destroy.complete();
+  }
+}
+export interface ActionDialogData {
+  action: string;
+  item?: RecipientModel<any>;
+  items?: RecipientModel<any>[];
+}
+

package/src/lib/compose/action/action.pane.dialog.exp.ts

@@ -0,0 +1,77 @@
+import { Component, ComponentFactoryResolver, EventEmitter, OnDestroy, OnInit, ViewChild, ViewContainerRef } from '@angular/core';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+import { SessionService } from '../../core/session.service';
+import { Action } from '../../core/models';
+import { ArgumentsComponent } from '../../core/base';
+import { BizDocComponentFactoryResolver } from '../../core/component-factory-resolver';
+import { LayoutComponent } from '../../core/layout/layout.component';
+import { PaneRef } from '../../core/slots/pane-ref';
+import { MailboxService } from '../../core/mailbox.service';
+import { PromptService } from '../../core/prompt.service';
+import { ParamMap } from '../../core/configuration';
+import { ActionBase } from './action.base';
+import { AccountService } from '../../core/account.service';
+import { TranslateService } from '../../core/translate.service';
+
+@Component({
+  selector: 'bizdoc-action-dialog.pane',
+  templateUrl: './action.pane.dialog.html',
+  styleUrls: ['./action.dialog.scss'],
+  host: {
+    class: 'pane'
+  }
+})
+/** action-dialog component*/
+export class ActionPaneComponent extends ActionBase implements OnInit, OnDestroy {
+  @ViewChild('container') container: ViewContainerRef;
+  arguments = {};
+  readonly action: Action;
+  valid: boolean;
+  readonly okChange = new EventEmitter<ParamMap>();
+  private readonly _destroy = new Subject<void>();
+  /** action-dialog ctor */
+  constructor(
+    private _pane: PaneRef<ActionPaneComponent>,
+    mailbox: MailboxService,
+    private _fr: BizDocComponentFactoryResolver,
+    private _fr2: ComponentFactoryResolver,
+    accounts: AccountService,
+    sb: PromptService,
+    translate: TranslateService,
+    session: SessionService) {
+    super(mailbox, accounts, sb, translate);
+    this.model = _pane.data.item;
+    this.action = session.profile.actions.find(a => a.name === _pane.params.action);
+  }
+  close() { this._pane.close(); }
+  ok() {
+    super._ok(this.action, this.arguments).subscribe(() =>
+      this.close()
+    );
+  }
+  ngOnInit(): void {
+    if (this.action.template) {
+      const factory = this._fr.resolve(this.action.template);
+      const cRef = this.container.createComponent(factory);
+      (cRef.instance as ArgumentsComponent).form.valueChanges.pipe(takeUntil(this._destroy)).subscribe(v => this.arguments = v);
+      (cRef.instance as ArgumentsComponent).form.statusChanges.pipe(takeUntil(this._destroy)).
+        subscribe(() => this.valid = (cRef.instance as ArgumentsComponent).form.valid);
+    }
+    else {
+      if (this.action.arguments.length === 0)
+        this.valid = true;
+      else {
+        const factory = this._fr2.resolveComponentFactory(LayoutComponent);
+        const cRef = this.container.createComponent(factory);
+        cRef.instance.fields = this.action.arguments;
+        cRef.instance.modelChange.pipe(takeUntil(this._destroy)).subscribe(v => this.arguments = v);
+        cRef.instance.validChange.pipe(takeUntil(this._destroy)).subscribe(v => this.valid = v);
+      }
+    }
+  }
+  ngOnDestroy(): void {
+    this._destroy.next();
+    this._destroy.complete();
+  }
+}

package/src/lib/compose/action/action.pane.dialog.html

@@ -0,0 +1,12 @@
+<h2 mat-dialog-title>{{action.title}}</h2>
+<mat-dialog-content>
+  <p *ngIf="!action.arguments.length">
+    {{ 'ActionAsk' | translate : (action.verb || action.title).toLowerCase() }}
+  </p>
+  <ng-container #container>
+  </ng-container>
+</mat-dialog-content>
+<mat-dialog-actions>
+  <button mat-button type="submit" [disabled]="!valid" (click)="ok()" color="primary">{{'Yes'|translate}}</button>
+  <button mat-button (click)='close()'>{{'No' | translate}}</button>
+</mat-dialog-actions>

package/src/lib/compose/action/assign-action.component.html

@@ -0,0 +1,23 @@
+<form autocomplete="off" fxLayout="column" [formGroup]="form">
+  <mat-form-field>
+    <input required [placeholder]="'AssignTo'|translate"
+           [formControl]=userId
+           cdkFocusInitial matInput
+           [matAutocomplete]="auto">
+    <mat-autocomplete #auto="matAutocomplete" (optionSelected)="userSelected($event)" [displayWith]="displayWith">
+      <mat-option *ngFor="let u of users$ | async" [value]="u">
+        {{u.name}}
+        <span *ngIf="u.email">&nbsp; - {{u.email}}</span>
+      </mat-option>
+    </mat-autocomplete>
+    <mat-error *ngIf="form.controls.userIds.hasError('required')">{{'Required'|translate:('AssignTo'|translate)}}</mat-error>
+  </mat-form-field>
+  <mat-checkbox formControlName=fyi> {{ 'AssignFYI' | translate }}</mat-checkbox>
+  <!--<mat-checkbox formControlName=roundtrip> {{ 'AssignRoundtrip' | translate }}</mat-checkbox>-->
+  <mat-form-field>
+    <textarea matInput cdkTextareaAutosize formControlName="note" [placeholder]="'Note'|translate" maxlength="200">
+    </textarea>
+    <mat-hint align="end">{{form.controls['note'].value?.length || 0}} / {{200}}</mat-hint>
+    <mat-hint>{{'AssignNoteHint'| translate}}</mat-hint>
+  </mat-form-field>
+</form>

package/src/lib/compose/action/assign-action.component.ts

@@ -0,0 +1,57 @@
+import { Component, ElementRef, OnDestroy, OnInit, ViewChild } from '@angular/core';
+import { FormBuilder, Validators } from '@angular/forms';
+import { MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
+import { debounceTime, Observable, Subject } from 'rxjs';
+import { takeUntil, map, switchMap } from 'rxjs/operators';
+import { BizDoc } from '../../core/decorators';
+import { UserInfo } from '../../core/models';
+import { ArgumentsComponent } from '../../core/base';
+import { SessionService } from '../../core/session.service';
+import { AccountService } from '../../core/account.service';
+import { isString } from '../../core/functions';
+
+@Component({
+  templateUrl: './assign-action.component.html'
+})
+@BizDoc({
+  selector: 'bizdoc-action-assign'
+})
+export class AssignActionComponent implements ArgumentsComponent, OnInit, OnDestroy {
+  @ViewChild('nameInput', { static: true, read: ElementRef }) nameInput: ElementRef<HTMLInputElement>;
+  readonly form = this._fb.group({
+    userIds: this._fb.control(null, Validators.required),
+    fyi: this._fb.control(false),
+    roundtrip: this._fb.control(false),
+    note: this._fb.control(null, Validators.maxLength(200))
+  });
+  readonly userId = this._fb.control([]);
+  users$: Observable<UserInfo[]>;
+  private _destroy = new Subject<void>();
+  constructor(private _fb: FormBuilder, private _session: SessionService, private _accounts: AccountService) {
+  }
+  displayWith = (e: UserInfo) => isString(e) ? e : e.name;
+  ngOnInit(): void {
+    const me = this._session.userId;
+    this.users$ = this.userId.valueChanges.
+      pipe(
+        debounceTime(200),
+        takeUntil(this._destroy),
+        switchMap(v =>
+          this._accounts.findAll(v, { take: 20 }).
+            pipe(map(r => 
+              r.filter(u => u.id !== me)
+            ))));
+  }
+  /**
+   *
+   * @param event
+   */
+  userSelected(event: MatAutocompleteSelectedEvent): void {
+    const { id } = event.option.value as UserInfo;
+    this.form.controls['userIds'].setValue([id]);
+  }
+  ngOnDestroy(): void {
+    this._destroy.next();
+    this._destroy.complete();
+  }
+}

package/src/lib/compose/action/moveto-action.component.html

@@ -0,0 +1,33 @@
+<form autocomplete="off" fxLayout="column" [formGroup]="form">
+  <mat-form-field>
+    <mat-chip-list #chipList [attr.aria-label]="'AssignTo'|translate">
+      <mat-chip *ngFor="let u of form.value.userIds"
+                [selectable]="true"
+                [removable]="true"
+                (removed)="removed(u)">
+        {{u | userName | async }}
+        <mat-icon matChipRemove>cancel</mat-icon>
+      </mat-chip>
+      <input required [placeholder]="'AssignTo'|translate"
+             [formControl]=userIds
+             cdkFocusInitial 
+             #nameInput
+             [matAutocomplete]="auto"
+             [matChipInputFor]="chipList"
+             [matChipInputSeparatorKeyCodes]="separatorKeysCodes">
+    </mat-chip-list>
+    <mat-autocomplete #auto="matAutocomplete" (optionSelected)="userSelected(nameInput, $event)">
+      <mat-option *ngFor="let u of users$ | async" [value]="u.id">
+        {{u.name}}
+        <span *ngIf="u.email">&nbsp; - {{u.email}}</span>
+      </mat-option>
+    </mat-autocomplete>
+    <mat-error *ngIf="form.controls.userIds.hasError('required')">{{'Required'|translate:('AssignTo'|translate)}}</mat-error>
+  </mat-form-field>
+  <mat-form-field>
+    <textarea matInput cdkTextareaAutosize formControlName="note" [placeholder]="'Note'|translate" maxlength="200">
+    </textarea>
+    <mat-hint align="end">{{form.controls['note'].value?.length || 0}} / {{200}}</mat-hint>
+    <mat-hint>{{'AssignNoteHint'| translate}}</mat-hint>
+  </mat-form-field>
+</form>

package/src/lib/compose/action/moveto-action.component.ts

@@ -0,0 +1,77 @@
+import { Component, ElementRef, OnDestroy, OnInit, ViewChild } from '@angular/core';
+import { FormBuilder, Validators } from '@angular/forms';
+import { MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
+import { COMMA, ENTER } from '@angular/cdk/keycodes';
+import { debounceTime, Observable, Subject } from 'rxjs';
+import { takeUntil, map, switchMap } from 'rxjs/operators';
+import { BizDoc } from '../../core/decorators';
+import { UserInfo } from '../../core/models';
+import { ArgumentsComponent } from '../../core/base';
+import { SessionService } from '../../core/session.service';
+import { AccountService } from '../../core/account.service';
+
+@Component({
+  templateUrl: './moveto-action.component.html'
+})
+@BizDoc({
+  selector: 'bizdoc-action-moveto'
+})
+export class MoveToActionComponent implements ArgumentsComponent, OnInit, OnDestroy {
+  readonly separatorKeysCodes: number[] = [ENTER, COMMA];
+  @ViewChild('nameInput', { static: true, read: ElementRef }) nameInput: ElementRef<HTMLInputElement>;
+  readonly form = this._fb.group({
+    userIds: this._fb.control(null, Validators.required),
+    note: this._fb.control(null, Validators.maxLength(200))
+  });
+  readonly userIds = this._fb.control([]);
+  users$: Observable<UserInfo[]>;
+  private _destroy = new Subject<void>();
+  constructor(private _fb: FormBuilder, private _session: SessionService, private _accounts: AccountService) {
+  }
+  ngOnInit(): void {
+    const me = this._session.userId;
+    this.users$ = this.userIds.valueChanges.
+      pipe(
+        debounceTime(200),
+        takeUntil(this._destroy),
+        switchMap(v =>
+          this._accounts.findAll(v, { take: 20 }).
+            pipe(map(r => {
+              const userIds = this.form.controls['userIds'].value as string[] || [];
+              return r.filter(u => u.id !== me && userIds.indexOf(u.id) < 0)
+            }))));
+  }
+  /**
+   *
+   * @param inp
+   * @param event
+   */
+  userSelected(inp: HTMLInputElement, event: MatAutocompleteSelectedEvent): void {
+    const userIds = this.form.controls['userIds'].value as string[] || [];
+    userIds.push(event.option.value);
+    this.form.controls['userIds'].setValue(userIds);
+    inp.value = '';
+  }
+  /**
+   *
+   * @param id
+   */
+  removed(id: string): void {
+    const userIds = this.form.controls['userIds'].value as string[];
+
+    const index = userIds.indexOf(id);
+
+    if (userIds.length > 1) {
+      index >= 0 &&
+        userIds.splice(index, 1);
+
+      this.form.updateValueAndValidity();
+    }
+    else 
+      this.form.controls['userIds'].setValue(null);
+  }
+  ngOnDestroy(): void {
+    this._destroy.next();
+    this._destroy.complete();
+  }
+}

package/src/lib/compose/action/return-action.component.html

@@ -0,0 +1,13 @@
+<form autocomplete="off" fxLayout="column" [formGroup]="form">
+  <mat-form-field>
+    <mat-select formControlName="recipientId" cdkFocusInitial [placeholder]="'User'|translate" required>
+      <mat-option *ngFor="let r of recipients" [value]="r.id">{{r.userId | userName | async }}</mat-option>
+    </mat-select>
+    <mat-error *ngIf="form.controls.recipientId.hasError('required')">{{'Required'|translate:('User'|translate)}}</mat-error>
+  </mat-form-field>
+  <mat-form-field>
+    <textarea matInput cdkTextareaAutosize formControlName="note" [placeholder]="'Note'|translate" maxlength="200">
+    </textarea>
+    <mat-hint align="end">{{form.controls['note'].value?.length || 0}} / {{200}}</mat-hint>
+  </mat-form-field>
+</form>

package/src/lib/compose/action/return-action.component.ts

@@ -0,0 +1,42 @@
+import { Component } from '@angular/core';
+import { FormBuilder, Validators } from '@angular/forms';
+import { BizDoc } from '../../core/decorators';
+import { ArgumentsComponent } from '../../core/base';
+import { Recipient } from '../../core/models';
+import { ActionRef } from './action-ref';
+import { SessionService } from '../../core/session.service';
+import { AccountService } from '../../core/account.service';
+import { OnInit } from '@angular/core';
+
+@Component({
+  templateUrl: './return-action.component.html'
+})
+@BizDoc({
+  selector: 'bizdoc-action-return'
+})
+export class ReturnActionComponent implements ArgumentsComponent, OnInit {
+  readonly recipients: Recipient[] = [];
+  constructor(private _fb: FormBuilder, actionRef: ActionRef<Options>, session: SessionService) {
+    const recipient = actionRef.item.recipients.find(r => r.id === actionRef.item.id),
+      node = actionRef.item.workflow.nodes.find(n => n.id === recipient.nodeId);
+    actionRef.item.recipients.slice(1).
+      filter(r => r.userId !== session.profile.userId && !r.estimate && !r.pending
+        && r.received >= actionRef.item.issued && r.received <= node.time).
+      reverse().forEach(r =>
+        this.recipients.findIndex(i => i.userId === r.userId) < 0 &&
+        this.recipients.push(r)
+      );
+  }
+  ngOnInit(): void {
+    if (this.recipients.length === 1) {
+      this.form.patchValue({ recipientId: this.recipients[0].id });
+      this.form.updateValueAndValidity();
+    }
+  }
+  readonly form = this._fb.group({
+    recipientId: this._fb.control(null, Validators.required),
+    note: this._fb.control(null, Validators.maxLength(200))
+  });
+}
+interface Options {
+}

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

@@ -0,0 +1,23 @@
+<div *ngFor="let a of attachments">
+  <button mat-button class="attachment-link" [matMenuTriggerFor]="attachment" [bizdocTooltip]="a.time | amCalendar" [progressIndicator]="a.progress">
+    <mat-icon *ngIf="viewedIndicator && a.viewed">done_all</mat-icon>
+    <!--[bizdocTooltip]="a.viewed | amCalendar"-->
+    <mat-icon>attachment</mat-icon>&nbsp;
+    <span [class.deleted]="a.deleted" [class.failed]="a.failed">{{a.fileName}}</span>
+  </button>
+  <mat-menu #attachment>
+    <ng-container *ngIf="!a.failed">
+      <button mat-menu-item (click)="download(a)">{{"Download" | translate}}</button>
+      <button mat-menu-item *ngIf="canPreview(a)" (click)="preview(a)"><mat-icon>landscape</mat-icon> {{"Preview" | translate}}</button>
+      <ng-container *ngIf="hasVersion(a)">
+        <mat-divider></mat-divider>
+        <button mat-menu-item *ngFor="let v of getVersions(a)" (click)="previewOrDownload(v)">{{v.time |  amCalendar}}</button>
+      </ng-container>
+      <ng-container *ngIf="canDelete(a)">
+        <mat-divider></mat-divider>
+        <button mat-menu-item (click)="discard(a)">{{"Discard" | translate}}</button>
+      </ng-container>
+    </ng-container>
+    <button mat-menu-item (click)="cancel(a)" *ngIf="a.failed">{{"Cancel" | translate}}</button>
+  </mat-menu>
+</div>

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

@@ -0,0 +1,21 @@
+:host {
+  display: flex;
+  flex-flow: wrap;
+}
+.attachment-link {
+
+  &.failed {
+    color: red
+  }
+
+  .loading {
+  }
+  .deleted {
+    text-decoration:line-through
+  }
+}
+::ng-deep button .progress {
+  background-color: dimgray;
+  position: absolute;
+  height: 100%;
+}