@cdmx/wappler_ag_grid 0.4.0 → 0.4.2

package/app_connect/components.hjson

@@ -253,6 +253,14 @@
               ],
               "help": "Timezone for Date Fields"
             },
+            {
+              "name": "dateFormat",
+              "attribute": "date_format",
+              "title": "Date Format",
+              "type": "text",
+              "defaultValue": "dd/MM/yyyy HH:mm A",
+              "help": "Date Format"
+            },
             {
               "name": "fixedHeader",
               "attribute": "dmx-bind:fixed_header",
@@ -834,6 +842,7 @@
               "show": [
                 "hideFields",
                 "hideFilters",
+                "hideSort",
               ],
               "noChangeOnHide": true,
               "groupEnabler": true,
@@ -852,6 +861,13 @@
                   "title": "Hide Filters",
                   "type": "text",
                   "initDisplay": "none"
+                },
+                {
+                  "name": "hideSort",
+                  "attribute": "hide_sort",
+                  "title": "Hide Sort Filters",
+                  "type": "text",
+                  "initDisplay": "none"
                 }
               ]
             }
@@ -878,7 +894,12 @@
                 "viewActionTitle",
                 "viewActionTooltip",
                 "viewActionBtnClass",
-                "viewActionIconClass"
+                "viewActionIconClass",
+                "deleteActionBtn",
+                "deleteActionTitle",
+                "deleteActionTooltip",
+                "deleteActionBtnClass",
+                "deleteActionIconClass"
               ],
               "noChangeOnHide": true,
               "groupEnabler": true,
@@ -923,7 +944,7 @@
                 {
                   "name": "editActionIconClass",
                   "attribute": "edit_action_icon_class",
-                  "title": "Edit Action IconClass",
+                  "title": "Edit Action Icon Class",
                   "type": "text",
                   "defaultValue": 'fas fa-pencil-alt'
                 },
@@ -957,10 +978,45 @@
                 },
                 {
                   "name": "viewActionIconClass",
-                  "attribute": "edit_action_icon_class",
+                  "attribute": "view_action_icon_class",
                   "title": "View Action IconClass",
                   "type": "text",
                   "defaultValue": 'fas fa-eye'
+                },
+                {
+                  "name": "deleteActionBtn",
+                  "attribute": "dmx-bind:delete_action_btn",
+                  "title": "Delete Action Button",
+                  "type": "boolean",
+                  "defaultValue": ''
+                },
+                {
+                  "name": "deleteActionTitle",
+                  "attribute": "delete_action_title",
+                  "title": "Delete Action Button Title",
+                  "type": "text",
+                  "defaultValue": ''
+                },
+                {
+                  "name": "deleteActionTooltip",
+                  "attribute": "delete_action_tooltip",
+                  "title": "Delete Action Button Tooltip",
+                  "type": "text",
+                  "defaultValue": ''
+                },
+                {
+                  "name": "deleteActionBtnClass",
+                  "attribute": "delete_action_btn_class",
+                  "title": "Delete Action Button Class",
+                  "type": "text",
+                  "defaultValue": 'btn-danger btn-xs'
+                },
+                {
+                  "name": "deleteActionIconClass",
+                  "attribute": "delete_action_icon_class",
+                  "title": "Delete Action Icon Class",
+                  "type": "text",
+                  "defaultValue": 'fas fa-trash'
                 }
               ]
             }
@@ -1434,6 +1490,40 @@
       "allowedOn": {
         "dmx-ag-grid": true
       }
+    },
+    {
+      "name": "dmx-ag-grid-delete-clicked",
+      "attributeStartsWith": "dmx-on",
+      "attribute": "row_action_delete",
+      "display": "fieldset",
+      "title": "Delete Clicked",
+      "icon": "fa fa-lg fa-chevron-right",
+      "groupTitle": "Grid Events",
+      "groupIcon": "fa fa-lg fa-cubes",
+      "defaultValue": false,
+      "show": [
+        "rowActionDelete"
+      ],
+      "noChangeOnHide": true,
+      "type": "boolean",
+      "groupEnabler": true,
+      "children": [
+        {
+          "name": "rowActionDelete",
+          "attributeStartsWith": "dmx-on",
+          "attribute": "row_action_delete",
+          "isValue": true,
+          "actionsPicker": true,
+          "title": "Action:",
+          "type": "text",
+          "help": "Choose the action to execute.",
+          "defaultValue": "",
+          "initDisplay": "none"
+        }
+      ],
+      "allowedOn": {
+        "dmx-ag-grid": true
+      }
     }
   ],
   "static_events": []

package/dmx-ag-grid.js

@@ -37,7 +37,9 @@ dmx.Component('ag-grid', {
     suppress_property_names_check: { type: Boolean, default: false },
     hide_id_field: { type: Boolean, default: false },
     enable_rtl: { type: Boolean, default: false },
-    locale_text: { type: Text, default: null },
+    locale_text: { type: String, default: null },
+    date_locale: { type: String, default: 'en-IN' },
+    date_format: { type: String, default: 'dd/MM/yyyy HH:mm A' },
     min_width: { type: Number, default: 150 },
     sortable: { type: Boolean, default: true },
     resizable: { type: Boolean, default: true },
@@ -60,16 +62,22 @@ dmx.Component('ag-grid', {
     edit_action_btn: { type: Boolean, default: false },
     edit_action_title: {type: String, default: '' },
     edit_action_tooltip: {type: String, default: 'Edit' },
+    edit_action_icon_class: {type: String, default: 'fas fa-pencil-alt' },
+    edit_action_btn_class: {type: String, default: 'btn-primary btn-xs' },
     view_action_btn: { type: Boolean, default: false },
     view_action_title: {type: String, default: '' },
     view_action_tooltip: {type: String, default: 'View' },
-    edit_action_icon_class: {type: String, default: 'fas fa-pencil-alt' },
-    edit_action_btn_class: {type: String, default: 'btn-primary btn-xs' },
     view_action_icon_class: {type: String, default: 'fas fa-eye' },
     view_action_btn_class: {type: String, default: 'btn-info btn-xs' },
+    delete_action_btn: { type: Boolean, default: false },
+    delete_action_title: {type: String, default: '' },
+    delete_action_tooltip: {type: String, default: 'Delete' },
+    delete_action_icon_class: {type: String, default: 'fas fa-trash' },
+    delete_action_btn_class: {type: String, default: 'btn-danger btn-xs' },
     data_binded_changes: {type: Array, default: [] },
     hide_fields: {type: Array, default: [] },
-    hide_filters: {type: Array, default: [] }
+    hide_filters: {type: Array, default: [] },
+    hide_sort: {type: Array, default: [] }
   },
 
   methods: {
@@ -97,8 +105,8 @@ dmx.Component('ag-grid', {
     const cnames = this.props.cnames
     const cwidths = this.props.cwidths
     const ctypes = this.props.ctypes
-    const enableRowClickEvent = this.props.row_click_event;
-    const enableCellClickEvent = this.props.cell_click_event;
+    const enableRowClickEvent = this.props.row_click_event && !this.props.row_action_edit  && !this.props.row_action_view && !this.props.row_checkbox_event;
+    const enableCellClickEvent = this.props.row_click_event && (this.props.row_action_edit  || this.props.row_action_view || this.props.row_checkbox_event); 
     let localeText;
     let columnDefs = [];
     let exportToCSV = this.props.export_to_csv;
@@ -133,6 +141,17 @@ dmx.Component('ag-grid', {
       const value = params.value
       return `<div onclick="cellClickEvent('${columnName}', '${value}', '${idValue}')" style="cursor: pointer;">${value}</div>`;
     }
+    onCellClicked = (event) => {
+      const rowData = event.data;
+      const columnId = event.column.colId
+      const excludedColIds = ['checkboxColumn', 'actionsColumn', 'statusColumn'];
+      if (excludedColIds.includes(columnId)) {
+        return;
+      }
+      this.set('data', rowData);
+      this.set('id', rowData.id);
+      this.dispatchEvent('row_clicked')
+    }
 
     function checkboxCellRenderer(params) {
       const idValue = params.data.id;
@@ -163,8 +182,9 @@ dmx.Component('ag-grid', {
     function actionsRenderer(params) {
       // Default button configurations (Edit and View)
       const defaultButtons = [
-          { action: 'Edit', classNames: 'btn-primary btn-xs', tooltip: 'Edit', icon: 'fas fa-pencil-alt' },
-          { action: 'View', classNames: 'btn-info btn-xs', tooltip: 'View', icon: 'fas fa-eye' },
+        { action: 'Edit', classNames: 'btn-primary btn-xs', tooltip: 'Edit', icon: 'fas fa-pencil-alt' },
+        { action: 'View', classNames: 'btn-info btn-xs', tooltip: 'View', icon: 'fas fa-eye' },
+        { action: 'Delete', classNames: 'btn-danger btn-xs', tooltip: 'Delete', icon: 'fas fa-trash' },
       ];
       // User-defined button configurations (if any)
       const buttons = params.buttons || defaultButtons;
@@ -209,8 +229,10 @@ dmx.Component('ag-grid', {
         .replace(/_id$/, '')
         .replace(/_/g, ' ')
         .trim();
+      let words = str.split(' ');
+      words = words.map(word => word.charAt(0).toUpperCase() + word.substr(1));
 
-      return str.charAt(0).toUpperCase() + str.substr(1);
+      return words.join(' ');
     }
 
     function blankOrNullValueFormatter(params) {
@@ -224,35 +246,92 @@ dmx.Component('ag-grid', {
 
       return params.value;
     }
-
-    function formatTime(params, timezone) {
-      if (params.value == null) {
-        return '-';
-      } else {
-        const date = new Date(params.value);
-        if (timezone) {
-          const options = {
-            day: '2-digit',
-            month: '2-digit',
-            year: 'numeric',
-            hour: 'numeric',
-            minute: 'numeric',
-            hour12: true,
-            timeZone: timezone
-          };
-          return date.toLocaleString('en-IN', options).toUpperCase();
-        } else {
-          const options = {
-            day: '2-digit',
-            month: '2-digit',
-            year: 'numeric',
-            hour: 'numeric',
-            minute: 'numeric',
-            hour12: true
-          };
-          return date.toLocaleString('en-IN', options).toUpperCase();
+    function formatDate(timestamp) {
+      const format = options.date_format
+      const localDate = new Date(timestamp);
+    
+      const y = localDate.getFullYear();
+      const n = localDate.getMonth();
+      const d = localDate.getDate();
+      const w = localDate.getDay();
+      const h = localDate.getHours();
+      const m = localDate.getMinutes();
+      const s = localDate.getSeconds();
+    
+      function pad(num, length) {
+        return ('0000' + num).slice(-length);
+      }
+    
+      return format.replace(/([yMdHhmsaAv])(\1+)?/g, part => {
+        switch (part) {
+          case 'yyyy':
+            return pad(y, 4);
+          case 'yy':
+            return pad(y, 2);
+          case 'y':
+            return y;
+          case 'MMMM':
+            return ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'][n];
+          case 'MMM':
+            return ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'][n];
+          case 'MM':
+            return pad(n + 1, 2);
+          case 'M':
+            return n + 1;
+          case 'dddd':
+            return ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'][w];
+          case 'ddd':
+            return ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'][w];
+          case 'dd':
+            return pad(d, 2);
+          case 'd':
+            return d;
+          case 'HH':
+            return pad(h, 2);
+          case 'H':
+            return h;
+          case 'hh':
+            return pad((h % 12) || 12, 2);
+          case 'h':
+            return (h % 12) || 12;
+          case 'mm':
+            return pad(m, 2);
+          case 'm':
+            return m;
+          case 'ss':
+            return pad(s, 2);
+          case 's':
+            return s;
+          case 'a':
+            return h < 12 ? 'am' : 'pm';
+          case 'A':
+            return h < 12 ? 'AM' : 'PM';
+          default:
+            return part; // Return unchanged for unknown format parts
         }
+      });
+    }
+    
+    function formatTime(params, timezone) {
+      const date = new Date(params.value);
+      if (!timezone) {
+        timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
       }
+      const options = {
+        timeZone: timezone,
+        year: 'numeric',
+        month: '2-digit',
+        day: '2-digit',
+        hour: 'numeric',
+        minute: 'numeric',
+        second: 'numeric',
+        hour12: false,
+      };
+    
+      const formatter = new Intl.DateTimeFormat(undefined, options);
+      const formattedDateTime = formatter.format(date);
+      return formatDate(formattedDateTime)
+
     }
     dateFilterParams = {
         comparator: function (filterLocalDateAtMidnight, cellValue) {
@@ -398,6 +477,7 @@ dmx.Component('ag-grid', {
         let filterParams;
         let minWidth;
         let hide;
+        let colId;
         
         if (dataType === 'number') {
           filter = 'agNumberColumnFilter';
@@ -436,7 +516,6 @@ dmx.Component('ag-grid', {
           }
         }
         else {
-          // valueGetter = getValueGetter(key, dataChanges);
           valueGetter = createCombinedValueGetter(key, options.data_changes, options.data_binded_changes);
           filterValueGetter = createCombinedFilterValueGetter(key, options.data_changes, options.data_binded_changes);
         }
@@ -499,6 +578,7 @@ dmx.Component('ag-grid', {
         }
         if (key =='status' && options.row_status_event) {
           cellRenderer = 'checkboxCellRenderer';
+          colId = 'statusColumn';
           filter = null;
         }
         else if (options.hide_filters && options.hide_filters.includes(key)) {
@@ -506,6 +586,13 @@ dmx.Component('ag-grid', {
         }
         else {
           cellRenderer = undefined;
+          colId = undefined;
+        }
+        if (options.hide_sort && options.hide_sort.includes(key)) {
+          sortable = false;
+        }
+        else {
+          sortable = true;
         }
         if (options.hide_id_field && key == 'id') {
           hide = true;
@@ -525,6 +612,7 @@ dmx.Component('ag-grid', {
           valueGetter: valueGetter,
           minWidth: minWidth,
           hide: hide,
+          sortable: sortable,
           filterValueGetter: filterValueGetter,
           filterParams: filterParams,
           cellStyle: applyCellStyle,
@@ -548,6 +636,7 @@ dmx.Component('ag-grid', {
           headerCheckboxSelection: true,
           headerCheckboxSelectionFilteredOnly: false,
           headerName: '',
+          colId: 'checkboxColumn',
           field: 'id', 
           filter: '',
           checkboxSelection: true,
@@ -563,6 +652,7 @@ dmx.Component('ag-grid', {
       actionsColumn = {
         headerName: 'Actions',
         field: 'action',
+        colId: 'actionsColumn',
         filter: null,
         cellRenderer: actionsRenderer,
         pinned: options.pin_actions,
@@ -598,6 +688,19 @@ dmx.Component('ag-grid', {
           },
         });
       }
+      if (options.delete_action_btn) {
+        actionsColumn.cellRendererParams.buttons.push({
+          action: options.delete_action_title,
+          classNames: options.delete_action_btn_class,
+          tooltip: options.delete_action_tooltip,
+          icon: options.delete_action_icon_class,
+          onClick: (rowData) => {
+            this.set('data', rowData);
+            this.set('id', rowData.id);
+            this.dispatchEvent('row_action_delete');
+          },
+        });
+      }
     
       columnDefs.push(actionsColumn);
     }
@@ -610,7 +713,8 @@ dmx.Component('ag-grid', {
       enableRtl: options.enable_rtl,
       noRowsOverlayComponent: '<div>No Records Found.</div>',
       onRowClicked: enableRowClickEvent ? onRowClicked : undefined,
-      rowStyle: enableRowClickEvent ? { cursor: 'pointer' } : undefined,
+      onCellClicked: enableCellClickEvent ? onCellClicked : undefined,
+      rowStyle: enableRowClickEvent || enableCellClickEvent ? { cursor: 'pointer' } : undefined,
       defaultColDef: {
         flex: 1,
         minWidth: this.props.min_width,
@@ -738,9 +842,20 @@ dmx.Component('ag-grid', {
       exportButton.style.marginBottom = '10px';
       
       exportButton.addEventListener('click', () => {
+        const excludedColumnIds = ['checkboxColumn', 'actionsColumn']; 
+        // Extracting fields and colIds from columnDefs
+        const fieldsAndColIds = gridConfig.columnDefs.map((column) => ({
+          field: column.field,
+          colId: column.colId,
+        }));
+        // Filtering out fields based on excludedColumnIds
+        const fieldsToExport = fieldsAndColIds.filter(
+          (column) => !excludedColumnIds.includes(column.colId)
+        ).map((column) => column.field);
         const params = {
           fileName: 'export.csv', // Set the desired file name here
           allColumns: true,
+          columnKeys: fieldsToExport,
           processCellCallback: function (params) {
             const columnDef = params.column.getColDef();
             const valueFormatter = columnDef.valueFormatter;
@@ -772,7 +887,8 @@ dmx.Component('ag-grid', {
     row_status_enabled: Event,
     row_status_disabled: Event,
     row_action_edit: Event,
-    row_action_view: Event
+    row_action_view: Event,
+    row_action_delete: Event
   },
 
   render: function(node) {

package/package.json

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