awing-library 2.1.1 → 2.1.2-stage

package/lib/AWING/Chart/BarLineComponent.js

@@ -15,14 +15,17 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
+var material_1 = require("@mui/material");
 var Helpers_1 = require("../../Utils/Helpers");
 require("chartjs-adapter-moment");
 var moment_1 = __importDefault(require("moment"));
 var react_i18next_1 = require("react-i18next");
-var Styles_1 = require("./Styles");
+var i18n_1 = __importDefault(require("../../i18n"));
 var Enums_1 = require("./Enums");
+var Styles_1 = require("./Styles");
 var BarLineComponent = function (props) {
-    var t = (0, react_i18next_1.useTranslation)().t;
+    var t = (0, react_i18next_1.useTranslation)(undefined, { i18n: i18n_1.default }).t;
+    var optionsDefault = props.optionsDefault;
     var chart = props.chart, _a = props.width, width = _a === void 0 ? 'auto' : _a, _b = props.height, height = _b === void 0 ? 350 : _b, _c = props.timeline, timeline = _c === void 0 ? Enums_1.TYPE_TIMELINE.DAY : _c, _d = props.optionCustom, optionCustom = _d === void 0 ? {} : _d, dataChart = props.dataChart, type = props.type, _e = props.options, options = _e === void 0 ? {
         responsive: true,
         maintainAspectRatio: false,
@@ -39,8 +42,8 @@ var BarLineComponent = function (props) {
                 bodySpacing: 8,
                 callbacks: {
                     title: function (tooltipItems) {
-                        //Sửa lại với thời gian theo giờ
                         var _a;
+                        //Sửa lại với thời gian theo giờ
                         var timeFormat = (_a = tooltipItems[0].raw) === null || _a === void 0 ? void 0 : _a.x;
                         var isTimelineHour = (timeFormat === null || timeFormat === void 0 ? void 0 : timeFormat.length) > 8;
                         if (isTimelineHour) {
@@ -60,63 +63,71 @@ var BarLineComponent = function (props) {
                                 .slice(0, -1)
                                 .join(' ');
                         }
-                        labels += ' ' + tooltipItem.formattedValue;
+                        labels += ': ' + tooltipItem.formattedValue;
                         return ' ' + labels;
                     },
                 },
                 titleColor: '#212121',
                 bodyFont: {
                     size: 14,
-                    family: 'Roboto',
+                    family: "'Roboto', sans-serif",
                     lineHeight: 1.5,
                 },
             },
+            htmlLegend: {
+                // ID of the container to put the legend in
+                containerID: 'legend-container',
+            },
             legend: {
                 position: 'bottom',
                 labels: {
                     usePointStyle: true,
-                    pointStyle: 'circle',
+                    // pointStyle: 'circle',
                     boxHeight: 12,
                     boxWidth: 12,
                     padding: 30,
                     boxPadding: 50,
                     font: {
                         size: 15,
-                        family: 'Roboto',
+                        family: "'Roboto', sans-serif",
                         lineHeight: 1.5,
                     },
                 },
-                display: true,
+                display: false,
             },
         },
         scales: {
-            x: {
-                type: 'time',
-                display: true,
-                grid: { display: false },
-                time: {
-                    parser: timeline === Enums_1.TYPE_TIMELINE.DAY
-                        ? 'YYYYMMDD'
-                        : 'YYYYMMDDHH',
-                    unit: timeline === Enums_1.TYPE_TIMELINE.DAY ? 'day' : 'hour',
-                    displayFormats: {
-                        day: 'DD/MM',
-                        hour: 'HH:mm',
+            x: optionsDefault
+                ? {}
+                : {
+                    type: 'time',
+                    display: true,
+                    grid: { display: false },
+                    time: {
+                        parser: timeline === Enums_1.TYPE_TIMELINE.DAY
+                            ? 'YYYYMMDD'
+                            : 'YYYYMMDDHH',
+                        unit: timeline === Enums_1.TYPE_TIMELINE.DAY
+                            ? 'day'
+                            : 'hour',
+                        displayFormats: {
+                            day: 'DD/MM',
+                            hour: 'HH:mm',
+                        },
                     },
-                },
-                offset: true,
-                ticks: {
-                    maxTicksLimit: 10,
-                    autoSkipPadding: 16,
-                    maxRotation: 0,
-                },
-                title: {
-                    font: {
-                        size: 14,
-                        family: 'Roboto',
+                    offset: true,
+                    ticks: {
+                        maxTicksLimit: 10,
+                        autoSkipPadding: 16,
+                        maxRotation: 0,
+                    },
+                    title: {
+                        font: {
+                            size: 14,
+                            family: "'Roboto', sans-serif",
+                        },
                     },
                 },
-            },
             y: {
                 type: 'linear',
                 display: true,
@@ -136,7 +147,7 @@ var BarLineComponent = function (props) {
                     font: {
                         size: 14,
                         weight: 'bold',
-                        family: 'Roboto',
+                        family: "'Roboto', sans-serif",
                     },
                 },
             },
@@ -155,7 +166,7 @@ var BarLineComponent = function (props) {
                     font: {
                         size: 14,
                         weight: 'bold',
-                        family: 'Roboto',
+                        family: "'Roboto', sans-serif",
                     },
                 },
             },
@@ -176,10 +187,101 @@ var BarLineComponent = function (props) {
         }),
     };
     var Chart = chart;
-    return ((0, jsx_runtime_1.jsx)("div", { style: {
+    var getOrCreateLegendList = function (chart, id) {
+        var legendContainer = document.getElementById(id);
+        var listContainer = legendContainer === null || legendContainer === void 0 ? void 0 : legendContainer.querySelector('ul');
+        if (!listContainer) {
+            listContainer = document.createElement('ul');
+            listContainer.style.display = 'flex';
+            listContainer.style.flexDirection = 'row';
+            listContainer.style.margin = '0';
+            listContainer.style.padding = '0';
+            legendContainer === null || legendContainer === void 0 ? void 0 : legendContainer.appendChild(listContainer);
+        }
+        return listContainer;
+    };
+    var htmlLegendPlugin = {
+        id: 'htmlLegend',
+        afterUpdate: function (chart, args, options) {
+            var ul = getOrCreateLegendList(chart, options.containerID);
+            // Remove old legend items
+            while (ul.firstChild) {
+                ul.firstChild.remove();
+            }
+            // Reuse the built-in legendItems generator
+            var items = chart.options.plugins.legend.labels.generateLabels(chart);
+            items.forEach(function (item) {
+                var li = document.createElement('li');
+                li.style.alignItems = 'center';
+                li.style.cursor = 'pointer';
+                li.style.display = 'flex';
+                li.style.flexDirection = 'row';
+                li.style.marginLeft = '10px';
+                li.onclick = function () {
+                    var type = chart.config.type;
+                    if (type === 'pie' || type === 'doughnut') {
+                        // Pie and doughnut charts only have a single dataset and visibility is per item
+                        chart.toggleDataVisibility(item.index);
+                    }
+                    else {
+                        chart.setDatasetVisibility(item.datasetIndex, !chart.isDatasetVisible(item.datasetIndex));
+                    }
+                    chart.update();
+                };
+                // Color box
+                var boxSpan = document.createElement('div');
+                boxSpan.style.background = item.fillStyle;
+                boxSpan.style.borderColor = item.strokeStyle;
+                boxSpan.style.borderWidth = item.lineWidth + 'px';
+                boxSpan.style.display = 'inline-block';
+                boxSpan.style.flexShrink = '0';
+                boxSpan.style.height = '15px';
+                boxSpan.style.marginRight = '15px';
+                boxSpan.style.width = '15px';
+                if (item === null || item === void 0 ? void 0 : item.lineWidth) {
+                    boxSpan.setAttribute("class", 'point');
+                }
+                if ((item === null || item === void 0 ? void 0 : item.pointStyle) === 'circle') {
+                    boxSpan.style.borderRadius = '20px';
+                }
+                // Text
+                var textContainer = document.createElement('p');
+                textContainer.style.color = item.fontColor;
+                textContainer.style.margin = '0';
+                textContainer.style.padding = '0';
+                textContainer.style.textDecoration = item.hidden
+                    ? 'line-through'
+                    : '';
+                var text = document.createTextNode(item.text);
+                textContainer.appendChild(text);
+                li.appendChild(boxSpan);
+                li.appendChild(textContainer);
+                ul.appendChild(li);
+            });
+        },
+    };
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
             width: width,
             height: height,
             position: 'relative',
-        }, children: (0, jsx_runtime_1.jsx)(Chart, { data: chartData, type: type, options: (0, Helpers_1.updateObjectFields)(options, optionCustom) }) }));
+            marginBottom: '80px',
+            '.point': {
+                position: "relative",
+                '&::after': {
+                    content: '""',
+                    position: 'absolute',
+                    top: '50%',
+                    left: '-5px', /* Adjust as needed */
+                    right: '-5px', /* Adjust as needed */
+                    height: '2px', /* Thickness of the line */
+                    backgroundColor: 'inherit',
+                    transform: 'translateY(-50%)'
+                }
+            },
+        }, children: [(0, jsx_runtime_1.jsx)(Chart, { data: chartData, type: type, options: (0, Helpers_1.updateObjectFields)(options, optionCustom), plugins: [htmlLegendPlugin] }), (0, jsx_runtime_1.jsx)(material_1.Box, { id: "legend-container", sx: {
+                    marginTop: '35px',
+                    display: 'flex',
+                    justifyContent: 'center',
+                } })] }));
 };
 exports.default = BarLineComponent;

package/lib/AWING/Chart/PieComponent.d.ts

@@ -1,10 +1,11 @@
-import { ChartProps } from 'react-chartjs-2/dist/types';
-interface IPieComponent extends ChartProps {
-    dataConvert?: any;
-    widthChart?: any;
-    heightChart?: any;
-    optionCustom?: any;
-    chart: any;
+import { ChartData, ChartOptions, ChartType } from 'chart.js';
+import { ChartProps, TypedChartComponent } from 'react-chartjs-2/dist/types';
+export interface IPieComponent extends ChartProps {
+    dataConvert?: ChartData<ChartType>;
+    widthChart?: number;
+    heightChart?: number;
+    optionCustom?: ChartOptions<ChartType>;
+    chart: TypedChartComponent<"pie">;
 }
 declare const PieComponent: ({ chart, data, dataConvert, widthChart, heightChart, optionCustom, options, }: IPieComponent) => import("react/jsx-runtime").JSX.Element;
 export default PieComponent;

package/lib/AWING/Chart/PieComponent.js

@@ -2,14 +2,13 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 var Helpers_1 = require("../../Utils/Helpers");
-// const chartColorDefaults = ['#0055b8', '#dd040c', '#80b0ff']
 var chartColorDefaults = [
     '#80b0ff',
     '#0055b8',
     '#dd040c',
     '#aed6dc',
     '#ff9a8d',
-    '#4a536b'
+    '#4a536b',
 ];
 var PieComponent = function (_a) {
     var chart = _a.chart, data = _a.data, _b = _a.dataConvert, dataConvert = _b === void 0 ? {
@@ -39,7 +38,7 @@ var PieComponent = function (_a) {
                     pointStyle: 'circle',
                     font: {
                         size: 14,
-                        family: 'Roboto',
+                        family: "'Roboto', sans-serif",
                         lineHeight: 1.5,
                     },
                 },
@@ -55,7 +54,7 @@ var PieComponent = function (_a) {
                 bodySpacing: 8,
                 bodyFont: {
                     size: 14,
-                    family: 'Roboto',
+                    family: "'Roboto', sans-serif",
                     lineHeight: 1.5,
                 },
                 callbacks: {

package/lib/AWING/Chart/Styles.d.ts

@@ -4,8 +4,12 @@ export declare const styledLineFill: (defaultStyle: any, variant: any) => any;
 export declare const getStyle: (defaultStyle: any, type: any, color: any) => any;
 export declare const dataSetCommonStyled: {
     barStyle: {
-        primary: {};
-        secondary: {};
+        primary: {
+            backgroundColor: string;
+        };
+        secondary: {
+            backgroundColor: string;
+        };
         default: {
             backgroundColor: string;
         };

package/lib/AWING/Chart/Styles.js

@@ -95,8 +95,12 @@ var getStyle = function (defaultStyle, type, color) {
 exports.getStyle = getStyle;
 exports.dataSetCommonStyled = {
     barStyle: {
-        primary: {},
-        secondary: {},
+        primary: {
+            backgroundColor: '#0055b8',
+        },
+        secondary: {
+            backgroundColor: '#dd040c',
+        },
         default: {
             backgroundColor: '#80b0ff',
         },

package/lib/AWING/Chart/index.d.ts

@@ -0,0 +1,3 @@
+import BarLineComponent from './BarLineComponent';
+import PieComponent from './PieComponent';
+export { BarLineComponent, PieComponent };

package/lib/AWING/Chart/index.js

@@ -0,0 +1,10 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PieComponent = exports.BarLineComponent = void 0;
+var BarLineComponent_1 = __importDefault(require("./BarLineComponent"));
+exports.BarLineComponent = BarLineComponent_1.default;
+var PieComponent_1 = __importDefault(require("./PieComponent"));
+exports.PieComponent = PieComponent_1.default;

package/lib/AWING/DataForm/DataInput.js

@@ -43,11 +43,11 @@ var GeoFencing_1 = __importDefault(require("../../ACM-AXN/GeoFencing"));
 var i18n_1 = __importDefault(require("../../i18n"));
 var omit = require('lodash/omit');
 function DataInput(props) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
     var t = (0, react_i18next_1.useTranslation)(undefined, { i18n: i18n_1.default }).t;
     var fieldDefinition = props.fieldDefinition, onChange = props.onChange, value = props.value, error = props.error, disableHelperText = props.disableHelperText;
-    var fieldName = fieldDefinition.fieldName, type = fieldDefinition.type, onValidate = fieldDefinition.onValidate, min = fieldDefinition.min, max = fieldDefinition.max, other = __rest(fieldDefinition, ["fieldName", "type", "onValidate", "min", "max"]);
-    var _k = react_2.default.useState(t('Common.InvalidData')), errorText = _k[0], setErrorText = _k[1];
+    var fieldName = fieldDefinition.fieldName, type = fieldDefinition.type, onValidate = fieldDefinition.onValidate, min = fieldDefinition.min, max = fieldDefinition.max, pattern = fieldDefinition.pattern, other = __rest(fieldDefinition, ["fieldName", "type", "onValidate", "min", "max", "pattern"]);
+    var _m = react_2.default.useState(t('Common.InvalidData')), errorText = _m[0], setErrorText = _m[1];
     var checkValidationValue = function (fieldDefinition, val) {
         if (!fieldDefinition.required &&
             (val === undefined || val === null || val === '' || (Array.isArray(val) && val.length === 0)))
@@ -108,18 +108,19 @@ function DataInput(props) {
                         : '' }) }));
         }
         case 'autocomplete': {
+            var autocompleteValue_1 = (_b = fieldDefinition.value) !== null && _b !== void 0 ? _b : value;
             return ((0, jsx_runtime_1.jsx)(material_1.Autocomplete, { multiple: fieldDefinition.multiple, options: fieldDefinition.options, getOptionLabel: function (option) { var _a, _b; return (_b = (_a = option.label) !== null && _a !== void 0 ? _a : option.text) !== null && _b !== void 0 ? _b : ''; }, isOptionEqualToValue: function (option, value) {
                     return (option === null || option === void 0 ? void 0 : option.value) === (value === null || value === void 0 ? void 0 : value.value);
-                }, disableclearable: fieldDefinition.disableClearable, onChange: function (e, value) {
+                }, getOptionKey: function (option) { return option.value; }, disableclearable: fieldDefinition.disableClearable, getOptionDisabled: function (option) { return option === null || option === void 0 ? void 0 : option.disabled; }, onChange: function (e, value) {
                     var newValue = fieldDefinition.multiple
                         ? value.map(function (x) { return x === null || x === void 0 ? void 0 : x.value; })
                         : value === null || value === void 0 ? void 0 : value.value;
                     onChange(newValue, checkValidationValue(fieldDefinition, newValue));
                 }, value: fieldDefinition.multiple
                     ? fieldDefinition.options.filter(function (x) {
-                        return (value !== null && value !== void 0 ? value : []).includes(x.value);
+                        return (autocompleteValue_1 !== null && autocompleteValue_1 !== void 0 ? autocompleteValue_1 : []).includes(x.value);
                     })
-                    : fieldDefinition.options.find(function (x) { return x.value === value; }) || null, clearOnEscape: true, fullWidth: true, disableCloseOnSelect: fieldDefinition.multiple, readOnly: fieldDefinition.readOnly, renderInput: function (params) {
+                    : (_c = fieldDefinition.options.find(function (x) { return x.value === autocompleteValue_1; })) !== null && _c !== void 0 ? _c : '', clearOnEscape: true, fullWidth: true, disableCloseOnSelect: fieldDefinition.multiple, readOnly: fieldDefinition.readOnly, renderInput: function (params) {
                     var _a;
                     return ((0, jsx_runtime_1.jsx)(material_1.TextField, __assign({}, params, other, { variant: "standard", error: error, helperText: !disableHelperText && error
                             ? (_a = fieldDefinition.helperText) !== null && _a !== void 0 ? _a : t('Common.InvalidData')
@@ -143,7 +144,7 @@ function DataInput(props) {
                     return onChange(date === null || date === void 0 ? void 0 : date.toDate(), checkValidationValue(fieldDefinition, date === null || date === void 0 ? void 0 : date.toDate()));
                 }, readOnly: fieldDefinition.readOnly, slotProps: {
                     textField: __assign(__assign({ required: fieldDefinition.required, fullWidth: true, variant: 'standard' }, other), { error: error, helperText: !disableHelperText && error
-                            ? (_b = fieldDefinition.helperText) !== null && _b !== void 0 ? _b : t('Common.InvalidData')
+                            ? (_d = fieldDefinition.helperText) !== null && _d !== void 0 ? _d : t('Common.InvalidData')
                             : '' }),
                 } }));
         }
@@ -152,12 +153,12 @@ function DataInput(props) {
                     return onChange(date === null || date === void 0 ? void 0 : date.toDate(), checkValidationValue(fieldDefinition, date === null || date === void 0 ? void 0 : date.toDate()));
                 }, slotProps: {
                     textField: __assign(__assign({ required: fieldDefinition.required, fullWidth: true, variant: 'standard' }, other), { error: error, helperText: !disableHelperText && error
-                            ? (_c = fieldDefinition.helperText) !== null && _c !== void 0 ? _c : t('Common.InvalidData')
+                            ? (_e = fieldDefinition.helperText) !== null && _e !== void 0 ? _e : t('Common.InvalidData')
                             : '' }),
                 }, readOnly: fieldDefinition.readOnly }));
         }
         case 'date-range': {
-            var _l = other, isDayBlocked = _l.isDayBlocked, isOutsideRange = _l.isOutsideRange;
+            var _o = other, isDayBlocked = _o.isDayBlocked, isOutsideRange = _o.isOutsideRange;
             return ((0, jsx_runtime_1.jsx)(AWING_1.DateRangePicker, { noBorder: true, variant: "standard", textFieldProps: __assign({ fullWidth: true, style: { margin: '8px 0px' } }, omit(other, ['isDayBlocked', 'isOutsideRange'])), value: {
                     startDate: (value === null || value === void 0 ? void 0 : value[0]) || null,
                     endDate: (value === null || value === void 0 ? void 0 : value[1]) || null,
@@ -165,15 +166,15 @@ function DataInput(props) {
                     var newValue = [dateRange.startDate, dateRange.endDate];
                     onChange(newValue, checkValidationValue(fieldDefinition, newValue));
                 }, label: fieldDefinition.label, error: error, helperText: !disableHelperText && error
-                    ? (_d = fieldDefinition.helperText) !== null && _d !== void 0 ? _d : t('Common.InvalidData')
+                    ? (_f = fieldDefinition.helperText) !== null && _f !== void 0 ? _f : t('Common.InvalidData')
                     : '', disableHelperText: disableHelperText, isDayBlocked: isDayBlocked, isOutsideRange: isOutsideRange }));
         }
         case 'number': {
             return ((0, jsx_runtime_1.jsx)(AWING_1.NumberFormat, __assign({ id: fieldName.toString(), name: fieldName.toString(), fullWidth: true, variant: "standard" }, other, { value: value !== null && value !== void 0 ? value : '', onChange: function (event) {
-                    var newValue = event.target.value;
-                    onChange(event.target.value, checkValidationValue(fieldDefinition, newValue));
+                    var newValue = Number(event.target.value);
+                    onChange(newValue, checkValidationValue(fieldDefinition, newValue));
                 }, error: error, helperText: !disableHelperText && error
-                    ? (_e = fieldDefinition.helperText) !== null && _e !== void 0 ? _e : t('Common.InvalidData')
+                    ? (_g = fieldDefinition.helperText) !== null && _g !== void 0 ? _g : t('Common.InvalidData')
                     : '' })));
         }
         case 'radio': {
@@ -188,19 +189,19 @@ function DataInput(props) {
         case 'text':
         case 'text-area': {
             return ((0, jsx_runtime_1.jsx)(material_1.TextField, __assign({ id: fieldName.toString(), name: fieldName.toString(), type: 'text', fullWidth: true, variant: "standard", multiline: fieldDefinition.type === 'text-area', error: error, helperText: !disableHelperText && error
-                    ? (_f = fieldDefinition.helperText) !== null && _f !== void 0 ? _f : errorText
+                    ? (_h = fieldDefinition.helperText) !== null && _h !== void 0 ? _h : errorText
                     : '' }, other, { value: value !== null && value !== void 0 ? value : '', onChange: function (event) {
                     return onChange(event.target.value, checkValidationValue(fieldDefinition, event.target.value));
                 } })));
         }
         case 'select': {
-            return ((0, jsx_runtime_1.jsxs)(material_1.TextField, __assign({ id: fieldName.toString(), name: fieldName.toString(), fullWidth: true, select: true, variant: "standard", value: value !== null && value !== void 0 ? value : '', onChange: function (event) {
+            return ((0, jsx_runtime_1.jsxs)(material_1.TextField, __assign({ id: fieldName.toString(), name: fieldName.toString(), fullWidth: true, select: true, variant: "standard", value: value !== null && value !== void 0 ? value : "", onChange: function (event) {
                     var newValue = fieldDefinition.multiple
                         ? event.target.value.split(',')
                         : event.target.value;
                     onChange(event.target.value, checkValidationValue(fieldDefinition, newValue));
                 }, error: error, helperText: !disableHelperText && error
-                    ? (_g = fieldDefinition.helperText) !== null && _g !== void 0 ? _g : t('Common.InvalidData')
+                    ? (_j = fieldDefinition.helperText) !== null && _j !== void 0 ? _j : t('Common.InvalidData')
                     : '' }, other, { children: [!fieldDefinition.required && ((0, jsx_runtime_1.jsx)(material_1.MenuItem, { value: "", children: (0, jsx_runtime_1.jsx)("em", { children: t('Common.None') }) })), fieldDefinition.options.map(function (item, index) {
                         var _a;
                         return ((0, jsx_runtime_1.jsx)(material_1.MenuItem, __assign({ value: item.value, disabled: item.disabled ||
@@ -214,7 +215,7 @@ function DataInput(props) {
             return ((0, jsx_runtime_1.jsx)(AWING_1.MultipleHierarchicalChoice, __assign({}, fieldDefinition, { variant: "standard", value: value, onChange: function (value) {
                     onChange(value, checkValidationValue(fieldDefinition, value));
                 }, error: error, helperText: !disableHelperText && error
-                    ? (_h = fieldDefinition.helperText) !== null && _h !== void 0 ? _h : t('Common.InvalidData')
+                    ? (_k = fieldDefinition.helperText) !== null && _k !== void 0 ? _k : t('Common.InvalidData')
                     : '' })));
         }
         case 'geo-fencing': {
@@ -227,7 +228,7 @@ function DataInput(props) {
             return ((0, jsx_runtime_1.jsx)(material_1.TextField, __assign({ id: fieldName.toString(), name: fieldName.toString(), type: fieldDefinition.type, fullWidth: true, variant: "standard" }, other, { value: value !== null && value !== void 0 ? value : '', onChange: function (event) {
                     return onChange(event.target.value, checkValidationValue(fieldDefinition, event.target.value));
                 }, error: error, helperText: !disableHelperText && error
-                    ? (_j = fieldDefinition.helperText) !== null && _j !== void 0 ? _j : t('Common.InvalidData')
+                    ? (_l = fieldDefinition.helperText) !== null && _l !== void 0 ? _l : t('Common.InvalidData')
                     : '' })));
         }
     }

package/lib/AWING/DataForm/interface.d.ts

@@ -87,14 +87,14 @@ export interface TextFieldDefinition<T extends DataObject> extends BaseFieldDefi
     /**
      * Định dạng regex cho hàm textValid
      */
-    pattern?: RegExp;
+    pattern?: RegExp | false;
     /**
      *
      * @param value
      * @param length - Độ dài byte, only type text và text-area
      * @param pattern - Định dạng regex, only type text và text-area
      */
-    onValidate?(value?: string, length?: number, pattern?: RegExp): boolean;
+    onValidate?(value?: string, length?: number, pattern?: RegExp | false): boolean;
     defaultValue?: string;
     autoFormula?: string;
 }

package/lib/AWING/DataGrid/index.js

@@ -30,13 +30,15 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DataGrid = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = __importDefault(require("react"));
 var styles_1 = require("@mui/material/styles");
 var material_1 = require("@mui/material");
 var Pagination_1 = __importDefault(require("../Pagination"));
 var NoData_1 = __importDefault(require("../NoData"));
 var constants_1 = require("../constants");
-var helper_1 = require("../helper");
+var Helpers_1 = require("../../Utils/Helpers");
 var get_1 = __importDefault(require("../Form/Utils/get"));
+var i18n_1 = __importDefault(require("../../i18n"));
 var StyledTableRow = (0, styles_1.styled)(material_1.TableRow)({
     '& .MuiTableCell-root:last-child .MuiButtonBase-root': {
         visibility: 'hidden',
@@ -72,6 +74,13 @@ var SpanSortIndex = (0, styles_1.styled)('span')({
 });
 var DataGrid = function (props) {
     var columns = props.columns, rows = props.rows, _a = props.hideHeader, hideHeader = _a === void 0 ? false : _a, spanningRows = props.spanningRows, _b = props.spanningRowsPosition, spanningRowsPosition = _b === void 0 ? 'bottom' : _b, getRowId = props.getRowId, onRowClick = props.onRowClick, rowActions = props.rowActions, sortModel = props.sortModel, onSortModelChange = props.onSortModelChange, selected = props.selected, onSelectedChange = props.onSelectedChange, selectionActions = props.selectionActions, _c = props.pageIndex, pageIndex = _c === void 0 ? constants_1.PAGE_INDEX_DEFAULT : _c, _d = props.pageSize, pageSize = _d === void 0 ? constants_1.PAGE_SIZE_DEFAULT : _d, _e = props.totalOfRows, totalOfRows = _e === void 0 ? rows.length : _e, _f = props.rowsPerPageOptions, rowsPerPageOptions = _f === void 0 ? [10, 20, 30] : _f, onPageIndexChange = props.onPageIndexChange, onPageSizeChange = props.onPageSizeChange;
+    var _g = react_1.default.useState(), forceUpdate = _g[1];
+    react_1.default.useEffect(function () {
+        var language = localStorage.getItem('i18nextLng');
+        i18n_1.default.changeLanguage(language || 'vi');
+        forceUpdate({});
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [localStorage.getItem('i18nextLng')]);
     var createSortHandler = function (fieldName) { return function (event) {
         var _a, _b, _c;
         if (onSortModelChange) {
@@ -168,7 +177,7 @@ var DataGrid = function (props) {
         }
     };
     var calcOrder = function (index) { return pageIndex * pageSize + 1 + index; };
-    return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(material_1.TableContainer, { component: material_1.Paper, children: [(0, jsx_runtime_1.jsxs)(material_1.Table, { "aria-label": "simple table", style: { tableLayout: 'fixed' }, children: [!hideHeader && ((0, jsx_runtime_1.jsx)(material_1.TableHead, { children: (0, jsx_runtime_1.jsxs)(material_1.TableRow, { children: [selected && onSelectedChange && ((0, jsx_runtime_1.jsx)(material_1.TableCell, { padding: "checkbox", children: (0, jsx_runtime_1.jsx)(material_1.Checkbox, { color: "primary", indeterminate: selected.length > 0 &&
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(material_1.TableContainer, { component: material_1.Paper, children: [(0, jsx_runtime_1.jsxs)(material_1.Table, { "aria-label": "simple table", style: { tableLayout: 'fixed' }, children: [!hideHeader && ((0, jsx_runtime_1.jsx)(material_1.TableHead, { children: (0, jsx_runtime_1.jsxs)(material_1.TableRow, { children: [selected && onSelectedChange && ((0, jsx_runtime_1.jsx)(material_1.TableCell, { padding: "checkbox", children: (0, jsx_runtime_1.jsx)(material_1.Checkbox, { color: "primary", indeterminate: selected.length > 0 &&
                                                     selected.length < rows.length, checked: selected.length > 0 &&
                                                     selected.length === rows.length, onChange: function () { return handleSelectAll(); }, inputProps: {
                                                     'aria-label': 'select all desserts',
@@ -232,7 +241,7 @@ var DataGrid = function (props) {
                                                     var displayValue = col.valueGetter
                                                         ? col.valueGetter(row, idx, calcOrder(idx))
                                                         : col.type === 'number'
-                                                            ? (0, helper_1.formatNumber)(row[col.field])
+                                                            ? (0, Helpers_1.formatNumber)(row[col.field])
                                                             : (0, get_1.default)(row, col.field);
                                                     var dynamicStyle = col.dynamicTableCellProps
                                                         ? col.dynamicTableCellProps(row)
@@ -256,7 +265,12 @@ var DataGrid = function (props) {
                                                                         : 1,
                                                                 }, sx: __assign(__assign({}, actionDef.sx), { borderRadius: '15%' }), children: typeof actionDef.icon ===
                                                                     'function'
-                                                                    ? actionDef.icon({ id: id, row: row, idx: idx, order: calcOrder(idx) })
+                                                                    ? actionDef.icon({
+                                                                        id: id,
+                                                                        row: row,
+                                                                        idx: idx,
+                                                                        order: calcOrder(idx),
+                                                                    })
                                                                     : actionDef.icon }) }, "".concat(id, "-").concat(actIdx)));
                                                     }) }))] }), id));
                                     }), spanningRowsPosition == 'bottom' && spanningRows] })] }), !rows.length && (0, jsx_runtime_1.jsx)(NoData_1.default, {})] }), onPageIndexChange && onPageSizeChange && ((0, jsx_runtime_1.jsx)(Pagination_1.default, { rowsPerPageOptions: rowsPerPageOptions, colSpan: 3, count: totalOfRows, rowsPerPage: pageSize, page: pageIndex, SelectProps: {
@@ -264,7 +278,7 @@ var DataGrid = function (props) {
                     native: true,
                 }, onPageChange: function (e, page) { return onPageIndexChange(page); }, onRowsPerPageChange: function (e) {
                     return onPageSizeChange(parseInt(e.target.value, 10));
-                } }))] });
+                } }))] }));
 };
 exports.DataGrid = DataGrid;
 exports.default = exports.DataGrid;

package/lib/AWING/DataGrid/interface.d.ts

@@ -7,7 +7,45 @@ export interface GridSortModel {
     field: string;
     sort: GridSortDirection;
 }
-export interface DataGridColumnDefinition {
+interface DataGridColumnDefinitionBase {
+    /**
+     * Tên trường
+     */
+    field: string;
+    /**
+     * Nội dung hiển thị ở header
+     */
+    headerName: ReactNode;
+    /**
+     * Nếu bằng true thì sẽ cho phép sort theo trường này
+     */
+    sortable?: boolean;
+    options?: any[];
+    /**
+     * Hàm kiểm tra giá trị điền khi sửa trực tiếp trường này
+     *
+     * @param value Giá trị
+     */
+    checkValid?(value: any): boolean;
+    /**
+     * Kiểu dữ liệu của trường
+     */
+    type?: 'text' | 'number';
+    /**
+     * Cách lấy nội dung hiển thị khác, nếu có
+     *
+     * @param row Một đối tượng trong danh sách hiển thị
+     * @param idx Số thứ tự của đối tượng trong danh sách
+     */
+    valueGetter?(row: any, idx: number, stt: number): ReactNode;
+    /**
+     * Độ rộng của cột
+     */
+    width?: string | number;
+    TableCellProps?: TableCellProps;
+    dynamicTableCellProps?: (row: any) => TableCellProps;
+}
+export interface DataGridColumnDefinition extends DataGridColumnDefinitionBase {
     /**
      * Tên trường
      */
@@ -78,7 +116,7 @@ export interface SelectionActionDefinition {
     /**
      * Hành động thực hiện khi nhấn nút
      */
-    action(): void;
+    action(ids?: Array<string>): void;
     disabled?: boolean;
 }
 export interface DataGridProps {