mirror of
https://gitlab.com/mbugroup/lti-web-client.git
synced 2026-05-24 07:15:44 +00:00
refactor(FE): Refactor Formik field updates to use setFieldValue
This commit is contained in:
@@ -23,7 +23,6 @@ import RequirePermission from '@/components/helper/RequirePermission';
|
|||||||
import PopoverButton from '@/components/popover/PopoverButton';
|
import PopoverButton from '@/components/popover/PopoverButton';
|
||||||
import PopoverContent from '@/components/popover/PopoverContent';
|
import PopoverContent from '@/components/popover/PopoverContent';
|
||||||
import SupplierTableSkeleton from '@/components/pages/master-data/supplier/skeleton/SupplierTableSkeleton';
|
import SupplierTableSkeleton from '@/components/pages/master-data/supplier/skeleton/SupplierTableSkeleton';
|
||||||
import SelectInput from '@/components/input/SelectInput';
|
|
||||||
import { OptionType } from '@/components/input/SelectInput';
|
import { OptionType } from '@/components/input/SelectInput';
|
||||||
import ButtonFilter from '@/components/helper/ButtonFilter';
|
import ButtonFilter from '@/components/helper/ButtonFilter';
|
||||||
|
|
||||||
@@ -167,6 +166,8 @@ const SuppliersTable = () => {
|
|||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
|
const { setFieldValue } = formik;
|
||||||
|
|
||||||
// ===== CATEGORY OPTIONS (SAPRONAK or BOP) =====
|
// ===== CATEGORY OPTIONS (SAPRONAK or BOP) =====
|
||||||
const categoryOptions = useMemo(
|
const categoryOptions = useMemo(
|
||||||
() => [
|
() => [
|
||||||
@@ -191,9 +192,9 @@ const SuppliersTable = () => {
|
|||||||
const option = val as OptionType | null;
|
const option = val as OptionType | null;
|
||||||
const categoryId = option?.value ? String(option.value) : null;
|
const categoryId = option?.value ? String(option.value) : null;
|
||||||
|
|
||||||
formik.setFieldValue('category_id', categoryId);
|
setFieldValue('category_id', categoryId);
|
||||||
},
|
},
|
||||||
[formik]
|
[setFieldValue]
|
||||||
);
|
);
|
||||||
|
|
||||||
const handleFilterFlagChange = useCallback(
|
const handleFilterFlagChange = useCallback(
|
||||||
@@ -206,9 +207,9 @@ const SuppliersTable = () => {
|
|||||||
? false
|
? false
|
||||||
: null;
|
: null;
|
||||||
|
|
||||||
formik.setFieldValue('flag', boolValue);
|
setFieldValue('flag', boolValue);
|
||||||
},
|
},
|
||||||
[formik]
|
[setFieldValue]
|
||||||
);
|
);
|
||||||
|
|
||||||
// ===== FILTER HELPERS =====
|
// ===== FILTER HELPERS =====
|
||||||
@@ -238,9 +239,9 @@ const SuppliersTable = () => {
|
|||||||
if (filterModal.open) {
|
if (filterModal.open) {
|
||||||
const flagBoolValue =
|
const flagBoolValue =
|
||||||
tableFilterState.flagFilter === 'EKSPEDISI' ? true : false;
|
tableFilterState.flagFilter === 'EKSPEDISI' ? true : false;
|
||||||
formik.setFieldValue('flag', flagBoolValue);
|
setFieldValue('flag', flagBoolValue);
|
||||||
}
|
}
|
||||||
}, [filterModal.open, tableFilterState.flagFilter]);
|
}, [filterModal.open, tableFilterState.flagFilter, setFieldValue]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
updateFilter('search', searchValue);
|
updateFilter('search', searchValue);
|
||||||
@@ -508,6 +509,7 @@ const SuppliersTable = () => {
|
|||||||
options={flagOptions}
|
options={flagOptions}
|
||||||
value={flagValue}
|
value={flagValue}
|
||||||
onChange={handleFilterFlagChange}
|
onChange={handleFilterFlagChange}
|
||||||
|
isClearable
|
||||||
className={{ wrapper: 'w-full' }}
|
className={{ wrapper: 'w-full' }}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -167,29 +167,26 @@ const SupplierForm = ({
|
|||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
const { setValues: formikSetValues } = formik;
|
const { setFieldValue } = formik;
|
||||||
|
|
||||||
// Initialize Formik
|
// Initialize Formik
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
formikSetValues(formikInitialValues);
|
if (formType !== 'add' && initialValues?.hatchery) {
|
||||||
if (formType != 'add') {
|
const hatcheryArrays = initialValues.hatchery.split(',');
|
||||||
const hatcheryArrays = formikInitialValues.hatchery?.split(',');
|
const hatcheryCreatedOptions = hatcheryArrays.map((item) => ({
|
||||||
const hatcheryCreatedOptions = hatcheryArrays?.map((item) => ({
|
|
||||||
value: item,
|
value: item,
|
||||||
label: item,
|
label: item,
|
||||||
}));
|
}));
|
||||||
setHatcheryOptionValues(hatcheryCreatedOptions ?? []);
|
setHatcheryOptionValues(hatcheryCreatedOptions);
|
||||||
}
|
}
|
||||||
}, [formikSetValues, formikInitialValues, setHatcheryOptionValues]);
|
}, [formType, initialValues?.hatchery]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const commaSeparatedValues = hatcheryOptionsValues
|
const commaSeparatedValues = hatcheryOptionsValues
|
||||||
.map((item) => item.value)
|
.map((item) => item.value)
|
||||||
.join(',');
|
.join(',');
|
||||||
formikSetValues({
|
setFieldValue('hatchery', commaSeparatedValues);
|
||||||
...formik.values,
|
}, [hatcheryOptionsValues, setFieldValue]);
|
||||||
hatchery: commaSeparatedValues,
|
|
||||||
});
|
|
||||||
}, [hatcheryOptionsValues, formikSetValues]);
|
|
||||||
|
|
||||||
// Option Handler
|
// Option Handler
|
||||||
const typeChangeHandler = (val: OptionType | OptionType[] | null) => {
|
const typeChangeHandler = (val: OptionType | OptionType[] | null) => {
|
||||||
|
|||||||
Reference in New Issue
Block a user