@bizdoc/core 1.13.8 → 1.13.12

package/src/lib/admin/form/workflow/workflow.component.scss

@@ -0,0 +1,52 @@
+:host {
+  display: flex;
+  -ms-flex-direction: column;
+  -webkit-flex-direction: column;
+  flex-direction: column;
+  flex-grow: 1;
+  height: 100%;
+}
+
+.container {
+  -webkit-flex-grow: 1;
+  flex-grow: 1;
+  overflow-y: auto
+}
+
+#diagram {
+  -webkit-flex-grow: 1;
+  flex-grow: 1;
+}
+
+#symbolpalette {
+  width: 210px;
+}
+
+::ng-deep .e-rtl {
+  direction: ltr;
+}
+
+::ng-deep .mat-toolbar .mat-button-toggle {
+  background: transparent !important;
+}
+
+::ng-deep .e-diagram-userhandle-circle {
+  /*cursor: pointer*/
+}
+
+.e-menu-icon {
+  font-family: 'diagram-icons' !important;
+  speak: none;
+  font-size: 18px;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+::ng-deep .icon-menu-panel {
+  min-width: 0;
+}

package/src/lib/admin/form/workflow/workflow.component.ts

@@ -0,0 +1,400 @@
+import { Component, ViewChild, OnDestroy, HostListener } from '@angular/core';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+import {
+  SymbolPaletteComponent, DiagramConstraints, UserHandleModel, SelectorConstraints, ToolBase, MouseEventArgs, ConnectorModel, ConnectorDrawingTool, TextModel, PointPortModel, DiagramComponent, NodeConstraints, ScrollSettingsModel,
+  Diagram, NodeModel, UndoRedo, SymbolInfo, IDragEnterEventArgs, SnapSettingsModel, MarginModel, Node, PaletteModel, Segments, DiagramTools, ConnectorConstraints, SelectorModel, RulerSettingsModel, AlignmentOptions, TextStyleModel
+} from '@syncfusion/ej2-angular-diagrams';
+import { Form } from '../../../core/models';
+import { SessionService } from '../../../core/session.service';
+import { FormService } from '../form.service';
+import { PromptService } from '../../../core/prompt.service';
+import { TranslateService } from '../../../core/translate.service';
+import { PaneRef } from '../../../core/slots/pane-ref';
+import { PanesRouter } from '../../../core/slots/router.service';
+import { WorkflowNodeComponent } from './node.component';
+import { AdminComponent } from '../../admin-dismiss.service';
+import { OpenPolicy } from '../../../core/configuration';
+
+Diagram.Inject(UndoRedo);
+
+function getPorts(): PointPortModel[] {
+  const ports: PointPortModel[] = [
+    { id: 'port1', shape: 'Circle', offset: { x: 0, y: 0.5 } },
+    { id: 'port2', shape: 'Circle', offset: { x: 0.5, y: 1 } },
+    { id: 'port3', shape: 'Circle', offset: { x: 1, y: 0.5 } },
+    { id: 'port4', shape: 'Circle', offset: { x: 0.5, y: 0 } }
+  ];
+  return ports;
+}
+
+function showPaletteIcon(): void {
+  const paletteSpace: HTMLElement = document.getElementById('palette-space');
+  const isMobile = window.matchMedia('(max-width:550px)').matches;
+  if (isMobile) {
+    if (!paletteSpace.classList.contains('sb-mobile-palette-open')) {
+      paletteSpace.classList.add('sb-mobile-palette-open');
+    } else {
+      paletteSpace.classList.remove('sb-mobile-palette-open');
+    }
+  }
+}
+
+function paletteIconClick() {
+  const isMobile = window.matchMedia('(max-width:550px)').matches;
+  if (isMobile) {
+    const paletteIcon = document.getElementById('palette-icon');
+    if (paletteIcon) {
+      paletteIcon.addEventListener('click', showPaletteIcon, false);
+    }
+  }
+}
+
+//Defines the tool
+class DrawTool extends ConnectorDrawingTool {
+  public mouseMove(args: MouseEventArgs): boolean {
+    if (this.diagram.selectedItems.nodes.length) {
+      this.diagram.drawingObject = {
+        type: this.segments || 'Bezier',
+        sourceID: this.diagram.selectedItems.nodes[0].id
+      };
+      this.inAction = true;
+    }
+    const ok = super.mouseMove(args);
+    return ok;
+  }
+  constructor(private diagram: Diagram, private segments: Segments) {
+    super(diagram.commandHandler, 'ConnectorSourceEnd', null);
+  }
+}
+const LINK_PATH = 'M346.7,714.6l368.1-368.1c17.9-17.9,17.9-47.1,0-64.9c-17.9-17.9-47.1-17.9-64.9,0l-368,368c-17.9,17.9-17.9,47.1,0,64.9C299.6,732.5,328.9,732.5,346.7,714.6z M468.2,651c6.4,9,7.6,18.5,7.6,23.8c0,6.3-1.5,18.6-11.8,28.9L271,896.5c-10.3,10.3-22.5,11.8-28.9,11.8c-6.3,0-18.6-1.5-28.9-11.8L103.5,786.8c-10.3-10.3-11.8-22.5-11.8-28.9c0-6.4,1.5-18.6,11.8-28.9l192.9-192.9c10.3-10.3,22.5-11.8,28.9-11.8c4.5,0,11.8,0.8,19.3,4.8l58.6-58.6c-48-39.6-119.6-36.9-164.5,7.9L45.7,671.3c-47.7,47.7-47.7,125.5,0,173.2l109.7,109.7c47.7,47.7,125.5,47.7,173.2,0l192.9-192.9c46-46,47.6-120.4,4.6-168.4L468.2,651z M954.2,155.5L844.5,45.8C796.9-1.9,719-1.9,671.3,45.8L478.4,238.7c-44.8,44.8-47.5,116.5-7.9,164.5l58.6-58.6c-4-7.6-4.8-14.9-4.8-19.3c0-6.3,1.5-18.6,11.8-28.9l192.9-192.9c10.3-10.3,22.5-11.8,28.9-11.8c6.3,0,18.6,1.5,28.9,11.8l109.7,109.7c10.3,10.3,11.8,22.5,11.8,28.9c0,6.3-1.5,18.6-11.8,28.9L703.7,464c-10.3,10.3-22.5,11.8-28.9,11.8c-5.3,0-14.8-1.1-23.8-7.6l-58,58c48,43,122.3,41.5,168.4-4.6l192.9-192.9C1001.9,281.1,1001.9,203.1,954.2,155.5z';
+
+@Component({
+  selector: 'bizdoc-workflow',
+  templateUrl: './workflow.component.html',
+  styleUrls: ['./workflow.component.scss'],
+  host: {
+    class: 'pane'
+  }
+})
+/** workflow component*/
+export class WorkflowComponent implements OnDestroy, AdminComponent {
+  @ViewChild(SymbolPaletteComponent) symbolPalette: SymbolPaletteComponent;
+  @ViewChild('diagram') diagram: DiagramComponent;
+  tools = true;
+  connectorType: Segments = 'Bezier';
+  alignment: AlignmentOptions = 'Center';
+  fontSize = 12;
+  public getCustomTool = this.getTool.bind(this);
+  public getTool(action: string): ToolBase {
+    let tool: ToolBase = null;
+    if (action === 'connect')
+      tool = new DrawTool(this.diagram, this.connectorType);
+    return tool;
+  }
+  saving = false;
+  element?: any;
+  dirty = false;
+  params: {};
+  palettes: PaletteModel[] = [];
+  diagramConstraints: DiagramConstraints = DiagramConstraints.Default | DiagramConstraints.Bridging | DiagramConstraints.UserInteraction | DiagramConstraints.Zoom;
+  diagramTool: DiagramTools = DiagramTools.Default;
+  //Defines the user handle collection for nodes in diagram
+  private readonly _userHandles: UserHandleModel[] = [
+    {
+      name: 'connect',
+      pathData: LINK_PATH,
+      visible: true,
+      offset: 0,
+      side: 'Right',
+      displacement: 20,
+      margin: { top: 0, bottom: 0, left: 0, right: 0 }
+    }
+  ];
+  //SymbolPalette Properties
+  readonly symbolMargin: MarginModel = { left: 10, right: 10, top: 10, bottom: 10 };
+  readonly snapSettings: SnapSettingsModel = {
+  };
+  readonly selectedItems: SelectorModel = {
+  };
+  readonly scrollSettings: ScrollSettingsModel = {
+    minZoom: .5,
+    maxZoom: 2.5
+  };
+  private _rulerColor = this._session.getAccent(100);
+  readonly rulerSettings: RulerSettingsModel = {
+    horizontalRuler: { markerColor: this._rulerColor },
+    verticalRuler: { markerColor: this._rulerColor }
+  };
+  private _form: Form;
+  private readonly _destroy = new Subject<void>();
+  /** workflow ctor */
+  constructor(private ps: PromptService,
+    private _service: FormService,
+    private _pane: PaneRef<WorkflowComponent>,
+    private _router: PanesRouter,
+    private _session: SessionService,
+    private _translate: TranslateService) {
+    this._palettes();
+  }
+  public diagramCreate(): void {
+    paletteIconClick();
+    this._pane.paramsChange.pipe(takeUntil(this._destroy)).subscribe(p => {
+      const id = p['id'];
+      this._form = this._session.profile.forms.find(f => f.name === id);
+      this._pane.title = this._form.title;
+      this.params = { id: this._form.name };
+    });
+    this._pane.dataChange.pipe(takeUntil(this._destroy)).subscribe(d => {
+      Object.assign(this._form, d.form);
+      const flow = this._form.workflow;
+      this.diagram.nodes = flow.nodes;
+      this.diagram.connectors = flow.connectors;
+      this.diagram.dataBind();
+      this.diagram.add(this._versionNode(flow.version));
+      this.diagram.fitToPage();
+      this.dirty = false;
+    });
+    this._pane.resize.pipe(takeUntil(this._destroy)).subscribe(() =>
+      this.diagram.refresh());
+  }
+  private _palettes() {
+    this._session.profile.nodes.forEach(n => {
+      const node: NodeModel = {
+        id: n.name,
+        shape: n.shape,
+        addInfo: {
+          nodeType: n.name,
+          title: n.title
+        }
+      };
+      (node as any).node = n.name;
+      let palette = this.palettes.find(p => p.title === (n.palette || ''));
+      if (!palette) {
+        palette = { id: `_${n.palette}`, expanded: true, title: n.palette || '', symbols: [] };
+        this.palettes.push(palette);
+      }
+      palette.symbols.push(node);
+    });
+    //this.palettes.push({ id: 'design', title: this._translation.get('Design'), symbols: [{ id: 'text', shape: { type: 'Text', textContent: 'T' }, addInfo: { title: this._translation.get('Text') } }] });
+    /*this.palettes.push(swimlane );*/
+  }
+
+  private _versionNode(version: number): NodeModel {
+    return {
+      id: 'version',
+      shape: {
+        type: 'Text',
+        content: this._translate.get('DiagramVersion', version || 0)
+      },
+      offsetY: 5,
+      offsetX: 5,
+      style: {
+        fontSize: 50,
+        color: this._session.theme.dark ? 'white' : 'black',
+        opacity: .1
+      } as TextStyleModel,
+      constraints: NodeConstraints.ReadOnly,
+      zIndex: -1
+    } as TextModel;
+  }
+  nodeDefaults = (): NodeModel => {
+    const obj: NodeModel = {
+      style: {
+        fill: 'transparent',
+        strokeColor: this._session.theme.dark ? 'white' : 'black',
+        strokeWidth: 1
+      },
+      annotations: [{
+        style: {
+          color: this._session.theme.dark ? 'white' : 'black',
+          fill: 'transparent',
+          opacity: .8
+        }
+      }]
+    };
+    if (obj.width === undefined) {
+      obj.width = 145;
+    } else {
+      const ratio: number = 100 / obj.width;
+      obj.width = 100;
+      obj.height *= ratio;
+    }
+    obj.constraints = NodeConstraints.Default | NodeConstraints.AspectRatio;
+    obj.ports = getPorts();
+    return obj;
+  }
+  public connDefaults = (obj: ConnectorModel): void => {
+    obj.constraints = ConnectorConstraints.Default | ConnectorConstraints.Bridging | ConnectorConstraints.DragSegmentThumb;
+    obj.style.strokeColor = this._session.theme.dark ? 'white' : 'black';
+  }
+  public getSymbolInfo(symbol: NodeModel): SymbolInfo {
+    return {
+      fit: true,
+      tooltip: (symbol.addInfo as any).title,
+      description: { text: (symbol.addInfo as any).title, overflow: 'Wrap', wrap: 'WrapWithOverflow' }
+    };
+  }
+  public getSymbolDefaults(symbol: NodeModel): void {
+    symbol.width = symbol.height = 40;
+    symbol.constraints = NodeConstraints.Default | NodeConstraints.AspectRatio;
+  }
+  pan() {
+    this.diagramConstraints = this.diagramConstraints | DiagramConstraints.Pan;
+    this.diagramTool = DiagramTools.ZoomPan;
+  }
+  cursor() {
+    this.diagramConstraints = this.diagramConstraints & ~DiagramConstraints.Pan;
+    this.diagramTool = DiagramTools.Default;
+  }
+  selectionChange() {
+    const { nodes, connectors } = this.diagram.selectedItems;
+    if (connectors.length || nodes.length) {
+      if (nodes.length === 1 && nodes[0].addInfo) {
+        this.diagram.selectedItems.constraints = SelectorConstraints.All | SelectorConstraints.UserHandle;
+        this.diagram.selectedItems.userHandles = this._userHandles;
+      }
+      else this.diagram.selectedItems.constraints = SelectorConstraints.All ^ SelectorConstraints.UserHandle;
+
+      if (connectors.length) {
+        const connector = connectors[0];
+        connectors.forEach(c => { if (!c.addInfo) c.addInfo = {} });
+        const type = connector.type;
+        this.connectorType = connectors.length === 1 || connectors.every(c => c.type === type) ? type : null;
+        if (connector.annotations.length)
+          this.fontSize = connector.annotations[0].style.fontSize;
+        this.connectorType = connectors.length === 1 || connectors.every(c => c.type === type) ? type : null;
+      }
+      if (nodes.length) {
+        const node = nodes[0],
+          addInfo = node.addInfo as any;
+        if (addInfo && addInfo.nodeType) {
+          if (node.annotations.length)
+            this.fontSize = node.annotations[0].style.fontSize;
+        }
+      }
+      this._router.collapse()
+      this._router.navigate(WorkflowNodeComponent, {
+        state: {
+          nodes, connectors
+        },
+        policy: OpenPolicy.Tab,
+        expandable: false,
+        group: ''
+      }).then(p => {
+        (p.instance as WorkflowNodeComponent).change.
+          pipe(takeUntil(this._destroy)).subscribe(() => {
+            this.dirty = true;
+            this.diagram.dataBind();
+          });
+      });
+    }
+    else
+      this._router.collapse();
+  }
+  align(value: AlignmentOptions) {
+    function align(n: NodeModel | ConnectorModel) {
+      n.annotations.length && Object.assign(n.annotations[0], {
+        offset: {
+          x: value === 'Right' ? 1 : value === 'Left' ? 0 : .5,
+          y: value === 'Top' ? 0 : value === 'Bottom' ? 1 : .5
+        },
+        verticalAlignment: value === 'Top' ? 'Bottom' : value === 'Bottom' ? 'Top' : 'Center',
+        horizontalAlignment: value === 'Right' ? 'Left' : value === 'Left' ? 'Right' : 'Center'
+      });
+    }
+    this.diagram.selectedItems.nodes.forEach(align);
+    this.diagram.selectedItems.connectors.forEach(align);
+    this.alignment = value;
+    this.dirty = true;
+  }
+  public dragEnter(args: IDragEnterEventArgs): void {
+    const obj: NodeModel = args.element as NodeModel;
+    if (obj instanceof Node) {
+      const { width, height } = obj;
+      obj.width = 100;
+      obj.height *= 100 / width;
+      obj.offsetX += (obj.width - width) / 2;
+      obj.offsetY += (obj.height - height) / 2;
+      obj.style = { fill: 'white', strokeColor: 'black' };
+    }
+  }
+  propertyChange(e) {
+    if (e.cause !== 2) this.dirty = true;
+  }
+  change() {
+    this.dirty = true;
+  }
+  addText() {
+    this.diagram.drawingObject = {
+      shape: {
+        type: 'Text',
+      },
+      constraints: NodeConstraints.Default & ~NodeConstraints.InConnect & ~NodeConstraints.OutConnect
+    } as NodeModel;
+    this.diagramTool = DiagramTools.DrawOnce;
+  }
+  /**
+   * Ctrl-s save
+   * @param event
+   */
+  @HostListener('document:keydown', ['$event'])
+  handleKeyboardEvent(event: KeyboardEvent) {
+    if (this.dirty && event.ctrlKey && (event.which === 83 || event.which === 115)) {
+      this.save();
+      event.preventDefault();
+    }
+  }
+  bgChange(val: string) {
+    this.diagram.selectedItems.nodes.forEach(n => n.style.fill = val);
+    this.dirty = true;
+  }
+  colorChange(val: string) {
+    this.diagram.selectedItems.nodes.forEach(n => n.annotations.forEach(a => a.style.color = val));
+    this.diagram.selectedItems.connectors.forEach(c => c.annotations.forEach(a => a.style.color = val));
+    this.dirty = true;
+  }
+  connectorTypeChange(type: Segments) {
+    this.diagram.selectedItems.connectors.forEach(c => c.type = type);
+    this.connectorType = type;
+    this.dirty = true;
+  }
+  sizeChange(val: string) {
+    this.diagram.selectedItems.nodes.forEach(n => n.annotations.forEach(a => a.style.fontSize = parseInt(val)));
+    this.diagram.dataBind();
+  }
+  strokeChange(val: string) {
+    this.diagram.selectedItems.connectors.forEach(c => {
+      c.style.strokeColor = val;
+      if (c.annotations) c.annotations[0].style.color = val;
+    });
+    this.diagram.selectedItems.nodes.forEach(n => n.style.strokeColor = val);
+    this.dirty = true;
+  }
+  save(): Promise<any> {
+    this.diagram.serializationSettings = { };
+    const obj = JSON.parse(this.diagram.saveDiagram());
+    this._form.workflow.connectors = obj.connectors;
+    this._form.workflow.nodes = obj.nodes.filter(n => n.id !== 'version');
+    this.saving = true;
+    return this._service.save(this._form).toPromise().then(v => {
+      this.ps.toast('ChangesSaved');
+      if (this._form.workflow.version < v) {
+        this.ps.toast('DiagramVersion', v);
+        const node = this.diagram.getNodeObject('version');
+        (node.shape as TextModel).content = this._translate.get('DiagramVersion', v);
+        this.diagram.dataBind();
+      }
+      this._form.workflow.version = v;
+      this.dirty = false;
+      this.saving = false;
+    }, () => {
+      this.ps.error();
+      this.saving = false;
+    });
+  }
+  ngOnDestroy(): void {
+    this._destroy.next();
+    this._destroy.complete();
+  }
+}

package/src/lib/admin/indices/manage-cube-index.component.html

@@ -0,0 +1,35 @@
+<mat-toolbar>
+  <button mat-button (click)="save()" [disabled]="!dirty">{{'SaveChanges'|translate}}</button>
+  <span class="divider"></span>
+  <button mat-icon-button (click)="add()"><mat-icon>add</mat-icon></button>
+</mat-toolbar>
+<mat-progress-bar [mode]="loading" [style.visibility]="loading ? 'visible':'hidden'"></mat-progress-bar>
+<table mat-table [dataSource]="dataSource">
+  <ng-container *ngFor="let a of axes; let i = index" [matColumnDef]="a.name">
+    <th mat-header-cell *matHeaderCellDef>{{a.title}}</th>
+    <td mat-cell *matCellDef="let element"> {{element.axes[names.indexOf(a.name)]| typeValue: a.dataType | async}} </td>
+  </ng-container>
+  <ng-container matColumnDef="value">
+    <th mat-header-cell *matHeaderCellDef>{{'Value'|translate}}</th>
+    <td mat-cell *matCellDef="let element"> {{element.value | currency : CURRENCY_CODE }} </td>
+  </ng-container>
+  <ng-container matColumnDef="options">
+    <th mat-header-cell *matHeaderCellDef></th>
+    <td mat-cell *matCellDef="let element">
+      <button mat-icon-button><mat-icon>more_horiz</mat-icon></button>
+      <button mat-icon-button (click)="remove(element, $event)"><mat-icon>delete</mat-icon></button>
+    </td>
+  </ng-container>
+  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+  <tr mat-row *matRowDef="let element; columns: displayedColumns;" (click)="edit(element)"></tr>
+</table>
+<ng-template #editTmpl>
+  <form [formGroup]="form">
+    <mat-form-field *ngFor="let a of axes">
+      <bizdoc-select [placeholder]="a.title" [type]="a.dataType" [formControlName]="a.name" required></bizdoc-select>
+    </mat-form-field>
+    <mat-form-field>
+      <input matInput type="number" formControlName="value" autocomplete="off" required [placeholder]="'Value'|translate" />
+    </mat-form-field>
+  </form>
+</ng-template>

package/src/lib/admin/indices/manage-cube-index.component.scss

@@ -0,0 +1,16 @@
+form {
+  padding: 8px 4px 8px 8px;
+  flex-flow: row wrap;
+  box-sizing: border-box;
+  display: flex;
+
+  > * {
+    flex: 1 1 auto;
+    box-sizing: border-box;
+    width: 50%;
+    padding: 0px 5px 0px 0px;
+  }
+}
+table {
+  width: 100%;
+}

package/src/lib/admin/indices/manage-cube-index.component.ts

@@ -0,0 +1,155 @@
+import { Component, OnInit, ViewChild, TemplateRef, ViewContainerRef, OnDestroy, Inject } from "@angular/core";
+import { MatTableDataSource } from "@angular/material/table";
+import { FormGroup, FormControl, Validators } from "@angular/forms";
+import { Overlay, OverlayRef } from "@angular/cdk/overlay";
+import { merge, Subject } from "rxjs";
+import { filter, takeUntil } from "rxjs/operators";
+import { TemplatePortal } from "@angular/cdk/portal";
+import { Directionality } from "@angular/cdk/bidi";
+import { UtilityComponent } from "../../core/base";
+import { BizDoc } from "../../core/decorators";
+import { UtilityRef } from "../utility-ref";
+import { SessionService } from "../../core/session.service";
+import { CubeAxis } from "../../core/models";
+import { ESCAPE } from "@angular/cdk/keycodes";
+import { PromptService } from "../../core/prompt.service";
+import { ProgressBarMode } from "@angular/material/progress-bar";
+
+@Component({
+  styleUrls: ['./manage-cube-index.component.scss'],
+  templateUrl: './manage-cube-index.component.html'
+})
+@BizDoc({ selector: 'manage-cube-index' })
+export
+  class ManageCubeIndexUtility implements UtilityComponent<any, any>, OnInit, OnDestroy {
+  readonly CURRENCY_CODE: string;
+  dirty = false;
+  axes: CubeAxis[];
+  dataSource: MatTableDataSource<Index>;
+  readonly names: string[];
+  readonly displayedColumns = ['value', 'options'];
+  readonly form: FormGroup = new FormGroup({
+    value: new FormControl(0, Validators.required)
+  });
+  @ViewChild('editTmpl', { static: true }) editTmpl: TemplateRef<any>;
+  loading: ProgressBarMode;
+  private _data: Index[];
+  private _row: Index;
+  private _oRef: OverlayRef;
+  private readonly _destroy = new Subject<void>();
+  constructor(private _dir: Directionality,
+    @Inject(UtilityRef) private _ref: UtilityRef<boolean, Index[], Index[], any, Options>,
+    session: SessionService, private _vc: ViewContainerRef,
+    private _sb: PromptService,
+    private _overlay: Overlay) {
+    const { cube: name, axes: names } = _ref.options;
+    const cube = name ? session.profile.cubes.find(c => c.name === name) : session.profile.cubes[0];
+    this.CURRENCY_CODE = cube.currencyCode;
+    this.axes = cube.axes.filter(a => names ? names.indexOf(a.name) > -1 : !a.hidden);
+    this.names = cube.axes.map(a => a.name);
+    this.axes.forEach((a, i) => {
+      this.displayedColumns.splice(i, 0, a.name);
+      const ctrl = new FormControl(null, Validators.required);
+      this.form.addControl(a.name, ctrl);
+    });
+    this.form.valueChanges.pipe(takeUntil(this._destroy)).subscribe(v => {
+      if (!this.form.valid) return;
+      const axes = [];
+      this.axes.forEach(a => axes[this.names.indexOf(a.name)] = this.form.value[a.name] || null);
+      if (this._row) {
+        if (axes.join() === this._row.axes.join())
+          this._row.value = v.value;
+        else {
+          const row = this._find(axes);
+          if (row) {
+            this._row = row;
+            this.form.controls['value'].setValue(this._row.value, { emitEvent: false });
+          }
+          else
+            this._row.axes = axes;
+        }
+      }
+      else if (v.value) {
+        this._row = { value: v.value, axes };
+        this._data.push(this._row);
+        this.dataSource.filter = '';
+      }
+      this.dirty = true;
+    });
+    const oRef = this._oRef = this._overlay.create({
+      positionStrategy: this._overlay.position().global().centerHorizontally().centerVertically(),
+      backdropClass: 'cdk-overlay-transparent-backdrop',
+      direction: this._dir.value,
+      hasBackdrop: true,
+      panelClass: 'home-panel'
+    });
+    merge(oRef.backdropClick(), oRef.keydownEvents().pipe(filter(k => k.keyCode === ESCAPE))).pipe(takeUntil(this._destroy)).subscribe(() => oRef.detach());
+  }
+  private _find(axes: string[]): Index {
+    const n = this.names.length;
+    return this._data.find(index => {
+      for (let i = 0; i < n; i++)
+        if (axes[i] && axes[i] !== index.axes[i]) return false;
+      return true;
+    });
+  }
+  add() {
+    this._row = null;
+    const values = { value: 0 };
+    this.axes.forEach(a => values[a.name] = null);
+    this.form.patchValue(values, { emitEvent: false });
+    const portal = new TemplatePortal(this.editTmpl, this._vc);
+    this._oRef.attach(portal);
+  }
+  edit(item: Index) {
+    this._row = item;
+    const values = { value: item.value };
+    this.axes.forEach(a => values[a.name] = item.axes[this.names.indexOf(a.name)]);
+    this.form.patchValue(values, { emitEvent: false });
+    const portal = new TemplatePortal(this.editTmpl, this._vc);
+    this._oRef.attach(portal);
+  }
+  remove(index: Index, evt: Event) {
+    this._data.remove(index);
+    this.dataSource.filter = '';
+    evt.stopPropagation();
+  }
+  private _filter(axes: string[]) {
+    const n = axes.length;
+    return this._data.filter(index => {
+      for (let i = 0; i < n; i++)
+        if (this.axes[i] && axes[i] !== index.axes[i]) return false;
+      return true;
+    });
+  }
+  ngOnInit(): void {
+    this.loading = 'query';
+    this._ref.populate().subscribe(m => {
+      this._data = m;
+      this.dataSource = new MatTableDataSource(m);
+      this.loading = null;
+    });
+  }
+  save() {
+    this.loading = 'indeterminate';
+    this._ref.execute(this._data).subscribe(() => {
+      this._sb.toast('ChangesSaved');
+      this.dirty = false;
+      this.loading = null;
+    });
+  }
+  ngOnDestroy(): void {
+    this._destroy.next();
+  }
+}
+interface Index {
+  id?: number;
+  axes: string[];
+  value: number;
+}
+
+interface Options {
+  cube?: string;
+  index?: string;
+  axes?: string[];
+}