@antscorp/antsomi-ui 1.3.5-beta.49 → 1.3.5-beta.491

package/es/components/organism/DataTable/hooks/useDataTableListing/useDataTableListing.js

@@ -0,0 +1,627 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+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;
+};
+// Libraries
+import React, { useCallback, useState } from 'react';
+import { Link } from 'react-router-dom';
+import { flatMap, isEmpty, pick } from 'lodash';
+import { useQueryClient } from '@tanstack/react-query';
+// Types
+import { useAppConfigContext } from '@antscorp/antsomi-ui/es/providers';
+// Components
+import { Typography, Switch, Flex } from '@antscorp/antsomi-ui/es/components/atoms';
+// Constants
+import { COLUMN_DOMAIN, OPERATORS_CODE, QUERY_KEYS, globalToken, } from '@antscorp/antsomi-ui/es/constants';
+import { MODIFY_COLUMN_DISABLE_EDITABLE, MODIFY_COLUMN_DISABLE_REMOVE, SAVED_FILTER_DEFAULT, TABLE_LISTING_PREFIX, } from './constants';
+import { DEFAULT_CELL_EMPTY, DEFAULT_TOGGLE_WIDTH, SORT_MAP } from '../../constants';
+// Hooks
+import { useDeepCompareEffect, useDeepCompareMemo } from '@antscorp/antsomi-ui/es/hooks';
+import { useCreateModifyColumn, useDeleteModifyColumn, useDeleteSavedFilter, useGetColumnMetrics, useGetFilterMetricList, useGetInfiniteMatchesAnyList, useGetModifyColumnList, useGetSavedFilterList, useGetSearchListing, useGetTableListing, useSaveFilter, useUpdateFilter, useUpdateModifyColumn, } from '@antscorp/antsomi-ui/es/queries';
+// Utils
+import { flatTree, mapResponseSearchToGeneral, parseJSONFromLocalStorage, } from '@antscorp/antsomi-ui/es/utils';
+import { METRIC_MAP_NUMBER_TYPE } from '../../constants/filter';
+import { mapFiltersToApiFilters, mapFiltersToRules, mapRulesToFilters } from '../../utils';
+const { Text } = Typography;
+const { MATCHES, MATCHES_ANY, NOT_MATCHES } = OPERATORS_CODE;
+const initialState = {
+    filters: [],
+    selectedFilterId: SAVED_FILTER_DEFAULT[0].id,
+    pagination: {
+        page: 1,
+        pageSize: 10,
+        total: 0,
+    },
+    table: {
+        loading: false,
+        columnWidths: {},
+    },
+    selectedRowKeys: [],
+    selectedRow: {
+        keys: [],
+        rows: [],
+    },
+    searchValue: '',
+    sorter: {},
+    selectedFilterItem: undefined,
+};
+export function useDataTableListing(props) {
+    var _a, _b, _c;
+    // Props
+    const { config, name = 'default', table: tableProps, search: searchProps, filter: filterProps, queryOptions, } = props || {};
+    // Hooks
+    const queryClient = useQueryClient();
+    const { appConfig } = useAppConfigContext();
+    // State
+    const [state, setState] = useState(initialState);
+    // Variables
+    const { env = appConfig === null || appConfig === void 0 ? void 0 : appConfig.env, auth = appConfig === null || appConfig === void 0 ? void 0 : appConfig.auth, api, object } = config;
+    const { column: apiColumn, filter: apiFilter, listing: apiListing, search: apiSearch, matchesAny: apiMatchesAny, } = api || {};
+    const _d = apiColumn || {}, { url: columnUrl = `${COLUMN_DOMAIN[env || 'development']}/api/column`, enabled: enabledApiColumn = true } = _d, restOfApiColumnRequest = __rest(_d, ["url", "enabled"]);
+    const _e = apiFilter || {}, { url: filterUrl = `${COLUMN_DOMAIN[env || 'development']}/api/filter`, enabled: enabledApiFilter = true } = _e, restOfApiFilterRequest = __rest(_e, ["url", "enabled"]);
+    const _f = apiListing || {}, { url: listingUrl = '', enabled: enabledApiListing = true } = _f, restOfApiListingRequest = __rest(_f, ["url", "enabled"]);
+    const _g = apiSearch || {}, { url: searchUrl = '', enabled: enabledApiSearch = true } = _g, restOfApiSearchRequest = __rest(_g, ["url", "enabled"]);
+    const { filters, selectedFilterId, pagination, selectedRowKeys, searchValue, table, sorter, selectedRow, selectedFilterItem, } = state;
+    const { externalFilters, includeDataType = false, matchesAny, formatFilterValue, } = filterProps || {};
+    const { sortDirectionKey = 'az', mainColumnKey } = tableProps || {};
+    const modifyColumnAuth = Object.assign(Object.assign({}, auth), { url: columnUrl });
+    const filterAuth = Object.assign(Object.assign({}, auth), { url: filterUrl });
+    const listingAuth = Object.assign(Object.assign({}, auth), { url: listingUrl });
+    const searchAuth = Object.assign(Object.assign({}, auth), { url: searchUrl });
+    /**
+     * If has api config for specific selectedFilterItem, use it
+     * Otherwise use general api config
+     */
+    const matchesAnyRequest = (apiMatchesAny === null || apiMatchesAny === void 0 ? void 0 : apiMatchesAny[`${selectedFilterItem === null || selectedFilterItem === void 0 ? void 0 : selectedFilterItem.column}`.toLowerCase()])
+        ? apiMatchesAny === null || apiMatchesAny === void 0 ? void 0 : apiMatchesAny[`${selectedFilterItem === null || selectedFilterItem === void 0 ? void 0 : selectedFilterItem.column}`.toLowerCase()]
+        : apiMatchesAny === null || apiMatchesAny === void 0 ? void 0 : apiMatchesAny.general;
+    /**
+     * If `selectedFilterItem` has a column, the function will attempt to find a matching property in the `matchesAny`
+     * object by converting the column name to lowercase. If such a property does not exist, it will default to using
+     * the `general` property from the `matchesAny` object.
+     */
+    const matchesAnyProps = (matchesAny === null || matchesAny === void 0 ? void 0 : matchesAny[`${selectedFilterItem === null || selectedFilterItem === void 0 ? void 0 : selectedFilterItem.column}`.toLowerCase()])
+        ? matchesAny === null || matchesAny === void 0 ? void 0 : matchesAny[`${selectedFilterItem === null || selectedFilterItem === void 0 ? void 0 : selectedFilterItem.column}`.toLowerCase()]
+        : matchesAny === null || matchesAny === void 0 ? void 0 : matchesAny.general;
+    // Memos
+    const mapObject = useDeepCompareMemo(() => ({
+        objType: object === null || object === void 0 ? void 0 : object.type,
+        objId: object === null || object === void 0 ? void 0 : object.objectId,
+    }), [object === null || object === void 0 ? void 0 : object.objectId, object === null || object === void 0 ? void 0 : object.type]);
+    const localStorageKey = useDeepCompareMemo(() => `${TABLE_LISTING_PREFIX}${name}`, [name]);
+    const localStorageValues = useDeepCompareMemo(() => parseJSONFromLocalStorage(localStorageKey) || {}, [localStorageKey]);
+    // Queries
+    const getColumnMetrics = useGetColumnMetrics({
+        args: {
+            auth: modifyColumnAuth,
+            params: mapObject,
+            request: restOfApiColumnRequest,
+        },
+        options: Object.assign({ enabled: enabledApiColumn }, queryOptions === null || queryOptions === void 0 ? void 0 : queryOptions.getColumnMetricList),
+    });
+    const getModifyColumnList = useGetModifyColumnList({
+        args: {
+            auth: modifyColumnAuth,
+            params: mapObject,
+            request: restOfApiColumnRequest,
+        },
+        options: Object.assign({ enabled: enabledApiColumn }, queryOptions === null || queryOptions === void 0 ? void 0 : queryOptions.getModifyColumnList),
+    });
+    const getSavedFilterList = useGetSavedFilterList({
+        args: {
+            auth: filterAuth,
+            params: mapObject,
+            request: restOfApiFilterRequest,
+        },
+        options: Object.assign({ enabled: enabledApiFilter }, queryOptions === null || queryOptions === void 0 ? void 0 : queryOptions.getSavedFilterList),
+    });
+    const getFilterMetricList = useGetFilterMetricList({
+        args: {
+            auth: filterAuth,
+            params: mapObject,
+            request: restOfApiFilterRequest,
+        },
+        options: Object.assign({ enabled: enabledApiFilter }, queryOptions === null || queryOptions === void 0 ? void 0 : queryOptions.getFilterMetricList),
+    });
+    const getInfiniteMatchesAnyList = useGetInfiniteMatchesAnyList({
+        args: {
+            auth,
+            params: (_a = matchesAnyRequest === null || matchesAnyRequest === void 0 ? void 0 : matchesAnyRequest.params) === null || _a === void 0 ? void 0 : _a.call(matchesAnyRequest, selectedFilterItem),
+            request: matchesAnyRequest,
+        },
+        options: {
+            enabled: !!selectedFilterItem &&
+                [MATCHES_ANY, NOT_MATCHES, MATCHES].includes(selectedFilterItem.operator) &&
+                !!matchesAnyRequest &&
+                (typeof matchesAnyRequest.enabled === 'boolean' ? matchesAnyRequest.enabled : true),
+            keepPreviousData: true,
+            retry: false,
+            getNextPageParam(lastPage, allPages) {
+                // Extract the total number of items from the last fetched page
+                const total = (typeof (matchesAnyProps === null || matchesAnyProps === void 0 ? void 0 : matchesAnyProps.total) === 'function'
+                    ? matchesAnyProps === null || matchesAnyProps === void 0 ? void 0 : matchesAnyProps.total(lastPage)
+                    : matchesAnyProps === null || matchesAnyProps === void 0 ? void 0 : matchesAnyProps.total) || lastPage.total;
+                // Check if the total number of items is defined
+                if (total) {
+                    // Calculate the current total number of items retrieved so far
+                    // Process all pages and their data using formatData function and flatten the results
+                    const currentTotalItems = flatMap(allPages === null || allPages === void 0 ? void 0 : allPages.map(page => { var _a; return ((_a = matchesAnyProps === null || matchesAnyProps === void 0 ? void 0 : matchesAnyProps.formatData) === null || _a === void 0 ? void 0 : _a.call(matchesAnyProps, page)) || []; }));
+                    // If the total number of items fetched is less than the total available,
+                    // return the next page number (allPages.length + 1). Otherwise, return undefined.
+                    return ((currentTotalItems === null || currentTotalItems === void 0 ? void 0 : currentTotalItems.length) || 0) < total ? (allPages === null || allPages === void 0 ? void 0 : allPages.length) + 1 : undefined;
+                }
+                // If the total number of items is not defined, return undefined
+                return undefined;
+            },
+        },
+    });
+    // Variables
+    const { data: modifyColumnsData, isLoading: isModifyColumnsLoading } = getModifyColumnList || {};
+    const modifyColumnSelected = useDeepCompareMemo(() => { var _a; return ((_a = modifyColumnsData === null || modifyColumnsData === void 0 ? void 0 : modifyColumnsData.find(({ isLasted }) => +isLasted === 1)) === null || _a === void 0 ? void 0 : _a.modifyColId) || ''; }, [modifyColumnsData]);
+    const getTableListing = useGetTableListing({
+        args: {
+            auth: listingAuth,
+            params: Object.assign({ limit: pagination.pageSize, page: pagination.page, filter: JSON.stringify(mapFiltersToApiFilters([...(filters || []), ...(externalFilters || [])], includeDataType, formatFilterValue)), columns: JSON.stringify(((_c = (_b = modifyColumnsData === null || modifyColumnsData === void 0 ? void 0 : modifyColumnsData.find(modifyColumnItem => modifyColumnItem.modifyColId === modifyColumnSelected)) === null || _b === void 0 ? void 0 : _b.columns) === null || _c === void 0 ? void 0 : _c.map(col => { var _a; return (_a = col.metricCode) === null || _a === void 0 ? void 0 : _a.toUpperCase(); })) || []) }, ((sorter === null || sorter === void 0 ? void 0 : sorter.order) &&
+                (sorter === null || sorter === void 0 ? void 0 : sorter.columnKey) && {
+                sort: sorter.columnKey.toString(),
+                [sortDirectionKey]: SORT_MAP[sorter.order],
+            })),
+            request: restOfApiListingRequest,
+        },
+        options: Object.assign({ queryKey: [name], keepPreviousData: true, enabled: !!(listingAuth === null || listingAuth === void 0 ? void 0 : listingAuth.url) && !!(listingAuth === null || listingAuth === void 0 ? void 0 : listingAuth.token) && enabledApiListing }, queryOptions === null || queryOptions === void 0 ? void 0 : queryOptions.getTableListing),
+    });
+    const getSearchListing = useGetSearchListing({
+        args: {
+            auth: searchAuth,
+            params: {
+                search: searchValue,
+            },
+            request: restOfApiSearchRequest,
+        },
+        options: Object.assign({ keepPreviousData: true, enabled: !!(searchAuth === null || searchAuth === void 0 ? void 0 : searchAuth.url) && !!(searchAuth === null || searchAuth === void 0 ? void 0 : searchAuth.token) && enabledApiSearch }, queryOptions === null || queryOptions === void 0 ? void 0 : queryOptions.getSearchListing),
+    });
+    // Variables
+    const { data: columnMetricsData } = getColumnMetrics || {};
+    const { data: savedFiltersData } = getSavedFilterList || {};
+    const { data: filterMetricsData } = getFilterMetricList || {};
+    const { data: tableListing, isLoading: isTableListingLoading, isRefetching: isTableListingRefetching, } = getTableListing || {};
+    const { body: tableBody, header: tableHeader, total } = tableListing || {};
+    const { data: searchListingData, isLoading: isSearchListingLoading, isFetching: isSearchListingFetching, } = getSearchListing || {};
+    const { data: infiniteMatchesAnyData, isFetchingNextPage, isLoading: isMatchesAnyListLoading = false, isFetching: isMatchesAnyListFetching = false, fetchNextPage, } = getInfiniteMatchesAnyList || {};
+    // Conditionally format search listing data based on the presence of a formatData function in searchProps.
+    // If formatData is defined, use it to format searchListingData.
+    // Otherwise, use the mapResponseSearchToGeneral function to format searchListingData.
+    const searchListingBody = (searchProps === null || searchProps === void 0 ? void 0 : searchProps.formatData)
+        ? searchProps.formatData(searchListingData)
+        : mapResponseSearchToGeneral(searchListingData).body || {};
+    // Mutations
+    const { mutateAsync: updateModifyColumn } = useUpdateModifyColumn({
+        auth: modifyColumnAuth,
+    });
+    const { mutateAsync: deleteModifyColumn } = useDeleteModifyColumn({
+        auth: modifyColumnAuth,
+    });
+    const { mutateAsync: createModifyColumn } = useCreateModifyColumn({
+        auth: modifyColumnAuth,
+    });
+    const { mutateAsync: saveFilter } = useSaveFilter({
+        auth: filterAuth,
+    });
+    const { mutateAsync: updateFilter } = useUpdateFilter({
+        auth: filterAuth,
+    });
+    const { mutateAsync: deleteSavedFilter } = useDeleteSavedFilter({
+        auth: filterAuth,
+    });
+    // Memo
+    const columnMetrics = useDeepCompareMemo(() => {
+        const serializeColumnMetrics = (metrics) => {
+            const result = metrics.map(metric => ({
+                id: metric.metricCode || metric.metricId || metric.metricName || -1,
+                name: metric.metricName,
+                disabled: +metric.fixColumn === 1, // 1 is fixed column
+                selectedName: metric.columnLabel,
+                // disabled: metric.propertyCode === 390248029392039,
+                children: serializeColumnMetrics(metric.child || []),
+            }));
+            return result;
+        };
+        return serializeColumnMetrics(columnMetricsData || []);
+    }, [columnMetricsData]);
+    const modifyColumnList = useDeepCompareMemo(() => (modifyColumnsData === null || modifyColumnsData === void 0 ? void 0 : modifyColumnsData.map(({ modifyName, modifyColId, columns }) => ({
+        id: modifyColId,
+        name: modifyName,
+        editable: !MODIFY_COLUMN_DISABLE_EDITABLE.includes(modifyName),
+        removable: !MODIFY_COLUMN_DISABLE_REMOVE.includes(modifyName),
+        metrics: columns === null || columns === void 0 ? void 0 : columns.map(({ metricCode, metricId }) => metricCode || metricId || -1),
+    })).reverse()) || [], [modifyColumnsData]);
+    const filterMetrics = useDeepCompareMemo(() => {
+        const serializeFilterMetrics = (metrics) => {
+            const result = metrics.map(metric => {
+                var _a;
+                return ({
+                    id: metric.metricCode,
+                    name: metric.metricName,
+                    dataType: METRIC_MAP_NUMBER_TYPE[+metric.dataType] || 'string',
+                    children: serializeFilterMetrics(metric.child || []),
+                    operators: Array.isArray(metric.operator)
+                        ? ((_a = metric.operator) === null || _a === void 0 ? void 0 : _a.map(({ name, value }) => ({ label: name, value }))) || []
+                        : [],
+                });
+            });
+            return result;
+        };
+        return serializeFilterMetrics(filterMetricsData || []);
+    }, [filterMetricsData]);
+    const savedFilterList = useDeepCompareMemo(() => SAVED_FILTER_DEFAULT.concat((savedFiltersData === null || savedFiltersData === void 0 ? void 0 : savedFiltersData.map(({ filterId, filterName }) => ({
+        id: filterId,
+        name: filterName,
+        removable: true,
+    }))) || []), [savedFiltersData]);
+    const tableColumns = useDeepCompareMemo(() => {
+        let data = [];
+        const { columns } = tableProps || {};
+        // Check if has column toggle then add toggle switch column
+        if (columns === null || columns === void 0 ? void 0 : columns.toggle) {
+            const { key, dataIndex, valueKey, title, value, disabled, onChange } = columns.toggle || {};
+            data.push(Object.assign(Object.assign({ key: 'toggle' || key, fixed: 'left', align: 'center', dataIndex: 'toggle' || dataIndex, title: 'Toggle' || title, width: DEFAULT_TOGGLE_WIDTH }, columns.toggle), { render: (_, record) => {
+                    const checked = value
+                        ? typeof value === 'function'
+                            ? value(record)
+                            : value
+                        : !!record[valueKey];
+                    const switchDisabled = typeof disabled === 'function' ? disabled(record) : disabled;
+                    return (React.createElement(Flex, { align: "center", justify: "center" },
+                        React.createElement(Switch, { checked: checked, disabled: switchDisabled, onChange: checked => {
+                                if (onChange) {
+                                    onChange(checked, record);
+                                }
+                            } })));
+                } }));
+        }
+        data = data.concat((tableHeader === null || tableHeader === void 0 ? void 0 : tableHeader.map(headerCol => {
+            const { name, label, fixColumn, sortable } = headerCol;
+            return Object.assign(Object.assign({ key: name, dataIndex: name, title: label, fixed: fixColumn ? 'left' : undefined, sorter: !!sortable, sortOrder: (sorter === null || sorter === void 0 ? void 0 : sorter.columnKey) === name ? sorter === null || sorter === void 0 ? void 0 : sorter.order : undefined }, columns === null || columns === void 0 ? void 0 : columns[name]), { render(value, record, index) {
+                    var _a;
+                    const { link } = (columns === null || columns === void 0 ? void 0 : columns[name]) || {};
+                    const RenderComponent = (React.createElement(Text, { ellipsis: { tooltip: true }, style: Object.assign({}, (link
+                            ? {
+                                fontWeight: globalToken === null || globalToken === void 0 ? void 0 : globalToken.fontWeightStrong,
+                                color: globalToken === null || globalToken === void 0 ? void 0 : globalToken.colorPrimary,
+                            }
+                            : {})) }, typeof value !== 'object' ? value || DEFAULT_CELL_EMPTY : DEFAULT_CELL_EMPTY));
+                    if ((_a = columns === null || columns === void 0 ? void 0 : columns[name]) === null || _a === void 0 ? void 0 : _a.render) {
+                        return columns[name].render(value, record, index, RenderComponent);
+                    }
+                    if (link) {
+                        return (React.createElement(Link, { to: typeof link === 'function' ? link(record) : link }, RenderComponent));
+                    }
+                    return RenderComponent;
+                } });
+        })) || []);
+        return data;
+    }, [tableHeader, tableProps, sorter]);
+    const tableData = useDeepCompareMemo(() => ((Array === null || Array === void 0 ? void 0 : Array.isArray(tableBody)) &&
+        (tableBody === null || tableBody === void 0 ? void 0 : tableBody.map((row) => (Object.assign(Object.assign({}, row), { key: row === null || row === void 0 ? void 0 : row[tableProps === null || tableProps === void 0 ? void 0 : tableProps.mainColumnKey] }))))) ||
+        [], [tableBody]);
+    const searchList = useDeepCompareMemo(() => {
+        const { itemMapKeys, icon, link } = searchProps || {};
+        return ((searchListingBody === null || searchListingBody === void 0 ? void 0 : searchListingBody.map(searchItem => (Object.assign(Object.assign({}, Object.entries(itemMapKeys || {}).reduce((acc, [key, value]) => (Object.assign(Object.assign({}, acc), { [key]: searchItem[value] })), {})), { icon: typeof icon === 'function' ? icon(searchItem) : icon, link: typeof link === 'function' ? link(searchItem) : link })))) || []);
+    }, [searchListingData, searchProps]);
+    const matchesAnyList = useDeepCompareMemo(() => {
+        var _a;
+        const { formatData } = matchesAnyProps || {};
+        let matchesAnyList = [];
+        if (formatData) {
+            (_a = infiniteMatchesAnyData === null || infiniteMatchesAnyData === void 0 ? void 0 : infiniteMatchesAnyData.pages) === null || _a === void 0 ? void 0 : _a.forEach(page => {
+                matchesAnyList = matchesAnyList.concat((formatData === null || formatData === void 0 ? void 0 : formatData(page)) || []);
+            });
+        }
+        return matchesAnyList;
+    }, [matchesAny, infiniteMatchesAnyData, selectedFilterItem === null || selectedFilterItem === void 0 ? void 0 : selectedFilterItem.column]);
+    // Effects
+    /**
+     * Update values from local storage to state
+     */
+    useDeepCompareEffect(() => {
+        const { filter, pagination, table, sorter } = localStorageValues || {};
+        if (!isEmpty(filter)) {
+            const { filters, selectedFilterId } = filter || {};
+            setState(prev => (Object.assign(Object.assign({}, prev), { selectedFilterId,
+                filters })));
+        }
+        if (!isEmpty(pagination)) {
+            setState(prev => (Object.assign(Object.assign({}, prev), { pagination })));
+        }
+        if (!isEmpty(table)) {
+            setState(prev => (Object.assign(Object.assign({}, prev), { table })));
+        }
+        if (!isEmpty(sorter)) {
+            setState(prev => (Object.assign(Object.assign({}, prev), { sorter })));
+        }
+    }, [localStorageValues]);
+    // /** Update filters from external filters */
+    // useDeepCompareEffect(() => {
+    //   if (externalFilters) {
+    //     setState(prev => ({ ...prev, filters: [...(filters || []), ...externalFilters] }));
+    //   }
+    // }, [externalFilters]);
+    // Handlers
+    /* Modify Column */
+    const onRemoveModifyColumn = useCallback((modifyColumnItem) => __awaiter(this, void 0, void 0, function* () {
+        const { status } = yield deleteModifyColumn({
+            params: Object.assign(Object.assign({}, mapObject), { modifyColumnId: modifyColumnItem.id }),
+        });
+        return { success: !!status };
+    }), [deleteModifyColumn, mapObject]);
+    const onSelectModifyColumn = useCallback((modifyColumnItem) => {
+        const { id } = modifyColumnItem || {};
+        updateModifyColumn({
+            data: Object.assign(Object.assign({}, mapObject), { modifyColumnId: id, isLasted: 1 }),
+        });
+    }, [mapObject, updateModifyColumn]);
+    const onApplyModifyColumn = useCallback((args) => __awaiter(this, void 0, void 0, function* () {
+        var _h;
+        const { selectedMetrics, columnSetName, existColumnSet } = args || {};
+        const flattenMetrics = flatTree(columnMetricsData, 'child');
+        const selectedColumnMetrics = selectedMetrics
+            .map(metricId => flattenMetrics === null || flattenMetrics === void 0 ? void 0 : flattenMetrics.find(metric => metric.metricCode === metricId))
+            .filter(Boolean);
+        let exitModifyColumnId = '';
+        // Update exits column set
+        // columnSetName is empty that mean save for Custom column set
+        if (existColumnSet || columnSetName === '') {
+            exitModifyColumnId = (existColumnSet === null || existColumnSet === void 0 ? void 0 : existColumnSet.id) || '';
+            if (columnSetName === '') {
+                exitModifyColumnId =
+                    ((_h = modifyColumnsData === null || modifyColumnsData === void 0 ? void 0 : modifyColumnsData.find(modifyColumn => modifyColumn.modifyName === 'Custom')) === null || _h === void 0 ? void 0 : _h.modifyColId) || '';
+            }
+        }
+        /**
+         * Check if exitModifyColumnId is not empty
+         * If not empty, that mean update exits column set
+         * If empty, that mean create new column set
+         */
+        if (exitModifyColumnId) {
+            const { status } = yield updateModifyColumn({
+                data: Object.assign(Object.assign({}, mapObject), { modifyColumnId: exitModifyColumnId, columns: JSON.stringify(selectedColumnMetrics), isLasted: 1 }),
+            });
+            return {
+                success: !!status,
+            };
+        }
+        // Create new column set
+        const { status } = yield createModifyColumn({
+            data: Object.assign(Object.assign({}, mapObject), { name: columnSetName || 'Custom', columns: JSON.stringify(selectedColumnMetrics), isLasted: 1 }),
+        });
+        return {
+            success: !!status,
+        };
+    }), [columnMetricsData, createModifyColumn, mapObject, modifyColumnsData, updateModifyColumn]);
+    const handleUpdatePagination = useCallback((pagination) => {
+        const localStorageValues = parseJSONFromLocalStorage(localStorageKey) || {};
+        // Set State
+        setState(prev => (Object.assign(Object.assign({}, prev), { pagination: Object.assign(Object.assign({}, prev.pagination), pagination) })));
+        // Set Local Storage
+        localStorage.setItem(localStorageKey, JSON.stringify(Object.assign(Object.assign({}, localStorageValues), { pagination: Object.assign(Object.assign({}, localStorageValues === null || localStorageValues === void 0 ? void 0 : localStorageValues.pagination), pagination) })));
+    }, [localStorageKey]);
+    const handleUpdateFilter = useCallback((filter) => {
+        const localStorageValues = parseJSONFromLocalStorage(localStorageKey) || {};
+        // Set State
+        setState(prev => (Object.assign(Object.assign(Object.assign({}, prev), filter), { pagination: Object.assign(Object.assign({}, prev.pagination), { page: 1 }) })));
+        // Set Local Storage
+        localStorage.setItem(localStorageKey, JSON.stringify(Object.assign(Object.assign({}, localStorageValues), { filter: Object.assign(Object.assign({}, localStorageValues === null || localStorageValues === void 0 ? void 0 : localStorageValues.filter), filter), 
+            // Reset page to 1
+            pagination: Object.assign(Object.assign({}, localStorageValues === null || localStorageValues === void 0 ? void 0 : localStorageValues.pagination), { page: 1 }) })));
+    }, [localStorageKey]);
+    const handleUpdateTable = useCallback((table) => {
+        const localStorageValues = parseJSONFromLocalStorage(localStorageKey) || {};
+        setState(prev => (Object.assign(Object.assign({}, prev), { table: Object.assign(Object.assign({}, prev.table), table) })));
+        // Set Local Storage
+        localStorage.setItem(localStorageKey, JSON.stringify(Object.assign(Object.assign({}, localStorageValues), { table: Object.assign(Object.assign({}, localStorageValues === null || localStorageValues === void 0 ? void 0 : localStorageValues.table), table) })));
+    }, [localStorageKey]);
+    const handleUpdateSorter = useCallback((sorter) => {
+        const localStorageValues = parseJSONFromLocalStorage(localStorageKey) || {};
+        setState(prev => (Object.assign(Object.assign({}, prev), { sorter })));
+        // Set Local Storage
+        localStorage.setItem(localStorageKey, JSON.stringify(Object.assign(Object.assign({}, localStorageValues), { sorter })));
+    }, [localStorageKey]);
+    /* Filter */
+    const onChangeFilters = useCallback((filters) => {
+        handleUpdateFilter({
+            filters,
+            selectedFilterId: SAVED_FILTER_DEFAULT[0].id,
+        });
+    }, [handleUpdateFilter]);
+    const onChangeFilterCondition = useCallback((filterItem) => {
+        setState(prev => (Object.assign(Object.assign({}, prev), { selectedFilterItem: filterItem })));
+    }, []);
+    const onSaveFilter = useCallback((args) => __awaiter(this, void 0, void 0, function* () {
+        const { filters, name, existSavedFilter } = args;
+        // Update exits filter
+        if (existSavedFilter) {
+            const { status } = yield updateFilter({
+                data: Object.assign(Object.assign({}, mapObject), { filterId: existSavedFilter.id, filterName: existSavedFilter.name, rules: JSON.stringify(mapFiltersToRules(filters)) }),
+            });
+            handleUpdateFilter({
+                filters,
+                selectedFilterId: existSavedFilter.id,
+            });
+            return {
+                success: !!status,
+            };
+        }
+        // Create new filter
+        const { status: filterId } = yield saveFilter({
+            data: Object.assign(Object.assign({}, mapObject), { filterName: name, rules: JSON.stringify(mapFiltersToRules(filters)) }),
+        });
+        if (filterId) {
+            handleUpdateFilter({
+                filters,
+                selectedFilterId: filterId,
+            });
+        }
+        return {
+            success: !!filterId,
+        };
+    }), [mapObject, saveFilter, updateFilter, handleUpdateFilter]);
+    const onSelectSavedFilter = useCallback((savedFilter) => {
+        const savedFilterInfo = savedFiltersData === null || savedFiltersData === void 0 ? void 0 : savedFiltersData.find(filter => filter.filterId.toString() === (savedFilter === null || savedFilter === void 0 ? void 0 : savedFilter.id.toString()));
+        const filters = mapRulesToFilters((savedFilterInfo === null || savedFilterInfo === void 0 ? void 0 : savedFilterInfo.rules) || []);
+        handleUpdateFilter({
+            filters,
+            selectedFilterId: savedFilter === null || savedFilter === void 0 ? void 0 : savedFilter.id,
+        });
+    }, [savedFiltersData, handleUpdateFilter]);
+    const onRemoveSavedFilter = useCallback((savedFilter) => __awaiter(this, void 0, void 0, function* () {
+        const { status } = yield deleteSavedFilter({
+            params: Object.assign({ filterId: savedFilter === null || savedFilter === void 0 ? void 0 : savedFilter.id }, mapObject),
+        });
+        if (status && selectedFilterId === (savedFilter === null || savedFilter === void 0 ? void 0 : savedFilter.id)) {
+            handleUpdateFilter({
+                selectedFilterId: SAVED_FILTER_DEFAULT[0].id,
+            });
+        }
+        return { success: !!status };
+    }), [deleteSavedFilter, handleUpdateFilter, mapObject, selectedFilterId]);
+    /* Table */
+    const onChangeTable = useCallback((_pagination, _filters, sorter, _extra) => {
+        if (sorter) {
+            handleUpdateSorter(sorter);
+        }
+    }, [handleUpdateSorter]);
+    /* Pagination */
+    const onChangePagination = useCallback(({ page, pageSize }) => {
+        handleUpdatePagination({
+            page,
+            pageSize,
+        });
+    }, [handleUpdatePagination]);
+    const onChangeSelectedRow = useCallback((selectedRowKeys, selectedRows) => {
+        setState(prev => (Object.assign(Object.assign({}, prev), { selectedRowKeys, selectedRow: {
+                keys: selectedRowKeys,
+                rows: selectedRows ||
+                    (selectedRowKeys === null || selectedRowKeys === void 0 ? void 0 : selectedRowKeys.map(key => tableData === null || tableData === void 0 ? void 0 : tableData.find(row => { var _a; return ((_a = row[mainColumnKey]) === null || _a === void 0 ? void 0 : _a.toString()) === key.toString(); })).filter(Boolean)) ||
+                    [],
+            } })));
+    }, [mainColumnKey, tableData]);
+    /** Refetch */
+    const refetchTableListing = useCallback(() => {
+        queryClient.invalidateQueries([QUERY_KEYS.GET_DATA_TABLE_LISTING, name], {
+            exact: false,
+        });
+    }, [name, queryClient]);
+    const onMatchesAnyLoadMore = useCallback(() => {
+        if (!isFetchingNextPage) {
+            fetchNextPage();
+        }
+    }, [fetchNextPage, isFetchingNextPage]);
+    return {
+        /* Modify Column */
+        modifyColumn: {
+            metrics: columnMetrics,
+            savedModifyColumn: {
+                list: modifyColumnList,
+                selected: modifyColumnSelected,
+                loading: isModifyColumnsLoading,
+                onRemove: onRemoveModifyColumn,
+                onSelect: onSelectModifyColumn,
+            },
+            onApply: onApplyModifyColumn,
+        },
+        /* Filter */
+        filter: {
+            savedFilter: {
+                list: savedFilterList,
+                selected: selectedFilterId,
+                onSelect: onSelectSavedFilter,
+                onRemove: onRemoveSavedFilter,
+            },
+            filters,
+            filterMetrics,
+            matchesAny: {
+                list: matchesAnyList,
+                isLoading: (isMatchesAnyListLoading || isMatchesAnyListFetching) && !!matchesAnyRequest,
+            },
+            onSaveFilter,
+            onChangeFilters,
+            onChangeFilterCondition,
+            onMatchesAnyLoadMore,
+        },
+        /* Pagination */
+        pagination: Object.assign(Object.assign({}, pagination), { total, onChange: onChangePagination }),
+        /* Table */
+        table: {
+            loading: isTableListingLoading || isTableListingRefetching,
+            columns: tableColumns,
+            dataSource: tableData,
+            columnWidths: table.columnWidths || {},
+            rowSelection: {
+                selectedRowKeys: selectedRow.keys || [],
+                onChange: onChangeSelectedRow,
+            },
+            onChange: onChangeTable,
+            onColumnResize(data) {
+                const { index, width } = data;
+                handleUpdateTable({
+                    columnWidths: Object.assign(Object.assign({}, table.columnWidths), { [index]: width }),
+                });
+            },
+        },
+        /* Selected row */
+        selectedRowKeys,
+        selectedRow,
+        /* Search */
+        search: Object.assign(Object.assign(Object.assign(Object.assign({ loading: isSearchListingLoading || isSearchListingFetching, searchList }, (!!(searchProps === null || searchProps === void 0 ? void 0 : searchProps.render) && {
+            itemSearchRender(_item, index, node) {
+                var _a;
+                return (((_a = searchProps === null || searchProps === void 0 ? void 0 : searchProps.render) === null || _a === void 0 ? void 0 : _a.call(searchProps, ((searchListingBody === null || searchListingBody === void 0 ? void 0 : searchListingBody[index]) || {}), index, node)) ||
+                    null);
+            },
+        })), { onSearch(valueSearch) {
+                if (!(searchProps === null || searchProps === void 0 ? void 0 : searchProps.isClientSearch)) {
+                    setState(prev => (Object.assign(Object.assign({}, prev), { searchValue: valueSearch })));
+                }
+            } }), ((searchProps === null || searchProps === void 0 ? void 0 : searchProps.onClickSearchItem) && {
+            onClickSearchItem(item, index) {
+                var _a;
+                (_a = searchProps === null || searchProps === void 0 ? void 0 : searchProps.onClickSearchItem) === null || _a === void 0 ? void 0 : _a.call(searchProps, searchListingBody === null || searchListingBody === void 0 ? void 0 : searchListingBody[index]);
+            },
+        })), pick(searchProps, [
+            'isClientSearch',
+            'addFilterInfo',
+            'isAddFilterFromSearchItem',
+            'searchItemProps',
+        ])),
+        /* Queries */
+        queries: {
+            getTableListing,
+            getModifyColumnList,
+            getSavedFilterList,
+            getColumnMetrics,
+            getFilterMetricList,
+            getSearchListing,
+        },
+        // Handles
+        onChangeSelectedRow,
+        setDatTableListingState: setState,
+        // Refetch
+        refetchTableListing,
+    };
+}

package/es/components/organism/DataTable/hooks/useDataTableStore.d.ts

@@ -0,0 +1,28 @@
+import { StoreApi } from 'zustand';
+import { DataTableProps, DataTableStore } from '../types';
+/**
+ * Custom React hook to create and manage a data table store.
+ *
+ * This hook initializes a data table store using the provided properties.
+ * It uses a `useRef` to ensure the store is only created once and retains
+ * its reference across re-renders.
+ *
+ * @template TTableDataType - The type of data the table will manage.
+ *
+ * @param {DataTableProps<TTableDataType>} [props] - Optional properties to initialize the data table store.
+ *
+ * @returns {StoreApi<DataTableStore> | null} - Returns the data table store instance if successfully created, otherwise returns null.
+ *
+ * @example
+ * // Example usage within a component
+ * function MyComponent() {
+ *   const dataTableStore = useDataTableStore<MyDataType>({ /* props *\/ });
+ *
+ *   if (!dataTableStore) {
+ *     return <div>Loading...</div>;
+ *   }
+ *
+ *   // Use dataTableStore for further operations
+ * }
+ */
+export declare function useDataTableStore<TTableDataType>(props?: DataTableProps<TTableDataType>): StoreApi<DataTableStore>;