The Tenant filter does not close when navigating to another component.
This commit is contained in:
parent
73c6ccc0d6
commit
1a77cc809a
@ -1,5 +1,5 @@
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import React, { useState,useCallback } from "react";
|
||||
import React, { useState, useCallback, useEffect } from "react";
|
||||
import { FormProvider, useForm, useFormContext } from "react-hook-form";
|
||||
import { defaultFilterValues, filterSchema } from "./TenantSchema";
|
||||
import Label from "../common/Label";
|
||||
@ -8,15 +8,16 @@ import { useIndustries } from "../../hooks/useTenant";
|
||||
import { reference, TENANT_STATUS } from "../../utils/constants";
|
||||
import { DateRangePicker1 } from "../common/DateRangePicker";
|
||||
import moment from "moment";
|
||||
import { useLocation } from "react-router-dom";
|
||||
|
||||
const TenantFilterPanel = ({ onApply }) => {
|
||||
const [resetKey, setResetKey] = useState(0);
|
||||
|
||||
const TenantFilterPanel = ({onApply}) => {
|
||||
const [resetKey, setResetKey] = useState(0);
|
||||
|
||||
const methods = useForm({
|
||||
resolver: zodResolver(filterSchema),
|
||||
defaultValues: defaultFilterValues,
|
||||
});
|
||||
|
||||
|
||||
const { handleSubmit, reset } = methods;
|
||||
const { data: industries = [], isLoading } = useIndustries();
|
||||
|
||||
@ -36,6 +37,13 @@ const [resetKey, setResetKey] = useState(0);
|
||||
[onApply, handleClosePanel]
|
||||
);
|
||||
|
||||
|
||||
// ✅ Close popup when navigating to another component
|
||||
const location = useLocation();
|
||||
useEffect(() => {
|
||||
handleClosePanel();
|
||||
}, [location]);
|
||||
|
||||
const onClear = useCallback(() => {
|
||||
reset(defaultFilterValues);
|
||||
setResetKey((prev) => prev + 1); // triggers DateRangePicker reset
|
||||
@ -48,44 +56,44 @@ const [resetKey, setResetKey] = useState(0);
|
||||
|
||||
return (
|
||||
<FormProvider {...methods}>
|
||||
<form onSubmit={handleSubmit(onSubmit)}>
|
||||
<form onSubmit={handleSubmit(onSubmit)}>
|
||||
<div className="text-start mb-1">
|
||||
<div className="text-start my-2">
|
||||
<DateRangePicker1
|
||||
placeholder="DD-MM-YYYY To DD-MM-YYYY"
|
||||
startField="startDate"
|
||||
endField="endDate"
|
||||
resetSignal={resetKey}
|
||||
defaultRange={false}
|
||||
/>
|
||||
<DateRangePicker1
|
||||
placeholder="DD-MM-YYYY To DD-MM-YYYY"
|
||||
startField="startDate"
|
||||
endField="endDate"
|
||||
resetSignal={resetKey}
|
||||
defaultRange={false}
|
||||
/>
|
||||
</div>
|
||||
<div className="text-strat mb-2">
|
||||
<SelectMultiple
|
||||
name="industryIds"
|
||||
label="Industries"
|
||||
options={industries}
|
||||
labelKey="name"
|
||||
valueKey="id"
|
||||
/>
|
||||
name="industryIds"
|
||||
label="Industries"
|
||||
options={industries}
|
||||
labelKey="name"
|
||||
valueKey="id"
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="text-start mb-2">
|
||||
<SelectMultiple
|
||||
name="references"
|
||||
label="References"
|
||||
options={reference}
|
||||
labelKey="name"
|
||||
valueKey="val"
|
||||
/>
|
||||
name="references"
|
||||
label="References"
|
||||
options={reference}
|
||||
labelKey="name"
|
||||
valueKey="val"
|
||||
/>
|
||||
</div>
|
||||
<div className="text-start">
|
||||
<div className="text-start">
|
||||
<SelectMultiple
|
||||
name="tenantStatusIds"
|
||||
label="Tenant Status"
|
||||
options={TENANT_STATUS}
|
||||
labelKey="name"
|
||||
valueKey="id"
|
||||
/>
|
||||
name="tenantStatusIds"
|
||||
label="Tenant Status"
|
||||
options={TENANT_STATUS}
|
||||
labelKey="name"
|
||||
valueKey="id"
|
||||
/>
|
||||
</div>
|
||||
{/* <SelectMultiple
|
||||
name="references"
|
||||
@ -100,7 +108,7 @@ const [resetKey, setResetKey] = useState(0);
|
||||
type="button"
|
||||
className="btn btn-secondary btn-xs"
|
||||
onClick={onClear}
|
||||
|
||||
|
||||
>
|
||||
Clear
|
||||
</button>
|
||||
|
Loading…
x
Reference in New Issue
Block a user