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(
|
const DocumentFilterPanel = forwardRef(
|
||||||
({ entityTypeId, onApply, setFilterdata }, ref) => {
|
({ entityTypeId, onApply, setFilterdata }, ref) => {
|
||||||
const [resetKey, setResetKey] = useState(0);
|
const [resetKey, setResetKey] = useState(0);
|
||||||
const { status } = useParams();
|
const { status } = useParams();
|
||||||
|
|
||||||
const { data, isError, isLoading, error } =
|
const { data, isError, isLoading, error } =
|
||||||
useDocumentFilterEntities(entityTypeId);
|
useDocumentFilterEntities(entityTypeId);
|
||||||
|
|
||||||
//changes
|
useEffect(() => {
|
||||||
|
return () => {
|
||||||
|
closePanel();
|
||||||
|
};
|
||||||
|
}, []);
|
||||||
|
|
||||||
const dynamicDocumentFilterDefaultValues = useMemo(() => {
|
//changes
|
||||||
return {
|
|
||||||
...DocumentFilterDefaultValues,
|
const dynamicDocumentFilterDefaultValues = useMemo(() => {
|
||||||
uploadedByIds: DocumentFilterDefaultValues.uploadedByIds || [],
|
return {
|
||||||
documentCategoryIds: DocumentFilterDefaultValues.documentCategoryIds || [],
|
...DocumentFilterDefaultValues,
|
||||||
documentTypeIds: DocumentFilterDefaultValues.documentTypeIds || [],
|
uploadedByIds: DocumentFilterDefaultValues.uploadedByIds || [],
|
||||||
documentTagIds: DocumentFilterDefaultValues.documentTagIds || [],
|
documentCategoryIds: DocumentFilterDefaultValues.documentCategoryIds || [],
|
||||||
startDate: DocumentFilterDefaultValues.startDate,
|
documentTypeIds: DocumentFilterDefaultValues.documentTypeIds || [],
|
||||||
endDate: DocumentFilterDefaultValues.endDate,
|
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({
|
//changes
|
||||||
resolver: zodResolver(DocumentFilterSchema),
|
useEffect(() => {
|
||||||
defaultValues: dynamicDocumentFilterDefaultValues,
|
if (data && setFilterdata) {
|
||||||
});
|
setFilterdata(data);
|
||||||
|
|
||||||
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] });
|
|
||||||
}
|
}
|
||||||
},
|
}, [data, setFilterdata]);
|
||||||
getValues: methods.getValues, // optional, to read current filter state
|
|
||||||
}));
|
|
||||||
|
|
||||||
//changes
|
const onSubmit = (values) => {
|
||||||
useEffect(() => {
|
onApply({
|
||||||
if (data && setFilterdata) {
|
...values,
|
||||||
setFilterdata(data);
|
startDate: values.startDate
|
||||||
}
|
? moment.utc(values.startDate, "DD-MM-YYYY").toISOString()
|
||||||
}, [data, setFilterdata]);
|
: null,
|
||||||
|
endDate: values.endDate
|
||||||
|
? moment.utc(values.endDate, "DD-MM-YYYY").toISOString()
|
||||||
|
: null,
|
||||||
|
});
|
||||||
|
// closePanel();
|
||||||
|
};
|
||||||
|
|
||||||
const onSubmit = (values) => {
|
const onClear = () => {
|
||||||
onApply({
|
reset(DocumentFilterDefaultValues);
|
||||||
...values,
|
setResetKey((prev) => prev + 1);
|
||||||
startDate: values.startDate
|
onApply(DocumentFilterDefaultValues);
|
||||||
? moment.utc(values.startDate, "DD-MM-YYYY").toISOString()
|
// closePanel();
|
||||||
: null,
|
};
|
||||||
endDate: values.endDate
|
|
||||||
? moment.utc(values.endDate, "DD-MM-YYYY").toISOString()
|
|
||||||
: null,
|
|
||||||
});
|
|
||||||
// closePanel();
|
|
||||||
};
|
|
||||||
|
|
||||||
const onClear = () => {
|
if (isLoading) return <div>Loading...</div>;
|
||||||
reset(DocumentFilterDefaultValues);
|
if (isError)
|
||||||
setResetKey((prev) => prev + 1);
|
return <div>Error: {error?.message || "Something went wrong!"}</div>;
|
||||||
onApply(DocumentFilterDefaultValues);
|
|
||||||
// closePanel();
|
|
||||||
};
|
|
||||||
|
|
||||||
if (isLoading) return <div>Loading...</div>;
|
const {
|
||||||
if (isError)
|
uploadedBy = [],
|
||||||
return <div>Error: {error?.message || "Something went wrong!"}</div>;
|
documentCategory = [],
|
||||||
|
documentType = [],
|
||||||
const {
|
documentTag = [],
|
||||||
uploadedBy = [],
|
} = data?.data || {};
|
||||||
documentCategory = [],
|
|
||||||
documentType = [],
|
|
||||||
documentTag = [],
|
|
||||||
} = data?.data || {};
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<FormProvider {...methods}>
|
<FormProvider {...methods}>
|
||||||
<form onSubmit={handleSubmit(onSubmit)}>
|
<form onSubmit={handleSubmit(onSubmit)}>
|
||||||
{/* Date Range Section */}
|
{/* Date Range Section */}
|
||||||
<div className="mb-2">
|
<div className="mb-2">
|
||||||
<div className="text-start d-flex align-items-center my-1">
|
<div className="text-start d-flex align-items-center my-1">
|
||||||
<label className="form-label me-2 my-0">Choose Date:</label>
|
<label className="form-label me-2 my-0">Choose Date:</label>
|
||||||
<div className="d-inline-flex border rounded-pill overflow-hidden shadow-none">
|
<div className="d-inline-flex border rounded-pill overflow-hidden shadow-none">
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
className={`btn px-2 py-1 rounded-0 text-tiny ${isUploadedAt ? "active btn-secondary text-white" : ""
|
className={`btn px-2 py-1 rounded-0 text-tiny ${isUploadedAt ? "active btn-secondary text-white" : ""
|
||||||
}`}
|
}`}
|
||||||
onClick={() => setValue("isUploadedAt", true)}
|
onClick={() => setValue("isUploadedAt", true)}
|
||||||
>
|
>
|
||||||
Uploaded On
|
Uploaded On
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
className={`btn px-2 py-1 rounded-0 text-tiny ${!isUploadedAt ? "active btn-secondary text-white" : ""
|
className={`btn px-2 py-1 rounded-0 text-tiny ${!isUploadedAt ? "active btn-secondary text-white" : ""
|
||||||
}`}
|
}`}
|
||||||
onClick={() => setValue("isUploadedAt", false)}
|
onClick={() => setValue("isUploadedAt", false)}
|
||||||
>
|
>
|
||||||
Updated On
|
Updated On
|
||||||
</button>
|
</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>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<DateRangePicker1
|
{/* Footer Buttons */}
|
||||||
placeholder="DD-MM-YYYY To DD-MM-YYYY"
|
<div className="d-flex justify-content-end py-3 gap-2">
|
||||||
startField="startDate"
|
<button
|
||||||
endField="endDate"
|
type="button"
|
||||||
defaultRange={false}
|
className="btn btn-label-secondary btn-sm"
|
||||||
resetSignal={resetKey}
|
onClick={onClear}
|
||||||
maxDate={new Date()}
|
>
|
||||||
/>
|
Clear
|
||||||
</div>
|
</button>
|
||||||
|
<button type="submit" className="btn btn-primary btn-sm">
|
||||||
{/* Dropdown Filters */}
|
Apply
|
||||||
<div className="row g-2 text-start">
|
</button>
|
||||||
<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>
|
||||||
</div>
|
</form>
|
||||||
|
</FormProvider>
|
||||||
{/* 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>
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
export default DocumentFilterPanel;
|
export default DocumentFilterPanel;
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user