When document filter is now auto closed at we are go to next tab or component.
This commit is contained in:
parent
096a4acfff
commit
523ef6775f
@ -13,230 +13,236 @@ import { useParams } from "react-router-dom";
|
||||
|
||||
const DocumentFilterPanel = forwardRef(
|
||||
({ entityTypeId, onApply, setFilterdata }, ref) => {
|
||||
const [resetKey, setResetKey] = useState(0);
|
||||
const { status } = useParams();
|
||||
const [resetKey, setResetKey] = useState(0);
|
||||
const { status } = useParams();
|
||||
|
||||
const { data, isError, isLoading, error } =
|
||||
useDocumentFilterEntities(entityTypeId);
|
||||
const { data, isError, isLoading, error } =
|
||||
useDocumentFilterEntities(entityTypeId);
|
||||
|
||||
//changes
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
closePanel();
|
||||
};
|
||||
}, []);
|
||||
|
||||
const dynamicDocumentFilterDefaultValues = useMemo(() => {
|
||||
return {
|
||||
...DocumentFilterDefaultValues,
|
||||
uploadedByIds: DocumentFilterDefaultValues.uploadedByIds || [],
|
||||
documentCategoryIds: DocumentFilterDefaultValues.documentCategoryIds || [],
|
||||
documentTypeIds: DocumentFilterDefaultValues.documentTypeIds || [],
|
||||
documentTagIds: DocumentFilterDefaultValues.documentTagIds || [],
|
||||
startDate: DocumentFilterDefaultValues.startDate,
|
||||
endDate: DocumentFilterDefaultValues.endDate,
|
||||
//changes
|
||||
|
||||
const dynamicDocumentFilterDefaultValues = useMemo(() => {
|
||||
return {
|
||||
...DocumentFilterDefaultValues,
|
||||
uploadedByIds: DocumentFilterDefaultValues.uploadedByIds || [],
|
||||
documentCategoryIds: DocumentFilterDefaultValues.documentCategoryIds || [],
|
||||
documentTypeIds: DocumentFilterDefaultValues.documentTypeIds || [],
|
||||
documentTagIds: DocumentFilterDefaultValues.documentTagIds || [],
|
||||
startDate: DocumentFilterDefaultValues.startDate,
|
||||
endDate: DocumentFilterDefaultValues.endDate,
|
||||
};
|
||||
|
||||
}, [status]);
|
||||
|
||||
const methods = useForm({
|
||||
resolver: zodResolver(DocumentFilterSchema),
|
||||
defaultValues: dynamicDocumentFilterDefaultValues,
|
||||
});
|
||||
|
||||
const { handleSubmit, reset, setValue, watch } = methods;
|
||||
|
||||
// Watch values from form
|
||||
const isUploadedAt = watch("isUploadedAt");
|
||||
const isVerified = watch("isVerified");
|
||||
|
||||
// Close the offcanvas (bootstrap specific)
|
||||
const closePanel = () => {
|
||||
document.querySelector(".offcanvas.show .btn-close")?.click();
|
||||
};
|
||||
|
||||
}, [status]);
|
||||
useImperativeHandle(ref, () => ({
|
||||
resetFieldValue: (name, value) => {
|
||||
if (value !== undefined) {
|
||||
setValue(name, value);
|
||||
} else {
|
||||
reset({ ...methods.getValues(), [name]: DocumentFilterDefaultValues[name] });
|
||||
}
|
||||
},
|
||||
getValues: methods.getValues, // optional, to read current filter state
|
||||
}));
|
||||
|
||||
const methods = useForm({
|
||||
resolver: zodResolver(DocumentFilterSchema),
|
||||
defaultValues: dynamicDocumentFilterDefaultValues,
|
||||
});
|
||||
|
||||
const { handleSubmit, reset, setValue, watch } = methods;
|
||||
|
||||
// Watch values from form
|
||||
const isUploadedAt = watch("isUploadedAt");
|
||||
const isVerified = watch("isVerified");
|
||||
|
||||
// Close the offcanvas (bootstrap specific)
|
||||
const closePanel = () => {
|
||||
document.querySelector(".offcanvas.show .btn-close")?.click();
|
||||
};
|
||||
|
||||
useImperativeHandle(ref, () => ({
|
||||
resetFieldValue: (name, value) => {
|
||||
if (value !== undefined) {
|
||||
setValue(name, value);
|
||||
} else {
|
||||
reset({ ...methods.getValues(), [name]: DocumentFilterDefaultValues[name] });
|
||||
//changes
|
||||
useEffect(() => {
|
||||
if (data && setFilterdata) {
|
||||
setFilterdata(data);
|
||||
}
|
||||
},
|
||||
getValues: methods.getValues, // optional, to read current filter state
|
||||
}));
|
||||
}, [data, setFilterdata]);
|
||||
|
||||
//changes
|
||||
useEffect(() => {
|
||||
if (data && setFilterdata) {
|
||||
setFilterdata(data);
|
||||
}
|
||||
}, [data, setFilterdata]);
|
||||
const onSubmit = (values) => {
|
||||
onApply({
|
||||
...values,
|
||||
startDate: values.startDate
|
||||
? moment.utc(values.startDate, "DD-MM-YYYY").toISOString()
|
||||
: null,
|
||||
endDate: values.endDate
|
||||
? moment.utc(values.endDate, "DD-MM-YYYY").toISOString()
|
||||
: null,
|
||||
});
|
||||
// closePanel();
|
||||
};
|
||||
|
||||
const onSubmit = (values) => {
|
||||
onApply({
|
||||
...values,
|
||||
startDate: values.startDate
|
||||
? moment.utc(values.startDate, "DD-MM-YYYY").toISOString()
|
||||
: null,
|
||||
endDate: values.endDate
|
||||
? moment.utc(values.endDate, "DD-MM-YYYY").toISOString()
|
||||
: null,
|
||||
});
|
||||
// closePanel();
|
||||
};
|
||||
const onClear = () => {
|
||||
reset(DocumentFilterDefaultValues);
|
||||
setResetKey((prev) => prev + 1);
|
||||
onApply(DocumentFilterDefaultValues);
|
||||
// closePanel();
|
||||
};
|
||||
|
||||
const onClear = () => {
|
||||
reset(DocumentFilterDefaultValues);
|
||||
setResetKey((prev) => prev + 1);
|
||||
onApply(DocumentFilterDefaultValues);
|
||||
// closePanel();
|
||||
};
|
||||
if (isLoading) return <div>Loading...</div>;
|
||||
if (isError)
|
||||
return <div>Error: {error?.message || "Something went wrong!"}</div>;
|
||||
|
||||
if (isLoading) return <div>Loading...</div>;
|
||||
if (isError)
|
||||
return <div>Error: {error?.message || "Something went wrong!"}</div>;
|
||||
|
||||
const {
|
||||
uploadedBy = [],
|
||||
documentCategory = [],
|
||||
documentType = [],
|
||||
documentTag = [],
|
||||
} = data?.data || {};
|
||||
const {
|
||||
uploadedBy = [],
|
||||
documentCategory = [],
|
||||
documentType = [],
|
||||
documentTag = [],
|
||||
} = data?.data || {};
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<FormProvider {...methods}>
|
||||
<form onSubmit={handleSubmit(onSubmit)}>
|
||||
{/* Date Range Section */}
|
||||
<div className="mb-2">
|
||||
<div className="text-start d-flex align-items-center my-1">
|
||||
<label className="form-label me-2 my-0">Choose Date:</label>
|
||||
<div className="d-inline-flex border rounded-pill overflow-hidden shadow-none">
|
||||
<button
|
||||
type="button"
|
||||
className={`btn px-2 py-1 rounded-0 text-tiny ${isUploadedAt ? "active btn-secondary text-white" : ""
|
||||
}`}
|
||||
onClick={() => setValue("isUploadedAt", true)}
|
||||
>
|
||||
Uploaded On
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className={`btn px-2 py-1 rounded-0 text-tiny ${!isUploadedAt ? "active btn-secondary text-white" : ""
|
||||
}`}
|
||||
onClick={() => setValue("isUploadedAt", false)}
|
||||
>
|
||||
Updated On
|
||||
</button>
|
||||
return (
|
||||
<FormProvider {...methods}>
|
||||
<form onSubmit={handleSubmit(onSubmit)}>
|
||||
{/* Date Range Section */}
|
||||
<div className="mb-2">
|
||||
<div className="text-start d-flex align-items-center my-1">
|
||||
<label className="form-label me-2 my-0">Choose Date:</label>
|
||||
<div className="d-inline-flex border rounded-pill overflow-hidden shadow-none">
|
||||
<button
|
||||
type="button"
|
||||
className={`btn px-2 py-1 rounded-0 text-tiny ${isUploadedAt ? "active btn-secondary text-white" : ""
|
||||
}`}
|
||||
onClick={() => setValue("isUploadedAt", true)}
|
||||
>
|
||||
Uploaded On
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className={`btn px-2 py-1 rounded-0 text-tiny ${!isUploadedAt ? "active btn-secondary text-white" : ""
|
||||
}`}
|
||||
onClick={() => setValue("isUploadedAt", false)}
|
||||
>
|
||||
Updated On
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<DateRangePicker1
|
||||
placeholder="DD-MM-YYYY To DD-MM-YYYY"
|
||||
startField="startDate"
|
||||
endField="endDate"
|
||||
defaultRange={false}
|
||||
resetSignal={resetKey}
|
||||
maxDate={new Date()}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Dropdown Filters */}
|
||||
<div className="row g-2 text-start">
|
||||
<SelectMultiple
|
||||
name="uploadedByIds"
|
||||
label="Uploaded By:"
|
||||
options={uploadedBy}
|
||||
labelKey="name"
|
||||
valueKey="id"
|
||||
/>
|
||||
<SelectMultiple
|
||||
name="documentCategoryIds"
|
||||
label="Document Category:"
|
||||
options={documentCategory}
|
||||
labelKey="name"
|
||||
valueKey="id"
|
||||
/>
|
||||
<SelectMultiple
|
||||
name="documentTypeIds"
|
||||
label="Document Type:"
|
||||
options={documentType}
|
||||
labelKey="name"
|
||||
valueKey="id"
|
||||
/>
|
||||
<SelectMultiple
|
||||
name="documentTagIds"
|
||||
label="Tags:"
|
||||
options={documentTag}
|
||||
labelKey="name"
|
||||
valueKey="id"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Status Filter */}
|
||||
<div className="text-start my-2">
|
||||
<label className="form-label d-block mb-2">Choose Status:</label>
|
||||
<div className="d-flex gap-4">
|
||||
<label className="switch switch-sm">
|
||||
<input
|
||||
type="radio"
|
||||
className="switch-input"
|
||||
name="isVerified"
|
||||
checked={isVerified === null}
|
||||
onChange={() => setValue("isVerified", null)}
|
||||
/>
|
||||
<span className="switch-toggle-slider">
|
||||
<span className="switch-on"></span>
|
||||
<span className="switch-off"></span>
|
||||
</span>
|
||||
<span className="switch-label">All</span>
|
||||
</label>
|
||||
|
||||
<label className="switch switch-sm">
|
||||
<input
|
||||
type="radio"
|
||||
className="switch-input"
|
||||
name="isVerified"
|
||||
checked={isVerified === true}
|
||||
onChange={() => setValue("isVerified", true)}
|
||||
/>
|
||||
<span className="switch-toggle-slider">
|
||||
<span className="switch-on"></span>
|
||||
<span className="switch-off"></span>
|
||||
</span>
|
||||
<span className="switch-label">Verified</span>
|
||||
</label>
|
||||
|
||||
<label className="switch switch-sm">
|
||||
<input
|
||||
type="radio"
|
||||
className="switch-input"
|
||||
name="isVerified"
|
||||
checked={isVerified === false}
|
||||
onChange={() => setValue("isVerified", false)}
|
||||
/>
|
||||
<span className="switch-toggle-slider">
|
||||
<span className="switch-on"></span>
|
||||
<span className="switch-off"></span>
|
||||
</span>
|
||||
<span className="switch-label">Rejected</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<DateRangePicker1
|
||||
placeholder="DD-MM-YYYY To DD-MM-YYYY"
|
||||
startField="startDate"
|
||||
endField="endDate"
|
||||
defaultRange={false}
|
||||
resetSignal={resetKey}
|
||||
maxDate={new Date()}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Dropdown Filters */}
|
||||
<div className="row g-2 text-start">
|
||||
<SelectMultiple
|
||||
name="uploadedByIds"
|
||||
label="Uploaded By:"
|
||||
options={uploadedBy}
|
||||
labelKey="name"
|
||||
valueKey="id"
|
||||
/>
|
||||
<SelectMultiple
|
||||
name="documentCategoryIds"
|
||||
label="Document Category:"
|
||||
options={documentCategory}
|
||||
labelKey="name"
|
||||
valueKey="id"
|
||||
/>
|
||||
<SelectMultiple
|
||||
name="documentTypeIds"
|
||||
label="Document Type:"
|
||||
options={documentType}
|
||||
labelKey="name"
|
||||
valueKey="id"
|
||||
/>
|
||||
<SelectMultiple
|
||||
name="documentTagIds"
|
||||
label="Tags:"
|
||||
options={documentTag}
|
||||
labelKey="name"
|
||||
valueKey="id"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Status Filter */}
|
||||
<div className="text-start my-2">
|
||||
<label className="form-label d-block mb-2">Choose Status:</label>
|
||||
<div className="d-flex gap-4">
|
||||
<label className="switch switch-sm">
|
||||
<input
|
||||
type="radio"
|
||||
className="switch-input"
|
||||
name="isVerified"
|
||||
checked={isVerified === null}
|
||||
onChange={() => setValue("isVerified", null)}
|
||||
/>
|
||||
<span className="switch-toggle-slider">
|
||||
<span className="switch-on"></span>
|
||||
<span className="switch-off"></span>
|
||||
</span>
|
||||
<span className="switch-label">All</span>
|
||||
</label>
|
||||
|
||||
<label className="switch switch-sm">
|
||||
<input
|
||||
type="radio"
|
||||
className="switch-input"
|
||||
name="isVerified"
|
||||
checked={isVerified === true}
|
||||
onChange={() => setValue("isVerified", true)}
|
||||
/>
|
||||
<span className="switch-toggle-slider">
|
||||
<span className="switch-on"></span>
|
||||
<span className="switch-off"></span>
|
||||
</span>
|
||||
<span className="switch-label">Verified</span>
|
||||
</label>
|
||||
|
||||
<label className="switch switch-sm">
|
||||
<input
|
||||
type="radio"
|
||||
className="switch-input"
|
||||
name="isVerified"
|
||||
checked={isVerified === false}
|
||||
onChange={() => setValue("isVerified", false)}
|
||||
/>
|
||||
<span className="switch-toggle-slider">
|
||||
<span className="switch-on"></span>
|
||||
<span className="switch-off"></span>
|
||||
</span>
|
||||
<span className="switch-label">Rejected</span>
|
||||
</label>
|
||||
{/* Footer Buttons */}
|
||||
<div className="d-flex justify-content-end py-3 gap-2">
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-label-secondary btn-sm"
|
||||
onClick={onClear}
|
||||
>
|
||||
Clear
|
||||
</button>
|
||||
<button type="submit" className="btn btn-primary btn-sm">
|
||||
Apply
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Footer Buttons */}
|
||||
<div className="d-flex justify-content-end py-3 gap-2">
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-label-secondary btn-sm"
|
||||
onClick={onClear}
|
||||
>
|
||||
Clear
|
||||
</button>
|
||||
<button type="submit" className="btn btn-primary btn-sm">
|
||||
Apply
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</FormProvider>
|
||||
);
|
||||
});
|
||||
</form>
|
||||
</FormProvider>
|
||||
);
|
||||
});
|
||||
|
||||
export default DocumentFilterPanel;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user