@bizdoc/core 1.14.9 → 1.14.12

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

@@ -1,218 +0,0 @@
-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

@@ -1,34 +0,0 @@
-<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

@@ -1,40 +0,0 @@
-.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

@@ -1,194 +0,0 @@
-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

@@ -1,6 +0,0 @@
-<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

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