mirror of
https://gitlab.com/mbugroup/lti-web-client.git
synced 2026-05-20 13:32:00 +00:00
refactor(FE): Add period filter to ProjectFlockTable
This commit is contained in:
@@ -168,6 +168,7 @@ const ProjectFlockTable = ({ refresh }: { refresh?: () => void }) => {
|
|||||||
location_id: '',
|
location_id: '',
|
||||||
kandang_id: '',
|
kandang_id: '',
|
||||||
category: '',
|
category: '',
|
||||||
|
period: '',
|
||||||
},
|
},
|
||||||
paramMap: {
|
paramMap: {
|
||||||
page: 'page',
|
page: 'page',
|
||||||
@@ -177,6 +178,7 @@ const ProjectFlockTable = ({ refresh }: { refresh?: () => void }) => {
|
|||||||
location_id: 'location_id',
|
location_id: 'location_id',
|
||||||
kandang_id: 'kandang_id',
|
kandang_id: 'kandang_id',
|
||||||
category: 'category',
|
category: 'category',
|
||||||
|
period: 'period',
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
@@ -235,6 +237,7 @@ const ProjectFlockTable = ({ refresh }: { refresh?: () => void }) => {
|
|||||||
location_id: null,
|
location_id: null,
|
||||||
kandang_id: null,
|
kandang_id: null,
|
||||||
category: null,
|
category: null,
|
||||||
|
period: null,
|
||||||
},
|
},
|
||||||
validationSchema: ProjectFlockFilterSchema,
|
validationSchema: ProjectFlockFilterSchema,
|
||||||
onSubmit: (values, { setSubmitting }) => {
|
onSubmit: (values, { setSubmitting }) => {
|
||||||
@@ -242,6 +245,7 @@ const ProjectFlockTable = ({ refresh }: { refresh?: () => void }) => {
|
|||||||
updateFilter('location_id', values.location_id || '');
|
updateFilter('location_id', values.location_id || '');
|
||||||
updateFilter('kandang_id', values.kandang_id || '');
|
updateFilter('kandang_id', values.kandang_id || '');
|
||||||
updateFilter('category', values.category || '');
|
updateFilter('category', values.category || '');
|
||||||
|
updateFilter('period', values.period || '');
|
||||||
filterModal.closeModal();
|
filterModal.closeModal();
|
||||||
setSubmitting(false);
|
setSubmitting(false);
|
||||||
},
|
},
|
||||||
@@ -250,6 +254,7 @@ const ProjectFlockTable = ({ refresh }: { refresh?: () => void }) => {
|
|||||||
updateFilter('location_id', '');
|
updateFilter('location_id', '');
|
||||||
updateFilter('kandang_id', '');
|
updateFilter('kandang_id', '');
|
||||||
updateFilter('category', '');
|
updateFilter('category', '');
|
||||||
|
updateFilter('period', '');
|
||||||
setFilterAreaId(undefined);
|
setFilterAreaId(undefined);
|
||||||
setFilterLocationId(undefined);
|
setFilterLocationId(undefined);
|
||||||
filterModal.closeModal();
|
filterModal.closeModal();
|
||||||
@@ -291,6 +296,14 @@ const ProjectFlockTable = ({ refresh }: { refresh?: () => void }) => {
|
|||||||
[]
|
[]
|
||||||
);
|
);
|
||||||
|
|
||||||
|
const periodOptions = useMemo(
|
||||||
|
() => [
|
||||||
|
{ value: '1', label: 'Periode 1' },
|
||||||
|
{ value: '2', label: 'Periode 2' },
|
||||||
|
],
|
||||||
|
[]
|
||||||
|
);
|
||||||
|
|
||||||
// ===== FILTER HELPERS =====
|
// ===== FILTER HELPERS =====
|
||||||
const areaValue = useMemo(() => {
|
const areaValue = useMemo(() => {
|
||||||
if (!formik.values.area_id) return null;
|
if (!formik.values.area_id) return null;
|
||||||
@@ -326,6 +339,13 @@ const ProjectFlockTable = ({ refresh }: { refresh?: () => void }) => {
|
|||||||
);
|
);
|
||||||
}, [formik.values.category, categoryOptions]);
|
}, [formik.values.category, categoryOptions]);
|
||||||
|
|
||||||
|
const periodValue = useMemo(() => {
|
||||||
|
if (!formik.values.period) return null;
|
||||||
|
return (
|
||||||
|
periodOptions.find((opt) => opt.value === formik.values.period) || null
|
||||||
|
);
|
||||||
|
}, [formik.values.period, periodOptions]);
|
||||||
|
|
||||||
// ===== ACTIVE FILTERS COUNT =====
|
// ===== ACTIVE FILTERS COUNT =====
|
||||||
const activeFiltersCount = useMemo(() => {
|
const activeFiltersCount = useMemo(() => {
|
||||||
let count = 0;
|
let count = 0;
|
||||||
@@ -333,12 +353,14 @@ const ProjectFlockTable = ({ refresh }: { refresh?: () => void }) => {
|
|||||||
if (tableFilterState.location_id) count += 1;
|
if (tableFilterState.location_id) count += 1;
|
||||||
if (tableFilterState.kandang_id) count += 1;
|
if (tableFilterState.kandang_id) count += 1;
|
||||||
if (tableFilterState.category) count += 1;
|
if (tableFilterState.category) count += 1;
|
||||||
|
if (tableFilterState.period) count += 1;
|
||||||
return count;
|
return count;
|
||||||
}, [
|
}, [
|
||||||
tableFilterState.area_id,
|
tableFilterState.area_id,
|
||||||
tableFilterState.location_id,
|
tableFilterState.location_id,
|
||||||
tableFilterState.kandang_id,
|
tableFilterState.kandang_id,
|
||||||
tableFilterState.category,
|
tableFilterState.category,
|
||||||
|
tableFilterState.period,
|
||||||
]);
|
]);
|
||||||
|
|
||||||
const hasFilters = activeFiltersCount > 0;
|
const hasFilters = activeFiltersCount > 0;
|
||||||
@@ -372,6 +394,7 @@ const ProjectFlockTable = ({ refresh }: { refresh?: () => void }) => {
|
|||||||
location_id: locationId,
|
location_id: locationId,
|
||||||
kandang_id: tableFilterState.kandang_id || null,
|
kandang_id: tableFilterState.kandang_id || null,
|
||||||
category: tableFilterState.category || null,
|
category: tableFilterState.category || null,
|
||||||
|
period: tableFilterState.period || null,
|
||||||
});
|
});
|
||||||
|
|
||||||
setFilterAreaId(areaId || undefined);
|
setFilterAreaId(areaId || undefined);
|
||||||
@@ -1274,6 +1297,20 @@ const ProjectFlockTable = ({ refresh }: { refresh?: () => void }) => {
|
|||||||
className={{ wrapper: 'w-full' }}
|
className={{ wrapper: 'w-full' }}
|
||||||
isClearable={true}
|
isClearable={true}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
|
<SelectInputRadio
|
||||||
|
label='Periode'
|
||||||
|
placeholder='Pilih Periode'
|
||||||
|
options={periodOptions}
|
||||||
|
value={periodValue}
|
||||||
|
onChange={(val) => {
|
||||||
|
if (!Array.isArray(val)) {
|
||||||
|
formik.setFieldValue('period', val?.value || null);
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
className={{ wrapper: 'w-full' }}
|
||||||
|
isClearable
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Modal Footer */}
|
{/* Modal Footer */}
|
||||||
|
|||||||
@@ -5,6 +5,7 @@ export type ProjectFlockFilterType = {
|
|||||||
location_id: string | null;
|
location_id: string | null;
|
||||||
kandang_id: string | null;
|
kandang_id: string | null;
|
||||||
category: string | null;
|
category: string | null;
|
||||||
|
period: string | null;
|
||||||
};
|
};
|
||||||
|
|
||||||
export const ProjectFlockFilterSchema = yup.object({
|
export const ProjectFlockFilterSchema = yup.object({
|
||||||
@@ -12,6 +13,7 @@ export const ProjectFlockFilterSchema = yup.object({
|
|||||||
location_id: yup.string().nullable(),
|
location_id: yup.string().nullable(),
|
||||||
kandang_id: yup.string().nullable(),
|
kandang_id: yup.string().nullable(),
|
||||||
category: yup.string().nullable(),
|
category: yup.string().nullable(),
|
||||||
|
period: yup.string().nullable(),
|
||||||
});
|
});
|
||||||
|
|
||||||
export type ProjectFlockFilterValues = yup.InferType<
|
export type ProjectFlockFilterValues = yup.InferType<
|
||||||
|
|||||||
Reference in New Issue
Block a user