@bizdoc/core 1.14.5 → 1.14.9

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: Event) {
+    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,92 @@
+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 => {
+      let control = this.form.controls[a.name];
+      if (!control) {
+        control = this._fb.control(null, Validators.required);
+        this.form.addControl(a.name, control);
+      }
+      this._keys[a.dataType] = [];
+      control.valueChanges.pipe(debounceTime(250), takeUntil(this._destroy)).subscribe(v => {
+        this.model[a.name] = v;
+        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();
+  }
+}

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

@@ -0,0 +1,50 @@
+<button mat-button *ngIf="!items.length; else preview" (click)="open()">
+  <mat-icon class="filled">{{icon}}</mat-icon>
+  <span class="mat-h3">{{placeholder}}</span>
+</button>
+<input type="file" #input
+       [accept]=accept [multiple]=multiple (change)='_change($event)' style="display: none" />
+<ng-template #preview>
+  <div *ngFor='let a of items' class="attachment-item"
+       [class.deleted]="a.deleted" [class.failed]="a.failed"
+       [progressIndicator]="a.progress">
+    <div class="file-preview">
+      <img *ngIf="a.isImage" [src]="a.url" (click)="apreview(a)" height="80">
+      <button mat-icon-button *ngIf="a.hasPreview && !a.isImage" [bizdocTooltip]="'Preview'|translate" (click)="apreview(a)" [ngSwitch]="a.icon !== undefined">
+        <mat-icon *ngSwitchCase="true" [svgIcon]="a.icon" [inline]="false"></mat-icon>
+        <mat-icon *ngSwitchDefault class="mat-icon-rtl-mirror">find_in_page</mat-icon>
+      </button>
+      <mat-icon *ngIf="!a.hasPreview && a.icon" [svgIcon]="a.icon" [inline]="false"></mat-icon>
+    </div>
+    <div class="file-overlay row">
+      <span class="filename">{{a.fileName}}</span>
+      <span class="divider"></span>
+      <button mat-icon-button class="options" [matMenuTriggerFor]="menu" [bizdocTooltip]="'Options' | translate">
+        <mat-icon>more_vert</mat-icon>
+      </button>
+    </div>
+    <mat-menu #menu>
+      <ng-container *ngIf="!a.failed">
+        <ng-container *ngIf="canEdit(a) && !a.failed">
+          <ng-container *ngIf="!a.checkedOut">
+            <button mat-menu-item (click)="checkOut(a)">{{"CheckOut" | translate}}</button>
+            <button mat-menu-item *ngIf="multiple" (click)="open()">{{"Add" | translate}}</button>
+          </ng-container>
+          <button mat-menu-item (click)="checkIn(a)" *ngIf="a.checkedOut">{{"CheckIn" | translate}}</button>
+        </ng-container>
+        <mat-divider></mat-divider>
+        <button mat-menu-item (click)="download(a)">{{"Download" | translate}}</button>
+        <button mat-menu-item *ngIf="a.hasPreview" (click)="apreview(a)"><mat-icon>landscape</mat-icon> {{"Preview" | translate}}</button>
+        <ng-container *ngIf="hasVersions(a)">
+          <mat-divider></mat-divider>
+          <button mat-menu-item *ngFor="let v of getVersions(a)" (click)="previewOrDownload(v)">{{v.time |  amCalendar}}</button>
+        </ng-container>
+        <ng-container *ngIf="canEdit(a)">
+          <mat-divider></mat-divider>
+          <button mat-menu-item (click)="discard(a)">{{"Discard" | translate}}</button>
+        </ng-container>
+      </ng-container>
+      <button mat-menu-item (click)="cancel(a)" *ngIf="a.failed">{{"Cancel" | translate}}</button>
+    </mat-menu>
+  </div>
+</ng-template>

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

@@ -0,0 +1,41 @@
+:host {
+  display: flex
+}
+
+.attachment-item {
+  height: 80px;
+  position: relative;
+  display: inline-flex;
+
+  &.deleted {
+  }
+
+  &.failed {
+  }
+
+  img {
+    cursor: zoom-in;
+  }
+
+  .file-preview {
+    /*position: absolute;*/
+  }
+
+  .file-overlay {
+    position: relative;
+    height: inherit;
+
+    .filename {
+      font-size: x-small;
+      cursor: pointer;
+      background: rgb(255 255 255 / 40%);
+      align-self: flex-end;
+    }
+
+
+    &:hover .filename {
+      background: white;
+      opacity: .5
+    }
+  }
+}