gitea-admin/lti-web-client
1
0
Fork 0
mirror of https://gitlab.com/mbugroup/lti-web-client.git synced 2026-05-20 13:32:00 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(FE): Add filter functionality to ProjectFlockTable

Browse Source
This commit is contained in:
rstubryan
2026-02-23 13:38:47 +07:00
parent 755bddc74c
commit 75ee058818
2 changed files with 323 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/pages/production/project-flock/ProjectFlockTable.tsx
+306 -21
View File
@@ -3,7 +3,10 @@
import Button from '@/components/Button';
import CheckboxInput from '@/components/input/CheckboxInput';
import DebouncedTextInput from '@/components/input/DebouncedTextInput';
import { OptionType, useSelect } from '@/components/input/SelectInput';
import SelectInput, {
OptionType,
useSelect,
} from '@/components/input/SelectInput';
import { useModal } from '@/components/Modal';
import ConfirmationModal from '@/components/modal/ConfirmationModal';
import ConfirmationModalWithNotes from '@/components/modal/ConfirmationModalWithNotes';
@@ -22,6 +25,7 @@ import { useRouter } from 'next/navigation';
import { ChangeEventHandler, useEffect, useMemo, useState } from 'react';
import toast from 'react-hot-toast';
import useSWR from 'swr';
import { useFormik } from 'formik';
import RequirePermission from '@/components/helper/RequirePermission';
import StatusBadge from '@/components/helper/StatusBadge';
@@ -32,6 +36,12 @@ import { useProjectFlockStore } from '@/stores/production/project-flock/project-
import { ProjectFlockFormValues } from './form/ProjectFlockForm.schema';
import { useChickinStore } from '@/stores/production/chickin/chickin.store';
import { useProjectFlockClosingStore } from '@/stores/production/project-flock-closing/project-flock-closing.store';
import {
ProjectFlockFilterSchema,
ProjectFlockFilterType,
} from './filter/ProjectFlockFilter';
import Modal from '@/components/Modal';
import SelectInputRadio from '@/components/input/SelectInputRadio';
const RowOptionsMenu = ({
props,
@@ -154,19 +164,19 @@ const ProjectFlockTable = ({ refresh }: { refresh?: () => void }) => {
} = useTableFilter({
initial: {
search: '',
areaFilter: '',
locationFilter: '',
kandangFilter: '',
periodFilter: '',
area_id: '',
location_id: '',
kandang_id: '',
category: '',
},
paramMap: {
page: 'page',
pageSize: 'limit',
search: 'search',
areaFilter: 'area_id',
locationFilter: 'location_id',
kandangFilter: 'kandang_id',
periodFilter: 'period',
area_id: 'area_id',
location_id: 'location_id',
kandang_id: 'kandang_id',
category: 'category',
},
});
const router = useRouter();
@@ -207,6 +217,169 @@ const ProjectFlockTable = ({ refresh }: { refresh?: () => void }) => {
setClosingLoading,
} = useProjectFlockClosingStore();
// ===== FILTER MODAL STATE =====
const filterModal = useModal();
// ===== FILTER DEPENDENCIES STATE =====
const [filterAreaId, setFilterAreaId] = useState<string | undefined>(
undefined
);
const [filterLocationId, setFilterLocationId] = useState<string | undefined>(
undefined
);
// ===== FORMIK SETUP FOR FILTER =====
const formik = useFormik<ProjectFlockFilterType>({
initialValues: {
area_id: null,
location_id: null,
kandang_id: null,
category: null,
},
validationSchema: ProjectFlockFilterSchema,
onSubmit: (values, { setSubmitting }) => {
updateFilter('area_id', values.area_id || '');
updateFilter('location_id', values.location_id || '');
updateFilter('kandang_id', values.kandang_id || '');
updateFilter('category', values.category || '');
filterModal.closeModal();
setSubmitting(false);
},
onReset: () => {
updateFilter('area_id', '');
updateFilter('location_id', '');
updateFilter('kandang_id', '');
updateFilter('category', '');
setFilterAreaId(undefined);
setFilterLocationId(undefined);
filterModal.closeModal();
},
});
// ===== FILTER OPTIONS =====
const {
setInputValue: setAreaInputValue,
options: areaOptions,
isLoadingOptions: isLoadingAreaOptions,
loadMore: loadMoreAreas,
} = useSelect(AreaApi.basePath, 'id', 'name');
const {
setInputValue: setLocationInputValue,
options: locationOptions,
isLoadingOptions: isLoadingLocationOptions,
loadMore: loadMoreLocations,
} = useSelect(LocationApi.basePath, 'id', 'name', 'search', {
area_id: filterAreaId || '',
});
const {
setInputValue: setKandangInputValue,
options: kandangOptions,
isLoadingOptions: isLoadingKandangOptions,
loadMore: loadMoreKandangs,
} = useSelect(KandangApi.basePath, 'id', 'name', 'search', {
area_id: filterAreaId || '',
location_id: filterLocationId || '',
});
const categoryOptions = useMemo(
() => [
{ value: 'GROWING', label: 'Growing' },
{ value: 'LAYING', label: 'Laying' },
],
[]
);
// ===== FILTER HELPERS =====
const areaValue = useMemo(() => {
if (!formik.values.area_id) return null;
return (
areaOptions.find((opt) => String(opt.value) === formik.values.area_id) ||
null
);
}, [formik.values.area_id, areaOptions]);
const locationValue = useMemo(() => {
if (!formik.values.location_id) return null;
return (
locationOptions.find(
(opt) => String(opt.value) === formik.values.location_id
) || null
);
}, [formik.values.location_id, locationOptions]);
const kandangValue = useMemo(() => {
if (!formik.values.kandang_id) return null;
return (
kandangOptions.find(
(opt) => String(opt.value) === formik.values.kandang_id
) || null
);
}, [formik.values.kandang_id, kandangOptions]);
const categoryValue = useMemo(() => {
if (!formik.values.category) return null;
return (
categoryOptions.find((opt) => opt.value === formik.values.category) ||
null
);
}, [formik.values.category, categoryOptions]);
// ===== ACTIVE FILTERS COUNT =====
const activeFiltersCount = useMemo(() => {
let count = 0;
if (tableFilterState.area_id) count += 1;
if (tableFilterState.location_id) count += 1;
if (tableFilterState.kandang_id) count += 1;
if (tableFilterState.category) count += 1;
return count;
}, [
tableFilterState.area_id,
tableFilterState.location_id,
tableFilterState.kandang_id,
tableFilterState.category,
]);
const hasFilters = activeFiltersCount > 0;
// ===== FILTER DEPENDENCY HANDLERS =====
const handleFilterAreaChange = (area: OptionType | null) => {
const areaId = area?.value ? String(area.value) : undefined;
setFilterAreaId(areaId);
if (!areaId) {
setFilterLocationId(undefined);
formik.setFieldValue('location_id', null);
formik.setFieldValue('kandang_id', null);
}
};
const handleFilterLocationChange = (location: OptionType | null) => {
const locationId = location?.value ? String(location.value) : undefined;
setFilterLocationId(locationId);
if (!locationId) {
formik.setFieldValue('kandang_id', null);
}
};
// ===== HANDLE FILTER MODAL OPEN =====
const handleFilterModalOpen = () => {
const areaId = tableFilterState.area_id || null;
const locationId = tableFilterState.location_id || null;
formik.setValues({
area_id: areaId,
location_id: locationId,
kandang_id: tableFilterState.kandang_id || null,
category: tableFilterState.category || null,
});
setFilterAreaId(areaId || undefined);
setFilterLocationId(locationId || undefined);
filterModal.openModal();
};
// ===== Fetch Data =====
const {
data: projectFlocks,
@@ -768,26 +941,21 @@ const ProjectFlockTable = ({ refresh }: { refresh?: () => void }) => {
<Button
variant='outline'
color='none'
// onClick={filterModal.openModal}
onClick={handleFilterModalOpen}
className={cn(
'px-3 py-2.5 gap-1.5 text-sm text-base-content/50 border border-base-content/10 rounded-xl shadow-button-soft transition-all',
{
// 'border-primary-gradient text-primary': isFilterActive,
'border-primary-gradient text-primary': hasFilters,
}
)}
>
<Icon icon='heroicons:funnel' width={20} height={20} />
Filter
{/* {isFilterActive && (
<Badge
className={{
badge:
'p-1.5 bg-[#FF3535] text-xs text-base-100 border border-base-300 rounded-lg',
}}
>
{filterCount}
</Badge>
)} */}
{hasFilters && (
<span className='w-5 h-5 text-white bg-[#FF3535] rounded-lg border border-base-300 flex items-center justify-center text-xs'>
{activeFiltersCount}
</span>
)}
</Button>
<Dropdown
@@ -1011,6 +1179,123 @@ const ProjectFlockTable = ({ refresh }: { refresh?: () => void }) => {
}}
/>
{/* Filter Modal */}
<Modal
ref={filterModal.ref}
className={{
modal: 'p-0',
modalBox: 'p-0 rounded-[0.875rem] xl:max-w-4/12 max-w-sm',
}}
>
{/* Modal Header */}
<div className='flex items-center justify-between gap-2 border-b border-base-content/10 p-4'>
<div className='flex items-center gap-2 text-primary'>
<Icon icon='heroicons:funnel' width={20} height={20} />
<h3 className='font-medium text-sm'>Filter Data</h3>
</div>
<Button
variant='link'
onClick={filterModal.closeModal}
className='text-base-content/50 hover:text-base-content transition-colors cursor-pointer'
>
<Icon icon='heroicons:x-mark' width={20} height={20} />
</Button>
</div>
<form onSubmit={formik.handleSubmit} onReset={formik.handleReset}>
<div className='p-4 flex flex-col gap-1.5'>
<SelectInput
label='Area'
placeholder='Pilih Area'
options={areaOptions}
value={areaValue}
onChange={(val) => {
if (!Array.isArray(val)) {
const areaValue = val?.value ? String(val.value) : null;
formik.setFieldValue('area_id', areaValue);
handleFilterAreaChange(val || null);
}
}}
onInputChange={setAreaInputValue}
isLoading={isLoadingAreaOptions}
isClearable
onMenuScrollToBottom={loadMoreAreas}
className={{ wrapper: 'w-full' }}
/>
<SelectInput
label='Lokasi'
placeholder='Pilih Lokasi'
options={locationOptions}
value={locationValue}
onChange={(val) => {
if (!Array.isArray(val)) {
const locationValue = val?.value ? String(val.value) : null;
formik.setFieldValue('location_id', locationValue);
handleFilterLocationChange(val || null);
}
}}
onInputChange={setLocationInputValue}
isLoading={isLoadingLocationOptions}
isClearable
onMenuScrollToBottom={loadMoreLocations}
className={{ wrapper: 'w-full' }}
/>
<SelectInput
label='Kandang'
placeholder='Pilih Kandang'
options={kandangOptions}
value={kandangValue}
onChange={(val) => {
if (!Array.isArray(val)) {
formik.setFieldValue(
'kandang_id',
val?.value ? String(val.value) : null
);
}
}}
onInputChange={setKandangInputValue}
isLoading={isLoadingKandangOptions}
isClearable
onMenuScrollToBottom={loadMoreKandangs}
className={{ wrapper: 'w-full' }}
/>
<SelectInputRadio
label='Kategori'
placeholder='Pilih Kategori'
options={categoryOptions}
value={categoryValue}
onChange={(val) => {
if (!Array.isArray(val)) {
formik.setFieldValue('category', val?.value || null);
}
}}
className={{ wrapper: 'w-full' }}
isClearable={true}
/>
</div>
{/* Modal Footer */}
<div className='flex justify-between items-center gap-4 p-4 border-t border-base-content/10 bg-gray-50'>
<Button
type='reset'
variant='soft'
className='rounded-lg text-base-content/65 bg-transparent border-none hover:bg-base-content/10 hover:text-base-content/65 transition-colors px-3 py-2'
>
Reset Filter
</Button>
<Button
type='submit'
className='min-w-40 text-sm rounded-lg py-3 text-white font-semibold'
disabled={!formik.isValid || formik.isSubmitting}
>
Apply Filter
</Button>
</div>
</form>
</Modal>
{/* Project Flock Closing Modal */}
<ConfirmationModal
ref={closingModal.ref}
src/components/pages/production/project-flock/filter/ProjectFlockFilter.ts
+17
View File
@@ -0,0 +1,17 @@
import * as yup from 'yup';
export type ProjectFlockFilterType = {
area_id: string | null;
location_id: string | null;
kandang_id: string | null;
category: string | null;
};
export const ProjectFlockFilterSchema = yup.object({
area_id: yup.string().nullable(),
location_id: yup.string().nullable(),
kandang_id: yup.string().nullable(),
category: yup.string().nullable(),
});
export type ProjectFlockFilterValues = yup.InferType<typeof ProjectFlockFilterSchema>;