diff --git a/src/components/Tenanat/TenantFilterPanel.jsx b/src/components/Tenanat/TenantFilterPanel.jsx index 6a8ae374..11d9bf4c 100644 --- a/src/components/Tenanat/TenantFilterPanel.jsx +++ b/src/components/Tenanat/TenantFilterPanel.jsx @@ -1,5 +1,5 @@ import { zodResolver } from "@hookform/resolvers/zod"; -import React, { useState } from "react"; +import React, { useState,useCallback } from "react"; import { FormProvider, useForm, useFormContext } from "react-hook-form"; import { defaultFilterValues, filterSchema } from "./TenantSchema"; import Label from "../common/Label"; @@ -10,30 +10,44 @@ import { DateRangePicker1 } from "../common/DateRangePicker"; import moment from "moment"; const TenantFilterPanel = ({onApply}) => { - const [resetKey, setResetKey] = useState(0); - const method = useForm({ +const [resetKey, setResetKey] = useState(0); + + const methods = useForm({ resolver: zodResolver(filterSchema), defaultValues: defaultFilterValues, }); - const { control, register, handleSubmit, reset, watch } = method; - const { data, isError, isLoading } = useIndustries(); - const closePanel = () => { - document.querySelector(".offcanvas.show .btn-close")?.click(); - }; - const onSubmit = (formData) => { - onApply({ - ...formData - }) - }; - const onClear = () => { - reset(filterSchema); - setResetKey((prev) => prev + 1); + + const { handleSubmit, reset } = methods; + const { data: industries = [], isLoading } = useIndustries(); + + const handleClosePanel = useCallback(() => { + document.querySelector(".offcanvas.show .btn-close")?.click(); + }, []); + + const onSubmit = useCallback( + (formData) => { + onApply({ + ...formData, + startDate: moment.utc(formData.startDate, "DD-MM-YYYY").toISOString(), + endDate: moment.utc(formData.endDate, "DD-MM-YYYY").toISOString(), + }); + handleClosePanel(); + }, + [onApply, handleClosePanel] + ); + + const onClear = useCallback(() => { + reset(defaultFilterValues); + setResetKey((prev) => prev + 1); // triggers DateRangePicker reset + onApply(defaultFilterValues); + }, [onApply, reset]); + + if (isLoading) { + return
Loading...
; + } - closePanel(); - }; - if (isLoading) return
Loading...
; return ( - +
@@ -48,7 +62,7 @@ const TenantFilterPanel = ({onApply}) => { @@ -85,10 +99,11 @@ const TenantFilterPanel = ({onApply}) => { type="button" className="btn btn-secondary btn-xs" onClick={onClear} + > Clear -
diff --git a/src/pages/Tenant/TenantPage.jsx b/src/pages/Tenant/TenantPage.jsx index 06c7829a..3a5cbc12 100644 --- a/src/pages/Tenant/TenantPage.jsx +++ b/src/pages/Tenant/TenantPage.jsx @@ -45,16 +45,10 @@ const TenantPage = () => { }); const { reset } = methods; - - const clearFilter = () => { - setFilter(defaultFilter); - reset(); - }; useEffect(() => { setShowTrigger(true); setOffcanvasContent("Tenant Filters", ); + />); return () => { setShowTrigger(false); setOffcanvasContent("", null); diff --git a/src/utils/constants.jsx b/src/utils/constants.jsx index 59177459..bad030a3 100644 --- a/src/utils/constants.jsx +++ b/src/utils/constants.jsx @@ -78,7 +78,7 @@ export const CONSTANT_TEXT = { } export const reference = [ { val: "google", name: "Google" }, - { val: "frined", name: "Friend" }, + { val: "frineds", name: "Friends" }, { val: "advertisement", name: "Advertisement" }, { val: "root tenant", name: "Root Tenant" }, ];