@cdmx/wappler_ag_grid 0.3.0 → 0.3.2

package/README.md

@@ -17,4 +17,5 @@ This Custom Module provides the below features:
 14. Options to enable checkboxes for IDs for bulk select Operations
 15. Options to enable Toggle Sliders for status fields
 16. Added Action Buttons feature
-17. Advanced Data Manipulation using Arrays and SC bindings
+17. Advanced Data Manipulation using Arrays and SC bindings
+18. Added RTL and Locale Controls

package/app_connect/components.hjson

@@ -71,6 +71,18 @@
               {title: 'Base', value: 'ag-grid'}
               ],
               "help": "Select a theme for the grid"
+            },
+            {
+              "name": "locale_text",
+              "attribute": "locale_text",
+              "title": "Locale",
+              "type": "droplist",
+              "defaultValue": 'EN',
+              "values": [
+              {title: 'English', value: 'EN'},
+              {title: 'Hebrew', value: 'HE'}
+              ],
+              "help": "Select locale for the Grid, Currently Supproted Hebrew (HE) and English (EN) locale"
             }
           ]
         },
@@ -125,6 +137,14 @@
               "defaultValue": true,
               "help": "Specifies if Export to CSV to be enabled"
             },
+            {
+              "name": "enableRtl",
+              "attribute": "dmx-bind:enable_rtl",
+              "title": "Enable RTL",
+              "type": "boolean",
+              "defaultValue": false,
+              "help": "Enabled Right to Left, used for Hebrew and Arabic"
+            },
             {
               "name": "columnHoverHighlight",
               "attribute": "dmx-bind:columnHoverHighlight",
@@ -373,14 +393,6 @@
               "defaultValue": false,
               "help": "Hides the ID Field in Grid"
             },
-            {
-              "name": "localeText",
-              "attribute": "localeText",
-              "title": "Locale Text",
-              "type": "object",
-              "defaultValue": {},
-              "help": "Localization strings for the grid"
-            },
             {
               "name": "rowClickEvent",
               "attribute": "dmx-bind:row_click_event",
@@ -477,7 +489,7 @@
           ]
         },
         {
-          "group": "📒 Data Advanced Manipulation",
+          "group": "📒 Advanced Data Manipulation",
           "variables": [
             {
               "name": "data_binded_changes",
@@ -632,6 +644,7 @@
                   "type": "grid",
                   "key": "field",
                   "jsonFormat": true,
+                  "dataBindings": true,
                   "encloseBT": true,
                   "jsonBT": true,
                   "initDisplay": "none",
@@ -650,7 +663,7 @@
                       size: "20%",
                       dataBindings: true,
                       editable: {
-                        type: "text"
+                        type: "datapicker"
                       },
                       help: "Identity, Name,etc"
                     }
@@ -889,6 +902,10 @@
         {
           "src": "dmx-ag-grid.js",
           "dst": "js/dmx-ag-grid.js"
+        },
+        {
+          "src": "he.js",
+          "dst": "js/locale/he.js"
         }
       ],
       "linkFiles": [
@@ -902,6 +919,11 @@
           "type": "js",
           "defer": true
         },
+        {
+          "src": "js/locale/he.js",
+          "type": "js",
+          "defer": true
+        },
         {
           "src": "css/ag-theme-alpine.css",
           "type": "css"
@@ -928,7 +950,7 @@
       "name": "dmx-ag-grid-value",
       "attributeStartsWith": "dmx-bind",
       "attribute": "column_defs",
-      "title": "Configs",
+      "title": "Column Definitions",
       "type": "boolean",
       "display": "fieldset",
       "icon": "fa fa-lg fa-chevron-right",
@@ -936,13 +958,13 @@
       "groupIcon": "fa fa-lg fa-cubes",
       "defaultValue": false,
       "show": [
-        "valueValue"
+        "setValue"
       ],
       "noChangeOnHide": true,
       "groupEnabler": true,
       "children": [
         {
-          "name": "valueValue",
+          "name": "setValue",
           "attributeStartsWith": "dmx-bind",
           "attribute": "ColumnDefs",
           "isValue": true,
@@ -957,6 +979,74 @@
       "allowedOn": {
         "dmx-ag-grid": true
       }
+    },
+    {
+      "name": "dmx-ag-grid-locale",
+      "attributeStartsWith": "dmx-bind",
+      "attribute": "locale_text",
+      "title": "Locale",
+      "type": "boolean",
+      "display": "fieldset",
+      "icon": "fa fa-lg fa-chevron-right",
+      "groupTitle": "Grid Config",
+      "groupIcon": "fa fa-lg fa-cubes",
+      "defaultValue": false,
+      "show": [
+        "localeText"
+      ],
+      "noChangeOnHide": true,
+      "groupEnabler": true,
+      "children": [
+        {
+          "name": "localeText",
+          "attributeStartsWith": "dmx-bind",
+          "attribute": "locale_text",
+          "isValue": true,
+          "dataBindings": true,
+          "title": "Locale:",
+          "type": "text",
+          "help": "Locale.",
+          "defaultValue": "EN",
+          "initDisplay": "none"
+        }
+      ],
+      "allowedOn": {
+        "dmx-ag-grid": true
+      }
+    },
+    {
+      "name": "dmx-ag-grid-rtl",
+      "attributeStartsWith": "dmx-bind",
+      "attribute": "enable_rtl",
+      "title": "Enable RTL",
+      "type": "boolean",
+      "display": "fieldset",
+      "icon": "fa fa-lg fa-chevron-right",
+      "groupTitle": "Grid Config",
+      "groupIcon": "fa fa-lg fa-cubes",
+      "defaultValue": false,
+      "show": [
+        "enableRtl"
+      ],
+      "noChangeOnHide": true,
+      "groupEnabler": true,
+      "children": [
+        {
+          "name": "enableRtl",
+          "attributeStartsWith": "dmx-bind",
+          "attribute": "enable_rtl",
+          "isValue": true,
+          "dataBindings": true,
+          "title": "RTL:",
+          "type": "text",
+          "help": "Locale.",
+          "defaultValue": "",
+          "initDisplay": "none"
+        }
+      ],
+      "allowedOn": {
+        "dmx-ag-grid": true
+      }
     }
   ],
   "events": [

package/dmx-ag-grid.js

@@ -35,7 +35,8 @@ dmx.Component('ag-grid', {
     suppressScrollOnNewData: { type: Boolean, default: false },
     suppressPropertyNamesCheck: { type: Boolean, default: false },
     hide_id_field: { type: Boolean, default: false },
-    localeText: { default: null }, 
+    enable_rtl: { type: Boolean, default: false },
+    locale_text: { type: Text, default: null },
     minWidth: { type: Number, default: 150 },
     sortable: { type: Boolean, default: true },
     resizable: { type: Boolean, default: true },
@@ -85,7 +86,6 @@ dmx.Component('ag-grid', {
     const options = this.props
     const rowData = this.props.data;
     const timezone = this.props.timezone || false;
-
     let columnDefs = [];
     let exportToCSV = this.props.exportToCSV;
     this.$node.innerHTML = `<div id=${options.id}-grid class="${options.grid_theme}"></div>`;
@@ -341,6 +341,7 @@ dmx.Component('ag-grid', {
         let filterParams;
         let minWidth;
         let hide;
+        
         if (dataType === 'number') {
           filter = 'agNumberColumnFilter';
           if (/(amount|amt)$/.test(key)) {
@@ -436,7 +437,7 @@ dmx.Component('ag-grid', {
         enableCellClickEvent = this.props.cell_click_event;
         if (cnames.hasOwnProperty(key)) {
         const cname = cnames[key]
-        headerName = cname ? cname.custom_name : humanize(key);
+        headerName = cname ? cname.custom_name : humanize(key);         
         }
         else {
           headerName = humanize(key);
@@ -539,9 +540,14 @@ dmx.Component('ag-grid', {
     
       columnDefs.push(actionsColumn);
     }
-        
+    let localeText;
+    if (options.locale_text == 'HE') {
+      localeText = AG_GRID_LOCALE_HE
+    }
     const gridOptions = {
       columnDefs: columnDefs,
+      localeText: localeText,
+      enableRtl: options.enable_rtl,
       noRowsOverlayComponent: '<div>No Records Found.</div>',
       onRowClicked: enableRowClickEvent ? onRowClicked : undefined,
       rowStyle: enableRowClickEvent ? { cursor: 'pointer' } : undefined,
@@ -573,7 +579,6 @@ dmx.Component('ag-grid', {
       suppressPropertyNamesCheck: this.props.suppressPropertyNamesCheck,
       suppressRowDeselection: this.props.suppressRowDeselection,
       columnHoverHighlight: this.props.columnHoverHighlight,
-      localeText: this.props.localeText,
       components: {
         clickCellRenderer: clickCellRenderer,
         checkboxCellRenderer: checkboxCellRenderer,
@@ -690,6 +695,7 @@ dmx.Component('ag-grid', {
         };
         gridConfig.api.exportDataAsCsv(params);
       });
+      
       // Append the export button to the grid container
       gridContainer.parentNode.insertBefore(exportButton, gridContainer);
       exportButton.style.marginBottom = '10px';

package/he.js

@@ -0,0 +1,355 @@
+const AG_GRID_LOCALE_HE = {
+    // Set Filter
+    selectAll: '(בחר הכל)',
+    selectAllSearchResults: '(בחר את כל תוצאות החיפוש)',
+    searchOoo: 'חיפוש...',
+    blanks: '(ריק)',
+    noMatches: 'אין התאמות',
+
+    // Number Filter & Text Filter
+    filterOoo: 'סינון...',
+    equals: 'שווה',
+    notEqual: 'לא שווה',
+    blank: 'ריק',
+    notBlank: 'לא ריק',
+    empty: 'בחר',
+
+    // Number Filter
+    lessThan: 'פחות מ',
+    greaterThan: 'גדול מ',
+    lessThanOrEqual: 'פחות או שווה ל',
+    greaterThanOrEqual: 'גדול או שווה ל',
+    inRange: 'בטווח',
+    inRangeStart: 'מ',
+    inRangeEnd: 'עד',
+
+    // Text Filter
+    contains: 'מכיל',
+    notContains: 'לא מכיל',
+    startsWith: 'מתחיל עם',
+    endsWith: 'מסתיים עם',
+
+    // Date Filter
+    dateFormatOoo: 'yyyy-mm-dd',
+
+    // Filter Conditions
+    andCondition: 'וגם',
+    orCondition: 'או',
+
+    // Filter Buttons
+    applyFilter: 'החל',
+    resetFilter: 'אפס',
+    clearFilter: 'נקה',
+    cancelFilter: 'ביטול',
+
+    // Filter Titles
+    textFilter: 'סינון טקסט',
+    numberFilter: 'סינון מספרים',
+    dateFilter: 'סינון תאריכים',
+    setFilter: 'הגדר סינון',
+
+    // Group Column Filter
+    groupFilterSelect: 'בחר שדה:',
+
+    // Side Bar
+    columns: 'עמודות',
+    filters: 'מסננים',
+
+    // columns tool panel
+    pivotMode: 'מצב צירופים',
+    groups: 'קבוצות שורות',
+    rowGroupColumnsEmptyMessage: 'גרור לכאן כדי להגדיר קבוצות שורות',
+    values: 'ערכים',
+    valueColumnsEmptyMessage: 'גרור לכאן כדי לסכם',
+    pivots: 'תגיות עמודות',
+    pivotColumnsEmptyMessage: 'גרור לכאן כדי להגדיר תגיות עמודות',
+
+    // Header of the Default Group Column
+    group: 'קבוצה',
+
+    // Row Drag
+    rowDragRow: 'שורה',
+    rowDragRows:'שורות',
+
+    // Other
+    loadingOoo: 'טוען...',
+    loadingError: 'שגיאה',
+    noRowsToShow: 'אין שורות להצגה',
+    enabled: 'מאופשר',
+
+    // Menu
+    pinColumn: 'נעיצת עמודה',
+    pinLeft: 'נעיצה לשמאל',
+    pinRight: 'נעיצה לימין',
+    noPin: 'לא לנעיצה',
+    valueAggregation: 'סיכום ערכים',
+    noAggregation: 'אין',
+    autosizeThiscolumn: 'התאם רוחב עמודה זו',
+    autosizeAllColumns: 'התאם רוחב לכל העמודות',
+    groupBy: 'קיבוץ לפי',
+    ungroupBy: 'הפסק קיבוץ לפי',
+    addToValues: 'הוסף ${variable} לערכים',
+    removeFromValues: 'הסר ${variable} מהערכים',
+    addToLabels: 'הוסף ${variable} לתוויות',
+    removeFromLabels: 'הסר ${variable} מהתוויות',
+    resetColumns: 'איפוס עמודות',
+    expandAll: 'הרחבת כל קבוצות השורות',
+    collapseAll: 'כיווץ כל קבוצות השורות',
+    copy: 'העתק',
+    ctrlC: 'Ctrl+C',
+    ctrlX: 'Ctrl+X',
+    copyWithHeaders: 'העתק עם כותרות',
+    copyWithGroupHeaders: 'העתק עם כותרות קבוצה',
+    cut: 'גזור',
+    paste: 'הדבק',
+    ctrlV: 'Ctrl+V',
+    export: 'יצוא',
+    csvExport: 'יצוא ל-CSV',
+    excelExport: 'יצוא ל-Excel',
+
+    // Enterprise Menu Aggregation and Status Bar
+    sum: 'סכום',
+    first: 'ראשון',
+    last: 'אחרון',
+    min: 'מינימום',
+    max: 'מקסימום',
+    none: 'ללא',
+    count: 'ספירה',
+    avg: 'ממוצע',
+    filteredRows: 'סוננו',
+    selectedRows: 'נבחרו',
+    totalRows: 'סך הכל שורות',
+    totalAndFilteredRows: 'שורות',
+    more: 'עוד',
+    to: 'עד',
+    of: 'מתוך',
+    page: 'עמוד',
+    pageLastRowUnknown: '?',
+    nextPage: 'עמוד הבא',
+    lastPage: 'עמוד אחרון',
+    firstPage: 'עמוד ראשון',
+    previousPage: 'עמוד קודם',
+
+    // Pivoting
+    pivotColumnGroupTotals: 'סכומים',
+
+    // Enterprise Menu (Charts)
+    pivotChartAndPivotMode: 'תרשים צירופים ומצב צירופים',
+    pivotChart: 'תרשים צירופים',
+    chartRange: 'טווח תרשים',
+
+    columnChart: 'עמודות',
+    groupedColumn: 'קיבוץ',
+    stackedColumn: 'מוערכות',
+    normalizedColumn: 'מוערכות 100%',
+
+    barChart: 'טורים',
+    groupedBar: 'קיבוץ',
+    stackedBar: 'מוערכות',
+    normalizedBar: 'מוערכות 100%',
+
+    pieChart: 'עוגה',
+    pie: 'עוגה',
+    doughnut: 'תופסת',
+
+    line: 'קו',
+
+    xyChart: 'XY (פיזור)',
+    scatter: 'פיזור',
+    bubble: 'בועה',
+
+    areaChart: 'אזור',
+    area: 'אזור',
+    stackedArea: 'מוערכות',
+    normalizedArea: 'מוערכות 100%',
+
+    histogramChart: 'היסטוגרמה',
+    histogramFrequency: 'תדירות',
+
+    combinationChart: 'שילוב',
+    columnLineCombo: 'עמודות וקו',
+    AreaColumnCombo: 'אזור ועמודות',
+
+    // Charts
+    pivotChartTitle: 'תרשים צירופים',
+    rangeChartTitle: 'תרשים טווח',
+    settings: 'הגדרות',
+    data: 'נתונים',
+    format: 'תבנית',
+    categories: 'קטגוריות',
+    defaultCategory: '(ללא)',
+    series: 'סדרות',
+    xyValues: 'ערכי XY',
+    paired: 'מצב זוגי',
+    axis: 'ציר',
+    navigator: 'נווט',
+    color: 'צבע',
+    thickness: 'עובי',
+    xType: 'סוג X',
+    automatic: 'אוטומטי',
+    category: 'קטגוריה',
+    number: 'מספר',
+    time: 'זמן',
+    autoRotate: 'סיבוב אוטומטי',
+    xRotation: 'סיבוב X',
+    yRotation: 'סיבוב Y',
+    ticks: 'סימניות',
+    width: 'רוחב',
+    height: 'גובה',
+    length: 'אורך',
+    padding: 'ריפוד',
+    spacing: 'ריווח',
+    chart: 'תרשים',
+    title: 'כותרת',
+    titlePlaceholder: 'כותרת התרשים - לחץ פעמיים לעריכה',
+    background: 'רקע',
+    font: 'גופן',
+    top: 'עליון',
+    right: 'ימין',
+    bottom: 'תחתון',
+    left: 'שמאל',
+    labels: 'תוויות',
+    size: 'גודל',
+    minSize: 'גודל מינימלי',
+    maxSize: 'גודל מקסימלי',
+    legend: 'מקרא',
+    position: 'מיקום',
+    markerSize: 'גודל מרקר',
+    markerStroke: 'מסגרת מרקר',
+    markerPadding: 'ריפוד מרקר',
+    itemSpacing: 'ריווח פריט',
+    itemPaddingX: 'ריפוד פריט X',
+    itemPaddingY: 'ריפוד פריט Y',
+    layoutHorizontalSpacing: 'ריווח אופקי',
+    layoutVerticalSpacing: 'ריווח אנכי',
+    strokeWidth: 'רוחב קו',
+    lineDash: 'קו מקווקו',
+    offset: 'היסט',
+    offsets: 'היסטים',
+    tooltips: 'תיבות מידע',
+    callout: 'תיבת התראה',
+    markers: 'מרקרים',
+    shadow: 'צל',
+    blur: 'טשטוש',
+    xOffset: 'היסט X',
+    yOffset: 'היסט Y',
+    lineWidth: 'עובי קו',
+    normal: 'רגיל',
+    bold: 'מודגש',
+    italic: 'נטוי',
+    boldItalic: 'מודגש נטוי',
+    predefined: 'מוגדר מראש',
+    fillOpacity: 'אטימות מילוי',
+    strokeOpacity: 'אטימות קו',
+    histogramBinCount: 'ספירת תאים',
+    columnGroup: 'עמודה',
+    barGroup: 'טור',
+    pieGroup: 'עוגה',
+    lineGroup: 'קו',
+    scatterGroup: 'XY (פיזור)',
+    areaGroup: 'אזור',
+    histogramGroup: 'היסטוגרמה',
+    combinationGroup: 'שילוב',
+    groupedColumnTooltip: 'קיבוץ',
+    stackedColumnTooltip: 'מוערכות',
+    normalizedColumnTooltip: 'מוערכות 100%',
+    groupedBarTooltip: 'קיבוץ',
+    stackedBarTooltip: 'מוערכות',
+    normalizedBarTooltip: 'מוערכות 100%',
+    pieTooltip: 'עוגה',
+    doughnutTooltip: 'תופסת',
+    lineTooltip: 'קו',
+    groupedAreaTooltip: 'אזור',
+    stackedAreaTooltip: 'מוערכות',
+    normalizedAreaTooltip: 'מוערכות 100%',
+    scatterTooltip: 'פיזור',
+    bubbleTooltip: 'בועה',
+    histogramTooltip: 'היסטוגרמה',
+    columnLineComboTooltip: 'עמודות וקו',
+    areaColumnComboTooltip: 'אזור ועמודות',
+    customComboTooltip: 'שילוב מותאם אישית',
+    noDataToChart: 'אין נתונים זמינים לתרשים.',
+    pivotChartRequiresPivotMode: 'תרשים צירופים דורש מצב צירופים מופעל.',
+    chartSettingsToolbarTooltip: 'תפריט',
+    chartLinkToolbarTooltip: 'קישור לגריד',
+    chartUnlinkToolbarTooltip: 'ביטול קישור מהגריד',
+    chartDownloadToolbarTooltip: 'הורדת התרשים',
+    seriesChartType: 'סוג תרשים סדרות',
+    seriesType: 'סוג סדרות',
+    secondaryAxis: 'ציר משני',
+
+    // ARIA
+    ariaChecked: 'מסומן',
+    ariaColumn: 'עמודה',
+    ariaColumnGroup: 'קבוצת עמודות',
+    ariaColumnList: 'רשימת עמודות',
+    ariaColumnSelectAll: 'בחר את כל העמודות',
+    ariaDateFilterInput: 'תיבת קלט סינון תאריכים',
+    ariaDefaultListName: 'רשימה',
+    ariaFilterColumnsInput: 'תיבת קלט סינון עמודות',
+    ariaFilterFromValue: 'ערך מסנן מ',
+    ariaFilterInput: 'תיבת קלט סינון',
+    ariaFilterList: 'רשימת סינון',
+    ariaFilterToValue: 'ערך מסנן אל',
+    ariaFilterValue: 'ערך מסנן',
+    ariaFilterMenuOpen: 'פתח תפריט סינון',
+    ariaFilteringOperator: 'מפעיל סינון',
+    ariaHidden: 'מוסתר',
+    ariaIndeterminate:'לא מוגדר',
+    ariaInputEditor: 'עורך קלט',
+    ariaMenuColumn: 'לחץ על CTRL ENTER כדי לפתוח תפריט עמודה.',
+    ariaRowDeselect: 'לחץ על SPACE כדי לבטל בחירה בשורה זו',
+    ariaRowSelectAll: 'לחץ על SPACE כדי לשנות את בחירת כל השורות',
+    ariaRowToggleSelection: 'לחץ על SPACE כדי לשנות את בחירת השורה',
+    ariaRowSelect: 'לחץ על SPACE כדי לבחור את השורה',
+    ariaSearch: 'חיפוש',
+    ariaSortableColumn: 'לחץ על ENTER כדי למיין',
+    ariaToggleVisibility: 'לחץ על SPACE כדי לשנות את הראות',
+    ariaToggleCellValue: 'לחץ על SPACE כדי לשנות את ערך התא',
+    ariaUnchecked: 'לא מסומן',
+    ariaVisible: 'מוצג',
+    ariaSearchFilterValues: 'חיפוש בערכי הסינון',
+
+    // ARIA Labels for Drop Zones
+    ariaRowGroupDropZonePanelLabel: 'קבוצות שורות',
+    ariaValuesDropZonePanelLabel: 'ערכים',
+    ariaPivotDropZonePanelLabel: 'תגיות עמודות',
+    ariaDropZoneColumnComponentDescription: 'לחץ DELETE כדי להסיר',
+    ariaDropZoneColumnValueItemDescription: 'לחץ ENTER כדי לשנות את סוג האגרגציה',
+    ariaDropZoneColumnGroupItemDescription: 'לחץ ENTER כדי למיין',
+    ariaDropZoneColumnComponentAggFuncSeparator: ' של ',
+    ariaDropZoneColumnComponentSortAscending: 'מיון עולה',
+    ariaDropZoneColumnComponentSortDescending: 'מיון יורד',
+
+    // ARIA Labels for Dialogs
+    ariaLabelColumnMenu: 'תפריט עמודות',
+    ariaLabelCellEditor: 'עורך תא',
+    ariaLabelDialog: 'דיאלוג',
+    ariaLabelSelectField: 'בחירת שדה',
+    ariaLabelTooltip: 'הסבר קצר',
+    ariaLabelContextMenu: 'תפריט הקשר',
+    ariaLabelSubMenu: 'תת תפריט',
+    ariaLabelAggregationFunction: 'פונקציית אגרגציה',
+
+    // Number Format (Status Bar, Pagination Panel)
+    thousandSeparator: ',',
+    decimalSeparator: '.',
+
+    // Data types
+    true: 'נכון',
+    false: 'לא נכון',
+    invalidDate: 'תאריך לא תקין',
+    invalidNumber: 'מספר לא תקין',
+    january: 'ינואר',
+    february: 'פברואר',
+    march: 'מרץ',
+    april: 'אפריל',
+    may: 'מאי',
+    june: 'יוני',
+    july: 'יולי',
+    august: 'אוגוסט',
+    september: 'ספטמבר',
+    october: 'אוקטובר',
+    november: 'נובמבר',
+    december: 'דצמבר',
+};

package/package.json

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