chore(FE-188,193): adjust ExpenseRequestKandangDetailExpense component

This commit is contained in:
ValdiANS
2025-11-25 09:17:02 +07:00
parent e4a6b22357
commit b868a37485
@@ -41,28 +41,28 @@ const ExpenseRequestKandangDetailExpense: React.FC<
val: OptionType | OptionType[] | null
) => {
formik.setFieldTouched(
`kandangExpenses[${kandangExpenseIdx}].expenses[${expenseIdx}].nonstock`,
`cost_per_kandangs[${kandangExpenseIdx}].cost_items[${expenseIdx}].nonstock`,
true
);
formik.setFieldValue(
`kandangExpenses[${kandangExpenseIdx}].expenses[${expenseIdx}].nonstock`,
`cost_per_kandangs[${kandangExpenseIdx}].cost_items[${expenseIdx}].nonstock`,
val
);
};
const addExpenseItemHandler = (kandangExpenseIdx: number) => {
const newExpensesValue = [
...formik.values.kandangExpenses[kandangExpenseIdx].expenses,
...formik.values.cost_per_kandangs[kandangExpenseIdx].cost_items,
{
nonstock: undefined,
totalExpense: undefined,
totalQuantity: undefined,
total_cost: undefined,
quantity: undefined,
notes: '',
},
];
formik.setFieldValue(
`kandangExpenses[${kandangExpenseIdx}].expenses`,
`cost_per_kandangs[${kandangExpenseIdx}].cost_items`,
newExpensesValue
);
};
@@ -71,27 +71,28 @@ const ExpenseRequestKandangDetailExpense: React.FC<
kandangExpenseIdx: number,
expenseIdx: number
) => {
const path = `kandangExpenses[${kandangExpenseIdx}].expenses`;
const path = `cost_per_kandangs[${kandangExpenseIdx}].cost_items`;
// trims values, errors, and touched at expenseIdx
removeArrayItemAndSync(formik, path, expenseIdx);
};
const isExpenseRepeaterInputError = (
column: 'nonstock' | 'totalQuantity' | 'totalExpense' | 'notes',
column: 'nonstock' | 'quantity' | 'total_cost' | 'notes',
kandangExpenseIdx: number,
expenseIdx: number
) => {
return (
formik.touched.kandangExpenses?.[kandangExpenseIdx]?.expenses?.[
formik.touched.cost_per_kandangs?.[kandangExpenseIdx]?.cost_items?.[
expenseIdx
]?.[column] &&
Boolean(
formik.errors.kandangExpenses?.[kandangExpenseIdx] instanceof Object &&
formik.errors.kandangExpenses?.[kandangExpenseIdx].expenses?.[
formik.errors.cost_per_kandangs?.[kandangExpenseIdx] instanceof
Object &&
formik.errors.cost_per_kandangs?.[kandangExpenseIdx].cost_items?.[
expenseIdx
] instanceof Object &&
formik.errors.kandangExpenses?.[kandangExpenseIdx].expenses?.[
formik.errors.cost_per_kandangs?.[kandangExpenseIdx].cost_items?.[
expenseIdx
]?.[column]
)
@@ -112,7 +113,8 @@ const ExpenseRequestKandangDetailExpense: React.FC<
</div>
<div className='w-full flex flex-col gap-6'>
{formik.values.kandangExpenses.length === 0 && (
{(formik.values.cost_per_kandangs.length === 0 ||
!formik.values.supplier?.value) && (
<div>
<p className='text-sm text-gray-400 text-center'>
Pilih kandang terlebih dahulu!
@@ -120,10 +122,12 @@ const ExpenseRequestKandangDetailExpense: React.FC<
</div>
)}
{formik.values.kandangExpenses.map(
{formik.values.cost_per_kandangs.length > 0 &&
formik.values.supplier?.value &&
formik.values.cost_per_kandangs.map(
(kandangExpense, kandangExpenseIdx) => {
const kandangName = formik.values.kandangs?.find(
(kandang) => kandang.id === kandangExpense.kandangId
(kandang) => kandang.id === kandangExpense.kandang_id
);
return (
@@ -150,7 +154,7 @@ const ExpenseRequestKandangDetailExpense: React.FC<
</thead>
<tbody>
{kandangExpense.expenses.map(
{kandangExpense.cost_items.map(
(expenseItem, expenseIdx) => (
<tr key={`expense-${expenseIdx}`}>
<td className='p-2'>
@@ -174,17 +178,17 @@ const ExpenseRequestKandangDetailExpense: React.FC<
<td className='p-2'>
<NumberInput
required
name={`kandangExpenses[${kandangExpenseIdx}].expenses[${expenseIdx}].totalQuantity`}
name={`cost_per_kandangs[${kandangExpenseIdx}].cost_items[${expenseIdx}].quantity`}
placeholder='Masukkan Total Kuantitas'
value={
formik.values.kandangExpenses[
formik.values.cost_per_kandangs[
kandangExpenseIdx
].expenses[expenseIdx].totalQuantity ?? ''
].cost_items[expenseIdx].quantity ?? ''
}
onChange={formik.handleChange}
onBlur={formik.handleBlur}
isError={isExpenseRepeaterInputError(
'totalQuantity',
'quantity',
kandangExpenseIdx,
expenseIdx
)}
@@ -194,17 +198,18 @@ const ExpenseRequestKandangDetailExpense: React.FC<
<td className='p-2'>
<NumberInput
name={`kandangExpenses[${kandangExpenseIdx}].expenses[${expenseIdx}].totalExpense`}
name={`cost_per_kandangs[${kandangExpenseIdx}].cost_items[${expenseIdx}].total_cost`}
placeholder='Masukkan Total Biaya'
value={
formik.values.kandangExpenses[
formik.values.cost_per_kandangs[
kandangExpenseIdx
].expenses[expenseIdx].totalExpense ?? ''
].cost_items[expenseIdx].total_cost ??
''
}
onChange={formik.handleChange}
onBlur={formik.handleBlur}
isError={isExpenseRepeaterInputError(
'totalExpense',
'total_cost',
kandangExpenseIdx,
expenseIdx
)}
@@ -219,12 +224,12 @@ const ExpenseRequestKandangDetailExpense: React.FC<
<td className='p-2'>
<TextInput
name={`kandangExpenses[${kandangExpenseIdx}].expenses[${expenseIdx}].notes`}
name={`cost_per_kandangs[${kandangExpenseIdx}].cost_items[${expenseIdx}].notes`}
placeholder='Tuliskan catatan'
value={
formik.values.kandangExpenses[
formik.values.cost_per_kandangs[
kandangExpenseIdx
].expenses[expenseIdx].notes ?? ''
].cost_items[expenseIdx].notes ?? ''
}
onChange={formik.handleChange}
onBlur={formik.handleBlur}