From 5e723a4de79a0a9167345c8308163e89631d9449 Mon Sep 17 00:00:00 2001 From: Mohammad Jalali Date: Sat, 13 Jul 2024 14:03:37 +0330 Subject: [PATCH 1/3] complete datatable getting data with swr --- public/global.scss | 4 +- src/app/(withAuth)/dashboard/layout.js | 6 +- .../inquiryPrivacyFencing/Toolbar.jsx | 20 + .../dashboard/inquiryPrivacyFencing/index.jsx | 365 +++++++++++++++++- src/components/home/Toolbar.jsx | 10 - src/components/home/index.jsx | 129 ------- .../dashboard/headerWithSidebar/index.jsx | 21 +- src/core/components/DataTable/Main.js | 99 ++--- .../DataTable/filter/FilterBody.jsx | 4 +- .../DataTable/head/TableHeadCell.js | 3 +- src/core/components/DataTable/table/Paper.js | 1 + .../DataTable/toolbar/TopToolbar.js | 18 +- .../NotificationDesign/AskForKeep.jsx | 0 src/core/utils/routes.js | 2 +- src/lib/contexts/DataTable.js | 105 ++++- src/lib/contexts/DataTable.jsx | 110 ------ src/lib/hooks/useDataTable.js | 4 +- src/lib/hooks/useDataTable.jsx | 9 - src/lib/hooks/useTableSetting.jsx | 9 - 19 files changed, 550 insertions(+), 369 deletions(-) create mode 100644 src/components/dashboard/inquiryPrivacyFencing/Toolbar.jsx delete mode 100644 src/components/home/Toolbar.jsx delete mode 100644 src/components/home/index.jsx delete mode 100644 src/core/components/NotificationDesign/AskForKeep.jsx delete mode 100644 src/lib/contexts/DataTable.jsx delete mode 100644 src/lib/hooks/useDataTable.jsx delete mode 100644 src/lib/hooks/useTableSetting.jsx 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; From 4dba3f445f24821070adc4f7f45e155f77d4f542 Mon Sep 17 00:00:00 2001 From: Mohammad Jalali Date: Sat, 13 Jul 2024 14:42:27 +0330 Subject: [PATCH 2/3] resolve toast bug and complete request part and sorting data --- src/app/template.js | 17 ++++++++++++++++- .../dashboard/inquiryPrivacyFencing/Toolbar.jsx | 6 ++++++ .../dashboard/inquiryPrivacyFencing/index.jsx | 4 ++-- src/core/components/DataTable/Main.js | 2 +- src/lib/contexts/DataTable.js | 8 ++++---- 5 files changed, 29 insertions(+), 8 deletions(-) diff --git a/src/app/template.js b/src/app/template.js index 3ffc656..8db5145 100644 --- a/src/app/template.js +++ b/src/app/template.js @@ -1,5 +1,5 @@ import cacheProviderRtl from "@/core/utils/cacheRtl"; -import { CssBaseline, ThemeProvider } from "@mui/material"; +import { CssBaseline, GlobalStyles, ThemeProvider } from "@mui/material"; import theme from "@/core/utils/theme"; import { AppRouterCacheProvider } from "@mui/material-nextjs/v14-appRouter"; import "^/global.scss"; @@ -9,6 +9,21 @@ const Template = ({ children }) => { return ( + {children} diff --git a/src/components/dashboard/inquiryPrivacyFencing/Toolbar.jsx b/src/components/dashboard/inquiryPrivacyFencing/Toolbar.jsx index 8a1dc41..9646db4 100644 --- a/src/components/dashboard/inquiryPrivacyFencing/Toolbar.jsx +++ b/src/components/dashboard/inquiryPrivacyFencing/Toolbar.jsx @@ -1,6 +1,7 @@ import { Button } from "@mui/material"; import AddCircleIcon from "@mui/icons-material/AddCircle"; import { useState } from "react"; +import InquiryPrivacyFencingCreate from "@/components/dashboard/inquiryPrivacyFencing/Create"; const Toolbar = ({ mutate }) => { const [open, setOpen] = useState(false); @@ -9,11 +10,16 @@ const Toolbar = ({ mutate }) => { setOpen(true); }; + const handleClose = () => { + setOpen(false); + }; + return ( <> + ); }; diff --git a/src/components/dashboard/inquiryPrivacyFencing/index.jsx b/src/components/dashboard/inquiryPrivacyFencing/index.jsx index 4d4b77f..afc2a32 100644 --- a/src/components/dashboard/inquiryPrivacyFencing/index.jsx +++ b/src/components/dashboard/inquiryPrivacyFencing/index.jsx @@ -352,8 +352,8 @@ const InquiryPrivacyFencingPage = () => { columns={columns} table_url={GET_INQUIRY_PRIVACY_FENCING_ROUTE} user_id={0} - page_name={"testPage"} - table_name={"testTable"} + page_name={"inquiryPrivacyFencing"} + table_name={"inquiryPrivacyFencingList"} TableToolbar={Toolbar} /> diff --git a/src/core/components/DataTable/Main.js b/src/core/components/DataTable/Main.js index 414d477..cf74d80 100644 --- a/src/core/components/DataTable/Main.js +++ b/src/core/components/DataTable/Main.js @@ -33,7 +33,7 @@ const DataTable_Main = (props) => { params.set("filters", JSON.stringify(isEmptyObject(filterData) ? [] : [filterData])); params.set("sorting", JSON.stringify(sortData)); return `${table_url}?${params}`; - }, [table_url, filterData, pagination, columns]); + }, [table_url, filterData, pagination, columns, sortData]); const fetcher = async (url) => { try { diff --git a/src/lib/contexts/DataTable.js b/src/lib/contexts/DataTable.js index 32b2a7c..42fa4b9 100644 --- a/src/lib/contexts/DataTable.js +++ b/src/lib/contexts/DataTable.js @@ -1,8 +1,8 @@ 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"; +import AskForKeepData from "@/core/components/NotificationDesign/AskForKeepData"; export const DataTableContext = createContext(); @@ -58,7 +58,7 @@ const DataTableProvider = ({ children, user_id, page_name, table_name, columns } JSON.stringify(initFilter) !== JSON.stringify(filterData) || JSON.stringify(initSort) !== JSON.stringify(sortData) ) { - if (!toast.isActive("keep_data", "datatable")) { + if (!toast.isActive("keep_data", "filtering")) { toast( , { - containerId: "datatable", + containerId: "filtering", toastId: "keep_data", className: "filter-toast", position: "bottom-left", @@ -79,7 +79,7 @@ const DataTableProvider = ({ children, user_id, page_name, table_name, columns } ); } else { toast.update("keep_data", { - containerId: "datatable", + containerId: "filtering", toastId: "keep_data", render: ( Date: Sat, 13 Jul 2024 15:21:32 +0330 Subject: [PATCH 3/3] debug refactor table and passing parameters to dataTable_paper --- .../dashboard/inquiryPrivacyFencing/index.jsx | 81 +++++++++---------- src/core/components/DataTable/Main.js | 4 +- .../DataTable/head/TableHeadCell.js | 1 + .../DataTable/refactor/RefactorTable.jsx | 11 +-- src/core/components/DataTable/table/Paper.js | 25 ++++-- .../DataTable/toolbar/TopToolbar.js | 6 +- src/lib/contexts/tableSetting.js | 20 +---- src/lib/hooks/useTableSetting.js | 4 +- 8 files changed, 67 insertions(+), 85 deletions(-) diff --git a/src/components/dashboard/inquiryPrivacyFencing/index.jsx b/src/components/dashboard/inquiryPrivacyFencing/index.jsx index afc2a32..f7189f8 100644 --- a/src/components/dashboard/inquiryPrivacyFencing/index.jsx +++ b/src/components/dashboard/inquiryPrivacyFencing/index.jsx @@ -11,7 +11,7 @@ const InquiryPrivacyFencingPage = () => { () => [ { accessorKey: "dabirkhaneh_number", - header: "dabirkhaneh_number", + header: "شماره دبیرخانه درخواست", id: "dabirkhaneh_number", enableColumnFilter: false, datatype: "text", @@ -20,7 +20,7 @@ const InquiryPrivacyFencingPage = () => { }, { accessorKey: "marjae_pasokh", - header: "marjae_pasokh", + header: "مرجع درخواست کننده پاسخ به استعلام", id: "marjae_pasokh", enableColumnFilter: false, datatype: "text", @@ -29,7 +29,7 @@ const InquiryPrivacyFencingPage = () => { }, { accessorKey: "motaghazi_is_legal", - header: "motaghazi_is_legal", + header: "متقاضی", id: "motaghazi_is_legal", enableColumnFilter: false, datatype: "text", @@ -38,7 +38,7 @@ const InquiryPrivacyFencingPage = () => { }, { accessorKey: "nameh_date", - header: "nameh_date", + header: "تاریخ نامه درخواست", id: "nameh_date", enableColumnFilter: false, datatype: "date", @@ -46,7 +46,7 @@ const InquiryPrivacyFencingPage = () => { }, { accessorKey: "motaghazi_type", - header: "motaghazi_type", + header: "نوع متقاضی", id: "motaghazi_type", enableColumnFilter: false, datatype: "text", @@ -55,7 +55,7 @@ const InquiryPrivacyFencingPage = () => { }, { accessorKey: "motaghazi_firstname", - header: "motaghazi_firstname", + header: "نام متقاضی", id: "motaghazi_firstname", enableColumnFilter: false, datatype: "text", @@ -64,7 +64,7 @@ const InquiryPrivacyFencingPage = () => { }, { accessorKey: "motaghazi_lastname", - header: "motaghazi_lastname", + header: "نام خانوادگی متقاضی", id: "motaghazi_lastname", enableColumnFilter: false, datatype: "text", @@ -73,25 +73,16 @@ const InquiryPrivacyFencingPage = () => { }, { accessorKey: "national_id", - header: "national_id", + header: "کد ملی/شناسه ملی", 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", + header: "تلفن", id: "tel_number", enableColumnFilter: false, datatype: "text", @@ -100,7 +91,7 @@ const InquiryPrivacyFencingPage = () => { }, { accessorKey: "mobile_number", - header: "mobile_number", + header: "تلفن همراه", id: "mobile_number", enableColumnFilter: false, datatype: "text", @@ -109,7 +100,7 @@ const InquiryPrivacyFencingPage = () => { }, { accessorKey: "address", - header: "address", + header: "آدرس", id: "address", enableColumnFilter: false, datatype: "text", @@ -118,7 +109,7 @@ const InquiryPrivacyFencingPage = () => { }, { accessorKey: "edare_kol", - header: "edare_kol", + header: "اداره كل راهداری", id: "edare_kol", enableColumnFilter: false, datatype: "text", @@ -127,7 +118,7 @@ const InquiryPrivacyFencingPage = () => { }, { accessorKey: "edare_shahri", - header: "edare_shahri", + header: "اداره شهرستان", id: "edare_shahri", enableColumnFilter: false, datatype: "text", @@ -136,7 +127,7 @@ const InquiryPrivacyFencingPage = () => { }, { accessorKey: "rah_type", - header: "rah_type", + header: "نوع راه", id: "rah_type", enableColumnFilter: false, datatype: "text", @@ -145,7 +136,7 @@ const InquiryPrivacyFencingPage = () => { }, { accessorKey: "name_mehvar_fa", - header: "name_mehvar_fa", + header: "نام محور", id: "name_mehvar_fa", enableColumnFilter: false, datatype: "text", @@ -154,7 +145,7 @@ const InquiryPrivacyFencingPage = () => { }, { accessorKey: "mizan_harim", - header: "mizan_harim", + header: "میزان حریم", id: "mizan_harim", enableColumnFilter: false, datatype: "text", @@ -163,7 +154,7 @@ const InquiryPrivacyFencingPage = () => { }, { accessorKey: "arze_navar", - header: "arze_navar", + header: "عرض نوار تاسیساتی زیربنایی", id: "arze_navar", enableColumnFilter: false, datatype: "text", @@ -172,7 +163,7 @@ const InquiryPrivacyFencingPage = () => { }, { accessorKey: "samt", - header: "samt", + header: "سمت", id: "samt", enableColumnFilter: false, datatype: "text", @@ -181,7 +172,7 @@ const InquiryPrivacyFencingPage = () => { }, { accessorKey: "kilometr", - header: "kilometr", + header: "كيلومتر", id: "kilometr", enableColumnFilter: false, datatype: "text", @@ -199,7 +190,7 @@ const InquiryPrivacyFencingPage = () => { }, { accessorKey: "karbari_type", - header: "karbari_type", + header: "نوع کاربری", id: "karbari_type", enableColumnFilter: false, datatype: "text", @@ -208,7 +199,7 @@ const InquiryPrivacyFencingPage = () => { }, { accessorKey: "tarh_title", - header: "tarh_title", + header: "عنوان طرح", id: "tarh_title", enableColumnFilter: false, datatype: "text", @@ -217,7 +208,7 @@ const InquiryPrivacyFencingPage = () => { }, { accessorKey: "masahat_zirbana", - header: "masahat_zirbana", + header: "مساحت زیربنا", id: "masahat_zirbana", enableColumnFilter: false, datatype: "text", @@ -226,7 +217,7 @@ const InquiryPrivacyFencingPage = () => { }, { accessorKey: "ehdasat_type", - header: "ehdasat_type", + header: "نوع احداثات", id: "ehdasat_type", enableColumnFilter: false, datatype: "text", @@ -235,7 +226,7 @@ const InquiryPrivacyFencingPage = () => { }, { accessorKey: "divarkeshi_distance", - header: "divarkeshi_distance", + header: "فاصله دیوارکشی از آکس محور", id: "divarkeshi_distance", enableColumnFilter: false, datatype: "text", @@ -244,7 +235,7 @@ const InquiryPrivacyFencingPage = () => { }, { accessorKey: "mahale_ejra", - header: "mahale_ejra", + header: "محل اجرا", id: "mahale_ejra", enableColumnFilter: false, datatype: "text", @@ -253,7 +244,7 @@ const InquiryPrivacyFencingPage = () => { }, { accessorKey: "traffic", - header: "traffic", + header: "میزان ترافیک", id: "traffic", enableColumnFilter: false, datatype: "text", @@ -262,7 +253,7 @@ const InquiryPrivacyFencingPage = () => { }, { accessorKey: "vaziat_eghtesadi", - header: "vaziat_eghtesadi", + header: "وضعیت اقتصادی", id: "vaziat_eghtesadi", enableColumnFilter: false, datatype: "text", @@ -271,7 +262,7 @@ const InquiryPrivacyFencingPage = () => { }, { accessorKey: "has_access", - header: "has_access", + header: "آیا راه دسترسی از قبل وجود دارد؟", id: "has_access", enableColumnFilter: false, datatype: "text", @@ -280,7 +271,7 @@ const InquiryPrivacyFencingPage = () => { }, { accessorKey: "shomare_estelam_harim", - header: "shomare_estelam_harim", + header: "شماره استعلام دفتر ایمنی و حریم", id: "shomare_estelam_harim", enableColumnFilter: false, datatype: "text", @@ -289,7 +280,7 @@ const InquiryPrivacyFencingPage = () => { }, { accessorKey: "max_month", - header: "max_month", + header: "ماه", id: "max_month", enableColumnFilter: false, datatype: "text", @@ -298,7 +289,7 @@ const InquiryPrivacyFencingPage = () => { }, { accessorKey: "max_day", - header: "max_day", + header: "روز", id: "max_day", enableColumnFilter: false, datatype: "text", @@ -307,7 +298,7 @@ const InquiryPrivacyFencingPage = () => { }, { accessorKey: "shomare_tahaodname", - header: "shomare_tahaodname", + header: "شماره تعهدنامه", id: "shomare_tahaodname", enableColumnFilter: false, datatype: "text", @@ -316,7 +307,7 @@ const InquiryPrivacyFencingPage = () => { }, { accessorKey: "shomare_daftarkhaneh", - header: "shomare_daftarkhaneh", + header: "شماره دفترخانه", id: "shomare_daftarkhaneh", enableColumnFilter: false, datatype: "text", @@ -325,7 +316,7 @@ const InquiryPrivacyFencingPage = () => { }, { accessorKey: "description", - header: "description", + header: "توضیحات", id: "description", enableColumnFilter: false, datatype: "text", @@ -334,7 +325,7 @@ const InquiryPrivacyFencingPage = () => { }, { accessorKey: "ronevesht", - header: "ronevesht", + header: "رونوشت", id: "ronevesht", enableColumnFilter: false, datatype: "text", @@ -348,7 +339,7 @@ const InquiryPrivacyFencingPage = () => { return ( { return ( { - refactorAction(userId, pageName, tableName); + mutate(); }; return ( diff --git a/src/core/components/DataTable/table/Paper.js b/src/core/components/DataTable/table/Paper.js index 88902a8..289cabd 100644 --- a/src/core/components/DataTable/table/Paper.js +++ b/src/core/components/DataTable/table/Paper.js @@ -4,7 +4,17 @@ import DataTable_BottomToolbar from "../toolbar/BottomToolbar"; import DataTable_TopToolbar from "../toolbar/TopToolbar"; import DataTable_TableContainer from "./TableContainer"; -const DataTable_Paper = ({ table, ...rest }) => { +const DataTable_Paper = ({ + table, + table_name, + columns, + user_id, + page_name, + mutate, + need_filter, + table_url, + ...rest +}) => { const { getState, options: { @@ -66,13 +76,14 @@ const DataTable_Paper = ({ table, ...rest }) => { {enableTopToolbar && (parseFromValuesOrFunc(renderTopToolbar, { table }) ?? ( ))} diff --git a/src/core/components/DataTable/toolbar/TopToolbar.js b/src/core/components/DataTable/toolbar/TopToolbar.js index bd008a0..81bc84a 100644 --- a/src/core/components/DataTable/toolbar/TopToolbar.js +++ b/src/core/components/DataTable/toolbar/TopToolbar.js @@ -6,7 +6,7 @@ import DataTable_ToolbarInternalButtons from "./ToolbarInternalButtons"; import FilterColumn from "@/core/components/DataTable/filter"; import RefactorTable from "@/core/components/DataTable/refactor/RefactorTable"; -const DataTable_TopToolbar = ({ need_filter, table, columns, table_url, user_id, page_name, table_name }) => { +const DataTable_TopToolbar = ({ mutate, need_filter, table, columns, table_url, user_id, page_name, table_name }) => { const { getState, options: { @@ -69,8 +69,8 @@ const DataTable_TopToolbar = ({ need_filter, table, columns, table_url, user_id, justifyContent: "flex-end", }} > - - {need_filter === "true" && ( + + {need_filter && ( { localStorage.setItem("_setting-app", JSON.stringify(updatedLocalStorage)); setSettingStore(updatedLocalStorage); }; - const refactorAction = (user_id, page_name, table_name) => { - const prevLocalStorage = JSON.parse(localStorage.getItem("_setting-app")) || {}; - const userSettings = prevLocalStorage[user_id] || {}; - const pageSettings = userSettings[page_name] || {}; - const refactorData = { - ...prevLocalStorage, - [user_id]: { - ...userSettings, - [page_name]: { - ...pageSettings, - [table_name]: {}, - }, - }, - }; - localStorage.setItem("_setting-app", JSON.stringify(refactorData)); - setSettingStore(refactorData); - }; + const SummaryTextMessage = (values, columns) => { let SummaryText = ""; let HideText = ""; @@ -133,7 +117,7 @@ export const TableSettingProvider = ({ children }) => { }; return ( - + {children} ); diff --git a/src/lib/hooks/useTableSetting.js b/src/lib/hooks/useTableSetting.js index 6588446..e9e6cef 100644 --- a/src/lib/hooks/useTableSetting.js +++ b/src/lib/hooks/useTableSetting.js @@ -2,8 +2,8 @@ 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 }; + const { settingStore, hideAction, sortAction, filterAction } = useContext(TableSettingContext); + return { settingStore, hideAction, sortAction, filterAction }; }; export default useTableSetting;