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);
|
const [isSubmitted, setIsSubmitted] = useState(false);
|
||||||
|
|
||||||
// ===== FILTER STATE =====
|
// ===== FILTER STATE =====
|
||||||
|
const [filterDateValues, setFilterDateValues] = useState({
|
||||||
|
start_date: tableFilterState.start_date,
|
||||||
|
end_date: tableFilterState.end_date,
|
||||||
|
});
|
||||||
const [filterLocation, setFilterLocation] = useState<OptionType | null>(null);
|
const [filterLocation, setFilterLocation] = useState<OptionType | null>(null);
|
||||||
const [filterProjectFlock, setFilterProjectFlock] =
|
const [filterProjectFlock, setFilterProjectFlock] =
|
||||||
useState<OptionType | null>(null);
|
useState<OptionType | null>(null);
|
||||||
@@ -343,8 +347,8 @@ const UniformityTable = () => {
|
|||||||
// ===== FORMIK FILTER =====
|
// ===== FORMIK FILTER =====
|
||||||
const filterFormik = useFormik<UniformityTableFilterValues>({
|
const filterFormik = useFormik<UniformityTableFilterValues>({
|
||||||
initialValues: {
|
initialValues: {
|
||||||
start_date: tableFilterState.start_date,
|
start_date: filterDateValues.start_date,
|
||||||
end_date: tableFilterState.end_date,
|
end_date: filterDateValues.end_date,
|
||||||
location: filterLocation,
|
location: filterLocation,
|
||||||
project_flock: filterProjectFlock,
|
project_flock: filterProjectFlock,
|
||||||
project_flock_kandang_id: filterProjectFlockKandangId,
|
project_flock_kandang_id: filterProjectFlockKandangId,
|
||||||
@@ -381,6 +385,13 @@ const UniformityTable = () => {
|
|||||||
const { formErrorList, close, handleFormSubmit } =
|
const { formErrorList, close, handleFormSubmit } =
|
||||||
useFormikErrorList(filterFormik);
|
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 =====
|
// ===== BUILD SWR KEY WITH FILTERS =====
|
||||||
const uniformitySwrKey = useMemo(() => {
|
const uniformitySwrKey = useMemo(() => {
|
||||||
const basePath = UniformityApi.basePath;
|
const basePath = UniformityApi.basePath;
|
||||||
@@ -494,6 +505,7 @@ const UniformityTable = () => {
|
|||||||
setFilterKandang(null);
|
setFilterKandang(null);
|
||||||
setFilterProjectFlockKandangId(undefined);
|
setFilterProjectFlockKandangId(undefined);
|
||||||
setFilterErrors({});
|
setFilterErrors({});
|
||||||
|
setFilterDateValues({ start_date: '', end_date: '' });
|
||||||
|
|
||||||
updateFilter('start_date', '');
|
updateFilter('start_date', '');
|
||||||
updateFilter('end_date', '');
|
updateFilter('end_date', '');
|
||||||
@@ -1293,7 +1305,7 @@ const UniformityTable = () => {
|
|||||||
<div className='flex flex-col p-4 gap-1.5'>
|
<div className='flex flex-col p-4 gap-1.5'>
|
||||||
{/* Rentang Waktu */}
|
{/* Rentang Waktu */}
|
||||||
<div>
|
<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
|
Tanggal
|
||||||
</label>
|
</label>
|
||||||
<div className='flex items-center gap-2'>
|
<div className='flex items-center gap-2'>
|
||||||
@@ -1305,6 +1317,10 @@ const UniformityTable = () => {
|
|||||||
onChange={(e) => {
|
onChange={(e) => {
|
||||||
const value = e.target.value;
|
const value = e.target.value;
|
||||||
filterFormik.setFieldValue('start_date', value);
|
filterFormik.setFieldValue('start_date', value);
|
||||||
|
setFilterDateValues((prev) => ({
|
||||||
|
...prev,
|
||||||
|
start_date: value,
|
||||||
|
}));
|
||||||
|
|
||||||
if (value && filterFormik.values.end_date) {
|
if (value && filterFormik.values.end_date) {
|
||||||
const startDate = new Date(value);
|
const startDate = new Date(value);
|
||||||
@@ -1348,6 +1364,10 @@ const UniformityTable = () => {
|
|||||||
onChange={(e) => {
|
onChange={(e) => {
|
||||||
const value = e.target.value;
|
const value = e.target.value;
|
||||||
filterFormik.setFieldValue('end_date', value);
|
filterFormik.setFieldValue('end_date', value);
|
||||||
|
setFilterDateValues((prev) => ({
|
||||||
|
...prev,
|
||||||
|
end_date: value,
|
||||||
|
}));
|
||||||
|
|
||||||
if (value && filterFormik.values.start_date) {
|
if (value && filterFormik.values.start_date) {
|
||||||
const startDateObj = new Date(
|
const startDateObj = new Date(
|
||||||
|
|||||||
@@ -99,14 +99,22 @@ const UniformityDetail: React.FC<UniformityDetailProps> = ({
|
|||||||
setExpandedDrawerOpen(true);
|
setExpandedDrawerOpen(true);
|
||||||
}, 0);
|
}, 0);
|
||||||
}
|
}
|
||||||
}, [shouldFetchDetails, uniformity_details, hasFetchedDetails]);
|
}, [
|
||||||
|
shouldFetchDetails,
|
||||||
|
uniformity_details,
|
||||||
|
hasFetchedDetails,
|
||||||
|
setExpandedDrawerContent,
|
||||||
|
setExpandedDrawerOpen,
|
||||||
|
initialValues.info_umum,
|
||||||
|
initialValues.id,
|
||||||
|
]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
return () => {
|
return () => {
|
||||||
setExpandedDrawerOpen(false);
|
setExpandedDrawerOpen(false);
|
||||||
setExpandedDrawerContent(null);
|
setExpandedDrawerContent(null);
|
||||||
};
|
};
|
||||||
}, []);
|
}, [setExpandedDrawerOpen, setExpandedDrawerContent]);
|
||||||
|
|
||||||
const infoUmumTableData: DetailOptionType[] = useMemo(() => {
|
const infoUmumTableData: DetailOptionType[] = useMemo(() => {
|
||||||
if (!initialValues) return [];
|
if (!initialValues) return [];
|
||||||
@@ -223,7 +231,7 @@ const UniformityDetail: React.FC<UniformityDetailProps> = ({
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
[initialValues]
|
[initialValues, handleViewUniformityDetails, isLoading]
|
||||||
);
|
);
|
||||||
|
|
||||||
const samplingTableData: DetailOptionType[] = useMemo(() => {
|
const samplingTableData: DetailOptionType[] = useMemo(() => {
|
||||||
|
|||||||
Reference in New Issue
Block a user