fix(FE-88-89) adjust category flock dengan API backend & set disabled input period

This commit is contained in:
randy-ar
2025-10-21 10:14:17 +07:00
parent 9964e1797a
commit 1672705464
10 changed files with 262 additions and 42 deletions
@@ -20,14 +20,13 @@ export const ProjectFlockFormSchema = Yup.object({
.min(1, 'Area wajib diisi!')
.required('Area wajib diisi!'),
//Product Category
product_category: Yup.object({
value: Yup.number().required('ID Kategori Produk wajib diisi!'),
label: Yup.string().required('Nama Kategori Produk wajib diisi!'),
// Kategori
category_option: Yup.object({
value: Yup.string().required('Nilai Kategori wajib diisi!'),
label: Yup.string().required('Label Kategori wajib diisi!'),
}).nullable(),
product_category_id: Yup.number()
.min(1, 'Kategori Produk wajib diisi!')
.required('Kategori Produk wajib diisi!'),
category: Yup.string().oneOf(['GROWING', 'LAYING'], 'Kategori wajib diisi!')
.required('Kategori wajib diisi!'),
// FCR
fcr: Yup.object({
@@ -34,6 +34,7 @@ import { ProjectFlockApi } from '@/services/api/production';
import { httpClient } from '@/services/http/client';
import { BaseApiResponse } from '@/types/api/api-general';
import axios from 'axios';
import { FLOCK_CATEGORY_OPTIONS } from '@/config/constant';
interface ProjectFlockFormProps {
formType?: 'add' | 'edit' | 'detail';
@@ -202,7 +203,7 @@ const ProjectFlockForm = ({
const optionChangeHandler = (
val: OptionType | OptionType[] | null,
inputName: string
inputName: string,
) => {
formik.setFieldValue(inputName, val);
formik.setFieldValue(
@@ -213,6 +214,12 @@ const ProjectFlockForm = ({
formik.setFieldTouched(`${inputName}_id`, true);
};
const categoryChangeHandler = (val: OptionType | OptionType[] | null) => {
formik.setFieldValue('category', (val as OptionType)?.value);
formik.setFieldValue('category_option', val);
formik.setFieldTouched('category', true);
}
const kandangChangeHandler = (event: React.ChangeEvent<HTMLInputElement>) => {
const { value, checked } = event.target;
if (checked) {
@@ -233,7 +240,7 @@ const ProjectFlockForm = ({
formik.setFieldValue(
'kandang_ids',
optionsKandang
.filter((kandang) => kandang.status === 'NON_ACTIVE')
.filter((kandang) => (kandang.status === 'NON_ACTIVE' || formik.values.kandang_ids.includes(kandang.id)))
.map((kandang) => kandang.id)
);
} else {
@@ -290,10 +297,10 @@ const ProjectFlockForm = ({
label: initialValues.area.name,
}
: null,
product_category: initialValues?.product_category
category_option: initialValues?.category
? {
value: initialValues.product_category.id,
label: initialValues.product_category.name,
value: initialValues.category,
label: initialValues.category,
}
: null,
fcr: initialValues?.fcr
@@ -310,11 +317,11 @@ const ProjectFlockForm = ({
: null,
flock_id: initialValues?.flock?.id ?? 0,
area_id: initialValues?.area?.id ?? 0,
product_category_id: initialValues?.product_category?.id ?? 0,
category: initialValues?.category,
fcr_id: initialValues?.fcr?.id ?? 0,
location_id: initialValues?.location?.id ?? 0,
period: initialValues?.period ?? '',
kandang_ids: [],
kandang_ids: initialValues?.kandangs?.map((k: Kandang) => k.id) ?? [],
};
}, [initialValues]);
@@ -332,7 +339,7 @@ const ProjectFlockForm = ({
const payload: CreateProjectFlockPayload = {
flock_id: values.flock_id as number,
area_id: values.area_id as number,
product_category_id: values.product_category_id as number,
category: values.category as string,
fcr_id: values.fcr_id as number,
location_id: values.location_id as number,
period: values.period as number,
@@ -526,18 +533,15 @@ const ProjectFlockForm = ({
/>
<SelectInput
required
label='Kategori Produk'
value={formik.values.product_category as OptionType}
onChange={(val) => {
optionChangeHandler(val, 'product_category');
}}
options={optionsProductCategory}
isLoading={isLoadingProductCategories}
label='Kategori'
value={formik.values.category_option as OptionType}
onChange={categoryChangeHandler}
options={FLOCK_CATEGORY_OPTIONS}
isError={
formik.touched.product_category &&
Boolean(formik.errors.product_category)
formik.touched.category &&
Boolean(formik.errors.category)
}
errorMessage={formik.errors.product_category as string}
errorMessage={formik.errors.category as string}
isClearable
isDisabled={formType === 'detail'}
/>
@@ -554,6 +558,7 @@ const ProjectFlockForm = ({
}
errorMessage={formik.errors.period as string}
readOnly={formType === 'detail'}
disabled={true}
/>
</div>
</div>
@@ -592,19 +597,24 @@ const ProjectFlockForm = ({
type='checkbox'
checked={
optionsKandang
.filter((k) => k.status === 'NON_ACTIVE')
.filter((k) => (k.status === 'NON_ACTIVE' || formik.values.kandang_ids.includes(k.id)))
.every((k) =>
formik.values.kandang_ids.includes(k.id)
) &&
optionsKandang.filter(
(k) => k.status === 'NON_ACTIVE'
(k) => (k.status === 'NON_ACTIVE' || formik.values.kandang_ids.includes(k.id))
).length > 0
}
className='checkbox'
disabled={formType === 'detail' || optionsKandang.filter(
(k) => (k.status === 'NON_ACTIVE')
).length == 0}
onChange={
formType === 'detail'
? () => {}
: kandangCheckAll
}
/>
</label>
@@ -635,7 +645,7 @@ const ProjectFlockForm = ({
}
disabled={
formType === 'detail' ||
kandang.status != 'NON_ACTIVE'
(kandang.status != 'NON_ACTIVE')
}
/>
</label>