From 8f770d30000010f4dd5ce25038b943324ee1da48 Mon Sep 17 00:00:00 2001 From: AmirHossein Mahmoodi Date: Wed, 18 Dec 2024 10:34:40 +0000 Subject: [PATCH] Feature/migrate formik to react hook form --- .../(withAuth)/dashboard/azmayesh/loading.jsx | 10 +- .../dashboard/azmayesh_type/loading.jsx | 10 +- src/app/(withAuth)/dashboard/loading.jsx | 10 +- .../road-patrols/operator/loading.jsx | 10 +- .../road-patrols/supervisor/loading.jsx | 10 +- .../dashboard/azmayesh/AzmayeshList.jsx | 26 +-- .../azmayeshType/AzmayeshTypeList.jsx | 6 +- .../carDetails/CarDetailsContent.jsx | 3 +- .../assistant/zaminGov/TaskList.jsx | 28 +-- .../cityAdmin/zaminGov/TaskList.jsx | 28 +-- .../generalManager/zaminGov/TaskList.jsx | 28 +-- .../provinceAdmin/zaminGov/TaskList.jsx | 28 +-- .../roadPatrols/operator/OperatorList.jsx | 14 +- .../roadPatrols/supervisor/SupervisorList.jsx | 18 +- src/core/components/DataTable/Main.js | 8 +- .../DataTable/filter/FilterBody.jsx | 172 +++++++++--------- .../DataTable/filter/FilterBodyField.jsx | 119 ++++++------ .../DataTable/filter/FilterOptionList.jsx | 11 +- .../CustomDate/CustomDatePicker.jsx | 6 +- .../CustomDate/CustomDatePickerRange.jsx | 12 +- .../fieldsType/CustomDate/MuiDatePicker.jsx | 1 + .../filter/fieldsType/CustomSelect.jsx | 23 ++- .../fieldsType/CustomSelectMultiple.jsx | 6 +- .../filter/fieldsType/CustomTextField.jsx | 6 +- .../fieldsType/CustomTextFieldRange.jsx | 15 +- src/core/components/LoadingHardPage.jsx | 2 +- src/core/components/PageLoading.jsx | 18 +- src/lib/contexts/DataTable.js | 22 +-- 28 files changed, 331 insertions(+), 319 deletions(-) diff --git a/src/app/(withAuth)/dashboard/azmayesh/loading.jsx b/src/app/(withAuth)/dashboard/azmayesh/loading.jsx index 4d80e97..4535a8d 100644 --- a/src/app/(withAuth)/dashboard/azmayesh/loading.jsx +++ b/src/app/(withAuth)/dashboard/azmayesh/loading.jsx @@ -1,7 +1,7 @@ -'use client' -import PageLoading from "@/core/components/PageLoading" +"use client"; +import PageLoading from "@/core/components/PageLoading"; const Loading = () => { - return -} -export default Loading \ No newline at end of file + return ; +}; +export default Loading; diff --git a/src/app/(withAuth)/dashboard/azmayesh_type/loading.jsx b/src/app/(withAuth)/dashboard/azmayesh_type/loading.jsx index 4d80e97..4535a8d 100644 --- a/src/app/(withAuth)/dashboard/azmayesh_type/loading.jsx +++ b/src/app/(withAuth)/dashboard/azmayesh_type/loading.jsx @@ -1,7 +1,7 @@ -'use client' -import PageLoading from "@/core/components/PageLoading" +"use client"; +import PageLoading from "@/core/components/PageLoading"; const Loading = () => { - return -} -export default Loading \ No newline at end of file + return ; +}; +export default Loading; diff --git a/src/app/(withAuth)/dashboard/loading.jsx b/src/app/(withAuth)/dashboard/loading.jsx index 4d80e97..4535a8d 100644 --- a/src/app/(withAuth)/dashboard/loading.jsx +++ b/src/app/(withAuth)/dashboard/loading.jsx @@ -1,7 +1,7 @@ -'use client' -import PageLoading from "@/core/components/PageLoading" +"use client"; +import PageLoading from "@/core/components/PageLoading"; const Loading = () => { - return -} -export default Loading \ No newline at end of file + return ; +}; +export default Loading; diff --git a/src/app/(withAuth)/dashboard/road-patrols/operator/loading.jsx b/src/app/(withAuth)/dashboard/road-patrols/operator/loading.jsx index 4d80e97..4535a8d 100644 --- a/src/app/(withAuth)/dashboard/road-patrols/operator/loading.jsx +++ b/src/app/(withAuth)/dashboard/road-patrols/operator/loading.jsx @@ -1,7 +1,7 @@ -'use client' -import PageLoading from "@/core/components/PageLoading" +"use client"; +import PageLoading from "@/core/components/PageLoading"; const Loading = () => { - return -} -export default Loading \ No newline at end of file + return ; +}; +export default Loading; diff --git a/src/app/(withAuth)/dashboard/road-patrols/supervisor/loading.jsx b/src/app/(withAuth)/dashboard/road-patrols/supervisor/loading.jsx index 4d80e97..4535a8d 100644 --- a/src/app/(withAuth)/dashboard/road-patrols/supervisor/loading.jsx +++ b/src/app/(withAuth)/dashboard/road-patrols/supervisor/loading.jsx @@ -1,7 +1,7 @@ -'use client' -import PageLoading from "@/core/components/PageLoading" +"use client"; +import PageLoading from "@/core/components/PageLoading"; const Loading = () => { - return -} -export default Loading \ No newline at end of file + return ; +}; +export default Loading; diff --git a/src/components/dashboard/azmayesh/AzmayeshList.jsx b/src/components/dashboard/azmayesh/AzmayeshList.jsx index 4bfd193..5e6d68c 100644 --- a/src/components/dashboard/azmayesh/AzmayeshList.jsx +++ b/src/components/dashboard/azmayesh/AzmayeshList.jsx @@ -18,7 +18,7 @@ const AzmayeshList = () => { id: "id", enableColumnFilter: false, datatype: "text", - filterFn: "notEquals", + filterMode: "notEquals", }, { accessorKey: "azmayesh_type_name", @@ -26,7 +26,7 @@ const AzmayeshList = () => { id: "azmayesh_type_name", enableColumnFilter: false, datatype: "text", - filterFn: "notEquals", + filterMode: "notEquals", }, { accessorKey: "project_name", @@ -34,7 +34,7 @@ const AzmayeshList = () => { id: "project_name", enableColumnFilter: false, datatype: "text", - filterFn: "equals", + filterMode: "equals", }, { accessorKey: "lat", @@ -43,7 +43,7 @@ const AzmayeshList = () => { enableColumnFilter: false, datatype: "text", enableSorting: false, - filterFn: "equals", + filterMode: "equals", Cell: ({ row }) => , }, { @@ -52,7 +52,7 @@ const AzmayeshList = () => { id: "employer", enableColumnFilter: false, datatype: "text", - filterFn: "equals", + filterMode: "equals", }, { accessorKey: "consultant", @@ -60,7 +60,7 @@ const AzmayeshList = () => { id: "consultant", enableColumnFilter: false, datatype: "text", - filterFn: "equals", + filterMode: "equals", }, { accessorKey: "contractor", @@ -68,7 +68,7 @@ const AzmayeshList = () => { id: "contractor", enableColumnFilter: false, datatype: "text", - filterFn: "equals", + filterMode: "equals", }, { accessorKey: "applicant", @@ -76,7 +76,7 @@ const AzmayeshList = () => { id: "applicant", enableColumnFilter: false, datatype: "text", - filterFn: "equals", + filterMode: "equals", }, { accessorKey: "work_number", @@ -84,7 +84,7 @@ const AzmayeshList = () => { id: "work_number", enableColumnFilter: false, datatype: "text", - filterFn: "equals", + filterMode: "equals", }, { accessorKey: "request_number", @@ -92,7 +92,7 @@ const AzmayeshList = () => { id: "request_number", enableColumnFilter: false, datatype: "text", - filterFn: "equals", + filterMode: "equals", }, { accessorKey: "request_date", @@ -100,7 +100,7 @@ const AzmayeshList = () => { id: "request_date", enableColumnFilter: false, datatype: "date", - filterFn: "equals", + filterMode: "equals", Cell: ({ renderedCellValue }) => ( {renderedCellValue ? moment(renderedCellValue).locale("fa").format("YYYY/MM/DD") : "-"} @@ -113,7 +113,7 @@ const AzmayeshList = () => { id: "report_date", enableColumnFilter: false, datatype: "date", - filterFn: "equals", + filterMode: "equals", Cell: ({ renderedCellValue }) => ( {renderedCellValue ? moment(renderedCellValue).locale("fa").format("YYYY/MM/DD") : "-"} @@ -126,7 +126,7 @@ const AzmayeshList = () => { id: "updated_at", enableColumnFilter: false, datatype: "date", - filterFn: "equals", + filterMode: "equals", Cell: ({ renderedCellValue }) => ( {renderedCellValue ? moment(renderedCellValue).locale("fa").format("HH:mm | YYYY/MM/DD") : "-"} diff --git a/src/components/dashboard/azmayeshType/AzmayeshTypeList.jsx b/src/components/dashboard/azmayeshType/AzmayeshTypeList.jsx index b4d5fbb..eef84f9 100644 --- a/src/components/dashboard/azmayeshType/AzmayeshTypeList.jsx +++ b/src/components/dashboard/azmayeshType/AzmayeshTypeList.jsx @@ -17,7 +17,7 @@ const AzmayeshTypeList = () => { id: "id", enableColumnFilter: false, datatype: "text", - filterFn: "notEquals", + filterMode: "notEquals", }, { accessorKey: "name", @@ -25,7 +25,7 @@ const AzmayeshTypeList = () => { id: "name", enableColumnFilter: false, datatype: "text", - filterFn: "notEquals", + filterMode: "notEquals", }, { accessorKey: "updated_at", @@ -33,7 +33,7 @@ const AzmayeshTypeList = () => { id: "updated_at", enableColumnFilter: false, datatype: "date", - filterFn: "equals", + filterMode: "equals", Cell: ({ renderedCellValue }) => ( {renderedCellValue ? moment(renderedCellValue).locale("fa").format("HH:mm | YYYY/MM/DD") : "-"} diff --git a/src/components/dashboard/carDetails/CarDetailsContent.jsx b/src/components/dashboard/carDetails/CarDetailsContent.jsx index 8c709cf..4d71d02 100644 --- a/src/components/dashboard/carDetails/CarDetailsContent.jsx +++ b/src/components/dashboard/carDetails/CarDetailsContent.jsx @@ -63,7 +63,6 @@ const CarDetailsContent = ({ setOpenCarDialog }) => { const handleSubmit = async (values, props) => { props.setSubmitting(true); setOpenCarDetailContent(true); - console.log(values); }; const formik = useFormik({ @@ -71,7 +70,7 @@ const CarDetailsContent = ({ setOpenCarDialog }) => { validationSchema, onSubmit: handleSubmit, }); - console.log(formik.errors); + return ( <> diff --git a/src/components/dashboard/inquiryPrivacy/assistant/zaminGov/TaskList.jsx b/src/components/dashboard/inquiryPrivacy/assistant/zaminGov/TaskList.jsx index 8f158d9..20e8300 100644 --- a/src/components/dashboard/inquiryPrivacy/assistant/zaminGov/TaskList.jsx +++ b/src/components/dashboard/inquiryPrivacy/assistant/zaminGov/TaskList.jsx @@ -14,7 +14,7 @@ const TaskList = () => { id: "id", enableColumnFilter: false, datatype: "text", - filterFn: "notEquals", + filterMode: "notEquals", }, { accessorKey: "aplication_number", @@ -22,7 +22,7 @@ const TaskList = () => { id: "aplication_number", enableColumnFilter: false, datatype: "text", - filterFn: "notEquals", + filterMode: "notEquals", }, { accessorKey: "application_date", @@ -30,7 +30,7 @@ const TaskList = () => { id: "application_date", enableColumnFilter: false, datatype: "text", - filterFn: "equals", + filterMode: "equals", }, { accessorKey: "province", @@ -38,7 +38,7 @@ const TaskList = () => { id: "province", enableColumnFilter: false, datatype: "text", - filterFn: "equals", + filterMode: "equals", }, { accessorKey: "township", @@ -46,7 +46,7 @@ const TaskList = () => { id: "township", enableColumnFilter: false, datatype: "text", - filterFn: "equals", + filterMode: "equals", }, { accessorKey: "city", @@ -54,7 +54,7 @@ const TaskList = () => { id: "city", enableColumnFilter: false, datatype: "text", - filterFn: "equals", + filterMode: "equals", }, { accessorKey: "county", @@ -62,7 +62,7 @@ const TaskList = () => { id: "county", enableColumnFilter: false, datatype: "text", - filterFn: "equals", + filterMode: "equals", }, { accessorKey: "village", @@ -70,7 +70,7 @@ const TaskList = () => { id: "village", enableColumnFilter: false, datatype: "text", - filterFn: "equals", + filterMode: "equals", }, { accessorKey: "land_area", @@ -78,7 +78,7 @@ const TaskList = () => { id: "land_area", enableColumnFilter: false, datatype: "text", - filterFn: "equals", + filterMode: "equals", }, { accessorKey: "design_area", @@ -86,7 +86,7 @@ const TaskList = () => { id: "design_area", enableColumnFilter: false, datatype: "text", - filterFn: "equals", + filterMode: "equals", }, { accessorKey: "organization", @@ -94,7 +94,7 @@ const TaskList = () => { id: "organization", enableColumnFilter: false, datatype: "text", - filterFn: "equals", + filterMode: "equals", }, { accessorKey: "design_group", @@ -102,7 +102,7 @@ const TaskList = () => { id: "design_group", enableColumnFilter: false, datatype: "text", - filterFn: "equals", + filterMode: "equals", }, { accessorKey: "design_title", @@ -110,7 +110,7 @@ const TaskList = () => { id: "design_title", enableColumnFilter: false, datatype: "text", - filterFn: "equals", + filterMode: "equals", }, { accessorKey: "state", @@ -118,7 +118,7 @@ const TaskList = () => { id: "state", enableColumnFilter: false, datatype: "text", - filterFn: "equals", + filterMode: "equals", }, ], [] diff --git a/src/components/dashboard/inquiryPrivacy/cityAdmin/zaminGov/TaskList.jsx b/src/components/dashboard/inquiryPrivacy/cityAdmin/zaminGov/TaskList.jsx index 83e2f6c..6345432 100644 --- a/src/components/dashboard/inquiryPrivacy/cityAdmin/zaminGov/TaskList.jsx +++ b/src/components/dashboard/inquiryPrivacy/cityAdmin/zaminGov/TaskList.jsx @@ -14,7 +14,7 @@ const TaskList = () => { id: "id", enableColumnFilter: false, datatype: "text", - filterFn: "notEquals", + filterMode: "notEquals", }, { accessorKey: "aplication_number", @@ -22,7 +22,7 @@ const TaskList = () => { id: "aplication_number", enableColumnFilter: false, datatype: "text", - filterFn: "notEquals", + filterMode: "notEquals", }, { accessorKey: "application_date", @@ -30,7 +30,7 @@ const TaskList = () => { id: "application_date", enableColumnFilter: false, datatype: "text", - filterFn: "equals", + filterMode: "equals", }, { accessorKey: "province", @@ -38,7 +38,7 @@ const TaskList = () => { id: "province", enableColumnFilter: false, datatype: "text", - filterFn: "equals", + filterMode: "equals", }, { accessorKey: "township", @@ -46,7 +46,7 @@ const TaskList = () => { id: "township", enableColumnFilter: false, datatype: "text", - filterFn: "equals", + filterMode: "equals", }, { accessorKey: "city", @@ -54,7 +54,7 @@ const TaskList = () => { id: "city", enableColumnFilter: false, datatype: "text", - filterFn: "equals", + filterMode: "equals", }, { accessorKey: "county", @@ -62,7 +62,7 @@ const TaskList = () => { id: "county", enableColumnFilter: false, datatype: "text", - filterFn: "equals", + filterMode: "equals", }, { accessorKey: "village", @@ -70,7 +70,7 @@ const TaskList = () => { id: "village", enableColumnFilter: false, datatype: "text", - filterFn: "equals", + filterMode: "equals", }, { accessorKey: "land_area", @@ -78,7 +78,7 @@ const TaskList = () => { id: "land_area", enableColumnFilter: false, datatype: "text", - filterFn: "equals", + filterMode: "equals", }, { accessorKey: "design_area", @@ -86,7 +86,7 @@ const TaskList = () => { id: "design_area", enableColumnFilter: false, datatype: "text", - filterFn: "equals", + filterMode: "equals", }, { accessorKey: "organization", @@ -94,7 +94,7 @@ const TaskList = () => { id: "organization", enableColumnFilter: false, datatype: "text", - filterFn: "equals", + filterMode: "equals", }, { accessorKey: "design_group", @@ -102,7 +102,7 @@ const TaskList = () => { id: "design_group", enableColumnFilter: false, datatype: "text", - filterFn: "equals", + filterMode: "equals", }, { accessorKey: "design_title", @@ -110,7 +110,7 @@ const TaskList = () => { id: "design_title", enableColumnFilter: false, datatype: "text", - filterFn: "equals", + filterMode: "equals", }, { accessorKey: "state", @@ -118,7 +118,7 @@ const TaskList = () => { id: "state", enableColumnFilter: false, datatype: "text", - filterFn: "equals", + filterMode: "equals", }, ], [] diff --git a/src/components/dashboard/inquiryPrivacy/generalManager/zaminGov/TaskList.jsx b/src/components/dashboard/inquiryPrivacy/generalManager/zaminGov/TaskList.jsx index 92f500b..dcb9084 100644 --- a/src/components/dashboard/inquiryPrivacy/generalManager/zaminGov/TaskList.jsx +++ b/src/components/dashboard/inquiryPrivacy/generalManager/zaminGov/TaskList.jsx @@ -14,7 +14,7 @@ const TaskList = () => { id: "id", enableColumnFilter: false, datatype: "text", - filterFn: "notEquals", + filterMode: "notEquals", }, { accessorKey: "aplication_number", @@ -22,7 +22,7 @@ const TaskList = () => { id: "aplication_number", enableColumnFilter: false, datatype: "text", - filterFn: "notEquals", + filterMode: "notEquals", }, { accessorKey: "application_date", @@ -30,7 +30,7 @@ const TaskList = () => { id: "application_date", enableColumnFilter: false, datatype: "text", - filterFn: "equals", + filterMode: "equals", }, { accessorKey: "province", @@ -38,7 +38,7 @@ const TaskList = () => { id: "province", enableColumnFilter: false, datatype: "text", - filterFn: "equals", + filterMode: "equals", }, { accessorKey: "township", @@ -46,7 +46,7 @@ const TaskList = () => { id: "township", enableColumnFilter: false, datatype: "text", - filterFn: "equals", + filterMode: "equals", }, { accessorKey: "city", @@ -54,7 +54,7 @@ const TaskList = () => { id: "city", enableColumnFilter: false, datatype: "text", - filterFn: "equals", + filterMode: "equals", }, { accessorKey: "county", @@ -62,7 +62,7 @@ const TaskList = () => { id: "county", enableColumnFilter: false, datatype: "text", - filterFn: "equals", + filterMode: "equals", }, { accessorKey: "village", @@ -70,7 +70,7 @@ const TaskList = () => { id: "village", enableColumnFilter: false, datatype: "text", - filterFn: "equals", + filterMode: "equals", }, { accessorKey: "land_area", @@ -78,7 +78,7 @@ const TaskList = () => { id: "land_area", enableColumnFilter: false, datatype: "text", - filterFn: "equals", + filterMode: "equals", }, { accessorKey: "design_area", @@ -86,7 +86,7 @@ const TaskList = () => { id: "design_area", enableColumnFilter: false, datatype: "text", - filterFn: "equals", + filterMode: "equals", }, { accessorKey: "organization", @@ -94,7 +94,7 @@ const TaskList = () => { id: "organization", enableColumnFilter: false, datatype: "text", - filterFn: "equals", + filterMode: "equals", }, { accessorKey: "design_group", @@ -102,7 +102,7 @@ const TaskList = () => { id: "design_group", enableColumnFilter: false, datatype: "text", - filterFn: "equals", + filterMode: "equals", }, { accessorKey: "design_title", @@ -110,7 +110,7 @@ const TaskList = () => { id: "design_title", enableColumnFilter: false, datatype: "text", - filterFn: "equals", + filterMode: "equals", }, { accessorKey: "state", @@ -118,7 +118,7 @@ const TaskList = () => { id: "state", enableColumnFilter: false, datatype: "text", - filterFn: "equals", + filterMode: "equals", }, ], [] diff --git a/src/components/dashboard/inquiryPrivacy/provinceAdmin/zaminGov/TaskList.jsx b/src/components/dashboard/inquiryPrivacy/provinceAdmin/zaminGov/TaskList.jsx index 550e152..d059812 100644 --- a/src/components/dashboard/inquiryPrivacy/provinceAdmin/zaminGov/TaskList.jsx +++ b/src/components/dashboard/inquiryPrivacy/provinceAdmin/zaminGov/TaskList.jsx @@ -14,7 +14,7 @@ const TaskList = () => { id: "id", enableColumnFilter: false, datatype: "text", - filterFn: "notEquals", + filterMode: "notEquals", }, { accessorKey: "aplication_number", @@ -22,7 +22,7 @@ const TaskList = () => { id: "aplication_number", enableColumnFilter: false, datatype: "text", - filterFn: "notEquals", + filterMode: "notEquals", }, { accessorKey: "application_date", @@ -30,7 +30,7 @@ const TaskList = () => { id: "application_date", enableColumnFilter: false, datatype: "text", - filterFn: "equals", + filterMode: "equals", }, { accessorKey: "province", @@ -38,7 +38,7 @@ const TaskList = () => { id: "province", enableColumnFilter: false, datatype: "text", - filterFn: "equals", + filterMode: "equals", }, { accessorKey: "township", @@ -46,7 +46,7 @@ const TaskList = () => { id: "township", enableColumnFilter: false, datatype: "text", - filterFn: "equals", + filterMode: "equals", }, { accessorKey: "city", @@ -54,7 +54,7 @@ const TaskList = () => { id: "city", enableColumnFilter: false, datatype: "text", - filterFn: "equals", + filterMode: "equals", }, { accessorKey: "county", @@ -62,7 +62,7 @@ const TaskList = () => { id: "county", enableColumnFilter: false, datatype: "text", - filterFn: "equals", + filterMode: "equals", }, { accessorKey: "village", @@ -70,7 +70,7 @@ const TaskList = () => { id: "village", enableColumnFilter: false, datatype: "text", - filterFn: "equals", + filterMode: "equals", }, { accessorKey: "land_area", @@ -78,7 +78,7 @@ const TaskList = () => { id: "land_area", enableColumnFilter: false, datatype: "text", - filterFn: "equals", + filterMode: "equals", }, { accessorKey: "design_area", @@ -86,7 +86,7 @@ const TaskList = () => { id: "design_area", enableColumnFilter: false, datatype: "text", - filterFn: "equals", + filterMode: "equals", }, { accessorKey: "organization", @@ -94,7 +94,7 @@ const TaskList = () => { id: "organization", enableColumnFilter: false, datatype: "text", - filterFn: "equals", + filterMode: "equals", }, { accessorKey: "design_group", @@ -102,7 +102,7 @@ const TaskList = () => { id: "design_group", enableColumnFilter: false, datatype: "text", - filterFn: "equals", + filterMode: "equals", }, { accessorKey: "design_title", @@ -110,7 +110,7 @@ const TaskList = () => { id: "design_title", enableColumnFilter: false, datatype: "text", - filterFn: "equals", + filterMode: "equals", }, { accessorKey: "state", @@ -118,7 +118,7 @@ const TaskList = () => { id: "state", enableColumnFilter: false, datatype: "text", - filterFn: "equals", + filterMode: "equals", }, ], [] diff --git a/src/components/dashboard/roadPatrols/operator/OperatorList.jsx b/src/components/dashboard/roadPatrols/operator/OperatorList.jsx index 292f197..1d7118a 100644 --- a/src/components/dashboard/roadPatrols/operator/OperatorList.jsx +++ b/src/components/dashboard/roadPatrols/operator/OperatorList.jsx @@ -16,7 +16,7 @@ const OperatorList = () => { id: "id", enableColumnFilter: true, datatype: "text", - filterFn: "equals", + filterMode: "equals", columnFilterModeOptions: ["equals", "contains"], }, { @@ -25,7 +25,7 @@ const OperatorList = () => { id: "operator_name", enableColumnFilter: true, datatype: "text", - filterFn: "equals", + filterMode: "equals", columnFilterModeOptions: ["equals", "contains"], }, { @@ -34,7 +34,7 @@ const OperatorList = () => { id: "phone_number", enableColumnFilter: true, datatype: "text", - filterFn: "equals", + filterMode: "equals", columnFilterModeOptions: ["equals", "contains"], }, { @@ -43,7 +43,7 @@ const OperatorList = () => { id: "car_id", enableColumnFilter: true, datatype: "text", - filterFn: "equals", + filterMode: "equals", columnFilterModeOptions: ["equals", "contains"], }, { @@ -52,7 +52,7 @@ const OperatorList = () => { id: "start_date", enableColumnFilter: true, datatype: "date", - filterFn: "equals", + filterMode: "equals", columnFilterModeOptions: ["equals", "contains"], Cell: ({ renderedCellValue }) => ( @@ -66,7 +66,7 @@ const OperatorList = () => { id: "end_date", enableColumnFilter: true, datatype: "date", - filterFn: "equals", + filterMode: "equals", columnFilterModeOptions: ["equals", "contains"], Cell: ({ renderedCellValue }) => ( @@ -80,7 +80,7 @@ const OperatorList = () => { id: "register_date", enableColumnFilter: true, datatype: "date", - filterFn: "equals", + filterMode: "equals", columnFilterModeOptions: ["equals", "contains"], Cell: ({ renderedCellValue }) => ( diff --git a/src/components/dashboard/roadPatrols/supervisor/SupervisorList.jsx b/src/components/dashboard/roadPatrols/supervisor/SupervisorList.jsx index d568c46..6768a91 100644 --- a/src/components/dashboard/roadPatrols/supervisor/SupervisorList.jsx +++ b/src/components/dashboard/roadPatrols/supervisor/SupervisorList.jsx @@ -19,7 +19,7 @@ const OperatorList = () => { id: "id", enableColumnFilter: true, datatype: "text", - filterFn: "equals", + filterMode: "equals", columnFilterModeOptions: ["equals", "contains"], }, { @@ -28,7 +28,7 @@ const OperatorList = () => { id: "province", enableColumnFilter: true, datatype: "numeric", - filterFn: "equals", + filterMode: "equals", columnSelectOption: () => { if (loadingProvinces) { return [{ value: "", label: "در حال بارگذاری..." }]; @@ -50,7 +50,7 @@ const OperatorList = () => { id: "office", enableColumnFilter: true, datatype: "numeric", - filterFn: "equals", + filterMode: "equals", dependencyId: "province", columnSelectOption: (dependencyField) => { if (dependencyField.value === "") { @@ -66,7 +66,7 @@ const OperatorList = () => { id: "operator_name", enableColumnFilter: true, datatype: "text", - filterFn: "equals", + filterMode: "equals", columnFilterModeOptions: ["equals", "contains"], }, { @@ -75,7 +75,7 @@ const OperatorList = () => { id: "phone_number", enableColumnFilter: true, datatype: "text", - filterFn: "equals", + filterMode: "equals", columnFilterModeOptions: ["equals", "contains"], }, { @@ -84,7 +84,7 @@ const OperatorList = () => { id: "car_id", enableColumnFilter: true, datatype: "text", - filterFn: "equals", + filterMode: "equals", columnFilterModeOptions: ["equals", "contains"], }, { @@ -93,7 +93,7 @@ const OperatorList = () => { id: "start_date", enableColumnFilter: true, datatype: "date", - filterFn: "equals", + filterMode: "equals", columnFilterModeOptions: ["equals", "contains"], Cell: ({ renderedCellValue }) => ( @@ -107,7 +107,7 @@ const OperatorList = () => { id: "end_date", enableColumnFilter: true, datatype: "date", - filterFn: "equals", + filterMode: "equals", columnFilterModeOptions: ["equals", "contains"], Cell: ({ renderedCellValue }) => ( @@ -121,7 +121,7 @@ const OperatorList = () => { id: "register_date", enableColumnFilter: true, datatype: "date", - filterFn: "equals", + filterMode: "equals", columnFilterModeOptions: ["equals", "contains"], Cell: ({ renderedCellValue }) => ( diff --git a/src/core/components/DataTable/Main.js b/src/core/components/DataTable/Main.js index cdb3671..c6d82d5 100644 --- a/src/core/components/DataTable/Main.js +++ b/src/core/components/DataTable/Main.js @@ -39,7 +39,13 @@ const DataTable_Main = (props) => { } 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(); params.set("start", `${pagination.pageIndex * pagination.pageSize}`); diff --git a/src/core/components/DataTable/filter/FilterBody.jsx b/src/core/components/DataTable/filter/FilterBody.jsx index c981b93..2bc6d9c 100644 --- a/src/core/components/DataTable/filter/FilterBody.jsx +++ b/src/core/components/DataTable/filter/FilterBody.jsx @@ -1,13 +1,13 @@ "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 FilterHeader from "@/core/components/DataTable/filter/FilterHeader"; 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)({ flexGrow: 1, @@ -26,21 +26,15 @@ const ScrollBox = styled(Box)({ }, }); -function FilterBody({ columns, drawerState, setDrawerState, user_id, page_name, table_name }) { - const { settingStore } = useTableSetting(); - const [initialValues, setInitialValues] = useState({}); - const [validationSchema, setValidationSchema] = useState({}); +function FilterBody({ columns, drawerState, setDrawerState }) { const { filterData, setFilterData } = useDataTable(); + const [validationSchema, setValidationSchema] = useState(Yup.object({})); useEffect(() => { - setInitialValues(filterData); - }, [columns, settingStore, user_id, page_name, table_name, filterData]); - - useEffect(() => { - const generatedSchema = Yup.object().shape( - Object.keys(initialValues).reduce((acc, key) => { - const initialValue = initialValues[key]; - if (initialValue.filterFn === "between") { + const schema = Yup.object( + Object.keys(filterData).reduce((acc, key) => { + const initialValue = filterData[key]; + if (initialValue.filterMode === "between") { acc[key] = Yup.object().shape({ value: Yup.array() .of(Yup.string().nullable()) @@ -68,13 +62,23 @@ function FilterBody({ columns, drawerState, setDrawerState, user_id, page_name, }, {}) ); - setValidationSchema(generatedSchema); - }, [initialValues]); + setValidationSchema(schema); + }, [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); - setFilterData(values); - setSubmitting(false); + setFilterData(data); }; 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" }} > - {Object.keys(initialValues).length > 0 && ( + {Object.keys(filterData).length > 0 && ( - - {({ - values, - handleChange, - handleBlur, - setFieldValue, - errors, - touched, - isSubmitting, - isValid, - dirty, - resetForm, - }) => ( -
- - {columns.map( - (column) => - column.enableColumnFilter && ( - - ) - )} - - - - -
- )} - +
+ + {columns.map( + (column) => + column.enableColumnFilter && ( + { + let dependencyField; + if (column.dependencyId) { + dependencyField = useWatch({ control, name: column.dependencyId }); + } + return ( + reset()} + errors={errors} + /> + ); + }} + /> + ) + )} + + + + +
)} diff --git a/src/core/components/DataTable/filter/FilterBodyField.jsx b/src/core/components/DataTable/filter/FilterBodyField.jsx index 2755326..4783f13 100644 --- a/src/core/components/DataTable/filter/FilterBodyField.jsx +++ b/src/core/components/DataTable/filter/FilterBodyField.jsx @@ -1,11 +1,11 @@ -import { useState } from "react"; 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 CustomSelectMultiple from "@/core/components/DataTable/filter/fieldsType/CustomSelectMultiple"; import CustomTextField from "@/core/components/DataTable/filter/fieldsType/CustomTextField"; import CustomTextFieldRange from "@/core/components/DataTable/filter/fieldsType/CustomTextFieldRange"; -import CustomDatePickerRange from "@/core/components/DataTable/filter/fieldsType/CustomDate/CustomDatePickerRange"; -import CustomDatePicker from "@/core/components/DataTable/filter/fieldsType/CustomDate/CustomDatePicker"; -import CustomSelectMultiple from "@/core/components/DataTable/filter/fieldsType/CustomSelectMultiple"; +import { useState } from "react"; const columnFilterModeOptionFa = { equals: "برابر", @@ -24,82 +24,71 @@ function FilterBodyField({ handleBlur, dependencyFieldValue, setFieldValue, - errors, - touched, resetForm, + errors, }) { const [anchorEl, setAnchorEl] = useState(null); - const defaultFilterTranslation = columnFilterModeOptionFa[filterParameters.filterFn] || filterParameters.filterFn; + const defaultFilterTranslation = + columnFilterModeOptionFa[filterParameters.filterMode] || filterParameters.filterMode; const handleOpenFilterBox = (event) => { 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 ; + } + if (filterParameters.filterMode === "equals") { + return ; + } + break; + + case "date": + if (filterParameters.filterMode === "equals") { + return ; + } + if (filterParameters.filterMode === "between") { + return ; + } + break; + + case "array": + if (filterParameters.filterMode === "equals") { + return ; + } + break; + + default: + return ; + } + }; + return ( <> - {filterParameters.datatype === "numeric" && filterParameters.filterFn === "between" ? ( - - ) : filterParameters.datatype === "numeric" && filterParameters.filterFn === "equals" ? ( - - ) : filterParameters.datatype === "date" && filterParameters.filterFn === "equals" ? ( - - ) : filterParameters.datatype === "date" && filterParameters.filterFn === "between" ? ( - - ) : filterParameters.datatype === "array" && filterParameters.filterFn === "equals" ? ( - - ) : ( - setFieldValue(`${column.id}.value`, e.target.value)} - /> - )} + {renderField()} {Array.isArray(column.columnFilterModeOptions) && ( { - setFieldValue(`${column.id}.value`, filterOption[index] === "between" ? ["", ""] : ""); - setFieldValue(`${column.id}.filterFn`, filterOption[index]); + handleChange({ + ...filterParameters, + value: filterOption[index] === "between" ? ["", ""] : "", + filterMode: filterOption[index], + }); setSelectedFilter(filterOption[index]); setAnchorEl(null); }; diff --git a/src/core/components/DataTable/filter/fieldsType/CustomDate/CustomDatePicker.jsx b/src/core/components/DataTable/filter/fieldsType/CustomDate/CustomDatePicker.jsx index fe5d2e0..e207cfb 100644 --- a/src/core/components/DataTable/filter/fieldsType/CustomDate/CustomDatePicker.jsx +++ b/src/core/components/DataTable/filter/fieldsType/CustomDate/CustomDatePicker.jsx @@ -2,12 +2,14 @@ import React from "react"; import MuiDatePicker from "@/core/components/DataTable/filter/fieldsType/CustomDate/MuiDatePicker"; import { Typography } from "@mui/material"; -function CustomDatePicker({ column, filterParameters, defaultFilterTranslation, setFieldValue }) { +function CustomDatePicker({ column, filterParameters, defaultFilterTranslation, handleChange }) { return ( { + handleChange({ ...filterParameters, value: formattedDate }); + }} placeholder={column.header} helperText={ diff --git a/src/core/components/DataTable/filter/fieldsType/CustomDate/CustomDatePickerRange.jsx b/src/core/components/DataTable/filter/fieldsType/CustomDate/CustomDatePickerRange.jsx index 116af77..4839f77 100644 --- a/src/core/components/DataTable/filter/fieldsType/CustomDate/CustomDatePickerRange.jsx +++ b/src/core/components/DataTable/filter/fieldsType/CustomDate/CustomDatePickerRange.jsx @@ -4,13 +4,15 @@ import React from "react"; import { Box, Typography } from "@mui/material"; 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 ( { + handleChange({ ...filterParameters, value: [formattedDate, filterParameters.value[1]] }); + }} maxDate={filterParameters.value[1]} placeholder={`از تاریخ`} helperText={ @@ -22,10 +24,12 @@ function CustomDatePickerRange({ column, filterParameters, defaultFilterTranslat { + handleChange({ ...filterParameters, value: [filterParameters.value[0], formattedDate] }); + }} minDate={filterParameters.value[0]} 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)} /> diff --git a/src/core/components/DataTable/filter/fieldsType/CustomDate/MuiDatePicker.jsx b/src/core/components/DataTable/filter/fieldsType/CustomDate/MuiDatePicker.jsx index 22eb5f9..9cfa8c5 100644 --- a/src/core/components/DataTable/filter/fieldsType/CustomDate/MuiDatePicker.jsx +++ b/src/core/components/DataTable/filter/fieldsType/CustomDate/MuiDatePicker.jsx @@ -18,6 +18,7 @@ function MuiDatePicker({ value, setFieldValue, name, minDate, maxDate, helperTex sx={{ width: "100%" }} id={name} name={name} + closeOnSelect={true} aria-describedby="component-helper-text" onChange={(value) => { const date = new Date(value); diff --git a/src/core/components/DataTable/filter/fieldsType/CustomSelect.jsx b/src/core/components/DataTable/filter/fieldsType/CustomSelect.jsx index 6f471ce..274a58b 100644 --- a/src/core/components/DataTable/filter/fieldsType/CustomSelect.jsx +++ b/src/core/components/DataTable/filter/fieldsType/CustomSelect.jsx @@ -1,9 +1,22 @@ "use client"; import { FormControl, FormHelperText, InputLabel, MenuItem, OutlinedInput, Select, Typography } from "@mui/material"; +import { useEffect, useMemo } from "react"; -function CustomSelect({ column, dependencyFieldValue, filterParameters, defaultFilterTranslation, setFieldValue }) { - const columnSelectOption = column.columnSelectOption(dependencyFieldValue); +function CustomSelect({ column, dependencyFieldValue, filterParameters, defaultFilterTranslation, handleChange }) { + 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 ( @@ -12,11 +25,9 @@ function CustomSelect({ column, dependencyFieldValue, filterParameters, defaultF labelId={`label${column.id}`} id={column.id} name={`${column.id}.value`} - value={filterParameters.value} + value={selectedValue} input={} - onChange={(e) => { - setFieldValue(`${column.id}.value`, e.target.value); - }} + onChange={(e) => handleChange({ ...filterParameters, value: e.target.value })} > {column.header} {columnSelectOption.map((option) => ( diff --git a/src/core/components/DataTable/filter/fieldsType/CustomSelectMultiple.jsx b/src/core/components/DataTable/filter/fieldsType/CustomSelectMultiple.jsx index 130f98f..22ff8aa 100644 --- a/src/core/components/DataTable/filter/fieldsType/CustomSelectMultiple.jsx +++ b/src/core/components/DataTable/filter/fieldsType/CustomSelectMultiple.jsx @@ -12,7 +12,7 @@ import { Typography, } from "@mui/material"; -function CustomSelectMultiple({ column, filterParameters, defaultFilterTranslation, setFieldValue }) { +function CustomSelectMultiple({ column, filterParameters, defaultFilterTranslation, handleChange }) { const columnSelectOption = column.columnSelectOption; const getLabelForValue = (value) => { @@ -30,9 +30,7 @@ function CustomSelectMultiple({ column, filterParameters, defaultFilterTranslati id={column.id} value={filterParameters.value} multiple - onChange={(e) => { - setFieldValue(`${column.id}.value`, e.target.value); - }} + onChange={(e) => handleChange({ ...filterParameters, value: e.target.value })} renderValue={(selected) => ( {selected.map((value) => ( diff --git a/src/core/components/DataTable/filter/fieldsType/CustomTextField.jsx b/src/core/components/DataTable/filter/fieldsType/CustomTextField.jsx index 05b44ce..619237a 100644 --- a/src/core/components/DataTable/filter/fieldsType/CustomTextField.jsx +++ b/src/core/components/DataTable/filter/fieldsType/CustomTextField.jsx @@ -3,11 +3,11 @@ import FilterListIcon from "@mui/icons-material/FilterList"; function CustomTextField({ column, - filterParameters, defaultFilterTranslation, + filterParameters, handleOpenFilterBox, - handleChange, handleBlur, + handleChange, }) { return ( handleChange({ ...filterParameters, value: e.target.value })} onBlur={handleBlur} fullWidth helperText={ diff --git a/src/core/components/DataTable/filter/fieldsType/CustomTextFieldRange.jsx b/src/core/components/DataTable/filter/fieldsType/CustomTextFieldRange.jsx index fea4169..20afcbd 100644 --- a/src/core/components/DataTable/filter/fieldsType/CustomTextFieldRange.jsx +++ b/src/core/components/DataTable/filter/fieldsType/CustomTextFieldRange.jsx @@ -3,20 +3,21 @@ import FilterListIcon from "@mui/icons-material/FilterList"; function CustomTextFieldRange({ column, - filterParameters, defaultFilterTranslation, handleOpenFilterBox, handleChange, + filterParameters, handleBlur, errors, - touched, }) { return ( + handleChange({ ...filterParameters, value: [e.target.value, filterParameters.value[1]] }) + } onBlur={handleBlur} label={از {column.header}} value={filterParameters.value[0]} @@ -34,10 +35,12 @@ function CustomTextFieldRange({ + handleChange({ ...filterParameters, value: [filterParameters.value[0], e.target.value] }) + } onBlur={handleBlur} - error={touched?.[`${column.id}`]?.value && Boolean(errors?.[`${column.id}`]?.value)} - helperText={touched?.[`${column.id}`]?.value ? errors?.[`${column.id}`]?.value : null} + error={Boolean(errors?.[`${column.id}`]?.value)} + helperText={errors?.[`${column.id}`]?.value ? errors?.[`${column.id}`]?.value.message : null} label={تا {column.header}} value={filterParameters.value[1]} fullWidth diff --git a/src/core/components/LoadingHardPage.jsx b/src/core/components/LoadingHardPage.jsx index a4da80d..89e5f17 100644 --- a/src/core/components/LoadingHardPage.jsx +++ b/src/core/components/LoadingHardPage.jsx @@ -1,4 +1,4 @@ -'use client' +"use client"; import { Backdrop, Box, Stack, styled, Typography, useTheme } from "@mui/material"; import SvgLoading from "@/core/components/svgs/SvgLoading"; import SvgError from "@/core/components/svgs/SvgError"; diff --git a/src/core/components/PageLoading.jsx b/src/core/components/PageLoading.jsx index 757d609..c5b2159 100644 --- a/src/core/components/PageLoading.jsx +++ b/src/core/components/PageLoading.jsx @@ -1,10 +1,12 @@ -'use client' -import { Paper } from "@mui/material" -import LoadingHardPage from "./LoadingHardPage" +"use client"; +import { Paper } from "@mui/material"; +import LoadingHardPage from "./LoadingHardPage"; const PageLoading = () => { - return - - -} -export default PageLoading \ No newline at end of file + return ( + + + + ); +}; +export default PageLoading; diff --git a/src/lib/contexts/DataTable.js b/src/lib/contexts/DataTable.js index 3d69afc..dcadd83 100644 --- a/src/lib/contexts/DataTable.js +++ b/src/lib/contexts/DataTable.js @@ -29,34 +29,27 @@ const DataTableProvider = ({ children, user_id, page_name, table_name, columns, acc[column.id] = { id: column.id, value: storeFilter?.value || [], - filterFn: storeFilter?.filterFn || column._filterFn, + filterMode: storeFilter?.filterMode || column.filterMode, datatype: column.datatype, }; - } else if (column._filterFn === "between") { + } else if (column.filterMode === "between") { acc[column.id] = { id: column.id, value: storeFilter?.value || ["", ""], - filterFn: storeFilter?.filterFn || column._filterFn, + filterMode: storeFilter?.filterMode || column.filterMode, datatype: column.datatype, }; } else { acc[column.id] = { id: column.id, value: storeFilter?.value || "", - filterFn: storeFilter?.filterFn || column._filterFn, + filterMode: storeFilter?.filterMode || column.filterMode, datatype: column.datatype, }; } 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) => { return columns.reduce((acc, column) => { const columnId = column.id; @@ -74,7 +67,12 @@ const DataTableProvider = ({ children, user_id, page_name, table_name, columns, const hideValues = getHideValues(columns); setHideData(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(() => { if (