@bizdoc/core 1.13.11 → 1.13.12

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

@@ -0,0 +1,363 @@
+import { Component, ElementRef, HostBinding, HostListener, Inject, Input, OnDestroy, OnInit, Optional, Self, ViewChild } from '@angular/core';
+import { NgControl, ControlValueAccessor } from '@angular/forms';
+import { MatFormFieldControl } from '@angular/material/form-field';
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import { DomSanitizer } from '@angular/platform-browser';
+import { forkJoin, of } from 'rxjs';
+import { Subject, tap } from 'rxjs';
+import { isArray } from '../functions';
+import { AttachmentInfo } from '../info/attachment-info.service';
+import { AttachmentExtra, DOCUMENT_MODEL, MailboxService, UploadEvent } from '../mailbox.service';
+import { Attachment, RecipientModel } from '../models';
+import { PromptService } from '../prompt.service';
+import { SessionService } from '../session.service';
+import { TranslateService } from '../translate.service';
+import { HttpErrorResponse } from '@angular/common/http';
+import { catchError } from 'rxjs';
+
+const EXTENDED_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: 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;
+    }
+  }
+  hasVersion(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 (this.canPreview(item))
+      this.openPreview(item);
+    else
+      this.download(item);
+  }
+  canPreview(item: AttachmentExtra): boolean {
+    return AttachmentInfo.exists(item.contentType);
+  }
+  canEdit(item: AttachmentExtra): boolean {
+    return !this._model.completed && item.userId === this._session.profile.userId && !item.deleted;
+  }
+  openPreview(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 => {
+      //if (!files[0].name.startsWith(item.fileName)) {
+      //  this._sb.error(this._translate.get('CheckInMatchErr', item.fileName));
+      //  return;
+      //}
+      this._mailbox.checkIn(this._model.id, this._model.version, item.id, files[0]).subscribe(a => {
+        //if (a instanceof UploadEvent) {
+        //  Object.assign(item, {
+        //    progress: a.loaded / a.total
+        //  });
+        //  return;
+        //}
+        Object.assign(item, a, { progress: null, checkedOut: null });
+        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(() => {
+        item.deleted = true;
+        if (this.multiple) {
+          this.items.remove(item);
+          if (this.items.length)
+            this._value = this.items.map(i => i.id);
+          else this.items = null;
+        }
+        else
+          this._value = this.items = null;
+        this._onChange(this._value);
+        this._model.attachments.remove(item);
+      }, 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();
+    const { items } = event.dataTransfer;
+    const files = [] as File[];
+    for (let i = 0; i < items.length; i++) {
+      const file = items[i].getAsFile();
+      files.push(file);
+    }
+    const checkedOut = this.items.filter(i => i.checkedOut);
+    if (this.items && checkedOut.length) {
+      const observables = [];
+      for (let item of checkedOut) {
+        let file = files.find(f => f.name.startsWith(item.fileName));
+        if (file) {
+          let observable = this._mailbox.checkIn(this._model.id, this._model.version, item.id, file).
+            pipe(tap(e => {
+              //Object.assign(item, a, { progress: null });
+            }), catchError(e => {
+              this._handleError(e);
+              return of(false);
+            }));
+          observables.push(observable);
+        }
+      }
+      forkJoin(observables).subscribe(e => {
+        const attachments = e.filter(e => e) as Attachment[];
+        attachments.length && this._sb.toast(
+          attachments.length > 1 ? this._translate.get('CheckedInN', attachments.length) :
+            this._translate.get('CheckedIn', attachments[0].fileName)
+        )
+      });
+    }
+    else
+      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 = null;
+      return;
+    }
+    else if (isArray(val))
+      this.items =
+        val.map(i => this._createItem(i));
+    else this.items[this._createItem(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.items; }
+  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 {
+  }
+  prompt() {
+    this._prompt().then(this._upload.bind(this))
+  }
+  private _prompt(options?: { multiple: boolean, accept?: string }): Promise<File | File[]> {
+    if (options) {
+      if (options.accept) this.accept = options.accept;
+      if (options.multiple !== undefined) this.multiple = options.multiple;
+    }
+    return new Promise((resolve) => {
+      this._input.nativeElement.click();
+      this._pending.subscribe(resolve);
+    })
+  }
+  _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);
+  }
+  private _createItem(id: number): any {
+    //const log = this._model.log.filter(l => l.fileId == attachment.id && l.userId == this._session.userId),
+    const attachment = this._model.attachments.find(a => a.id === id),
+      fileExt = AttachmentInfo.fileExt(attachment.fileName),
+      icon = EXTENDED_ICONS[fileExt];
+    return {
+      ...attachment,
+      hasPreview: AttachmentInfo.exists(attachment.contentType),
+      isImage: AttachmentInfo.isImage(attachment.contentType),
+      fileExt,
+      icon,
+      url: this._sanitizer.bypassSecurityTrustUrl(
+        this._mailbox.formatDownloadUrl(this._model.documentId, attachment.id)),
+      checkedOut:
+        attachment.checkedOut &&
+        attachment.holdingId === this._session.userId
+    } as AttachmentExtra;
+  }
+  private _upload(files: File[]) {
+    const observables = [];
+    for (let file of files) {
+      let observable = this._mailbox.upload(this._model.id, this._model.formId, this._model.version,
+        file, { isPrivate: true }).
+        pipe(tap(e => {
+          //  if (e.progress) {
+
+          //  }
+        }), catchError(e => {
+          this._handleError(e);
+          return of(false);
+        }));
+      observables.push(observable);
+    }
+    this._input.nativeElement.value = null;
+    forkJoin(observables).subscribe(e => {
+      const ids = [];
+      if (!this.items) this.items = [];
+      e.forEach(a => {
+        if (!a) return;
+        ids.push(a.id);
+        this._model.attachments.push(a);
+        this.items.push(this._createItem(a.id));
+      })
+      if (this.multiple)
+        this._value = this._value ? (this._value as number[]).concat(ids) : ids;
+      else
+        this._value = ids[0];
+      this._onChange(this._value);
+    });
+  }
+  ngOnDestroy(): void {
+    this._dragDrop.complete();
+    this._pending.complete();
+    this.stateChanges.complete();
+  }
+}

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

@@ -0,0 +1,211 @@
+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'
+    (focus)="_onFocus()" (blur)="_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, DoCheck, OnDestroy {
+  focus() {
+    this.inputElement.focus();
+  }
+  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>();
+  @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>();
+  errorState = false;
+  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() {
+    this.focused = true;
+    this._onTouched && this._onTouched();
+  }
+  _onBlur() {
+    this.focused = false;
+  }
+  ngDoCheck(): void {
+    if (this.ngControl) {
+      this.errorState = this.ngControl.invalid && this.ngControl.touched;
+      this.stateChanges.next();
+    }
+  }
+  _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 type.`;
+    if (this._configuration.columns) this._column = this._configuration.columns.find(c => !c.key);
+    this._items$ = this._service.all(this.type);
+    this._control.statusChanges.pipe(takeUntil(this._destroy)).subscribe(() =>
+      this.errorState = this._control.errors != null
+    );
+    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>