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 new file mode 100644 index 0000000..9646db4 --- /dev/null +++ b/src/components/dashboard/inquiryPrivacyFencing/Toolbar.jsx @@ -0,0 +1,26 @@ +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); + + const handleOpen = () => { + setOpen(true); + }; + + const handleClose = () => { + setOpen(false); + }; + + return ( + <> + + + + ); +}; +export default Toolbar; diff --git a/src/components/dashboard/inquiryPrivacyFencing/index.jsx b/src/components/dashboard/inquiryPrivacyFencing/index.jsx index 539885d..f7189f8 100644 --- a/src/components/dashboard/inquiryPrivacyFencing/index.jsx +++ b/src/components/dashboard/inquiryPrivacyFencing/index.jsx @@ -1,4 +1,354 @@ +"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: "شماره دبیرخانه درخواست", + id: "dabirkhaneh_number", + enableColumnFilter: false, + datatype: "text", + filterFn: "notEquals", + columnFilterModeOptions: ["equals", "notEquals", "contains"], + }, + { + accessorKey: "marjae_pasokh", + header: "مرجع درخواست کننده پاسخ به استعلام", + id: "marjae_pasokh", + enableColumnFilter: false, + datatype: "text", + filterFn: "equals", + columnFilterModeOptions: ["equals", "notEquals", "contains", "lessThan", "greaterThan", "fuzzy"], + }, + { + accessorKey: "motaghazi_is_legal", + header: "متقاضی", + id: "motaghazi_is_legal", + enableColumnFilter: false, + datatype: "text", + filterFn: "contains", + columnFilterModeOptions: ["equals", "notEquals", "contains"], + }, + { + accessorKey: "nameh_date", + header: "تاریخ نامه درخواست", + id: "nameh_date", + enableColumnFilter: false, + datatype: "date", + filterFn: "equals", + }, + { + accessorKey: "motaghazi_type", + header: "نوع متقاضی", + id: "motaghazi_type", + enableColumnFilter: false, + datatype: "text", + filterFn: "contains", + columnFilterModeOptions: ["equals", "notEquals", "contains"], + }, + { + accessorKey: "motaghazi_firstname", + header: "نام متقاضی", + id: "motaghazi_firstname", + enableColumnFilter: false, + datatype: "text", + filterFn: "contains", + columnFilterModeOptions: ["equals", "notEquals", "contains"], + }, + { + accessorKey: "motaghazi_lastname", + header: "نام خانوادگی متقاضی", + id: "motaghazi_lastname", + enableColumnFilter: false, + datatype: "text", + filterFn: "contains", + columnFilterModeOptions: ["equals", "notEquals", "contains"], + }, + { + accessorKey: "national_id", + header: "کد ملی/شناسه ملی", + id: "national_id", + enableColumnFilter: false, + datatype: "text", + filterFn: "contains", + columnFilterModeOptions: ["equals", "notEquals", "contains"], + }, + { + accessorKey: "tel_number", + header: "تلفن", + id: "tel_number", + enableColumnFilter: false, + datatype: "text", + filterFn: "contains", + columnFilterModeOptions: ["equals", "notEquals", "contains"], + }, + { + accessorKey: "mobile_number", + header: "تلفن همراه", + id: "mobile_number", + enableColumnFilter: false, + datatype: "text", + filterFn: "contains", + columnFilterModeOptions: ["equals", "notEquals", "contains"], + }, + { + accessorKey: "address", + header: "آدرس", + id: "address", + enableColumnFilter: false, + datatype: "text", + filterFn: "contains", + columnFilterModeOptions: ["equals", "notEquals", "contains"], + }, + { + accessorKey: "edare_kol", + header: "اداره كل راهداری", + id: "edare_kol", + enableColumnFilter: false, + datatype: "text", + filterFn: "contains", + columnFilterModeOptions: ["equals", "notEquals", "contains"], + }, + { + accessorKey: "edare_shahri", + header: "اداره شهرستان", + id: "edare_shahri", + enableColumnFilter: false, + datatype: "text", + filterFn: "contains", + columnFilterModeOptions: ["equals", "notEquals", "contains"], + }, + { + accessorKey: "rah_type", + header: "نوع راه", + id: "rah_type", + enableColumnFilter: false, + datatype: "text", + filterFn: "contains", + columnFilterModeOptions: ["equals", "notEquals", "contains"], + }, + { + accessorKey: "name_mehvar_fa", + header: "نام محور", + id: "name_mehvar_fa", + enableColumnFilter: false, + datatype: "text", + filterFn: "contains", + columnFilterModeOptions: ["equals", "notEquals", "contains"], + }, + { + accessorKey: "mizan_harim", + header: "میزان حریم", + id: "mizan_harim", + enableColumnFilter: false, + datatype: "text", + filterFn: "contains", + columnFilterModeOptions: ["equals", "notEquals", "contains"], + }, + { + accessorKey: "arze_navar", + header: "عرض نوار تاسیساتی زیربنایی", + id: "arze_navar", + enableColumnFilter: false, + datatype: "text", + filterFn: "contains", + columnFilterModeOptions: ["equals", "notEquals", "contains"], + }, + { + accessorKey: "samt", + header: "سمت", + id: "samt", + enableColumnFilter: false, + datatype: "text", + filterFn: "contains", + columnFilterModeOptions: ["equals", "notEquals", "contains"], + }, + { + accessorKey: "kilometr", + header: "كيلومتر", + 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: "نوع کاربری", + id: "karbari_type", + enableColumnFilter: false, + datatype: "text", + filterFn: "contains", + columnFilterModeOptions: ["equals", "notEquals", "contains"], + }, + { + accessorKey: "tarh_title", + header: "عنوان طرح", + id: "tarh_title", + enableColumnFilter: false, + datatype: "text", + filterFn: "contains", + columnFilterModeOptions: ["equals", "notEquals", "contains"], + }, + { + accessorKey: "masahat_zirbana", + header: "مساحت زیربنا", + id: "masahat_zirbana", + enableColumnFilter: false, + datatype: "text", + filterFn: "contains", + columnFilterModeOptions: ["equals", "notEquals", "contains"], + }, + { + accessorKey: "ehdasat_type", + header: "نوع احداثات", + id: "ehdasat_type", + enableColumnFilter: false, + datatype: "text", + filterFn: "contains", + columnFilterModeOptions: ["equals", "notEquals", "contains"], + }, + { + accessorKey: "divarkeshi_distance", + header: "فاصله دیوارکشی از آکس محور", + id: "divarkeshi_distance", + enableColumnFilter: false, + datatype: "text", + filterFn: "contains", + columnFilterModeOptions: ["equals", "notEquals", "contains"], + }, + { + accessorKey: "mahale_ejra", + header: "محل اجرا", + id: "mahale_ejra", + enableColumnFilter: false, + datatype: "text", + filterFn: "contains", + columnFilterModeOptions: ["equals", "notEquals", "contains"], + }, + { + accessorKey: "traffic", + header: "میزان ترافیک", + id: "traffic", + enableColumnFilter: false, + datatype: "text", + filterFn: "contains", + columnFilterModeOptions: ["equals", "notEquals", "contains"], + }, + { + accessorKey: "vaziat_eghtesadi", + header: "وضعیت اقتصادی", + id: "vaziat_eghtesadi", + enableColumnFilter: false, + datatype: "text", + filterFn: "contains", + columnFilterModeOptions: ["equals", "notEquals", "contains"], + }, + { + accessorKey: "has_access", + header: "آیا راه دسترسی از قبل وجود دارد؟", + id: "has_access", + enableColumnFilter: false, + datatype: "text", + filterFn: "contains", + columnFilterModeOptions: ["equals", "notEquals", "contains"], + }, + { + accessorKey: "shomare_estelam_harim", + header: "شماره استعلام دفتر ایمنی و حریم", + id: "shomare_estelam_harim", + enableColumnFilter: false, + datatype: "text", + filterFn: "contains", + columnFilterModeOptions: ["equals", "notEquals", "contains"], + }, + { + accessorKey: "max_month", + header: "ماه", + id: "max_month", + enableColumnFilter: false, + datatype: "text", + filterFn: "contains", + columnFilterModeOptions: ["equals", "notEquals", "contains"], + }, + { + accessorKey: "max_day", + header: "روز", + id: "max_day", + enableColumnFilter: false, + datatype: "text", + filterFn: "contains", + columnFilterModeOptions: ["equals", "notEquals", "contains"], + }, + { + accessorKey: "shomare_tahaodname", + header: "شماره تعهدنامه", + id: "shomare_tahaodname", + enableColumnFilter: false, + datatype: "text", + filterFn: "contains", + columnFilterModeOptions: ["equals", "notEquals", "contains"], + }, + { + accessorKey: "shomare_daftarkhaneh", + header: "شماره دفترخانه", + id: "shomare_daftarkhaneh", + enableColumnFilter: false, + datatype: "text", + filterFn: "contains", + columnFilterModeOptions: ["equals", "notEquals", "contains"], + }, + { + accessorKey: "description", + header: "توضیحات", + id: "description", + enableColumnFilter: false, + datatype: "text", + filterFn: "contains", + columnFilterModeOptions: ["equals", "notEquals", "contains"], + }, + { + accessorKey: "ronevesht", + header: "رونوشت", + 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 931cde2..715588c 100644 --- a/src/components/layouts/dashboard/headerWithSidebar/index.jsx +++ b/src/components/layouts/dashboard/headerWithSidebar/index.jsx @@ -112,4 +112,4 @@ const HeaderWithSidebar = ({ 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..cc726b5 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]); + }, [table_url, filterData, pagination, columns, sortData]); + + 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, @@ -155,6 +107,9 @@ 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..9bc98b5 100644 --- a/src/core/components/DataTable/head/TableHeadCell.js +++ b/src/core/components/DataTable/head/TableHeadCell.js @@ -214,9 +214,9 @@ const DataTable_TableHeadCell = ({ columnVirtualizer, header, staticColumnIndex, minWidth: `${Math.min(columnDef.header?.length ?? 0, 4)}ch`, overflow: columnDefType === "data" ? "hidden" : undefined, textOverflow: "ellipsis", + textAlign: "start", color: "#fff", - fontSize: "14px", - fontWeight: "500", + fontWeight: "400", whiteSpace: (columnDef.header?.length ?? 0) < 20 ? "nowrap" : "normal", }} > diff --git a/src/core/components/DataTable/refactor/RefactorTable.jsx b/src/core/components/DataTable/refactor/RefactorTable.jsx index 49217a0..e9ed9ff 100644 --- a/src/core/components/DataTable/refactor/RefactorTable.jsx +++ b/src/core/components/DataTable/refactor/RefactorTable.jsx @@ -1,17 +1,10 @@ "use client"; import { IconButton, Tooltip } from "@mui/material"; import RestartAltIcon from "@mui/icons-material/RestartAlt"; -import useTableSetting from "@/lib/hooks/useTableSetting"; -import { useState } from "react"; - -function RefactorTable() { - const { refactorAction } = useTableSetting(); - const [userId, setUserId] = useState(0); - const [pageName, setPageName] = useState("testPage"); - const [tableName, setTableName] = useState("testTable"); +function RefactorTable({ mutate }) { const refactor = () => { - 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 ede80b3..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,12 +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 b0e5297..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 = ({ 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,14 +69,16 @@ const DataTable_TopToolbar = ({ table, columns, table_url, user_id, page_name, t justifyContent: "flex-end", }} > - - + + {need_filter && ( + + )} )} 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 29a17a8..7c0f4dc 100644 --- a/src/core/utils/routes.js +++ b/src/core/utils/routes.js @@ -4,7 +4,7 @@ export const GET_CSRF = api + "/csrf"; 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"; export const SET_INQUIRE_PRIVACY_FENCING = api + "/api/v3/harim/divarkeshi/store"; diff --git a/src/lib/contexts/DataTable.js b/src/lib/contexts/DataTable.js index fb03fd7..42fa4b9 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 useTableSetting from "@/lib/hooks/useTableSetting"; +import { flattenArrayOfObjects } from "@/core/utils/flattenArrayOfObjects"; +import AskForKeepData from "@/core/components/NotificationDesign/AskForKeepData"; 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", "filtering")) { + toast( + , + { + containerId: "filtering", + toastId: "keep_data", + className: "filter-toast", + position: "bottom-left", + draggable: true, + autoClose: false, + } + ); + } else { + toast.update("keep_data", { + containerId: "filtering", + 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/contexts/tableSetting.js b/src/lib/contexts/tableSetting.js index 8b05828..b5b63d9 100644 --- a/src/lib/contexts/tableSetting.js +++ b/src/lib/contexts/tableSetting.js @@ -55,23 +55,7 @@ export const TableSettingProvider = ({ children }) => { 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/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.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; 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;