@bizdoc/core 1.8.5 → 1.8.9

package/src/lib/core/controls/combination-picker-body.ts

@@ -0,0 +1,191 @@
+import { Component, OnDestroy, OnInit, InjectionToken, Optional, Inject, EventEmitter, ViewChildren, QueryList, ChangeDetectorRef, ViewChild } from "@angular/core";
+import { FormBuilder } from "@angular/forms";
+import { finalize } from "rxjs/operators";
+import { MAT_DIALOG_DATA } from "@angular/material/dialog";
+import { CubeAxis, Cube } from "../models";
+import { SessionService } from "../session.service";
+import { CubeService } from "../../cube/cube.service";
+import { DatasourceService } from "../datasource.service";
+import { PromptService } from "../prompt.service";
+import { CubeInfo } from "../../cube/cube-info.service";
+import { MatSelect } from "@angular/material/select";
+
+export const COMBINATION_PICKER_BODY = new InjectionToken<CombinationBodyData>('combination_body');
+
+export interface CombinationBodyData {
+  cube: string;
+  value: string;
+  limit: number;
+  divider: string;
+  displayDivider: string;
+  exploreSettings: ExploreSettings;
+}
+
+export interface ExploreSettings {
+  enable?: boolean;
+  view?: string;
+  defaults?: {
+    [axis: string]: (string | number);
+  };
+  indices?: string[] | string;
+  /** one or more axis */
+  filters?: string[] | string;
+  xAxis: string;
+  serie: string;
+  sum?: {
+    xAxis?: string | number;
+    serie?: string | number;
+    title: string;
+  },
+  /** */
+  aggregate?: string[] | string;
+}
+
+export type Mode = 'filter' | 'results';
+/** */
+@Component({
+  selector: 'bizdoc-combination-picker-body',
+  templateUrl: 'combination-picker-body.html',
+  styleUrls: ['combination-picker-body.scss']
+})
+export class CombinationPickerBody implements OnInit, OnDestroy {
+  readonly selectionChange = new EventEmitter<CombinationSelectedEvent>();
+  readonly modeChange = new EventEmitter<Mode>();
+  mode: Mode;
+  @ViewChildren(MatSelect) axes: QueryList<MatSelect>;
+  readonly _explorable: boolean;
+  _working = false;
+  readonly _axes: CubeAxis[];
+  readonly _form = this._fb.group({
+  });
+  readonly _keys: { [type: string]: (string | number)[] } = {};
+  readonly _values: { [type: string]: { [key: string]: any } | { [key: number]: any } } = {};
+  _combinations: string[][];
+  private _data: CombinationBodyData;
+  private _cube: Cube;
+  constructor(
+    @Optional() @Inject(MAT_DIALOG_DATA) dialogData: CombinationBodyData,
+    @Optional() @Inject(COMBINATION_PICKER_BODY) overlayData: CombinationBodyData,
+    private _fb: FormBuilder,
+    private _snackbar: PromptService,
+    private _accountInfo: CubeInfo,
+    private _ds: DatasourceService,
+    private _cd: ChangeDetectorRef,
+    private _session: SessionService,
+    private _service: CubeService) {
+    this._data = overlayData || dialogData;
+    const { cube, exploreSettings } = this._data;
+    this._explorable = exploreSettings.enable !== false;
+    if (cube)
+      this._cube = this._session.profile.cubes.find(c => c.name === cube);
+    else
+      this._cube = this._session.profile.cubes[0];
+    if (!this._cube) throw 'No cube';
+    this._axes = this._cube.axes.filter(a => a.combination);
+    if (!this._axes.length) throw 'No axis with combination';
+  }
+  ngOnInit(): void {
+    this._axes.forEach(a => {
+      const control = this._fb.control(null);
+      this._keys[a.name] = [];
+      this._form.addControl(a.name, control);
+      this._ds.map(a.dataType).subscribe(m => {
+        this._values[a.dataType] = m;
+        const keys = this._keys[a.name] = Object.keys(m);
+        if (keys.length < 2) {
+          if (keys.length === 1) control.setValue(keys[0]);
+          control.disable();
+        }
+      });
+    });
+    this._form.updateValueAndValidity();
+    this._data.value && this._patchForm(this._data.value);
+    this._switchMode('filter');
+  }
+  /**
+   * 
+   * @param code
+   */
+  private _patchForm(code: string) {
+    const codes = code.split(this._data.divider),
+      values = {};
+    this._axes.forEach((a, i) => codes[i] && (values[a.name] = codes[i]));
+    this._form.patchValue(values);
+  }
+  /**
+   * 
+   * @param val
+   */
+  _switchMode(val: Mode) {
+    this.mode = val;
+    this.modeChange.emit(val);
+    setTimeout(() => {
+      if (val === 'filter') this.axes.first.focus();
+      this._cd.detectChanges();
+    }, 0)
+  }
+  /**
+   * filter */
+  _filter() {
+    this._working = true;
+    const values = this._form.value, args = {};
+    this._axes.forEach(a => values[a.name] && (args[a.name] = values[a.name]));
+    this._service.combinations(this._cube.name, args, { take: this._data.limit, progress: false }).
+      pipe(finalize(() => this._working = false)).
+      subscribe(r => {
+        this._combinations = r;
+        this._switchMode('results');
+        r.length === this._data.limit && this._snackbar.toast('TakeMore');
+      }, () => this._snackbar.error());
+  }
+  /**
+   * item select
+   * @param code
+   */
+  _select(axes: string[]) {
+    const description = this._nameOf(axes),
+      value = this._codeOf(axes);
+    this.selectionChange.emit({ value, description, axes });
+  }
+  /**
+   * 
+   * @param codes
+   */
+  _codeOf(codes: string[]): string {
+    return codes.join(this._data.divider);
+  }
+  /**
+   * translate code segments to names
+   * @param code
+   */
+  _nameOf(codes: string[]): string {
+    return this._axes.map((a, i) => this._values[a.dataType][codes[i]] || codes[i]).
+      join(this._data.displayDivider || this._data.divider);
+  }
+  /**
+   * open info
+   * @param code
+   * @param evt
+   */
+  _info(codes: [string | number], evt: MouseEvent) {
+    const { defaults } = this._data.exploreSettings || {};
+    const axes = {
+      ...defaults
+    };
+    codes.slice(0, this._axes.length).forEach((a, i) => axes[this._axes[i].name] = a);
+
+    this._accountInfo.popup(axes, evt.srcElement as HTMLElement, { ...this._data.exploreSettings, cube: this._cube.name });
+
+    evt.cancelBubble = true;
+    evt.preventDefault();
+    evt.stopPropagation();
+  }
+  ngOnDestroy(): void {
+    this.selectionChange.complete();
+    this.modeChange.complete();
+  }
+}
+
+export interface CombinationSelectedEvent {
+  readonly value: string; readonly description: string; readonly axes: string[];
+}

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

@@ -0,0 +1,6 @@
+<div class="account-picker-element">
+  <textarea class="mat-input-element" [disabled]="disabled" (keydown)="_keyDown($event)" [value]="description"></textarea>
+  <div class="mat-form-field-suffix">
+    <button mat-icon-button (click)="open($event)" matSuffix [disabled]="disabled" tabindex="-1" [class.mat-warn]="errorState"><mat-icon>money</mat-icon></button>
+  </div>
+</div>

package/src/lib/core/controls/combination-picker.scss

@@ -0,0 +1,9 @@
+.account-picker-element {
+  display: flex;
+  flex-direction: row;
+
+  textarea {
+    resize: none;
+    flex: auto;
+  }
+}

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

@@ -0,0 +1,243 @@
+import { Component, ViewContainerRef, ElementRef, Input, EventEmitter, Output, Optional, OnDestroy, HostBinding, Self, OnInit, DoCheck, Injector } from "@angular/core";
+import { ControlValueAccessor, NgControl } from "@angular/forms";
+import { Overlay, OverlayRef } from "@angular/cdk/overlay";
+import { ComponentPortal } from "@angular/cdk/portal";
+import { MatFormField, MatFormFieldControl } from "@angular/material/form-field";
+import { MatDialog, MatDialogRef } from "@angular/material/dialog";
+import { FocusMonitor } from "@angular/cdk/a11y";
+import { Directionality } from "@angular/cdk/bidi";
+import { coerceNumberProperty, coerceBooleanProperty } from "@angular/cdk/coercion";
+import { UP_ARROW, ESCAPE, DOWN_ARROW } from "@angular/cdk/keycodes";
+import { merge, Subject } from "rxjs";
+import { filter, tap } from "rxjs/operators";
+import { ACCOUNT_DELIMITER } from "../../cube/cube.service";
+import { CombinationBodyData, CombinationPickerBody, CombinationSelectedEvent, COMBINATION_PICKER_BODY, ExploreSettings } from "./combination-picker-body";
+
+const RECORDS_LIMIT = 50;
+
+@Component({
+  selector: 'bizdoc-combination-picker',
+  templateUrl: 'combination-picker.html',
+  styleUrls: ['combination-picker.scss'],
+  providers: [{ provide: MatFormFieldControl, useExisting: CombinationPicker }],
+  host: {
+    '[class.floating]': 'shouldLabelFloat',
+    '[attr.aria-describedby]': 'describedBy'
+  }
+})
+export class CombinationPicker implements MatFormFieldControl<string>, ControlValueAccessor, OnInit, DoCheck, OnDestroy {
+  private static nextId = 0;
+  private _placeholder: string;
+  private _required = false;
+  private _disabled = false;
+  private _onChange = (_: any) => { };
+  private _onTouched = () => { };
+  private _value: string;
+  private _opened = false;
+  private _limit: number = RECORDS_LIMIT;
+  private _overlayRef: OverlayRef;
+  private _portal: ComponentPortal<CombinationPickerBody>;
+  private _dialogRef: MatDialogRef<CombinationPickerBody>;
+  readonly stateChanges = new Subject<void>();
+  @Input('divider') _divider: string = ACCOUNT_DELIMITER;
+  @Input('displayDivider') _displayDivider: string;
+  @Input() set limit(val: number) { this._limit = coerceNumberProperty(val); }
+  get limit(): number { return this._limit; }
+  @Input() cube: string;
+  @Input() exploreSettings?: ExploreSettings;
+  @Output()
+  readonly optionSelected = new EventEmitter<CombinationSelectedEvent>();
+  private _description: string = null;
+  @Input() set description(val: string) { this._description = val; }
+  get description(): string { return this._description || ''; }
+  @Output()
+  readonly descriptionChange = new EventEmitter<string>();
+  @HostBinding() readonly id = `account-picker-${CombinationPicker.nextId++}`;
+  @Input() touchUi: boolean;
+  @Input() get placeholder() {
+    return this._placeholder;
+  }
+  set placeholder(plh) {
+    this._placeholder = plh;
+    this.stateChanges.next();
+  }
+  focused = false;
+  get empty(): boolean {
+    return this._value === null;
+  }
+  @HostBinding('class.floating')
+  get shouldLabelFloat() {
+    return this.focused || !this.empty;
+  }
+  @Input()
+  get required() {
+    return this._required;
+  }
+  set required(req) {
+    this._required = coerceBooleanProperty(req);
+    this.stateChanges.next();
+  }
+  @Input()
+  get disabled(): boolean { return this._disabled; }
+  set disabled(value: boolean) {
+    this._disabled = value;
+    this.stateChanges.next();
+  }
+  errorState = false;
+  controlType?: string = 'account-picker-input';
+  @HostBinding('attr.aria-describedby') describedBy = '';
+  setDescribedByIds(ids: string[]) {
+    this.describedBy = ids.join(' ');
+  }
+  onContainerClick(evt: MouseEvent): void {
+    if ((evt.target as Element).tagName !== 'INPUT') {
+    }
+    this._open();
+  }
+  open(evt: KeyboardEvent) {
+    this._open();
+    evt.stopPropagation();
+  }
+  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 {
+    return this._value;
+  }
+  set value(value: string | null) {
+    this._value = value;
+    this.stateChanges.next();
+  }
+  private readonly _destroy = new Subject<void>();
+  constructor(@Optional() @Self() public ngControl: NgControl, @Optional() private _formField: MatFormField,
+    private _overlay: Overlay, private _dialog: MatDialog,
+    private _vc: ViewContainerRef,
+    private _injector: Injector,
+    private _fm: FocusMonitor,
+    private _elementRef: ElementRef,
+    private _dir: Directionality) {
+    if (this.ngControl != null) {
+      this.ngControl.valueAccessor = this;
+    }
+    _fm.monitor(_elementRef.nativeElement, true).subscribe(origin => {
+      if (this.focused && !origin) {
+        this._onTouched();
+      }
+      this.focused = !!origin;
+      this.stateChanges.next();
+    });
+  }
+  ngOnInit(): void {
+  }
+  ngDoCheck(): void {
+    if (this.ngControl) {
+      this.errorState = this.ngControl.invalid && this.ngControl.touched;
+      this.stateChanges.next();
+    }
+  }
+  _keyDown(evt: KeyboardEvent) {
+    if (evt.altKey && evt.keyCode === DOWN_ARROW)
+      this._open();
+    else if (evt.keyCode)
+      return;
+    evt.preventDefault();
+  }
+  private _open() {
+    if (this._opened) return;
+    this._onTouched();
+    const data = {
+      divider: this._divider,
+      displayDivider: this._displayDivider,
+      limit: this._limit,
+      value: this._value,
+      cube: this.cube,
+      exploreSettings: this.exploreSettings
+    } as CombinationBodyData;
+    if (this.touchUi) {
+      this._dialogRef = this._dialog.open(CombinationPickerBody, {
+        direction: this._dir.value,
+        data,
+        maxHeight: '90vh'
+      });
+      this._attach(this._dialogRef.componentInstance);
+    }
+    else {
+      if (!this._overlayRef) {
+        this._overlayRef = this._createOverlayRef();
+        const injector = Injector.create([{
+          provide: COMBINATION_PICKER_BODY, useValue: data
+        }], this._injector
+        );
+        this._portal = new ComponentPortal(CombinationPickerBody, this._vc, injector);
+      }
+      else
+        this._reposition();
+      const componentRef = this._overlayRef.attach(this._portal);
+      this._attach(componentRef.instance);
+      this._opened = true;
+    }
+  }
+  private _attach(body: CombinationPickerBody) {
+    body.modeChange.
+      subscribe(() => setTimeout(() => this._reposition(), 0));
+    body.selectionChange.
+      subscribe(e => {
+        const { value, description } = e;
+        this.value = value;
+        this.description = description;
+        this.descriptionChange.emit(description);
+        this._onChange(this.value);
+        this.close();
+        this.optionSelected.emit(e);
+      });
+  }
+  private _reposition() {
+    const el = this._getConnectedOverlayOrigin();
+    this._overlayRef.updateSize({ minWidth: `${el.nativeElement.getBoundingClientRect().width}px` });
+  }
+  private _createOverlayRef(): OverlayRef {
+    const el = this._getConnectedOverlayOrigin();
+    const overlayRef = this._overlay.create({
+      positionStrategy: this._overlay.position().flexibleConnectedTo(el).
+        withViewportMargin(8).
+        withFlexibleDimensions().
+        withPositions([{ originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top' },
+        { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom' }]),
+      hasBackdrop: true,
+      direction: this._dir.value,
+      backdropClass: 'cdk-overlay-transparent-backdrop',
+      minWidth: `${el.nativeElement.getBoundingClientRect().width}px`,
+      panelClass: 'home-panel'
+    });
+    merge(overlayRef.backdropClick(), overlayRef.keydownEvents().
+      pipe(filter(e => e.keyCode === ESCAPE || (e.keyCode === UP_ARROW && e.altKey)),
+        tap(e => e.stopPropagation()))).
+      subscribe(() => this.close());
+    return overlayRef;
+  }
+  private _getConnectedOverlayOrigin(): ElementRef {
+    return this._formField ? this._formField.getConnectedOverlayOrigin() : this._elementRef;
+  }
+  close() {
+    if (this._overlayRef) this._overlayRef.detach();
+    else this._dialogRef.close();
+    this._opened = false;
+  }
+  ngOnDestroy(): void {
+    this._destroy.next();
+    this._destroy.complete();
+    this._fm.stopMonitoring(this._elementRef.nativeElement);
+    this.optionSelected.complete();
+    this.descriptionChange.complete();
+    this.stateChanges.complete();
+  }
+}

package/src/lib/core/controls/combination-pool.html

@@ -0,0 +1,10 @@
+<form [formGroup]="form">
+  <mat-form-field *ngFor="let a of _axes" [appearance]="appearance">
+    <mat-label>{{a.title}}</mat-label>
+    <mat-select [formControlName]="a.name">
+      <mat-option *ngIf="form.controls[a.name].value">{{'Dashes'|translate:('Clear'|translate)}}</mat-option>
+      <mat-option *ngFor="let key of _keys[a.dataType]" [value]="key">{{_values[a.dataType][key]}}</mat-option>
+    </mat-select>
+    <mat-hint>{{form.controls[a.name].value}}</mat-hint>
+  </mat-form-field>
+</form>

package/src/lib/core/controls/combination-pool.scss

@@ -0,0 +1,35 @@
+:host {
+  -ms-flex: 1 1 auto;
+  -webkit-flex: 1 1 auto;
+  flex: 1 1 auto;
+}
+
+form {
+  flex-flow: row wrap;
+  box-sizing: border-box;
+  display: flex;
+  padding: 0 !important;
+
+  > * {
+    flex: 1 1 auto;
+    box-sizing: border-box;
+    width: 50%;
+    padding: 0px 5px 0px 0px;
+  }
+}
+
+[dir=rtl] form {
+  > * {
+    padding: 0px 0px 5px 0px;
+  }
+}
+
+@media(max-width: 599px) {
+  form {
+    flex-flow: column;
+
+    > * {
+      width: unset;
+    }
+  }
+}

package/src/lib/core/controls/combination-pool.ts

@@ -0,0 +1,96 @@
+import { Component, Input, OnInit, Output, EventEmitter, OnDestroy } from "@angular/core";
+import { debounceTime, takeUntil, tap } from "rxjs/operators";
+import { FormBuilder, Validators, FormGroup } from "@angular/forms";
+import { SessionService } from "../session.service";
+import { CubeService } from "../../cube/cube.service";
+import { CubeAxis, Cube } from "../models";
+import { Subject, Observable } from "rxjs";
+import { MatFormFieldAppearance } from "@angular/material/form-field";
+@Component({
+  selector: 'bizdoc-combination-pool',
+  templateUrl: 'combination-pool.html',
+  styleUrls: ['combination-pool.scss']
+})
+export class CombinationPool implements OnInit, OnDestroy {
+  @Input('formGroup')
+  form!: FormGroup;
+  @Input()
+  appearance?: MatFormFieldAppearance;
+  @Input()
+  cube: string;
+  @Input()
+  model: { [axis: string]: (string | number) } = {};
+  @Input()
+  source: 'constraints' | 'combinations' = 'combinations';
+  @Output()
+  readonly modelChange = new EventEmitter<{ [axis: string]: (string | number) }>();
+  _axes: CubeAxis[] = [];
+  _cube: Cube;
+  working = true;
+  readonly _keys: { [type: string]: string[] } = {};
+  readonly _values: { [type: string]: { [key: string]: any } } = {};
+  private readonly _destroy = new Subject<void>();
+  constructor(private _service: CubeService,
+    private _fb: FormBuilder,
+    private _session: SessionService) { }
+  ngOnInit(): void {
+    this._cube = this.cube ? this._session.profile.cubes.find(c => c.name === this.cube) : this._session.profile.cubes[0];
+    this._axes = this._cube.axes.filter(a => a.combination && !a.hidden);
+    this._axes.forEach(a => {
+      const control = this.form.controls[a.name];
+      if (!control)
+        this.form.addControl(a.name, this._fb.control(null, Validators.required));
+      this._keys[a.dataType] = [];
+    });
+    this.form.valueChanges.pipe(debounceTime(250), takeUntil(this._destroy)).subscribe(v => {
+      let change = false;
+      this._axes.forEach(a => {
+        if (v[a.name] !== this.model[a.name]) {
+          this.model[a.name] = v[a.name];
+          change = true;
+        }
+      });
+      change && this._populate().
+        then(() =>
+          this.modelChange.next(this.model));
+    });
+    this._populate();
+  }
+  private _populate() {
+    this.working = true;
+    const values = {};
+    this._axes.forEach(a => {
+      const val = this.model[a.name];
+      if (val) values[a.name] = val;
+    });
+    return this._service.constraints(this._cube.name, values, { source: this.source }).toPromise().then(r => {
+      Object.keys(r).forEach(t => {
+        this._values[t] = r[t];
+        const keys = this._keys[t] = Object.keys(r[t]);
+        const axis = this._axes.find(a => a.dataType === t), control = this.form.controls[axis.name];
+        if (keys.length < 2) {
+          if (keys.length === 1)
+            control.patchValue(this.model[axis.name] = keys[0], { emitEvent: false });
+          control.disable({ emitEvent: false });
+        }
+        else if (control.disabled) control.enable({ emitEvent: false });
+      });
+      Object.assign(this._values, r);
+      this.working = false;
+    });
+  }
+  clear(axis: string) {
+    const control = this.form.controls[axis];
+    control.patchValue(null);
+  }
+  clearAll() {
+    const values = {};
+    this._axes.forEach(a => {
+      values[a.name] = null;
+    });
+    this.form.patchValue(values);
+  }
+  ngOnDestroy(): void {
+    this._destroy.next();
+  }
+}