@bizdoc/core 1.14.8 → 1.14.9

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

@@ -0,0 +1,66 @@
+<mat-toolbar>
+  <button mat-icon-button (click)="tools = !tools" [bizdocTooltip]="'Collapse' | translate"><mat-icon>view_sidebar</mat-icon></button>
+  <button mat-button (click)="save()" color="primary" [disabled]="!dirty || saving">{{'SaveChanges' | translate}}</button>
+  <button mat-icon-button (click)="diagram.fitToPage()" [bizdocTooltip]="'FitToPage' | translate"><mat-icon>fullscreen_exit</mat-icon></button>
+  <button mat-icon-button (click)="diagram.undo()" [bizdocTooltip]="'Undo' | translate" [disabled]="!diagram.historyManager?.canUndo"><mat-icon>undo</mat-icon></button>
+  <button mat-icon-button (click)="diagram.redo()" [bizdocTooltip]="'Redo' | translate" [disabled]="!diagram.historyManager?.canRedo"><mat-icon>redo</mat-icon></button>
+  <span class="tools-divider"></span>
+  <button mat-icon-button (click)="diagram.copy()" [bizdocTooltip]="'Copy' | translate" [disabled]="diagram.selectedItems?.connectors.length === 0 && diagram.selectedItems?.nodes.length === 0"><mat-icon>copy</mat-icon></button>
+  <button mat-icon-button (click)="diagram.paste()" [bizdocTooltip]="'Paste' | translate"><mat-icon>paste</mat-icon></button>
+  <span class="tools-divider"></span>
+  <button mat-icon-button (click)="pan()" [bizdocTooltip]="'Pan' | translate"><span class="e-icons sf-icon-pan"></span></button>
+  <button mat-icon-button (click)="cursor()" [bizdocTooltip]="'Cursor' | translate"><span class="e-icons sf-icon-cursor"></span></button>
+  <span class="divider"></span>
+  <button mat-icon-button (click)="addText()" [bizdocTooltip]="'Text' | translate"><mat-icon>title</mat-icon></button>
+  <button mat-button [matMenuTriggerFor]="lineMenu" [disabled]="diagram.selectedItems?.connectors.length === 0" [bizdocTooltip]="'ConnectorMode'|translate">
+    <span class="e-menu-icon" [ngClass]="{'sf-icon-straight-line': connectorType === 'Straight',
+          'sf-icon-orthogonal-line': connectorType === 'Orthogonal',
+          'sf-icon-beizer-line': connectorType === 'Bezier'}"></span>
+    <mat-icon>arrow_drop_down</mat-icon>
+  </button>
+  <mat-menu #lineMenu panelClass="icon-menu-panel">
+    <button mat-menu-item (click)="connectorTypeChange('Straight')">
+      <span class="e-menu-icon sf-icon-straight-line"></span>
+    </button>
+    <button mat-menu-item (click)="connectorTypeChange('Orthogonal')">
+      <span class="e-menu-icon sf-icon-orthogonal-line"></span>
+    </button>
+    <button mat-menu-item (click)="connectorTypeChange('Bezier')">
+      <span class="e-menu-icon sf-icon-beizer-line"></span>
+    </button>
+  </mat-menu>
+  &nbsp;
+  <button mat-button [matMenuTriggerFor]="alignMenu" [disabled]="diagram.selectedItems?.nodes.length === 0 && diagram.selectedItems?.connectors.length === 0" [bizdocTooltip]="'Align'|translate">
+    <span class="e-icons" [ngClass]="{'sf-icon-top': alignment === 'Top',
+          'sf-icon-left': alignment === 'Left',
+          'sf-icon-center': alignment === 'Center',
+          'sf-icon-bottom': alignment === 'Bottom',
+          'sf-icon-right': alignment === 'Right'}"></span>
+    <mat-icon>arrow_drop_down</mat-icon>
+  </button>
+  <mat-menu #alignMenu panelClass="icon-menu-panel">
+    <button mat-menu-item (click)="align('Top')">
+      <span class="e-icons sf-icon-top"></span>
+    </button>
+    <button mat-menu-item (click)="align('Left')">
+      <span class="e-icons sf-icon-left"></span>
+    </button>
+    <button mat-menu-item (click)="align('Center')">
+      <span class="e-icons sf-icon-center"></span>
+    </button>
+    <button mat-menu-item (click)="align('Bottom')">
+      <span class="e-icons sf-icon-bottom"></span>
+    </button>
+    <button mat-menu-item (click)="align('Right')">
+      <span class="e-icons sf-icon-right"></span>
+    </button>
+  </mat-menu>
+</mat-toolbar>
+<div class="row container">
+  <div id="symbolpalette" [style.display]="tools?'':'none'">
+    <div dir="ltr" #symbolPaletteEl>
+    </div>
+  </div>
+  <div #diagramEl id="diagram" fxFlex dir="ltr">
+  </div>
+</div>

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

@@ -0,0 +1,57 @@
+: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;
+}
+.tools-divider:after {
+  content: '|';
+  opacity: .6;
+  margin: 0 2px;
+}

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

@@ -0,0 +1,438 @@
+import { Component, ViewChild, OnDestroy, HostListener, ElementRef, OnInit, AfterViewInit } from '@angular/core';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+import {
+  DiagramConstraints, UserHandleModel, SelectorConstraints, ToolBase, MouseEventArgs, ConnectorModel, ConnectorDrawingTool, TextModel, PointPortModel, NodeConstraints, ScrollSettingsModel,
+  Diagram, NodeModel, UndoRedo, SymbolInfo, IDragEnterEventArgs, SnapSettingsModel, MarginModel, Node, PaletteModel, Segments, DiagramTools, ConnectorConstraints, SelectorModel, RulerSettingsModel, AlignmentOptions, TextStyleModel, SymbolPalette, BpmnDiagrams, DataBinding,
+  ConnectorEditing, ConnectorBridging, Snapping
+} from '@syncfusion/ej2-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';
+import { ISelectionChangeEventArgs } from '@syncfusion/ej2-angular-diagrams';
+
+Diagram.Inject(UndoRedo, ConnectorBridging, ConnectorEditing, Snapping);
+SymbolPalette.Inject(BpmnDiagrams);
+
+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 OnInit, AfterViewInit, OnDestroy, AdminComponent {
+  symbolPalette: SymbolPalette;
+  diagram: Diagram;
+  @ViewChild('symbolPaletteEl', { static: true }) symbolPaletteEl: ElementRef;
+  @ViewChild('diagramEl', { static: true }) diagramEl: ElementRef;
+  tools = true;
+  connectorType: Segments = 'Bezier';
+  alignment: AlignmentOptions = 'Center';
+  fontSize = 12;
+  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();
+  }
+  ngAfterViewInit(): void {
+  }
+  ngOnInit() {
+    this.symbolPalette = new SymbolPalette({
+      expandMode: 'Multiple',
+      palettes: this.palettes,
+      width: "100%", height: "100%", symbolHeight: 80,
+      enableRtl: false, enableAnimation: false, symbolWidth: 80,
+      symbolMargin: this.symbolMargin,
+      getSymbolInfo: this.getSymbolInfo.bind(this),
+      getNodeDefaults: this.getSymbolDefaults.bind(this)
+    });
+    this.symbolPalette.appendTo(this.symbolPaletteEl.nativeElement);
+    this.diagram = new Diagram({
+      width: "100%", height: "100%",
+      snapSettings: this.snapSettings,
+      getConnectorDefaults: this.connDefaults.bind(this),
+      constraints: this.diagramConstraints,
+      tool: this.diagramTool,
+      getNodeDefaults: this.nodeDefaults.bind(this),
+      getCustomTool: this.getTool.bind(this),
+      scrollSettings: this.scrollSettings,
+      selectedItems: this.selectedItems,
+      rulerSettings: this.rulerSettings,
+      dragEnter: this.dragEnter.bind(this),
+      connectionChange: this.change.bind(this),
+      collectionChange: this.change.bind(this),
+      propertyChange: this.propertyChange.bind(this),
+      selectionChange: this.selectionChange.bind(this),
+    }, this.diagramEl.nativeElement);
+    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.resized.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.diagram.constraints = this.diagram.constraints | DiagramConstraints.Pan;
+    this.diagram.tool = DiagramTools.ZoomPan;
+  }
+  cursor() {
+    this.diagram.constraints = this.diagram.constraints & ~DiagramConstraints.Pan;
+    this.diagram.tool = DiagramTools.Default;
+  }
+  selectionChange(evt: ISelectionChangeEventArgs) {
+    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.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.diagram.tool = 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 = {preventDefaults: true};
+    const obj = JSON.parse(this.diagram.saveDiagram());
+    this._form.workflow.connectors = obj.connectors;
+    this._form.workflow.nodes = obj.nodes.filter(n => n.id !== 'version').map((n: NodeModel) => {
+      n.offsetX = Math.round(n.offsetX);
+      n.offsetY = Math.round(n.offsetY);
+      return n;
+    });
+    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.symbolPalette?.destroy();
+    this.diagram?.destroy();
+    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%;
+}