awing-library 2.1.2-dev.99 → 2.1.2-stable.2

package/lib/AWING/NumberFormat/index.js

@@ -0,0 +1,149 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NumberFormat = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var material_1 = require("@mui/material");
+var helper_1 = require("../helper");
+var Context_1 = __importDefault(require("../../Context"));
+var react_1 = require("react");
+var NumberFormat = function (props) {
+    var value = props.value, onChange = props.onChange, min = props.min, other = __rest(props, ["value", "onChange", "min"]);
+    var i18next = (0, react_1.useContext)(Context_1.default).i18next;
+    var handleChange = function (event) {
+        var el = event.target;
+        var newValue = el.value;
+        newValue = getFloatString(newValue);
+        if (onChange) {
+            event.target.value = newValue;
+            onChange(event);
+        }
+    };
+    function escapeRegExp(str) {
+        return str.replace(/[-[\]/{}()*+?.\\^$|]/g, '\\$&');
+    }
+    function getFloatString(num) {
+        if (num === void 0) { num = ''; }
+        var decimalSeparator = i18next.language === 'vi' ? ',' : '.';
+        //remove negation for regex check
+        var hasNegation = num[0] === '-';
+        if (hasNegation)
+            num = num.replace('-', '');
+        var numRegex = new RegExp('[0-9]|' + escapeRegExp(decimalSeparator), 'g');
+        num = (num.match(numRegex) || [])
+            .join('')
+            .replace(decimalSeparator, '.');
+        //remove extra decimals
+        var firstDecimalIndex = num.indexOf('.');
+        if (firstDecimalIndex !== -1) {
+            num = "".concat(num.substring(0, firstDecimalIndex), ".").concat(num
+                .substring(firstDecimalIndex + 1, num.length)
+                .replace(new RegExp(escapeRegExp(decimalSeparator), 'g'), ''));
+        }
+        //add negation back
+        if (hasNegation && min !== 0)
+            num = '-' + num;
+        return num;
+    }
+    function getDisplayString(val) {
+        if (val == null)
+            return '0';
+        var decimalSeparator = (i18next === null || i18next === void 0 ? void 0 : i18next.language) === 'vi' ? ',' : '.';
+        if (val === '-') {
+            return '-';
+        }
+        var displayValue = (0, helper_1.formatNumber)(val, i18next === null || i18next === void 0 ? void 0 : i18next.language);
+        if (typeof val === 'string' && val.slice(-1) === '.') {
+            displayValue += decimalSeparator;
+        }
+        return displayValue;
+    }
+    // function setCaretPosition(el: HTMLInputElement, caretPos: number) {
+    //     if (el !== null) {
+    //         // (el.selectionStart === 0 added for Firefox bug)
+    //         if (el.selectionStart || el.selectionStart === 0) {
+    //             el.focus();
+    //             el.setSelectionRange(caretPos, caretPos);
+    //             return true;
+    //         }
+    //         // fail city, fortunately this never happens (as far as I've tested) :)
+    //         el.focus();
+    //         return false;
+    //     }
+    // }
+    // const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    //     const el = e.target as HTMLInputElement;
+    //     const { key } = e;
+    //     const { selectionStart, selectionEnd, value = '' } = el;
+    //     console.log(selectionStart, selectionEnd);
+    //     let expectedCaretPosition;
+    //     if (key === 'ArrowLeft' || key === 'Backspace') {
+    //         expectedCaretPosition = selectionStart ? selectionStart - 1 : undefined;
+    //     } else if (key === 'ArrowRight') {
+    //         expectedCaretPosition = selectionStart ? selectionStart + 1 : undefined;
+    //     } else if (key === 'Delete') {
+    //         expectedCaretPosition = selectionStart;
+    //     }
+    //     if (expectedCaretPosition === undefined || selectionStart !== selectionEnd) {
+    //         if (onKeyDown) onKeyDown(e);
+    //         return;
+    //     }
+    //     if (expectedCaretPosition) {
+    //         const numRegex = new RegExp('[0-9]');
+    //         const negativeRegex = new RegExp('-');
+    //         let newCaretPosition = expectedCaretPosition as number;
+    //         if (
+    //             key === 'Delete' &&
+    //             !numRegex.test(value[expectedCaretPosition]) &&
+    //             !negativeRegex.test(value[expectedCaretPosition])
+    //         ) {
+    //             while (!numRegex.test(value[newCaretPosition]) && newCaretPosition < value.length) {
+    //                 newCaretPosition++;
+    //             }
+    //         } else if (key === 'Backspace' && !numRegex.test(value[expectedCaretPosition])) {
+    //             if (selectionStart && selectionStart <= 1 && value[0] === '-') {
+    //                 const newValue = value.substring(1);
+    //                 el.value = newValue;
+    //             } else if (!negativeRegex.test(value[expectedCaretPosition])) {
+    //                 while (!numRegex.test(value[newCaretPosition - 1]) && newCaretPosition > 0) {
+    //                     newCaretPosition--;
+    //                 }
+    //             }
+    //         }
+    //         console.log(expectedCaretPosition);
+    //         if (newCaretPosition !== expectedCaretPosition || expectedCaretPosition < 0 || expectedCaretPosition > value.length) {
+    //             e.preventDefault();
+    //             setCaretPosition(el, expectedCaretPosition);
+    //         }
+    //     }
+    //     console.log((e.target as HTMLInputElement).selectionStart);
+    //     if (onKeyDown) onKeyDown(e);
+    // }
+    return ((0, jsx_runtime_1.jsx)(material_1.TextField, __assign({ value: getDisplayString(value), onChange: handleChange }, other, { type: "text" })));
+};
+exports.NumberFormat = NumberFormat;
+exports.default = exports.NumberFormat;

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

@@ -0,0 +1,17 @@
+import React, { FC, ReactNode } from "react";
+import { TextFieldProps } from "@mui/material/TextField";
+import { AutocompleteRenderOptionState } from "@mui/material/Autocomplete";
+import { MenuOption } from "../DataGrid/interface";
+export interface AsynchronousAutocompleteProps {
+    multiple?: boolean;
+    loading?: boolean;
+    options?: MenuOption[];
+    readOnly?: boolean;
+    onSearch?(inputValue: string): void;
+    value?: any;
+    onChange?(value: any): void;
+    renderOption?: (props: React.HTMLAttributes<HTMLLIElement>, option: MenuOption, state: AutocompleteRenderOptionState) => ReactNode;
+    TextFieldProps?: TextFieldProps;
+}
+declare const AsynchronousAutocomplete: FC<AsynchronousAutocompleteProps>;
+export default AsynchronousAutocomplete;

package/lib/AWING/OldAsyncAutoComplete/index.js

@@ -0,0 +1,125 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var react_2 = __importStar(require("react"));
+var throttle_1 = __importDefault(require("lodash/throttle"));
+var TextField_1 = __importDefault(require("@mui/material/TextField"));
+var Autocomplete_1 = __importDefault(require("@mui/material/Autocomplete"));
+var CircularProgress_1 = __importDefault(require("@mui/material/CircularProgress"));
+var Checkbox_1 = __importDefault(require("@mui/material/Checkbox"));
+var CheckBoxOutlineBlank_1 = __importDefault(require("@mui/icons-material/CheckBoxOutlineBlank"));
+var CheckBox_1 = __importDefault(require("@mui/icons-material/CheckBox"));
+var AsynchronousAutocomplete = function (props) {
+    var multiple = props.multiple, loading = props.loading, options = props.options, onSearch = props.onSearch, value = props.value, onChange = props.onChange, renderOption = props.renderOption, readOnly = props.readOnly, TextFieldProps = props.TextFieldProps;
+    var _a = react_2.default.useState(value !== null && value !== void 0 ? value : (multiple ? [] : null)), selectedValue = _a[0], setSelectedValue = _a[1];
+    var _b = react_2.default.useState(""), inputValue = _b[0], setInputValue = _b[1];
+    var fetch = react_2.default.useMemo(function () {
+        return (0, throttle_1.default)(function (input) {
+            if (onSearch) {
+                onSearch(input);
+            }
+        }, 200);
+    }, [onSearch]);
+    react_2.default.useEffect(function () { return fetch(inputValue); }, [inputValue, fetch]);
+    var optionsRender = function () {
+        var opts = options !== null && options !== void 0 ? options : [];
+        if (value) {
+            if (multiple) {
+                if (!opts.some(function (x) {
+                    return value.some(function (y) { return y.value === x.value; });
+                })) {
+                    return __spreadArray(__spreadArray([], value, true), opts, true);
+                }
+            }
+            else {
+                if (!opts.some(function (x) { return x.value === value.value; })) {
+                    return __spreadArray([value], opts, true);
+                }
+            }
+        }
+        return opts;
+    };
+    (0, react_2.useEffect)(function () {
+        if (value)
+            setSelectedValue(value);
+    }, [value]);
+    return ((0, jsx_runtime_1.jsx)(Autocomplete_1.default, { id: "asynchronous-autocomplete", multiple: multiple, fullWidth: true, autoComplete: true, includeInputInList: true, readOnly: readOnly !== null && readOnly !== void 0 ? readOnly : false, value: selectedValue, onChange: function (e, newValue) {
+            if (onChange)
+                onChange(newValue);
+            setSelectedValue(newValue);
+        }, inputValue: inputValue, onInputChange: function (e, newInputValue) { return setInputValue(newInputValue); }, isOptionEqualToValue: function (option, value) {
+            return option.value === value.value;
+        }, getOptionLabel: function (option) {
+            return option.text;
+        }, options: optionsRender(), getOptionDisabled: function (option) { var _a; return (_a = option.disabled) !== null && _a !== void 0 ? _a : false; }, renderOption: renderOption !== null && renderOption !== void 0 ? renderOption : (multiple
+            ? function (props, option, _a) {
+                var _b;
+                var selected = _a.selected;
+                return ((0, react_1.createElement)("li", __assign({}, props, { key: option.value }),
+                    (0, jsx_runtime_1.jsx)(Checkbox_1.default, { icon: (0, jsx_runtime_1.jsx)(CheckBoxOutlineBlank_1.default, { fontSize: "small" }), checkedIcon: (0, jsx_runtime_1.jsx)(CheckBox_1.default, { fontSize: "small" }), style: { marginRight: 8 }, checked: selected }), (_b = option.label) !== null && _b !== void 0 ? _b : option.text));
+            }
+            : function (props, option) {
+                var _a;
+                return ((0, react_1.createElement)("li", __assign({}, props, { key: option.value }), (_a = option.label) !== null && _a !== void 0 ? _a : option.text));
+            }), disableCloseOnSelect: multiple, loading: loading, disabled: TextFieldProps === null || TextFieldProps === void 0 ? void 0 : TextFieldProps.disabled, renderInput: function (params) {
+            return ((0, jsx_runtime_1.jsx)(TextField_1.default, __assign({}, params, { variant: "standard", InputProps: __assign(__assign({}, params.InputProps), { endAdornment: ((0, jsx_runtime_1.jsxs)(react_2.default.Fragment, { children: [loading ? ((0, jsx_runtime_1.jsx)(CircularProgress_1.default, { color: "inherit", size: 20 })) : null, params.InputProps.endAdornment] })) }) }, TextFieldProps)));
+        } }));
+};
+exports.default = AsynchronousAutocomplete;

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

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+import { PageProps } from './interface';
+export declare const Page: FC<PageProps>;
+export default Page;
+export * from './interface';

package/lib/AWING/Page/index.js

@@ -0,0 +1,32 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Page = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+// import { Helmet } from "react-helmet";
+var material_1 = require("@mui/material");
+var react_helmet_async_1 = require("react-helmet-async");
+var Page = function (_a) {
+    var caption = _a.caption, actions = _a.actions, children = _a.children;
+    return ((0, jsx_runtime_1.jsx)(react_helmet_async_1.HelmetProvider, { children: (0, jsx_runtime_1.jsxs)(material_1.Grid, { container: true, children: [caption && ((0, jsx_runtime_1.jsx)(react_helmet_async_1.Helmet, { children: (0, jsx_runtime_1.jsx)("title", { children: caption }) })), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: { width: '100%' }, children: (0, jsx_runtime_1.jsxs)(material_1.Toolbar, { style: {
+                            paddingLeft: 0,
+                            paddingRight: 0,
+                            paddingBottom: '8px',
+                        }, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { component: "h1", variant: "h5", color: "inherit", noWrap: true, style: { flex: '1 1 30%' }, fontWeight: 'bold', children: caption }), actions] }) }), (0, jsx_runtime_1.jsx)(material_1.Grid, { item: true, xs: 12, children: children })] }) }));
+};
+exports.Page = Page;
+exports.default = exports.Page;
+__exportStar(require("./interface"), exports);

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

@@ -0,0 +1,6 @@
+import { ReactNode } from "react";
+export interface PageProps {
+    caption: string;
+    actions?: ReactNode;
+    children?: ReactNode;
+}

package/lib/AWING/Page/interface.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/AWING/PageManagement/PageManagement.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { PageManagementProps } from './interface';
+declare const PageManagement: FC<PageManagementProps>;
+export default PageManagement;

package/lib/AWING/PageManagement/PageManagement.js

@@ -0,0 +1,167 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var react_i18next_1 = require("react-i18next");
+var material_1 = require("@mui/material");
+var Delete_1 = __importDefault(require("@mui/icons-material/Delete"));
+var __1 = require("../");
+var AdvancedSearch_1 = __importDefault(require("../AdvancedSearch"));
+var constants_1 = require("../constants");
+var icons_material_1 = require("@mui/icons-material");
+var lodash_1 = require("lodash");
+var ClassicDrawer_1 = require("../../Commons/Components/ClassicDrawer");
+var react_router_dom_1 = require("react-router-dom");
+var i18n_1 = __importDefault(require("../../i18n"));
+var PageManagement = function (props) {
+    var t = (0, react_i18next_1.useTranslation)(undefined, { i18n: i18n_1.default }).t;
+    // const params = useParams<"*">();
+    var location = (0, react_router_dom_1.useLocation)();
+    var title = props.title, columns = props.columns, rows = props.rows, _a = props.totalOfRows, totalOfRows = _a === void 0 ? rows.length : _a, getRowId = props.getRowId, checkboxSelection = props.checkboxSelection, onDeleteSelected = props.onDeleteSelected, advancedSearchFields = props.advancedSearchFields, onlyNumberSearch = props.onlyNumberSearch, _b = props.disableSearch, disableSearch = _b === void 0 ? false : _b, includeSearchById = props.includeSearchById, _c = props.disablePagination, disablePagination = _c === void 0 ? false : _c, onChangeQueryInput = props.onChangeQueryInput, _d = props.loading, loading = _d === void 0 ? true : _d, onCreateButtonClick = props.onCreateButtonClick, onRowClick = props.onRowClick, onCreateFolderButtonClick = props.onCreateFolderButtonClick, onDelete = props.onDelete, inputSearchPlaceholder = props.inputSearchPlaceholder, rowActions = props.rowActions, showNotificationSuccess = props.showNotificationSuccess, confirmDelete = props.confirmDelete, customActions = props.customActions, variantPaperSearch = props.variantPaperSearch;
+    var _e = (0, react_1.useState)(false), openAdvancedSearch = _e[0], setOpenAdvancedSearch = _e[1];
+    var _f = (0, react_1.useState)([]), rowSelected = _f[0], setRowSelected = _f[1];
+    var _g = (0, react_1.useState)({
+        searchString: disableSearch ? undefined : '',
+        pageIndex: disablePagination ? undefined : 0,
+        pageSize: disablePagination ? undefined : constants_1.PAGE_SIZE_DEFAULT,
+        sortModel: [],
+    }), queryInput = _g[0], setQueryInput = _g[1];
+    var cachedQueryInput = (0, react_1.useRef)();
+    (0, react_1.useEffect)(function () {
+        setRowSelected([]);
+    }, [queryInput]);
+    // TODO - Giải pháp tạm thời, sẽ thay thế bằng cách sử dụng pub-sub server-client
+    // useEffect(() => {
+    //     // TODO: Tìm cách trigger queryInput mà không cần sử dụng location.pathName
+    //     handleChangeQueryInput(queryInput);
+    // }, [queryInput, onChangeQueryInput, window.location.pathname]);
+    (0, react_1.useEffect)(function () {
+        var _a;
+        if (((_a = location.state) === null || _a === void 0 ? void 0 : _a.action) === ClassicDrawer_1.CloseAction.Reload ||
+            !(0, lodash_1.isEqual)(queryInput, cachedQueryInput.current)) {
+            handleChangeQueryInput((0, lodash_1.cloneDeep)(queryInput));
+            cachedQueryInput.current = (0, lodash_1.cloneDeep)(queryInput);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [location.state, queryInput]);
+    (0, react_1.useEffect)(function () {
+        // Neu so luong row = 0 mà pageIndex > 0 thi tu dong quay lai 1 page
+        if (!loading &&
+            rows.length <= 0 &&
+            queryInput.pageIndex &&
+            queryInput.pageIndex > 0) {
+            setQueryInput(function (oldQueryInput) { return (__assign(__assign({}, oldQueryInput), { pageIndex: oldQueryInput.pageIndex
+                    ? oldQueryInput.pageIndex - 1
+                    : 0 })); });
+        }
+    }, [loading, rows, queryInput.pageIndex]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    var handleChangeQueryInput = (0, react_1.useCallback)((0, lodash_1.debounce)(function (queryInput) {
+        onChangeQueryInput(queryInput);
+    }, 50), [onChangeQueryInput]);
+    var handleDelete = function (id) {
+        confirmDelete &&
+            confirmDelete(function () {
+                if (onDelete) {
+                    onDelete(id).then(function () {
+                        showNotificationSuccess && showNotificationSuccess();
+                        onChangeQueryInput(queryInput);
+                    });
+                }
+            });
+    };
+    var handleDeleteSelected = function () {
+        confirmDelete &&
+            confirmDelete(function () {
+                if (onDeleteSelected) {
+                    onDeleteSelected(rowSelected).then(function () {
+                        showNotificationSuccess && showNotificationSuccess();
+                        onChangeQueryInput(queryInput);
+                    });
+                }
+            });
+    };
+    var updateQueryInput = function (newValue) {
+        setQueryInput(__assign(__assign({}, queryInput), newValue));
+    };
+    return ((0, jsx_runtime_1.jsxs)(__1.Page, { caption: title, actions: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [!disableSearch && ((0, jsx_runtime_1.jsx)(__1.SearchBox, __assign({ includeSearchById: includeSearchById, defaultValue: queryInput.searchString, variantPaper: variantPaperSearch, onlyNumberString: onlyNumberSearch, onSearch: function (searchType, newValue) {
+                        var _a;
+                        return updateQueryInput((_a = {
+                                pageIndex: 0
+                            },
+                            _a[searchType] = newValue,
+                            _a));
+                    } }, (advancedSearchFields &&
+                    advancedSearchFields.length > 0 && {
+                    onClickAdvancedSearch: function () {
+                        return setOpenAdvancedSearch(!openAdvancedSearch);
+                    },
+                }), { placeholderInput: inputSearchPlaceholder }))), onCreateButtonClick && ((0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", color: "primary", sx: {
+                        marginLeft: function (theme) { return theme.spacing(2); },
+                    }, onClick: onCreateButtonClick, children: t('Common.Create') })), onCreateFolderButtonClick && ((0, jsx_runtime_1.jsx)(material_1.Button, { variant: "outlined", color: "inherit", title: t('DirectoryManagement.CreateDirectory'), sx: {
+                        marginLeft: function (theme) { return theme.spacing(1); },
+                    }, onClick: onCreateFolderButtonClick, children: (0, jsx_runtime_1.jsx)(icons_material_1.CreateNewFolderOutlined, {}) })), customActions && customActions] }), children: [!!(advancedSearchFields === null || advancedSearchFields === void 0 ? void 0 : advancedSearchFields.length) && ((0, jsx_runtime_1.jsx)(AdvancedSearch_1.default, { fields: advancedSearchFields, value: queryInput.advancedObject, expanded: openAdvancedSearch, onChangeValue: function (obj) {
+                    return updateQueryInput({ advancedObject: obj });
+                }, onClear: function () {
+                    return updateQueryInput({ advancedObject: undefined });
+                } })), loading ? ((0, jsx_runtime_1.jsx)(__1.CircularProgress, {})) : ((0, jsx_runtime_1.jsx)(__1.DataGrid, __assign({ columns: columns, rows: rows, getRowId: getRowId, sortModel: queryInput.sortModel, onSortModelChange: function (sortModel) {
+                    return updateQueryInput({ sortModel: sortModel });
+                } }, (checkboxSelection && {
+                selected: rowSelected,
+                onSelectedChange: function (ids) { return setRowSelected(ids); },
+                selectionActions: [
+                    {
+                        icon: (0, jsx_runtime_1.jsx)(Delete_1.default, {}),
+                        tooltipTitle: t('Common.DeleteSelectedItems'),
+                        action: function () { return handleDeleteSelected(); },
+                    },
+                ],
+            }), (onRowClick && {
+                onRowClick: onRowClick,
+            }), { rowActions: __spreadArray(__spreadArray([], (rowActions || []), true), (onDelete
+                    ? [
+                        {
+                            icon: (0, jsx_runtime_1.jsx)(Delete_1.default, {}),
+                            tooltipTitle: t('Common.Delete'),
+                            action: function (id) { return handleDelete(id); },
+                        },
+                    ]
+                    : []), true) }, (!disablePagination && {
+                pageIndex: queryInput.pageIndex,
+                pageSize: queryInput.pageSize,
+                totalOfRows: totalOfRows,
+                onPageIndexChange: function (pageIndex) {
+                    return updateQueryInput({ pageIndex: pageIndex });
+                },
+                onPageSizeChange: function (pageSize) {
+                    return updateQueryInput({
+                        pageIndex: 0,
+                        pageSize: pageSize,
+                    });
+                },
+            }))))] }));
+};
+exports.default = PageManagement;

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

@@ -0,0 +1,4 @@
+import { PageManagementProps } from "./interface";
+export declare function PageManagement(props: PageManagementProps): import("react/jsx-runtime").JSX.Element;
+export * from "./interface";
+export default PageManagement;

package/lib/AWING/PageManagement/index.js

@@ -0,0 +1,40 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PageManagement = PageManagement;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var PageManagement_1 = __importDefault(require("./PageManagement"));
+var i18n_1 = __importDefault(require("../../i18n"));
+var react_i18next_1 = require("react-i18next");
+function PageManagement(props) {
+    return ((0, jsx_runtime_1.jsx)(react_i18next_1.I18nextProvider, { i18n: i18n_1.default, children: (0, jsx_runtime_1.jsx)(PageManagement_1.default, __assign({}, props)) }));
+}
+__exportStar(require("./interface"), exports);
+exports.default = PageManagement;

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

@@ -0,0 +1,97 @@
+import { GridSortModel, DataObject, MenuOption, RowActionDefinition, DataGridColumnDefinition } from '../DataGrid/interface';
+import { ReactNode } from 'react';
+import { AutocompleteRenderOptionState } from '@mui/material/Autocomplete';
+import { TextFieldProps } from '@mui/material/TextField';
+import { TableCellProps } from '@mui/material/TableCell';
+import { AdvancedSearchFieldDefinition } from '../AdvancedSearch/interface';
+export interface AsynchronousAutocompleteProps {
+    multiple?: boolean;
+    loading?: boolean;
+    options?: MenuOption[];
+    readOnly?: boolean;
+    onSearch?(inputValue: string): void;
+    value?: any;
+    onChange?(value: any): void;
+    renderOption?: (props: React.HTMLAttributes<HTMLLIElement>, option: MenuOption, state: AutocompleteRenderOptionState) => ReactNode;
+    TextFieldProps?: TextFieldProps;
+}
+export interface TableColumnDefinition extends Omit<DataGridColumnDefinition, 'type'> {
+    /**
+     * 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;
+    /**
+     * Nếu bằng true thì sẽ cho phép sửa trực tiếp trường này
+     */
+    editable?: boolean;
+    /**
+     * Nếu bằng true và editable cũng bằng true thì hiển thị các kiểu select
+     */
+    isSelector?: boolean;
+    options?: any[];
+    AsynchronousAutocompleteProps?: AsynchronousAutocompleteProps;
+    /**
+     * 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, dùng khi sửa trực tiếp
+     */
+    type?: 'text' | 'number' | 'date' | 'select' | 'autocomplete' | 'asynchronous-autocomplete';
+    /**
+     * 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;
+}
+export interface QueryInput {
+    id?: string;
+    searchString?: string;
+    pageSize?: number;
+    pageIndex?: number;
+    sortModel?: GridSortModel[];
+    advancedObject?: DataObject;
+}
+export interface PageManagementProps {
+    title: string;
+    columns: TableColumnDefinition[];
+    rows: DataObject[];
+    totalOfRows?: number;
+    getRowId?: (obj: DataObject) => any;
+    checkboxSelection?: boolean;
+    onDeleteSelected?: (ids: any[]) => Promise<any>;
+    advancedSearchFields?: AdvancedSearchFieldDefinition[];
+    variantPaperSearch?: 'elevation' | 'outlined';
+    onlyNumberSearch?: boolean;
+    disableSearch?: boolean;
+    includeSearchById?: boolean;
+    disablePagination?: boolean;
+    onChangeQueryInput: (input: QueryInput) => void;
+    loading: boolean;
+    onCreateButtonClick?: () => void;
+    onRowClick?: (id: any, event?: React.MouseEvent<HTMLTableRowElement, MouseEvent>) => void;
+    onCreateFolderButtonClick?: () => void;
+    onDelete?: (id: any) => Promise<any>;
+    inputSearchPlaceholder?: string;
+    rowActions?: RowActionDefinition[];
+    showNotificationSuccess?: () => void;
+    confirmDelete?: (f: () => void) => void;
+    customActions?: ReactNode;
+}