RMS/frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'develop' of https://gitlab.com/witel-front-end/rms into develop

Browse Source
This commit is contained in:
Amirhossein Mahmoodi
2024-07-13 15:49:18 +03:30
parent 594c551b5c 81bc0738b0
commit bd12d60b0d
21 changed files with 569 additions and 400 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/app/template.js
View File

@@ -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 (
<AppRouterCacheProvider CacheProvider={cacheProviderRtl} options={{ enableCssLayer: true }}>
<ThemeProvider theme={theme}>
<GlobalStyles
styles={{
"&::-webkit-scrollbar": {
width: "5px",
},
"&::-webkit-scrollbar-track": {
boxShadow: "inset 0 0 5px #fff",
borderRadius: "5px",
},
"&::-webkit-scrollbar-thumb": {
background: "#155175",
borderRadius: "5px",
},
}}
/>
<CssBaseline />
{children}
<ToastContainer rtl containerId="filtering" closeButton={false} />

26
src/components/dashboard/inquiryPrivacyFencing/Toolbar.jsx Normal file
View File

@@ -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 (
<>
<Button variant="contained" color="primary2" startIcon={<AddCircleIcon />} onClick={handleOpen}>
ایجاد پاسخ به استعلام
</Button>
<InquiryPrivacyFencingCreate open={open} handleClose={handleClose} mutate={mutate} />
</>
);
};
export default Toolbar;

356
src/components/dashboard/inquiryPrivacyFencing/index.jsx
View File

@@ -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
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 (
<Box sx={{ mx: 2 }}>
<DataTable
need_filter={false}
columns={columns}
table_url={GET_INQUIRY_PRIVACY_FENCING_ROUTE}
user_id={0}
page_name={"inquiryPrivacyFencing"}
table_name={"inquiryPrivacyFencingList"}
TableToolbar={Toolbar}
/>
</Box>
);
};
export default InquiryPrivacyFencingPage;

10
src/components/home/Toolbar.jsx
View File

@@ -1,10 +0,0 @@
import { Button } from "@mui/material";
const Toolbar = ({ columns }) => {
return (
<>
<Button>add something</Button>
</>
);
};
export default Toolbar;

129
src/components/home/index.jsx
View File

@@ -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 (
<>
<DataTable
columns={columns}
table_url={"api"}
user_id={0}
page_name={"testPage"}
table_name={"testTable"}
/>
</>
);
}
export default HomeComponent;

2
src/components/layouts/dashboard/headerWithSidebar/index.jsx
View File

@@ -112,4 +112,4 @@ const HeaderWithSidebar = ({ children }) => {
</Box>
);
};
export default HeaderWithSidebar;
export default HeaderWithSidebar;

103
src/core/components/DataTable/Main.js
View File

@@ -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 }) => (
<>
<Toolbar columns={flatColumns} />
<TableToolbar mutate={mutate} />
</>
),
...props,
@@ -155,6 +107,9 @@ const DataTable_Main = (props) => {
return (
<DataTable_Paper
table={table}
need_filter={need_filter}
mutate={mutate}
table_url={table_url}
columns={flatColumns}
user_id={user_id}
page_name={page_name}

4
src/core/components/DataTable/filter/FilterBody.jsx
View File

@@ -135,9 +135,9 @@ function FilterBody({ columns, drawerState, setDrawerState, user_id, page_name,
px: 8,
boxShadow:
"rgba(0, 0, 0, 0.23) 0px 6px 6px, rgba(0, 0, 0, 0.19) 10px 0px 20px",
backgroundColor: "#155175",
backgroundColor: "primary2",
":hover": {
backgroundColor: "#155175",
backgroundColor: "primary2",
},
}}
>

4
src/core/components/DataTable/head/TableHeadCell.js
View File

@@ -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",
}}
>

11
src/core/components/DataTable/refactor/RefactorTable.jsx
View File

@@ -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 (

24
src/core/components/DataTable/table/Paper.js
View File

@@ -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 }) ?? (
<DataTable_TopToolbar
need_filter={need_filter}
table={table}
columns={paperProps.columns}
table_url={paperProps.table_url}
user_id={paperProps.user_id}
page_name={paperProps.page_name}
table_name={paperProps.table_name}
mutate={mutate}
columns={columns}
table_url={table_url}
user_id={user_id}
page_name={page_name}
table_name={table_name}
/>
))}
<DataTable_TableContainer table={table} />

20
src/core/components/DataTable/toolbar/TopToolbar.js
View File

@@ -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",
}}
>
<RefactorTable />
<FilterColumn
columns={columns}
table_url={table_url}
user_id={user_id}
page_name={page_name}
table_name={table_name}
/>
<RefactorTable mutate={mutate} />
{need_filter && (
<FilterColumn
columns={columns}
table_url={table_url}
user_id={user_id}
page_name={page_name}
table_name={table_name}
/>
)}
<DataTable_ToolbarInternalButtons table={table} />
</Box>
)}

0
src/core/components/NotificationDesign/AskForKeep.jsx
View File

2
src/core/utils/routes.js
View File

@@ -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";

105
src/lib/contexts/DataTable.js
View File

@@ -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 <DataTableContext.Provider value={{ filterData, setFilterData }}>{children}</DataTableContext.Provider>;
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(
<AskForKeepData
filterData={filterData}
sortData={sortData}
user_id={user_id}
page_name={page_name}
table_name={table_name}
columns={flatColumns}
/>,
{
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: (
<AskForKeepData
filterData={filterData}
sortData={sortData}
user_id={user_id}
page_name={page_name}
table_name={table_name}
columns={flatColumns}
/>
),
});
}
} else {
toast.dismiss({ containerId: "datatable" });
}
}, [filterData, sortData]);
if (!isInitStates) return null;
return (
<DataTableContext.Provider value={{ filterData, setFilterData, sortData, setSortData }}>
{children}
</DataTableContext.Provider>
);
};
export default DataTableProvider;

110
src/lib/contexts/DataTable.jsx
View File

@@ -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(
<AskForKeepData
filterData={filterData}
sortData={sortData}
user_id={user_id}
page_name={page_name}
table_name={table_name}
columns={flatColumns}
/>,
{
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: (
<AskForKeepData
filterData={filterData}
sortData={sortData}
user_id={user_id}
page_name={page_name}
table_name={table_name}
columns={flatColumns}
/>
),
});
}
} else {
toast.dismiss({ containerId: "datatable" });
}
}, [filterData, sortData]);
if (!isInitStates) return null;
return (
<DataTableContext.Provider value={{ filterData, setFilterData, sortData, setSortData }}>
{children}
</DataTableContext.Provider>
);
};
export default DataTableProvider;

20
src/lib/contexts/tableSetting.js
View File

@@ -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 (
<TableSettingContext.Provider value={{ settingStore, hideAction, sortAction, filterAction, refactorAction }}>
<TableSettingContext.Provider value={{ settingStore, hideAction, sortAction, filterAction }}>
{children}
</TableSettingContext.Provider>
);

4
src/lib/hooks/useDataTable.js
View File

@@ -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;

9
src/lib/hooks/useDataTable.jsx
View File

@@ -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;

4
src/lib/hooks/useTableSetting.js
View File

@@ -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;

9
src/lib/hooks/useTableSetting.jsx
View File

@@ -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;