@sankhyalabs/sankhyablocks 2.1.2 → 2.1.4

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

@@ -4,6 +4,7 @@ import { ApplicationContext, ObjectUtils, ArrayUtils } from '@sankhyalabs/core';
 import { ApplicationUtils, DialogType } from "@sankhyalabs/ezui/dist/collection/utils";
 import { ACTION_CONFIG, CONFIG_EVENTS, DEFAULT_TYPE, TAB_NAMES } from "../../../../lib/utils/constants";
 import { UserConfigType } from "../../../../lib/http/data-fetcher/fetchers/form-config-fetcher";
+import { ConfigStorage } from "../../../../lib/configs/ConfigStorage";
 const CONTAINER_ID = {
   collapsibleBox: "EZ-COLLAPSIBLE-BOX",
   withoutGroup: "fieldsWithoutGroupContainer",
@@ -155,14 +156,9 @@ export class SnkFormConfig {
       && this._optionFormConfigChanged === true
       && this._formConfigChanged === false;
   }
-  saveConfig() {
-    var _a;
-    if (((_a = this._tempGroups) === null || _a === void 0 ? void 0 : _a.length) > 0) {
-      ApplicationUtils.alert(this.getMessage("snkFormConfig.confirm.title"), this.getMessage("snkFormConfig.confirm.group"));
-      return;
-    }
-    const isDefault = this.isDefaultConfiguration();
+  buildConfigToSave() {
     let formConfig = {};
+    const isDefault = this.isDefaultConfiguration();
     if (isDefault) {
       formConfig = ObjectUtils.copy(this.formConfig);
     }
@@ -180,9 +176,24 @@ export class SnkFormConfig {
       }
     }
     formConfig.defaultConfiguration = isDefault;
-    this.configChange.emit(formConfig);
+    return formConfig;
+  }
+  saveConfig() {
+    var _a;
+    if (((_a = this._tempGroups) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+      ApplicationUtils.alert(this.getMessage("snkFormConfig.confirm.title"), this.getMessage("snkFormConfig.confirm.group"));
+      return;
+    }
+    const formConfig = this.buildConfigToSave();
     this._formConfigChanged = false;
     this._optionFormConfigChanged = false;
+    ConfigStorage.saveFormConfig(formConfig, this.configName)
+      .then((response) => {
+      if ((response === null || response === void 0 ? void 0 : response.resource) != undefined) {
+        ApplicationUtils.info(this.getMessage("snkFormConfig.info.successfullyConfigSaved"), { iconName: "check" });
+        this.configChange.emit(formConfig);
+      }
+    });
   }
   applyOptionConfig() {
     if (this._optionFormConfigChanged === true && this._optionFormConfigSelected != undefined) {
@@ -239,12 +250,12 @@ export class SnkFormConfig {
       this.openConfirmDialog(this.getMessage("snkFormConfig.confirm.exit")).then((canClose) => {
         if (canClose) {
           this._formConfigChanged = false;
-          this.setShowFormConfig(false);
+          this.configClose.emit();
         }
       });
     }
     else {
-      this.setShowFormConfig(false);
+      this.configClose.emit();
     }
   }
   openConfirmDialog(msg = "", title = this.getMessage("snkFormConfig.confirm.title")) {
@@ -448,9 +459,8 @@ export class SnkFormConfig {
     this._sortableGroup.on(CONFIG_EVENTS.dragStop, (evt) => this.controlStopDraggingGroup(evt));
   }
   loadUserConfig() {
-    var _a;
     if (this._application != undefined) {
-      this._application.fetchUserAvailableConfigs((_a = this.parentForm) === null || _a === void 0 ? void 0 : _a.configName)
+      this._application.fetchUserAvailableConfigs(this.configName)
         .then((userConfig) => {
         this._formConfigOptions = userConfig;
         let isDefault = this._formConfig != undefined ? this._formConfig.defaultConfiguration : true;
@@ -502,14 +512,13 @@ export class SnkFormConfig {
     }
   }
   loadConfigByUser() {
-    var _a;
     if (this._application != undefined) {
       const option = this._optionFormConfigSelected;
       const fetchActionName = (option === null || option === void 0 ? void 0 : option.origin) === UserConfigType.DEFAULT ? "fetchDefaultConfig" :
         (option === null || option === void 0 ? void 0 : option.origin) === UserConfigType.USER ? "fetchLegacyConfig" :
           undefined;
       if (fetchActionName != undefined) {
-        this._application[fetchActionName]((_a = this.parentForm) === null || _a === void 0 ? void 0 : _a.configName)
+        this._application[fetchActionName](this.configName)
           .then((formConfig) => {
           if (formConfig != undefined) {
             this._formConfig = formConfig;
@@ -766,9 +775,6 @@ export class SnkFormConfig {
       this.onFilterChange(filterValue);
     }
   }
-  setShowFormConfig(value) {
-    this.parentForm.setShowFormConfig(value);
-  }
   changeTabSelected(tabSelected) {
     this._tabSelected = tabSelected.index;
     const selectorTab = this._formContainer.querySelector("div#tab" + tabSelected.index);
@@ -1007,24 +1013,22 @@ export class SnkFormConfig {
         },
         "defaultValue": "{} as IFormConfig"
       },
-      "parentForm": {
-        "type": "unknown",
+      "configName": {
+        "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "HTMLSnkFormElement",
-          "resolved": "HTMLSnkFormElement",
-          "references": {
-            "HTMLSnkFormElement": {
-              "location": "global"
-            }
-          }
+          "original": "string",
+          "resolved": "string",
+          "references": {}
         },
         "required": false,
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Representa o elemento pai do componente."
-        }
+          "text": "Nome usado para guardar/recuperar as configura\u00E7\u00F5es do formul\u00E1rio."
+        },
+        "attribute": "config-name",
+        "reflect": true
       }
     };
   }
@@ -1062,6 +1066,21 @@ export class SnkFormConfig {
             }
           }
         }
+      }, {
+        "method": "configClose",
+        "name": "configClose",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Evento disparado ao fechar as configura\u00E7\u00F5es."
+        },
+        "complexType": {
+          "original": "void",
+          "resolved": "void",
+          "references": {}
+        }
       }];
   }
   static get watchers() {

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

@@ -1,6 +1,6 @@
 import { h } from '@stencil/core';
 import TaskbarProcessor from '../snk-taskbar/processor/taskbar-processor';
-import ConfigurableElementsStorage from '../snk-configurator/subcomponents/configModalProvider/configurableElementsStorage';
+import { ConfigStorage } from '../../lib/configs/ConfigStorage';
 export class SnkGrid {
   constructor() {
     this._topTaskbarProcessor = new TaskbarProcessor({
@@ -10,33 +10,67 @@ export class SnkGrid {
       "snkGridHeaderTaskbar.unselected": ["REFRESH"],
       "snkGridHeaderTaskbar.selected": ["UPDATE", "CLONE", "REMOVE", "MORE_OPTIONS", "DIVIDER", "REFRESH"]
     });
+    this._popUpGridConfig = false;
   }
   /**
-   * Método responsável em abrir ou fechar o modal de configurações da grade.
+   * Método responsável em abrir o modal de configurações da grade.
    */
-  async setShowGridConfig(value) {
+  async showConfig() {
     if (this._grid == undefined) {
       return;
     }
-    if (value === true) {
-      this._grid.openGridConfig();
-    }
-    else {
-      this._grid.closeGridConfig();
+    this.openGridConfig();
+  }
+  /**
+   * Método responsável em fechar o modal de configurações da grade.
+   */
+  async hideConfig() {
+    if (this._grid == undefined) {
+      return;
     }
+    this.closeGridConfig();
   }
   /**
    * Método responsável por setar as configurações da grade.
    */
   async setConfig(config) {
+    this.setGridConfig(config);
+  }
+  openGridConfig() {
+    this._grid.getColumnsState()
+      .then((gridColumns) => {
+      this._snkGridConfig.columns = gridColumns.filter(c => c.name);
+      this._snkGridConfig.selectedIndex = 0;
+      this._popUpGridConfig = true;
+    });
+  }
+  closeGridConfig() {
+    this._popUpGridConfig = false;
+  }
+  setGridConfig(config) {
     this._gridConfig = config;
   }
+  loadConfig() {
+    ConfigStorage.get()
+      .loadGridConfig(this.configName)
+      .then((config) => {
+      this.setGridConfig(config);
+    })
+      .catch((error) => {
+      console.warn(error);
+    });
+  }
+  saveConfig(config) {
+    this._snkGridConfig.saveConfig(config)
+      .then(() => {
+      this.changeConfig(config);
+    });
+  }
   changeConfig(config) {
+    this._grid.setColumnsState(config.columns);
+    this.closeGridConfig();
     this.configChanged.emit(config);
   }
-  componentDidRender() {
-    ConfigurableElementsStorage.setGrid(this.configName, this._element);
-  }
   componentWillLoad() {
     let parent = this._element.parentElement;
     while (parent) {
@@ -55,6 +89,7 @@ export class SnkGrid {
       }
       parent = parent.parentElement;
     }
+    this.loadConfig();
   }
   componentWillRender() {
     const headerTaskbarId = this._dataState && this._dataState.selectedRecords.length > 0 ? "snkGridHeaderTaskbar.selected" : "snkGridHeaderTaskbar.unselected";
@@ -65,7 +100,7 @@ export class SnkGrid {
     if (!this._dataUnit) {
       return undefined;
     }
-    return (h("div", { class: "snk-grid__container ez-flex ez-flex--column ez-flex-item--auto ez-padding--large" }, h("div", { class: "snk-grid__header ez-padding-bottom--medium ez-margin-bottom--medium" }, h("snk-filter-bar", { dataUnit: this._dataUnit, class: "snk-grid__filter-bar ez-align--top", configName: this.configName }), h("hr", { class: "ez-divider-vertical ez-divider--dark ez-margin-left--medium snk-grid__header-divider" }), h("snk-taskbar", { class: "ez-padding-left--medium", key: "topTaskbar", configName: this.configName, dataUnit: this._dataUnit, buttons: this._topTaskbarProcessor.buttons, disabledButtons: this._topTaskbarProcessor.disabledButtons, customButtons: this._topTaskbarProcessor.customButtons, primaryButton: "INSERT" })), h("ez-grid", { ref: ref => this._grid = ref, dataUnit: this._dataUnit, key: "grid-" + this._snkDataUnit.entityName, config: this._gridConfig, onConfigChange: (evt) => { this.changeConfig(evt.detail); }, onEzDoubleClick: () => this.gridDoubleClick.emit(), statusResolver: this.statusResolver, multipleSelection: this.multipleSelection }, h("snk-taskbar", { dataUnit: this._dataUnit, buttons: this._headerTaskbarProcessor.buttons, disabledButtons: this._headerTaskbarProcessor.disabledButtons, customButtons: this._headerTaskbarProcessor.customButtons, slot: "leftButtons", actionsList: this.actionsList })), h("div", { class: "ez-col ez-col--sd-12" }, h("slot", { name: "SnkGridFooter" }))));
+    return (h("div", { class: "snk-grid__container ez-flex ez-flex--column ez-flex-item--auto ez-padding--large" }, h("div", { class: "snk-grid__header ez-padding-bottom--medium ez-margin-bottom--medium" }, h("snk-filter-bar", { dataUnit: this._dataUnit, class: "snk-grid__filter-bar ez-align--top", configName: this.configName }), h("hr", { class: "ez-divider-vertical ez-divider--dark ez-margin-left--medium snk-grid__header-divider" }), h("snk-taskbar", { class: "ez-padding-left--medium", key: "topTaskbar", configName: this.configName, dataUnit: this._dataUnit, buttons: this._topTaskbarProcessor.buttons, disabledButtons: this._topTaskbarProcessor.disabledButtons, customButtons: this._topTaskbarProcessor.customButtons, primaryButton: "INSERT" })), h("ez-grid", { ref: ref => this._grid = ref, dataUnit: this._dataUnit, key: "grid-" + this._snkDataUnit.entityName, config: this._gridConfig, onConfigChange: (evt) => { this.saveConfig(evt.detail); }, onEzDoubleClick: () => this.gridDoubleClick.emit(), statusResolver: this.statusResolver, multipleSelection: this.multipleSelection }, h("snk-taskbar", { dataUnit: this._dataUnit, buttons: this._headerTaskbarProcessor.buttons, disabledButtons: this._headerTaskbarProcessor.disabledButtons, customButtons: this._headerTaskbarProcessor.customButtons, slot: "leftButtons", actionsList: this.actionsList })), h("div", { class: "ez-col ez-col--sd-12" }, h("slot", { name: "SnkGridFooter" })), h("ez-modal", { modalSize: "small", closeEsc: false, closeOutsideClick: false, opened: this._popUpGridConfig, onEzCloseModal: () => this.closeGridConfig() }, h("snk-grid-config", { ref: ref => this._snkGridConfig = ref, config: this._gridConfig, selectedIndex: 0, onConfigChange: (evt) => this.changeConfig(evt.detail), onConfigCancel: () => this.closeGridConfig() }))));
   }
   static get is() { return "snk-grid"; }
   static get encapsulation() { return "scoped"; }
@@ -184,7 +219,8 @@ export class SnkGrid {
     return {
       "_dataUnit": {},
       "_dataState": {},
-      "_gridConfig": {}
+      "_gridConfig": {},
+      "_popUpGridConfig": {}
     };
   }
   static get events() {
@@ -242,13 +278,26 @@ export class SnkGrid {
   }
   static get methods() {
     return {
-      "setShowGridConfig": {
+      "showConfig": {
         "complexType": {
-          "signature": "(value: boolean) => Promise<void>",
-          "parameters": [{
-              "tags": [],
-              "text": ""
-            }],
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "M\u00E9todo respons\u00E1vel em abrir o modal de configura\u00E7\u00F5es da grade.",
+          "tags": []
+        }
+      },
+      "hideConfig": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
           "references": {
             "Promise": {
               "location": "global"
@@ -257,7 +306,7 @@ export class SnkGrid {
           "return": "Promise<void>"
         },
         "docs": {
-          "text": "M\u00E9todo respons\u00E1vel em abrir ou fechar o modal de configura\u00E7\u00F5es da grade.",
+          "text": "M\u00E9todo respons\u00E1vel em fechar o modal de configura\u00E7\u00F5es da grade.",
           "tags": []
         }
       },

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

@@ -0,0 +1,166 @@
+:host {
+    /*@doc Define o espaçamento utilizado no rodapé do componente.*/
+    --snk-grid-config__footer--padding-top: var(--space--medium, 12px);
+
+    /*@doc Define o espaçamento utilizado no centro do componente.*/
+    --snk-grid-config__main--padding-right: var(--space--medium, 12px);
+
+    /*@doc Define o espaçamento utilizado no seletor de abas do componente.*/
+    --snk-grid-config__tabselector-container--padding: var(--space--medium, 12px);
+
+    /*@doc Define o espaçamento utilizado à esquerda do botão de fechar do componente.*/
+    --snk-grid-config__button-close--padding-left: var(--space--medium, 12px);
+
+    /*@doc Define a cor do texto utilizado para o titulo do componente.*/
+    --snk-grid-config__title--color: var(--title--primary, #2B3A54);
+
+    /*@doc Define o estilo da fonte utilizada para o titulo do componente.*/
+    --snk-grid-config__title--font-family: var(--font-pattern, "Roboto");
+
+    /*@doc Define o tamanho da fonte utilizada para o titulo do componente.*/
+    --snk-grid-config__title--font-size: var(--title--large, 20px);
+
+    /*@doc Define o peso do texto utilizado para o titulo do componente.*/
+    --snk-grid-config__title--font-weight: var(--text-weight--extra-large, 700);
+
+    /*@doc Define o estilo da fonte utilizada para o subtitulo do componente.*/
+    --snk-grid-config__subtitle--font-family: var(--font-pattern, "Roboto");
+
+    /*@doc Define o tamanho da fonte utilizada para o subtitulo do componente.*/
+    --snk-grid-config__subtitle--font-size: var(--text--medium, 14px);
+
+    /*@doc Define a largura da barra de rolagem do componente.*/
+    --snk-grid-config__scrollbar--width: var(--space--medium, 12px);
+
+    /*@doc Define a cor da barra de rolagem do componente.*/
+    --snk-grid-config__scrollbar--background-color-primary: var(--scrollbar--primary, #2B3A54);
+  
+    /*@doc Define a cor de fundo da barra de rolagem do componente.*/
+    --snk-grid-config__scrollbar--background-color-secondary: var(--scrollbar--secondary, #E5EAF0);
+
+    /*@doc Define o raio da borda da barra de rolagem do componente.*/
+    --snk-grid-config__scrollbar--border-radius: var(--border--radius-small, 6px);
+
+    /* @doc Define o estilo do texto do grupo da lista. */
+    --snk-grid-config__group--font-family: var(--font-pattern, "Roboto");
+
+    /* @doc Define o tamanho do texto do grupo da lista. */
+    --snk-grid-config__group--font-size: var(--text--medium, 14px);
+
+    /* @doc Define o peso do texto do grupo da lista. */
+    --snk-grid-config__group--font-weight: var(--text-weight--large, 600);
+
+    /* @doc Define o espaçamento inferior do grupo da lista. */
+    --snk-grid-config__group--padding-bottom: var(--space-small, 6px);
+
+    display: grid;
+    grid-template-rows: auto 1fr auto;
+    max-height: 100%;
+    width: 100%;
+}
+
+@media screen and (min-width: 480px) {
+    :host {
+        width: 359px;
+        max-width: 359px;
+    }
+}
+
+.padding-right--medium {
+    padding-right: var(--space--medium);
+}
+
+ez-list {
+    height: 100%;
+}
+
+.height-calc {
+    max-height: calc(100% - 24px);
+}
+
+.grid-config__footer {
+    display: flex;
+    justify-content: flex-end;
+    width: 100%;
+
+    /*public*/
+    padding-top: var(--snk-grid-config__footer--padding-top);
+}
+
+.hidden {
+    display: none;
+}
+
+.tabselector-container {
+    /*public*/
+    padding: var(--snk-grid-config__tabselector-container--padding) 0;
+}
+
+.button-close {
+    /*public*/
+    padding-left: var(--snk-grid-config__button-close--padding-left);
+}
+
+.title-container {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+}
+
+.title {
+    display: flex;
+    margin: 0;
+    line-height: normal;
+    letter-spacing: 0em;
+    text-align: left;
+
+    /*public*/
+    color: var(--snk-grid-config__title--color);
+    font-size: var(--snk-grid-config__title--font-size);
+    font-family: var(--snk-grid-config__title--font-family);
+    font-weight: var(--snk-grid-config__title--font-weight);
+}
+
+.subtitle {
+    /*public*/
+    color: var(--text--primary);
+    font-size: var(--snk-grid-config__subtitle--font-size);
+    font-family: var(--snk-grid-config__subtitle--font-family);
+}
+
+.grid-config__main {
+    overflow-y: auto;
+    scrollbar-width: thin;
+
+    /*public*/
+    scrollbar-color: var(--snk-grid-config__scrollbar--background-color-primary) var(--snk-grid-config__scrollbar--background-color-secondary);
+    padding-right: var(--snk-grid-config__main--padding-right);
+}
+
+.grid-config__main::-webkit-scrollbar-track {
+    /*public*/
+    background-color: var(--snk-grid-config__scrollbar--background-color-secondary);
+}
+
+.grid-config__main::-webkit-scrollbar-thumb {
+    /*public*/
+    background-color: var(--snk-grid-config__scrollbar--background-color-primary);
+    border-radius: var(--snk-grid-config__scrollbar--border-radius);
+}
+
+.grid-config__main::-webkit-scrollbar {
+    /*public*/
+    width: var(--snk-grid-config__scrollbar--width);
+    max-width: var(--snk-grid-config__scrollbar--width);
+    min-width: var(--snk-grid-config__scrollbar--width);
+    background-color: var(--snk-grid-config__scrollbar--background-color-secondary);
+}
+
+.group-name {
+    /*public*/
+    font-family: var(--snk-grid-config__group--font-family);
+    font-size: var(--snk-grid-config__group--font-size);
+    font-weight: var(--snk-grid-config__group--font-weight);
+    padding-bottom: var(--snk-grid-config__group--padding-bottom);
+}