@cdmx/wappler_ag_grid 0.9.2 → 0.9.4

package/README.md

@@ -341,6 +341,10 @@ Specify the tooltip text for Button 10.
 - This action enables you to reset the grid's column state to default state.
 - It is useful when you want to revert the column configuration to a default configuration.
 
+**Pin Columns to Left**
+- This action allows you to pin one or more columns to the left side of the grid.
+- It is useful when you want to freeze specific columns in place for easy reference, even as you scroll horizontally.
+
 **Import File Data**
 - The "Import File Data" action allows to import data from CSV and XLSX files into the AG Grid. This action simplifies the process of populating the grid with external data sources.
 - Key Features:

package/app_connect/components.hjson

@@ -1851,9 +1851,29 @@
           name: 'resetColumnState',
           icon: 'fa fa-lg fa-undo',
           state: 'opened',
-          help: 'Save Column State to Browser Local Storage',
+          help: 'Reset Column State stored in Browser Local Storage',
           properties: []
         },
+        {
+          addTitle: 'pinColumnsState',
+          title: 'Pin Columns',
+          name: 'pinColumns',
+          icon: 'fa fa-lg fa-thumbtack',
+          state: 'opened',
+          help: 'Pin Columns to Left',
+          properties: [
+            {
+              group: 'Properties',
+              variables: [
+                {
+                  name: '1', optionName: '1', title: 'Column Name', type: 'text',
+                  dataBindings: true, defaultValue: '', required: true,
+                  help: 'Column Name to Pin to the Left'
+                }
+              ]
+            }
+          ]
+        },
         {
           addTitle: 'importFileData',
           title: 'Import File Data',
@@ -1867,7 +1887,7 @@
               variables: [
                 {
                   name: '1', optionName: '1', title: 'File Field ID', type: 'text',
-                  dataBindings: true, defaultValue: 'csvfile', required: true,
+                  dataBindings: true, defaultValue: '"csvfile"', required: true,
                   help: 'Field ID of the file to import'
                 }
               ]

package/dmx-ag-grid.js

@@ -178,17 +178,24 @@ dmx.Component('ag-grid', {
         if (typeof saveColumnStateToStorage === 'function') {
           saveColumnStateToStorage();
         } else {
-          console.error('Grid not loaded to perform saveColumnState');
+          console.error('Grid not loaded to perform save column state');
         }
       }, this);
     },
     resetColumnState: function () {
       dmx.nextTick(function() {
-        localStorage.removeItem('columnState');
+        const idValue = this.$node.querySelector('dmx-ag-grid > div')?.getAttribute('id') ?? 'Grid not found';
+        const currentPageUrl = window.location.origin + window.location.pathname;
+        const uniqueId = `${currentPageUrl}_${idValue}`;
+        console.log(uniqueId)
+        localStorage.removeItem(`columnState_${uniqueId}`);
         let gridInstance = this.refreshGrid();
         this.set('gridInstance', gridInstance);
       }, this);
     },
+    pinColumns: function (fieldId) {
+      pinColumnToLeft(fieldId);
+    },
     importFileData: async function (fieldId) {
       await this.parseFileData(fieldId);
     },
@@ -275,13 +282,15 @@ dmx.Component('ag-grid', {
     };
   
     const fileInput = document.getElementById(fieldId);
+    if (!fileInput) {
+      console.error('Field having field Id: '+fieldId+' not found.');
+      return;
+    }
     const file = fileInput.files[0];
-  
     if (!file) {
       console.error('Please select a file.');
       return;
     }
-  
     const reader = new FileReader();
     reader.onload = async (e) => {
       const fileData = e.target.result;
@@ -1154,7 +1163,7 @@ dmx.Component('ag-grid', {
     
 
     if (!gridDiv) {
-      console.error(`Grid container element with ID '${options.id}' not found.`);
+      console.error(`Grid container element with ID '${options.id}'-grid not found.`);
       return;
     }
 
@@ -1162,15 +1171,33 @@ dmx.Component('ag-grid', {
         gridInstance.destroy();
         gridInstance = null;
     }
+    const getPageId = () => {
+      const currentPageUrl = window.location.origin + window.location.pathname;
+      const optionsId = options.id+'-grid';
+      const uniqueId = `${currentPageUrl}_${optionsId}`;
+      return uniqueId;
+    };
     const gridConfig = {
       onGridReady: function (params) {
         const columnApi = params.columnApi;
+        pinColumnToLeft = (fieldToPin) => {
+          const columnState = columnApi.getColumnState();
+          const columnIndex = columnState.findIndex(column => column.colId === fieldToPin);
+          if (columnIndex !== -1) {
+            for (let i = 0; i <= columnIndex; i++) {
+              columnState[i].pinned = 'left';
+            }
+            columnApi.applyColumnState({ state: columnState });
+          }
+        }
         saveColumnStateToStorage = () => {
           const columnState = columnApi.getColumnState();
-          localStorage.setItem('columnState', JSON.stringify(columnState));
+          const pageId = getPageId();
+          localStorage.setItem(`columnState_${pageId}`, JSON.stringify(columnState));    
         }
         function restoreColumnState() {
-          const savedColumnState = JSON.parse(localStorage.getItem('columnState'));
+          const pageId = getPageId();
+          const savedColumnState = JSON.parse(localStorage.getItem(`columnState_${pageId}`));
           if (savedColumnState) {
             columnApi.applyColumnState({
               state: savedColumnState,
@@ -1335,23 +1362,19 @@ dmx.Component('ag-grid', {
     // Create the export button
     if (exportToCSV) {
       const existingExportButton = document.getElementById('exportButton');
-      // If it already exists, just exit the function
       if (existingExportButton) {
         return;
       }
       const exportButton = document.createElement('button');
       exportButton.id = 'exportButton'; 
-
-        // Add the icon
       const icon = document.createElement('i');
-      icon.classList.add('fas', 'fa-file-csv'); // Use the Font Awesome icon class here
+      icon.classList.add('fas', 'fa-file-csv');
       exportButton.appendChild(icon);
 
       // Add the button text
       const buttonText = document.createElement('span');
       buttonText.innerText = ' Export to CSV';
       exportButton.appendChild(buttonText);
-      // Add some fancy styles to the button
       exportButton.style.backgroundColor = '#4CAF50';
       exportButton.style.border = 'none';
       exportButton.style.color = 'white';

package/package.json

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