@cdmx/wappler_ag_grid 0.0.1 → 0.0.3

package/README.md

@@ -7,3 +7,7 @@ This Custom Module provides the below features:
 5. Export to CSV button
 6. Sticky header options
 7. Custom Styles (Column Data)
+8. Custom Header Names
+9. Custom min and max widths
+10. Timezone setting for Date fields
+11. Data Manipulation

package/app_connect/components.hjson

@@ -165,6 +165,62 @@
               "defaultValue": 20,
               "help": "Number of rows to show per page"
             },
+            {
+              "name": "timezone",
+              "attribute": "timezone",
+              "title": "Timezone",
+              "type": "droplist",
+              "defaultValue": '',
+              "values": [
+              {title: 'Local', value: ''},
+              {title: 'UTC - Coordinated Universal Time', value: 'UTC'},
+              {title: 'GMT - Greenwich Mean Time', value: 'GMT'},
+              {title: 'PST - Pacific Standard Time', value: 'PST'},
+              {title: 'PDT - Pacific Daylight Time', value: 'PDT'},
+              {title: 'EST - Eastern Standard Time', value: 'EST'},
+              {title: 'EDT - Eastern Daylight Time', value: 'EDT'},
+              {title: 'CST - Central Standard Time', value: 'CST'},
+              {title: 'CDT - Central Daylight Time', value: 'CDT'},
+              {title: 'MST - Mountain Standard Time', value: 'MST'},
+              {title: 'MDT - Mountain Daylight Time', value: 'MDT'},
+              {title: 'HST - Hawaii Standard Time', value: 'HST'},
+              {title: 'AKST - Alaska Standard Time', value: 'AKST'},
+              {title: 'AKDT - Alaska Daylight Time', value: 'AKDT'},
+              {title: 'AEST - Australian Eastern Standard Time', value: 'AEST'},
+              {title: 'AEDT - Australian Eastern Daylight Time', value: 'AEDT'},
+              {title: 'ACST - Australian Central Standard Time', value: 'ACST'},
+              {title: 'ACDT - Australian Central Daylight Time', value: 'ACDT'},
+              {title: 'AWST - Australian Western Standard Time', value: 'AWST'},
+              {title: 'BST - British Summer Time', value: 'BST'},
+              {title: 'IST - Indian Standard Time', value: 'IST'},
+              {title: 'JST - Japan Standard Time', value: 'JST'},
+              {title: 'CET - Central European Time', value: 'CET'},
+              {title: 'CEST - Central European Summer Time', value: 'CEST'},
+              {title: 'EET - Eastern European Time', value: 'EET'},
+              {title: 'EEST - Eastern European Summer Time', value: 'EEST'},
+              {title: 'MSK - Moscow Standard Time', value: 'MSK'},
+              {title: 'IST - Israel Standard Time', value: 'IST'},
+              {title: 'NZST - New Zealand Standard Time', value: 'NZST'},
+              {title: 'NZDT - New Zealand Daylight Time', value: 'NZDT'},
+              {title: 'NST - Newfoundland Standard Time', value: 'NST'},
+              {title: 'NDT - Newfoundland Daylight Time', value: 'NDT'},
+              {title: 'AST - Atlantic Standard Time', value: 'AST'},
+              {title: 'ADT - Atlantic Daylight Time', value: 'ADT'},
+              {title: 'GMT+1 - Central European Standard Time', value: 'GMT+1'},
+              {title: 'GMT+2 - Eastern European Standard Time', value: 'GMT+2'},
+              {title: 'GMT+3 - Moscow Standard Time', value: 'GMT+3'},
+              {title: 'GMT+4 - Gulf Standard Time', value: 'GMT+4'},
+              {title: 'GMT+5 - Pakistan Standard Time', value: 'GMT+5'},
+              {title: 'GMT+6 - Central Asia Standard Time', value: 'GMT+6'},
+              {title: 'GMT+7 - Southeast Asia Standard Time', value: 'GMT+7'},
+              {title: 'GMT+8 - China Standard Time', value: 'GMT+8'},
+              {title: 'GMT+9 - Japan Standard Time', value: 'GMT+9'},
+              {title: 'GMT+10 - Australian Eastern Standard Time', value: 'GMT+10'},
+              {title: 'GMT+11 - Solomon Islands Time', value: 'GMT+11'},
+              {title: 'GMT+12 - New Zealand Standard Time', value: 'GMT+12'}
+              ],
+              "help": "Timezone for Date Fields"
+            },
             {
               "name": "fixedHeader",
               "attribute": "fixedHeader",
@@ -386,7 +442,213 @@
               ]
             }
           ]
+        },
+        {
+          "group": "📒 Data Manipulation",
+          "variables": [
+            {
+              "name": "data_changes",
+              "attributeStartsWith": "dmx-bind",
+              "attribute": "data_changes",
+              "title": "Configure Fields",
+              "type": "boolean",
+              "display": "fieldset",
+              "show": [
+                "dataChanges"
+              ],
+              "noChangeOnHide": true,
+              "groupEnabler": true,
+              "help": "Add custom values for the field data based on value, ex: field: status, value: false, new_value: Disabled"
+              "children": [
+                {
+                  "name": "help",
+                  "type": "static",
+                  "help": "Add custom values for the field data based on value, ex: field: status, value: false, new_value: Disabled"
+                },
+                {
+                  "name": "dataChanges",
+                  "attribute": "dmx-bind:data_changes",
+                  "title": "Fields Data",
+                  "type": "grid",
+                  "dataBindings": true,
+                  "key": "field",
+                  "jsonFormat": true,
+                  "encloseBT": true,
+                  "jsonBT": true,
+                  "initDisplay": "none",
+                  "columns": [
+                    {
+                      "field": "field",
+                      "caption": "Field",
+                      "size": "10%",
+                      "editable": {
+                        "type": "text"
+                      }
+                    },
+                    {
+                      "field": "value",
+                      "caption": "Value",
+                      "size": "10%",
+                      "editable": {
+                        "type": "text"
+                      }
+                    },
+                    {
+                      field: "new_value",
+                      caption: "New Value",
+                      size: "10%",
+                      editable: {
+                        type: "text"
+                      }
+                    }
+                  ],
+                  "newRecord": {
+                    "name": "",
+                    "value": "",
+                    "field": "",
+                    "new_value": ""
+                  }
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "group": "📒 Custom Headers",
+          "variables": [
+            {
+              "name": "cnames",
+              "attributeStartsWith": "dmx-bind",
+              "attribute": "cnames",
+              "title": "Configure Header Names",
+              "type": "boolean",
+              "display": "fieldset",
+              "show": [
+                "listCustomNames"
+              ],
+              "noChangeOnHide": true,
+              "groupEnabler": true,
+              "help": "Add custom headers to column"
+              "children": [
+                {
+                  "name": "help",
+                  "type": "static",
+                  "help": "Add custom headers to column"
+                },
+                {
+                  "name": "listCustomNames",
+                  "attribute": "dmx-bind:cnames",
+                  "title": "Header Names",
+                  "type": "grid",
+                  "dataBindings": true,
+                  "key": "field",
+                  "jsonFormat": true,
+                  "encloseBT": true,
+                  "jsonBT": true,
+                  "initDisplay": "none",
+                  "columns": [
+                    {
+                      "field": "field",
+                      "caption": "Field",
+                      "size": "20%",
+                      "editable": {
+                        "type": "text"
+                      }
+                    },
+                    {
+                      field: "custom_name",
+                      caption: "Name",
+                      size: "20%",
+                      editable: {
+                        type: "text"
+                      },
+                      help: "Identity, Name,etc"
+                    }
+                  ],
+                  "newRecord": {
+                    "name": "",
+                    "value": "",
+                    "field": "",
+                    "custom_name": ""
+                  }
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "group": "📒 Custom Widths",
+          "variables": [
+            {
+              "name": "cwidths",
+              "attributeStartsWith": "dmx-bind",
+              "attribute": "cwidths",
+              "title": "Configure Custom Widths",
+              "type": "boolean",
+              "display": "fieldset",
+              "show": [
+                "listCustomWidths",
+              ],
+              "noChangeOnHide": true,
+              "groupEnabler": true,
+              "help": "Add custom widths for the field"
+              "children": [
+                {
+                  "name": "help",
+                  "type": "static",
+                  "help": "Add custom widths for the field"
+                },
+                {
+                  "name": "listCustomWidths",
+                  "attribute": "dmx-bind:cwidths",
+                  "title": "Column Name",
+                  "type": "grid",
+                  "dataBindings": true,
+                  "key": "field",
+                  "jsonFormat": true,
+                  "encloseBT": true,
+                  "jsonBT": true,
+                  "initDisplay": "none",
+                  "columns": [
+                    {
+                      "field": "field",
+                      "caption": "Field",
+                      "size": "20%",
+                      "editable": {
+                        "type": "text"
+                      }
+                    },
+                    {
+                      field: "min_width",
+                      caption: "Min Width",
+                      size: "20%",
+                      editable: {
+                        type: "text"
+                      },
+                      help: "Min Width",
+                    },
+                    {
+                      field: "max_width",
+                      caption: "Max Width",
+                      size: "20%",
+                      editable: {
+                        type: "text"
+                      },
+                      help: "Max Width",
+                    }
+                  ],
+                  "newRecord": {
+                    "name": "",
+                    "value": "",
+                    "field": "",
+                    "custom_name": ""
+                  }
+                }
+              ]
+            }
+          ]
         }
+
       ],
       "actionsScheme": [],
       "children": [],

package/dmx-ag-grid.js

@@ -4,6 +4,9 @@ dmx.Component('ag-grid', {
     rowData: [],
     column_defs: [],
     cstyles: null,
+    cnames: null,
+    cwidths: null,
+    data_changes: null,
     gridInstance: null,
     domLayout: 'autoHeight',
     enableCellTextSelection: true,
@@ -34,71 +37,31 @@ dmx.Component('ag-grid', {
     fixedHeader: false,
     topbarClass: null,
     fixedHeaderOffset: 100,
-    fixedTopOffset: 80
+    fixedTopOffset: 80,
+    fixedHorizonatalScroll: false,
+    timezone: null
   },
 
   attributes: {
-    id: {
-      default: null
-    },
-    rowData: {
-      type: Array,
-      default: []
-    },
-    column_defs: {
-      type: Array,
-      default: []
-    },
-    cstyles: {
-      type: Object,
-      default: {}
-    },
-    data: {
-      type: Array,
-      default: []
-    },
-    domLayout: {
-      default: 'autoHeight'
-    },
-    enableCellTextSelection: {
-      type: Boolean,
-      default: true
-    },
-    rowSelection: {
-      type: Boolean,
-      default: false
-    },
-    suppressRowDeselection: {
-      type: Boolean,
-      default: false
-    },
-    pagination: {
-      type: Boolean,
-      default: true
-    },
-    paginationPageSize: {
-      default: 20
-    },
-    rowHeight: {
-      type: Number,
-      default: null
-    },
-    headerHeight: {
-      type: Number,
-      default: null
-    },
-    suppressRowClickSelection: {
-      type: Boolean,
-      default: false
-    },
-    suppressMenuHide: {
-      type: Boolean,
-      default: false
-    },
-    suppressMovableColumns: {
-      type: Boolean,
-      default: false
-    },
+    id: { default: null },
+    rowData: { type: Array, default: [] },
+    column_defs: { type: Array, default: [] },
+    cstyles: { type: Object, default: {} },
+    cnames: { type: Object, default: {} },
+    cwidths: { type: Object, default: {} },
+    data_changes: { type: Object, default: {} },
+    data: { type: Array, default: [] },
+    domLayout: { default: 'autoHeight' },
+    enableCellTextSelection: { type: Boolean, default: true },
+    rowSelection: { type: Boolean, default: false },
+    suppressRowDeselection: { type: Boolean, default: false },
+    pagination: { type: Boolean, default: true },
+    paginationPageSize: { default: 20 },
+    rowHeight: { type: Number, default: null },
+    headerHeight: { type: Number, default: null },
+    suppressRowClickSelection: { type: Boolean, default: false },
+    suppressMenuHide: { type: Boolean, default: false },
+    suppressMovableColumns: { type: Boolean, default: false },
     enableCellExpressions: {
       type: Boolean,
       default: false
@@ -173,7 +136,9 @@ dmx.Component('ag-grid', {
     fixedTopOffset: {
       type: Number,
       default: 80
-    }
+    },
+    fixedHorizonatalScroll: { type: Boolean, default: false },
+    timezone: {type: Text, default: '' }
   },
 
   methods: {
@@ -190,7 +155,9 @@ dmx.Component('ag-grid', {
     const fixedHeader = this.props.fixedHeader;
     const fixedHeaderOffset = this.props.fixedHeaderOffset;
     const topbarClass = this.props.topbarClass;
-    const fixedTopOffset = this.props.fixedTopOffset
+    const fixedTopOffset = this.props.fixedTopOffset;
+    const timezone = this.props.timezone || false;
+    const dataChanges = this.props.data_changes;
     let columnDefs = [];
     let exportToCSV = this.props.exportToCSV;
     if (!rowData || rowData.length === 0) {
@@ -238,9 +205,9 @@ dmx.Component('ag-grid', {
             hour: 'numeric',
             minute: 'numeric',
             hour12: true,
-            timeZone: 'UTC'
+            timeZone: timezone
           };
-          return date.toLocaleString('en-GB', options).toUpperCase();
+          return date.toLocaleString('en-IN', options).toUpperCase();
         } else {
           const options = {
             day: '2-digit',
@@ -250,7 +217,7 @@ dmx.Component('ag-grid', {
             minute: 'numeric',
             hour12: true
           };
-          return date.toLocaleString('en-GB', options).toUpperCase();
+          return date.toLocaleString('en-IN', options).toUpperCase();
         }
       }
     }
@@ -280,7 +247,16 @@ dmx.Component('ag-grid', {
         return 'text';
       }
     }
-    console.log(this.props.cstyles)
+    function getValueGetter(key, dataChanges) {
+      return function(params) {
+        let value = params.data[key];
+        if (dataChanges.hasOwnProperty(key)) {
+          const change = dataChanges[key];
+          value = change.new_value;
+        }
+        return value;
+      };
+    }
     if (Array.isArray(this.props.column_defs) && this.props.column_defs.length > 0) {
       columnDefs = this.props.column_defs;
     } else {
@@ -314,7 +290,7 @@ dmx.Component('ag-grid', {
           }
         } else if (dataType === 'date') {
           filter = 'agDateColumnFilter';
-          valueFormatter = (params) => formatTime(params, false);
+          valueFormatter = (params) => formatTime(params, timezone);
         } else {
           filter = 'agTextColumnFilter';
           valueFormatter = blankOrNullValueFormatter;
@@ -329,6 +305,9 @@ dmx.Component('ag-grid', {
             filterValueGetter = eval(`(params) => ${definition.filterGetter}`);
           }
         }
+        else {
+          valueGetter = getValueGetter(key, dataChanges);
+        }
         function extractConditionParts(condition) {
           const parts = condition.match(/(.+?)(===|==|!=|>|<|>=|<=)(.+)/);
           if (parts) {
@@ -373,14 +352,28 @@ const cstyles = this.props.cstyles
   }
   return null;
 }
+        cnames = this.props.cnames
+        cwidths = this.props.cwidths
+        if (cnames.hasOwnProperty(key)) {
+        console.log(key)
+        const cname = cnames[key]
+        headerName = cname ? cname.custom_name : humanize(key);
+        }
+        else {
+          headerName = humanize(key);
+        }
         return {
-          headerName: humanize(key),
+          headerName: headerName,
           field: key,
           filter: filter,
           valueFormatter: valueFormatter,
           valueGetter: valueGetter,
           filterValueGetter: filterValueGetter,
-          cellStyle: applyCellStyle
+          cellStyle: applyCellStyle,
+          ...(cwidths.hasOwnProperty(key) && {
+            minWidth: parseInt(cwidths[key].min_width),
+            maxWidth: parseInt(cwidths[key].max_width),
+          }),
         };
       });
     }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@cdmx/wappler_ag_grid",
-    "version": "0.0.1",
+    "version": "0.0.3",
     "type": "module",
     "description": "App Connect module for AG Grid Table Generation",
     "license": "MIT",