@zeedhi/teknisa-components-common 1.129.0 → 1.131.0

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

@@ -639,6 +639,18 @@
   PERFORMANCE OF THIS SOFTWARE.
   ***************************************************************************** */
 
+  function __rest(s, e) {
+      var t = {};
+      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+          t[p] = s[p];
+      if (s != null && typeof Object.getOwnPropertySymbols === "function")
+          for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+              if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                  t[p[i]] = s[p[i]];
+          }
+      return t;
+  }
+
   function __decorate(decorators, target, key, desc) {
       var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
       if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
@@ -715,98 +727,8 @@
       }
   }
 
-  class ButtonOption {
-      constructor(config) {
-          this.config = config;
-      }
-      buildComponent(grid) {
-          const { type, label, portrait = true, iconName, } = this.config;
-          const orientation = portrait ? 'portrait' : 'landscape';
-          return {
-              label,
-              iconName,
-              name: `${grid.name}_export_${type}_${orientation}`,
-              component: 'ZdButton',
-              flat: true,
-              events: {
-                  click: () => grid.getReport(type, portrait),
-              },
-          };
-      }
-  }
-
-  class MultiOption {
-      constructor(config) {
-          this.config = config;
-      }
-      formatName(id, type, grid) {
-          return `${grid.name}_export_${type}_${id}`;
-      }
-      buildTooltip(option, type, grid) {
-          const { label } = option;
-          return {
-              name: this.formatName(`tooltip_${label}`, type, grid),
-              component: 'ZdTooltip',
-              bottom: true,
-              label,
-              children: [],
-          };
-      }
-      buildButton(option, type, grid) {
-          const { cssClass, label, iconName, reportParams, } = option;
-          const { portrait: optionPortrait, rowObj } = reportParams || {};
-          return {
-              name: this.formatName(`button_${label}`, type, grid),
-              component: 'ZdButton',
-              cssClass,
-              icon: true,
-              iconName,
-              events: {
-                  click: () => grid.getReport(type, optionPortrait, rowObj),
-              },
-          };
-      }
-      buildDivider(option, type, grid) {
-          const { label } = option;
-          return {
-              name: this.formatName(`divider_${label}`, type, grid),
-              component: 'ZdDivider',
-              cssClass: 'zd-my-1',
-              vertical: true,
-          };
-      }
-      buildComponent(grid) {
-          const { type, label, multiOption, } = this.config;
-          const optionComponents = multiOption.map((option) => ([
-              Object.assign(Object.assign({}, this.buildTooltip(option, type, grid)), { children: [
-                      this.buildButton(option, type, grid),
-                  ] }),
-              this.buildDivider(option, type, grid),
-          ]))
-              .flat();
-          optionComponents.pop();
-          const text = {
-              name: this.formatName('text', type, grid),
-              component: 'ZdText',
-              cssClass: 'zd-display-flex zd-align-center zd-flex-grow-1 tek-grid-export-multioption-text',
-              events: {
-                  click: ({ event }) => event === null || event === void 0 ? void 0 : event.stopPropagation(),
-              },
-              text: label || '',
-          };
-          const result = {
-              name: this.formatName('row', type, grid),
-              component: 'ZdRow',
-              cssClass: 'zd-display-flex zd-ma-0 zd-py-0 zd-gap-x-1 tek-grid-export-multioption-row',
-              children: [text, ...optionComponents],
-          };
-          return result;
-      }
-  }
-
   class GridBase {
       constructor(grid) {
-          this.exportConfigButtons = [];
           this.defaultToolbar = {};
           this.atoms = {
               TITLE: '_gridTitle',
@@ -828,20 +750,8 @@
               ACTIONS_DROPDOWN: '_actions_dropdown',
           };
           this.grid = grid;
-          this.exportConfigButtons = this.getExportConfigButtons();
           this.initializeDefaultToolbarItems();
       }
-      getOption(config) {
-          if (config.multiOption)
-              return new MultiOption(config);
-          return new ButtonOption(config);
-      }
-      getExportConfigButtons() {
-          return this.grid.exportConfig.map((config) => {
-              const option = this.getOption(config);
-              return option.buildComponent(this.grid);
-          });
-      }
       initializeDefaultToolbarItems() {
           this.defaultToolbar = {
               title: () => ({
@@ -949,7 +859,7 @@
                           name: `${this.grid.name}_columnsButton`,
                           component: 'TekGridColumnsButton',
                           isVisible: `{{GridController_${this.grid.componentId}.showColumnsButton}}`,
-                          iterableComponentName: this.grid.name,
+                          gridName: this.grid.name,
                           hideGroups: !(this.grid instanceof TekGrid),
                           ignoreColumns: `{{GridController_${this.grid.componentId}.columnsButtonIgnore}}`,
                       },
@@ -958,21 +868,15 @@
               layoutOptions: () => ({
                   name: `${this.grid.name}_layout_options`,
                   component: 'TekGridLayoutOptions',
+                  gridName: this.grid.name,
                   isVisible: `{{GridController_${this.grid.componentId}.showLayoutOptionsButton}}`,
               }),
               exportDropdown: () => ({
                   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,
+                  component: 'TekGridExportButton',
+                  grid: this.grid,
+                  gridName: this.grid.name,
+                  isVisible: `{{GridController_${this.grid.componentId}.showExportButton}}`,
               }),
               actionsDivider: (index) => ({
                   name: `${this.grid.name}_actions_divider${index}`,
@@ -1141,7 +1045,10 @@
           return toolbarItems;
       }
       loadFilterButton({ component }) {
-          this.filterButton = component;
+          this.registerFilterButton(component);
+      }
+      registerFilterButton(filterButton) {
+          this.filterButton = filterButton;
       }
       hideButtonClick({ event }) {
           if (!event.defaultPrevented) {
@@ -1243,7 +1150,14 @@
           return __awaiter(this, void 0, void 0, function* () {
               const { datasource } = this.grid;
               if (datasource instanceof TekRestDatasource || datasource instanceof TekMemoryDatasource) {
-                  const lookupColumns = this.grid.columns.filter((column) => !!column.componentProps.datasource && !column.skipLookupSearch);
+                  const searchIn = datasource.searchIn || [];
+                  const lookupColumns = this.grid.columns.filter((column) => {
+                      if (!column.componentProps.datasource || column.skipLookupSearch)
+                          return false;
+                      if (searchIn.length > 0)
+                          return searchIn.indexOf(column.name) !== -1;
+                      return true;
+                  });
                   const searchJoin = {};
                   if (search) {
                       const promises = lookupColumns.map((column) => __awaiter(this, void 0, void 0, function* () {
@@ -1581,6 +1495,95 @@
       }
   }
 
+  class ButtonOption {
+      constructor(config) {
+          this.config = config;
+      }
+      buildComponent(grid) {
+          const { type, label, portrait = true, iconName, } = this.config;
+          const orientation = portrait ? 'portrait' : 'landscape';
+          return {
+              label,
+              iconName,
+              name: `${grid.name}_export_${type}_${orientation}`,
+              component: 'ZdButton',
+              flat: true,
+              events: {
+                  click: () => grid.getReport(type, portrait),
+              },
+          };
+      }
+  }
+
+  class MultiOption {
+      constructor(config) {
+          this.config = config;
+      }
+      formatName(id, type, grid) {
+          return `${grid.name}_export_${type}_${id}`;
+      }
+      buildTooltip(option, type, grid) {
+          const { label } = option;
+          return {
+              name: this.formatName(`tooltip_${label}`, type, grid),
+              component: 'ZdTooltip',
+              bottom: true,
+              label,
+              children: [],
+          };
+      }
+      buildButton(option, type, grid) {
+          const { cssClass, label, iconName, reportParams, } = option;
+          const { portrait: optionPortrait, rowObj } = reportParams || {};
+          return {
+              name: this.formatName(`button_${label}`, type, grid),
+              component: 'ZdButton',
+              cssClass,
+              icon: true,
+              iconName,
+              events: {
+                  click: () => grid.getReport(type, optionPortrait, rowObj),
+              },
+          };
+      }
+      buildDivider(option, type, grid) {
+          const { label } = option;
+          return {
+              name: this.formatName(`divider_${label}`, type, grid),
+              component: 'ZdDivider',
+              cssClass: 'zd-my-1',
+              vertical: true,
+          };
+      }
+      buildComponent(grid) {
+          const { type, label, multiOption, } = this.config;
+          const optionComponents = multiOption.map((option) => ([
+              Object.assign(Object.assign({}, this.buildTooltip(option, type, grid)), { children: [
+                      this.buildButton(option, type, grid),
+                  ] }),
+              this.buildDivider(option, type, grid),
+          ]))
+              .flat();
+          optionComponents.pop();
+          const text = {
+              name: this.formatName('text', type, grid),
+              component: 'ZdText',
+              cssClass: 'zd-display-flex zd-align-center zd-flex-grow-1 tek-grid-export-multioption-text',
+              events: {
+                  click: ({ event }) => event === null || event === void 0 ? void 0 : event.stopPropagation(),
+              },
+              text: label || '',
+          };
+          const result = {
+              name: this.formatName('row', type, grid),
+              component: 'ZdRow',
+              cssClass: 'zd-display-flex zd-ma-0 zd-py-0 zd-gap-x-1 tek-grid-export-multioption-row',
+              children: [text, ...optionComponents],
+          };
+          return result;
+      }
+  }
+
   /**
    * Extracts properties from an object based on a list of properties
    * @param obj object whose properties will be extracted
@@ -3000,44 +3003,38 @@
               super.navigateDown();
               return;
           }
-          if (this.cellSelection && this.viewNavigate) {
+          if (this.viewNavigate) {
               this.viewNavigate('down');
               return;
           }
-          const { index } = params;
-          if (!this.groupedData.length || index === this.groupedData.length)
-              return;
-          const { uniqueKey, currentRow } = this.datasource;
-          const rowIndex = index !== undefined
-              ? index
-              : this.groupedData.findIndex((row) => {
-                  if (currentRow.group) {
-                      return row.group && row.groupValue === currentRow.groupValue;
-                  }
-                  return row[uniqueKey] && row[uniqueKey] === currentRow[uniqueKey];
-              });
-          const newRow = this.groupedData[rowIndex + 1];
-          if (!newRow || !this.isItemVisible(newRow) || newRow.groupFooter) {
-              this.navigateDown({ index: rowIndex + 1 });
-              return;
-          }
-          this.datasource.currentRow = newRow;
+          this.navigateGroupedDatasource(false, params);
       }
       navigateUp(params) {
           if (!this.isGrouped()) {
               super.navigateUp();
               return;
           }
-          if (this.cellSelection && this.viewNavigate) {
+          if (this.viewNavigate) {
               this.viewNavigate('up');
               return;
           }
+          this.navigateGroupedDatasource(true, params);
+      }
+      navigateDatasource(up) {
+          if (!this.isGrouped()) {
+              super.navigateDatasource(up);
+              return;
+          }
+          this.navigateGroupedDatasource(up);
+      }
+      navigateGroupedDatasource(up, params = {}) {
           const { index } = params;
-          if (!this.groupedData.length || index === -1)
+          if (!this.groupedData.length
+              || (!up && index === this.groupedData.length)
+              || (up && index === -1))
               return;
           const { uniqueKey, currentRow } = this.datasource;
-          let rowIndex;
-          rowIndex = index !== undefined
+          let rowIndex = index !== undefined
               ? index
               : this.groupedData.findIndex((row) => {
                   if (currentRow.group) {
@@ -3045,11 +3042,12 @@
                   }
                   return row[uniqueKey] && row[uniqueKey] === currentRow[uniqueKey];
               });
-          if (rowIndex === -1)
+          if (up && rowIndex === -1)
               rowIndex = this.groupedData.length;
-          const newRow = this.groupedData[rowIndex - 1];
+          const nextIndex = rowIndex + (up ? -1 : 1);
+          const newRow = this.groupedData[nextIndex];
           if (!newRow || !this.isItemVisible(newRow) || newRow.groupFooter) {
-              this.navigateUp({ index: rowIndex - 1 });
+              this.navigateGroupedDatasource(up, { index: nextIndex });
               return;
           }
           this.datasource.currentRow = newRow;
@@ -3172,6 +3170,9 @@
       getFilterInputs(columnName) {
           return this.gridBase.getFilterInputs(columnName);
       }
+      registerFilterButton(filterButton) {
+          this.gridBase.registerFilterButton(filterButton);
+      }
       isColumnSearchable(column) {
           return column.searchable && (!this.searchVisibleOnly || column.isVisible || column.grouped);
       }
@@ -3380,16 +3381,14 @@
    */
   class TekGridColumnsButton extends common.IterableColumnsButton {
       constructor(props) {
-          super(props);
+          super(Object.assign(Object.assign({}, props), { iterableComponentName: props.gridName || props.iterableComponentName }));
           this.hideGroups = false;
           this.aggregationDataSet = [];
           this.hideGroups = this.getInitValue('hideGroups', props.hideGroups, this.hideGroups);
           this.createAccessors();
       }
-      onCreated() {
-          super.onCreated();
-          this.controller = new TekGridColumnsButtonController(this.iterableComponent);
-          core.Loader.addController(`IterableColumnsButtonController_${this.componentId}`, this.controller);
+      createController() {
+          return new TekGridColumnsButtonController(this.iterableComponent);
       }
       getAggregationSelectData() {
           if (!this.aggregationDataSet.length) {
@@ -3402,6 +3401,67 @@
       }
   }
 
+  /**
+   * Base class for TekGrid export button/dropdown component.
+   */
+  class TekGridExportButton extends common.ComponentRender {
+      constructor(props) {
+          super(props);
+          this.gridName = this.getInitValue('gridName', props.gridName, this.gridName);
+          this.grid = this.getInitValue('grid', props.grid, this.grid);
+          this.exportConfig = this.getInitValue('exportConfig', props.exportConfig, this.exportConfig);
+          this.exportActions = this.getInitValue('exportActions', props.exportActions, this.exportActions);
+          this.children = this.getInitValue('children', props.children, []);
+          this.cssClass = this.getInitValue('cssClass', props.cssClass, this.cssClass);
+          this.createAccessors();
+          this.loadGrid();
+      }
+      getOption(config) {
+          if (config.multiOption)
+              return new MultiOption(config);
+          return new ButtonOption(config);
+      }
+      getExportConfigButtons() {
+          if (!this.grid)
+              return [];
+          const exportConfig = this.exportConfig || this.grid.exportConfig;
+          return exportConfig.map((config) => {
+              const option = this.getOption(config);
+              return option.buildComponent(this.grid);
+          });
+      }
+      loadChildren() {
+          if (!this.grid)
+              return;
+          if (this.exportActions) {
+              this.children = this.exportActions;
+              return;
+          }
+          if (this.exportConfig) {
+              this.children = this.getExportConfigButtons();
+              return;
+          }
+          this.children = this.grid.exportActions || this.getExportConfigButtons();
+      }
+      loadGrid(gridName) {
+          if (gridName)
+              this.gridName = gridName;
+          if (!this.grid && this.gridName) {
+              const grid = core.Metadata.getInstances(this.gridName)[0];
+              if (grid)
+                  this.grid = grid;
+          }
+          if (this.grid) {
+              this.gridName = this.grid.name;
+              this.loadChildren();
+          }
+      }
+      onCreated() {
+          super.onCreated();
+          this.loadGrid();
+      }
+  }
+
   class TekFilterHelper {
       static getLabel(name) {
           return core.DateHelper.getLabel(name);
@@ -3429,23 +3489,35 @@
           this.grid = this.getInitValue('grid', props.grid, undefined);
           this.showCheckboxAll = this.getInitValue('showCheckboxAll', props.showCheckboxAll, this.showCheckboxAll);
           this.createAccessors();
-          if (!this.grid)
-              this.loadGrid();
+          this.loadGrid();
       }
       loadGrid(gridName) {
           if (gridName)
               this.gridName = gridName;
-          if (!this.gridName)
-              return;
-          this.grid = core.Metadata.getInstances(this.gridName)[0];
+          if (!this.grid && this.gridName) {
+              const grid = core.Metadata.getInstances(this.gridName)[0];
+              if (grid)
+                  this.grid = grid;
+          }
+          if (this.grid) {
+              this.gridName = this.grid.name;
+              this.grid.registerFilterButton(this);
+          }
       }
       click(event) {
           this.callEvent('click', { component: this, event });
+          this.loadGrid();
+          if (!this.grid)
+              return;
           this.grid.callEvent('filterClick', { component: this.grid, event });
           if (!(event === null || event === void 0 ? void 0 : event.defaultPrevented)) {
               this.createFilterFromColumns.call(this);
           }
       }
+      onCreated() {
+          super.onCreated();
+          this.loadGrid();
+      }
       loadFilterValues({ component }) {
           const changedCompNames = [];
           const { datasource } = this.grid;
@@ -3501,7 +3573,8 @@
           });
       }
       hideFilterModal() {
-          this.filterModal.hide();
+          if (this.filterModal)
+              this.filterModal.hide();
       }
       destroyFilterModal() {
           if (this.filterModal)
@@ -3547,9 +3620,14 @@
                               },
                               {
                                   name: `${this.grid.name}-filter-close-button`,
-                                  component: 'ZdModalCloseButton',
+                                  component: 'ZdButton',
+                                  icon: true,
+                                  iconName: 'close',
+                                  flat: true,
                                   small: true,
-                                  modalName: `${this.grid.name}-filter-modal`,
+                                  events: {
+                                      click: this.hideFilterModal.bind(this),
+                                  },
                               },
                           ],
                       },
@@ -3695,15 +3773,20 @@
                   this.setFilter(filter, event, datasource.setBaseFilter.bind(datasource));
               }
               else {
+                  const structuredFilter = {};
                   Object.keys(formValue).forEach((item) => {
                       let columnName = item.split(`${this.grid.name}-filter-AND-CONTAINS-`)[1];
                       columnName = columnName.split('-').slice(0, -1).join('-'); // remove index
-                      if (formValue[item]) {
-                          filter[columnName] = formValue[item];
+                      const itemValue = formValue[item];
+                      if (itemValue && !(Array.isArray(itemValue) && !itemValue.length)) {
+                          filter[columnName] = itemValue;
+                          if (!structuredFilter[columnName])
+                              structuredFilter[columnName] = [];
+                          structuredFilter[columnName].push({ relation: 'AND', operation: 'CONTAINS', value: itemValue });
                       }
                   });
                   datasource.filter = filter;
-                  this.setFilter(filter, event, datasource.setBaseFilter.bind(datasource));
+                  this.setFilter(structuredFilter, event, datasource.setBaseFilter.bind(datasource));
               }
               this.grid.changeLayout(event);
           }
@@ -3753,7 +3836,8 @@
                           columnComponentName = `${this.grid.name}-filter-AND-CONTAINS-${column.name}-${index}`;
                       }
                       this.filterFormInputs[column.name].push(columnComponentName);
-                      const newColumnComponent = Object.assign(Object.assign(Object.assign({ label: column.label }, column.componentProps), filterItem), { name: columnComponentName });
+                      const _b = column.componentProps || {}, componentProps = __rest(_b, ["dataValueOut"]);
+                      const newColumnComponent = Object.assign(Object.assign(Object.assign({ label: column.label }, componentProps), filterItem), { name: columnComponentName });
                       if (filterItem.helperOptions) {
                           if (!newColumnComponent.events)
                               newColumnComponent.events = {};
@@ -3787,8 +3871,8 @@
   }
 
   class TekGridLayoutOptions extends common.ComponentRender {
-      constructor() {
-          super(...arguments);
+      constructor(props) {
+          super(props);
           this.currentLayoutName = '';
           this.layoutEdited = false;
           this.layouts = {};
@@ -3797,6 +3881,8 @@
           this.originalDatasourceOrder = [];
           this.originalDatasourceDynamicFilter = {};
           this.originalDatasourceFilter = {};
+          this.gridName = this.getInitValue('gridName', props.gridName, this.gridName);
+          this.createAccessors();
       }
       getParentGrid() {
           let { parent } = this;
@@ -3807,13 +3893,39 @@
           }
           return parent;
       }
+      loadGrid(gridName) {
+          if (gridName)
+              this.gridName = gridName;
+          if (this.gridName) {
+              const grid = core.Metadata.getInstances(this.gridName)[0];
+              if (grid)
+                  this.grid = grid;
+          }
+          else {
+              this.grid = this.getParentGrid();
+          }
+          if (this.grid) {
+              this.gridName = this.grid.name;
+          }
+          return this.grid;
+      }
+      onGridChangeLayout() {
+          this.layoutEdited = true;
+      }
+      registerChangeLayoutEvent() {
+          if (!this.grid || this.changeLayoutEventGrid === this.grid)
+              return;
+          this.grid.addEvent('changeLayout', this.onGridChangeLayout.bind(this));
+          this.changeLayoutEventGrid = this.grid;
+      }
       onMounted(element) {
           const _super = Object.create(null, {
               onMounted: { get: () => super.onMounted }
           });
           return __awaiter(this, void 0, void 0, function* () {
               _super.onMounted.call(this, element);
-              this.grid = this.getParentGrid();
+              this.loadGrid();
+              this.registerChangeLayoutEvent();
               this.originalDatasourceOrder = [...this.grid.datasource.order];
               this.originalDatasourceDynamicFilter = Object.assign({}, this.grid.datasource.dynamicFilter);
               this.originalDatasourceFilter = Object.assign({}, this.grid.datasource.filter);
@@ -4350,6 +4462,9 @@
       getFilterInputs(columnName) {
           return this.gridBase.getFilterInputs(columnName);
       }
+      registerFilterButton(filterButton) {
+          this.gridBase.registerFilterButton(filterButton);
+      }
       getColumn(name) {
           return super.getColumn(name);
       }
@@ -4958,6 +5073,7 @@
   exports.TekGridColumn = TekGridColumn;
   exports.TekGridColumnsButton = TekGridColumnsButton;
   exports.TekGridColumnsButtonController = TekGridColumnsButtonController;
+  exports.TekGridExportButton = TekGridExportButton;
   exports.TekGridFilterButton = TekGridFilterButton;
   exports.TekGridLayoutOptions = TekGridLayoutOptions;
   exports.TekMemoryDatasource = TekMemoryDatasource;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zeedhi/teknisa-components-common",
-  "version": "1.129.0",
+  "version": "1.131.0",
   "description": "Teknisa Components Common",
   "author": "Zeedhi <zeedhi@teknisa.com>",
   "license": "ISC",
@@ -32,5 +32,5 @@
   "peerDependencies": {
     "@zeedhi/core": "^1.97.0"
   },
-  "gitHead": "939f36be517e06f2328aba924d68b4a462ab0b58"
+  "gitHead": "d69433a80af7e19465bcdc279415daf367743b0c"
 }