@sankhyalabs/sankhyablocks 1.3.30 → 1.3.31-beta.3

package/dist/collection/components/snk-data-unit/snk-data-unit.js

@@ -0,0 +1,325 @@
+import { Component, Host, h, Event, Element, Prop, Watch, Method } from '@stencil/core';
+import { Action, ApplicationContext } from '@sankhyalabs/core';
+import { ApplicationUtils } from '@sankhyalabs/ezui/dist/collection/utils';
+export class SnkDataUnit {
+  constructor() {
+    this._onDataUnitResolve = [];
+    this._dataUnitObserver = (action) => {
+      let msg = this.getActionInfo(action.type);
+      if (msg) {
+        ApplicationUtils.info(msg);
+      }
+      const duState = {
+        insertionMode: false,
+        hasNext: this.dataUnit.hasNext(),
+        hasPrevious: this.dataUnit.hasPrevious(),
+        copyMode: false,
+        isDirty: this.dataUnit.isDirty(),
+        selectedRecords: this.dataUnit.getSelectedRecords()
+      };
+      this.dataUnit.records.forEach(r => {
+        if (r.__record__id__.startsWith('NEW_')) {
+          duState.insertionMode = true;
+          duState.copyMode || (duState.copyMode = r['__record__source__id__'] != undefined);
+        }
+      });
+      this.dataState = duState;
+    };
+  }
+  async getDataUnit() {
+    return new Promise((resolve) => {
+      if (this.dataUnit) {
+        resolve(this.dataUnit);
+      }
+      else {
+        this._onDataUnitResolve.push(resolve);
+      }
+    });
+  }
+  async interceptAction(action) {
+    return new Promise(resolve => {
+      if (action.type === Action.EDITION_CANCELED) {
+        ApplicationUtils.confirm(this.i18n("components.warning"), this.i18n("components.confirmCancelEdition"))
+          .then((result) => resolve(result ? action : undefined));
+      }
+      else if (action.type === Action.REMOVING_RECORDS) {
+        ApplicationUtils.confirm(this.i18n("components.delete"), this.i18n("components.confirmRemoveRecord"), "delete", true, { btnConfirmDanger: true })
+          .then((result) => resolve(result ? action : undefined));
+      }
+      else {
+        resolve(action);
+      }
+    });
+  }
+  getActionInfo(action) {
+    if (this.messageBuilder) {
+      return this.messageBuilder(action, this.dataState, this.dataUnit);
+    }
+    else {
+      if (action === Action.EDITION_CANCELED) {
+        return this.i18n("components.editionCanceled");
+      }
+    }
+  }
+  observePageSize() {
+    if (this.dataUnit) {
+      this.dataUnit.pageSize = this.pageSize;
+    }
+  }
+  observeDataUnitName(newValue, oldValue) {
+    if (oldValue != newValue) {
+      this.dataUnit = undefined;
+      this.dataUnitName = newValue;
+      this.loadDataUnit();
+    }
+  }
+  observeEntityName(newValue, oldValue) {
+    if (oldValue != newValue) {
+      this.dataUnit = undefined;
+      this.entityName = newValue;
+      this.loadDataUnit();
+    }
+  }
+  observeDataState(newValue, oldValue) {
+    if (oldValue != newValue) {
+      this.dataStateChange.emit(newValue);
+    }
+  }
+  observeDataUnit() {
+    this.dataUnitReady.emit(this.dataUnit);
+  }
+  async loadDataUnit() {
+    if (!this.dataUnit) {
+      const app = ApplicationContext.getContextValue("__SNK__APPLICATION__");
+      if (app && this.entityName) {
+        this.dataUnit = await app.getOrCreateDataUnit(this.entityName, this.dataUnitName);
+        this.dataUnit.pageSize = this.pageSize;
+        this.dataUnit.unsubscribe(this._dataUnitObserver);
+        this.dataUnit.addInterceptor(this);
+        this.dataUnit.subscribe(this._dataUnitObserver);
+        let resolver;
+        while (resolver = this._onDataUnitResolve.pop()) {
+          resolver(this.dataUnit);
+        }
+      }
+    }
+  }
+  i18n(key) {
+    const pt_br = {
+      "components.warning": "Aviso",
+      "components.delete": "Excluir",
+      "components.confirmRemoveRecord": "Deseja realmente excluir o registro atual?",
+      "components.confirmCancelEdition": "As alterações realizadas serão descartadas<br/><br/><b>Você realmente gostaria de sair?</b>",
+      "components.editionCanceled": "Todas as alterações foram descartadas.",
+    };
+    return pt_br[key];
+  }
+  componentDidRender() {
+    this.loadDataUnit();
+  }
+  render() {
+    return (h(Host, null));
+  }
+  static get is() { return "snk-data-unit"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() { return {
+    "$": ["snk-data-unit.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["snk-data-unit.css"]
+  }; }
+  static get properties() { return {
+    "dataState": {
+      "type": "unknown",
+      "mutable": true,
+      "complexType": {
+        "original": "DataState",
+        "resolved": "DataState",
+        "references": {
+          "DataState": {
+            "location": "local"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      }
+    },
+    "dataUnitName": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "data-unit-name",
+      "reflect": false
+    },
+    "entityName": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "entity-name",
+      "reflect": false
+    },
+    "pageSize": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "page-size",
+      "reflect": false
+    },
+    "dataUnit": {
+      "type": "unknown",
+      "mutable": true,
+      "complexType": {
+        "original": "DataUnit",
+        "resolved": "DataUnit",
+        "references": {
+          "DataUnit": {
+            "location": "import",
+            "path": "@sankhyalabs/core"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      }
+    },
+    "messageBuilder": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "(messageKey: string, dataState: DataState, dataUnit: DataUnit) => string",
+        "resolved": "(messageKey: string, dataState: DataState, dataUnit: DataUnit) => string",
+        "references": {
+          "DataState": {
+            "location": "local"
+          },
+          "DataUnit": {
+            "location": "import",
+            "path": "@sankhyalabs/core"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      }
+    }
+  }; }
+  static get events() { return [{
+      "method": "dataStateChange",
+      "name": "dataStateChange",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "DataState",
+        "resolved": "DataState",
+        "references": {
+          "DataState": {
+            "location": "local"
+          }
+        }
+      }
+    }, {
+      "method": "dataUnitReady",
+      "name": "dataUnitReady",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "DataUnit",
+        "resolved": "DataUnit",
+        "references": {
+          "DataUnit": {
+            "location": "import",
+            "path": "@sankhyalabs/core"
+          }
+        }
+      }
+    }]; }
+  static get methods() { return {
+    "getDataUnit": {
+      "complexType": {
+        "signature": "() => Promise<DataUnit>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          },
+          "DataUnit": {
+            "location": "import",
+            "path": "@sankhyalabs/core"
+          }
+        },
+        "return": "Promise<DataUnit>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    }
+  }; }
+  static get elementRef() { return "element"; }
+  static get watchers() { return [{
+      "propName": "pageSize",
+      "methodName": "observePageSize"
+    }, {
+      "propName": "dataUnitName",
+      "methodName": "observeDataUnitName"
+    }, {
+      "propName": "entityName",
+      "methodName": "observeEntityName"
+    }, {
+      "propName": "dataState",
+      "methodName": "observeDataState"
+    }, {
+      "propName": "dataUnit",
+      "methodName": "observeDataUnit"
+    }]; }
+}

package/dist/collection/components/snk-form/snk-form.css

@@ -0,0 +1,3 @@
+:host {
+  display: block;
+}

package/dist/collection/components/snk-form/snk-form.js

@@ -0,0 +1,194 @@
+import { ApplicationContext } from '@sankhyalabs/core';
+import { Component, Element, Event, h, Prop, State } from '@stencil/core';
+export class SnkForm {
+  getFormConfig() {
+    return (this._dataState && this._dataState.insertionMode ? this._insertionFormConfig : this._editionFormConfig);
+  }
+  getInsertionHiddenFields(formConfig) {
+    const hiddenFields = [];
+    formConfig === null || formConfig === void 0 ? void 0 : formConfig.forEach(cfg => {
+      const def = this._dataUnit.getField(cfg.name);
+      if (def === null || def === void 0 ? void 0 : def.readOnly) {
+        hiddenFields.push(cfg.name);
+      }
+    });
+    return hiddenFields;
+  }
+  exitForm() {
+    if (this._dataUnit.isDirty()) {
+      this._dataUnit.cancelEdition({ after: () => this.exit.emit() });
+    }
+    else {
+      this.exit.emit();
+    }
+  }
+  getDisabledButtons() {
+    const disabled = [];
+    if (!this._dataState.hasPrevious) {
+      disabled.push("PREVIOUS");
+    }
+    if (!this._dataState.hasNext) {
+      disabled.push("NEXT");
+    }
+    return disabled;
+  }
+  componentWillLoad() {
+    let parent = this._element.parentElement;
+    while (parent) {
+      if (parent.tagName.toUpperCase() === "SNK-DATA-UNIT") {
+        this._snkDataUnit = parent;
+        this._dataUnit = this._snkDataUnit.dataUnit;
+        this._dataState = this._snkDataUnit.dataState;
+        if (!this._dataUnit) {
+          this._snkDataUnit.addEventListener("dataUnitReady", (evt) => {
+            this._dataUnit = evt.detail;
+          });
+        }
+        this._snkDataUnit.addEventListener("dataStateChange", (evt) => {
+          this._dataState = evt.detail;
+        });
+        break;
+      }
+      parent = parent.parentElement;
+    }
+  }
+  componentWillRender() {
+    if (this._dataUnit && !this._configLoaded) {
+      const snkApplication = ApplicationContext.getContextValue("__SNK__APPLICATION__");
+      if (snkApplication) {
+        snkApplication.loadFormConfig(this.configName).then(cfg => {
+          this._configLoaded = true;
+          this._editionFormConfig = cfg;
+          this._insertionFormConfig = cfg.filter(fieldCfg => {
+            const def = this._dataUnit.getField(fieldCfg.name);
+            if (def === null || def === void 0 ? void 0 : def.readOnly) {
+              return false;
+            }
+            return true;
+          });
+        });
+      }
+    }
+  }
+  render() {
+    if (!this._configLoaded || !this._dataUnit || !this._dataState) {
+      return undefined;
+    }
+    return (h("section", { class: "ez-padding--large" },
+      h("div", { class: "ez-row ez-padding-bottom--medium" },
+        h("div", { class: "ez-col ez-col--sd-6 ez-col--tb-6", key: "formHeader" },
+          h("ez-button", { mode: "icon", iconName: "arrow_back", class: "ez-padding-right--medium", size: "small", onClick: () => this.exitForm() }),
+          h("h1", { class: "ez-title ez-title--primary ez-title--xlarge ez-align--middle" }, this.formTitle)),
+        h("div", { class: "ez-col ez-col--sd-6 ez-col--tb-6 ez-align--right" },
+          h("snk-taskbar", { key: "formTaskbar", buttons: this._dataState.isDirty ? "CANCEL,SAVE" : "PREVIOUS,NEXT,DIVIDER,CLONE,REMOVE,MORE_OPTIONS,DIVIDER,GRID_MODE,INSERT", primaryButton: this._dataState.isDirty ? "SAVE" : "INSERT", disabledButtons: this.getDisabledButtons(), actionsList: this.actionsList, dataUnit: this._dataUnit }))),
+      h("div", { class: "ez-padding--small" }),
+      h("section", null,
+        h("div", { class: "ez-row" },
+          h("div", { class: "ez-col ez-col--sd-12" },
+            h("ez-form", { key: "ezForm" + this._snkDataUnit.entityName, dataUnit: this._dataUnit, config: this.getFormConfig() }))))));
+  }
+  static get is() { return "snk-form"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() { return {
+    "$": ["snk-form.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["snk-form.css"]
+  }; }
+  static get properties() { return {
+    "formTitle": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "form-title",
+      "reflect": false
+    },
+    "configName": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "config-name",
+      "reflect": false
+    },
+    "actionsList": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "Array<Action>",
+        "resolved": "Action[]",
+        "references": {
+          "Array": {
+            "location": "global"
+          },
+          "Action": {
+            "location": "import",
+            "path": "../snk-taskbar/snk-taskbar"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      }
+    }
+  }; }
+  static get states() { return {
+    "_dataUnit": {},
+    "_configLoaded": {},
+    "_dataState": {}
+  }; }
+  static get events() { return [{
+      "method": "exit",
+      "name": "exit",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      }
+    }, {
+      "method": "actionClick",
+      "name": "actionClick",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      }
+    }]; }
+  static get elementRef() { return "_element"; }
+}

package/dist/collection/components/snk-grid/snk-grid.css

@@ -0,0 +1,5 @@
+:host {
+  display: flex;
+  height: 100%;
+  width: 100%;
+}

package/dist/collection/components/snk-grid/snk-grid.js

@@ -0,0 +1,128 @@
+import { ApplicationContext } from '@sankhyalabs/core';
+import { Component, Element, h, Prop, State, Event } from '@stencil/core';
+import { TaskbarElement } from '../snk-taskbar/elements/taskbar-elements';
+export class SnkGrid {
+  getHeaderButtons() {
+    return this._dataState && this._dataState.selectedRecords.length > 0 ? "UPDATE,CLONE,REMOVE,MORE_OPTIONS,DIVIDER,REFRESH" : "REFRESH";
+  }
+  actionClickHandler(evt) {
+    if (evt.detail === TaskbarElement.CONFIG_GRID && this._grid) {
+      this._grid.openGridConfig();
+    }
+  }
+  componentWillLoad() {
+    let parent = this._element.parentElement;
+    while (parent) {
+      if (parent.tagName.toUpperCase() === "SNK-DATA-UNIT") {
+        this._snkDataUnit = parent;
+        this._dataUnit = this._snkDataUnit.dataUnit;
+        if (!this._dataUnit) {
+          this._snkDataUnit.addEventListener("dataUnitReady", (evt) => {
+            this._dataUnit = evt.detail;
+          });
+        }
+        this._snkDataUnit.addEventListener("dataStateChange", (evt) => {
+          this._dataState = evt.detail;
+        });
+        break;
+      }
+      parent = parent.parentElement;
+    }
+  }
+  componentWillRender() {
+    if (this._dataUnit && !this._configLoaded) {
+      const snkApplication = ApplicationContext.getContextValue("__SNK__APPLICATION__");
+      if (snkApplication) {
+        snkApplication.loadGridConfig(this.configName).then(cfg => {
+          this._gridConfig = cfg;
+          this._configLoaded = true;
+        });
+      }
+    }
+  }
+  render() {
+    if (!this._configLoaded || !this._dataUnit) {
+      return undefined;
+    }
+    return (h("div", { class: "ez-flex ez-flex--column ez-flex-item--auto ez-padding--large" },
+      h("div", { class: "ez-row ez-padding-bottom--medium ez-margin-bottom--medium" },
+        h("div", { class: "ez-col ez-col--sd-9 ez-col--tb-9 ez-align--bottom" },
+          h("slot", null)),
+        h("div", { class: "ez-col ez-col--sd-3 ez-col--tb-3 ez-align--right" },
+          h("snk-taskbar", { onActionClick: evt => this.actionClickHandler(evt), key: "topTaskbar", dataUnit: this._dataUnit, buttons: "FORM_MODE,CONFIG_GRID,INSERT", primaryButton: "INSERT" }))),
+      h("ez-grid", { ref: ref => this._grid = ref, dataUnit: this._dataUnit, key: "grid-" + this._snkDataUnit.entityName, config: this._gridConfig },
+        h("snk-taskbar", { dataUnit: this._dataUnit, buttons: this.getHeaderButtons(), slot: "leftButtons", actionsList: this.actionsList }))));
+  }
+  static get is() { return "snk-grid"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() { return {
+    "$": ["snk-grid.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["snk-grid.css"]
+  }; }
+  static get properties() { return {
+    "configName": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "config-name",
+      "reflect": false
+    },
+    "actionsList": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "Array<Action>",
+        "resolved": "Action[]",
+        "references": {
+          "Array": {
+            "location": "global"
+          },
+          "Action": {
+            "location": "import",
+            "path": "../snk-taskbar/snk-taskbar"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      }
+    }
+  }; }
+  static get states() { return {
+    "_dataUnit": {},
+    "_configLoaded": {},
+    "_dataState": {}
+  }; }
+  static get events() { return [{
+      "method": "actionClick",
+      "name": "actionClick",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      }
+    }]; }
+  static get elementRef() { return "_element"; }
+}

package/dist/collection/components/snk-taskbar/component/snk-popup-button.js

@@ -0,0 +1,7 @@
+import { h } from "@stencil/core";
+export const SnkPopupButton = ({ className, title, source, opened, setOpened, actionClick }) => {
+  return (h("div", { class: "ez-flex " + className },
+    h("ez-button", { id: "moreOptionsButton", title: title, mode: "icon", iconName: "dots-vertical", size: "small", onClick: () => setOpened(true) }),
+    h("ez-popover", { opened: opened, autoClose: true, innerElement: ["moreOptionsButton", "moreOptionsDiv"], onEzVisibilityChange: (event) => setOpened(event.detail) },
+      h("div", { id: "moreOptionsDiv", class: "ez-padding--small" }, source.map((option, index) => h("ez-button", { className: "btn-options", size: "small", label: option.label, key: index, onClick: () => actionClick(option) }))))));
+};