diff --git a/public/global.scss b/public/global.scss index d1d10e3..764379f 100644 --- a/public/global.scss +++ b/public/global.scss @@ -3,6 +3,6 @@ .filter-toast { box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, - rgba(0, 0, 0, 0.3) 0px 8px 16px -8px; + rgba(0, 0, 0, 0.3) 0px 8px 16px -8px; background-color: #d0dfe8; -} +} \ No newline at end of file diff --git a/src/app/(withAuth)/dashboard/layout.js b/src/app/(withAuth)/dashboard/layout.js index dc77f0a..d3b23d5 100644 --- a/src/app/(withAuth)/dashboard/layout.js +++ b/src/app/(withAuth)/dashboard/layout.js @@ -1,14 +1,12 @@ import HeaderWithLogo from "@/components/layouts/dashboard/headerWithLogo"; import HeaderWithSidebar from "@/components/layouts/dashboard/headerWithSidebar"; -import { Box, Stack } from "@mui/material"; +import { Stack } from "@mui/material"; const Layout = ({ children }) => { return ( - - {children} - + {children} ); }; diff --git a/src/components/dashboard/inquiryPrivacyFencing/Toolbar.jsx b/src/components/dashboard/inquiryPrivacyFencing/Toolbar.jsx new file mode 100644 index 0000000..8a1dc41 --- /dev/null +++ b/src/components/dashboard/inquiryPrivacyFencing/Toolbar.jsx @@ -0,0 +1,20 @@ +import { Button } from "@mui/material"; +import AddCircleIcon from "@mui/icons-material/AddCircle"; +import { useState } from "react"; + +const Toolbar = ({ mutate }) => { + const [open, setOpen] = useState(false); + + const handleOpen = () => { + setOpen(true); + }; + + return ( + <> + + + ); +}; +export default Toolbar; diff --git a/src/components/dashboard/inquiryPrivacyFencing/index.jsx b/src/components/dashboard/inquiryPrivacyFencing/index.jsx index 539885d..4d4b77f 100644 --- a/src/components/dashboard/inquiryPrivacyFencing/index.jsx +++ b/src/components/dashboard/inquiryPrivacyFencing/index.jsx @@ -1,4 +1,363 @@ +"use client"; + +import { useMemo } from "react"; +import Toolbar from "@/components/dashboard/inquiryPrivacyFencing/Toolbar"; +import DataTable from "@/core/components/DataTable"; +import { Box } from "@mui/material"; +import { GET_INQUIRY_PRIVACY_FENCING_ROUTE } from "@/core/utils/routes"; + const InquiryPrivacyFencingPage = () => { - return <> -} -export default InquiryPrivacyFencingPage \ No newline at end of file + const columns = useMemo( + () => [ + { + accessorKey: "dabirkhaneh_number", + header: "dabirkhaneh_number", + id: "dabirkhaneh_number", + enableColumnFilter: false, + datatype: "text", + filterFn: "notEquals", + columnFilterModeOptions: ["equals", "notEquals", "contains"], + }, + { + accessorKey: "marjae_pasokh", + header: "marjae_pasokh", + id: "marjae_pasokh", + enableColumnFilter: false, + datatype: "text", + filterFn: "equals", + columnFilterModeOptions: ["equals", "notEquals", "contains", "lessThan", "greaterThan", "fuzzy"], + }, + { + accessorKey: "motaghazi_is_legal", + header: "motaghazi_is_legal", + id: "motaghazi_is_legal", + enableColumnFilter: false, + datatype: "text", + filterFn: "contains", + columnFilterModeOptions: ["equals", "notEquals", "contains"], + }, + { + accessorKey: "nameh_date", + header: "nameh_date", + id: "nameh_date", + enableColumnFilter: false, + datatype: "date", + filterFn: "equals", + }, + { + accessorKey: "motaghazi_type", + header: "motaghazi_type", + id: "motaghazi_type", + enableColumnFilter: false, + datatype: "text", + filterFn: "contains", + columnFilterModeOptions: ["equals", "notEquals", "contains"], + }, + { + accessorKey: "motaghazi_firstname", + header: "motaghazi_firstname", + id: "motaghazi_firstname", + enableColumnFilter: false, + datatype: "text", + filterFn: "contains", + columnFilterModeOptions: ["equals", "notEquals", "contains"], + }, + { + accessorKey: "motaghazi_lastname", + header: "motaghazi_lastname", + id: "motaghazi_lastname", + enableColumnFilter: false, + datatype: "text", + filterFn: "contains", + columnFilterModeOptions: ["equals", "notEquals", "contains"], + }, + { + accessorKey: "national_id", + header: "national_id", + id: "national_id", + enableColumnFilter: false, + datatype: "text", + filterFn: "contains", + columnFilterModeOptions: ["equals", "notEquals", "contains"], + }, + { + accessorKey: "shenase_melli", + header: "shenase_melli", + id: "shenase_melli", + enableColumnFilter: false, + datatype: "text", + filterFn: "contains", + columnFilterModeOptions: ["equals", "notEquals", "contains"], + }, + { + accessorKey: "tel_number", + header: "tel_number", + id: "tel_number", + enableColumnFilter: false, + datatype: "text", + filterFn: "contains", + columnFilterModeOptions: ["equals", "notEquals", "contains"], + }, + { + accessorKey: "mobile_number", + header: "mobile_number", + id: "mobile_number", + enableColumnFilter: false, + datatype: "text", + filterFn: "contains", + columnFilterModeOptions: ["equals", "notEquals", "contains"], + }, + { + accessorKey: "address", + header: "address", + id: "address", + enableColumnFilter: false, + datatype: "text", + filterFn: "contains", + columnFilterModeOptions: ["equals", "notEquals", "contains"], + }, + { + accessorKey: "edare_kol", + header: "edare_kol", + id: "edare_kol", + enableColumnFilter: false, + datatype: "text", + filterFn: "contains", + columnFilterModeOptions: ["equals", "notEquals", "contains"], + }, + { + accessorKey: "edare_shahri", + header: "edare_shahri", + id: "edare_shahri", + enableColumnFilter: false, + datatype: "text", + filterFn: "contains", + columnFilterModeOptions: ["equals", "notEquals", "contains"], + }, + { + accessorKey: "rah_type", + header: "rah_type", + id: "rah_type", + enableColumnFilter: false, + datatype: "text", + filterFn: "contains", + columnFilterModeOptions: ["equals", "notEquals", "contains"], + }, + { + accessorKey: "name_mehvar_fa", + header: "name_mehvar_fa", + id: "name_mehvar_fa", + enableColumnFilter: false, + datatype: "text", + filterFn: "contains", + columnFilterModeOptions: ["equals", "notEquals", "contains"], + }, + { + accessorKey: "mizan_harim", + header: "mizan_harim", + id: "mizan_harim", + enableColumnFilter: false, + datatype: "text", + filterFn: "contains", + columnFilterModeOptions: ["equals", "notEquals", "contains"], + }, + { + accessorKey: "arze_navar", + header: "arze_navar", + id: "arze_navar", + enableColumnFilter: false, + datatype: "text", + filterFn: "contains", + columnFilterModeOptions: ["equals", "notEquals", "contains"], + }, + { + accessorKey: "samt", + header: "samt", + id: "samt", + enableColumnFilter: false, + datatype: "text", + filterFn: "contains", + columnFilterModeOptions: ["equals", "notEquals", "contains"], + }, + { + accessorKey: "kilometr", + header: "kilometr", + id: "kilometr", + enableColumnFilter: false, + datatype: "text", + filterFn: "contains", + columnFilterModeOptions: ["equals", "notEquals", "contains"], + }, + { + accessorKey: "zone", + header: "zone", + id: "zone", + enableColumnFilter: false, + datatype: "text", + filterFn: "contains", + columnFilterModeOptions: ["equals", "notEquals", "contains"], + }, + { + accessorKey: "karbari_type", + header: "karbari_type", + id: "karbari_type", + enableColumnFilter: false, + datatype: "text", + filterFn: "contains", + columnFilterModeOptions: ["equals", "notEquals", "contains"], + }, + { + accessorKey: "tarh_title", + header: "tarh_title", + id: "tarh_title", + enableColumnFilter: false, + datatype: "text", + filterFn: "contains", + columnFilterModeOptions: ["equals", "notEquals", "contains"], + }, + { + accessorKey: "masahat_zirbana", + header: "masahat_zirbana", + id: "masahat_zirbana", + enableColumnFilter: false, + datatype: "text", + filterFn: "contains", + columnFilterModeOptions: ["equals", "notEquals", "contains"], + }, + { + accessorKey: "ehdasat_type", + header: "ehdasat_type", + id: "ehdasat_type", + enableColumnFilter: false, + datatype: "text", + filterFn: "contains", + columnFilterModeOptions: ["equals", "notEquals", "contains"], + }, + { + accessorKey: "divarkeshi_distance", + header: "divarkeshi_distance", + id: "divarkeshi_distance", + enableColumnFilter: false, + datatype: "text", + filterFn: "contains", + columnFilterModeOptions: ["equals", "notEquals", "contains"], + }, + { + accessorKey: "mahale_ejra", + header: "mahale_ejra", + id: "mahale_ejra", + enableColumnFilter: false, + datatype: "text", + filterFn: "contains", + columnFilterModeOptions: ["equals", "notEquals", "contains"], + }, + { + accessorKey: "traffic", + header: "traffic", + id: "traffic", + enableColumnFilter: false, + datatype: "text", + filterFn: "contains", + columnFilterModeOptions: ["equals", "notEquals", "contains"], + }, + { + accessorKey: "vaziat_eghtesadi", + header: "vaziat_eghtesadi", + id: "vaziat_eghtesadi", + enableColumnFilter: false, + datatype: "text", + filterFn: "contains", + columnFilterModeOptions: ["equals", "notEquals", "contains"], + }, + { + accessorKey: "has_access", + header: "has_access", + id: "has_access", + enableColumnFilter: false, + datatype: "text", + filterFn: "contains", + columnFilterModeOptions: ["equals", "notEquals", "contains"], + }, + { + accessorKey: "shomare_estelam_harim", + header: "shomare_estelam_harim", + id: "shomare_estelam_harim", + enableColumnFilter: false, + datatype: "text", + filterFn: "contains", + columnFilterModeOptions: ["equals", "notEquals", "contains"], + }, + { + accessorKey: "max_month", + header: "max_month", + id: "max_month", + enableColumnFilter: false, + datatype: "text", + filterFn: "contains", + columnFilterModeOptions: ["equals", "notEquals", "contains"], + }, + { + accessorKey: "max_day", + header: "max_day", + id: "max_day", + enableColumnFilter: false, + datatype: "text", + filterFn: "contains", + columnFilterModeOptions: ["equals", "notEquals", "contains"], + }, + { + accessorKey: "shomare_tahaodname", + header: "shomare_tahaodname", + id: "shomare_tahaodname", + enableColumnFilter: false, + datatype: "text", + filterFn: "contains", + columnFilterModeOptions: ["equals", "notEquals", "contains"], + }, + { + accessorKey: "shomare_daftarkhaneh", + header: "shomare_daftarkhaneh", + id: "shomare_daftarkhaneh", + enableColumnFilter: false, + datatype: "text", + filterFn: "contains", + columnFilterModeOptions: ["equals", "notEquals", "contains"], + }, + { + accessorKey: "description", + header: "description", + id: "description", + enableColumnFilter: false, + datatype: "text", + filterFn: "contains", + columnFilterModeOptions: ["equals", "notEquals", "contains"], + }, + { + accessorKey: "ronevesht", + header: "ronevesht", + id: "ronevesht", + enableColumnFilter: false, + datatype: "text", + filterFn: "contains", + columnFilterModeOptions: ["equals", "notEquals", "contains"], + }, + ], + [] + ); + + return ( + + + + ); +}; +export default InquiryPrivacyFencingPage; + diff --git a/src/components/home/Toolbar.jsx b/src/components/home/Toolbar.jsx deleted file mode 100644 index 82f2646..0000000 --- a/src/components/home/Toolbar.jsx +++ /dev/null @@ -1,10 +0,0 @@ -import { Button } from "@mui/material"; - -const Toolbar = ({ columns }) => { - return ( - <> - - - ); -}; -export default Toolbar; diff --git a/src/components/home/index.jsx b/src/components/home/index.jsx deleted file mode 100644 index 7344232..0000000 --- a/src/components/home/index.jsx +++ /dev/null @@ -1,129 +0,0 @@ -"use client"; -import DataTable from "@/core/components/DataTable"; -import { useMemo } from "react"; - -function HomeComponent() { - const columns = useMemo( - () => [ - { - accessorKey: "fullname", - header: "نام کامل", - id: "fullname", - columns: [ - { - accessorKey: "name.firstName", - header: "نام", - id: "firstName", - enableColumnFilter: true, - datatype: "text", - filterFn: "contains", - enableClickToCopy: true, - columnFilterModeOptions: ["equals", "notEquals", "contains"], - }, - { - accessorKey: "name.lastName", - header: "نام خانوادگی", - id: "lastName", - enableColumnFilter: true, - datatype: "text", - filterFn: "equals", - columnFilterModeOptions: ["equals", "notEquals", "contains"], - }, - ], - }, - { - accessorKey: "address", - header: "آدرس", - id: "address", - enableColumnFilter: true, - datatype: "text", - filterFn: "notEquals", - columnFilterModeOptions: ["equals", "notEquals", "contains"], - }, - { - accessorKey: "city", - header: "شهر", - id: "city", - enableColumnFilter: true, - datatype: "text", - filterFn: "equals", - columnFilterModeOptions: ["equals", "notEquals", "contains", "lessThan", "greaterThan", "fuzzy"], - }, - { - accessorKey: "state", - header: "وضعیت", - id: "state", - enableColumnFilter: true, - datatype: "text", - filterFn: "contains", - columnFilterModeOptions: ["equals", "notEquals", "contains"], - }, - { - accessorKey: "price", - header: "محدوده", - id: "price", - enableColumnFilter: true, - datatype: "numeric", - filterFn: "equals", - columnFilterModeOptions: ["equals", "notEquals"], - }, - { - accessorKey: "created_at", - header: "تاریخ ساخت", - id: "created_at", - enableColumnFilter: true, - datatype: "date", - filterFn: "between", - }, - { - accessorKey: "updated_at", - header: "تاریخ بروزرسانی", - id: "updated_at", - enableColumnFilter: true, - datatype: "date", - filterFn: "equals", - }, - { - accessorKey: "company", - header: "نام شرکت", - id: "company", - enableColumnFilter: true, - datatype: "numeric", - filterFn: "equals", - columnSelectOption: [ - { value: 1, label: "وایتل" }, - { value: 2, label: "اسنپ" }, - { value: 3, label: "تپسی" }, - ], - }, - { - accessorKey: "area", - header: "منطقه", - id: "area", - enableColumnFilter: true, - datatype: "array", - filterFn: "equals", - columnSelectOption: [ - { value: 1, label: "وایتل" }, - { value: 2, label: "اسنپ" }, - { value: 3, label: "تپسی" }, - ], - }, - ], - [] - ); - - return ( - <> - - - ); -} - -export default HomeComponent; diff --git a/src/components/layouts/dashboard/headerWithSidebar/index.jsx b/src/components/layouts/dashboard/headerWithSidebar/index.jsx index c8febb6..d1ffe0e 100644 --- a/src/components/layouts/dashboard/headerWithSidebar/index.jsx +++ b/src/components/layouts/dashboard/headerWithSidebar/index.jsx @@ -9,6 +9,23 @@ import HeaderMenu from "./HeaderMenu"; const drawerWidth = 300; +const ScrollBox = styled(Box)({ + flexGrow: 1, + overflowY: "scroll", + width: "calc(100% - ${drawerWidth}px)", + "&::-webkit-scrollbar": { + width: "5px", + }, + "&::-webkit-scrollbar-track": { + boxShadow: "inset 0 0 5px #fff", + borderRadius: "5px", + }, + "&::-webkit-scrollbar-thumb": { + background: "#155175", + borderRadius: "5px", + }, +}); + const Main = styled(Paper, { shouldForwardProp: (prop) => prop !== "open" })(({ theme, open }) => ({ flexGrow: 1, transition: theme.transitions.create("margin", { @@ -102,9 +119,9 @@ const HeaderWithSidebar = ({ children }) => {
- {children} + {children}
); }; -export default HeaderWithSidebar; +export default HeaderWithSidebar; \ No newline at end of file diff --git a/src/core/components/DataTable/Main.js b/src/core/components/DataTable/Main.js index 45268ab..414d477 100644 --- a/src/core/components/DataTable/Main.js +++ b/src/core/components/DataTable/Main.js @@ -3,81 +3,16 @@ import { useMaterialReactTable } from "material-react-table"; import { FA_DATATABLE_LOCALIZATION } from "./localization/fa/datatable"; import useTableSetting from "@/lib/hooks/useTableSetting"; import { flattenArrayOfObjects } from "@/core/utils/flattenArrayOfObjects"; -import Toolbar from "@/components/home/Toolbar"; import useDataTable from "@/lib/hooks/useDataTable"; import { useMemo, useState } from "react"; - -const data = [ - { - name: { - firstName: "امین", - lastName: "قاسمپور", - }, - address: "فلان جا", - city: "تهران", - state: "بررسی شده", - price: "20", - updated_at: "2024/05/02", - company: "همراه اول", - area: "منطقه 5", - }, - { - name: { - firstName: "امیر حسین", - lastName: "محمودی", - }, - address: "فلان جا", - city: "تهران", - state: "تکمیل شده", - price: "27", - updated_at: "2024/05/02", - company: "وایتل", - area: "منطقه 27", - }, - { - name: { - firstName: "یاسمن", - lastName: "علی اکبری", - }, - address: "فلان جا", - city: "شیراز", - state: "بررسی شده", - price: "32", - updated_at: "2024/05/02", - company: "ایرانسل", - area: "منطقه 23", - }, - { - name: { - firstName: "حمیدرضا", - lastName: "رنجبرپور", - }, - address: "فلان جا", - city: "اصفهان", - state: "بررسی شده", - price: "45", - updated_at: "2024/05/02", - company: "ایرانول", - area: "منطقه 21", - }, - { - name: { - firstName: "محمد", - lastName: "جلالی", - }, - address: "فلان جا", - city: "رشت", - state: "درحال بررسی", - price: "8", - updated_at: "2024/05/02", - company: "فیلیمو", - area: "منطقه 8", - }, -]; +import useRequest from "@/lib/hooks/useRequest"; +import useSWR from "swr"; const DataTable_Main = (props) => { + const request = useRequest(); + const isEmptyObject = (obj) => obj && Object.keys(obj).length === 0 && obj.constructor === Object; const { filterData, sortData, setSortData } = useDataTable(); - const { table_url, user_id, page_name, table_name, columns, initialStateProps } = props; + const { need_filter, table_url, user_id, page_name, table_name, columns, initialStateProps, TableToolbar } = props; const flatColumns = flattenArrayOfObjects(columns, "columns"); const { settingStore, hideAction } = useTableSetting(); const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: 10 }); @@ -95,15 +30,31 @@ const DataTable_Main = (props) => { const params = new URLSearchParams(); params.set("start", `${pagination.pageIndex * pagination.pageSize}`); params.set("size", pagination.pageSize); - params.set("filters", JSON.stringify(filterData ?? [])); + params.set("filters", JSON.stringify(isEmptyObject(filterData) ? [] : [filterData])); params.set("sorting", JSON.stringify(sortData)); return `${table_url}?${params}`; }, [table_url, filterData, pagination, columns]); + const fetcher = async (url) => { + try { + const response = await request(url); + return response.data; + } catch (error) { + throw error; + } + }; + + const { data, isValidating, mutate } = useSWR(fetchUrl, fetcher, { + revalidateIfStale: true, + revalidateOnFocus: false, + revalidateOnReconnect: true, + keepPreviousData: true, + }); + const table = useMaterialReactTable({ localization: FA_DATATABLE_LOCALIZATION, columns, - data: data, + data: data?.data ?? [], initialState: { density: "compact", columnVisibility: settingStore?.[user_id]?.[page_name]?.[table_name]?.["hides"], @@ -111,6 +62,7 @@ const DataTable_Main = (props) => { ...initialStateProps, }, state: { + showProgressBars: isValidating, columnVisibility: settingStore?.[user_id]?.[page_name]?.[table_name]?.["hides"], sorting: sortData, pagination, @@ -146,7 +98,7 @@ const DataTable_Main = (props) => { onSortingChange: onSortingChange, renderTopToolbarCustomActions: ({ table }) => ( <> - + ), ...props, @@ -154,6 +106,7 @@ const DataTable_Main = (props) => { return ( diff --git a/src/core/components/DataTable/head/TableHeadCell.js b/src/core/components/DataTable/head/TableHeadCell.js index a0b8fc5..ee6433f 100644 --- a/src/core/components/DataTable/head/TableHeadCell.js +++ b/src/core/components/DataTable/head/TableHeadCell.js @@ -215,8 +215,7 @@ const DataTable_TableHeadCell = ({ columnVirtualizer, header, staticColumnIndex, overflow: columnDefType === "data" ? "hidden" : undefined, textOverflow: "ellipsis", color: "#fff", - fontSize: "14px", - fontWeight: "500", + fontWeight: "400", whiteSpace: (columnDef.header?.length ?? 0) < 20 ? "nowrap" : "normal", }} > diff --git a/src/core/components/DataTable/table/Paper.js b/src/core/components/DataTable/table/Paper.js index ede80b3..88902a8 100644 --- a/src/core/components/DataTable/table/Paper.js +++ b/src/core/components/DataTable/table/Paper.js @@ -66,6 +66,7 @@ const DataTable_Paper = ({ table, ...rest }) => { {enableTopToolbar && (parseFromValuesOrFunc(renderTopToolbar, { table }) ?? ( { +const DataTable_TopToolbar = ({ need_filter, table, columns, table_url, user_id, page_name, table_name }) => { const { getState, options: { @@ -70,13 +70,15 @@ const DataTable_TopToolbar = ({ table, columns, table_url, user_id, page_name, t }} > - + {need_filter === "true" && ( + + )} )} diff --git a/src/core/components/NotificationDesign/AskForKeep.jsx b/src/core/components/NotificationDesign/AskForKeep.jsx deleted file mode 100644 index e69de29..0000000 diff --git a/src/core/utils/routes.js b/src/core/utils/routes.js index eb14f6c..62273df 100644 --- a/src/core/utils/routes.js +++ b/src/core/utils/routes.js @@ -2,5 +2,5 @@ const api = process.env.NEXT_PUBLIC_API_URL; export const GET_USER_ROUTE = api + "/webapi/user/get-permission"; export const GET_LOGIN_ROUTE = api + "/login_dev"; - +export const GET_INQUIRY_PRIVACY_FENCING_ROUTE = api + "/api/v3/harim/divarkeshi"; export const GET_PERMISSIONS_ROUTE = api + "/webapi/user/get-permission"; diff --git a/src/lib/contexts/DataTable.js b/src/lib/contexts/DataTable.js index fb03fd7..32b2a7c 100644 --- a/src/lib/contexts/DataTable.js +++ b/src/lib/contexts/DataTable.js @@ -1,11 +1,110 @@ -import { createContext, useState } from "react"; +import { createContext, useEffect, useState } from "react"; +import { toast } from "react-toastify"; +import AskForKeepData from "@/core/components/NotificationDesign/AskForKeepData"; +import useTableSetting from "@/lib/hooks/useTableSetting"; +import { flattenArrayOfObjects } from "@/core/utils/flattenArrayOfObjects"; export const DataTableContext = createContext(); -const DataTableProvider = ({ children }) => { +const DataTableProvider = ({ children, user_id, page_name, table_name, columns }) => { + const { settingStore } = useTableSetting(); + const [isInitStates, setInitStates] = useState(false); + const flatColumns = flattenArrayOfObjects(columns, "columns"); + const [initFilter, setInitFilter] = useState({}); + const [initSort, setInitSort] = useState([]); const [filterData, setFilterData] = useState({}); + const [sortData, setSortData] = useState([]); - return {children}; + useEffect(() => { + if (!settingStore) return; + const values = flatColumns.reduce((acc, column) => { + if (!column.enableColumnFilter) return acc; + const filter = settingStore?.[user_id]?.[page_name]?.[table_name]?.["filters"]?.find( + (filter) => filter.id === column.id + ); + if (column.datatype === "array") { + acc[column.id] = { + id: column.id, + value: filter?.value || [], + filterFn: filter?.filterFn || column._filterFn, + datatype: column.datatype, + }; + } else if (column._filterFn === "between") { + acc[column.id] = { + id: column.id, + value: filter?.value || ["", ""], + filterFn: filter?.filterFn || column._filterFn, + datatype: column.datatype, + }; + } else { + acc[column.id] = { + id: column.id, + value: filter?.value || "", + filterFn: filter?.filterFn || column._filterFn, + datatype: column.datatype, + }; + } + return acc; + }, {}); + setFilterData(values); + setSortData(settingStore?.[user_id]?.[page_name]?.[table_name]?.["sorts"] || []); + setInitFilter(values); + setInitSort(settingStore?.[user_id]?.[page_name]?.[table_name]?.["sorts"] || []); + setInitStates(true); + }, [settingStore, isInitStates]); + + useEffect(() => { + if ( + JSON.stringify(initFilter) !== JSON.stringify(filterData) || + JSON.stringify(initSort) !== JSON.stringify(sortData) + ) { + if (!toast.isActive("keep_data", "datatable")) { + toast( + , + { + containerId: "datatable", + toastId: "keep_data", + className: "filter-toast", + position: "bottom-left", + draggable: true, + autoClose: false, + } + ); + } else { + toast.update("keep_data", { + containerId: "datatable", + toastId: "keep_data", + render: ( + + ), + }); + } + } else { + toast.dismiss({ containerId: "datatable" }); + } + }, [filterData, sortData]); + + if (!isInitStates) return null; + + return ( + + {children} + + ); }; export default DataTableProvider; diff --git a/src/lib/contexts/DataTable.jsx b/src/lib/contexts/DataTable.jsx deleted file mode 100644 index 32b2a7c..0000000 --- a/src/lib/contexts/DataTable.jsx +++ /dev/null @@ -1,110 +0,0 @@ -import { createContext, useEffect, useState } from "react"; -import { toast } from "react-toastify"; -import AskForKeepData from "@/core/components/NotificationDesign/AskForKeepData"; -import useTableSetting from "@/lib/hooks/useTableSetting"; -import { flattenArrayOfObjects } from "@/core/utils/flattenArrayOfObjects"; - -export const DataTableContext = createContext(); - -const DataTableProvider = ({ children, user_id, page_name, table_name, columns }) => { - const { settingStore } = useTableSetting(); - const [isInitStates, setInitStates] = useState(false); - const flatColumns = flattenArrayOfObjects(columns, "columns"); - const [initFilter, setInitFilter] = useState({}); - const [initSort, setInitSort] = useState([]); - const [filterData, setFilterData] = useState({}); - const [sortData, setSortData] = useState([]); - - useEffect(() => { - if (!settingStore) return; - const values = flatColumns.reduce((acc, column) => { - if (!column.enableColumnFilter) return acc; - const filter = settingStore?.[user_id]?.[page_name]?.[table_name]?.["filters"]?.find( - (filter) => filter.id === column.id - ); - if (column.datatype === "array") { - acc[column.id] = { - id: column.id, - value: filter?.value || [], - filterFn: filter?.filterFn || column._filterFn, - datatype: column.datatype, - }; - } else if (column._filterFn === "between") { - acc[column.id] = { - id: column.id, - value: filter?.value || ["", ""], - filterFn: filter?.filterFn || column._filterFn, - datatype: column.datatype, - }; - } else { - acc[column.id] = { - id: column.id, - value: filter?.value || "", - filterFn: filter?.filterFn || column._filterFn, - datatype: column.datatype, - }; - } - return acc; - }, {}); - setFilterData(values); - setSortData(settingStore?.[user_id]?.[page_name]?.[table_name]?.["sorts"] || []); - setInitFilter(values); - setInitSort(settingStore?.[user_id]?.[page_name]?.[table_name]?.["sorts"] || []); - setInitStates(true); - }, [settingStore, isInitStates]); - - useEffect(() => { - if ( - JSON.stringify(initFilter) !== JSON.stringify(filterData) || - JSON.stringify(initSort) !== JSON.stringify(sortData) - ) { - if (!toast.isActive("keep_data", "datatable")) { - toast( - , - { - containerId: "datatable", - toastId: "keep_data", - className: "filter-toast", - position: "bottom-left", - draggable: true, - autoClose: false, - } - ); - } else { - toast.update("keep_data", { - containerId: "datatable", - toastId: "keep_data", - render: ( - - ), - }); - } - } else { - toast.dismiss({ containerId: "datatable" }); - } - }, [filterData, sortData]); - - if (!isInitStates) return null; - - return ( - - {children} - - ); -}; - -export default DataTableProvider; diff --git a/src/lib/hooks/useDataTable.js b/src/lib/hooks/useDataTable.js index e396908..e2feecb 100644 --- a/src/lib/hooks/useDataTable.js +++ b/src/lib/hooks/useDataTable.js @@ -2,8 +2,8 @@ import { useContext } from "react"; import { DataTableContext } from "@/lib/contexts/DataTable"; const useTableSetting = () => { - const { filterData, setFilterData } = useContext(DataTableContext); - return { filterData, setFilterData }; + const { filterData, setFilterData, sortData, setSortData } = useContext(DataTableContext); + return { filterData, setFilterData, sortData, setSortData }; }; export default useTableSetting; diff --git a/src/lib/hooks/useDataTable.jsx b/src/lib/hooks/useDataTable.jsx deleted file mode 100644 index e2feecb..0000000 --- a/src/lib/hooks/useDataTable.jsx +++ /dev/null @@ -1,9 +0,0 @@ -import { useContext } from "react"; -import { DataTableContext } from "@/lib/contexts/DataTable"; - -const useTableSetting = () => { - const { filterData, setFilterData, sortData, setSortData } = useContext(DataTableContext); - return { filterData, setFilterData, sortData, setSortData }; -}; - -export default useTableSetting; diff --git a/src/lib/hooks/useTableSetting.jsx b/src/lib/hooks/useTableSetting.jsx deleted file mode 100644 index 6588446..0000000 --- a/src/lib/hooks/useTableSetting.jsx +++ /dev/null @@ -1,9 +0,0 @@ -import { useContext } from "react"; -import { TableSettingContext } from "../contexts/tableSetting"; - -const useTableSetting = () => { - const { settingStore, hideAction, sortAction, filterAction, refactorAction } = useContext(TableSettingContext); - return { settingStore, hideAction, sortAction, filterAction, refactorAction }; -}; - -export default useTableSetting;