@zeedhi/teknisa-components-common 1.90.1 → 1.92.0

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

@@ -711,6 +711,95 @@ class TekGridDeleteRowsError extends Error {
     }
 }
 
+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 = [];
@@ -735,20 +824,15 @@ class GridBase {
         this.grid = grid;
         this.exportConfigButtons = this.getExportConfigButtons();
     }
+    getOption(config) {
+        if (config.multiOption)
+            return new MultiOption(config);
+        return new ButtonOption(config);
+    }
     getExportConfigButtons() {
         return this.grid.exportConfig.map((config) => {
-            const { type, label, portrait = true, iconName, } = config;
-            const orientation = portrait ? 'portrait' : 'landscape';
-            return {
-                label,
-                iconName,
-                name: `${this.grid.name}_export_${type}_${orientation}`,
-                component: 'ZdButton',
-                flat: true,
-                events: {
-                    click: () => this.grid.getReport(type, portrait),
-                },
-            };
+            const option = this.getOption(config);
+            return option.buildComponent(this.grid);
         });
     }
     createToolbarProps() {
@@ -1089,6 +1173,8 @@ Messages.add({
             TEKGRID_MULTIPLE_VALUE_HINT: 'Separe valores usando ";"',
             TEKGRID_EXPORT: 'Exportar',
             TEKGRID_EXPORT_AS: 'Exportar como {{ type }}',
+            TEKGRID_PORTRAIT: 'Retrato',
+            TEKGRID_LANDSCAPE: 'Paisagem',
             TEKGRID_COLUMN_VISIBLE: 'Visível',
             TEKGRID_COLUMN_GROUPED: 'Grupo',
             TEKGRID_COLUMN_AGGREGATION: 'Totalização',
@@ -1158,6 +1244,8 @@ Messages.add({
             TEKGRID_MULTIPLE_VALUE_HINT: 'Separate values using ";"',
             TEKGRID_EXPORT: 'Export',
             TEKGRID_EXPORT_AS: 'Export as {{ type }}',
+            TEKGRID_PORTRAIT: 'Portrait',
+            TEKGRID_LANDSCAPE: 'Landscape',
             TEKGRID_COLUMN_VISIBLE: 'Visible',
             TEKGRID_COLUMN_GROUPED: 'Grouped',
             TEKGRID_COLUMN_AGGREGATION: 'Aggregation',
@@ -1227,6 +1315,8 @@ Messages.add({
             TEKGRID_MULTIPLE_VALUE_HINT: 'Separe los valores usando ";"',
             TEKGRID_EXPORT: 'Exportar',
             TEKGRID_EXPORT_AS: 'Exportar como {{ type }}',
+            TEKGRID_PORTRAIT: 'Vertical',
+            TEKGRID_LANDSCAPE: 'Horizontal',
             TEKGRID_COLUMN_VISIBLE: 'Visible',
             TEKGRID_COLUMN_GROUPED: 'Grupo',
             TEKGRID_COLUMN_AGGREGATION: 'Totalización',
@@ -2080,6 +2170,15 @@ class TekGrid extends GridEditable {
             {
                 type: 'pdf',
                 label: I18n.translate('TEKGRID_EXPORT_AS', { type: 'PDF' }),
+                multiOption: [
+                    { label: I18n.translate('TEKGRID_PORTRAIT'), iconName: 'mdi-file-outline' },
+                    {
+                        label: I18n.translate('TEKGRID_LANDSCAPE'),
+                        iconName: 'mdi-file-outline',
+                        cssClass: 'tek-grid-export-landscape',
+                        reportParams: { portrait: false },
+                    },
+                ],
             },
             {
                 type: 'xls',
@@ -2474,8 +2573,9 @@ class TekGrid extends GridEditable {
     resetFooterVariables(group) {
         this.summaryColumns.forEach((column) => {
             group.footer[column.name] = {
-                sum: 0,
                 count: 0,
+                sum: undefined,
+                avg: undefined,
                 min: undefined,
                 max: undefined,
             };
@@ -2484,17 +2584,24 @@ class TekGrid extends GridEditable {
     isUndefined(value) {
         return value === undefined || value === null;
     }
-    calcSummaryValues(summary, rowValue) {
+    calcSummaryValues(columnName, summary, rowValue) {
         if (!this.isUndefined(rowValue)) {
             summary.count += 1;
-            if (summary.min === undefined)
-                summary.min = rowValue;
-            if (summary.max === undefined)
-                summary.max = rowValue;
-            summary.min = rowValue < summary.min ? rowValue : summary.min;
-            summary.max = rowValue > summary.max ? rowValue : summary.max;
-            if (typeof rowValue === 'number') {
-                summary.sum += rowValue;
+            if (this.events.calcSummary) {
+                this.callEvent('calcSummary', {
+                    component: this, columnName, summary, rowValue,
+                });
+            }
+            else {
+                if (summary.min === undefined)
+                    summary.min = rowValue;
+                if (summary.max === undefined)
+                    summary.max = rowValue;
+                summary.min = rowValue < summary.min ? rowValue : summary.min;
+                summary.max = rowValue > summary.max ? rowValue : summary.max;
+                if (typeof rowValue === 'number') {
+                    summary.sum = (summary.sum || 0) + rowValue;
+                }
             }
         }
     }
@@ -2506,14 +2613,15 @@ class TekGrid extends GridEditable {
                 if (this.isUndefined(this.summary[columnName])) {
                     this.summary[columnName] = {
                         count: 0,
-                        sum: 0,
+                        sum: undefined,
+                        avg: undefined,
                         min: undefined,
                         max: undefined,
                     };
                 }
-                this.calcSummaryValues(this.summary[columnName], rowValue);
+                this.calcSummaryValues(columnName, this.summary[columnName], rowValue);
                 this.groups.forEach((group) => {
-                    this.calcSummaryValues(group.footer[columnName], rowValue);
+                    this.calcSummaryValues(columnName, group.footer[columnName], rowValue);
                 });
             });
         }
@@ -2536,7 +2644,12 @@ class TekGrid extends GridEditable {
                 summaryData[column.name] = currentGroup.sum;
             }
             else if (aggregation === 'AVG') {
-                summaryData[column.name] = currentGroup.sum / currentGroup.count;
+                if (currentGroup.avg) {
+                    summaryData[column.name] = currentGroup.avg;
+                }
+                else if (typeof currentGroup.sum === 'number') {
+                    summaryData[column.name] = currentGroup.sum / currentGroup.count;
+                }
             }
             else if (aggregation === 'MIN') {
                 summaryData[column.name] = currentGroup.min;
@@ -3398,10 +3511,33 @@ class TekTreeGrid extends TreeGridEditable {
             {
                 type: 'pdf',
                 label: I18n.translate('TEKGRID_EXPORT_AS', { type: 'PDF' }),
+                multiOption: [
+                    { label: I18n.translate('TEKGRID_PORTRAIT'), iconName: 'mdi-file-outline' },
+                    {
+                        label: I18n.translate('TEKGRID_LANDSCAPE'),
+                        iconName: 'mdi-file-outline',
+                        cssClass: 'tek-grid-export-landscape',
+                        reportParams: { portrait: false },
+                    },
+                ],
             },
             {
                 type: 'xls',
-                label: I18n.translate('TEKGRID_EXPORT_AS', { type: 'XLS' }),
+                label: I18n.translate('TEKGRID_EXPORT_AS', {
+                    type: `XLS ${I18n.translate('TEKGRID_WITHOUT_GROUPS')}`,
+                }),
+            },
+            {
+                type: 'xls2',
+                label: I18n.translate('TEKGRID_EXPORT_AS', {
+                    type: `XLS ${I18n.translate('TEKGRID_WITH_GROUPS')}`,
+                }),
+            },
+            {
+                type: 'xls3',
+                label: I18n.translate('TEKGRID_EXPORT_AS', {
+                    type: `XLS ${I18n.translate('TEKGRID_GRID_MIRROR')}`,
+                }),
             },
             {
                 type: 'csv',
@@ -3585,12 +3721,6 @@ let TekUserInfoController = class TekUserInfoController {
             return;
         this.versionInfo.version = value;
     }
-    get defaultEmail() {
-        return this.component.defaultEmail;
-    }
-    set defaultEmail(value) {
-        this.component.defaultEmail = value;
-    }
     get hasDefaultEmail() {
         return !!this.component.defaultEmail;
     }
@@ -3793,7 +3923,7 @@ class TekUserInfo extends UserInfo {
                                 grid: {
                                     cols: '12',
                                 },
-                                value: `{{TekUserInfoController_${this.componentId}.defaultEmail}}`,
+                                value: this.defaultEmail,
                                 readonly: `{{TekUserInfoController_${this.componentId}.hasDefaultEmail}}`,
                                 validations: {
                                     required: {},

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

@@ -715,6 +715,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;
+      }
+  }
+
   class GridBase {
       constructor(grid) {
           this.exportConfigButtons = [];
@@ -739,20 +828,15 @@
           this.grid = grid;
           this.exportConfigButtons = this.getExportConfigButtons();
       }
+      getOption(config) {
+          if (config.multiOption)
+              return new MultiOption(config);
+          return new ButtonOption(config);
+      }
       getExportConfigButtons() {
           return this.grid.exportConfig.map((config) => {
-              const { type, label, portrait = true, iconName, } = config;
-              const orientation = portrait ? 'portrait' : 'landscape';
-              return {
-                  label,
-                  iconName,
-                  name: `${this.grid.name}_export_${type}_${orientation}`,
-                  component: 'ZdButton',
-                  flat: true,
-                  events: {
-                      click: () => this.grid.getReport(type, portrait),
-                  },
-              };
+              const option = this.getOption(config);
+              return option.buildComponent(this.grid);
           });
       }
       createToolbarProps() {
@@ -1093,6 +1177,8 @@
               TEKGRID_MULTIPLE_VALUE_HINT: 'Separe valores usando ";"',
               TEKGRID_EXPORT: 'Exportar',
               TEKGRID_EXPORT_AS: 'Exportar como {{ type }}',
+              TEKGRID_PORTRAIT: 'Retrato',
+              TEKGRID_LANDSCAPE: 'Paisagem',
               TEKGRID_COLUMN_VISIBLE: 'Visível',
               TEKGRID_COLUMN_GROUPED: 'Grupo',
               TEKGRID_COLUMN_AGGREGATION: 'Totalização',
@@ -1162,6 +1248,8 @@
               TEKGRID_MULTIPLE_VALUE_HINT: 'Separate values using ";"',
               TEKGRID_EXPORT: 'Export',
               TEKGRID_EXPORT_AS: 'Export as {{ type }}',
+              TEKGRID_PORTRAIT: 'Portrait',
+              TEKGRID_LANDSCAPE: 'Landscape',
               TEKGRID_COLUMN_VISIBLE: 'Visible',
               TEKGRID_COLUMN_GROUPED: 'Grouped',
               TEKGRID_COLUMN_AGGREGATION: 'Aggregation',
@@ -1231,6 +1319,8 @@
               TEKGRID_MULTIPLE_VALUE_HINT: 'Separe los valores usando ";"',
               TEKGRID_EXPORT: 'Exportar',
               TEKGRID_EXPORT_AS: 'Exportar como {{ type }}',
+              TEKGRID_PORTRAIT: 'Vertical',
+              TEKGRID_LANDSCAPE: 'Horizontal',
               TEKGRID_COLUMN_VISIBLE: 'Visible',
               TEKGRID_COLUMN_GROUPED: 'Grupo',
               TEKGRID_COLUMN_AGGREGATION: 'Totalización',
@@ -2084,6 +2174,15 @@
               {
                   type: 'pdf',
                   label: core.I18n.translate('TEKGRID_EXPORT_AS', { type: 'PDF' }),
+                  multiOption: [
+                      { label: core.I18n.translate('TEKGRID_PORTRAIT'), iconName: 'mdi-file-outline' },
+                      {
+                          label: core.I18n.translate('TEKGRID_LANDSCAPE'),
+                          iconName: 'mdi-file-outline',
+                          cssClass: 'tek-grid-export-landscape',
+                          reportParams: { portrait: false },
+                      },
+                  ],
               },
               {
                   type: 'xls',
@@ -2478,8 +2577,9 @@
       resetFooterVariables(group) {
           this.summaryColumns.forEach((column) => {
               group.footer[column.name] = {
-                  sum: 0,
                   count: 0,
+                  sum: undefined,
+                  avg: undefined,
                   min: undefined,
                   max: undefined,
               };
@@ -2488,17 +2588,24 @@
       isUndefined(value) {
           return value === undefined || value === null;
       }
-      calcSummaryValues(summary, rowValue) {
+      calcSummaryValues(columnName, summary, rowValue) {
           if (!this.isUndefined(rowValue)) {
               summary.count += 1;
-              if (summary.min === undefined)
-                  summary.min = rowValue;
-              if (summary.max === undefined)
-                  summary.max = rowValue;
-              summary.min = rowValue < summary.min ? rowValue : summary.min;
-              summary.max = rowValue > summary.max ? rowValue : summary.max;
-              if (typeof rowValue === 'number') {
-                  summary.sum += rowValue;
+              if (this.events.calcSummary) {
+                  this.callEvent('calcSummary', {
+                      component: this, columnName, summary, rowValue,
+                  });
+              }
+              else {
+                  if (summary.min === undefined)
+                      summary.min = rowValue;
+                  if (summary.max === undefined)
+                      summary.max = rowValue;
+                  summary.min = rowValue < summary.min ? rowValue : summary.min;
+                  summary.max = rowValue > summary.max ? rowValue : summary.max;
+                  if (typeof rowValue === 'number') {
+                      summary.sum = (summary.sum || 0) + rowValue;
+                  }
               }
           }
       }
@@ -2510,14 +2617,15 @@
                   if (this.isUndefined(this.summary[columnName])) {
                       this.summary[columnName] = {
                           count: 0,
-                          sum: 0,
+                          sum: undefined,
+                          avg: undefined,
                           min: undefined,
                           max: undefined,
                       };
                   }
-                  this.calcSummaryValues(this.summary[columnName], rowValue);
+                  this.calcSummaryValues(columnName, this.summary[columnName], rowValue);
                   this.groups.forEach((group) => {
-                      this.calcSummaryValues(group.footer[columnName], rowValue);
+                      this.calcSummaryValues(columnName, group.footer[columnName], rowValue);
                   });
               });
           }
@@ -2540,7 +2648,12 @@
                   summaryData[column.name] = currentGroup.sum;
               }
               else if (aggregation === 'AVG') {
-                  summaryData[column.name] = currentGroup.sum / currentGroup.count;
+                  if (currentGroup.avg) {
+                      summaryData[column.name] = currentGroup.avg;
+                  }
+                  else if (typeof currentGroup.sum === 'number') {
+                      summaryData[column.name] = currentGroup.sum / currentGroup.count;
+                  }
               }
               else if (aggregation === 'MIN') {
                   summaryData[column.name] = currentGroup.min;
@@ -3402,10 +3515,33 @@
               {
                   type: 'pdf',
                   label: core.I18n.translate('TEKGRID_EXPORT_AS', { type: 'PDF' }),
+                  multiOption: [
+                      { label: core.I18n.translate('TEKGRID_PORTRAIT'), iconName: 'mdi-file-outline' },
+                      {
+                          label: core.I18n.translate('TEKGRID_LANDSCAPE'),
+                          iconName: 'mdi-file-outline',
+                          cssClass: 'tek-grid-export-landscape',
+                          reportParams: { portrait: false },
+                      },
+                  ],
               },
               {
                   type: 'xls',
-                  label: core.I18n.translate('TEKGRID_EXPORT_AS', { type: 'XLS' }),
+                  label: core.I18n.translate('TEKGRID_EXPORT_AS', {
+                      type: `XLS ${core.I18n.translate('TEKGRID_WITHOUT_GROUPS')}`,
+                  }),
+              },
+              {
+                  type: 'xls2',
+                  label: core.I18n.translate('TEKGRID_EXPORT_AS', {
+                      type: `XLS ${core.I18n.translate('TEKGRID_WITH_GROUPS')}`,
+                  }),
+              },
+              {
+                  type: 'xls3',
+                  label: core.I18n.translate('TEKGRID_EXPORT_AS', {
+                      type: `XLS ${core.I18n.translate('TEKGRID_GRID_MIRROR')}`,
+                  }),
               },
               {
                   type: 'csv',
@@ -3589,12 +3725,6 @@
               return;
           this.versionInfo.version = value;
       }
-      get defaultEmail() {
-          return this.component.defaultEmail;
-      }
-      set defaultEmail(value) {
-          this.component.defaultEmail = value;
-      }
       get hasDefaultEmail() {
           return !!this.component.defaultEmail;
       }
@@ -3797,7 +3927,7 @@
                                   grid: {
                                       cols: '12',
                                   },
-                                  value: `{{TekUserInfoController_${this.componentId}.defaultEmail}}`,
+                                  value: this.defaultEmail,
                                   readonly: `{{TekUserInfoController_${this.componentId}.hasDefaultEmail}}`,
                                   validations: {
                                       required: {},

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zeedhi/teknisa-components-common",
-  "version": "1.90.1",
+  "version": "1.92.0",
   "description": "Teknisa Components Common",
   "author": "Zeedhi <zeedhi@teknisa.com>",
   "license": "ISC",
@@ -32,5 +32,5 @@
   "peerDependencies": {
     "@zeedhi/core": "*"
   },
-  "gitHead": "4ec1f5095452ff5edccef850762495eb1dfa92ee"
+  "gitHead": "00436210f319190361a5043c0815093fa6379227"
 }