@sankhyalabs/sankhyablocks 1.3.31-beta.2 → 1.3.31-beta.5

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) }))))));
+};

package/dist/collection/components/snk-taskbar/elements/taskbar-elements.js

@@ -0,0 +1,63 @@
+import { h } from "@stencil/core";
+export var TaskbarElement;
+(function (TaskbarElement) {
+  TaskbarElement["PREVIOUS"] = "PREVIOUS";
+  TaskbarElement["NEXT"] = "NEXT";
+  TaskbarElement["REFRESH"] = "REFRESH";
+  TaskbarElement["UPDATE"] = "UPDATE";
+  TaskbarElement["CLONE"] = "CLONE";
+  TaskbarElement["REMOVE"] = "REMOVE";
+  TaskbarElement["INSERT"] = "INSERT";
+  TaskbarElement["CANCEL"] = "CANCEL";
+  TaskbarElement["SAVE"] = "SAVE";
+  TaskbarElement["GRID_MODE"] = "GRID_MODE";
+  TaskbarElement["FORM_MODE"] = "FORM_MODE";
+  TaskbarElement["CONFIG_GRID"] = "CONFIG_GRID";
+  TaskbarElement["MORE_OPTIONS"] = "MORE_OPTIONS";
+  TaskbarElement["DIVIDER"] = "DIVIDER";
+})(TaskbarElement || (TaskbarElement = {}));
+export var AuthorizationElements;
+(function (AuthorizationElements) {
+  AuthorizationElements["UPDATE"] = "UPDATE";
+  AuthorizationElements["CLONE"] = "CLONE";
+  AuthorizationElements["REMOVE"] = "REMOVE";
+  AuthorizationElements["INSERT"] = "INSERT";
+  AuthorizationElements["CONFIG_GRID"] = "CONFIG_GRID";
+})(AuthorizationElements || (AuthorizationElements = {}));
+export const buildElem = (element, className, getTitle, action, isEnabled) => {
+  switch (element) {
+    case TaskbarElement.PREVIOUS:
+      return iconButton("chevron-left", element, className, getTitle, action, isEnabled);
+    case TaskbarElement.NEXT:
+      return iconButton("chevron-right", element, className, getTitle, action, isEnabled);
+    case TaskbarElement.REFRESH:
+      return iconButton("sync", element, className, getTitle, action, isEnabled);
+    case TaskbarElement.UPDATE:
+      return iconButton("edit", element, className, getTitle, action, isEnabled);
+    case TaskbarElement.CLONE:
+      return iconButton("copy", element, className, getTitle, action, isEnabled);
+    case TaskbarElement.REMOVE:
+      return iconButton("delete", element, className, getTitle, action, isEnabled);
+    case TaskbarElement.INSERT:
+      return iconTextButton("plus", element, className, getTitle, action, isEnabled);
+    case TaskbarElement.CANCEL:
+      return h("ez-button", { label: getTitle(element), size: "small", enabled: isEnabled(element), onClick: () => action(element) });
+    case TaskbarElement.SAVE:
+      return iconTextButton("save", element, className, getTitle, action, isEnabled);
+    case TaskbarElement.GRID_MODE:
+      return iconButton("table", element, className, getTitle, action, isEnabled);
+    case TaskbarElement.FORM_MODE:
+      return iconButton("list", element, className, getTitle, action, isEnabled);
+    case TaskbarElement.CONFIG_GRID:
+      return iconButton("settings-inverted", element, className, getTitle, action, isEnabled);
+    case TaskbarElement.DIVIDER:
+      return h("hr", { class: "ez-divider-vertical ez-divider--dark ez-margin-horizontal--medium" });
+  }
+};
+function iconButton(iconName, element, className, getTitle, action, isEnabled) {
+  return h("ez-button", { key: iconName, title: getTitle(element), mode: "icon", size: "small", class: className, iconName: iconName, enabled: isEnabled(element), onClick: () => action(element) });
+}
+function iconTextButton(iconName, element, className, getTitle, action, isEnabled) {
+  return h("ez-button", { key: iconName, title: getTitle(element), label: getTitle(element), size: "small", class: className, enabled: isEnabled(element), onClick: () => action(element) },
+    h("ez-icon", { class: "ez-padding-right--small", slot: "leftIcon", iconName: iconName }));
+}

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

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

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

@@ -0,0 +1,268 @@
+import { ApplicationContext } from '@sankhyalabs/core';
+import { Component, Event, h, Host, Prop, State, Watch } from '@stencil/core';
+import { SnkPopupButton } from './component/snk-popup-button';
+import { TaskbarElement, buildElem, AuthorizationElements } from './elements/taskbar-elements';
+export class SnkTaskbar {
+  constructor() {
+    this._moreOptionsOpened = false;
+  }
+  observeButtons() {
+    this._definitions = undefined;
+  }
+  // Internal methods
+  elementsFromString(strButtons) {
+    const elements = [];
+    if (strButtons) {
+      strButtons.split(",").forEach(buttonName => {
+        buttonName = buttonName.trim();
+        if (this.isAllowed(buttonName)) {
+          elements.push(buttonName.trim());
+        }
+      });
+    }
+    return elements;
+  }
+  isAllowed(buttonName) {
+    if (AuthorizationElements[buttonName]) {
+      return this._permissions ? this._permissions.isSup || this._permissions[buttonName] : false;
+    }
+    return true;
+  }
+  getTitle(element) {
+    const pt_br = {
+      [TaskbarElement.UPDATE]: "Editar",
+      [TaskbarElement.PREVIOUS]: "Anterior",
+      [TaskbarElement.NEXT]: "Próximo",
+      [TaskbarElement.REFRESH]: "Atualizar",
+      [TaskbarElement.CLONE]: "Duplicar",
+      [TaskbarElement.REMOVE]: "Excluir",
+      [TaskbarElement.MORE_OPTIONS]: "Mais Opções",
+      [TaskbarElement.INSERT]: "Cadastrar",
+      [TaskbarElement.CANCEL]: "Cancelar",
+      [TaskbarElement.SAVE]: "Salvar",
+      [TaskbarElement.GRID_MODE]: "Modo Grade",
+      [TaskbarElement.CONFIG_GRID]: "Configuração da grade",
+      [TaskbarElement.FORM_MODE]: "Modo Formulário"
+    };
+    return pt_br[element] ? pt_br[element] : "";
+  }
+  elementClick(elem) {
+    if (this.dataUnit) {
+      switch (elem) {
+        case TaskbarElement.PREVIOUS:
+          this.dataUnit.previousRecord();
+          break;
+        case TaskbarElement.NEXT:
+          this.dataUnit.nextRecord();
+          break;
+        case TaskbarElement.REFRESH:
+          this.dataUnit.loadData();
+          break;
+        case TaskbarElement.CLONE:
+          this.dataUnit.copySelected();
+          break;
+        case TaskbarElement.REMOVE:
+          this.dataUnit.removeSelectedRecords();
+          break;
+        case TaskbarElement.INSERT:
+          this.dataUnit.addRecord();
+          break;
+        case TaskbarElement.CANCEL:
+          this.dataUnit.cancelEdition();
+          break;
+        case TaskbarElement.SAVE:
+          this.dataUnit.saveData();
+          break;
+      }
+    }
+    this.actionClick.emit(elem);
+  }
+  actionClickHandler(act) {
+    this._moreOptionsOpened = false;
+    this.actionClick.emit(act.key);
+  }
+  isEnabled(elem) {
+    return !(this.disabledButtons && this.disabledButtons.includes(elem));
+  }
+  getElement(index, def) {
+    let element;
+    let className = def === this.primaryButton ? "ez-button--primary " : "";
+    if (index > 1) {
+      className += "ez-padding-left--medium";
+    }
+    if (def === TaskbarElement.MORE_OPTIONS) {
+      element = this.actionsList ? h(SnkPopupButton, { className: className, title: this.getTitle(def), source: this.actionsList, opened: this._moreOptionsOpened, setOpened: opened => this._moreOptionsOpened = opened, actionClick: act => this.actionClickHandler(act) }) : undefined;
+    }
+    else {
+      element = buildElem(def, className, elem => this.getTitle(elem), elem => this.elementClick(elem), elem => this.isEnabled(elem));
+    }
+    return element;
+  }
+  // Lifecycle
+  componentWillRender() {
+    if (this._permissions === undefined) {
+      const snkApplication = ApplicationContext.getContextValue("__SNK__APPLICATION__");
+      if (snkApplication) {
+        snkApplication.getAllAccess().then(access => this._permissions = access);
+      }
+      else {
+        this._permissions = {};
+      }
+    }
+    else {
+      if (this._definitions == undefined) {
+        this._definitions = this.elementsFromString(this.buttons);
+      }
+    }
+  }
+  render() {
+    if (this._definitions === undefined) {
+      return undefined;
+    }
+    let index = 0;
+    return (h(Host, null, this._definitions.map((btn) => {
+      if (btn === TaskbarElement.DIVIDER) {
+        index = 0;
+      }
+      else {
+        index++;
+      }
+      if (TaskbarElement[btn]) {
+        return this.getElement(index, TaskbarElement[btn]);
+      }
+      else {
+        index;
+        return h("slot", { name: btn });
+      }
+    })));
+  }
+  static get is() { return "snk-taskbar"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() { return {
+    "$": ["snk-taskbar.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["snk-taskbar.css"]
+  }; }
+  static get properties() { return {
+    "buttons": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "buttons",
+      "reflect": false
+    },
+    "actionsList": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "Array<Action>",
+        "resolved": "Action[]",
+        "references": {
+          "Array": {
+            "location": "global"
+          },
+          "Action": {
+            "location": "local"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      }
+    },
+    "primaryButton": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "primary-button",
+      "reflect": false
+    },
+    "disabledButtons": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "Array<string>",
+        "resolved": "string[]",
+        "references": {
+          "Array": {
+            "location": "global"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      }
+    },
+    "dataUnit": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "DataUnit",
+        "resolved": "DataUnit",
+        "references": {
+          "DataUnit": {
+            "location": "import",
+            "path": "@sankhyalabs/core"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      }
+    }
+  }; }
+  static get states() { return {
+    "_moreOptionsOpened": {},
+    "_permissions": {}
+  }; }
+  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 watchers() { return [{
+      "propName": "buttons",
+      "methodName": "observeButtons"
+    }]; }
+}

package/dist/collection/lib/http/data-fetcher/fetchers/dataunit-fetcher.js

@@ -1,6 +1,6 @@
-import { DataUnit, ChangeOperation, StringUtils, DataType, } from "@sankhyalabs/core";
-import { DataFetcher } from "../DataFetcher";
+import { ChangeOperation, DataType, DataUnit, StringUtils } from "@sankhyalabs/core";
 import { gql } from "graphql-request";
+import { DataFetcher } from "../DataFetcher";
 export default class DataUnitFetcher {
   constructor() {
     this.templateByQuery = new Map();
@@ -32,9 +32,9 @@ export default class DataUnitFetcher {
                 }
               }
             }`);
-    this.templateByQuery.set("fetchData", gql `query($dataunit: String! $limit: Int $offset:Int $filter: [InputFilter!] $sort: [InputSort!]) {
+    this.templateByQuery.set("fetchData", gql `query($dataunit: String! $limit: Int $offset:Int $filters: [InputFilter!] $sort: [InputSort!]) {
             $queryAlias$: fetchDataUnit(name: $dataunit){
-              data(limit: $limit offset: $offset filters: $filter sort: $sort){
+              data(limit: $limit offset: $offset filters: $filters sort: $sort){
                 limit
                 offset
                 total
@@ -63,7 +63,7 @@ export default class DataUnitFetcher {
   getDataUnit(entityName, resourceID) {
     const dataUnit = new DataUnit(`dd://${entityName}/${resourceID}`);
     dataUnit.metadataLoader = (dataUnit) => this.loadMetadata(dataUnit);
-    dataUnit.dataLoader = (dataUnit, page, sort, filters) => this.loadData(dataUnit, page, sort, filters);
+    dataUnit.dataLoader = (dataUnit, request) => this.loadData(dataUnit, request);
     dataUnit.saveLoader = (dataUnit, changes) => this.saveData(dataUnit, changes);
     dataUnit.removeLoader = (dataUnit, recordIds) => this.removeRecords(dataUnit, recordIds);
     return dataUnit;
@@ -100,25 +100,24 @@ export default class DataUnitFetcher {
       });
     });
   }
-  loadData(dataUnit, page, sort, filter) {
+  loadData(dataUnit, request) {
     return new Promise((resolve, reject) => {
-      var _a, _b, _c;
-      const variables = { dataunit: dataUnit.name, sort, filter };
-      if (page) {
-        variables.limit = page.limit;
-        variables.offset = page.offset;
-      }
-      if (!StringUtils.isEmpty((_a = page === null || page === void 0 ? void 0 : page.quickFilter) === null || _a === void 0 ? void 0 : _a.term)) {
+      var _a;
+      const { sort, filters, limit, offset, quickFilter } = request;
+      const variables = { dataunit: dataUnit.name, sort, filters };
+      variables.limit = limit;
+      variables.offset = offset;
+      if (!StringUtils.isEmpty(quickFilter === null || quickFilter === void 0 ? void 0 : quickFilter.term)) {
         if (variables.filter === undefined) {
           variables.filter = [];
         }
         const quickFilterCriteria = {
           name: "__QUICK_FILTER__",
           expression: "__QUICK_FILTER__",
-          params: [{ name: "term", dataType: DataType.TEXT, value: page.quickFilter.term }]
+          params: [{ name: "term", dataType: DataType.TEXT, value: quickFilter.term }]
         };
-        if (((_c = (_b = page.quickFilter) === null || _b === void 0 ? void 0 : _b.fields) === null || _c === void 0 ? void 0 : _c.length) > 0) {
-          quickFilterCriteria.params.push({ name: "fields", dataType: DataType.OBJECT, value: page.quickFilter.fields });
+        if (((_a = quickFilter === null || quickFilter === void 0 ? void 0 : quickFilter.fields) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+          quickFilterCriteria.params.push({ name: "fields", dataType: DataType.OBJECT, value: quickFilter.fields });
         }
         variables.filter.push(quickFilterCriteria);
       }
@@ -128,16 +127,32 @@ export default class DataUnitFetcher {
         query: this.templateByQuery.get("fetchData"),
       })
         .then((resp) => {
-        const pageResult = resp.data;
-        const records = [];
-        pageResult.records.forEach((responseRecord) => {
+        const { limit, offset, total, hasMore, records } = resp.data;
+        let paginationInfo;
+        if (limit) {
+          const firstRecord = offset + 1;
+          const lastRecord = offset + Math.min(records.length, limit);
+          const currentPage = offset / limit;
+          paginationInfo = {
+            firstRecord,
+            lastRecord,
+            total,
+            currentPage,
+            hasMore
+          };
+        }
+        const processedRecords = [];
+        records.forEach((responseRecord) => {
           const duRecord = { __record__id__: responseRecord.id };
           responseRecord.fields.forEach(({ name, value }) => {
             duRecord[name] = dataUnit.valueFromString(name, value);
           });
-          records.push(duRecord);
+          processedRecords.push(duRecord);
+        });
+        resolve({
+          paginationInfo,
+          records: processedRecords
         });
-        resolve(Object.assign(Object.assign({}, pageResult), { records }));
       })
         .catch((error) => {
         reject(error);

package/dist/collection/lib/http/data-fetcher/fetchers/grid-config-fetcher.js

@@ -4,15 +4,16 @@ export default class GridConfigFetcher extends ResourceFetcher {
     super(...arguments);
     this.GRID_CONFIG_VERSION = "V3:";
   }
-  getConfig(resourceID) {
+  getConfig(_gridName, resourceID) {
     const completePath = `cfg://grid/${this.GRID_CONFIG_VERSION}${resourceID}`;
     return new Promise((resolve, reject) => {
       this.loadResource(completePath)
         .then(loadedResource => {
+        let config = undefined;
         if (loadedResource) {
-          let config = JSON.parse(loadedResource);
-          resolve(config);
+          config = JSON.parse(loadedResource);
         }
+        resolve(config);
       }).catch((error) => {
         reject(error);
       });