@cdmx/wappler_ag_grid 0.0.9 → 0.1.1

package/README.md

@@ -1,4 +1,5 @@
-# wappler_ag_grid
+Maintained by: Roney Dsilva
+
 This Custom Module provides the below features:
 1. Generates AG-Grid given a Data Source
 2. Automatically sets the Filter types and Date formats
@@ -12,4 +13,6 @@ This Custom Module provides the below features:
 10. Timezone setting for Date fields
 11. Data Manipulation
 12. Theme selection
-13. Row Click Event Handling
+13. Row Click Event Handling
+14. Options to enable checkboxes for IDs for bulk select Operations
+15. Options to enable Toggle Sliders for status fields

package/app_connect/components.hjson

@@ -357,7 +357,23 @@
               "title": "Row Click Events",
               "type": "boolean",
               "defaultValue": false,
-              "help": "This enabled row click en=vents whcihc can then be used in Dynamic events => Grid Events => Row Clicked"
+              "help": "This enabled row click events which can then be used in Dynamic events => Grid Events => Row Clicked"
+            },
+            {
+              "name": "rowCheckboxEvent",
+              "attribute": "dmx-bind:row_checkbox_event",
+              "title": "Row Checkbox Events",
+              "type": "boolean",
+              "defaultValue": false,
+              "help": "This enabled row checkbox events which can then be used in Dynamic events => Grid Events => Checkbox Checked || Checkbox Unchecked"
+            },
+            {
+              "name": "rowStatusEvent",
+              "attribute": "dmx-bind:row_status_event",
+              "title": "Row Status Events",
+              "type": "boolean",
+              "defaultValue": false,
+              "help": "This enabled row status events which can then be used in Dynamic events => Grid Events => Checkbox Checked || Checkbox Unchecked"
             }
           ]
         },
@@ -670,6 +686,10 @@
           "src": "ag-theme-material.css",
           "dst": "css/ag-theme-material.css"
         },
+        {
+          "src": "switch-toggle-slider.css",
+          "dst": "css/switch-toggle-slider.css"
+        },
         {
           "src": "dmx-ag-grid.js",
           "dst": "js/dmx-ag-grid.js"
@@ -697,6 +717,10 @@
         {
           "src": "css/ag-theme-material.css",
           "type": "css"
+        },
+        {
+          "src": "css/switch-toggle-slider.css",
+          "type": "css"
         }
       ],
       "cssOrder": [],
@@ -751,8 +775,7 @@
       "groupIcon": "fa fa-lg fa-cubes",
       "defaultValue": false,
       "show": [
-        "rowClicked",
-        "rowMods"
+        "rowClicked"
       ],
       "noChangeOnHide": true,
       "type": "boolean",
@@ -774,6 +797,143 @@
       "allowedOn": {
         "dmx-ag-grid": true
       }
+    },
+    {
+      "name": "dmx-ag-grid-checkbox-checked",
+      "attributeStartsWith": "dmx-on",
+      "attribute": "row_checkbox_checked",
+      "display": "fieldset",
+      "title": "Checkbox Checked",
+      "icon": "fa fa-lg fa-chevron-right",
+      "groupTitle": "Grid Events",
+      "groupIcon": "fa fa-lg fa-cubes",
+      "defaultValue": false,
+      "show": [
+        "rowCheckboxChecked"
+      ],
+      "noChangeOnHide": true,
+      "type": "boolean",
+      "groupEnabler": true,
+      "children": [
+        {
+          "name": "rowCheckboxChecked",
+          "attributeStartsWith": "dmx-on",
+          "attribute": "row_checkbox_checked",
+          "isValue": true,
+          "actionsPicker": true,
+          "title": "Action:",
+          "type": "text",
+          "help": "Choose the action to execute.",
+          "defaultValue": "",
+          "initDisplay": "none"
+        }
+      ],
+      "allowedOn": {
+        "dmx-ag-grid": true
+      }
+    },
+    {
+      "name": "dmx-ag-grid-checkbox-unchecked",
+      "attributeStartsWith": "dmx-on",
+      "attribute": "row_checkbox_unchecked",
+      "display": "fieldset",
+      "title": "Checkbox Unchecked",
+      "icon": "fa fa-lg fa-chevron-right",
+      "groupTitle": "Grid Events",
+      "groupIcon": "fa fa-lg fa-cubes",
+      "defaultValue": false,
+      "show": [
+        "rowCheckboxUnchecked"
+      ],
+      "noChangeOnHide": true,
+      "type": "boolean",
+      "groupEnabler": true,
+      "children": [
+        {
+          "name": "rowCheckboxUnchecked",
+          "attributeStartsWith": "dmx-on",
+          "attribute": "row_checkbox_unchecked",
+          "isValue": true,
+          "actionsPicker": true,
+          "title": "Action:",
+          "type": "text",
+          "help": "Choose the action to execute.",
+          "defaultValue": "",
+          "initDisplay": "none"
+        }
+      ],
+      "allowedOn": {
+        "dmx-ag-grid": true
+      }
+    }
+    ,
+    {
+      "name": "dmx-ag-grid-status-checked",
+      "attributeStartsWith": "dmx-on",
+      "attribute": "row_status_checked",
+      "display": "fieldset",
+      "title": "Status Checked",
+      "icon": "fa fa-lg fa-chevron-right",
+      "groupTitle": "Grid Events",
+      "groupIcon": "fa fa-lg fa-cubes",
+      "defaultValue": false,
+      "show": [
+        "rowStatusChecked"
+      ],
+      "noChangeOnHide": true,
+      "type": "boolean",
+      "groupEnabler": true,
+      "children": [
+        {
+          "name": "rowStatusChecked",
+          "attributeStartsWith": "dmx-on",
+          "attribute": "row_status_checked",
+          "isValue": true,
+          "actionsPicker": true,
+          "title": "Action:",
+          "type": "text",
+          "help": "Choose the action to execute.",
+          "defaultValue": "",
+          "initDisplay": "none"
+        }
+      ],
+      "allowedOn": {
+        "dmx-ag-grid": true
+      }
+    },
+    {
+      "name": "dmx-ag-grid-status-unchecked",
+      "attributeStartsWith": "dmx-on",
+      "attribute": "row_status_unchecked",
+      "display": "fieldset",
+      "title": "Status Unchecked",
+      "icon": "fa fa-lg fa-chevron-right",
+      "groupTitle": "Grid Events",
+      "groupIcon": "fa fa-lg fa-cubes",
+      "defaultValue": false,
+      "show": [
+        "rowStatusUnchecked"
+      ],
+      "noChangeOnHide": true,
+      "type": "boolean",
+      "groupEnabler": true,
+      "children": [
+        {
+          "name": "rowStatusUnchecked",
+          "attributeStartsWith": "dmx-on",
+          "attribute": "row_status_unchecked",
+          "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

@@ -85,7 +85,10 @@ dmx.Component('ag-grid', {
     fixedTopOffset: { type: Number, default: 80 },
     fixedHorizonatalScroll: { type: Boolean, default: false },
     timezone: {type: Text, default: '' },
-    row_click_event: {type: Boolean, default: false }
+    row_click_event: {type: Boolean, default: false },
+    row_checkbox_event: {type: Boolean, default: false },
+    row_status_event: {type: Boolean, default: false }
+    
   },
 
   methods: {
@@ -106,6 +109,8 @@ dmx.Component('ag-grid', {
     const timezone = this.props.timezone || false;
     const dataChanges = this.props.data_changes;
     const grid_theme = this.props.grid_theme;
+    const enableCheckboxEvent = this.props.row_checkbox_event;
+    const enableStatusToggle = this.props.row_status_event;
     let columnDefs = [];
     let exportToCSV = this.props.exportToCSV;
 
@@ -128,7 +133,8 @@ dmx.Component('ag-grid', {
         }
       } else if (dataType === 'date') {
         return formatTime(params, timezone);
-      } else {
+      } 
+       else {
         return blankOrNullValueFormatter(params);
       }
     }
@@ -137,6 +143,34 @@ dmx.Component('ag-grid', {
       this.set('id', idValue);
       this.dispatchEvent('row_clicked')
     };
+    window.handleCheckboxClick = (event, columnName, value, idValue) => {
+      const isChecked = event.target.checked;
+      if (isChecked) {
+        // Code for when the checkbox is checked
+        this.set('id', idValue);
+        this.set('fields', {"field": columnName, "data": value});
+        this.dispatchEvent('row_checkbox_checked')
+      } else {
+        // Code for when the checkbox is unchecked
+        this.set('id', idValue);
+        this.set('fields', {"field": columnName, "data": value});
+        this.dispatchEvent('row_checkbox_unchecked')
+      }
+    };
+    window.handleStatusToggle = (event, columnName, value, idValue) => {
+      const isChecked = event.target.checked;
+      if (isChecked) {
+        // Code for when the checkbox is checked
+        this.set('id', idValue);
+        this.set('fields', {"field": columnName, "data": value});
+        this.dispatchEvent('row_status_checked')
+      } else {
+        // Code for when the checkbox is unchecked
+        this.set('id', idValue);
+        this.set('fields', {"field": columnName, "data": value});
+        this.dispatchEvent('row_status_unchecked')
+      }
+    };
     function clickCellRenderer(params) {
       const idValue = params.data.id;
       const columnName = params.colDef.field;
@@ -144,6 +178,43 @@ dmx.Component('ag-grid', {
       const value = formatValue(params.value, columnName, dataType, timezone);
       return `<div onclick="clickEvent('${columnName}', '${value}', '${idValue}')" style="cursor: pointer;">${value}</div>`;
     }
+    function checkboxCellRenderer(params) {
+      const idValue = params.data.id;
+      const columnName = params.colDef.field;
+      const dataType = detectDataType([params.value]);
+      const value = formatValue(params.value, columnName, dataType, timezone);
+    
+      if (columnName === "id") {
+        return `
+          <input 
+            type="checkbox" 
+            onclick="handleCheckboxClick(event, '${columnName}', '${value}', '${idValue}')"
+          />
+        `;
+      } else if (columnName == "status" && enableStatusToggle) {
+        // Assuming `value` is a boolean representing the status
+        const checked = value==true ? "checked" : "";
+        return `
+          <label class="switch switch-success">
+            <input 
+              type="checkbox" class="switch-input"
+              ${checked}
+              onclick="handleStatusToggle(event, '${columnName}', '${value}', '${idValue}')"
+            />
+            <span class="switch-toggle-slider" role="status">
+            </span>
+            <span class="switch-on">
+                <i class="bx bx-check"></i>
+            </span>
+            <span class="switch-off">
+                <i class="bx bx-x"></i>
+            </span>
+        </label>
+        `;
+      } else {
+        return value;
+      }
+    }
     
 
     function humanize(str) {
@@ -356,7 +427,7 @@ const cstyles = this.props.cstyles
             minWidth: parseInt(cwidths[key].min_width),
             maxWidth: parseInt(cwidths[key].max_width),
           }),
-          cellRenderer: enableClickEvent ? 'clickCellRenderer' : undefined
+          cellRenderer: enableClickEvent ? 'clickCellRenderer' : (enableCheckboxEvent ? 'checkboxCellRenderer' : undefined)
         };
       });
     }
@@ -390,7 +461,8 @@ const cstyles = this.props.cstyles
       suppressPropertyNamesCheck: this.props.suppressPropertyNamesCheck,
       localeText: this.props.localeText,
       components: {
-        clickCellRenderer: clickCellRenderer
+        clickCellRenderer: clickCellRenderer,
+        checkboxCellRenderer: checkboxCellRenderer
       }
     };
 
@@ -468,7 +540,11 @@ const cstyles = this.props.cstyles
   },
 
   events: {
-    row_clicked: Event
+    row_clicked: Event,
+    row_checkbox_checked: Event,
+    row_checkbox_unchecked: Event,
+    row_status_checked: Event,
+    row_status_unchecked: Event
   },
 
   render: function(node) {

package/package.json

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

package/switch-toggle-slider.css

@@ -0,0 +1,345 @@
+.select-wrapper-status {
+    position: relative;
+}
+
+.select-wrapper-status i.fa {
+    position: absolute;
+    right: 20px;
+    top: 50%;
+    transform: translateY(-50%);
+}
+.switch {
+    margin-right: 0.75rem;
+    position: relative;
+    vertical-align: middle;
+    margin-bottom: 0;
+    display: inline-block;
+    border-radius: 30rem;
+    min-height: 1.35rem;
+    font-size: 0.9375rem;
+    line-height: 1.4;
+}
+
+.switch .switch-label:first-child {
+    padding-right: 0.5rem;
+}
+
+.switch .switch-input~.switch-label {
+    padding-left: 3rem;
+}
+
+.switch .switch-toggle-slider {
+    width: 2.5rem;
+    height: 1.35rem;
+    font-size: 0.625rem;
+    line-height: 1.35rem;
+    border: 1px solid transparent;
+    top: 0;
+}
+
+.switch .switch-toggle-slider i {
+    position: relative;
+    font-size: 0.9375rem;
+    top: -1.35px;
+}
+
+.switch .switch-label {
+    top: 0.01875rem;
+}
+
+.switch .switch-input:checked~.switch-toggle-slider::after {
+    left: 1.15rem;
+}
+
+.switch .switch-toggle-slider::after {
+    top: -1px;
+    margin: 0.25rem 0 0 0.25rem;
+    width: 13px;
+    height: 13px;
+}
+
+.switch .switch-on {
+    padding-left: 0.25rem;
+    padding-right: 1.1rem;
+}
+
+.switch .switch-off {
+    padding-left: 1.1rem;
+    padding-right: 0.25rem;
+}
+
+[dir=rtl] .switch .switch-label {
+    padding-right: 3rem;
+    padding-left: 0;
+}
+
+[dir=rtl] .switch .switch-input:checked~.switch-toggle-slider::after {
+    left: auto;
+    right: 1.15rem;
+}
+
+[dir=rtl] .switch .switch-toggle-slider::after {
+    margin-left: 0;
+    margin-right: 0.25rem;
+}
+
+[dir=rtl] .switch .switch-on {
+    padding-left: 1.1rem;
+    padding-right: 0.25rem;
+}
+
+[dir=rtl] .switch .switch-off {
+    padding-left: 0.25rem;
+    padding-right: 1.1rem;
+}
+
+[dir=rtl] .switch {
+    margin-left: 0.75rem;
+    margin-right: 0;
+}
+
+.switch-input {
+    opacity: 0;
+    position: absolute;
+    padding: 0;
+    margin: 0;
+    z-index: -1;
+}
+
+.switch-toggle-slider {
+    position: absolute;
+    overflow: hidden;
+    border-radius: 30rem;
+    background: #e9ecee;
+    color: #677788;
+    -webkit-transition-duration: 0.2s;
+            transition-duration: 0.2s;
+    -webkit-transition-property: left, right, background, -webkit-box-shadow;
+    transition-property: left, right, background, -webkit-box-shadow;
+    transition-property: left, right, background, box-shadow;
+    transition-property: left, right, background, box-shadow, -webkit-box-shadow;
+    cursor: pointer;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+        user-select: none;
+}
+
+.switch-label {
+    display: inline-block;
+    font-weight: 400;
+    color: #677788;
+    position: relative;
+    cursor: default;
+}
+
+.switch-off,
+.switch-on {
+    height: 100%;
+    width: 100%;
+    text-align: center;
+    position: absolute;
+    top: 0;
+    -webkit-transition-duration: 0.2s;
+            transition-duration: 0.2s;
+    -webkit-transition-property: left, right;
+    transition-property: left, right;
+}
+
+.switch-on {
+    left: -100%;
+}
+
+[dir=rtl] .switch-on {
+    left: auto;
+    right: -100%;
+}
+
+.switch-input:not(:checked)~.switch-toggle-slider .switch-on {
+    color: transparent;
+}
+
+.switch-off {
+    left: 0;
+}
+
+[dir=rtl] .switch-off {
+    right: 0;
+    left: auto;
+}
+
+.switch-input:checked~.switch-toggle-slider .switch-on {
+    left: 0;
+}
+
+[dir=rtl] .switch-input:checked~.switch-toggle-slider .switch-on {
+    right: 0;
+    left: auto;
+}
+
+.switch-input:checked~.switch-toggle-slider .switch-off {
+    left: 100%;
+    color: transparent;
+}
+
+[dir=rtl] .switch-input:checked~.switch-toggle-slider .switch-off {
+    right: 100%;
+    left: auto;
+}
+
+.switch-toggle-slider::after {
+    content: "";
+    position: absolute;
+    left: 0;
+    display: block;
+    border-radius: 999px;
+    background: #fff;
+    -webkit-box-shadow: -1px 2px 3px 0 rgba(0, 0, 0, 0.2);
+            box-shadow: -1px 2px 3px 0 rgba(0, 0, 0, 0.2);
+    -webkit-transition-duration: 0.2s;
+            transition-duration: 0.2s;
+    -webkit-transition-property: left, right, background;
+    transition-property: left, right, background;
+}
+
+[dir=rtl] .switch-toggle-slider::after {
+    right: 0;
+    left: auto;
+}
+
+.switches-stacked::after {
+    display: block;
+    clear: both;
+    content: "";
+}
+
+.switches-stacked .switch {
+    display: block;
+}
+
+html:not([dir=rtl]) .switches-stacked .switch {
+    margin-right: 0;
+}
+
+[dir=rtl] .switches-stacked .switch {
+    margin-left: 0;
+}
+
+.switches-stacked .switch:not(:last-child) {
+    margin-bottom: 0.75rem;
+}
+
+.switch-square,
+.switch-square .switch-toggle-slider {
+    border-radius: 0.25rem;
+}
+
+.switch-square .switch-toggle-slider::after {
+    border-radius: calc(0.25rem - 2px);
+}
+
+.switch-input:disabled~.switch-toggle-slider {
+    opacity: 0.65;
+}
+
+.switch-input:disabled~.switch-toggle-slider::after {
+    -webkit-box-shadow: none;
+            box-shadow: none;
+}
+
+.switch-input:disabled~.switch-label {
+    color: #a8b1bb;
+}
+
+.switch-success.switch .switch-input:checked~.switch-toggle-slider {
+    background: #39da8a;
+    color: #fff;
+}
+
+.switch-success.switch .switch-input:active~.switch-toggle-slider {
+    -webkit-box-shadow: none;
+            box-shadow: none;
+}
+
+.switch-success.switch .switch-input:focus~.switch-toggle-slider {
+    -webkit-box-shadow: 0 0 0 0.12rem rgba(147, 158, 170, 0.3);
+            box-shadow: 0 0 0 0.12rem rgba(147, 158, 170, 0.3);
+}
+
+.switch-info.switch .switch-input:checked~.switch-toggle-slider {
+    background: #00cfdd;
+    color: #fff;
+}
+
+.switch-info.switch .switch-input:active~.switch-toggle-slider {
+    -webkit-box-shadow: none;
+            box-shadow: none;
+}
+
+.switch-info.switch .switch-input:focus~.switch-toggle-slider {
+    -webkit-box-shadow: 0 0 0 0.12rem rgba(147, 158, 170, 0.3);
+            box-shadow: 0 0 0 0.12rem rgba(147, 158, 170, 0.3);
+}
+
+.switch-warning.switch .switch-input:checked~.switch-toggle-slider {
+    background: #fdac41;
+    color: #fff;
+}
+
+.switch-warning.switch .switch-input:active~.switch-toggle-slider {
+    -webkit-box-shadow: none;
+            box-shadow: none;
+}
+
+.switch-warning.switch .switch-input:focus~.switch-toggle-slider {
+    -webkit-box-shadow: 0 0 0 0.12rem rgba(147, 158, 170, 0.3);
+            box-shadow: 0 0 0 0.12rem rgba(147, 158, 170, 0.3);
+}
+
+.switch-danger.switch .switch-input:checked~.switch-toggle-slider {
+    background: #ff5b5c;
+    color: #fff;
+}
+
+.switch-danger.switch .switch-input:active~.switch-toggle-slider {
+    -webkit-box-shadow: none;
+            box-shadow: none;
+}
+
+.switch-danger.switch .switch-input:focus~.switch-toggle-slider {
+    -webkit-box-shadow: 0 0 0 0.12rem rgba(147, 158, 170, 0.3);
+            box-shadow: 0 0 0 0.12rem rgba(147, 158, 170, 0.3);
+}
+
+.switch-dark.switch .switch-input:checked~.switch-toggle-slider {
+    background: #495563;
+    color: #fff;
+}
+
+.switch-dark.switch .switch-input:active~.switch-toggle-slider {
+    -webkit-box-shadow: none;
+            box-shadow: none;
+}
+
+.switch-dark.switch .switch-input:focus~.switch-toggle-slider {
+    -webkit-box-shadow: 0 0 0 0.12rem rgba(147, 158, 170, 0.3);
+            box-shadow: 0 0 0 0.12rem rgba(147, 158, 170, 0.3);
+}
+
+.switch-gray.switch .switch-input:checked~.switch-toggle-slider {
+    background: rgba(38, 60, 85, 0.5);
+    color: #fff;
+}
+
+.switch-gray.switch .switch-input:active~.switch-toggle-slider {
+    -webkit-box-shadow: none;
+            box-shadow: none;
+}
+
+.switch-gray.switch .switch-input:focus~.switch-toggle-slider {
+    -webkit-box-shadow: 0 0 0 0.12rem rgba(147, 158, 170, 0.3);
+            box-shadow: 0 0 0 0.12rem rgba(147, 158, 170, 0.3);
+}
+
+
+