mirror of
https://gitlab.com/mbugroup/lti-web-client.git
synced 2026-05-20 13:32:00 +00:00
refactor(FE): Refactor date filter state management in UniformityTable
This commit is contained in:
@@ -249,6 +249,10 @@ const UniformityTable = () => {
|
||||
const [isSubmitted, setIsSubmitted] = useState(false);
|
||||
|
||||
// ===== FILTER STATE =====
|
||||
const [filterDateValues, setFilterDateValues] = useState({
|
||||
start_date: tableFilterState.start_date,
|
||||
end_date: tableFilterState.end_date,
|
||||
});
|
||||
const [filterLocation, setFilterLocation] = useState<OptionType | null>(null);
|
||||
const [filterProjectFlock, setFilterProjectFlock] =
|
||||
useState<OptionType | null>(null);
|
||||
@@ -343,8 +347,8 @@ const UniformityTable = () => {
|
||||
// ===== FORMIK FILTER =====
|
||||
const filterFormik = useFormik<UniformityTableFilterValues>({
|
||||
initialValues: {
|
||||
start_date: tableFilterState.start_date,
|
||||
end_date: tableFilterState.end_date,
|
||||
start_date: filterDateValues.start_date,
|
||||
end_date: filterDateValues.end_date,
|
||||
location: filterLocation,
|
||||
project_flock: filterProjectFlock,
|
||||
project_flock_kandang_id: filterProjectFlockKandangId,
|
||||
@@ -381,6 +385,13 @@ const UniformityTable = () => {
|
||||
const { formErrorList, close, handleFormSubmit } =
|
||||
useFormikErrorList(filterFormik);
|
||||
|
||||
useEffect(() => {
|
||||
setFilterDateValues({
|
||||
start_date: tableFilterState.start_date,
|
||||
end_date: tableFilterState.end_date,
|
||||
});
|
||||
}, [tableFilterState.start_date, tableFilterState.end_date]);
|
||||
|
||||
// ===== BUILD SWR KEY WITH FILTERS =====
|
||||
const uniformitySwrKey = useMemo(() => {
|
||||
const basePath = UniformityApi.basePath;
|
||||
@@ -494,6 +505,7 @@ const UniformityTable = () => {
|
||||
setFilterKandang(null);
|
||||
setFilterProjectFlockKandangId(undefined);
|
||||
setFilterErrors({});
|
||||
setFilterDateValues({ start_date: '', end_date: '' });
|
||||
|
||||
updateFilter('start_date', '');
|
||||
updateFilter('end_date', '');
|
||||
@@ -1293,7 +1305,7 @@ const UniformityTable = () => {
|
||||
<div className='flex flex-col p-4 gap-1.5'>
|
||||
{/* Rentang Waktu */}
|
||||
<div>
|
||||
<label className='flex text-xs items-center gap-2 py-2 font-semibold'>
|
||||
<label className='flex text-xs items-center gap-1 py-2 font-semibold after:content-["*"] after:text-red-500'>
|
||||
Tanggal
|
||||
</label>
|
||||
<div className='flex items-center gap-2'>
|
||||
@@ -1305,6 +1317,10 @@ const UniformityTable = () => {
|
||||
onChange={(e) => {
|
||||
const value = e.target.value;
|
||||
filterFormik.setFieldValue('start_date', value);
|
||||
setFilterDateValues((prev) => ({
|
||||
...prev,
|
||||
start_date: value,
|
||||
}));
|
||||
|
||||
if (value && filterFormik.values.end_date) {
|
||||
const startDate = new Date(value);
|
||||
@@ -1348,6 +1364,10 @@ const UniformityTable = () => {
|
||||
onChange={(e) => {
|
||||
const value = e.target.value;
|
||||
filterFormik.setFieldValue('end_date', value);
|
||||
setFilterDateValues((prev) => ({
|
||||
...prev,
|
||||
end_date: value,
|
||||
}));
|
||||
|
||||
if (value && filterFormik.values.start_date) {
|
||||
const startDateObj = new Date(
|
||||
|
||||
@@ -99,14 +99,22 @@ const UniformityDetail: React.FC<UniformityDetailProps> = ({
|
||||
setExpandedDrawerOpen(true);
|
||||
}, 0);
|
||||
}
|
||||
}, [shouldFetchDetails, uniformity_details, hasFetchedDetails]);
|
||||
}, [
|
||||
shouldFetchDetails,
|
||||
uniformity_details,
|
||||
hasFetchedDetails,
|
||||
setExpandedDrawerContent,
|
||||
setExpandedDrawerOpen,
|
||||
initialValues.info_umum,
|
||||
initialValues.id,
|
||||
]);
|
||||
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
setExpandedDrawerOpen(false);
|
||||
setExpandedDrawerContent(null);
|
||||
};
|
||||
}, []);
|
||||
}, [setExpandedDrawerOpen, setExpandedDrawerContent]);
|
||||
|
||||
const infoUmumTableData: DetailOptionType[] = useMemo(() => {
|
||||
if (!initialValues) return [];
|
||||
@@ -223,7 +231,7 @@ const UniformityDetail: React.FC<UniformityDetailProps> = ({
|
||||
},
|
||||
},
|
||||
],
|
||||
[initialValues]
|
||||
[initialValues, handleViewUniformityDetails, isLoading]
|
||||
);
|
||||
|
||||
const samplingTableData: DetailOptionType[] = useMemo(() => {
|
||||
|
||||
Reference in New Issue
Block a user