mirror of
https://gitlab.com/mbugroup/lti-web-client.git
synced 2026-05-20 05:22:02 +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: '',
|
||||
kandang_id: '',
|
||||
category: '',
|
||||
period: '',
|
||||
},
|
||||
paramMap: {
|
||||
page: 'page',
|
||||
@@ -177,6 +178,7 @@ const ProjectFlockTable = ({ refresh }: { refresh?: () => void }) => {
|
||||
location_id: 'location_id',
|
||||
kandang_id: 'kandang_id',
|
||||
category: 'category',
|
||||
period: 'period',
|
||||
},
|
||||
});
|
||||
const router = useRouter();
|
||||
@@ -235,6 +237,7 @@ const ProjectFlockTable = ({ refresh }: { refresh?: () => void }) => {
|
||||
location_id: null,
|
||||
kandang_id: null,
|
||||
category: null,
|
||||
period: null,
|
||||
},
|
||||
validationSchema: ProjectFlockFilterSchema,
|
||||
onSubmit: (values, { setSubmitting }) => {
|
||||
@@ -242,6 +245,7 @@ const ProjectFlockTable = ({ refresh }: { refresh?: () => void }) => {
|
||||
updateFilter('location_id', values.location_id || '');
|
||||
updateFilter('kandang_id', values.kandang_id || '');
|
||||
updateFilter('category', values.category || '');
|
||||
updateFilter('period', values.period || '');
|
||||
filterModal.closeModal();
|
||||
setSubmitting(false);
|
||||
},
|
||||
@@ -250,6 +254,7 @@ const ProjectFlockTable = ({ refresh }: { refresh?: () => void }) => {
|
||||
updateFilter('location_id', '');
|
||||
updateFilter('kandang_id', '');
|
||||
updateFilter('category', '');
|
||||
updateFilter('period', '');
|
||||
setFilterAreaId(undefined);
|
||||
setFilterLocationId(undefined);
|
||||
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 =====
|
||||
const areaValue = useMemo(() => {
|
||||
if (!formik.values.area_id) return null;
|
||||
@@ -326,6 +339,13 @@ const ProjectFlockTable = ({ refresh }: { refresh?: () => void }) => {
|
||||
);
|
||||
}, [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 =====
|
||||
const activeFiltersCount = useMemo(() => {
|
||||
let count = 0;
|
||||
@@ -333,12 +353,14 @@ const ProjectFlockTable = ({ refresh }: { refresh?: () => void }) => {
|
||||
if (tableFilterState.location_id) count += 1;
|
||||
if (tableFilterState.kandang_id) count += 1;
|
||||
if (tableFilterState.category) count += 1;
|
||||
if (tableFilterState.period) count += 1;
|
||||
return count;
|
||||
}, [
|
||||
tableFilterState.area_id,
|
||||
tableFilterState.location_id,
|
||||
tableFilterState.kandang_id,
|
||||
tableFilterState.category,
|
||||
tableFilterState.period,
|
||||
]);
|
||||
|
||||
const hasFilters = activeFiltersCount > 0;
|
||||
@@ -372,6 +394,7 @@ const ProjectFlockTable = ({ refresh }: { refresh?: () => void }) => {
|
||||
location_id: locationId,
|
||||
kandang_id: tableFilterState.kandang_id || null,
|
||||
category: tableFilterState.category || null,
|
||||
period: tableFilterState.period || null,
|
||||
});
|
||||
|
||||
setFilterAreaId(areaId || undefined);
|
||||
@@ -1274,6 +1297,20 @@ const ProjectFlockTable = ({ refresh }: { refresh?: () => void }) => {
|
||||
className={{ wrapper: 'w-full' }}
|
||||
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>
|
||||
|
||||
{/* Modal Footer */}
|
||||
|
||||
@@ -5,6 +5,7 @@ export type ProjectFlockFilterType = {
|
||||
location_id: string | null;
|
||||
kandang_id: string | null;
|
||||
category: string | null;
|
||||
period: string | null;
|
||||
};
|
||||
|
||||
export const ProjectFlockFilterSchema = yup.object({
|
||||
@@ -12,6 +13,7 @@ export const ProjectFlockFilterSchema = yup.object({
|
||||
location_id: yup.string().nullable(),
|
||||
kandang_id: yup.string().nullable(),
|
||||
category: yup.string().nullable(),
|
||||
period: yup.string().nullable(),
|
||||
});
|
||||
|
||||
export type ProjectFlockFilterValues = yup.InferType<
|
||||
|
||||
Reference in New Issue
Block a user