@zeedhi/teknisa-components-common 1.44.0 → 1.47.0

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

@@ -590,7 +590,7 @@
   /**
    * Teknisa component
    */
-  class Loading extends common.ComponentRender {
+  class Loading extends common.Loading {
       /**
       * Creates a new instance of TekLoading
       * @param props Image Link props
@@ -1140,9 +1140,11 @@
                           columnComponentName = `${this.grid.name}-filter-AND-CONTAINS-${column.name}-${index}`;
                       }
                       this.filterFormInputs[column.name].push(columnComponentName);
-                      let newColumnComponent = Object.assign(Object.assign(Object.assign({ label: column.label }, column.componentProps), filterItem), { name: columnComponentName });
+                      const newColumnComponent = Object.assign(Object.assign(Object.assign({ label: column.label }, column.componentProps), filterItem), { name: columnComponentName });
                       if (filterItem.helperOptions) {
-                          newColumnComponent = this.getHelperValueComponent(newColumnComponent, filterItem.helperOptions, column);
+                          if (!newColumnComponent.events)
+                              newColumnComponent.events = {};
+                          newColumnComponent.events.change = this.changeHelperEvent.bind(this, column);
                       }
                       filterColumns.push(newColumnComponent);
                   });
@@ -1150,54 +1152,9 @@
           });
           return filterColumns;
       }
-      getHelperValueComponent(component, helperValues, column) {
-          return {
-              name: `${component.name}_helperspan`,
-              component: 'ZdTag',
-              tag: 'span',
-              cssClass: 'zd-display-flex',
-              grid: component.grid,
-              children: [
-                  Object.assign(Object.assign({}, component), { persistentHint: true, events: {
-                          onMounted: this.registerFilterComponentToForm.bind(this),
-                          change: this.clearFilterHelperValue.bind(this, column),
-                      } }),
-                  {
-                      name: `${component.name}_helperdropdown`,
-                      component: 'ZdDropdown',
-                      offsetY: true,
-                      activator: {
-                          name: `${component.name}_helperbutton`,
-                          component: 'ZdButton',
-                          iconName: 'magnify',
-                          icon: true,
-                          small: true,
-                          cssClass: `filter-helper-values-button ${component.showLabel !== false ? 'with-label' : ''}`,
-                      },
-                      children: this.createHelperValueOptions(component, helperValues, column),
-                  },
-              ],
-          };
-      }
-      createHelperValueOptions(component, helperValues, column) {
-          return helperValues.map((value) => ({
-              name: `${component.name}_helpervalue_${value}`,
-              component: 'ZdText',
-              cssClass: 'filter-helper-values-option',
-              text: TekFilterHelper.getLabel(value),
-              events: {
-                  click: this.helperValuesOptionClick.bind(this, component, value, column),
-              },
-          }));
-      }
-      helperValuesOptionClick(component, helperValue, column) {
-          const value = TekFilterHelper.getValue(helperValue, column);
-          const componentObject = core.Metadata.getInstance(component.name);
-          componentObject.value = value;
-          componentObject.hint = TekFilterHelper.getLabel(helperValue);
-          this.setFilterPropsHelperValue(column, component.name, helperValue);
-      }
-      setFilterPropsHelperValue(column, componentName, helperValue) {
+      changeHelperEvent(column, { component }) {
+          const { helperValue } = component;
+          const componentName = component.name;
           if (!Array.isArray(column.filterProps)) {
               column.filterProps.helperValue = helperValue;
           }
@@ -1211,14 +1168,6 @@
               });
           }
       }
-      registerFilterComponentToForm({ component }) {
-          const form = core.Metadata.getInstance(`${this.grid.name}-filter-form`);
-          form.registerInput(component);
-      }
-      clearFilterHelperValue(column, { component }) {
-          this.setFilterPropsHelperValue(column, component.name, '');
-          component.hint = '';
-      }
       loadFilterValues({ component }) {
           const { datasource } = this.grid;
           if (datasource instanceof TekRestDatasource || datasource instanceof TekMemoryDatasource) {
@@ -1693,6 +1642,8 @@
           }
           this.lazyLoad = this.getInitValue('lazyLoad', props.lazyLoad, this.lazyLoad);
           this.createAccessors();
+          this.createObjAccessors(this.dynamicFilter, 'dynamicFilter');
+          this.createObjAccessors(this.searchJoin, 'searchJoin');
           if (!this.lazyLoad) {
               this.get();
           }
@@ -1872,6 +1823,8 @@
               this.searchJoin = this.getInitValue('searchJoin', props.searchJoin, {});
           }
           this.createAccessors();
+          this.createObjAccessors(this.dynamicFilter, 'dynamicFilter');
+          this.createObjAccessors(this.searchJoin, 'searchJoin');
           this.get();
       }
       updateReservedKeys() {
@@ -2018,61 +1971,70 @@
       }
       getRowByDynamicFilter(row) {
           let filtered;
-          Object.keys(this.dynamicFilter).forEach((key) => {
-              const filterItems = this.dynamicFilter[key];
-              filterItems.forEach((item) => {
-                  if (filtered === false && item.relation === 'AND')
-                      return;
-                  if (filtered === true && item.relation === 'OR')
-                      return;
-                  const columnValue = core.Utils.normalize(row[key].toString());
-                  let value = '';
-                  if (Array.isArray(item.value)) {
-                      value = item.value.map((val) => core.Utils.normalize(val.toString()));
-                      switch (item.operation) {
-                          case 'IN':
-                              filtered = value.includes(columnValue);
-                              break;
-                          case 'NOT_IN':
-                              filtered = !value.includes(columnValue);
-                              break;
-                          case 'BETWEEN':
-                              filtered = (Number(columnValue) || columnValue) >= (Number(value[0]) || value[0])
-                                  && (Number(columnValue) || columnValue) <= (Number(value[1]) || value[1]);
-                              break;
+          try {
+              Object.keys(this.dynamicFilter).forEach((key) => {
+                  const filterItems = this.dynamicFilter[key];
+                  filterItems.forEach((item) => {
+                      if (filtered === false && item.relation === 'AND')
+                          return;
+                      if (filtered === true && item.relation === 'OR')
+                          return;
+                      const columnValue = core.Utils.normalize(row[key].toString());
+                      let value = '';
+                      if (Array.isArray(item.value)) {
+                          value = item.value.map((val) => core.Utils.normalize(val.toString()));
+                          switch (item.operation) {
+                              case 'IN':
+                                  filtered = value.includes(columnValue);
+                                  break;
+                              case 'NOT_IN':
+                                  filtered = !value.includes(columnValue);
+                                  break;
+                              case 'BETWEEN':
+                                  filtered = (Number(columnValue) || columnValue) >= (Number(value[0]) || value[0])
+                                      && (Number(columnValue) || columnValue) <= (Number(value[1]) || value[1]);
+                                  break;
+                              default:
+                                  break;
+                          }
                       }
-                  }
-                  else {
-                      value = core.Utils.normalize(item.value.toString());
-                      switch (item.operation) {
-                          case 'CONTAINS':
-                              filtered = columnValue.indexOf(value) !== -1;
-                              break;
-                          case 'NOT_CONTAINS':
-                              filtered = columnValue.indexOf(value) === -1;
-                              break;
-                          case 'EQUALS':
-                              filtered = columnValue === value;
-                              break;
-                          case 'NOT_EQUALS':
-                              filtered = columnValue !== value;
-                              break;
-                          case 'GREATER_THAN':
-                              filtered = (Number(columnValue) || columnValue) > (Number(value) || value);
-                              break;
-                          case 'LESS_THAN':
-                              filtered = (Number(columnValue) || columnValue) < (Number(value) || value);
-                              break;
-                          case 'GREATER_THAN_EQUALS':
-                              filtered = (Number(columnValue) || columnValue) >= (Number(value) || value);
-                              break;
-                          case 'LESS_THAN_EQUALS':
-                              filtered = (Number(columnValue) || columnValue) <= (Number(value) || value);
-                              break;
+                      else {
+                          value = core.Utils.normalize(item.value.toString());
+                          switch (item.operation) {
+                              case 'CONTAINS':
+                                  filtered = columnValue.indexOf(value) !== -1;
+                                  break;
+                              case 'NOT_CONTAINS':
+                                  filtered = columnValue.indexOf(value) === -1;
+                                  break;
+                              case 'EQUALS':
+                                  filtered = columnValue === value;
+                                  break;
+                              case 'NOT_EQUALS':
+                                  filtered = columnValue !== value;
+                                  break;
+                              case 'GREATER_THAN':
+                                  filtered = (Number(columnValue) || columnValue) > (Number(value) || value);
+                                  break;
+                              case 'LESS_THAN':
+                                  filtered = (Number(columnValue) || columnValue) < (Number(value) || value);
+                                  break;
+                              case 'GREATER_THAN_EQUALS':
+                                  filtered = (Number(columnValue) || columnValue) >= (Number(value) || value);
+                                  break;
+                              case 'LESS_THAN_EQUALS':
+                                  filtered = (Number(columnValue) || columnValue) <= (Number(value) || value);
+                                  break;
+                              default:
+                                  break;
+                          }
                       }
-                  }
+                  });
               });
-          });
+          }
+          catch (_a) {
+              // do nothing
+          }
           return filtered;
       }
       getRowBySearchJoin(row) {
@@ -2842,6 +2804,12 @@
           }
           column.aggregation = newValue;
       }
+      showHideTekColumn(column, { component, event, element }) {
+          if (!component.value && column.grouped)
+              column.grouped = false;
+          column.isVisible = component.value;
+          this.iterableComponent.changeLayout(event, element);
+      }
   }
 
   /**
@@ -3031,88 +2999,19 @@
   }
 
   class TekFilterHelper {
-      static formatDate(date, column) {
-          if (column.componentProps.dateFormat) {
-              return core.dayjs(date).format(column.componentProps.dateFormat);
-          }
-          return core.dayjs(date).format(core.Config.dateFormat);
-      }
       static getLabel(name) {
-          return core.I18n.translate(this.values[name].label);
+          return core.DateHelper.getLabel(name);
       }
       static getValue(name, column) {
-          if (!this.values[name])
-              return '';
-          const value = this.values[name].fn();
-          if (Array.isArray(value)) {
-              return value.map((item) => this.formatDate(item, column));
-          }
-          return this.formatDate(value, column);
+          return core.DateHelper.getValue(name, column.componentProps.dateFormat);
       }
       static register(name, label, fn) {
-          this.values[name] = {
-              label,
-              fn,
-          };
+          core.DateHelper.register(name, label, fn);
       }
       static unregister(name) {
-          delete this.values[name];
+          core.DateHelper.unregister(name);
       }
-  }
-  TekFilterHelper.values = {
-      TODAY: {
-          label: 'TEKGRID_HELPERVALUE_TODAY',
-          fn: () => core.dayjs().toDate(),
-      },
-      TOMORROW: {
-          label: 'TEKGRID_HELPERVALUE_TOMORROW',
-          fn: () => core.dayjs().add(1, 'day').toDate(),
-      },
-      YESTERDAY: {
-          label: 'TEKGRID_HELPERVALUE_YESTERDAY',
-          fn: () => core.dayjs().subtract(1, 'day').toDate(),
-      },
-      LAST_7_DAYS: {
-          label: 'TEKGRID_HELPERVALUE_LAST_7_DAYS',
-          fn: () => {
-              const end = core.dayjs().toDate();
-              const start = core.dayjs().subtract(7, 'day').toDate();
-              return [start, end];
-          },
-      },
-      NEXT_7_DAYS: {
-          label: 'TEKGRID_HELPERVALUE_NEXT_7_DAYS',
-          fn: () => {
-              const start = core.dayjs().toDate();
-              const end = core.dayjs().add(7, 'day').toDate();
-              return [start, end];
-          },
-      },
-      CURRENT_WEEK: {
-          label: 'TEKGRID_HELPERVALUE_CURRENT_WEEK',
-          fn: () => {
-              const start = core.dayjs().startOf('week').toDate();
-              const end = core.dayjs().endOf('week').toDate();
-              return [start, end];
-          },
-      },
-      CURRENT_MONTH: {
-          label: 'TEKGRID_HELPERVALUE_CURRENT_MONTH',
-          fn: () => {
-              const start = core.dayjs().startOf('month').toDate();
-              const end = core.dayjs().endOf('month').toDate();
-              return [start, end];
-          },
-      },
-      CURRENT_YEAR: {
-          label: 'TEKGRID_HELPERVALUE_CURRENT_YEAR',
-          fn: () => {
-              const start = core.dayjs().startOf('year').toDate();
-              const end = core.dayjs().endOf('year').toDate();
-              return [start, end];
-          },
-      },
-  };
+  }
 
   /* TekTreeGrid Class */
   class TekTreeGrid extends common.TreeGridEditable {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zeedhi/teknisa-components-common",
-  "version": "1.44.0",
+  "version": "1.47.0",
   "description": "Teknisa Components Common",
   "author": "Zeedhi <zeedhi@teknisa.com>",
   "license": "ISC",
@@ -28,5 +28,5 @@
   "peerDependencies": {
     "@zeedhi/core": "*"
   },
-  "gitHead": "f58aaa0da52de553088e6eb5bb4567293553e44a"
+  "gitHead": "abcaca117ec02f18fa6c8c1aef4bf6bb3582fdf7"
 }

package/tests/unit/components/tek-datasource/memory-datasource.spec.ts

@@ -1,4 +1,5 @@
 import {
+  init,
   Router,
   URL,
 } from '@zeedhi/core';
@@ -7,6 +8,14 @@ import {
 } from '../../../../src';
 
 describe('TekMemoryDatasource', () => {
+  init({
+    controllers: {
+      AppController: class AppController {
+        public value = '1';
+      },
+    },
+  });
+
   let datasource: ITekMemoryDatasource;
   let router: any;
 
@@ -56,6 +65,21 @@ describe('TekMemoryDatasource', () => {
       expect(instance.searchJoin).toEqual({ col1: ['1', '2'], col2: [2], col3: [] });
     });
 
+    it('should assign all properties with accessor', async () => {
+      const flushPromises = () => new Promise(setImmediate);
+      const instance = new TekMemoryDatasource({
+        ...datasource,
+        dynamicFilter: {
+          name: [{ operation: 'EQUALS', relation: 'AND', value: '{{AppController.value}}' }],
+        },
+        searchJoin: { col1: ['1', '2'], col2: [2], col3: [] },
+      });
+      await flushPromises();
+
+      expect(instance.dynamicFilter).toEqual({ name: [{ operation: 'EQUALS', relation: 'AND', value: '1' }] });
+      expect(instance.searchJoin).toEqual({ col1: ['1', '2'], col2: [2], col3: [] });
+    });
+
     it('should create using default parameters', async () => {
       const instance = new TekMemoryDatasource({});
 

package/tests/unit/components/tek-datasource/rest-datasource.spec.ts

@@ -1,11 +1,20 @@
 import {
-  IConfig, Config, Router, Http, URL, IDictionary,
+  IConfig, Config, Router, Http, URL, IDictionary, init,
 } from '@zeedhi/core';
 import {
   TekRestDatasource, ITekRestDatasource,
 } from '../../../../src';
 
 describe('TekRestDatasource', () => {
+  init({
+    controllers: {
+      AppController: class AppController {
+        public value = '1';
+
+        public join: string[] | number[] = ['1', '2'];
+      },
+    },
+  });
   let datasource: ITekRestDatasource;
   let router: any;
   const config: IConfig = {
@@ -82,6 +91,24 @@ describe('TekRestDatasource', () => {
       expect(instance.searchJoin).toEqual({ col1: ['1', '2'], col2: [2], col3: [] });
     });
 
+    it('should assign all properties', async () => {
+      const flushPromises = () => new Promise(setImmediate);
+      const instance = new TekRestDatasource({
+        ...datasource,
+        dynamicFilter: {
+          name: { operation: 'EQUALS', relation: 'AND', value: '{{AppController.value}}' },
+        },
+        searchJoin: { col1: '{{AppController.join}}' as any, col2: [2], col3: [] },
+      });
+      await flushPromises();
+
+      expect(instance.route).toBe('/zeedhi');
+      expect(instance.lazyLoad).toBeTruthy();
+      expect(instance.dynamicFilter).toEqual({ name: { operation: 'EQUALS', relation: 'AND', value: '1' } });
+      expect(instance.data.length).toBe(0);
+      expect(instance.searchJoin).toEqual({ col1: ['1', '2'], col2: [2], col3: [] });
+    });
+
     it('should create without lazyLoad', async () => {
       const flushPromises = () => new Promise(setImmediate);
       const instance = new TekRestDatasource({

package/tests/unit/components/tek-grid/filter-helper.spec.ts

@@ -1,10 +1,13 @@
-import { Config, dayjs } from '@zeedhi/core';
+import { Config, DateHelper, dayjs } from '@zeedhi/core';
 import { TekFilterHelper, TekGrid } from '../../../../src';
 
 describe('TekFilterHelper', () => {
   describe('getLabel', () => {
     it('should return helper label', () => {
-      expect(TekFilterHelper.getLabel('TODAY')).toBe('TEKGRID_HELPERVALUE_TODAY');
+      const dateHelperSpy = jest.spyOn(DateHelper, 'getLabel').mockImplementation((name: string) => name);
+
+      expect(TekFilterHelper.getLabel('TODAY')).toBe('TODAY');
+      dateHelperSpy.mockClear();
     });
   });
 

package/tests/unit/components/tek-grid/grid-columns-button.spec.ts

@@ -1,3 +1,4 @@
+import { Checkbox, Iterable } from '@zeedhi/common';
 import { I18n } from '@zeedhi/core';
 import { TekGrid, TekGridColumnsButton } from '../../../../src';
 import { TekGridColumnsButtonController } from '../../../../src/components/tek-grid/grid-columns-button-controller';
@@ -39,9 +40,25 @@ describe('TekGridColumnsButton', () => {
 
   describe('controller', () => {
     it('should create component controller', () => {
+      const checkbox = new Checkbox({
+        name: 'checkbox',
+        component: 'ZdCheckbox',
+        value: false,
+      });
+      const iterable = new Iterable({
+        name: 'iterable',
+        component: 'ZdIterable',
+        columns: [
+          {
+            name: 'id',
+            grouped: false,
+          },
+        ],
+      });
       const grid = new TekGrid({
         name: 'grid-1',
         component: 'TekGrid',
+        parent: iterable,
       });
       const instance = new TekGridColumnsButton({
         name: 'columns-button-2',
@@ -50,6 +67,14 @@ describe('TekGridColumnsButton', () => {
       });
       instance.onCreated();
       expect(instance.controller).toBeInstanceOf(TekGridColumnsButtonController);
+      expect(iterable.columns[0].isVisible).toBeTruthy();
+      instance.controller.showHideTekColumn(iterable.columns[0], { component: checkbox });
+      expect(iterable.columns[0].isVisible).toBeFalsy();
+
+      (iterable.columns[0] as any).grouped = true;
+      iterable.columns[0].isVisible = false;
+      instance.controller.showHideTekColumn(iterable.columns[0], { component: checkbox });
+      expect(iterable.columns[0].isVisible).toBeFalsy();
     });
 
     it('changeGroupedColumn', () => {