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

feat: implement table filter state persist

Browse Source
This commit is contained in:
ValdiANS
2026-05-22 11:14:16 +07:00
parent b5a0614218
commit 05138dbb6f
2 changed files with 70 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/pages/report/expense/tab/ReportDepreciationFilterModal.tsx
+49 -88
View File
@@ -1,6 +1,6 @@
'use client';
import { RefObject, useEffect, useMemo, useState } from 'react';
import { RefObject } from 'react';
import { useFormik } from 'formik';
import * as yup from 'yup';
@@ -20,32 +20,34 @@ import { Location } from '@/types/api/master-data/location';
import { ProjectFlock } from '@/types/api/production/project-flock';
export type ReportDepreciationFilterValues = {
area_id: string | null;
location_id: string | null;
project_flock_id: string | null;
area?: OptionType<string>;
location?: OptionType<string>;
projectFlock?: OptionType<string>;
period: string | null;
};
export const ReportDepreciationFilterSchema = yup.object({
area_id: yup.string().nullable(),
location_id: yup.string().nullable(),
project_flock_id: yup.string().nullable(),
area: yup.mixed<OptionType<string>>().optional(),
location: yup.mixed<OptionType<string>>().optional(),
projectFlock: yup.mixed<OptionType<string>>().optional(),
period: yup.string().nullable().required('Periode wajib dipilih'),
}) as yup.ObjectSchema<ReportDepreciationFilterValues>;
});
interface ReportDepreciationFilterModalProps {
ref: RefObject<HTMLDialogElement | null>;
initialValues?: ReportDepreciationFilterValues;
initialValues?: Partial<ReportDepreciationFilterValues>;
onSubmit?: (values: Partial<ReportDepreciationFilterValues>) => void;
onReset?: () => void;
}
const defaultInitialValues: ReportDepreciationFilterValues = {
area_id: null,
location_id: null,
project_flock_id: null,
period: null,
};
const defaultInitialValues: (
initialValues?: Partial<ReportDepreciationFilterValues>
) => ReportDepreciationFilterValues = (initialValues) => ({
area: undefined,
location: undefined,
projectFlock: undefined,
period: initialValues?.period ?? null,
});
const ReportDepreciationFilterModal = ({
ref,
@@ -53,22 +55,19 @@ const ReportDepreciationFilterModal = ({
onSubmit,
onReset,
}: ReportDepreciationFilterModalProps) => {
const [selectedAreaId, setSelectedAreaId] = useState<string | undefined>(
initialValues?.area_id || undefined
);
const [selectedLocationId, setSelectedLocationId] = useState<
string | undefined
>(initialValues?.location_id || undefined);
useEffect(() => {
setSelectedAreaId(initialValues?.area_id || undefined);
setSelectedLocationId(initialValues?.location_id || undefined);
}, [initialValues?.area_id, initialValues?.location_id]);
const closeModalHandler = () => {
ref.current?.close();
};
const formik = useFormik<ReportDepreciationFilterValues>({
initialValues: { ...defaultInitialValues(initialValues), ...initialValues },
validationSchema: ReportDepreciationFilterSchema,
onSubmit: async (values) => {
onSubmit?.(values);
closeModalHandler();
},
});
const {
setInputValue: setAreaInputValue,
options: areaOptions,
@@ -82,7 +81,7 @@ const ReportDepreciationFilterModal = ({
isLoadingOptions: isLoadingLocationOptions,
loadMore: loadMoreLocations,
} = useSelect<Location>(LocationApi.basePath, 'id', 'name', 'search', {
area_id: selectedAreaId || '',
area_id: String(formik.values.area?.value ?? ''),
});
const {
@@ -96,73 +95,35 @@ const ReportDepreciationFilterModal = ({
'flock_name',
'search',
{
location_id: selectedLocationId || '',
location_id: String(formik.values.location?.value ?? ''),
}
);
const formik = useFormik<ReportDepreciationFilterValues>({
initialValues: initialValues || defaultInitialValues,
enableReinitialize: true,
validationSchema: ReportDepreciationFilterSchema,
onSubmit: async (values) => {
onSubmit?.(values);
closeModalHandler();
},
onReset: (_) => {
onReset?.();
closeModalHandler();
},
});
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 projectFlockValue = useMemo(() => {
if (!formik.values.project_flock_id) return null;
return (
projectFlockOptions.find(
(opt) => String(opt.value) === formik.values.project_flock_id
) || null
);
}, [formik.values.project_flock_id, projectFlockOptions]);
const formikResetHandler = () => {
onReset?.();
formik.resetForm({ values: defaultInitialValues(initialValues) });
closeModalHandler();
};
const areaChangeHandler = (val: OptionType | OptionType[] | null) => {
const areaId = val && !Array.isArray(val) ? String(val.value) : null;
setSelectedAreaId(areaId || undefined);
formik.setFieldValue('area_id', areaId);
formik.setFieldValue('location_id', null);
formik.setFieldValue('project_flock_id', null);
setSelectedLocationId(undefined);
const area =
val && !Array.isArray(val) ? (val as OptionType<string>) : undefined;
formik.setFieldValue('area', area);
formik.setFieldValue('location', undefined);
formik.setFieldValue('projectFlock', undefined);
};
const locationChangeHandler = (val: OptionType | OptionType[] | null) => {
const locationId = val && !Array.isArray(val) ? String(val.value) : null;
setSelectedLocationId(locationId || undefined);
formik.setFieldValue('location_id', locationId);
formik.setFieldValue('project_flock_id', null);
const location =
val && !Array.isArray(val) ? (val as OptionType<string>) : undefined;
formik.setFieldValue('location', location);
formik.setFieldValue('projectFlock', undefined);
};
const projectFlockChangeHandler = (val: OptionType | OptionType[] | null) => {
const projectFlockId =
val && !Array.isArray(val) ? String(val.value) : null;
formik.setFieldValue('project_flock_id', projectFlockId);
const projectFlock =
val && !Array.isArray(val) ? (val as OptionType<string>) : undefined;
formik.setFieldValue('projectFlock', projectFlock);
};
return (
@@ -174,7 +135,7 @@ const ReportDepreciationFilterModal = ({
>
<form
onSubmit={formik.handleSubmit}
onReset={formik.handleReset}
onReset={formikResetHandler}
className='w-full flex flex-col'
>
<div className='p-4 flex items-center justify-between gap-2 border-b border-base-content/10'>
@@ -199,7 +160,7 @@ const ReportDepreciationFilterModal = ({
label='Area'
placeholder='Pilih Area'
options={areaOptions}
value={areaValue}
value={formik.values.area ?? null}
onChange={areaChangeHandler}
onInputChange={setAreaInputValue}
onMenuScrollToBottom={loadMoreAreas}
@@ -213,7 +174,7 @@ const ReportDepreciationFilterModal = ({
label='Lokasi'
placeholder='Pilih Lokasi'
options={locationOptions}
value={locationValue}
value={formik.values.location ?? null}
onChange={locationChangeHandler}
onInputChange={setLocationInputValue}
onMenuScrollToBottom={loadMoreLocations}
@@ -227,7 +188,7 @@ const ReportDepreciationFilterModal = ({
label='Project Flock'
placeholder='Pilih Project Flock'
options={projectFlockOptions}
value={projectFlockValue}
value={formik.values.projectFlock ?? null}
onChange={projectFlockChangeHandler}
onInputChange={setProjectFlockInputValue}
onMenuScrollToBottom={loadMoreProjectFlocks}
src/components/pages/report/expense/tab/ReportDepreciationTab.tsx
+21 -12
View File
@@ -17,6 +17,7 @@ import { useTabActionsStore } from '@/stores/tab-actions/tab-actions.store';
import { ReportDepreciation } from '@/types/api/report/report-expense';
import { DepreciationReportApi } from '@/services/api/report/expense-report';
import { useTableFilter } from '@/services/hooks/useTableFilter';
import { OptionType } from '@/components/input/SelectInput';
import { isResponseSuccess } from '@/lib/api-helper';
import { formatCurrency, formatDate, formatNumber } from '@/lib/helper';
@@ -32,20 +33,27 @@ const ReportDepreciationTab = ({ tabId }: ReportDepreciationTabProps) => {
setPageSize,
toQueryString: getTableFilterQueryString,
reset: resetFilter,
} = useTableFilter({
} = useTableFilter<{
area?: OptionType<string>;
location?: OptionType<string>;
projectFlock?: OptionType<string>;
period: string;
}>({
initial: {
area_id: '',
location_id: '',
project_flock_id: '',
area: undefined,
location: undefined,
projectFlock: undefined,
period: formatDate(Date.now(), 'YYYY-MM-DD'),
},
paramMap: {
pageSize: 'limit',
area_id: 'area_id',
location_id: 'location_id',
project_flock_id: 'project_flock_id',
area: 'area_id',
location: 'location_id',
projectFlock: 'project_flock_id',
period: 'period',
},
persist: true,
storeName: 'report-depreciation-table',
});
const { data: depreciationsResponse, isLoading: isLoadingDepreciations } =
@@ -109,7 +117,7 @@ const ReportDepreciationTab = ({ tabId }: ReportDepreciationTabProps) => {
<ButtonFilter
values={tableFilterState}
excludeFields={['page', 'pageSize']}
onClick={() => filterModal.openModal()}
onClick={filterModal.openModal}
variant='outline'
className='px-3 py-2.5'
/>
@@ -239,12 +247,13 @@ const ReportDepreciationTab = ({ tabId }: ReportDepreciationTabProps) => {
initialValues={tableFilterState}
onReset={resetFilter}
onSubmit={(values) => {
updateFilter('area_id', values.area_id ?? '');
updateFilter('location_id', values.location_id ?? '');
updateFilter('project_flock_id', values.project_flock_id ?? '');
updateFilter('area', values.area, true);
updateFilter('location', values.location, true);
updateFilter('projectFlock', values.projectFlock, true);
updateFilter(
'period',
values.period ? formatDate(values.period, 'YYYY-MM-DD') : ''
values.period ? formatDate(values.period, 'YYYY-MM-DD') : '',
true
);
}}
/>