@zeedhi/teknisa-components-common 1.101.1 → 1.102.0

package/dist/tek-components-common.umd.js

@@ -812,6 +812,7 @@
           this.exportConfigButtons = [];
           this.atoms = {
               TITLE: '_gridTitle',
+              HIDE_BUTTON: '_hideButton',
               ADD_BUTTON: '_addButton',
               DELETE_BUTTON: '_deleteButton',
               REFRESH_BUTTON: '_refreshButton',
@@ -853,194 +854,218 @@
                   title: this.grid.title,
               },
               {
-                  name: `${this.grid.name}_spacer`,
-                  component: 'VSpacer',
+                  name: `${this.grid.name}_hideTooltip`,
+                  component: 'ZdTooltip',
+                  label: `{{GridController_${this.grid.componentId}.tooltipName}}`,
+                  bottom: true,
+                  children: [
+                      {
+                          name: `${this.grid.name}_hideButton`,
+                          component: 'ZdIcon',
+                          iconName: 'mdi-chevron-right',
+                          isVisible: `{{GridController_${this.grid.componentId}.isNotEditing}}`,
+                          cssClass: `{{GridController_${this.grid.componentId}.toolbarStyle}}`,
+                          events: {
+                              click: this.hideButtonClick.bind(this),
+                          },
+                      },
+                  ],
               },
               {
-                  name: `${this.grid.name}_notEditingSpan`,
+                  name: `${this.grid.name}_toolbarDiv`,
                   component: 'ZdTag',
-                  tag: 'span',
-                  cssStyle: 'display: flex',
-                  isVisible: `{{GridController_${this.grid.componentId}.isNotEditing}}`,
+                  tag: 'div',
+                  cssStyle: 'display: flex; align-items: center',
+                  isVisible: `{{GridController_${this.grid.componentId}.showToolbar}}`,
                   children: [
                       {
-                          name: `${this.grid.name}_add_tooltip`,
-                          component: 'ZdTooltip',
-                          label: 'TEKGRID_ADD',
-                          bottom: true,
+                          name: `${this.grid.name}_notEditingSpan`,
+                          component: 'ZdTag',
+                          tag: 'span',
+                          cssStyle: 'display: flex',
+                          isVisible: `{{GridController_${this.grid.componentId}.isNotEditing}}`,
                           children: [
                               {
-                                  name: `${this.grid.name}_addButton`,
-                                  component: 'ZdButton',
-                                  icon: true,
-                                  iconName: 'add',
-                                  isVisible: `{{GridController_${this.grid.componentId}.showAddButton}}`,
-                                  events: {
-                                      click: this.addButtonClick.bind(this),
-                                  },
+                                  name: `${this.grid.name}_add_tooltip`,
+                                  component: 'ZdTooltip',
+                                  label: 'TEKGRID_ADD',
+                                  bottom: true,
+                                  children: [
+                                      {
+                                          name: `${this.grid.name}_addButton`,
+                                          component: 'ZdButton',
+                                          icon: true,
+                                          iconName: 'add',
+                                          isVisible: `{{GridController_${this.grid.componentId}.showAddButton}}`,
+                                          events: {
+                                              click: this.addButtonClick.bind(this),
+                                          },
+                                      },
+                                  ],
                               },
-                          ],
-                      },
-                      {
-                          name: `${this.grid.name}_delete_tooltip`,
-                          component: 'ZdTooltip',
-                          label: 'TEKGRID_DELETE',
-                          bottom: true,
-                          children: [
                               {
-                                  name: `${this.grid.name}_deleteButton`,
-                                  component: 'ZdButton',
-                                  icon: true,
-                                  iconName: 'delete',
-                                  isVisible: `{{GridController_${this.grid.componentId}.showDeleteButton}}`,
-                                  disabled: `{{GridController_${this.grid.componentId}.disableDeleteButton}}`,
-                                  events: {
-                                      click: this.deleteButtonClick.bind(this),
+                                  name: `${this.grid.name}_delete_tooltip`,
+                                  component: 'ZdTooltip',
+                                  label: 'TEKGRID_DELETE',
+                                  bottom: true,
+                                  children: [
+                                      {
+                                          name: `${this.grid.name}_deleteButton`,
+                                          component: 'ZdButton',
+                                          icon: true,
+                                          iconName: 'delete',
+                                          isVisible: `{{GridController_${this.grid.componentId}.showDeleteButton}}`,
+                                          disabled: `{{GridController_${this.grid.componentId}.disableDeleteButton}}`,
+                                          events: {
+                                              click: this.deleteButtonClick.bind(this),
+                                          },
+                                      },
+                                  ],
+                              },
+                              {
+                                  name: `${this.grid.name}_divider1`,
+                                  component: 'ZdDivider',
+                                  cssClass: 'toolbar-divider',
+                                  vertical: true,
+                                  isVisible: `{{GridController_${this.grid.componentId}.showDivider1}}`,
+                              },
+                              {
+                                  name: `${this.grid.name}_refresh_tooltip`,
+                                  component: 'ZdTooltip',
+                                  label: 'TEKGRID_REFRESH',
+                                  bottom: true,
+                                  children: [
+                                      {
+                                          name: `${this.grid.name}_refreshButton`,
+                                          component: 'ZdButton',
+                                          icon: true,
+                                          iconName: 'refresh',
+                                          isVisible: `{{GridController_${this.grid.componentId}.showReloadButton}}`,
+                                          events: {
+                                              click: this.reloadGrid.bind(this),
+                                          },
+                                      },
+                                  ],
+                              },
+                              {
+                                  name: `${this.grid.name}_divider2`,
+                                  component: 'ZdDivider',
+                                  cssClass: 'toolbar-divider',
+                                  vertical: true,
+                                  isVisible: `{{GridController_${this.grid.componentId}.showDivider2}}`,
+                              },
+                              {
+                                  name: `${this.grid.name}_columns_button_tooltip`,
+                                  component: 'ZdTooltip',
+                                  label: 'TEKGRID_COLUMNS',
+                                  bottom: true,
+                                  children: [
+                                      {
+                                          name: `${this.grid.name}_columnsButton`,
+                                          component: 'TekGridColumnsButton',
+                                          isVisible: `{{GridController_${this.grid.componentId}.showColumnsButton}}`,
+                                          iterableComponentName: this.grid.name,
+                                          hideGroups: !(this.grid instanceof TekGrid),
+                                          ignoreColumns: `{{GridController_${this.grid.componentId}.columnsButtonIgnore}}`,
+                                      },
+                                  ],
+                              },
+                              {
+                                  name: `${this.grid.name}_layout_options`,
+                                  component: 'TekGridLayoutOptions',
+                                  isVisible: `{{GridController_${this.grid.componentId}.showLayoutOptionsButton}}`,
+                              },
+                              {
+                                  name: `${this.grid.name}_dividerActions`,
+                                  component: 'ZdDivider',
+                                  cssClass: 'toolbar-divider',
+                                  vertical: true,
+                                  isVisible: `{{GridController_${this.grid.componentId}.showActionAndExportButton}}`,
+                              },
+                              {
+                                  name: `${this.grid.name}_export_dropdown`,
+                                  component: 'ZdDropdown',
+                                  cssClass: 'tekgrid-actions-dropdown',
+                                  offsetY: true,
+                                  activator: {
+                                      name: `${this.grid.name}_exportButton`,
+                                      component: 'ZdButton',
+                                      icon: true,
+                                      iconName: 'fileDownload',
+                                      isVisible: `{{GridController_${this.grid.componentId}.showExportButton}}`,
                                   },
+                                  children: this.grid.exportActions || this.exportConfigButtons,
                               },
-                          ],
-                      },
-                      {
-                          name: `${this.grid.name}_divider1`,
-                          component: 'ZdDivider',
-                          cssClass: 'toolbar-divider',
-                          vertical: true,
-                          isVisible: `{{GridController_${this.grid.componentId}.showDivider1}}`,
-                      },
-                      {
-                          name: `${this.grid.name}_refresh_tooltip`,
-                          component: 'ZdTooltip',
-                          label: 'TEKGRID_REFRESH',
-                          bottom: true,
-                          children: [
                               {
-                                  name: `${this.grid.name}_refreshButton`,
-                                  component: 'ZdButton',
-                                  icon: true,
-                                  iconName: 'refresh',
-                                  isVisible: `{{GridController_${this.grid.componentId}.showReloadButton}}`,
-                                  events: {
-                                      click: this.reloadGrid.bind(this),
+                                  name: `${this.grid.name}_actions_dropdown`,
+                                  component: 'ZdDropdown',
+                                  cssClass: 'tekgrid-actions-dropdown',
+                                  offsetY: true,
+                                  activator: {
+                                      name: `${this.grid.name}_actionsButton`,
+                                      component: 'ZdButton',
+                                      icon: true,
+                                      iconName: 'more',
+                                      isVisible: `{{GridController_${this.grid.componentId}.showActionsButton}}`,
                                   },
+                                  children: this.grid.actions,
                               },
-                          ],
-                      },
-                      {
-                          name: `${this.grid.name}_divider2`,
-                          component: 'ZdDivider',
-                          cssClass: 'toolbar-divider',
-                          vertical: true,
-                          isVisible: `{{GridController_${this.grid.componentId}.showDivider2}}`,
-                      },
-                      {
-                          name: `${this.grid.name}_columns_button_tooltip`,
-                          component: 'ZdTooltip',
-                          label: 'TEKGRID_COLUMNS',
-                          bottom: true,
-                          children: [
                               {
-                                  name: `${this.grid.name}_columnsButton`,
-                                  component: 'TekGridColumnsButton',
-                                  isVisible: `{{GridController_${this.grid.componentId}.showColumnsButton}}`,
-                                  iterableComponentName: this.grid.name,
-                                  hideGroups: !(this.grid instanceof TekGrid),
-                                  ignoreColumns: `{{GridController_${this.grid.componentId}.columnsButtonIgnore}}`,
+                                  name: `${this.grid.name}_divider3`,
+                                  component: 'ZdDivider',
+                                  cssClass: 'toolbar-divider',
+                                  vertical: true,
+                                  isVisible: `{{GridController_${this.grid.componentId}.showDivider3}}`,
                               },
                           ],
                       },
                       {
-                          name: `${this.grid.name}_layout_options`,
-                          component: 'TekGridLayoutOptions',
-                          isVisible: `{{GridController_${this.grid.componentId}.showLayoutOptionsButton}}`,
-                      },
-                      {
-                          name: `${this.grid.name}_dividerActions`,
-                          component: 'ZdDivider',
-                          cssClass: 'toolbar-divider',
-                          vertical: true,
-                          isVisible: `{{GridController_${this.grid.componentId}.showActionAndExportButton}}`,
-                      },
-                      {
-                          name: `${this.grid.name}_export_dropdown`,
-                          component: 'ZdDropdown',
-                          cssClass: 'tekgrid-actions-dropdown',
-                          offsetY: true,
-                          activator: {
-                              name: `${this.grid.name}_exportButton`,
-                              component: 'ZdButton',
-                              icon: true,
-                              iconName: 'fileDownload',
-                              isVisible: `{{GridController_${this.grid.componentId}.showExportButton}}`,
+                          name: `${this.grid.name}_saveButton`,
+                          component: 'ZdButton',
+                          label: 'TEKGRID_SAVE',
+                          isVisible: `{{GridController_${this.grid.componentId}.showEditButtons}}`,
+                          small: true,
+                          events: {
+                              click: this.saveChanges.bind(this),
                           },
-                          children: this.grid.exportActions || this.exportConfigButtons,
                       },
                       {
-                          name: `${this.grid.name}_actions_dropdown`,
-                          component: 'ZdDropdown',
-                          cssClass: 'tekgrid-actions-dropdown',
-                          offsetY: true,
-                          activator: {
-                              name: `${this.grid.name}_actionsButton`,
-                              component: 'ZdButton',
-                              icon: true,
-                              iconName: 'more',
-                              isVisible: `{{GridController_${this.grid.componentId}.showActionsButton}}`,
+                          name: `${this.grid.name}_cancelButton`,
+                          component: 'ZdButton',
+                          label: 'TEKGRID_CANCEL',
+                          outline: true,
+                          cssClass: 'zd-mx-2',
+                          isVisible: `{{GridController_${this.grid.componentId}.showEditButtons}}`,
+                          small: true,
+                          events: {
+                              click: this.cancelChanges.bind(this),
                           },
-                          children: this.grid.actions,
                       },
                       {
-                          name: `${this.grid.name}_divider3`,
-                          component: 'ZdDivider',
-                          cssClass: 'toolbar-divider',
-                          vertical: true,
-                          isVisible: `{{GridController_${this.grid.componentId}.showDivider3}}`,
+                          name: `${this.grid.name}_gridSearch`,
+                          component: 'ZdSearch',
+                          cssClass: 'zd-grid-search',
+                          iterableComponentName: `${this.grid.name}`,
+                          isVisible: `{{GridController_${this.grid.componentId}.showSearchInput}}`,
                       },
-                  ],
-              },
-              {
-                  name: `${this.grid.name}_saveButton`,
-                  component: 'ZdButton',
-                  label: 'TEKGRID_SAVE',
-                  isVisible: `{{GridController_${this.grid.componentId}.showEditButtons}}`,
-                  small: true,
-                  events: {
-                      click: this.saveChanges.bind(this),
-                  },
-              },
-              {
-                  name: `${this.grid.name}_cancelButton`,
-                  component: 'ZdButton',
-                  label: 'TEKGRID_CANCEL',
-                  outline: true,
-                  cssClass: 'zd-mx-2',
-                  isVisible: `{{GridController_${this.grid.componentId}.showEditButtons}}`,
-                  small: true,
-                  events: {
-                      click: this.cancelChanges.bind(this),
-                  },
-              },
-              {
-                  name: `${this.grid.name}_gridSearch`,
-                  component: 'ZdSearch',
-                  cssClass: 'zd-grid-search',
-                  isVisible: `{{GridController_${this.grid.componentId}.showSearchInput}}`,
-              },
-              {
-                  name: `${this.grid.name}_filter_tooltip`,
-                  component: 'ZdTooltip',
-                  label: 'TEKGRID_FILTER',
-                  bottom: true,
-                  children: [
                       {
-                          name: `${this.grid.name}_filterButton`,
-                          component: 'TekGridFilterButton',
-                          grid: this.grid,
-                          gridName: this.grid.name,
-                          showCheckboxAll: this.grid.showCheckboxAllFilter,
-                          isVisible: `{{GridController_${this.grid.componentId}.showFilterButton}}`,
-                          events: {
-                              onCreated: this.loadFilterButton.bind(this),
-                          },
+                          name: `${this.grid.name}_filter_tooltip`,
+                          component: 'ZdTooltip',
+                          label: 'TEKGRID_FILTER',
+                          bottom: true,
+                          children: [
+                              {
+                                  name: `${this.grid.name}_filterButton`,
+                                  component: 'TekGridFilterButton',
+                                  grid: this.grid,
+                                  gridName: this.grid.name,
+                                  showCheckboxAll: this.grid.showCheckboxAllFilter,
+                                  isVisible: `{{GridController_${this.grid.componentId}.showFilterButton}}`,
+                                  events: {
+                                      onCreated: this.loadFilterButton.bind(this),
+                                  },
+                              },
+                          ],
                       },
                   ],
               },
@@ -1049,6 +1074,14 @@
       loadFilterButton({ component }) {
           this.filterButton = component;
       }
+      hideButtonClick({ event }) {
+          if (!event.defaultPrevented) {
+              const instance = core.Metadata.getInstance(`${this.grid.name}_toolbarDiv`);
+              if (instance) {
+                  instance.isVisible = !instance.isVisible;
+              }
+          }
+      }
       addButtonClick({ event }) {
           if (this.grid.editNewRowsOnly) {
               this.grid.editingNewRows = true;
@@ -1170,6 +1203,8 @@
               TEKGRID_BETWEEN: 'está entre',
               TEKGRID_AND: 'e',
               TEKGRID_OR: 'ou',
+              TEKGRID_HIDE: 'Esconder Ações',
+              TEKGRID_SHOW: 'Mostrar Ações',
               TEKGRID_ADD: 'Adicionar',
               TEKGRID_DELETE: 'Excluir',
               TEKGRID_REFRESH: 'Atualizar',
@@ -1241,6 +1276,8 @@
               TEKGRID_BETWEEN: 'is between',
               TEKGRID_AND: 'and',
               TEKGRID_OR: 'or',
+              TEKGRID_HIDE: 'Hide Actions',
+              TEKGRID_SHOW: 'Show Actions',
               TEKGRID_ADD: 'Add',
               TEKGRID_DELETE: 'Delete',
               TEKGRID_REFRESH: 'Refresh',
@@ -1312,6 +1349,8 @@
               TEKGRID_BETWEEN: 'está entre',
               TEKGRID_AND: 'e',
               TEKGRID_OR: 'o',
+              TEKGRID_HIDE: 'Ocultar Acciones',
+              TEKGRID_SHOW: 'Mostrar Acciones',
               TEKGRID_ADD: 'Añadir',
               TEKGRID_DELETE: 'Eliminar',
               TEKGRID_REFRESH: 'Actualizar',
@@ -1372,7 +1411,9 @@
 
   class GridController {
       constructor(grid) {
+          this.openToolbar = true;
           this.grid = grid;
+          this.openToolbar = this.grid.toolbarOpened;
       }
       get gridTitle() {
           return this.grid.title;
@@ -1392,6 +1433,18 @@
       get showSearchInput() {
           return this.grid.showSearch;
       }
+      get showToolbar() {
+          return this.openToolbar;
+      }
+      set showToolbar(value) {
+          this.openToolbar = value;
+      }
+      get toolbarStyle() {
+          return !this.openToolbar ? 'is-rotated' : '';
+      }
+      get tooltipName() {
+          return !this.openToolbar ? 'TEKGRID_SHOW' : 'TEKGRID_HIDE';
+      }
       get showReloadButton() {
           return this.grid.showReload;
       }
@@ -2226,6 +2279,7 @@
           this.editNewRowsOnly = false;
           this.showCheckboxAllFilter = core.Config.gridShowCheckboxAllFilter || false;
           this.defaultFilter = {};
+          this.toolbarOpened = true;
           this.defaultLazy = false;
           this.groups = [];
           this.summary = {};
@@ -2259,6 +2313,7 @@
           this.showSummaryTotal = this.getInitValue('showSummaryTotal', props.showSummaryTotal, this.showSummaryTotal);
           this.showCheckboxAllFilter = this.getInitValue('showCheckboxAllFilter', props.showCheckboxAllFilter, this.showCheckboxAllFilter);
           this.defaultFilter = this.getInitValue('defaultFilter', props.defaultFilter, this.defaultFilter);
+          this.toolbarOpened = this.getInitValue('toolbarOpened', props.toolbarOpened, this.toolbarOpened);
           this.editNewRowsOnly = this.getInitValue('editNewRowsOnly', props.editNewRowsOnly, this.editNewRowsOnly);
           this.mainGrid = this.getInitValue('mainGrid', props.mainGrid, this.mainGrid);
           this.actions = props.actions || this.actions;
@@ -3443,6 +3498,13 @@
           this.layouts[layout.name] = layout;
           this.saveLayouts();
       }
+      discardChanges() {
+          const layoutSelected = this.layouts[this.currentLayoutName];
+          if (this.viewApplyLayout) {
+              this.viewApplyLayout(layoutSelected);
+          }
+          this.layoutEdited = false;
+      }
       applyLayout(name, save = true) {
           this.currentLayoutName = name;
           const layoutSelected = this.layouts[name];
@@ -3600,6 +3662,7 @@
            * Show refresh button
            */
           this.showReload = true;
+          this.toolbarOpened = true;
           /**
            * Export config
            */
@@ -3660,6 +3723,7 @@
           this.exportConfig = this.getInitValue('exportConfig', props.exportConfig, this.exportConfig);
           this.showCheckboxAllFilter = this.getInitValue('showCheckboxAllFilter', props.showCheckboxAllFilter, this.showCheckboxAllFilter);
           this.defaultFilter = this.getInitValue('defaultFilter', props.defaultFilter, this.defaultFilter);
+          this.toolbarOpened = this.getInitValue('toolbarOpened', props.toolbarOpened, this.toolbarOpened);
           this.exportActions = props.exportActions || this.exportActions;
           this.actions = props.actions || this.actions;
           this.toolbarSlotProps = props.toolbarSlot !== undefined;
@@ -4325,6 +4389,9 @@
               LAYOUT: 'Layout: ',
               NEW_LAYOUT: 'Novo layout',
               DEFAULT_LAYOUT: 'Padrão',
+              LAYOUT_MODIFIED: 'O layout atual foi modificado. Crie um novo layout, sobrescreva um existente ou descarte as alterações',
+              LAYOUT_NOT_MODIFIED: 'Crie um novo layout ou aplique um dos layouts já existentes',
+              LAYOUT_DISCART_CHANGES: 'Descartar alterações',
           },
       },
       'en-US': {
@@ -4340,6 +4407,9 @@
               LAYOUT: 'Layout: ',
               NEW_LAYOUT: 'New layout',
               DEFAULT_LAYOUT: 'Default',
+              LAYOUT_MODIFIED: 'The current layout has been modified. Create a new layout, overwrite an existing one or discard changes',
+              LAYOUT_NOT_MODIFIED: 'Create a new layout or apply one of the existing layouts',
+              LAYOUT_DISCART_CHANGES: 'Discard changes',
           },
       },
       'es-CL': {
@@ -4355,6 +4425,9 @@
               LAYOUT: 'Disposición: ',
               NEW_LAYOUT: 'Nueva disposición',
               DEFAULT_LAYOUT: 'Default',
+              LAYOUT_MODIFIED: 'La disposición actual ha sido modificada. Cree una nueva disposición, sobrescriba una existente o descarte los cambios',
+              LAYOUT_NOT_MODIFIED: 'Cree una nueva disposición o aplique una de las disposiciones existentes',
+              LAYOUT_DISCART_CHANGES: 'Descartar los cambios',
           },
       },
   });
@@ -4383,6 +4456,7 @@
   exports.TekGrid = TekGrid;
   exports.TekGridColumn = TekGridColumn;
   exports.TekGridColumnsButton = TekGridColumnsButton;
+  exports.TekGridColumnsButtonController = TekGridColumnsButtonController;
   exports.TekGridFilterButton = TekGridFilterButton;
   exports.TekGridLayoutOptions = TekGridLayoutOptions;
   exports.TekMemoryDatasource = TekMemoryDatasource;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zeedhi/teknisa-components-common",
-  "version": "1.101.1",
+  "version": "1.102.0",
   "description": "Teknisa Components Common",
   "author": "Zeedhi <zeedhi@teknisa.com>",
   "license": "ISC",
@@ -32,5 +32,5 @@
   "peerDependencies": {
     "@zeedhi/core": "~1.97.0"
   },
-  "gitHead": "a8d0f3b98cda9cb8821f09e49bdef77d3ba67014"
+  "gitHead": "b97e803072580b43c8e2e83a1f467186616e42ae"
 }