@bizdoc/core 1.14.5 → 1.14.9

package/src/lib/core/controls/auto-complete.input.ts

@@ -0,0 +1,218 @@
+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 { MatAutocompleteSelectedEvent, MatAutocompleteTrigger } from '@angular/material/autocomplete';
+import { FocusMonitor } from '@angular/cdk/a11y';
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import { Subject, Observable } from 'rxjs';
+import { debounceTime, takeUntil, switchMap, filter } from 'rxjs/operators';
+import { SessionService } from '../session.service';
+import { DatasourceService } from '../datasource.service';
+import { Type, FieldInfo } from '../models';
+import { isObject, isString } from '../functions';
+@Component({
+  selector: 'bizdoc-autocomplete',
+  providers: [{ provide: MatFormFieldControl, useExisting: TypeAutocomplete }],
+  template: `<input matInput [matAutocomplete]="auto" [placeholder]="placeholder" [formControl]="_control" #input
+    (focus)="_onFocus()" (blur)="_onBlur()" [required]="required"/>
+    <mat-autocomplete #auto (optionSelected)="_optionSelected($event)" [displayWith]='displayFn'>
+      <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-autocomplete>
+    <button mat-icon-button matSuffix (click)="clear()" *ngIf="_control.value"><mat-icon>close</mat-icon></button>`,
+  host: {
+    class: 'row',
+    '[class.floating]': 'shouldLabelFloat',
+    '[attr.aria-describedby]': 'describedBy'
+  },
+})
+export
+  class TypeAutocomplete implements MatFormFieldControl<string>, DoCheck, ControlValueAccessor, OnDestroy, OnInit {
+  focus() {
+    this.inputElement.nativeElement.focus();
+  }
+  private static nextId = 0;
+  private _placeholder: string;
+  private _required = false;
+  private _disabled = false;
+  private _value?: string;
+  private _onChange: any;
+  private _onTouched: any;
+  readonly _control = new FormControl();
+  readonly stateChanges = new Subject<void>();
+  _items$: Observable<KeyValue[]>;
+  _column: FieldInfo;
+  private _configuration: Type;
+  @ViewChild('input', { static: true }) inputElement: ElementRef;
+  @ViewChild('input', { static: true, read: MatAutocompleteTrigger }) trigger: MatAutocompleteTrigger;
+  @HostBinding() readonly id = `type-auto-complete-${TypeAutocomplete.nextId++}`;
+  @Input('type') _type!: string;
+  private _textFormControl: FormControl;
+  @Input() get placeholder(): string {
+    return this._placeholder;
+  }
+  set placeholder(plh: string) {
+    this._placeholder = plh;
+    this.stateChanges.next();
+  }
+  @Input() text: string;
+  @Output() readonly textChange = new EventEmitter<string>();
+  @Output() readonly optionSelected = new EventEmitter<AutocompleteSelectedEvent>();
+  displayFn = (item: { value: any }) => {
+    if (!item)
+      return undefined;
+    if (!isObject(item.value))
+      return item.value;
+    else {
+      let name = Object.keys(item.value)[0];
+      return item.value[name];
+    }
+  }
+  _optionSelected(e: MatAutocompleteSelectedEvent) {
+    const { value, key } = e.option.value as KeyValue || {};
+    const text = this._column ? value[this._column.name] : value;
+    this._value = key;
+    this._textFormControl && this._textFormControl.setValue(text, { emitEvent: false });
+    this.textChange.emit(text);
+    this.optionSelected.emit({ value: key, text });
+    this._onChange && this._onChange(key);
+  }
+  focused = false;
+  get empty(): boolean { return !this._control.value || this._control.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(value: boolean) {
+    this._disabled = coerceBooleanProperty(value);
+    if (this._control.disabled !== this._disabled) {
+      if (this._disabled)
+        this._control.disable();
+      else
+        this._control.enable();
+    }
+    this.stateChanges.next();
+  }
+  errorState = false;
+  controlType?: string = 'bizdoc-type-auto-complete';
+  @HostBinding('attr.aria-describedby') describedBy = '';
+
+  setDescribedByIds(ids: string[]) {
+    this.describedBy = ids.join(' ');
+  }
+  onContainerClick(): void {
+    this.inputElement.nativeElement.focus();
+    this.trigger.openPanel();
+  }
+  clear() {
+    this._setValue(null, true);
+    this._onChange && this._onChange(null);
+  }
+  writeValue(obj: any): void {
+    this._setValue(obj, false);
+  }
+  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 {
+    return this._value;
+  }
+  set value(val: string) {
+    this._setValue(val, true);
+    this.stateChanges.next();
+  }
+  private _minimumChars = 1;
+  @Input() set minimumChars(val: number) { this._minimumChars = val; }
+  private _setValue(val: string, emitEvent: boolean) {
+    this._value = val;
+    //if (val)
+    //this.service.get(this.source, val).subscribe(v => {
+    //});
+    this._control.setValue(val ? { key: val, value: this.text || val } : val, { emitEvent });
+  }
+  ngDoCheck(): void {
+    if (this.ngControl) {
+      this.errorState = this.ngControl.invalid && this.ngControl.touched;
+      this.stateChanges.next();
+    }
+  }
+
+  _onFocus() {
+    this.focused = true;
+    this._onTouched && this._onTouched();
+  }
+  _onBlur() {
+    this.focused = false;
+  }
+  @Input() set textFormControlName(val: string) {
+    this._textFormControl = ((this.ngControl.control as FormControl).parent).controls[val] as FormControl;
+  }
+  @Input() set textFormControl(val: FormControl) {
+    this._textFormControl = val;
+  }
+  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.`;
+    this._column = this._configuration.columns ? this._configuration.columns.find(c => !c.key) : null;
+    this._items$ = this._control.valueChanges.pipe(
+      takeUntil(this._destroy),
+      debounceTime(250),
+      filter(v => isString(v) && v.length > this._minimumChars),
+      switchMap(v =>
+        this._service.all(this._type, v)));
+    this._control.statusChanges.pipe(takeUntil(this._destroy)).subscribe(() => {
+      this.errorState = this._control.errors != null;
+    });
+    const val = this.value;
+    if (val)
+      this._service.get(this._type, val).subscribe(v =>
+        this._control.setValue({ key: val, value: v || val }, { emitEvent: false }));
+  }
+  ngOnDestroy(): void {
+    this._destroy.next();
+    this._destroy.complete();
+    this._fm.stopMonitoring(this._elRef.nativeElement);
+    this.stateChanges.complete();
+    this.textChange.complete();
+    this.optionSelected.complete();
+  }
+}
+interface KeyValue { key: any, value: any }
+
+export interface AutocompleteSelectedEvent {
+  readonly text: string;
+  readonly value: any;
+}

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

@@ -0,0 +1,34 @@
+<div [ngSwitch]="mode" class="account-picker-popup" cdkTrapFocus>
+  <!--[@transformPanel]="enter"-->
+  <ng-container *ngSwitchCase="'filter'">
+    <mat-progress-bar mode="indeterminate" [style.visibility]="_working ? 'visible':'hidden'"></mat-progress-bar>
+    <!-- filter -->
+    <form [formGroup]="_form">
+      <mat-form-field *ngFor="let a of _axes; let i = index">
+        <mat-label>{{a.title}}</mat-label>
+        <mat-select [formControlName]="a.name">
+          <mat-option *ngIf="_keys[a.name].length>1">{{'All'|translate}}</mat-option>
+          <mat-option *ngFor="let key of _keys[a.name]" [value]="key">{{_values[a.dataType][key]}}</mat-option>
+        </mat-select>
+        <mat-hint>{{_form.controls[a.name].value}}</mat-hint>
+      </mat-form-field>
+    </form>
+    <div class="actions">
+      <button mat-icon-button (click)="_filter()" [disabled]="_working" [bizdocTooltip]="'Search'|translate" class="mat-icon-rtl-mirror" [tabIndex]="_axes.length">
+        <mat-icon>search</mat-icon>
+      </button>
+    </div>
+  </ng-container>
+  <!-- results -->
+  <ng-container *ngSwitchCase="'results'">
+    <div class="actions">
+      <button mat-icon-button (click)="_switchMode('filter')" [bizdocTooltip]="'Filter'|translate"><mat-icon>filter_list</mat-icon></button>
+    </div>
+    <mat-action-list>
+      <mat-list-item *ngFor="let codes of _combinations" (click)="_select(codes)">
+        <h3 matLine>{{_nameOf(codes)}}</h3>
+        <p matLine *ngIf="_explorable"><a (click)="_info(codes, $event)">{{_codeOf(codes)}}</a></p>
+      </mat-list-item>
+    </mat-action-list>
+  </ng-container>
+</div>

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

@@ -0,0 +1,40 @@
+.account-picker-popup {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+
+  form {
+    padding: 8px;
+    flex-flow: column wrap;
+    box-sizing: border-box;
+    display: flex;
+
+    > * {
+      flex: 1 1 100%;
+      box-sizing: border-box;
+      max-width: 50%;
+      padding: 0px 5px 5px 0px;
+    }
+  }
+
+  .actions {
+    display: flex;
+    flex-direction: row;
+    place-content: center flex-end;
+    align-items: center;
+    padding: 8px;
+  }
+
+  ::ng-deep .mat-list-base {
+    overflow: auto;
+
+    .mat-list-item .mat-line:nth-child(n+2) {
+      font-size: 14px;
+    }
+  }
+}
+@media screen and (min-width: 600px) {
+  .account-picker-popup form {
+    flex-flow: row wrap;
+  }
+}

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

@@ -0,0 +1,194 @@
+import { Component, OnDestroy, OnInit, InjectionToken, Optional, Inject, EventEmitter, ViewChildren, QueryList, ChangeDetectorRef } from "@angular/core";
+import { FormBuilder } from "@angular/forms";
+import { MatSelect } from "@angular/material/select";
+import { MAT_DIALOG_DATA } from "@angular/material/dialog";
+import { finalize } from "rxjs/operators";
+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 { SumSettings } from "../../cube/matrix/table.component";
+
+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;
+  /** cube view name */
+  view?: string;
+  defaults?: {
+    [axis: string]: (string | number);
+  };
+  indices?: string[] | string;
+  /** one or more axis */
+  filters?: string[] | string;
+  xAxis: string;
+  series: string;
+  sum?: SumSettings | SumSettings[],
+  /** */
+  aggregate?: string[] | string;
+  seriesTotalLabel?: string;
+  xAxisTotalLabel?: 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 !== undefined;
+    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[], evt: Event) {
+    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 [disableRipple]=true (click)="open($event)" matSuffix [disabled]="disabled" tabindex="-1" [class.mat-warn]="errorState"><mat-icon>arrow_drop_down</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;
+  }
+}