@bizdoc/core 1.8.5 → 1.8.9

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

@@ -0,0 +1,205 @@
+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';
+@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;
+  @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 : { 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[] || [], value = items.map(i => this._column ? i.value[this._column.name] : i.value), 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>

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

@@ -0,0 +1,199 @@
+import { Component, OnInit, OnDestroy, Input, Optional, Self, ElementRef } from "@angular/core";
+import { FormControl, ControlValueAccessor, NgControl } from "@angular/forms";
+import { MatFormFieldControl } from "@angular/material/form-field";
+import { FocusMonitor } from "@angular/cdk/a11y";
+import { coerceBooleanProperty } from "@angular/cdk/coercion";
+import { Subject } from "rxjs";
+import { takeUntil } from "rxjs/operators";
+import { isDate } from "../../core/functions";
+
+const TIME_FORMAT = /\d{1,2}:\d{1,2}/, DATE_FORMAT = /\d{4}-\d\d-\d\dT\d\d:\d{2}/;
+
+function generateValues(): string[] {
+  const times = [];
+  let h = 0;
+  while (h < 24) {
+    let m = 0;
+    while (m < 60) {
+      times.push(`${h}:${m}`);
+      m += 15;
+    }
+    h++;
+  }
+  return times;
+}
+
+@Component({
+  selector: 'mat-time-picker',
+  templateUrl: 'time-picker.html',
+  providers: [{ provide: MatFormFieldControl, useExisting: TimePicker }],
+  host: {
+    '[class.floating]': 'shouldLabelFloat',
+    '[id]': 'id',
+    '[attr.aria-describedby]': 'describedBy'
+  }
+})
+export class TimePicker implements ControlValueAccessor, MatFormFieldControl<string>, OnInit, OnDestroy {
+  private static nextId = 0;
+  readonly controlType = 'time-picker';
+  readonly id = `time-picker-${TimePicker.nextId++}`;
+  focused = false;
+  errorState = false;
+  describedBy = '';
+  onChange = (_: any) => { };
+  onTouched = () => { };
+  private _dateControl: FormControl;
+
+  get empty() {
+    const value = this.control.value;
+
+    return !value;
+  }
+
+  get shouldLabelFloat() { return this.focused || !this.empty; }
+
+  @Input()
+  dateControlName: string;
+  @Input()
+  get placeholder(): string { return this._placeholder; }
+  set placeholder(value: string) {
+    this._placeholder = value;
+    this.stateChanges.next();
+  }
+  private _placeholder: string;
+
+  @Input()
+  get required(): boolean { return this._required; }
+  set required(value: boolean) {
+    this._required = coerceBooleanProperty(value);
+    this.stateChanges.next();
+  }
+  private _required = false;
+
+  @Input()
+  get disabled(): boolean { return this._disabled; }
+  set disabled(value: boolean) {
+    this._disabled = coerceBooleanProperty(value);
+    this._disabled ? this.control.disable() : this.control.enable();
+    this.stateChanges.next();
+  }
+  private _disabled = false;
+  readonly control = new FormControl({});
+  readonly stateChanges = new Subject<void>();
+  readonly options = generateValues();
+  @Input()
+  get value(): string | null {
+    const value = this.control.value;
+    return value;
+  }
+  set value(val: string | null) {
+    this._setValue(val, true);
+    this.stateChanges.next();
+  }
+  private _setValue(val: Date | string, emitEvent: boolean) {
+    if (val) {
+      if (isDate(val) || DATE_FORMAT.test(val as string)) {
+        val = new Date(val);
+        this.control.setValue(val.getHours() + ':' + val.getMinutes(), { emitEvent });
+      }
+      else
+        this.control.setValue(TIME_FORMAT.exec(val as string)[0], { emitEvent });
+    } else
+      this.control.reset();
+  }
+
+  private readonly _destroy = new Subject<void>();
+  constructor(
+    private _focusMonitor: FocusMonitor,
+    private _elementRef: ElementRef<HTMLElement>,
+    @Optional() @Self() public ngControl: NgControl) {
+
+    _focusMonitor.monitor(_elementRef, true).subscribe(origin => {
+      if (this.focused && !origin) {
+        this.onTouched();
+      }
+      this.focused = !!origin;
+      this.stateChanges.next();
+    });
+
+    if (this.ngControl != null) {
+      this.ngControl.valueAccessor = this;
+    }
+  }
+
+  setDescribedByIds(ids: string[]) {
+    this.describedBy = ids.join(' ');
+  }
+
+  onContainerClick(event: MouseEvent) {
+    if ((event.target as Element).tagName !== 'INPUT')
+      this._elementRef.nativeElement.querySelector('input').focus();
+  }
+
+  writeValue(val: string | null): void {
+    this._setValue(val, false);
+  }
+
+  registerOnChange(fn: any): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: any): void {
+    this.onTouched = fn;
+  }
+
+  setDisabledState(isDisabled: boolean): void {
+    this.disabled = isDisabled;
+  }
+
+  ngOnInit(): void {
+    this.control.valueChanges.pipe(takeUntil(this._destroy)).
+      subscribe(v => {
+        this.errorState = !this._validate(v);
+        if (v && !this.errorState && this.dateControlName) {
+          const date = this._dateControl.value;
+          date && this._appendTime(date);
+        }
+        this.onChange(this.value);
+      });
+    if (this.dateControlName) {
+      this._dateControl = this.ngControl.control.parent.controls[this.dateControlName];
+      if (!this._dateControl) throw `${this.controlType} dateControlName ${this.dateControlName}`;
+
+      this._dateControl.valueChanges.pipe(takeUntil(this._destroy)).
+        subscribe((v: Date) => {
+          v && this.value && this._appendTime(v);
+        });
+    }
+  }
+  private _appendTime(val: Date) {
+    if (!isDate(val)) val = new Date(val);
+    const parts = this.value.split(':');
+    val.setHours(parseInt(parts[0]), parseInt(parts[1]));
+    this._dateControl.setValue(val.toISOString(), { emitEvent: false });
+  }
+  private _validate(val: string): boolean {
+    if (!val) return !this._required;
+    const parts = val.split(':');
+    if (parts.length > 2)
+      return false;
+    for (let i = 0; i < parts.length; i++) {
+      if (!/\d{1,2}/.test(parts[i]))
+        return false;
+      const part = parseInt(parts[i]);
+      if (isNaN(part))
+        return false;
+      else if (i === 0 && (part < 0 || part > 23))
+        return false;
+      else if (i === 1 && (part < 0 || part > 59)) return false;
+    }
+    return true;
+  }
+
+  ngOnDestroy() {
+    this.stateChanges.complete();
+    this._focusMonitor.stopMonitoring(this._elementRef);
+    this._destroy.next();
+    this._destroy.complete();
+  }
+}

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

@@ -0,0 +1,175 @@
+import { Component, Input, OnDestroy, HostBinding, Optional, Self, ElementRef, OnInit } from '@angular/core';
+import { NgControl, ControlValueAccessor, FormBuilder } from '@angular/forms';
+import { MatFormFieldControl } from '@angular/material/form-field';
+import { FocusMonitor } from '@angular/cdk/a11y';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+
+/** */
+export class Timespan {
+  constructor(public days?: number,
+    public hours?: number,
+    public minutes?: number) { }
+}
+@Component({
+  selector: 'bizdoc-timespan-input',
+  providers: [{ provide: MatFormFieldControl, useExisting: TimespanInput }],
+  template: `<div [formGroup]="parts" class="ts-input-container">
+    <input class="ts-input-element" formControlName="days" size="2" pattern="\\d*" #inp>
+    <span class="ts-input-spacer">{{'DaysPart' | translate}}</span>
+    <input class="ts-input-element" formControlName="hours" size="2" max="24" min="0" pattern="\\d*">
+    <span class="ts-input-spacer">{{'HoursPart' | translate}}</span>
+    <input class="ts-input-element" formControlName="minutes" size="2" max="60" min="0" pattern="\\d*">
+    <span class="ts-input-spacer">{{'MinutesPart' | translate}}</span>
+  </div>`,
+  styles: [`.ts-input-container {
+      display: flex;
+    }
+    .ts-input-element {
+      border: none;
+      background: none;
+      padding: 0;
+      outline: none;
+      font: inherit;
+      text-align: center;
+    }
+
+    .ts-input-spacer {
+      opacity: 0;
+
+        font-size: x-small;
+      text-transform: uppercase;
+      transition: opacity 200ms;
+    }
+    :host.floating .ts-input-spacer {
+      opacity: 1;
+    }`],
+  host: {
+    '[class.floating]': 'shouldLabelFloat',
+    '[attr.aria-describedby]': 'describedBy'
+  }
+})
+  /** */
+export
+  class TimespanInput implements MatFormFieldControl<string>, ControlValueAccessor, OnDestroy, OnInit {
+  private static nextId = 0;
+  private _placeholder: string;
+  private _required = false;
+  private _disabled = false;
+  private _onChange: any;
+  private _onTouched: any;
+  readonly parts = this._fb.group({
+    days: '',
+    hours: '',
+    minutes: ''
+  });
+  readonly stateChanges = new Subject<void>();
+  @HostBinding() readonly id = `timespan-input-${TimespanInput.nextId++}`;
+  @Input() get placeholder() {
+    return this._placeholder;
+  }
+  set placeholder(plh) {
+    this._placeholder = plh;
+    this.stateChanges.next();
+  }
+  focused = false;
+  get empty(): boolean {
+    const { value: { days, hours, minutes } } = this.parts;
+
+    return !days && !hours && !minutes;
+  }
+  @HostBinding('class.floating')
+  get shouldLabelFloat() {
+    return this.focused || !this.empty;
+  }
+  @Input()
+  get required() {
+    return this._required;
+  }
+  set required(req) {
+    this._required = req;
+    this.stateChanges.next();
+  }
+  @Input()
+  get disabled(): boolean { return this._disabled; }
+  set disabled(value: boolean) {
+    this._disabled = value;
+    this._disabled ? this.parts.disable() : this.parts.enable();
+    this.stateChanges.next();
+  }
+  errorState = false;
+  controlType?: string = 'timespan-input';
+  @HostBinding('attr.aria-describedby') describedBy = '';
+
+  setDescribedByIds(ids: string[]) {
+    this.describedBy = ids.join(' ');
+  }
+  focus() {
+    this._elRef.nativeElement.querySelector('input').focus();
+  }
+  onContainerClick(event: MouseEvent): void {
+    if ((event.target as Element).tagName.toLowerCase() !== 'input') {
+      this.focus();
+    }
+  }
+  writeValue(obj: any): void {
+    this.value = obj;
+  }
+  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 | null {
+    const { value: { days, hours, minutes } } = this.parts;
+    if (days || hours || minutes) {
+      return `${days || 0}.${hours || '00'}:${minutes || '00'}:00`;
+    }
+    else
+      return null;
+  }
+  set value(value: string | null) {
+    let days = null, hours = null, minutes = null;
+
+    if (value) {
+      const parts = value.split(':');
+      if (parts[0].indexOf('.') > 0) {
+        const dparts = parts[0].split('.');
+        days = parseInt(dparts[0]); hours = parseInt(dparts[1]);
+      }
+      else {
+        days = 0; hours = parseFloat(parts[0]);
+      }
+      minutes = parseFloat(parts[1]);
+    }
+    this.parts.setValue({ days, hours, minutes });
+    this.stateChanges.next();
+  }
+  private readonly _destroy = new Subject<void>();
+  constructor(@Optional() @Self() public ngControl: NgControl,
+    private _fb: FormBuilder, private _fm: FocusMonitor, private _elRef: ElementRef<HTMLElement>) {
+    if (this.ngControl != null) {
+      this.ngControl.valueAccessor = this;
+    }
+    _fm.monitor(_elRef.nativeElement, true).subscribe(origin => {
+      this.focused = !!origin;
+      this.stateChanges.next();
+    });
+  }
+  ngOnInit(): void {
+    this.parts.valueChanges.pipe(takeUntil(this._destroy)).
+      subscribe(() => this._onChange(this.value));
+    this.parts.statusChanges.pipe(takeUntil(this._destroy)).
+      subscribe(() => { if (this.parts.touched) this._onTouched() });
+  }
+  ngOnDestroy(): void {
+    this._destroy.next();
+    this._destroy.complete();
+    this._fm.stopMonitoring(this._elRef.nativeElement);
+    this.stateChanges.complete();
+  }
+}

package/src/lib/core/datasource.service.ts

@@ -0,0 +1,67 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { Observable } from 'rxjs';
+import { map, shareReplay } from 'rxjs/operators';
+import { isObject } from '../core/functions';
+
+/** */
+@Injectable({ providedIn: 'root' })
+export class DatasourceService {
+  keys(type: string) {
+    return this.map(type).pipe(map(m => 
+      Object.keys(m)
+    ));
+  }
+
+  private _cache: { [type: string]: Observable<{ [key: string]: any }> } = {};
+
+  constructor(private _http: HttpClient) {
+
+  }
+/**
+ * 
+ * @param type
+ * @param key
+ */
+  get(type: string, key: string): Observable<any> {
+    return this.map(type).pipe(map(m => m[key] || key));
+  }
+  /**
+   * 
+   * @param type
+   * @param value
+   */
+  keyOf(type: string, value: any): Observable<any> {
+    return this.map(type).pipe(map(m => Object.keys(m).find(k => m[k] === value)));
+  }
+  /**
+   * 
+   * @param type
+   * @param params
+   */
+  map(type: string, params?: { [key: string]: any }): Observable<{ [name: string]: any }> {
+    let cacheId = type;
+    if (params)
+      //Object.keys(params).forEach(k => cacheId += `${k}${params[k]}`);
+      cacheId += params.toString();
+    let observe = this._cache[cacheId];
+
+    if (!observe) {
+      const dataSource = this._http.get<{ [name: string]: any }>(`/api/datatype/${type}`,
+        { params: isObject(params) ? params : params !== undefined ? { value: params } : null });
+
+      observe = this._cache[cacheId] = dataSource.pipe(shareReplay());
+    }
+
+    return observe;
+  }
+  /**
+   * 
+   * @param type
+   * @param params
+   */
+  all(type: string, params?: any): Observable<{ key: string; value: any }[]> {
+    return this.map(type, params).pipe(map(m =>
+      Object.keys(m).map(k => ({ key: k, value: m[k] }))));
+  }
+}