@sankhyalabs/sankhyablocks 1.4.0-beta.7 → 1.4.0-beta.8

package/dist/collection/components/snk-configurator/subcomponents/snk-config-modal/snk-config-modal.js

@@ -0,0 +1,137 @@
+import { ApplicationContext } from '@sankhyalabs/core';
+import { h, Host } from '@stencil/core';
+import { VIEW_MODE } from '../../../../lib/utils/constants';
+import ConfigurableElementsStorage from '../configModalProvider/configurableElementsStorage';
+const GRID_MODE = VIEW_MODE.grid;
+const FORM_MODE = VIEW_MODE.form;
+export class SnkConfigModal {
+  constructor() {
+    /**
+     * Define se o modo grid está ativo.
+     */
+    this.gridMode = true;
+  }
+  dispatchChange(openConfig = false) {
+    const data = {
+      viewMode: this.gridMode ? GRID_MODE.index : FORM_MODE.index,
+      openConfig
+    };
+    this.changeConfig.emit(data);
+  }
+  closeConfig() {
+    this.cancelConfig.emit();
+  }
+  onChecked(evt) {
+    const value = evt === null || evt === void 0 ? void 0 : evt.detail;
+    this.gridMode = value === "G" ? true : false;
+    this.dispatchChange();
+  }
+  onClicked() {
+    this.dispatchChange(true);
+  }
+  /**
+   * Conforme mecanismo de mensagens, é possível customizar as mensagens dos blocos de construção
+   * através de um pequeno modulo na estrutura da aplicação:
+   * - Criar um arquivo no seguinte caminho: /messages/appmessages.msg.js.
+   * Para conhecer os detalhes do módulo, vide o arquivo neste projeto "/src/lib/message/resources/snk-configurator.msg.ts"
+   */
+  getMessage(key) {
+    return this._application.messagesBuilder.getMessage(key, {});
+  }
+  componentWillLoad() {
+    this._application = ApplicationContext.getContextValue("__SNK__APPLICATION__");
+  }
+  render() {
+    return (h(Host, null, h("div", { class: "snk-config-modal__header" }, h("label", { class: "snk-config-modal__title" }, this.getMessage("snkConfigModal.titleConfigurations")), h("div", { class: "snk-config-modal__button-close" }, h("ez-button", { mode: 'icon', iconName: "close", size: 'medium', onClick: () => this.closeConfig() }))), h("div", { class: "snk-config-modal__main" }, h("ez-radio-button", { class: "ez-margin-top--medium", label: this.getMessage("snkConfigModal.subTitleModeConfig"), value: this.gridMode ? "G" : "F", onEzChange: (evt) => this.onChecked(evt) }, ConfigurableElementsStorage.getForm(this.configName) && h("ez-radio-button-option", { label: this.getMessage("snkConfigModal.labelGrid"), value: "G" }), ConfigurableElementsStorage.getGrid(this.configName) && h("ez-radio-button-option", { label: this.getMessage("snkConfigModal.labelForm"), value: "F" })), h("ez-button", { mode: "slim", label: this.gridMode
+        ? this.getMessage("snkConfigModal.labelConfigGrid")
+        : this.getMessage("snkConfigModal.labelConfigForm"), class: "snk-config-modal__button-config ez-button--primary", onClick: () => this.onClicked() }), h("hr", { class: "ez-divider-horizontal ez-margin-vertical--medium" }))));
+  }
+  static get is() { return "snk-config-modal"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["snk-config-modal.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["snk-config-modal.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "configName": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Nome usado para guardar/recuperar as configura\u00E7\u00F5es do formul\u00E1rio"
+        },
+        "attribute": "config-name",
+        "reflect": false
+      },
+      "gridMode": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define se o modo grid est\u00E1 ativo."
+        },
+        "attribute": "grid-mode",
+        "reflect": false,
+        "defaultValue": "true"
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "cancelConfig",
+        "name": "cancelConfig",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Evento disparado quando o modal \u00E9 fechado."
+        },
+        "complexType": {
+          "original": "void",
+          "resolved": "void",
+          "references": {}
+        }
+      }, {
+        "method": "changeConfig",
+        "name": "changeConfig",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Evento disparado quando h\u00E1 altera\u00E7\u00E3o nas configura\u00E7\u00F5es."
+        },
+        "complexType": {
+          "original": "IConfigModal",
+          "resolved": "IConfigModal",
+          "references": {
+            "IConfigModal": {
+              "location": "local"
+            }
+          }
+        }
+      }];
+  }
+}

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

@@ -1,7 +1,9 @@
 import { h } from '@stencil/core';
 import { ApplicationContext } from '@sankhyalabs/core';
-const GRID_MODE = 0;
-const FORM_MODE = 1;
+import { VIEW_MODE } from '../../lib/utils/constants';
+import { TaskbarElement } from '../snk-taskbar/elements/taskbar-elements';
+const GRID_MODE = VIEW_MODE.grid;
+const FORM_MODE = VIEW_MODE.form;
 /**
  * É possível customizar as mensagens dos blocos de construção através de um pequeno modulo na estrutura da aplicação:
  * - Criar um arquivo no seguinte caminho: /messages/appmessages.msg.js.
@@ -15,15 +17,15 @@ export class SnkCrud {
     this.executeAction(mode);
   }
   async gridToForm(keepFormMode = false) {
-    this._backToGrid = !keepFormMode && await this._viewStack.getSelectedIndex() === GRID_MODE;
-    this._viewStack.show(FORM_MODE);
+    this._backToGrid = !keepFormMode && await this._viewStack.getSelectedIndex() === GRID_MODE.index;
+    this._viewStack.show(FORM_MODE.index);
   }
   async executeAction(act) {
-    if (act === "GRID_MODE") {
-      this._viewStack.show(GRID_MODE);
+    if (act === TaskbarElement.GRID_MODE) {
+      this._viewStack.show(GRID_MODE.index);
     }
-    else if (act === "FORM_MODE" || act === "UPDATE") {
-      this.gridToForm(act !== "UPDATE");
+    else if (act === TaskbarElement.FORM_MODE || act === TaskbarElement.UPDATE) {
+      this.gridToForm(act !== TaskbarElement.UPDATE);
     }
   }
   insertionModeHandler() {
@@ -31,7 +33,7 @@ export class SnkCrud {
   }
   cancelHandler() {
     if (this._backToGrid) {
-      this._viewStack.show(GRID_MODE);
+      this._viewStack.show(GRID_MODE.index);
     }
   }
   componentWillLoad() {
@@ -61,7 +63,7 @@ export class SnkCrud {
     }
   }
   render() {
-    return (h("ez-view-stack", { ref: (ref) => this._viewStack = ref }, h("stack-item", null, h("snk-grid", { configName: this.configName, onGridDoubleClick: () => this.gridToForm(true), taskbarManager: this.taskbarManager, onActionClick: evt => this.executeAction(evt.detail), actionsList: this.actionsList, statusResolver: this.statusResolver }, h("slot", { name: "SnkGridHeader" }), h("slot", { name: "SnkGridFooter" }), h("slot", { name: "SnkGridTaskBar" }))), h("stack-item", null, h("snk-form", { configName: this.configName, actionsList: this.actionsList, onExit: () => this._viewStack.show(GRID_MODE), recordsValidator: this.recordsValidator, taskbarManager: this.taskbarManager, onActionClick: evt => this.executeAction(evt.detail) }, h("slot", { name: "SnkFormTaskBar" })))));
+    return (h("ez-view-stack", { ref: (ref) => this._viewStack = ref, "data-configurator-parent": "snkConfigurator" }, h("stack-item", null, h("snk-grid", { configName: this.configName, onGridDoubleClick: () => this.gridToForm(true), taskbarManager: this.taskbarManager, onActionClick: evt => this.executeAction(evt.detail), actionsList: this.actionsList, statusResolver: this.statusResolver }, h("slot", { name: "SnkGridHeader" }), h("slot", { name: "SnkGridFooter" }), h("slot", { name: "SnkGridTaskBar" }))), h("stack-item", null, h("snk-form", { configName: this.configName, actionsList: this.actionsList, onExit: () => this._viewStack.show(GRID_MODE.index), recordsValidator: this.recordsValidator, taskbarManager: this.taskbarManager, onActionClick: evt => this.executeAction(evt.detail) }, h("slot", { name: "SnkFormTaskBar" })))));
   }
   static get is() { return "snk-crud"; }
   static get encapsulation() { return "scoped"; }
@@ -141,10 +143,10 @@ export class SnkCrud {
         "type": "unknown",
         "mutable": false,
         "complexType": {
-          "original": "RecordValidator",
-          "resolved": "RecordValidator",
+          "original": "IRecordValidator",
+          "resolved": "IRecordValidator",
           "references": {
-            "RecordValidator": {
+            "IRecordValidator": {
               "location": "import",
               "path": "@sankhyalabs/ezui/dist/types/components/ez-form/ez-form"
             }

package/dist/collection/components/snk-filter-bar/filter-item/editors/snk-filter-personalized.js

@@ -102,13 +102,13 @@ export class SnkFilterPersonalized {
         "type": "unknown",
         "mutable": true,
         "complexType": {
-          "original": "Array<Option|boolean|string|number|Date>",
-          "resolved": "(string | number | boolean | Date | Option)[]",
+          "original": "Array<IOption|boolean|string|number|Date>",
+          "resolved": "(string | number | boolean | Date | IOption)[]",
           "references": {
             "Array": {
               "location": "global"
             },
-            "Option": {
+            "IOption": {
               "location": "import",
               "path": "@sankhyalabs/ezui/dist/types/components/ez-combo-box/ez-combo-box"
             },
@@ -123,6 +123,36 @@ export class SnkFilterPersonalized {
           "tags": [],
           "text": ""
         }
+      },
+      "fix": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "()=>void",
+          "resolved": "() => void",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        }
+      },
+      "unfix": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "()=>void",
+          "resolved": "() => void",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        }
       }
     };
   }

package/dist/collection/components/snk-filter-bar/filter-item/editors/snk-filter-search.js

@@ -52,10 +52,10 @@ export class SnkFilterSearch {
         "type": "unknown",
         "mutable": false,
         "complexType": {
-          "original": "Option",
-          "resolved": "Option",
+          "original": "IOption",
+          "resolved": "IOption",
           "references": {
-            "Option": {
+            "IOption": {
               "location": "import",
               "path": "@sankhyalabs/ezui/dist/types/components/ez-combo-box/ez-combo-box"
             }

package/dist/collection/components/snk-filter-bar/snk-filter-bar.css

@@ -19,7 +19,7 @@
   min-width: 265px;
   
   /*public*/
-  z-index: var(--more-visible, 1);
+  z-index: var(--more-visible, 2);
   background-color: var(--background--xlight, #fff);
   border-radius: var(--border--radius-medium, 12px);
   box-shadow: var(--shadow, 0px 0px 16px 0px #000);

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

@@ -31,4 +31,8 @@
   margin-left: calc(var(--space--large) * -1);
   margin-right: calc(var(--space--large) * -1);
   width: calc(100% + (var(--space--large) * 2));
+}
+
+.snk-form__form--hidden {
+  display: none;
 }

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

@@ -1,26 +1,37 @@
-import { ApplicationContext } from '@sankhyalabs/core';
+import { ApplicationContext, ObjectUtils } from '@sankhyalabs/core';
 import { h } from '@stencil/core';
+import ConfigurableElementsStorage from '../snk-configurator/subcomponents/configModalProvider/configurableElementsStorage';
 import TaskbarProcessor from '../snk-taskbar/processor/taskbar-processor';
 export class SnkForm {
   constructor() {
+    this._renderTimer = 500;
     this._taskbarProcessor = new TaskbarProcessor({
-      "snkForm.regular": ["PREVIOUS", "NEXT", "DIVIDER", "CLONE", "REMOVE", "MORE_OPTIONS", "DIVIDER", "GRID_MODE", "INSERT"],
+      "snkForm.regular": ["PREVIOUS", "NEXT", "DIVIDER", "CLONE", "REMOVE", "MORE_OPTIONS", "DIVIDER", "GRID_MODE", "CONFIGURATOR", "INSERT"],
       "snkForm.finish_edition": ["CANCEL", "SAVE"]
     });
+    this._editionFormConfig = {};
+    this._insertionFormConfig = {};
+    this._showFormConfig = false;
+  }
+  /**
+   * Método responsável em abrir ou fechar o modal de configurações do form.
+   */
+  async setShowFormConfig(value) {
+    this._showFormConfig = value;
+  }
+  /**
+   * Método responsável por setar as configurações do form.
+   */
+  async setConfig(config) {
+    this._editionFormConfig = {};
+    setTimeout(() => {
+      this._editionFormConfig = config != undefined ? config : {};
+      this.loadInsertionConfig();
+    }, this._renderTimer);
   }
   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() });
@@ -40,14 +51,17 @@ export class SnkForm {
     return disabled;
   }
   loadInsertionConfig() {
-    if (this._dataUnit && this._configLoaded) {
-      this._insertionFormConfig = this._editionFormConfig.filter(fieldCfg => {
+    var _a;
+    if (this._dataUnit) {
+      const copyFormConfig = ObjectUtils.copy(this._editionFormConfig || {});
+      copyFormConfig.fields = (_a = copyFormConfig.fields) === null || _a === void 0 ? void 0 : _a.filter(fieldCfg => {
         const def = this._dataUnit.getField(fieldCfg.name);
         if (def === null || def === void 0 ? void 0 : def.readOnly) {
           return false;
         }
         return true;
       });
+      this._insertionFormConfig = copyFormConfig;
     }
   }
   /**
@@ -63,17 +77,14 @@ export class SnkForm {
     var _a;
     return ((_a = this._dataState) === null || _a === void 0 ? void 0 : _a.selectedRecords) ? this._dataState.selectedRecords[0] : undefined;
   }
+  changeConfig(config) {
+    this.configChanged.emit(config);
+  }
+  componentDidRender() {
+    ConfigurableElementsStorage.setForm(this.configName, this._element);
+  }
   componentWillLoad() {
     this._application = ApplicationContext.getContextValue("__SNK__APPLICATION__");
-    if (this._application) {
-      this._application.loadFormConfig(this.configName).then(cfg => {
-        this._configLoaded = true;
-        this._editionFormConfig = cfg;
-        this.loadInsertionConfig();
-      });
-      //Forçamos a carga dos acessos pra aproveitar a request inicial.
-      this._application.getAllAccess();
-    }
     let parent = this._element.parentElement;
     while (parent) {
       if (parent.tagName.toUpperCase() === "SNK-DATA-UNIT") {
@@ -111,10 +122,11 @@ export class SnkForm {
   }
   render() {
     var _a;
-    if (!this._configLoaded || !this._dataUnit || !this._dataState) {
+    if (!this._dataUnit || !this._dataState) {
       return undefined;
     }
-    return (h("section", { class: "snk-form" }, h("div", { class: "snk-form__header snk-form__header--fixed ez-row" }, h("div", { class: "ez-col ez-col--sd-6 ez-col--tb-6", key: "formHeader" }, h("ez-button", { title: this.getMessage("snkForm.goBackTitle"), 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.getMessage("snkForm.title"))), h("div", { class: "ez-col ez-col--sd-6 ez-col--tb-6 ez-align--right" }, h("snk-taskbar", { key: "formTaskbar", buttons: this._taskbarProcessor.buttons, disabledButtons: this._taskbarProcessor.disabledButtons, customButtons: this._taskbarProcessor.customButtons, actionsList: this.actionsList, primaryButton: ((_a = this._dataState) === null || _a === void 0 ? void 0 : _a.isDirty) ? "SAVE" : "INSERT", dataUnit: this._dataUnit }))), 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(), recordsValidator: this.recordsValidator }))))));
+    return (h("section", { class: "snk-form" }, h("div", { class: "snk-form__header snk-form__header--fixed ez-row" }, h("div", { class: "ez-col ez-col--sd-6 ez-col--tb-6", key: "formHeader" }, h("ez-button", { title: this.getMessage("snkForm.goBackTitle"), 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.getMessage("snkForm.title"))), h("div", { class: "ez-col ez-col--sd-6 ez-col--tb-6 ez-align--right" }, h("snk-taskbar", { key: "formTaskbar", configName: this.configName, buttons: this._taskbarProcessor.buttons, disabledButtons: this._taskbarProcessor.disabledButtons, customButtons: this._taskbarProcessor.customButtons, actionsList: this.actionsList, primaryButton: ((_a = this._dataState) === null || _a === void 0 ? void 0 : _a.isDirty) ? "SAVE" : "INSERT", dataUnit: this._dataUnit }))), 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(), recordsValidator: this.recordsValidator, class: this._showFormConfig ? 'snk-form__form--hidden' : '' }), this._showFormConfig &&
+      h("snk-form-config", { dataUnit: this._dataUnit, formConfig: this.getFormConfig(), parentForm: this._element, onConfigChange: (evt) => { this.changeConfig(evt.detail); } }))))));
   }
   static get is() { return "snk-form"; }
   static get encapsulation() { return "scoped"; }
@@ -151,10 +163,10 @@ export class SnkForm {
         "type": "unknown",
         "mutable": false,
         "complexType": {
-          "original": "RecordValidator",
-          "resolved": "RecordValidator",
+          "original": "IRecordValidator",
+          "resolved": "IRecordValidator",
           "references": {
-            "RecordValidator": {
+            "IRecordValidator": {
               "location": "import",
               "path": "@sankhyalabs/ezui/dist/types/components/ez-form/ez-form"
             }
@@ -215,10 +227,10 @@ export class SnkForm {
   static get states() {
     return {
       "_dataUnit": {},
-      "_configLoaded": {},
       "_dataState": {},
       "_editionFormConfig": {},
-      "_insertionFormConfig": {}
+      "_insertionFormConfig": {},
+      "_showFormConfig": {}
     };
   }
   static get events() {
@@ -252,7 +264,73 @@ export class SnkForm {
           "resolved": "string",
           "references": {}
         }
+      }, {
+        "method": "configChanged",
+        "name": "configChanged",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Evento disparado quando as configura\u00E7\u00F5es s\u00E3o alteradas."
+        },
+        "complexType": {
+          "original": "IFormConfig",
+          "resolved": "IFormConfig",
+          "references": {
+            "IFormConfig": {
+              "location": "import",
+              "path": "@sankhyalabs/ezui/dist/types/components/ez-form/ez-form"
+            }
+          }
+        }
       }];
   }
+  static get methods() {
+    return {
+      "setShowFormConfig": {
+        "complexType": {
+          "signature": "(value: boolean) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "M\u00E9todo respons\u00E1vel em abrir ou fechar o modal de configura\u00E7\u00F5es do form.",
+          "tags": []
+        }
+      },
+      "setConfig": {
+        "complexType": {
+          "signature": "(config: IFormConfig) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "IFormConfig": {
+              "location": "import",
+              "path": "@sankhyalabs/ezui/dist/types/components/ez-form/ez-form"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "M\u00E9todo respons\u00E1vel por setar as configura\u00E7\u00F5es do form.",
+          "tags": []
+        }
+      }
+    };
+  }
   static get elementRef() { return "_element"; }
 }

package/dist/collection/components/snk-form/subcomponents/snk-config-options/snk-config-options.css

@@ -0,0 +1,9 @@
+:host {
+    width: 100%;
+    border: 2px solid var(--color--secondary-200);
+    border-radius: 15px;
+}
+
+.config-options__switch-row {
+    margin-top: -30px;
+}