@zeedhi/teknisa-components-common 1.101.0 → 1.102.0

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

@@ -1,4 +1,4 @@
-import { KeyMap, I18n, FormatterParserProvider, Messages, DatasourceFactory, Metadata, MemoryDatasource, URL, Utils, RestDatasource, Config, Accessor, Loader, DateHelper, Http, Singleton, VersionService } from '@zeedhi/core';
+import { KeyMap, I18n, FormatterParserProvider, Messages, Metadata, DatasourceFactory, MemoryDatasource, URL, Utils, RestDatasource, Config, Accessor, Loader, DateHelper, Http, Singleton, VersionService } from '@zeedhi/core';
 import { Form, Button, Tooltip, GridEditable, Grid, ComponentRender, Iterable, Carousel, IterableComponentRender as IterableComponentRender$1, Loading as Loading$1, GridColumnEditable, Report, ColumnNotFoundError, IterableColumnsButtonController, IterableColumnsButton, ModalService, SelectMultiple, TreeGridEditable, List } from '@zeedhi/common';
 import debounce from 'lodash.debounce';
 import merge from 'lodash.merge';
@@ -808,6 +808,7 @@ class GridBase {
         this.exportConfigButtons = [];
         this.atoms = {
             TITLE: '_gridTitle',
+            HIDE_BUTTON: '_hideButton',
             ADD_BUTTON: '_addButton',
             DELETE_BUTTON: '_deleteButton',
             REFRESH_BUTTON: '_refreshButton',
@@ -849,194 +850,218 @@ class GridBase {
                 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),
+                                },
+                            },
+                        ],
                     },
                 ],
             },
@@ -1045,6 +1070,14 @@ class GridBase {
     loadFilterButton({ component }) {
         this.filterButton = component;
     }
+    hideButtonClick({ event }) {
+        if (!event.defaultPrevented) {
+            const instance = Metadata.getInstance(`${this.grid.name}_toolbarDiv`);
+            if (instance) {
+                instance.isVisible = !instance.isVisible;
+            }
+        }
+    }
     addButtonClick({ event }) {
         if (this.grid.editNewRowsOnly) {
             this.grid.editingNewRows = true;
@@ -1166,6 +1199,8 @@ Messages.add({
             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',
@@ -1237,6 +1272,8 @@ Messages.add({
             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',
@@ -1308,6 +1345,8 @@ Messages.add({
             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',
@@ -1368,7 +1407,9 @@ Messages.add({
 
 class GridController {
     constructor(grid) {
+        this.openToolbar = true;
         this.grid = grid;
+        this.openToolbar = this.grid.toolbarOpened;
     }
     get gridTitle() {
         return this.grid.title;
@@ -1388,6 +1429,18 @@ class GridController {
     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;
     }
@@ -2222,6 +2275,7 @@ class TekGrid extends GridEditable {
         this.editNewRowsOnly = false;
         this.showCheckboxAllFilter = Config.gridShowCheckboxAllFilter || false;
         this.defaultFilter = {};
+        this.toolbarOpened = true;
         this.defaultLazy = false;
         this.groups = [];
         this.summary = {};
@@ -2255,6 +2309,7 @@ class TekGrid extends GridEditable {
         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;
@@ -3439,6 +3494,13 @@ class TekGridLayoutOptions extends ComponentRender {
         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];
@@ -3596,6 +3658,7 @@ class TekTreeGrid extends TreeGridEditable {
          * Show refresh button
          */
         this.showReload = true;
+        this.toolbarOpened = true;
         /**
          * Export config
          */
@@ -3656,6 +3719,7 @@ class TekTreeGrid extends TreeGridEditable {
         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;
@@ -4321,6 +4385,9 @@ Messages.add({
             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': {
@@ -4336,6 +4403,9 @@ Messages.add({
             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': {
@@ -4351,6 +4421,9 @@ Messages.add({
             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',
         },
     },
 });
@@ -4358,4 +4431,4 @@ Messages.add({
 const packageContent = require('../package.json');
 VersionService.addPackageVersion(packageContent.name, packageContent.version);
 
-export { BreadcrumbHeader, CardTitle, CrudAddButton, CrudButton, CrudCancelButton, CrudDeleteButton, CrudForm, CrudSaveButton, DynamicFilterOperations, DynamicFilterRelations, Image, IterableCarousel, IterableComponentRender, Loading, Notifications, ProductCard, TekDragGrid, TekFilterHelper, TekGrid, TekGridColumn, TekGridColumnsButton, TekGridFilterButton, TekGridLayoutOptions, TekMemoryDatasource, TekRestDatasource, TekTreeGrid, TekUserInfo, TekUserInfoList, columnAggregationValues };
+export { BreadcrumbHeader, CardTitle, CrudAddButton, CrudButton, CrudCancelButton, CrudDeleteButton, CrudForm, CrudSaveButton, DynamicFilterOperations, DynamicFilterRelations, Image, IterableCarousel, IterableComponentRender, Loading, Notifications, ProductCard, TekDragGrid, TekFilterHelper, TekGrid, TekGridColumn, TekGridColumnsButton, TekGridColumnsButtonController, TekGridFilterButton, TekGridLayoutOptions, TekMemoryDatasource, TekRestDatasource, TekTreeGrid, TekUserInfo, TekUserInfoList, columnAggregationValues };