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

package/lib/ACM-AXN/PlaceFilter/DataTable/component/index.js

@@ -0,0 +1,58 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = DataTableComponent;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var material_1 = require("@mui/material");
+var react_i18next_1 = require("react-i18next");
+var Pagination_1 = __importDefault(require("../../../../AWING/Pagination"));
+var NoData_1 = __importDefault(require("./NoData"));
+var styles_1 = require("@mui/styles");
+var Enum_1 = require("../../Enum");
+var constants_1 = require("../../constants");
+var StyledTableRow = (0, styles_1.styled)(material_1.TableRow)({
+    "& .MuiTableCell-root:last-child .MuiButtonBase-root": {
+        visibility: "hidden",
+    },
+    "&:hover": {
+        "& .MuiTableCell-root:last-child .MuiButtonBase-root": {
+            visibility: "visible",
+        },
+    },
+});
+function DataTableComponent(props) {
+    var _a;
+    var t = (0, react_i18next_1.useTranslation)().t;
+    var tagsAll = props.tagsAll, tagSelected = props.tagSelected, isShowTotalSelected = props.isShowTotalSelected, pages = props.pages, places = props.places, totalSelected = props.totalSelected, onSelectAll = props.onSelectAll, onSelectFilter = props.onSelectFilter, onSelect = props.onSelect, getId = props.getId;
+    return places.length ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.TableContainer, { component: material_1.Paper, children: (0, jsx_runtime_1.jsx)(material_1.Table, { children: (0, jsx_runtime_1.jsxs)(material_1.TableBody, { children: [(0, jsx_runtime_1.jsx)(material_1.TableRow, { children: (0, jsx_runtime_1.jsx)(material_1.TableCell, { colSpan: 2, children: isShowTotalSelected ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(material_1.Grid, { container: true, children: (0, jsx_runtime_1.jsx)(material_1.Grid, { item: true, xs: true, children: (0, jsx_runtime_1.jsxs)("b", { children: [t("PlaceFilter.TotalSelected"), ": ", totalSelected] }) }) }) })) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(material_1.Grid, { container: true, children: [(0, jsx_runtime_1.jsx)(material_1.Grid, { item: true, xs: true, children: (0, jsx_runtime_1.jsx)(material_1.FormControlLabel, { control: (0, jsx_runtime_1.jsx)(material_1.Checkbox, { color: "primary", disabled: (tagSelected === null || tagSelected === void 0 ? void 0 : tagSelected.filterPlaceIds) &&
+                                                                (tagSelected === null || tagSelected === void 0 ? void 0 : tagSelected.filterPlaceIds.length) > 0, checked: ((_a = tagSelected === null || tagSelected === void 0 ? void 0 : tagSelected.selectedPlaceIds) === null || _a === void 0 ? void 0 : _a.length) ===
+                                                                pages.total, onChange: function (e) {
+                                                                var _a;
+                                                                onSelectAll((_a = e === null || e === void 0 ? void 0 : e.target) === null || _a === void 0 ? void 0 : _a.checked);
+                                                            } }), label: t("Common.SelectAll") }) }), (0, jsx_runtime_1.jsx)(material_1.Grid, { item: true, children: (0, jsx_runtime_1.jsx)(material_1.FormControlLabel, { control: (0, jsx_runtime_1.jsx)(material_1.Switch, { checked: (tagSelected === null || tagSelected === void 0 ? void 0 : tagSelected.selectedType) ===
+                                                                Enum_1.EnumSelectedPlaceType.FILTER, onChange: function (e) {
+                                                                var _a;
+                                                                return onSelectFilter((_a = e === null || e === void 0 ? void 0 : e.target) === null || _a === void 0 ? void 0 : _a.checked);
+                                                            } }), label: t("PlaceFilter.SelectAllByFilter"), labelPlacement: "start" }) })] }) })) }) }), places.map(function (row, idx) {
+                                var _a, _b, _c, _d, _e;
+                                var id = (_a = getId(row)) !== null && _a !== void 0 ? _a : idx;
+                                var isChecked = ((_b = tagsAll === null || tagsAll === void 0 ? void 0 : tagsAll.selectedPlaceIds) === null || _b === void 0 ? void 0 : _b.includes(id)) ||
+                                    ((_c = tagsAll === null || tagsAll === void 0 ? void 0 : tagsAll.filterPlaceIds) === null || _c === void 0 ? void 0 : _c.includes(id));
+                                return ((0, jsx_runtime_1.jsxs)(StyledTableRow, { hover: true, onClick: function (e) {
+                                        e.stopPropagation();
+                                        onSelect(!isChecked, id);
+                                    }, children: [(0, jsx_runtime_1.jsx)(material_1.TableCell, { padding: "checkbox", children: (0, jsx_runtime_1.jsx)(material_1.Checkbox, { color: "primary", checked: isChecked, disabled: (((_d = tagsAll === null || tagsAll === void 0 ? void 0 : tagsAll.filterPlaceIds) === null || _d === void 0 ? void 0 : _d.includes(id)) &&
+                                                    !((_e = tagsAll === null || tagsAll === void 0 ? void 0 : tagsAll.selectedPlaceIds) === null || _e === void 0 ? void 0 : _e.includes(id))) ||
+                                                    (isShowTotalSelected &&
+                                                        !isChecked), inputProps: {
+                                                    "aria-labelledby": "enhanced-table-checkbox-".concat(id),
+                                                } }) }), (0, jsx_runtime_1.jsx)(material_1.TableCell, { children: row.name })] }, id));
+                            })] }) }) }), (0, jsx_runtime_1.jsx)(Pagination_1.default, { rowsPerPageOptions: constants_1.DEFAULT_ROWS_PER_PAGE, colSpan: 3, count: pages.total, rowsPerPage: pages.pageSize, page: pages.pageIndex, onPageChange: function (e, page) {
+                    pages.onPageIndexChange && pages.onPageIndexChange(page);
+                }, onRowsPerPageChange: function (e) {
+                    pages.onPageSizeChange &&
+                        pages.onPageSizeChange(parseInt(e.target.value, constants_1.PAGE_SIZE_DEFAULT));
+                } })] })) : ((0, jsx_runtime_1.jsx)(NoData_1.default, {}));
+}

package/lib/ACM-AXN/PlaceFilter/DataTable/container.d.ts

@@ -0,0 +1,19 @@
+import React, { FC } from "react";
+import { IPlaceQuery } from "../interface";
+export type DataObject = {
+    [key: string]: any;
+};
+export type HeadCell = {
+    disablePadding: boolean;
+    id: string;
+    label: string;
+    numeric: boolean;
+    getDisplay?: (info: any) => any;
+    align: "inherit" | "left" | "center" | "right" | "justify";
+    getIcon?: (item: any) => React.ReactNode;
+};
+export interface DataTableProps extends IPlaceQuery {
+    isInit: boolean;
+}
+declare const DataTable: FC<DataTableProps>;
+export default DataTable;

package/lib/ACM-AXN/PlaceFilter/DataTable/container.js

@@ -0,0 +1,455 @@
+"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 Enum_1 = require("../Enum");
+var common_1 = require("../common");
+var recoil_1 = require("recoil");
+var Atom_1 = require("../Recoil/Atom");
+var component_1 = __importDefault(require("./component"));
+var constants_1 = require("../constants");
+var AWING_1 = require("../../../AWING");
+var react_i18next_1 = require("react-i18next");
+var uniq = require("lodash/uniq");
+var isEqual = require("lodash/isEqual");
+var check;
+var DataTable = function (props) {
+    var t = (0, react_i18next_1.useTranslation)().t;
+    var getPlacesByFilter = props.getPlacesByFilter, getPlacesByIds = props.getPlacesByIds, isInit = props.isInit;
+    var _a = (0, react_1.useState)([]), places = _a[0], setPlaces = _a[1];
+    var _b = (0, react_1.useState)(0), total = _b[0], setTotal = _b[1];
+    var _c = (0, react_1.useState)(0), pageIndex = _c[0], setPageIndex = _c[1];
+    var _d = (0, react_1.useState)(constants_1.PAGE_SIZE_DEFAULT), pageSize = _d[0], setPageSize = _d[1];
+    var _e = (0, recoil_1.useRecoilState)(Atom_1.tagsAllState), tagsAll = _e[0], setTagsAll = _e[1];
+    var _f = (0, recoil_1.useRecoilState)(Atom_1.tagSelectedState), tagSelected = _f[0], setTagSelected = _f[1];
+    var isSelectedTagAll = (0, recoil_1.useRecoilValue)(Atom_1.isSelectedTagAllState);
+    var _g = (0, react_1.useState)(false), isLoading = _g[0], setIsLoading = _g[1];
+    var _h = (0, react_1.useState)(false), isError = _h[0], setIsError = _h[1];
+    var getId = function (row) {
+        if (row.hasOwnProperty("placeId")) {
+            return row["placeId"];
+        }
+        else {
+            return undefined;
+        }
+    };
+    var queryPlacesByFilter = function () {
+        setIsLoading(function () { return true; });
+        getPlacesByFilter((tagSelected === null || tagSelected === void 0 ? void 0 : tagSelected.filterFields) || [], pageIndex, pageSize)
+            .then(function (data) {
+            setPlaces((data === null || data === void 0 ? void 0 : data.places) || []);
+            setTotal((data === null || data === void 0 ? void 0 : data.total) || 0);
+            setIsLoading(function () { return false; });
+        })
+            .catch(function (error) {
+            setIsError(function () { return true; });
+        });
+    };
+    var queryData = function () {
+        var _a;
+        if (!((_a = tagSelected === null || tagSelected === void 0 ? void 0 : tagSelected.filterFields) === null || _a === void 0 ? void 0 : _a.length))
+            return;
+        if (isError)
+            setIsError(function () { return false; });
+        if (isSelectedTagAll) {
+            setIsLoading(function () { return true; });
+            getTagAllPlaces()
+                .then(function (placesData) {
+                setIsLoading(function () { return false; });
+                setPlaces(placesData || []);
+            })
+                .catch(function (error) {
+                setIsError(function () { return true; });
+            });
+        }
+        else {
+            queryPlacesByFilter();
+        }
+    };
+    (0, react_1.useEffect)(function () {
+        if (pageIndex > 0) {
+            setPageIndex(0);
+        }
+        else {
+            if (!isEqual(check, tagSelected === null || tagSelected === void 0 ? void 0 : tagSelected.filterFields)) {
+                queryData();
+            }
+            check = tagSelected === null || tagSelected === void 0 ? void 0 : tagSelected.filterFields;
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [isSelectedTagAll, tagSelected === null || tagSelected === void 0 ? void 0 : tagSelected.filterFields]);
+    (0, react_1.useEffect)(function () {
+        queryData();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [pageIndex, pageSize, isSelectedTagAll]);
+    var getAllPlaces = function () {
+        return getPlacesByFilter((tagSelected === null || tagSelected === void 0 ? void 0 : tagSelected.filterFields) || []);
+    };
+    var getTagAllPlaces = function () {
+        var ids = uniq(__spreadArray(__spreadArray([], (tagsAll.selectedPlaceIds || []), true), (tagsAll.filterPlaceIds || []), true));
+        var pagingIds = ids.slice(pageIndex * pageSize, (pageIndex + 1) * pageSize);
+        setTotal(ids.length);
+        return getPlacesByIds(pagingIds);
+    };
+    var unselectPlaceOfOtherTagWhenHaveNoTagSelected = function (selectedIds) {
+        setTagsAll(function (prevState) {
+            var newTagAllSelectedIds = [];
+            newTagAllSelectedIds = prevState.selectedPlaceIds.filter(function (id) {
+                return selectedIds.indexOf(id) < 0;
+            });
+            return {
+                tags: prevState.tags.map(function (tagItem) {
+                    var _a;
+                    if ((_a = tagItem.selectedPlaceIds) === null || _a === void 0 ? void 0 : _a.includes(selectedIds === null || selectedIds === void 0 ? void 0 : selectedIds[0])) {
+                        var newSelectedIds = tagItem.selectedPlaceIds.filter(function (id) {
+                            return selectedIds.indexOf(id) < 0;
+                        });
+                        return __assign(__assign({}, tagItem), { selectedType: Enum_1.EnumSelectedPlaceType.IDS, selectedPlaceIds: newSelectedIds });
+                    }
+                    else {
+                        return tagItem;
+                    }
+                }),
+                selectedPlaceIds: newTagAllSelectedIds,
+                filterPlaceIds: prevState.filterPlaceIds,
+            };
+        });
+    };
+    var createNewTagWhenHaveNoTag = function (newTag) {
+        var newTagAll = {
+            tags: [newTag],
+            selectedPlaceIds: newTag.selectedPlaceIds,
+            filterPlaceIds: newTag.filterPlaceIds,
+        };
+        setTagSelected(newTag);
+        setTagsAll(newTagAll);
+    };
+    var editTagSelected = function (selectedPlaceType, newSelectedPlaceIds, newFilterPlaceIds, newSelectedPlaceType, checkedType) {
+        setTagSelected(function (prevState) {
+            var _a;
+            var temp = Object.assign([], newSelectedPlaceIds);
+            if (newSelectedPlaceIds.length === 1 &&
+                !checkedType &&
+                !prevState.selectedPlaceIds.includes(newSelectedPlaceIds[0])) {
+                // Case unslect a place of other tag
+                temp =
+                    ((_a = prevState === null || prevState === void 0 ? void 0 : prevState.selectedPlaceIds) === null || _a === void 0 ? void 0 : _a.filter(function (id) {
+                        return temp.indexOf(id) < 0;
+                    })) || [];
+            }
+            return __assign(__assign({}, prevState), { selectedPlaceIds: selectedPlaceType !== Enum_1.EnumSelectedPlaceType.FILTER
+                    ? temp
+                    : [], filterPlaceIds: selectedPlaceType === Enum_1.EnumSelectedPlaceType.FILTER
+                    ? newFilterPlaceIds
+                    : [], selectedType: newSelectedPlaceType });
+        });
+    };
+    var selectMorePlaceWhenHaveTagSelected = function (filterFields, newSelectedPlaceIds, newFilterPlaceIds, newSelectedPlaceType) {
+        setTagsAll(function (prevState) {
+            var tmpSelectedPlaceIds = [];
+            var tmpFilterPlaceIds = [];
+            return {
+                tags: prevState.tags.map(function (tagItem) {
+                    var _a;
+                    if ((0, common_1.compareTwoArrayObject)(tagItem === null || tagItem === void 0 ? void 0 : tagItem.filterFields, filterFields).length === 0) {
+                        tmpSelectedPlaceIds.push.apply(tmpSelectedPlaceIds, newSelectedPlaceIds);
+                        tmpFilterPlaceIds.push.apply(tmpFilterPlaceIds, newFilterPlaceIds);
+                        return __assign(__assign({}, tagItem), { selectedPlaceIds: newSelectedPlaceIds, filterPlaceIds: newSelectedPlaceType ===
+                                Enum_1.EnumSelectedPlaceType.FILTER
+                                ? newFilterPlaceIds
+                                : [], selectedType: newSelectedPlaceType });
+                    }
+                    else {
+                        tmpSelectedPlaceIds.push.apply(tmpSelectedPlaceIds, ((tagItem === null || tagItem === void 0 ? void 0 : tagItem.selectedPlaceIds) || []));
+                        tmpFilterPlaceIds.push.apply(tmpFilterPlaceIds, ((tagItem === null || tagItem === void 0 ? void 0 : tagItem.filterPlaceIds) || []));
+                        if (newSelectedPlaceIds.length > 0) {
+                            return __assign(__assign({}, tagItem), { selectedPlaceIds: (_a = tagItem.selectedPlaceIds) === null || _a === void 0 ? void 0 : _a.filter(function (id) {
+                                    return !newSelectedPlaceIds.includes(id);
+                                }) });
+                        }
+                        else
+                            return tagItem;
+                    }
+                }),
+                selectedPlaceIds: uniq(tmpSelectedPlaceIds),
+                filterPlaceIds: uniq(tmpFilterPlaceIds),
+            };
+        });
+    };
+    var selectMorePlaceWhenHaveNoTagSelected = function (newTag, newSelectedPlaceIds, newFilterPlaceIds) {
+        setTagSelected(newTag);
+        setTagsAll(function (prevState) {
+            var newTagAllSelectedIds = [];
+            var newTagAllFilterIds = [];
+            var prevTags = prevState.tags;
+            newTagAllSelectedIds = __spreadArray(__spreadArray([], prevState.selectedPlaceIds, true), newSelectedPlaceIds, true);
+            newTagAllFilterIds = __spreadArray(__spreadArray([], prevState.filterPlaceIds, true), newFilterPlaceIds, true);
+            if (newSelectedPlaceIds.length > 0) {
+                prevTags = prevTags.map(function (tag) {
+                    var _a;
+                    return __assign(__assign({}, tag), { selectedPlaceIds: (_a = tag.selectedPlaceIds) === null || _a === void 0 ? void 0 : _a.filter(function (id) { return !newSelectedPlaceIds.includes(id); }) });
+                });
+            }
+            return {
+                tags: __spreadArray(__spreadArray([], prevTags, true), [newTag], false),
+                selectedPlaceIds: uniq(newTagAllSelectedIds),
+                filterPlaceIds: uniq(newTagAllFilterIds),
+            };
+        });
+    };
+    var unselectOrUnfilterAllPlaceOfTag = function (filterFields, newSelectedPlaceIds, newFilterPlaceIds, newSelectedPlaceType) {
+        setTagsAll(function (prevState) {
+            var newTagAllSelectedIds = [];
+            var newTagAllFilterIds = [];
+            return {
+                tags: prevState.tags.map(function (tagItem) {
+                    if ((0, common_1.compareTwoArrayObject)(tagItem === null || tagItem === void 0 ? void 0 : tagItem.filterFields, filterFields).length === 0) {
+                        newTagAllFilterIds.push.apply(newTagAllFilterIds, newFilterPlaceIds);
+                        newTagAllSelectedIds.push.apply(newTagAllSelectedIds, newSelectedPlaceIds);
+                        return __assign(__assign({}, tagItem), { selectedPlaceIds: newSelectedPlaceIds, filterPlaceIds: [], selectedType: newSelectedPlaceType });
+                    }
+                    else {
+                        newTagAllFilterIds.push.apply(newTagAllFilterIds, ((tagItem === null || tagItem === void 0 ? void 0 : tagItem.filterPlaceIds) || []));
+                        newTagAllSelectedIds.push.apply(newTagAllSelectedIds, ((tagItem === null || tagItem === void 0 ? void 0 : tagItem.selectedPlaceIds) || []));
+                        return tagItem;
+                    }
+                }),
+                selectedPlaceIds: newTagAllSelectedIds,
+                filterPlaceIds: newTagAllFilterIds,
+            };
+        });
+    };
+    var unselectAPlaceWhenHaveTagSelected = function (selectedIds) {
+        setTagsAll(function (prevState) {
+            var prevTagSelected = prevState.tags.find(function (t) {
+                return ((0, common_1.compareTwoArrayObject)(t.filterFields, tagSelected === null || tagSelected === void 0 ? void 0 : tagSelected.filterFields).length === 0);
+            });
+            var newTagAllSelectedIds = [];
+            if (selectedIds.length === 1 &&
+                !prevTagSelected.selectedPlaceIds.includes(selectedIds[0])) {
+                // Case unselect place of other tag
+                newTagAllSelectedIds = prevState.selectedPlaceIds.filter(function (id) {
+                    return selectedIds.indexOf(id) < 0;
+                });
+                return {
+                    tags: prevState.tags.map(function (tagItem) {
+                        var _a;
+                        if ((_a = tagItem.selectedPlaceIds) === null || _a === void 0 ? void 0 : _a.includes(selectedIds === null || selectedIds === void 0 ? void 0 : selectedIds[0])) {
+                            var newSelectedIds = tagItem.selectedPlaceIds.filter(function (id) {
+                                return selectedIds.indexOf(id) < 0;
+                            });
+                            return __assign(__assign({}, tagItem), { selectedType: Enum_1.EnumSelectedPlaceType.IDS, selectedPlaceIds: newSelectedIds });
+                        }
+                        else {
+                            return tagItem;
+                        }
+                    }),
+                    selectedPlaceIds: newTagAllSelectedIds,
+                    filterPlaceIds: prevState.filterPlaceIds,
+                };
+            }
+            else {
+                // Case unselect place of selected tag
+                return {
+                    tags: prevState.tags.map(function (tagItem) {
+                        if ((0, common_1.compareTwoArrayObject)(tagItem.filterFields, tagSelected === null || tagSelected === void 0 ? void 0 : tagSelected.filterFields).length === 0) {
+                            newTagAllSelectedIds.push.apply(newTagAllSelectedIds, selectedIds);
+                            return __assign(__assign({}, tagItem), { selectedPlaceIds: selectedIds });
+                        }
+                        else {
+                            newTagAllSelectedIds.push.apply(newTagAllSelectedIds, ((tagItem === null || tagItem === void 0 ? void 0 : tagItem.selectedPlaceIds) || []));
+                            return tagItem;
+                        }
+                    }),
+                    selectedPlaceIds: newTagAllSelectedIds,
+                    filterPlaceIds: prevState.filterPlaceIds,
+                };
+            }
+        });
+    };
+    var handleSelectPlace = function (filterFields, selectedIds) {
+        var _a;
+        if (tagsAll === undefined || ((_a = tagsAll === null || tagsAll === void 0 ? void 0 : tagsAll.tags) === null || _a === void 0 ? void 0 : _a.length) === 0) {
+            if (selectedIds.length > 0) {
+                var newTag = {
+                    filterFields: filterFields,
+                    selectedPlaceIds: selectedIds,
+                    filterPlaceIds: [],
+                    selectedType: Enum_1.EnumSelectedPlaceType.IDS,
+                };
+                createNewTagWhenHaveNoTag(newTag);
+            }
+        }
+        else {
+            if (!(tagSelected === null || tagSelected === void 0 ? void 0 : tagSelected.isTagPrepare)) {
+                editTagSelected(Enum_1.EnumSelectedPlaceType.IDS, selectedIds, [], Enum_1.EnumSelectedPlaceType.IDS, true);
+                selectMorePlaceWhenHaveTagSelected(filterFields, selectedIds, [], Enum_1.EnumSelectedPlaceType.IDS);
+            }
+            else {
+                var newTag = {
+                    filterFields: filterFields,
+                    selectedPlaceIds: selectedIds,
+                    filterPlaceIds: [],
+                    selectedType: Enum_1.EnumSelectedPlaceType.IDS,
+                };
+                selectMorePlaceWhenHaveNoTagSelected(newTag, selectedIds, []);
+            }
+        }
+    };
+    var handleUnselectPlace = function (selectedIds) {
+        if (!(tagSelected === null || tagSelected === void 0 ? void 0 : tagSelected.isTagPrepare)) {
+            editTagSelected(Enum_1.EnumSelectedPlaceType.IDS, selectedIds, [], Enum_1.EnumSelectedPlaceType.IDS, false);
+            unselectAPlaceWhenHaveTagSelected(selectedIds);
+        }
+        else {
+            unselectPlaceOfOtherTagWhenHaveNoTagSelected(selectedIds);
+        }
+    };
+    var handleSelectPlaceByFilter = function (filterFields, selectedIds) {
+        var _a;
+        if (tagsAll === undefined || ((_a = tagsAll === null || tagsAll === void 0 ? void 0 : tagsAll.tags) === null || _a === void 0 ? void 0 : _a.length) === 0) {
+            if (selectedIds.length > 0) {
+                var newTag = {
+                    filterFields: filterFields,
+                    selectedPlaceIds: [],
+                    filterPlaceIds: selectedIds,
+                    selectedType: Enum_1.EnumSelectedPlaceType.FILTER,
+                };
+                createNewTagWhenHaveNoTag(newTag);
+            }
+        }
+        else {
+            if (!(tagSelected === null || tagSelected === void 0 ? void 0 : tagSelected.isTagPrepare)) {
+                editTagSelected(Enum_1.EnumSelectedPlaceType.FILTER, [], selectedIds, Enum_1.EnumSelectedPlaceType.FILTER, true);
+                selectMorePlaceWhenHaveTagSelected(filterFields, [], selectedIds, Enum_1.EnumSelectedPlaceType.FILTER);
+            }
+            else {
+                var newTag = {
+                    filterFields: filterFields,
+                    selectedPlaceIds: [],
+                    filterPlaceIds: selectedIds,
+                    selectedType: Enum_1.EnumSelectedPlaceType.FILTER,
+                };
+                selectMorePlaceWhenHaveNoTagSelected(newTag, [], selectedIds);
+            }
+        }
+    };
+    var handleUnselectPlaceByFilter = function (filterFields) {
+        editTagSelected(Enum_1.EnumSelectedPlaceType.FILTER, [], [], Enum_1.EnumSelectedPlaceType.IDS, false);
+        unselectOrUnfilterAllPlaceOfTag(filterFields, [], [], Enum_1.EnumSelectedPlaceType.IDS);
+    };
+    var createOrEditTags = function (selectedIds, selectedPlaceType, checkedType) {
+        var filterFields = (tagSelected === null || tagSelected === void 0 ? void 0 : tagSelected.filterFields) || [];
+        if (selectedPlaceType === Enum_1.EnumSelectedPlaceType.IDS) {
+            if (checkedType) {
+                handleSelectPlace(filterFields, selectedIds);
+            }
+            else {
+                handleUnselectPlace(selectedIds);
+            }
+        }
+        if (selectedPlaceType === Enum_1.EnumSelectedPlaceType.FILTER) {
+            if (checkedType) {
+                handleSelectPlaceByFilter(filterFields, selectedIds);
+            }
+            else {
+                handleUnselectPlaceByFilter(filterFields);
+            }
+        }
+    };
+    var handleSelectAll = function (checked) {
+        if (checked) {
+            getAllPlaces().then(function (data) {
+                var _a;
+                var selectAllIds = ((_a = data === null || data === void 0 ? void 0 : data.places) === null || _a === void 0 ? void 0 : _a.map(function (place) { return place.placeId; })) || [];
+                createOrEditTags(selectAllIds, Enum_1.EnumSelectedPlaceType.IDS, checked);
+            });
+        }
+        else {
+            createOrEditTags([], Enum_1.EnumSelectedPlaceType.IDS, checked);
+        }
+    };
+    var handleSelectFilter = function (checked) {
+        if (checked) {
+            getAllPlaces().then(function (data) {
+                var _a;
+                var selectAllIds = ((_a = data === null || data === void 0 ? void 0 : data.places) === null || _a === void 0 ? void 0 : _a.map(function (place) { return place.placeId; })) || [];
+                createOrEditTags(selectAllIds, Enum_1.EnumSelectedPlaceType.FILTER, checked);
+            });
+        }
+        else {
+            createOrEditTags([], Enum_1.EnumSelectedPlaceType.FILTER, checked);
+        }
+    };
+    var handleSelect = function (checked, id) {
+        var _a, _b;
+        if (checked) {
+            var newSelected = ((_a = tagSelected === null || tagSelected === void 0 ? void 0 : tagSelected.selectedPlaceIds) === null || _a === void 0 ? void 0 : _a.slice()) || [];
+            newSelected.push(id);
+            createOrEditTags(newSelected, Enum_1.EnumSelectedPlaceType.IDS, checked);
+        }
+        else {
+            var newSelected = ((_b = tagSelected === null || tagSelected === void 0 ? void 0 : tagSelected.selectedPlaceIds) === null || _b === void 0 ? void 0 : _b.slice()) || [];
+            var index = newSelected === null || newSelected === void 0 ? void 0 : newSelected.indexOf(id);
+            if (index !== -1) {
+                newSelected.splice(index, 1);
+                createOrEditTags(newSelected || [], Enum_1.EnumSelectedPlaceType.IDS, checked);
+            }
+            else {
+                // Case unselect a place of other tag
+                createOrEditTags([id], Enum_1.EnumSelectedPlaceType.IDS, checked);
+            }
+        }
+    };
+    var getAllSelected = function () {
+        var selectedPlaceIds = (tagsAll === null || tagsAll === void 0 ? void 0 : tagsAll.selectedPlaceIds) || [];
+        var filterPlaceIds = (tagsAll === null || tagsAll === void 0 ? void 0 : tagsAll.filterPlaceIds) || [];
+        var mergSelected = __spreadArray(__spreadArray([], selectedPlaceIds, true), filterPlaceIds, true);
+        return mergSelected === null || mergSelected === void 0 ? void 0 : mergSelected.filter(function (item, index) { return mergSelected.indexOf(item) === index; });
+    };
+    var handlePageIndexChange = function (pageIndex) {
+        setPageIndex(pageIndex);
+    };
+    var handlePageSizeChange = function (pageSize) {
+        setPageSize(pageSize);
+    };
+    return isError ? ((0, jsx_runtime_1.jsx)("div", { style: {
+            padding: 2 * 8,
+            textAlign: "center",
+            color: "black", //theme.palette.text.secondary
+            textDecoration: "underline",
+            cursor: "pointer",
+        }, onClick: function () {
+            queryData();
+        }, children: t("Common.Reload") })) : !isLoading ? ((0, jsx_runtime_1.jsx)(component_1.default, { tagsAll: tagsAll, tagSelected: tagSelected, isShowTotalSelected: isSelectedTagAll, pages: {
+            pageIndex: pageIndex,
+            pageSize: pageSize,
+            total: total,
+            onPageIndexChange: handlePageIndexChange,
+            onPageSizeChange: handlePageSizeChange,
+        }, places: places, totalSelected: getAllSelected().length, onSelectAll: handleSelectAll, onSelectFilter: handleSelectFilter, onSelect: handleSelect, getId: getId })) : ((0, jsx_runtime_1.jsx)(AWING_1.CircularProgress, {}));
+};
+exports.default = DataTable;

package/lib/ACM-AXN/PlaceFilter/DataTable/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./container";
+export * from "./container";

package/lib/ACM-AXN/PlaceFilter/DataTable/index.js

@@ -0,0 +1,23 @@
+"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);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+var container_1 = require("./container");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(container_1).default; } });
+__exportStar(require("./container"), exports);

package/lib/ACM-AXN/PlaceFilter/Enum.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EnumSelectedPlaceType = exports.EnumFieldInputType = void 0;
+var EnumFieldInputType;
+(function (EnumFieldInputType) {
+    EnumFieldInputType["TEXT"] = "text";
+    EnumFieldInputType["SELECT_AREA"] = "select-area";
+    EnumFieldInputType["SELECT"] = "select";
+    EnumFieldInputType["MULTIPLE_HIERARCHICAL_CHOICE"] = "multiple-hierarchical-choice";
+    EnumFieldInputType["GEO_FENCING"] = "geo-fencing";
+    EnumFieldInputType["AUTO_COMPLETE"] = "auto-complete";
+    EnumFieldInputType["MULTIPLE_SELECT"] = "multiple-select";
+})(EnumFieldInputType || (exports.EnumFieldInputType = EnumFieldInputType = {}));
+var EnumSelectedPlaceType;
+(function (EnumSelectedPlaceType) {
+    EnumSelectedPlaceType["FILTER"] = "ByFilter";
+    EnumSelectedPlaceType["IDS"] = "ByIds";
+})(EnumSelectedPlaceType || (exports.EnumSelectedPlaceType = EnumSelectedPlaceType = {}));

package/lib/ACM-AXN/PlaceFilter/Input/AreaSelectField/AreaSelectField.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/ACM-AXN/PlaceFilter/Input/AreaSelectField/AreaSelectField.test.js

@@ -0,0 +1,21 @@
+"use strict";
+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 _1 = __importDefault(require("."));
+var province_data_json_1 = __importDefault(require("../../../../stories/data/province-data.json"));
+var enzyme_1 = require("enzyme");
+var enzyme_adapter_react_16_1 = __importDefault(require("enzyme-adapter-react-16"));
+(0, enzyme_1.configure)({ adapter: new enzyme_adapter_react_16_1.default() });
+describe("ACM > PlaceFilter > Input > AreaSelectField", function () {
+    var mockOnChange = jest.fn(function (value) { });
+    it("Check component exist", function () {
+        var Wrapper = function () {
+            return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(_1.default, { initValue: [], label: "Area", onChange: mockOnChange, inputParameter: province_data_json_1.default }) }));
+        };
+        var wrapper = (0, enzyme_1.mount)((0, jsx_runtime_1.jsx)(Wrapper, {}));
+        expect(wrapper.find("AreaSelectFieldComponent").length).toEqual(1);
+    });
+});

package/lib/ACM-AXN/PlaceFilter/Input/AreaSelectField/component.d.ts

@@ -0,0 +1,10 @@
+import { FC } from "react";
+interface AreaSelectFieldComponentProps {
+    label: string;
+    placeholder?: string;
+    options: any[];
+    areaSelected: [];
+    handleChange: (event: any, value: any, reason: any, details: any) => void;
+}
+declare const AreaSelectFieldComponent: FC<AreaSelectFieldComponentProps>;
+export default AreaSelectFieldComponent;

package/lib/ACM-AXN/PlaceFilter/Input/AreaSelectField/component.js

@@ -0,0 +1,33 @@
+"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);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var material_1 = require("@mui/material");
+var AreaSelectFieldComponent = function (props) {
+    var label = props.label, placeholder = props.placeholder, options = props.options, areaSelected = props.areaSelected, handleChange = props.handleChange;
+    var renderTags = function (options, getTagProps) {
+        return options.map(function (option, i) { return ((0, jsx_runtime_1.jsx)(material_1.Chip, __assign({ label: option.name, title: option.name, size: "small" }, getTagProps({ index: i })))); });
+    };
+    var renderInput = function (params) { return ((0, jsx_runtime_1.jsx)(material_1.TextField, __assign({}, params, { variant: "outlined", label: label, InputLabelProps: { shrink: true }, InputProps: __assign(__assign({}, params.InputProps), { placeholder: placeholder }) }))); };
+    var renderGroup = function (params) {
+        var parent = areaSelected.find(function (area) { return area.code === params.group; });
+        return [
+            (0, jsx_runtime_1.jsx)(material_1.ListSubheader, { color: "primary", component: "div", disableSticky: true, children: !parent ? "" : parent.name.toUpperCase() }, params.key),
+            params.children,
+        ];
+    };
+    return ((0, jsx_runtime_1.jsx)(material_1.Autocomplete, { size: "small", fullWidth: true, multiple: true, options: options, onChange: handleChange, value: areaSelected, getOptionLabel: function (option) { return option.name; }, groupBy: function (option) { return option.parentUnitCode; }, 
+        // getOptionSelected={(option, value) => option?.code == value?.code}
+        renderGroup: renderGroup, renderTags: renderTags, renderInput: renderInput }));
+};
+exports.default = AreaSelectFieldComponent;