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

Merge branch 'feature/migrate_formik_to_react_hook_form' into 'develop'

Browse Source 
Feature/migrate formik to react hook form

See merge request witel-front-end/rms!42
This commit is contained in:
AmirHossein Mahmoodi
2024-12-18 10:34:40 +00:00
parent f0fb662a1c 8f770d3000
commit f2ef4cd1db
28 changed files with 331 additions and 319 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/app/(withAuth)/dashboard/azmayesh/loading.jsx
View File

@@ -1,7 +1,7 @@
'use client' "use client";
import PageLoading from "@/core/components/PageLoading" import PageLoading from "@/core/components/PageLoading";
const Loading = () => { const Loading = () => {
return <PageLoading /> return <PageLoading />;
} };
export default Loading export default Loading;

10
src/app/(withAuth)/dashboard/azmayesh_type/loading.jsx
View File

@@ -1,7 +1,7 @@
'use client' "use client";
import PageLoading from "@/core/components/PageLoading" import PageLoading from "@/core/components/PageLoading";
const Loading = () => { const Loading = () => {
return <PageLoading /> return <PageLoading />;
} };
export default Loading export default Loading;

10
src/app/(withAuth)/dashboard/loading.jsx
View File

@@ -1,7 +1,7 @@
'use client' "use client";
import PageLoading from "@/core/components/PageLoading" import PageLoading from "@/core/components/PageLoading";
const Loading = () => { const Loading = () => {
return <PageLoading /> return <PageLoading />;
} };
export default Loading export default Loading;

10
src/app/(withAuth)/dashboard/road-patrols/operator/loading.jsx
View File

@@ -1,7 +1,7 @@
'use client' "use client";
import PageLoading from "@/core/components/PageLoading" import PageLoading from "@/core/components/PageLoading";
const Loading = () => { const Loading = () => {
return <PageLoading /> return <PageLoading />;
} };
export default Loading export default Loading;

10
src/app/(withAuth)/dashboard/road-patrols/supervisor/loading.jsx
View File

@@ -1,7 +1,7 @@
'use client' "use client";
import PageLoading from "@/core/components/PageLoading" import PageLoading from "@/core/components/PageLoading";
const Loading = () => { const Loading = () => {
return <PageLoading /> return <PageLoading />;
} };
export default Loading export default Loading;

26
src/components/dashboard/azmayesh/AzmayeshList.jsx
View File

@@ -18,7 +18,7 @@ const AzmayeshList = () => {
id: "id", id: "id",
enableColumnFilter: false, enableColumnFilter: false,
datatype: "text", datatype: "text",
filterFn: "notEquals", filterMode: "notEquals",
}, },
{ {
accessorKey: "azmayesh_type_name", accessorKey: "azmayesh_type_name",
@@ -26,7 +26,7 @@ const AzmayeshList = () => {
id: "azmayesh_type_name", id: "azmayesh_type_name",
enableColumnFilter: false, enableColumnFilter: false,
datatype: "text", datatype: "text",
filterFn: "notEquals", filterMode: "notEquals",
}, },
{ {
accessorKey: "project_name", accessorKey: "project_name",
@@ -34,7 +34,7 @@ const AzmayeshList = () => {
id: "project_name", id: "project_name",
enableColumnFilter: false, enableColumnFilter: false,
datatype: "text", datatype: "text",
filterFn: "equals", filterMode: "equals",
}, },
{ {
accessorKey: "lat", accessorKey: "lat",
@@ -43,7 +43,7 @@ const AzmayeshList = () => {
enableColumnFilter: false, enableColumnFilter: false,
datatype: "text", datatype: "text",
enableSorting: false, enableSorting: false,
filterFn: "equals", filterMode: "equals",
Cell: ({ row }) => <ShowLocation lat={row.original.lat} lng={row.original.lng} />, Cell: ({ row }) => <ShowLocation lat={row.original.lat} lng={row.original.lng} />,
}, },
{ {
@@ -52,7 +52,7 @@ const AzmayeshList = () => {
id: "employer", id: "employer",
enableColumnFilter: false, enableColumnFilter: false,
datatype: "text", datatype: "text",
filterFn: "equals", filterMode: "equals",
}, },
{ {
accessorKey: "consultant", accessorKey: "consultant",
@@ -60,7 +60,7 @@ const AzmayeshList = () => {
id: "consultant", id: "consultant",
enableColumnFilter: false, enableColumnFilter: false,
datatype: "text", datatype: "text",
filterFn: "equals", filterMode: "equals",
}, },
{ {
accessorKey: "contractor", accessorKey: "contractor",
@@ -68,7 +68,7 @@ const AzmayeshList = () => {
id: "contractor", id: "contractor",
enableColumnFilter: false, enableColumnFilter: false,
datatype: "text", datatype: "text",
filterFn: "equals", filterMode: "equals",
}, },
{ {
accessorKey: "applicant", accessorKey: "applicant",
@@ -76,7 +76,7 @@ const AzmayeshList = () => {
id: "applicant", id: "applicant",
enableColumnFilter: false, enableColumnFilter: false,
datatype: "text", datatype: "text",
filterFn: "equals", filterMode: "equals",
}, },
{ {
accessorKey: "work_number", accessorKey: "work_number",
@@ -84,7 +84,7 @@ const AzmayeshList = () => {
id: "work_number", id: "work_number",
enableColumnFilter: false, enableColumnFilter: false,
datatype: "text", datatype: "text",
filterFn: "equals", filterMode: "equals",
}, },
{ {
accessorKey: "request_number", accessorKey: "request_number",
@@ -92,7 +92,7 @@ const AzmayeshList = () => {
id: "request_number", id: "request_number",
enableColumnFilter: false, enableColumnFilter: false,
datatype: "text", datatype: "text",
filterFn: "equals", filterMode: "equals",
}, },
{ {
accessorKey: "request_date", accessorKey: "request_date",
@@ -100,7 +100,7 @@ const AzmayeshList = () => {
id: "request_date", id: "request_date",
enableColumnFilter: false, enableColumnFilter: false,
datatype: "date", datatype: "date",
filterFn: "equals", filterMode: "equals",
Cell: ({ renderedCellValue }) => ( Cell: ({ renderedCellValue }) => (
<Typography variant="body2"> <Typography variant="body2">
{renderedCellValue ? moment(renderedCellValue).locale("fa").format("YYYY/MM/DD") : "-"} {renderedCellValue ? moment(renderedCellValue).locale("fa").format("YYYY/MM/DD") : "-"}
@@ -113,7 +113,7 @@ const AzmayeshList = () => {
id: "report_date", id: "report_date",
enableColumnFilter: false, enableColumnFilter: false,
datatype: "date", datatype: "date",
filterFn: "equals", filterMode: "equals",
Cell: ({ renderedCellValue }) => ( Cell: ({ renderedCellValue }) => (
<Typography variant="body2"> <Typography variant="body2">
{renderedCellValue ? moment(renderedCellValue).locale("fa").format("YYYY/MM/DD") : "-"} {renderedCellValue ? moment(renderedCellValue).locale("fa").format("YYYY/MM/DD") : "-"}
@@ -126,7 +126,7 @@ const AzmayeshList = () => {
id: "updated_at", id: "updated_at",
enableColumnFilter: false, enableColumnFilter: false,
datatype: "date", datatype: "date",
filterFn: "equals", filterMode: "equals",
Cell: ({ renderedCellValue }) => ( Cell: ({ renderedCellValue }) => (
<Typography variant="body2"> <Typography variant="body2">
{renderedCellValue ? moment(renderedCellValue).locale("fa").format("HH:mm | YYYY/MM/DD") : "-"} {renderedCellValue ? moment(renderedCellValue).locale("fa").format("HH:mm | YYYY/MM/DD") : "-"}

6
src/components/dashboard/azmayeshType/AzmayeshTypeList.jsx
View File

@@ -17,7 +17,7 @@ const AzmayeshTypeList = () => {
id: "id", id: "id",
enableColumnFilter: false, enableColumnFilter: false,
datatype: "text", datatype: "text",
filterFn: "notEquals", filterMode: "notEquals",
}, },
{ {
accessorKey: "name", accessorKey: "name",
@@ -25,7 +25,7 @@ const AzmayeshTypeList = () => {
id: "name", id: "name",
enableColumnFilter: false, enableColumnFilter: false,
datatype: "text", datatype: "text",
filterFn: "notEquals", filterMode: "notEquals",
}, },
{ {
accessorKey: "updated_at", accessorKey: "updated_at",
@@ -33,7 +33,7 @@ const AzmayeshTypeList = () => {
id: "updated_at", id: "updated_at",
enableColumnFilter: false, enableColumnFilter: false,
datatype: "date", datatype: "date",
filterFn: "equals", filterMode: "equals",
Cell: ({ renderedCellValue }) => ( Cell: ({ renderedCellValue }) => (
<Typography variant="body2"> <Typography variant="body2">
{renderedCellValue ? moment(renderedCellValue).locale("fa").format("HH:mm | YYYY/MM/DD") : "-"} {renderedCellValue ? moment(renderedCellValue).locale("fa").format("HH:mm | YYYY/MM/DD") : "-"}

3
src/components/dashboard/carDetails/CarDetailsContent.jsx
View File

@@ -63,7 +63,6 @@ const CarDetailsContent = ({ setOpenCarDialog }) => {
const handleSubmit = async (values, props) => { const handleSubmit = async (values, props) => {
props.setSubmitting(true); props.setSubmitting(true);
setOpenCarDetailContent(true); setOpenCarDetailContent(true);
console.log(values);
}; };
const formik = useFormik({ const formik = useFormik({
@@ -71,7 +70,7 @@ const CarDetailsContent = ({ setOpenCarDialog }) => {
validationSchema, validationSchema,
onSubmit: handleSubmit, onSubmit: handleSubmit,
}); });
console.log(formik.errors);
return ( return (
<> <>
<DialogContent> <DialogContent>

28
src/components/dashboard/inquiryPrivacy/assistant/zaminGov/TaskList.jsx
View File

@@ -14,7 +14,7 @@ const TaskList = () => {
id: "id", id: "id",
enableColumnFilter: false, enableColumnFilter: false,
datatype: "text", datatype: "text",
filterFn: "notEquals", filterMode: "notEquals",
}, },
{ {
accessorKey: "aplication_number", accessorKey: "aplication_number",
@@ -22,7 +22,7 @@ const TaskList = () => {
id: "aplication_number", id: "aplication_number",
enableColumnFilter: false, enableColumnFilter: false,
datatype: "text", datatype: "text",
filterFn: "notEquals", filterMode: "notEquals",
}, },
{ {
accessorKey: "application_date", accessorKey: "application_date",
@@ -30,7 +30,7 @@ const TaskList = () => {
id: "application_date", id: "application_date",
enableColumnFilter: false, enableColumnFilter: false,
datatype: "text", datatype: "text",
filterFn: "equals", filterMode: "equals",
}, },
{ {
accessorKey: "province", accessorKey: "province",
@@ -38,7 +38,7 @@ const TaskList = () => {
id: "province", id: "province",
enableColumnFilter: false, enableColumnFilter: false,
datatype: "text", datatype: "text",
filterFn: "equals", filterMode: "equals",
}, },
{ {
accessorKey: "township", accessorKey: "township",
@@ -46,7 +46,7 @@ const TaskList = () => {
id: "township", id: "township",
enableColumnFilter: false, enableColumnFilter: false,
datatype: "text", datatype: "text",
filterFn: "equals", filterMode: "equals",
}, },
{ {
accessorKey: "city", accessorKey: "city",
@@ -54,7 +54,7 @@ const TaskList = () => {
id: "city", id: "city",
enableColumnFilter: false, enableColumnFilter: false,
datatype: "text", datatype: "text",
filterFn: "equals", filterMode: "equals",
}, },
{ {
accessorKey: "county", accessorKey: "county",
@@ -62,7 +62,7 @@ const TaskList = () => {
id: "county", id: "county",
enableColumnFilter: false, enableColumnFilter: false,
datatype: "text", datatype: "text",
filterFn: "equals", filterMode: "equals",
}, },
{ {
accessorKey: "village", accessorKey: "village",
@@ -70,7 +70,7 @@ const TaskList = () => {
id: "village", id: "village",
enableColumnFilter: false, enableColumnFilter: false,
datatype: "text", datatype: "text",
filterFn: "equals", filterMode: "equals",
}, },
{ {
accessorKey: "land_area", accessorKey: "land_area",
@@ -78,7 +78,7 @@ const TaskList = () => {
id: "land_area", id: "land_area",
enableColumnFilter: false, enableColumnFilter: false,
datatype: "text", datatype: "text",
filterFn: "equals", filterMode: "equals",
}, },
{ {
accessorKey: "design_area", accessorKey: "design_area",
@@ -86,7 +86,7 @@ const TaskList = () => {
id: "design_area", id: "design_area",
enableColumnFilter: false, enableColumnFilter: false,
datatype: "text", datatype: "text",
filterFn: "equals", filterMode: "equals",
}, },
{ {
accessorKey: "organization", accessorKey: "organization",
@@ -94,7 +94,7 @@ const TaskList = () => {
id: "organization", id: "organization",
enableColumnFilter: false, enableColumnFilter: false,
datatype: "text", datatype: "text",
filterFn: "equals", filterMode: "equals",
}, },
{ {
accessorKey: "design_group", accessorKey: "design_group",
@@ -102,7 +102,7 @@ const TaskList = () => {
id: "design_group", id: "design_group",
enableColumnFilter: false, enableColumnFilter: false,
datatype: "text", datatype: "text",
filterFn: "equals", filterMode: "equals",
}, },
{ {
accessorKey: "design_title", accessorKey: "design_title",
@@ -110,7 +110,7 @@ const TaskList = () => {
id: "design_title", id: "design_title",
enableColumnFilter: false, enableColumnFilter: false,
datatype: "text", datatype: "text",
filterFn: "equals", filterMode: "equals",
}, },
{ {
accessorKey: "state", accessorKey: "state",
@@ -118,7 +118,7 @@ const TaskList = () => {
id: "state", id: "state",
enableColumnFilter: false, enableColumnFilter: false,
datatype: "text", datatype: "text",
filterFn: "equals", filterMode: "equals",
}, },
], ],
[] []

28
src/components/dashboard/inquiryPrivacy/cityAdmin/zaminGov/TaskList.jsx
View File

@@ -14,7 +14,7 @@ const TaskList = () => {
id: "id", id: "id",
enableColumnFilter: false, enableColumnFilter: false,
datatype: "text", datatype: "text",
filterFn: "notEquals", filterMode: "notEquals",
}, },
{ {
accessorKey: "aplication_number", accessorKey: "aplication_number",
@@ -22,7 +22,7 @@ const TaskList = () => {
id: "aplication_number", id: "aplication_number",
enableColumnFilter: false, enableColumnFilter: false,
datatype: "text", datatype: "text",
filterFn: "notEquals", filterMode: "notEquals",
}, },
{ {
accessorKey: "application_date", accessorKey: "application_date",
@@ -30,7 +30,7 @@ const TaskList = () => {
id: "application_date", id: "application_date",
enableColumnFilter: false, enableColumnFilter: false,
datatype: "text", datatype: "text",
filterFn: "equals", filterMode: "equals",
}, },
{ {
accessorKey: "province", accessorKey: "province",
@@ -38,7 +38,7 @@ const TaskList = () => {
id: "province", id: "province",
enableColumnFilter: false, enableColumnFilter: false,
datatype: "text", datatype: "text",
filterFn: "equals", filterMode: "equals",
}, },
{ {
accessorKey: "township", accessorKey: "township",
@@ -46,7 +46,7 @@ const TaskList = () => {
id: "township", id: "township",
enableColumnFilter: false, enableColumnFilter: false,
datatype: "text", datatype: "text",
filterFn: "equals", filterMode: "equals",
}, },
{ {
accessorKey: "city", accessorKey: "city",
@@ -54,7 +54,7 @@ const TaskList = () => {
id: "city", id: "city",
enableColumnFilter: false, enableColumnFilter: false,
datatype: "text", datatype: "text",
filterFn: "equals", filterMode: "equals",
}, },
{ {
accessorKey: "county", accessorKey: "county",
@@ -62,7 +62,7 @@ const TaskList = () => {
id: "county", id: "county",
enableColumnFilter: false, enableColumnFilter: false,
datatype: "text", datatype: "text",
filterFn: "equals", filterMode: "equals",
}, },
{ {
accessorKey: "village", accessorKey: "village",
@@ -70,7 +70,7 @@ const TaskList = () => {
id: "village", id: "village",
enableColumnFilter: false, enableColumnFilter: false,
datatype: "text", datatype: "text",
filterFn: "equals", filterMode: "equals",
}, },
{ {
accessorKey: "land_area", accessorKey: "land_area",
@@ -78,7 +78,7 @@ const TaskList = () => {
id: "land_area", id: "land_area",
enableColumnFilter: false, enableColumnFilter: false,
datatype: "text", datatype: "text",
filterFn: "equals", filterMode: "equals",
}, },
{ {
accessorKey: "design_area", accessorKey: "design_area",
@@ -86,7 +86,7 @@ const TaskList = () => {
id: "design_area", id: "design_area",
enableColumnFilter: false, enableColumnFilter: false,
datatype: "text", datatype: "text",
filterFn: "equals", filterMode: "equals",
}, },
{ {
accessorKey: "organization", accessorKey: "organization",
@@ -94,7 +94,7 @@ const TaskList = () => {
id: "organization", id: "organization",
enableColumnFilter: false, enableColumnFilter: false,
datatype: "text", datatype: "text",
filterFn: "equals", filterMode: "equals",
}, },
{ {
accessorKey: "design_group", accessorKey: "design_group",
@@ -102,7 +102,7 @@ const TaskList = () => {
id: "design_group", id: "design_group",
enableColumnFilter: false, enableColumnFilter: false,
datatype: "text", datatype: "text",
filterFn: "equals", filterMode: "equals",
}, },
{ {
accessorKey: "design_title", accessorKey: "design_title",
@@ -110,7 +110,7 @@ const TaskList = () => {
id: "design_title", id: "design_title",
enableColumnFilter: false, enableColumnFilter: false,
datatype: "text", datatype: "text",
filterFn: "equals", filterMode: "equals",
}, },
{ {
accessorKey: "state", accessorKey: "state",
@@ -118,7 +118,7 @@ const TaskList = () => {
id: "state", id: "state",
enableColumnFilter: false, enableColumnFilter: false,
datatype: "text", datatype: "text",
filterFn: "equals", filterMode: "equals",
}, },
], ],
[] []

28
src/components/dashboard/inquiryPrivacy/generalManager/zaminGov/TaskList.jsx
View File

@@ -14,7 +14,7 @@ const TaskList = () => {
id: "id", id: "id",
enableColumnFilter: false, enableColumnFilter: false,
datatype: "text", datatype: "text",
filterFn: "notEquals", filterMode: "notEquals",
}, },
{ {
accessorKey: "aplication_number", accessorKey: "aplication_number",
@@ -22,7 +22,7 @@ const TaskList = () => {
id: "aplication_number", id: "aplication_number",
enableColumnFilter: false, enableColumnFilter: false,
datatype: "text", datatype: "text",
filterFn: "notEquals", filterMode: "notEquals",
}, },
{ {
accessorKey: "application_date", accessorKey: "application_date",
@@ -30,7 +30,7 @@ const TaskList = () => {
id: "application_date", id: "application_date",
enableColumnFilter: false, enableColumnFilter: false,
datatype: "text", datatype: "text",
filterFn: "equals", filterMode: "equals",
}, },
{ {
accessorKey: "province", accessorKey: "province",
@@ -38,7 +38,7 @@ const TaskList = () => {
id: "province", id: "province",
enableColumnFilter: false, enableColumnFilter: false,
datatype: "text", datatype: "text",
filterFn: "equals", filterMode: "equals",
}, },
{ {
accessorKey: "township", accessorKey: "township",
@@ -46,7 +46,7 @@ const TaskList = () => {
id: "township", id: "township",
enableColumnFilter: false, enableColumnFilter: false,
datatype: "text", datatype: "text",
filterFn: "equals", filterMode: "equals",
}, },
{ {
accessorKey: "city", accessorKey: "city",
@@ -54,7 +54,7 @@ const TaskList = () => {
id: "city", id: "city",
enableColumnFilter: false, enableColumnFilter: false,
datatype: "text", datatype: "text",
filterFn: "equals", filterMode: "equals",
}, },
{ {
accessorKey: "county", accessorKey: "county",
@@ -62,7 +62,7 @@ const TaskList = () => {
id: "county", id: "county",
enableColumnFilter: false, enableColumnFilter: false,
datatype: "text", datatype: "text",
filterFn: "equals", filterMode: "equals",
}, },
{ {
accessorKey: "village", accessorKey: "village",
@@ -70,7 +70,7 @@ const TaskList = () => {
id: "village", id: "village",
enableColumnFilter: false, enableColumnFilter: false,
datatype: "text", datatype: "text",
filterFn: "equals", filterMode: "equals",
}, },
{ {
accessorKey: "land_area", accessorKey: "land_area",
@@ -78,7 +78,7 @@ const TaskList = () => {
id: "land_area", id: "land_area",
enableColumnFilter: false, enableColumnFilter: false,
datatype: "text", datatype: "text",
filterFn: "equals", filterMode: "equals",
}, },
{ {
accessorKey: "design_area", accessorKey: "design_area",
@@ -86,7 +86,7 @@ const TaskList = () => {
id: "design_area", id: "design_area",
enableColumnFilter: false, enableColumnFilter: false,
datatype: "text", datatype: "text",
filterFn: "equals", filterMode: "equals",
}, },
{ {
accessorKey: "organization", accessorKey: "organization",
@@ -94,7 +94,7 @@ const TaskList = () => {
id: "organization", id: "organization",
enableColumnFilter: false, enableColumnFilter: false,
datatype: "text", datatype: "text",
filterFn: "equals", filterMode: "equals",
}, },
{ {
accessorKey: "design_group", accessorKey: "design_group",
@@ -102,7 +102,7 @@ const TaskList = () => {
id: "design_group", id: "design_group",
enableColumnFilter: false, enableColumnFilter: false,
datatype: "text", datatype: "text",
filterFn: "equals", filterMode: "equals",
}, },
{ {
accessorKey: "design_title", accessorKey: "design_title",
@@ -110,7 +110,7 @@ const TaskList = () => {
id: "design_title", id: "design_title",
enableColumnFilter: false, enableColumnFilter: false,
datatype: "text", datatype: "text",
filterFn: "equals", filterMode: "equals",
}, },
{ {
accessorKey: "state", accessorKey: "state",
@@ -118,7 +118,7 @@ const TaskList = () => {
id: "state", id: "state",
enableColumnFilter: false, enableColumnFilter: false,
datatype: "text", datatype: "text",
filterFn: "equals", filterMode: "equals",
}, },
], ],
[] []

28
src/components/dashboard/inquiryPrivacy/provinceAdmin/zaminGov/TaskList.jsx
View File

@@ -14,7 +14,7 @@ const TaskList = () => {
id: "id", id: "id",
enableColumnFilter: false, enableColumnFilter: false,
datatype: "text", datatype: "text",
filterFn: "notEquals", filterMode: "notEquals",
}, },
{ {
accessorKey: "aplication_number", accessorKey: "aplication_number",
@@ -22,7 +22,7 @@ const TaskList = () => {
id: "aplication_number", id: "aplication_number",
enableColumnFilter: false, enableColumnFilter: false,
datatype: "text", datatype: "text",
filterFn: "notEquals", filterMode: "notEquals",
}, },
{ {
accessorKey: "application_date", accessorKey: "application_date",
@@ -30,7 +30,7 @@ const TaskList = () => {
id: "application_date", id: "application_date",
enableColumnFilter: false, enableColumnFilter: false,
datatype: "text", datatype: "text",
filterFn: "equals", filterMode: "equals",
}, },
{ {
accessorKey: "province", accessorKey: "province",
@@ -38,7 +38,7 @@ const TaskList = () => {
id: "province", id: "province",
enableColumnFilter: false, enableColumnFilter: false,
datatype: "text", datatype: "text",
filterFn: "equals", filterMode: "equals",
}, },
{ {
accessorKey: "township", accessorKey: "township",
@@ -46,7 +46,7 @@ const TaskList = () => {
id: "township", id: "township",
enableColumnFilter: false, enableColumnFilter: false,
datatype: "text", datatype: "text",
filterFn: "equals", filterMode: "equals",
}, },
{ {
accessorKey: "city", accessorKey: "city",
@@ -54,7 +54,7 @@ const TaskList = () => {
id: "city", id: "city",
enableColumnFilter: false, enableColumnFilter: false,
datatype: "text", datatype: "text",
filterFn: "equals", filterMode: "equals",
}, },
{ {
accessorKey: "county", accessorKey: "county",
@@ -62,7 +62,7 @@ const TaskList = () => {
id: "county", id: "county",
enableColumnFilter: false, enableColumnFilter: false,
datatype: "text", datatype: "text",
filterFn: "equals", filterMode: "equals",
}, },
{ {
accessorKey: "village", accessorKey: "village",
@@ -70,7 +70,7 @@ const TaskList = () => {
id: "village", id: "village",
enableColumnFilter: false, enableColumnFilter: false,
datatype: "text", datatype: "text",
filterFn: "equals", filterMode: "equals",
}, },
{ {
accessorKey: "land_area", accessorKey: "land_area",
@@ -78,7 +78,7 @@ const TaskList = () => {
id: "land_area", id: "land_area",
enableColumnFilter: false, enableColumnFilter: false,
datatype: "text", datatype: "text",
filterFn: "equals", filterMode: "equals",
}, },
{ {
accessorKey: "design_area", accessorKey: "design_area",
@@ -86,7 +86,7 @@ const TaskList = () => {
id: "design_area", id: "design_area",
enableColumnFilter: false, enableColumnFilter: false,
datatype: "text", datatype: "text",
filterFn: "equals", filterMode: "equals",
}, },
{ {
accessorKey: "organization", accessorKey: "organization",
@@ -94,7 +94,7 @@ const TaskList = () => {
id: "organization", id: "organization",
enableColumnFilter: false, enableColumnFilter: false,
datatype: "text", datatype: "text",
filterFn: "equals", filterMode: "equals",
}, },
{ {
accessorKey: "design_group", accessorKey: "design_group",
@@ -102,7 +102,7 @@ const TaskList = () => {
id: "design_group", id: "design_group",
enableColumnFilter: false, enableColumnFilter: false,
datatype: "text", datatype: "text",
filterFn: "equals", filterMode: "equals",
}, },
{ {
accessorKey: "design_title", accessorKey: "design_title",
@@ -110,7 +110,7 @@ const TaskList = () => {
id: "design_title", id: "design_title",
enableColumnFilter: false, enableColumnFilter: false,
datatype: "text", datatype: "text",
filterFn: "equals", filterMode: "equals",
}, },
{ {
accessorKey: "state", accessorKey: "state",
@@ -118,7 +118,7 @@ const TaskList = () => {
id: "state", id: "state",
enableColumnFilter: false, enableColumnFilter: false,
datatype: "text", datatype: "text",
filterFn: "equals", filterMode: "equals",
}, },
], ],
[] []

14
src/components/dashboard/roadPatrols/operator/OperatorList.jsx
View File

@@ -16,7 +16,7 @@ const OperatorList = () => {
id: "id", id: "id",
enableColumnFilter: true, enableColumnFilter: true,
datatype: "text", datatype: "text",
filterFn: "equals", filterMode: "equals",
columnFilterModeOptions: ["equals", "contains"], columnFilterModeOptions: ["equals", "contains"],
}, },
{ {
@@ -25,7 +25,7 @@ const OperatorList = () => {
id: "operator_name", id: "operator_name",
enableColumnFilter: true, enableColumnFilter: true,
datatype: "text", datatype: "text",
filterFn: "equals", filterMode: "equals",
columnFilterModeOptions: ["equals", "contains"], columnFilterModeOptions: ["equals", "contains"],
}, },
{ {
@@ -34,7 +34,7 @@ const OperatorList = () => {
id: "phone_number", id: "phone_number",
enableColumnFilter: true, enableColumnFilter: true,
datatype: "text", datatype: "text",
filterFn: "equals", filterMode: "equals",
columnFilterModeOptions: ["equals", "contains"], columnFilterModeOptions: ["equals", "contains"],
}, },
{ {
@@ -43,7 +43,7 @@ const OperatorList = () => {
id: "car_id", id: "car_id",
enableColumnFilter: true, enableColumnFilter: true,
datatype: "text", datatype: "text",
filterFn: "equals", filterMode: "equals",
columnFilterModeOptions: ["equals", "contains"], columnFilterModeOptions: ["equals", "contains"],
}, },
{ {
@@ -52,7 +52,7 @@ const OperatorList = () => {
id: "start_date", id: "start_date",
enableColumnFilter: true, enableColumnFilter: true,
datatype: "date", datatype: "date",
filterFn: "equals", filterMode: "equals",
columnFilterModeOptions: ["equals", "contains"], columnFilterModeOptions: ["equals", "contains"],
Cell: ({ renderedCellValue }) => ( Cell: ({ renderedCellValue }) => (
<Typography variant="body2"> <Typography variant="body2">
@@ -66,7 +66,7 @@ const OperatorList = () => {
id: "end_date", id: "end_date",
enableColumnFilter: true, enableColumnFilter: true,
datatype: "date", datatype: "date",
filterFn: "equals", filterMode: "equals",
columnFilterModeOptions: ["equals", "contains"], columnFilterModeOptions: ["equals", "contains"],
Cell: ({ renderedCellValue }) => ( Cell: ({ renderedCellValue }) => (
<Typography variant="body2"> <Typography variant="body2">
@@ -80,7 +80,7 @@ const OperatorList = () => {
id: "register_date", id: "register_date",
enableColumnFilter: true, enableColumnFilter: true,
datatype: "date", datatype: "date",
filterFn: "equals", filterMode: "equals",
columnFilterModeOptions: ["equals", "contains"], columnFilterModeOptions: ["equals", "contains"],
Cell: ({ renderedCellValue }) => ( Cell: ({ renderedCellValue }) => (
<Typography variant="body2"> <Typography variant="body2">

18
src/components/dashboard/roadPatrols/supervisor/SupervisorList.jsx
View File

@@ -19,7 +19,7 @@ const OperatorList = () => {
id: "id", id: "id",
enableColumnFilter: true, enableColumnFilter: true,
datatype: "text", datatype: "text",
filterFn: "equals", filterMode: "equals",
columnFilterModeOptions: ["equals", "contains"], columnFilterModeOptions: ["equals", "contains"],
}, },
{ {
@@ -28,7 +28,7 @@ const OperatorList = () => {
id: "province", id: "province",
enableColumnFilter: true, enableColumnFilter: true,
datatype: "numeric", datatype: "numeric",
filterFn: "equals", filterMode: "equals",
columnSelectOption: () => { columnSelectOption: () => {
if (loadingProvinces) { if (loadingProvinces) {
return [{ value: "", label: "در حال بارگذاری..." }]; return [{ value: "", label: "در حال بارگذاری..." }];
@@ -50,7 +50,7 @@ const OperatorList = () => {
id: "office", id: "office",
enableColumnFilter: true, enableColumnFilter: true,
datatype: "numeric", datatype: "numeric",
filterFn: "equals", filterMode: "equals",
dependencyId: "province", dependencyId: "province",
columnSelectOption: (dependencyField) => { columnSelectOption: (dependencyField) => {
if (dependencyField.value === "") { if (dependencyField.value === "") {
@@ -66,7 +66,7 @@ const OperatorList = () => {
id: "operator_name", id: "operator_name",
enableColumnFilter: true, enableColumnFilter: true,
datatype: "text", datatype: "text",
filterFn: "equals", filterMode: "equals",
columnFilterModeOptions: ["equals", "contains"], columnFilterModeOptions: ["equals", "contains"],
}, },
{ {
@@ -75,7 +75,7 @@ const OperatorList = () => {
id: "phone_number", id: "phone_number",
enableColumnFilter: true, enableColumnFilter: true,
datatype: "text", datatype: "text",
filterFn: "equals", filterMode: "equals",
columnFilterModeOptions: ["equals", "contains"], columnFilterModeOptions: ["equals", "contains"],
}, },
{ {
@@ -84,7 +84,7 @@ const OperatorList = () => {
id: "car_id", id: "car_id",
enableColumnFilter: true, enableColumnFilter: true,
datatype: "text", datatype: "text",
filterFn: "equals", filterMode: "equals",
columnFilterModeOptions: ["equals", "contains"], columnFilterModeOptions: ["equals", "contains"],
}, },
{ {
@@ -93,7 +93,7 @@ const OperatorList = () => {
id: "start_date", id: "start_date",
enableColumnFilter: true, enableColumnFilter: true,
datatype: "date", datatype: "date",
filterFn: "equals", filterMode: "equals",
columnFilterModeOptions: ["equals", "contains"], columnFilterModeOptions: ["equals", "contains"],
Cell: ({ renderedCellValue }) => ( Cell: ({ renderedCellValue }) => (
<Typography variant="body2"> <Typography variant="body2">
@@ -107,7 +107,7 @@ const OperatorList = () => {
id: "end_date", id: "end_date",
enableColumnFilter: true, enableColumnFilter: true,
datatype: "date", datatype: "date",
filterFn: "equals", filterMode: "equals",
columnFilterModeOptions: ["equals", "contains"], columnFilterModeOptions: ["equals", "contains"],
Cell: ({ renderedCellValue }) => ( Cell: ({ renderedCellValue }) => (
<Typography variant="body2"> <Typography variant="body2">
@@ -121,7 +121,7 @@ const OperatorList = () => {
id: "register_date", id: "register_date",
enableColumnFilter: true, enableColumnFilter: true,
datatype: "date", datatype: "date",
filterFn: "equals", filterMode: "equals",
columnFilterModeOptions: ["equals", "contains"], columnFilterModeOptions: ["equals", "contains"],
Cell: ({ renderedCellValue }) => ( Cell: ({ renderedCellValue }) => (
<Typography variant="body2"> <Typography variant="body2">

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

@@ -39,7 +39,13 @@ const DataTable_Main = (props) => {
} }
return value === "" || value === null || value === undefined; return value === "" || value === null || value === undefined;
}; };
const filteredFilterData = Object.values(filterData).filter((filter) => !isValueEmpty(filter.value));
const filteredFilterData = Object.values(filterData)
.filter((filter) => !isValueEmpty(filter.value))
.map(({ filterMode, ...rest }) => ({
...rest,
fn: filterMode,
}));
const params = new URLSearchParams(); const params = new URLSearchParams();
params.set("start", `${pagination.pageIndex * pagination.pageSize}`); params.set("start", `${pagination.pageIndex * pagination.pageSize}`);

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

@@ -1,13 +1,13 @@
"use client"; "use client";
import { Box, Button, Drawer, styled } from "@mui/material";
import { Form, Formik, getIn } from "formik";
import useTableSetting from "@/lib/hooks/useTableSetting";
import { useEffect, useState } from "react";
import FilterHeader from "@/core/components/DataTable/filter/FilterHeader";
import * as Yup from "yup";
import FilterBodyField from "@/core/components/DataTable/filter/FilterBodyField"; import FilterBodyField from "@/core/components/DataTable/filter/FilterBodyField";
import FilterHeader from "@/core/components/DataTable/filter/FilterHeader";
import useDataTable from "@/lib/hooks/useDataTable"; import useDataTable from "@/lib/hooks/useDataTable";
import { yupResolver } from "@hookform/resolvers/yup";
import { Box, Button, Drawer, styled } from "@mui/material";
import { useEffect, useState } from "react";
import { Controller, useForm, useWatch } from "react-hook-form";
import * as Yup from "yup";
const ScrollBox = styled(Box)({ const ScrollBox = styled(Box)({
flexGrow: 1, flexGrow: 1,
@@ -26,21 +26,15 @@ const ScrollBox = styled(Box)({
}, },
}); });
function FilterBody({ columns, drawerState, setDrawerState, user_id, page_name, table_name }) { function FilterBody({ columns, drawerState, setDrawerState }) {
const { settingStore } = useTableSetting();
const [initialValues, setInitialValues] = useState({});
const [validationSchema, setValidationSchema] = useState({});
const { filterData, setFilterData } = useDataTable(); const { filterData, setFilterData } = useDataTable();
const [validationSchema, setValidationSchema] = useState(Yup.object({}));
useEffect(() => { useEffect(() => {
setInitialValues(filterData); const schema = Yup.object(
}, [columns, settingStore, user_id, page_name, table_name, filterData]); Object.keys(filterData).reduce((acc, key) => {
const initialValue = filterData[key];
useEffect(() => { if (initialValue.filterMode === "between") {
const generatedSchema = Yup.object().shape(
Object.keys(initialValues).reduce((acc, key) => {
const initialValue = initialValues[key];
if (initialValue.filterFn === "between") {
acc[key] = Yup.object().shape({ acc[key] = Yup.object().shape({
value: Yup.array() value: Yup.array()
.of(Yup.string().nullable()) .of(Yup.string().nullable())
@@ -68,13 +62,23 @@ function FilterBody({ columns, drawerState, setDrawerState, user_id, page_name,
}, {}) }, {})
); );
setValidationSchema(generatedSchema); setValidationSchema(schema);
}, [initialValues]); }, [filterData]);
const handleSubmit = (values, { setSubmitting }) => { const {
handleSubmit,
control,
reset,
formState: { errors, isDirty, isValid },
} = useForm({
defaultValues: filterData,
resolver: yupResolver(validationSchema),
mode: "onChange",
});
const onSubmit = (data) => {
setDrawerState(false); setDrawerState(false);
setFilterData(values); setFilterData(data);
setSubmitting(false);
}; };
return ( return (
@@ -84,72 +88,64 @@ function FilterBody({ columns, drawerState, setDrawerState, user_id, page_name,
sx={{ overflowY: "hidden", display: "flex", flexDirection: "column", height: "100%", zIndex: "1300" }} sx={{ overflowY: "hidden", display: "flex", flexDirection: "column", height: "100%", zIndex: "1300" }}
> >
<FilterHeader setDrawerState={setDrawerState} /> <FilterHeader setDrawerState={setDrawerState} />
{Object.keys(initialValues).length > 0 && ( {Object.keys(filterData).length > 0 && (
<ScrollBox> <ScrollBox>
<Formik initialValues={initialValues} onSubmit={handleSubmit} validationSchema={validationSchema}> <form onSubmit={handleSubmit(onSubmit)}>
{({ <Box sx={{ px: 1, py: 2 }}>
values, {columns.map(
handleChange, (column) =>
handleBlur, column.enableColumnFilter && (
setFieldValue, <Controller
errors, key={column.id}
touched, name={`${column.id}`}
isSubmitting, control={control}
isValid, render={({ field: { value, onBlur, onChange } }) => {
dirty, let dependencyField;
resetForm, if (column.dependencyId) {
}) => ( dependencyField = useWatch({ control, name: column.dependencyId });
<Form> }
<Box sx={{ px: 1, py: 2 }}> return (
{columns.map( <FilterBodyField
(column) => column={column}
column.enableColumnFilter && ( filterParameters={value}
<FilterBodyField handleChange={onChange}
key={column.id} handleBlur={onBlur}
column={column} dependencyFieldValue={dependencyField}
filterParameters={values[column.id]} resetForm={() => reset()}
handleChange={handleChange} errors={errors}
handleBlur={handleBlur} />
dependencyFieldValue={ );
column.dependencyId ? getIn(values, column.dependencyId) : null }}
} />
setFieldValue={setFieldValue} )
resetForm={resetForm} )}
errors={errors} </Box>
touched={touched} <Box
/> sx={{
) display: "flex",
)} justifyContent: "center",
</Box> alignItems: "center",
<Box pb: 2,
sx={{ }}
display: "flex", >
justifyContent: "center", <Button
alignItems: "center", type="submit"
pb: 2, variant="contained"
}} size="large"
> disabled={!isDirty || !isValid}
<Button sx={{
type="submit" px: 8,
variant="contained" boxShadow: "rgba(0, 0, 0, 0.23) 0px 6px 6px, rgba(0, 0, 0, 0.19) 10px 0px 20px",
size="large" backgroundColor: "primary2",
disabled={isSubmitting || !isValid || !dirty} ":hover": {
sx={{ backgroundColor: "primary2",
px: 8, },
boxShadow: }}
"rgba(0, 0, 0, 0.23) 0px 6px 6px, rgba(0, 0, 0, 0.19) 10px 0px 20px", >
backgroundColor: "primary2", اعمال فیلتر
":hover": { </Button>
backgroundColor: "primary2", </Box>
}, </form>
}}
>
اعمال فیلتر
</Button>
</Box>
</Form>
)}
</Formik>
</ScrollBox> </ScrollBox>
)} )}
</Drawer> </Drawer>

119
src/core/components/DataTable/filter/FilterBodyField.jsx
View File

@@ -1,11 +1,11 @@
import { useState } from "react";
import FilterOptionList from "@/core/components/DataTable/filter/FilterOptionList"; import FilterOptionList from "@/core/components/DataTable/filter/FilterOptionList";
import CustomDatePicker from "@/core/components/DataTable/filter/fieldsType/CustomDate/CustomDatePicker";
import CustomDatePickerRange from "@/core/components/DataTable/filter/fieldsType/CustomDate/CustomDatePickerRange";
import CustomSelect from "@/core/components/DataTable/filter/fieldsType/CustomSelect"; import CustomSelect from "@/core/components/DataTable/filter/fieldsType/CustomSelect";
import CustomSelectMultiple from "@/core/components/DataTable/filter/fieldsType/CustomSelectMultiple";
import CustomTextField from "@/core/components/DataTable/filter/fieldsType/CustomTextField"; import CustomTextField from "@/core/components/DataTable/filter/fieldsType/CustomTextField";
import CustomTextFieldRange from "@/core/components/DataTable/filter/fieldsType/CustomTextFieldRange"; import CustomTextFieldRange from "@/core/components/DataTable/filter/fieldsType/CustomTextFieldRange";
import CustomDatePickerRange from "@/core/components/DataTable/filter/fieldsType/CustomDate/CustomDatePickerRange"; import { useState } from "react";
import CustomDatePicker from "@/core/components/DataTable/filter/fieldsType/CustomDate/CustomDatePicker";
import CustomSelectMultiple from "@/core/components/DataTable/filter/fieldsType/CustomSelectMultiple";
const columnFilterModeOptionFa = { const columnFilterModeOptionFa = {
equals: "برابر", equals: "برابر",
@@ -24,82 +24,71 @@ function FilterBodyField({
handleBlur, handleBlur,
dependencyFieldValue, dependencyFieldValue,
setFieldValue, setFieldValue,
errors,
touched,
resetForm, resetForm,
errors,
}) { }) {
const [anchorEl, setAnchorEl] = useState(null); const [anchorEl, setAnchorEl] = useState(null);
const defaultFilterTranslation = columnFilterModeOptionFa[filterParameters.filterFn] || filterParameters.filterFn; const defaultFilterTranslation =
columnFilterModeOptionFa[filterParameters.filterMode] || filterParameters.filterMode;
const handleOpenFilterBox = (event) => { const handleOpenFilterBox = (event) => {
setAnchorEl(event.currentTarget); setAnchorEl(event.currentTarget);
}; };
const renderField = () => {
const commonProps = {
column,
filterParameters,
defaultFilterTranslation,
handleOpenFilterBox,
dependencyFieldValue,
setFieldValue,
handleChange,
handleBlur,
errors,
};
switch (filterParameters.datatype) {
case "numeric":
if (filterParameters.filterMode === "between") {
return <CustomTextFieldRange {...commonProps} />;
}
if (filterParameters.filterMode === "equals") {
return <CustomSelect {...commonProps} />;
}
break;
case "date":
if (filterParameters.filterMode === "equals") {
return <CustomDatePicker {...commonProps} />;
}
if (filterParameters.filterMode === "between") {
return <CustomDatePickerRange {...commonProps} />;
}
break;
case "array":
if (filterParameters.filterMode === "equals") {
return <CustomSelectMultiple {...commonProps} />;
}
break;
default:
return <CustomTextField {...commonProps} />;
}
};
return ( return (
<> <>
{filterParameters.datatype === "numeric" && filterParameters.filterFn === "between" ? ( {renderField()}
<CustomTextFieldRange
column={column}
filterParameters={filterParameters}
defaultFilterTranslation={defaultFilterTranslation}
handleOpenFilterBox={handleOpenFilterBox}
handleBlur={handleBlur}
handleChange={handleChange}
errors={errors}
touched={touched}
/>
) : filterParameters.datatype === "numeric" && filterParameters.filterFn === "equals" ? (
<CustomSelect
column={column}
filterParameters={filterParameters}
dependencyFieldValue={dependencyFieldValue}
setFieldValue={setFieldValue}
defaultFilterTranslation={defaultFilterTranslation}
handleOpenFilterBox={handleOpenFilterBox}
/>
) : filterParameters.datatype === "date" && filterParameters.filterFn === "equals" ? (
<CustomDatePicker
column={column}
filterParameters={filterParameters}
setFieldValue={setFieldValue}
defaultFilterTranslation={defaultFilterTranslation}
handleOpenFilterBox={handleOpenFilterBox}
/>
) : filterParameters.datatype === "date" && filterParameters.filterFn === "between" ? (
<CustomDatePickerRange
column={column}
filterParameters={filterParameters}
setFieldValue={setFieldValue}
defaultFilterTranslation={defaultFilterTranslation}
handleOpenFilterBox={handleOpenFilterBox}
errors={errors}
touched={touched}
/>
) : filterParameters.datatype === "array" && filterParameters.filterFn === "equals" ? (
<CustomSelectMultiple
column={column}
filterParameters={filterParameters}
setFieldValue={setFieldValue}
defaultFilterTranslation={defaultFilterTranslation}
handleOpenFilterBox={handleOpenFilterBox}
/>
) : (
<CustomTextField
column={column}
filterParameters={filterParameters}
defaultFilterTranslation={defaultFilterTranslation}
handleOpenFilterBox={handleOpenFilterBox}
handleBlur={handleBlur}
handleChange={(e) => setFieldValue(`${column.id}.value`, e.target.value)}
/>
)}
{Array.isArray(column.columnFilterModeOptions) && ( {Array.isArray(column.columnFilterModeOptions) && (
<FilterOptionList <FilterOptionList
column={column} column={column}
anchorEl={anchorEl} anchorEl={anchorEl}
setAnchorEl={setAnchorEl} setAnchorEl={setAnchorEl}
filterParameters={filterParameters} filterParameters={filterParameters}
filterType={filterParameters.filterFn} filterType={filterParameters.filterMode}
setFieldValue={setFieldValue} handleChange={handleChange}
resetForm={resetForm} resetForm={resetForm}
filterOption={column.columnFilterModeOptions} filterOption={column.columnFilterModeOptions}
columnFilterModeOptionFa={columnFilterModeOptionFa} columnFilterModeOptionFa={columnFilterModeOptionFa}

11
src/core/components/DataTable/filter/FilterOptionList.jsx
View File

@@ -4,19 +4,22 @@ import { ListItem, Menu } from "@mui/material";
import { useState } from "react"; import { useState } from "react";
function FilterOptionList({ function FilterOptionList({
column,
filterType, filterType,
filterOption, filterOption,
filterParameters,
anchorEl, anchorEl,
columnFilterModeOptionFa, columnFilterModeOptionFa,
setAnchorEl, setAnchorEl,
setFieldValue, handleChange,
}) { }) {
const [selectedFilter, setSelectedFilter] = useState(filterType); const [selectedFilter, setSelectedFilter] = useState(filterType);
const handleChangeItem = (event, index) => { const handleChangeItem = (event, index) => {
setFieldValue(`${column.id}.value`, filterOption[index] === "between" ? ["", ""] : ""); handleChange({
setFieldValue(`${column.id}.filterFn`, filterOption[index]); ...filterParameters,
value: filterOption[index] === "between" ? ["", ""] : "",
filterMode: filterOption[index],
});
setSelectedFilter(filterOption[index]); setSelectedFilter(filterOption[index]);
setAnchorEl(null); setAnchorEl(null);
}; };

6
src/core/components/DataTable/filter/fieldsType/CustomDate/CustomDatePicker.jsx
View File

@@ -2,12 +2,14 @@ import React from "react";
import MuiDatePicker from "@/core/components/DataTable/filter/fieldsType/CustomDate/MuiDatePicker"; import MuiDatePicker from "@/core/components/DataTable/filter/fieldsType/CustomDate/MuiDatePicker";
import { Typography } from "@mui/material"; import { Typography } from "@mui/material";
function CustomDatePicker({ column, filterParameters, defaultFilterTranslation, setFieldValue }) { function CustomDatePicker({ column, filterParameters, defaultFilterTranslation, handleChange }) {
return ( return (
<MuiDatePicker <MuiDatePicker
name={`${column.id}.value`} name={`${column.id}.value`}
value={filterParameters.value} value={filterParameters.value}
setFieldValue={setFieldValue} setFieldValue={(name, formattedDate) => {
handleChange({ ...filterParameters, value: formattedDate });
}}
placeholder={column.header} placeholder={column.header}
helperText={ helperText={
<Typography variant="button" sx={{ color: "#155175" }}> <Typography variant="button" sx={{ color: "#155175" }}>

12
src/core/components/DataTable/filter/fieldsType/CustomDate/CustomDatePickerRange.jsx
View File

@@ -4,13 +4,15 @@ import React from "react";
import { Box, Typography } from "@mui/material"; import { Box, Typography } from "@mui/material";
import MuiDatePicker from "@/core/components/DataTable/filter/fieldsType/CustomDate/MuiDatePicker"; import MuiDatePicker from "@/core/components/DataTable/filter/fieldsType/CustomDate/MuiDatePicker";
function CustomDatePickerRange({ column, filterParameters, defaultFilterTranslation, setFieldValue, errors, touched }) { function CustomDatePickerRange({ column, filterParameters, defaultFilterTranslation, handleChange, errors }) {
return ( return (
<Box sx={{ display: "flex", gap: 1 }}> <Box sx={{ display: "flex", gap: 1 }}>
<MuiDatePicker <MuiDatePicker
name={`${column.id}.value[0]`} name={`${column.id}.value[0]`}
value={filterParameters.value[0]} value={filterParameters.value[0]}
setFieldValue={setFieldValue} setFieldValue={(name, formattedDate) => {
handleChange({ ...filterParameters, value: [formattedDate, filterParameters.value[1]] });
}}
maxDate={filterParameters.value[1]} maxDate={filterParameters.value[1]}
placeholder={`از تاریخ`} placeholder={`از تاریخ`}
helperText={ helperText={
@@ -22,10 +24,12 @@ function CustomDatePickerRange({ column, filterParameters, defaultFilterTranslat
<MuiDatePicker <MuiDatePicker
name={`${column.id}.value[1]`} name={`${column.id}.value[1]`}
value={filterParameters.value[1]} value={filterParameters.value[1]}
setFieldValue={setFieldValue} setFieldValue={(name, formattedDate) => {
handleChange({ ...filterParameters, value: [filterParameters.value[0], formattedDate] });
}}
minDate={filterParameters.value[0]} minDate={filterParameters.value[0]}
placeholder={`تا تاریخ`} placeholder={`تا تاریخ`}
helperText={errors?.[`${column.id}`]?.value ? errors?.[`${column.id}`]?.value : null} helperText={errors?.[`${column.id}`]?.value ? errors?.[`${column.id}`]?.value.message : null}
error={Boolean(errors?.[`${column.id}`]?.value)} error={Boolean(errors?.[`${column.id}`]?.value)}
/> />
</Box> </Box>

1
src/core/components/DataTable/filter/fieldsType/CustomDate/MuiDatePicker.jsx
View File

@@ -18,6 +18,7 @@ function MuiDatePicker({ value, setFieldValue, name, minDate, maxDate, helperTex
sx={{ width: "100%" }} sx={{ width: "100%" }}
id={name} id={name}
name={name} name={name}
closeOnSelect={true}
aria-describedby="component-helper-text" aria-describedby="component-helper-text"
onChange={(value) => { onChange={(value) => {
const date = new Date(value); const date = new Date(value);

23
src/core/components/DataTable/filter/fieldsType/CustomSelect.jsx
View File

@@ -1,9 +1,22 @@
"use client"; "use client";
import { FormControl, FormHelperText, InputLabel, MenuItem, OutlinedInput, Select, Typography } from "@mui/material"; import { FormControl, FormHelperText, InputLabel, MenuItem, OutlinedInput, Select, Typography } from "@mui/material";
import { useEffect, useMemo } from "react";
function CustomSelect({ column, dependencyFieldValue, filterParameters, defaultFilterTranslation, setFieldValue }) { function CustomSelect({ column, dependencyFieldValue, filterParameters, defaultFilterTranslation, handleChange }) {
const columnSelectOption = column.columnSelectOption(dependencyFieldValue); const columnSelectOption = useMemo(() => {
return column?.columnSelectOption?.(dependencyFieldValue) || [];
}, [dependencyFieldValue]);
useEffect(() => {
const isValidValue = columnSelectOption.some((option) => option.value === filterParameters.value);
if (!isValidValue) {
handleChange({ ...filterParameters, value: "" });
}
}, [columnSelectOption, filterParameters.value, handleChange]);
const isValidValue = columnSelectOption.some((option) => option.value === filterParameters.value);
const selectedValue = isValidValue ? filterParameters.value : "";
return ( return (
<FormControl fullWidth sx={{ marginY: 1 }}> <FormControl fullWidth sx={{ marginY: 1 }}>
@@ -12,11 +25,9 @@ function CustomSelect({ column, dependencyFieldValue, filterParameters, defaultF
labelId={`label${column.id}`} labelId={`label${column.id}`}
id={column.id} id={column.id}
name={`${column.id}.value`} name={`${column.id}.value`}
value={filterParameters.value} value={selectedValue}
input={<OutlinedInput label={column.header} />} input={<OutlinedInput label={column.header} />}
onChange={(e) => { onChange={(e) => handleChange({ ...filterParameters, value: e.target.value })}
setFieldValue(`${column.id}.value`, e.target.value);
}}
> >
<MenuItem value="">{column.header}</MenuItem> <MenuItem value="">{column.header}</MenuItem>
{columnSelectOption.map((option) => ( {columnSelectOption.map((option) => (

6
src/core/components/DataTable/filter/fieldsType/CustomSelectMultiple.jsx
View File

@@ -12,7 +12,7 @@ import {
Typography, Typography,
} from "@mui/material"; } from "@mui/material";
function CustomSelectMultiple({ column, filterParameters, defaultFilterTranslation, setFieldValue }) { function CustomSelectMultiple({ column, filterParameters, defaultFilterTranslation, handleChange }) {
const columnSelectOption = column.columnSelectOption; const columnSelectOption = column.columnSelectOption;
const getLabelForValue = (value) => { const getLabelForValue = (value) => {
@@ -30,9 +30,7 @@ function CustomSelectMultiple({ column, filterParameters, defaultFilterTranslati
id={column.id} id={column.id}
value={filterParameters.value} value={filterParameters.value}
multiple multiple
onChange={(e) => { onChange={(e) => handleChange({ ...filterParameters, value: e.target.value })}
setFieldValue(`${column.id}.value`, e.target.value);
}}
renderValue={(selected) => ( renderValue={(selected) => (
<Box sx={{ display: "flex", flexWrap: "wrap", gap: 0.5 }}> <Box sx={{ display: "flex", flexWrap: "wrap", gap: 0.5 }}>
{selected.map((value) => ( {selected.map((value) => (

6
src/core/components/DataTable/filter/fieldsType/CustomTextField.jsx
View File

@@ -3,11 +3,11 @@ import FilterListIcon from "@mui/icons-material/FilterList";
function CustomTextField({ function CustomTextField({
column, column,
filterParameters,
defaultFilterTranslation, defaultFilterTranslation,
filterParameters,
handleOpenFilterBox, handleOpenFilterBox,
handleChange,
handleBlur, handleBlur,
handleChange,
}) { }) {
return ( return (
<TextField <TextField
@@ -15,7 +15,7 @@ function CustomTextField({
name={column.id} name={column.id}
label={column.header} label={column.header}
value={filterParameters.value} value={filterParameters.value}
onChange={handleChange} onChange={(e) => handleChange({ ...filterParameters, value: e.target.value })}
onBlur={handleBlur} onBlur={handleBlur}
fullWidth fullWidth
helperText={ helperText={

15
src/core/components/DataTable/filter/fieldsType/CustomTextFieldRange.jsx
View File

@@ -3,20 +3,21 @@ import FilterListIcon from "@mui/icons-material/FilterList";
function CustomTextFieldRange({ function CustomTextFieldRange({
column, column,
filterParameters,
defaultFilterTranslation, defaultFilterTranslation,
handleOpenFilterBox, handleOpenFilterBox,
handleChange, handleChange,
filterParameters,
handleBlur, handleBlur,
errors, errors,
touched,
}) { }) {
return ( return (
<Box sx={{ display: "flex" }}> <Box sx={{ display: "flex" }}>
<TextField <TextField
id={`${column.id}.value[0]`} id={`${column.id}.value[0]`}
name={`${column.id}.value[0]`} name={`${column.id}.value[0]`}
onChange={handleChange} onChange={(e) =>
handleChange({ ...filterParameters, value: [e.target.value, filterParameters.value[1]] })
}
onBlur={handleBlur} onBlur={handleBlur}
label={<Typography>از {column.header}</Typography>} label={<Typography>از {column.header}</Typography>}
value={filterParameters.value[0]} value={filterParameters.value[0]}
@@ -34,10 +35,12 @@ function CustomTextFieldRange({
<TextField <TextField
id={`${column.id}.value[1]`} id={`${column.id}.value[1]`}
name={`${column.id}.value[1]`} name={`${column.id}.value[1]`}
onChange={handleChange} onChange={(e) =>
handleChange({ ...filterParameters, value: [filterParameters.value[0], e.target.value] })
}
onBlur={handleBlur} onBlur={handleBlur}
error={touched?.[`${column.id}`]?.value && Boolean(errors?.[`${column.id}`]?.value)} error={Boolean(errors?.[`${column.id}`]?.value)}
helperText={touched?.[`${column.id}`]?.value ? errors?.[`${column.id}`]?.value : null} helperText={errors?.[`${column.id}`]?.value ? errors?.[`${column.id}`]?.value.message : null}
label={<Typography>تا {column.header}</Typography>} label={<Typography>تا {column.header}</Typography>}
value={filterParameters.value[1]} value={filterParameters.value[1]}
fullWidth fullWidth

2
src/core/components/LoadingHardPage.jsx
View File

@@ -1,4 +1,4 @@
'use client' "use client";
import { Backdrop, Box, Stack, styled, Typography, useTheme } from "@mui/material"; import { Backdrop, Box, Stack, styled, Typography, useTheme } from "@mui/material";
import SvgLoading from "@/core/components/svgs/SvgLoading"; import SvgLoading from "@/core/components/svgs/SvgLoading";
import SvgError from "@/core/components/svgs/SvgError"; import SvgError from "@/core/components/svgs/SvgError";

18
src/core/components/PageLoading.jsx
View File

@@ -1,10 +1,12 @@
'use client' "use client";
import { Paper } from "@mui/material" import { Paper } from "@mui/material";
import LoadingHardPage from "./LoadingHardPage" import LoadingHardPage from "./LoadingHardPage";
const PageLoading = () => { const PageLoading = () => {
return <Paper elevation={0} sx={{ position: "relative", overflowX: "hidden", width: '100%', height: '100%' }}> return (
<LoadingHardPage width={100} height={100} loading={true} sx={{ position: 'absolute' }} /> <Paper elevation={0} sx={{ position: "relative", overflowX: "hidden", width: "100%", height: "100%" }}>
</Paper> <LoadingHardPage width={100} height={100} loading={true} sx={{ position: "absolute" }} />
} </Paper>
export default PageLoading );
};
export default PageLoading;

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

@@ -29,34 +29,27 @@ const DataTableProvider = ({ children, user_id, page_name, table_name, columns,
acc[column.id] = { acc[column.id] = {
id: column.id, id: column.id,
value: storeFilter?.value || [], value: storeFilter?.value || [],
filterFn: storeFilter?.filterFn || column._filterFn, filterMode: storeFilter?.filterMode || column.filterMode,
datatype: column.datatype, datatype: column.datatype,
}; };
} else if (column._filterFn === "between") { } else if (column.filterMode === "between") {
acc[column.id] = { acc[column.id] = {
id: column.id, id: column.id,
value: storeFilter?.value || ["", ""], value: storeFilter?.value || ["", ""],
filterFn: storeFilter?.filterFn || column._filterFn, filterMode: storeFilter?.filterMode || column.filterMode,
datatype: column.datatype, datatype: column.datatype,
}; };
} else { } else {
acc[column.id] = { acc[column.id] = {
id: column.id, id: column.id,
value: storeFilter?.value || "", value: storeFilter?.value || "",
filterFn: storeFilter?.filterFn || column._filterFn, filterMode: storeFilter?.filterMode || column.filterMode,
datatype: column.datatype, datatype: column.datatype,
}; };
} }
return acc; return acc;
}, {}); }, {});
setFilterData(filterValues);
setInitFilter(filterValues);
setSortData(settingStore?.[user_id]?.[page_name]?.[table_name]?.["sorts"] || initialSort);
setInitSort(settingStore?.[user_id]?.[page_name]?.[table_name]?.["sorts"] || initialSort);
setInitStates(true);
}, [settingStore, isInitStates]);
useEffect(() => {
const getHideValues = (columns) => { const getHideValues = (columns) => {
return columns.reduce((acc, column) => { return columns.reduce((acc, column) => {
const columnId = column.id; const columnId = column.id;
@@ -74,7 +67,12 @@ const DataTableProvider = ({ children, user_id, page_name, table_name, columns,
const hideValues = getHideValues(columns); const hideValues = getHideValues(columns);
setHideData(hideValues); setHideData(hideValues);
setInitHide(hideValues); setInitHide(hideValues);
}, [settingStore, isInitStates]); setFilterData(filterValues);
setInitFilter(filterValues);
setSortData(settingStore?.[user_id]?.[page_name]?.[table_name]?.["sorts"] || initialSort);
setInitSort(settingStore?.[user_id]?.[page_name]?.[table_name]?.["sorts"] || initialSort);
setInitStates(true);
}, [settingStore]);
useEffect(() => { useEffect(() => {
if ( if (