@bizdoc/core 1.14.8 → 1.14.9

package/src/lib/core/controls/file.input.ts

@@ -0,0 +1,400 @@
+import { Component, ElementRef, HostBinding, HostListener, Inject, Input, OnDestroy, OnInit, Optional, Self, ViewChild } from '@angular/core';
+import { NgControl, ControlValueAccessor } from '@angular/forms';
+import { HttpErrorResponse } from '@angular/common/http';
+import { MatFormFieldControl } from '@angular/material/form-field';
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import { DomSanitizer } from '@angular/platform-browser';
+import { forkJoin, of, Subject } from 'rxjs';
+import { catchError, tap, first, switchMap } from 'rxjs/operators';
+import { isArray } from '../functions';
+import { AttachmentInfo } from '../info/attachment-info.service';
+import { AttachmentExtra, DOCUMENT_MODEL, MailboxService, reportProgress, UploadEvent } from '../mailbox.service';
+import { Attachment, RecipientModel } from '../models';
+import { PromptService } from '../prompt.service';
+import { SessionService } from '../session.service';
+import { TranslateService } from '../translate.service';
+
+const EXTENTION_ICONS = { 'xlsx': 'excel', 'docx': 'word', 'pptx': 'powerpoint', 'pdf': 'pdf' };
+
+@Component({
+  templateUrl: 'file.input.html',
+  styleUrls: ['file.input.scss'],
+  host: { class: 'file-dropable' },
+  selector: 'bizdoc-file-upload'
+})
+export
+  class FileInput implements MatFormFieldControl<number | number[]>, ControlValueAccessor, OnInit, OnDestroy {
+  private static nextId = 0;
+  @HostBinding() readonly id = `type-file-upload-${FileInput.nextId++}`;
+  readonly stateChanges = new Subject<void>();
+  private _multiple = false;
+  public get multiple() {
+    return this._multiple;
+  }
+  @Input()
+  public set multiple(value) {
+    this._multiple = coerceBooleanProperty(value);
+  }
+  @Input() accept = null;
+  @Input() icon = 'publish';
+  @ViewChild('input') _input: ElementRef<HTMLInputElement>;
+  items = [] as AttachmentExtra[];
+  private _placeholder: string;
+  private _required: any;
+  private _disabled: boolean;
+  private _onChange: any;
+  private _onTouched: any;
+  private _value: number | number[];
+  private readonly _dragDrop = new Subject<boolean>();
+  private readonly _pending = new Subject<File[]>();
+  constructor(
+    private _dropableElement: ElementRef,
+    private _mailbox: MailboxService,
+    private _sanitizer: DomSanitizer,
+    private _attachmentInfo: AttachmentInfo,
+    private _translate: TranslateService,
+    private _session: SessionService,
+    private _sb: PromptService,
+    @Optional() @Self() public ngControl: NgControl,
+    @Inject(DOCUMENT_MODEL) private _model: RecipientModel<any>,
+  ) {
+    if (this.ngControl != null) {
+      this.ngControl.valueAccessor = this;
+    }
+  }
+  hasVersions(item: Attachment): boolean {
+    return this._model.attachments.find(a => a.fileName === item.fileName && a.id !== item.id) !== null;
+  }
+  getVersions(item: Attachment): Attachment[] {
+    return this._model.attachments.filter(a => a.fileName === item.fileName && a.id !== item.id);
+  }
+  download(item: AttachmentExtra) {
+    location.href = this._mailbox.formatDownloadUrl(this._model.documentId, item.id);
+    (item as AttachmentExtra).viewed = new Date();
+  }
+  previewOrDownload(item: AttachmentExtra) {
+    if (AttachmentInfo.exists(item.contentType))
+      this.apreview(item);
+    else
+      this.download(item);
+  }
+  canEdit(item: AttachmentExtra): boolean {
+    return !this._model.completed && item.userId === this._session.profile.userId && !item.deleted;
+  }
+  apreview(item: AttachmentExtra) {
+    this._attachmentInfo.preview(this._model, item.id);
+  }
+  cancel(item: AttachmentExtra) {
+    this._model.attachments.remove(item);
+  }
+  checkIn(item: AttachmentExtra) {
+    const accept = item.isImage ? 'image/*' :
+      '.' + AttachmentInfo.fileExt(item.fileName) + ',' + item.contentType;
+    this._prompt({ multiple: false, accept }).then(files => {
+      this._mailbox.checkIn(this._model.id, this._model.version, item.id, files[0]).
+        pipe().
+        subscribe(a => {
+          delete item.checkedOut;
+          Object.assign(item, a);
+          if (this.multiple) {
+            const index = (this.value as number[]).indexOf(item.id);
+            // replace value with new id
+            (this.value as number[]).splice(index, 1, a.id);
+          }
+          else
+            this.value = a.id;
+          this._sb.toast(this._translate.get('CheckedIn', item.fileName));
+        }, e => this._handleError(e));
+    }
+    )
+  }
+  checkOut(item: AttachmentExtra) {
+    this._mailbox.checkOut(this._model.id, this._model.version, item.id).
+      subscribe(() => {
+        item.checkedOut = true;
+        this.download(item);
+      });
+  }
+  discard(item: AttachmentExtra) {
+    const task = () =>
+      this._mailbox.removeattachment(this._model.id, item.id).subscribe(_ => {
+        this.items.remove(item);
+        this._value = this.multiple ? this.items.length ? this.items.map(i => i.id) : null : null;
+        this._onChange && this._onChange(this.value);
+        const aitem = this._model.attachments.find(a => a.id === item.id);
+        aitem.deleted = true;
+      }, e =>
+        this._handleError(e));
+    if (this._model.draft)
+      task();
+    else
+      this._sb.ask('DeleteFileAsk', 'DeleteFile', { color: 'warn' }).subscribe(ok =>
+        ok && task());
+  }
+  private _handleError(response: HttpErrorResponse): void {
+    switch (response.status) {
+      case 401:
+        break;
+      case 409: // version change
+        {
+          this._sb.error('VersionErr', this._model.number);
+          break;
+        }
+      case 406: // validation exception
+        this._sb.errorString(response.error);
+        break;
+      default:
+        this._sb.error();
+    }
+  }
+
+  ngOnInit(): void {
+    const container = this._dropableElement.nativeElement;
+    this._dragDrop.subscribe(ok => {
+      if (ok) container.classList.add('drag');
+      else container.classList.remove('drag');
+    });
+    if (!this._placeholder) this._placeholder = this._translate.get('DragFile');
+  }
+  @HostListener('document:drop', ['$event'])
+  handleDocumentDrop(event: KeyboardEvent) {
+    event.stopPropagation();
+    event.preventDefault();
+  }
+  @HostListener('drop', ['$event'])
+  handleDrop(event: DragEvent) {
+    event.preventDefault();
+    this._dragDrop.next(false);
+    this._onTouched && this._onTouched();
+    // to array
+    const { items } = event.dataTransfer;
+    const files = [] as File[];
+    for (let i = 0; i < items.length; i++) {
+      const file = items[i].getAsFile();
+      files.push(file);
+    }
+    this._upload(files);
+  }
+  @HostListener('dragenter', ['$event'])
+  handleEnter(event: DragEvent) {
+    event.preventDefault();
+    !this.disabled && this._dragDrop.next(true);
+  }
+  @HostListener('dragleave', ['$event'])
+  handleLeave(event: DragEvent) {
+    event.preventDefault();
+    !this.disabled && this._dragDrop.next(false);
+  }
+  @HostListener('dragover', ['$event'])
+  handleOver(event: DragEvent) {
+    event.preventDefault();
+    !this.disabled && this._dragDrop.next(true);
+  }
+  writeValue(val: number | number[]): void {
+    if (!val) {
+      this.items = [];
+      this._value = null;
+      return;
+    }
+    else if (isArray(val))
+      this.items =
+        val.map(i => {
+          const attachment = this._model.attachments.find(a => a.id === i);
+          return attachment ? this._createItem(attachment) : null;
+        }).filter(a => a);
+    else {
+      let attachment = this._model.attachments.find(a => a.id === val);
+      this.items = attachment ? [this._createItem(attachment)] : [];
+    }
+    this._value = val;
+  }
+  registerOnChange(fn: any): void {
+    this._onChange = fn;
+  }
+  registerOnTouched(fn: any): void {
+    this._onTouched = fn;
+  }
+  setDisabledState?(isDisabled: boolean): void {
+    this.disabled = isDisabled;
+  }
+  @Input() get value(): number | number[] {
+    return this._value;
+  }
+  set value(val: number | number[]) {
+    this.writeValue(val);
+    this.stateChanges.next();
+  }
+  @Input() get placeholder(): string {
+    return this._placeholder;
+  }
+  set placeholder(plh: string) {
+    this._placeholder = plh;
+    this.stateChanges.next();
+  }
+  focused: boolean;
+  get empty(): boolean { return !this._value; }
+  shouldLabelFloat: boolean;
+  @Input()
+  get required(): boolean {
+    return this._required;
+  }
+  set required(req: boolean) {
+    this._required = coerceBooleanProperty(req);
+    this.stateChanges.next();
+  }
+  @Input()
+  get disabled(): boolean { return this._disabled; }
+  set disabled(value: boolean) {
+    this._disabled = coerceBooleanProperty(value);
+    this.stateChanges.next();
+  }
+  errorState = false;
+  controlType?: string = 'bizdoc-file-upload';
+  @HostBinding('attr.aria-describedby') describedBy = '';
+  setDescribedByIds(ids: string[]) {
+    this.describedBy = ids.join(' ');
+  }
+  onContainerClick(): void {
+  }
+  open() {
+    this._prompt().then(
+      this._upload.bind(this))
+  }
+  private _prompt(options?: { multiple: boolean, accept?: string }): Promise<File[]> {
+    if (options) {
+      if (options.accept)
+        this._input.nativeElement.accept = options.accept;
+      if (options.multiple !== undefined)
+        this._input.nativeElement.multiple = options.multiple;
+    }
+    this._input.nativeElement.click();
+    return new Promise((resolve, reject) => {
+      this._pending.pipe(first()).
+        subscribe(resolve, reject);
+    })
+  }
+  /**
+   * 
+   * @param evt
+   */
+  _change(evt: InputEvent) {
+    this._onTouched && this._onTouched();
+    const { files } = evt.srcElement as HTMLInputElement;
+    const arr = [] as File[];
+    for (var i = 0; i < files.length; i++) {
+      let file = files.item(i);
+      arr.push(file);
+    }
+    this._pending.next(arr);
+    this._input.nativeElement.value = null;
+  }
+  /**
+   * 
+   * @param attachment
+   */
+  private _createItem(attachment: Attachment) {
+    const fileExt = AttachmentInfo.fileExt(attachment.fileName),
+      hasPreview = AttachmentInfo.exists(attachment.contentType),
+      isImage = hasPreview && AttachmentInfo.isImage(attachment.contentType),
+      url = isImage ? this._sanitizer.bypassSecurityTrustUrl(
+        this._mailbox.formatDownloadUrl(this._model.documentId, attachment.id)) : null;
+    return {
+      ...attachment,
+      hasPreview,
+      isImage,
+      fileExt,
+      url,
+      icon: EXTENTION_ICONS[fileExt],
+      checkedOut:
+        attachment.checkedOut &&
+        attachment.holdingId === this._session.profile.userId
+    } as AttachmentExtra;
+  }
+  /**
+   * 
+   * @param files
+   */
+  private _upload(files: File[]) {
+    const observables = [];
+    for (let i = 0; i < files.length; i++) {
+      let file = files[i],
+        item = this.items.find(i => file.name === i.fileName);
+      // exists
+      if (item) {
+        // is checked out
+        if (item.checkedOut) {
+          // check in
+          let observable = this._mailbox.checkIn(this._model.id, this._model.version, item.id, file).
+            pipe(
+              reportProgress(item), catchError(e => {
+                this._handleError(e);
+                return of(false);
+              }), tap((a: Attachment | false) => {
+                if (a) {
+                  delete item.checkedOut;
+                  // replace id
+                  this._value = this.multiple ? this.items.map(i => i.id) : a.id;
+                  Object.assign(item, a);
+                  this._onChange && this._onChange(this._value);
+                }
+              }));
+          observables.push(observable);
+        }
+        else if (this.canEdit(item)) {
+          // existing item, override
+          let observable = this._mailbox.upload(this._model.id, this._model.formId, this._model.version,
+            file, { isPrivate: true }).
+            pipe(reportProgress(item), catchError(e => {
+              this._handleError(e);
+              return of(false);
+            }), tap((a: Attachment) => {
+              if (a) {
+                this._value = this.multiple ? this.items.map(i => i.id) : a.id;
+                Object.assign(item, a);
+                this._onChange && this._onChange(this._value);
+              }
+            }),
+              /* no toast */
+              switchMap(_ => of(false)));
+          observables.push(observable);
+        }
+      } else {
+        // TODO add pending
+        //this.items.push(this._createItem(a));
+        // upload new
+        let observable = this._mailbox.upload(this._model.id, this._model.formId, this._model.version,
+          file, { isPrivate: true }).
+          pipe(/*TODO reportProgress(item), */catchError(e => {
+            this._handleError(e);
+            return of(false);
+          }), tap((a: Attachment) => {
+            if (a) {
+              this._model.attachments.push(a);
+              this.items.push(this._createItem(a));
+              this._value = this.multiple ? this.items.map(i => i.id) : a.id;
+              this._onChange && this._onChange(this._value);
+            }
+          }),
+            /* no toast */
+            switchMap(_ => of(false)));
+        observables.push(observable);
+      }
+    }
+    forkJoin(observables).subscribe(e => {
+      // filter non false
+      const attachments = e.filter(e => e) as Attachment[];
+      // any
+      attachments.length &&
+        this._sb.toast(
+          attachments.length > 1 ?
+            this._translate.get('CheckedInN', attachments.length) :
+            this._translate.get('CheckedIn', attachments[0].fileName)
+        );
+    });
+  }
+  ngOnDestroy(): void {
+    this._dragDrop.complete();
+    this._pending.complete();
+    this.stateChanges.complete();
+  }
+}

package/src/lib/core/controls/select.input.ts

@@ -0,0 +1,210 @@
+import { Component, Input, OnDestroy, HostBinding, Optional, Self, OnInit, ElementRef, Output, EventEmitter, ViewChild, DoCheck } from '@angular/core';
+import { NgControl, ControlValueAccessor, FormControl, Validators } from '@angular/forms';
+import { MatFormFieldControl } from '@angular/material/form-field';
+import { MatSelect } from '@angular/material/select';
+import { FocusMonitor } from '@angular/cdk/a11y';
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import { Subject, Observable } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+import { Type, FieldInfo } from '../models';
+import { SessionService } from '../session.service';
+import { DatasourceService } from '../datasource.service';
+import { ScopeType } from '../configuration';
+@Component({
+  selector: 'bizdoc-select',
+  providers: [{ provide: MatFormFieldControl, useExisting: TypeSelect }],
+  template: `<mat-select [placeholder]="placeholder" [formControl]="_control" [multiple]='multiple'
+    (focusin)="_onFocus()" (focusout)="_onBlur()" [compareWith]='_compareWithKey' [required]="required">
+      <mat-option *ngIf="!required && !multiple" [value]="null">
+        {{ 'None' | translate }}
+      </mat-option>
+      <mat-option *ngFor="let v of _items$ | async" [value]="v">
+        <span *ngIf="!_column">{{v.value}}</span>
+        <span *ngIf="_column">{{v.value[_column.name]}}</span>
+      </mat-option>
+    </mat-select>`,
+  host: {
+    '[class.floating]': 'shouldLabelFloat',
+    '[attr.aria-describedby]': 'describedBy'
+  }
+})
+export
+  class TypeSelect implements MatFormFieldControl<string | string[]>, ControlValueAccessor, OnInit, OnDestroy {
+  private static nextId = 0;
+  private _placeholder: string;
+  private _required = false;
+  private _disabled = false;
+  private _value?: string | string[];
+  private _onChange: any;
+  private _onTouched: any;
+  private _multiple: boolean;
+  readonly _control = new FormControl();
+  _items$: Observable<KeyValue[]>;
+  _column: FieldInfo;
+  private _configuration: Type;
+  readonly stateChanges = new Subject<void>();
+  @ViewChild(MatSelect, { static: true }) inputElement: MatSelect;
+  @HostBinding() id = `type-select-${TypeSelect.nextId++}`;
+  @Input() type: string;
+  @Input() scope: ScopeType;
+  @Output() readonly selectionChange = new EventEmitter<SelectEvent>();
+  touched: boolean;
+  @Input() set multiple(val: boolean) { this._multiple = coerceBooleanProperty(val); }
+  get multiple(): boolean { return this._multiple }
+  @Input() get placeholder() {
+    return this._placeholder;
+  }
+  set placeholder(plh) {
+    this._placeholder = plh;
+    this.stateChanges.next();
+  }
+  focused = false;
+  get empty(): boolean { return !this._value; }
+  @HostBinding('class.floating')
+  get shouldLabelFloat() {
+    return this.focused || !this.empty;
+  }
+  @Input()
+  get required(): boolean {
+    return this._required;
+  }
+  set required(req: boolean) {
+    this._required = coerceBooleanProperty(req);
+    if (this._required)
+      this._control.setValidators(Validators.required);
+    else
+      this._control.clearValidators();
+    this.stateChanges.next();
+  }
+  @Input()
+  get disabled(): boolean { return this._disabled; }
+  set disabled(val: boolean) {
+    this._disabled = coerceBooleanProperty(val);
+    if (this._control.disabled !== this._disabled) {
+      if (this._disabled)
+        this._control.disable();
+      else
+        this._control.enable();
+    }
+    this.stateChanges.next();
+  }
+  @Input() text: string;
+  @Output() readonly textChange = new EventEmitter<string>();
+  get errorState(): boolean {
+    return this._control.invalid && this.touched;
+  }
+  controlType?: string = 'bizdoc-type-select';
+  @HostBinding('attr.aria-describedby') describedBy = '';
+
+  setDescribedByIds(ids: string[]) {
+    this.describedBy = ids.join(' ');
+  }
+  onContainerClick(): void {
+    this.inputElement.focus();
+  }
+  writeValue(val: any): void {
+    this._value = val;
+    this._setValue(val, false);
+  }
+  private _setValue(val: any, emitEvent: boolean) {
+    this._control.setValue(val ? this.multiple ? val.map(key => ({ key })) : { key: val } : null, { emitEvent });
+  }
+
+  registerOnChange(fn: any): void {
+    this._onChange = fn;
+  }
+  registerOnTouched(fn: any): void {
+    this._onTouched = fn;
+  }
+  setDisabledState?(isDisabled: boolean): void {
+    this.disabled = isDisabled;
+  }
+  @Input() get value(): string | string[] {
+    return this._value;
+  }
+  set value(val: string | string[]) {
+    this._value = val;
+    this._setValue(val, true);
+    this.stateChanges.next();
+  }
+  _onFocus() {
+    if (!this.focused) {
+      this.focused = true;
+      this._onTouched && this._onTouched();
+      this.stateChanges.next();
+    }
+  }
+  _onBlur() {
+    this.touched = true;
+    this.focused = false;
+    this.stateChanges.next();
+  }
+  focus() {
+    this.inputElement.focus();
+  }
+  _compareWithKey(option1: KeyValue, option2: KeyValue) {
+    return option2 && option1.key === option2.key;
+  }
+  private readonly _destroy = new Subject<void>();
+  constructor(@Optional() @Self() public ngControl: NgControl,
+    private _fm: FocusMonitor,
+    private _elRef: ElementRef<HTMLElement>, private _session: SessionService,
+    private _service: DatasourceService) {
+    if (this.ngControl != null) {
+      this.ngControl.valueAccessor = this;
+    }
+    _fm.monitor(_elRef.nativeElement, true).subscribe(origin => {
+      this.focused = !!origin;
+      this.stateChanges.next();
+    });
+  }
+  ngOnInit(): void {
+    this._configuration = this._session.profile.types.find(t => t.name === this.type);
+    if (!this._configuration)
+      throw `${this.type} is not a known BizDoc type.`;
+    if (this._configuration.columns) this._column = this._configuration.columns.find(c => !c.key);
+    this._items$ = this._service.all(this.type);
+    this._control.valueChanges.pipe(takeUntil(this._destroy)).subscribe(v => {
+      if (this._multiple) {
+        const items = v as KeyValue[] || [],
+          key = items.map(i => i.key);
+        this._value = key;
+        this._onChange && this._onChange(key);
+        this.selectionChange.emit({
+          values: items.map(i => i.key),
+          items: items.map(i => i.value)
+        });
+      }
+      else {
+        const { value, key } = v as KeyValue || {};
+        this._value = key;
+        this._onChange && this._onChange(key);
+        const text = this._column ? value[this._column.name] : value;
+        this.textChange.emit(text);
+        this.selectionChange.emit({
+          value: key,
+          item: value,
+          text
+        });
+      }
+      this.stateChanges.next();
+    });
+  }
+  ngOnDestroy(): void {
+    this._destroy.next();
+    this._destroy.complete();
+    this._fm.stopMonitoring(this._elRef.nativeElement);
+    this.selectionChange.complete();
+    this.stateChanges.complete();
+  }
+}
+
+interface KeyValue { key: any; value: any }
+
+export interface SelectEvent {
+  readonly value?: any;
+  readonly text?: string;
+  readonly item?: any;
+  readonly values?: any[];
+  readonly items?: any[];
+}

package/src/lib/core/controls/time-picker.html

@@ -0,0 +1,4 @@
+<input matInput type="text" [matAutocomplete]="auto" [formControl]="control" [placeholder]="placeholder">
+<mat-autocomplete #auto>
+  <mat-option *ngFor="let o of options" [value]="o">{{o}}</mat-option>
+</mat-autocomplete>