mirror of
https://gitlab.com/mbugroup/lti-web-client.git
synced 2026-05-20 13:32:00 +00:00
chore(FE-188,193): adjust ExpenseRequestKandangDetailExpense component
This commit is contained in:
ValdiANS
@@ -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,168 +122,171 @@ const ExpenseRequestKandangDetailExpense: React.FC<
|
||||
</div>
|
||||
)}
|
||||
|
||||
{formik.values.kandangExpenses.map(
|
||||
(kandangExpense, kandangExpenseIdx) => {
|
||||
const kandangName = formik.values.kandangs?.find(
|
||||
(kandang) => kandang.id === kandangExpense.kandangId
|
||||
);
|
||||
{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.kandang_id
|
||||
);
|
||||
|
||||
return (
|
||||
kandangName?.name && (
|
||||
<div
|
||||
key={`kandangExpense-${kandangExpenseIdx}`}
|
||||
className='w-full flex flex-col gap-4'
|
||||
>
|
||||
<div>
|
||||
<h5 className='mb-2 text-lg font-bold text-center'>
|
||||
Biaya {kandangName?.name}
|
||||
</h5>
|
||||
return (
|
||||
kandangName?.name && (
|
||||
<div
|
||||
key={`kandangExpense-${kandangExpenseIdx}`}
|
||||
className='w-full flex flex-col gap-4'
|
||||
>
|
||||
<div>
|
||||
<h5 className='mb-2 text-lg font-bold text-center'>
|
||||
Biaya {kandangName?.name}
|
||||
</h5>
|
||||
|
||||
<div className='overflow-x-auto'>
|
||||
<table className='table'>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Nonstock</th>
|
||||
<th>Total Kuantitas</th>
|
||||
<th>Total Biaya</th>
|
||||
<th>Catatan</th>
|
||||
{type !== 'detail' && <th>Aksi</th>}
|
||||
</tr>
|
||||
</thead>
|
||||
<div className='overflow-x-auto'>
|
||||
<table className='table'>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Nonstock</th>
|
||||
<th>Total Kuantitas</th>
|
||||
<th>Total Biaya</th>
|
||||
<th>Catatan</th>
|
||||
{type !== 'detail' && <th>Aksi</th>}
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
{kandangExpense.expenses.map(
|
||||
(expenseItem, expenseIdx) => (
|
||||
<tr key={`expense-${expenseIdx}`}>
|
||||
<td className='p-2'>
|
||||
<SelectInput
|
||||
placeholder='Pilih Nonstock'
|
||||
value={expenseItem.nonstock}
|
||||
onChange={(val) => {
|
||||
nonstockChangeHandler(
|
||||
kandangExpenseIdx,
|
||||
expenseIdx,
|
||||
val
|
||||
);
|
||||
}}
|
||||
options={nonstockOptions}
|
||||
isLoading={isLoadingNonstockOptions}
|
||||
onInputChange={setNonstockInputValue}
|
||||
className={{ wrapper: 'min-w-48' }}
|
||||
/>
|
||||
</td>
|
||||
|
||||
<td className='p-2'>
|
||||
<NumberInput
|
||||
required
|
||||
name={`kandangExpenses[${kandangExpenseIdx}].expenses[${expenseIdx}].totalQuantity`}
|
||||
placeholder='Masukkan Total Kuantitas'
|
||||
value={
|
||||
formik.values.kandangExpenses[
|
||||
kandangExpenseIdx
|
||||
].expenses[expenseIdx].totalQuantity ?? ''
|
||||
}
|
||||
onChange={formik.handleChange}
|
||||
onBlur={formik.handleBlur}
|
||||
isError={isExpenseRepeaterInputError(
|
||||
'totalQuantity',
|
||||
kandangExpenseIdx,
|
||||
expenseIdx
|
||||
)}
|
||||
className={{ wrapper: 'min-w-24' }}
|
||||
/>
|
||||
</td>
|
||||
|
||||
<td className='p-2'>
|
||||
<NumberInput
|
||||
name={`kandangExpenses[${kandangExpenseIdx}].expenses[${expenseIdx}].totalExpense`}
|
||||
placeholder='Masukkan Total Biaya'
|
||||
value={
|
||||
formik.values.kandangExpenses[
|
||||
kandangExpenseIdx
|
||||
].expenses[expenseIdx].totalExpense ?? ''
|
||||
}
|
||||
onChange={formik.handleChange}
|
||||
onBlur={formik.handleBlur}
|
||||
isError={isExpenseRepeaterInputError(
|
||||
'totalExpense',
|
||||
kandangExpenseIdx,
|
||||
expenseIdx
|
||||
)}
|
||||
inputPrefix={
|
||||
<span className='text-gray-600 font-medium'>
|
||||
Rp
|
||||
</span>
|
||||
}
|
||||
className={{ wrapper: 'min-w-24' }}
|
||||
/>
|
||||
</td>
|
||||
|
||||
<td className='p-2'>
|
||||
<TextInput
|
||||
name={`kandangExpenses[${kandangExpenseIdx}].expenses[${expenseIdx}].notes`}
|
||||
placeholder='Tuliskan catatan'
|
||||
value={
|
||||
formik.values.kandangExpenses[
|
||||
kandangExpenseIdx
|
||||
].expenses[expenseIdx].notes ?? ''
|
||||
}
|
||||
onChange={formik.handleChange}
|
||||
onBlur={formik.handleBlur}
|
||||
isError={isExpenseRepeaterInputError(
|
||||
'notes',
|
||||
kandangExpenseIdx,
|
||||
expenseIdx
|
||||
)}
|
||||
className={{ wrapper: 'min-w-24' }}
|
||||
/>
|
||||
</td>
|
||||
|
||||
{type !== 'detail' && (
|
||||
<td>
|
||||
<Button
|
||||
type='button'
|
||||
color='error'
|
||||
onClick={() =>
|
||||
deleteExpenseItemHandler(
|
||||
<tbody>
|
||||
{kandangExpense.cost_items.map(
|
||||
(expenseItem, expenseIdx) => (
|
||||
<tr key={`expense-${expenseIdx}`}>
|
||||
<td className='p-2'>
|
||||
<SelectInput
|
||||
placeholder='Pilih Nonstock'
|
||||
value={expenseItem.nonstock}
|
||||
onChange={(val) => {
|
||||
nonstockChangeHandler(
|
||||
kandangExpenseIdx,
|
||||
expenseIdx
|
||||
)
|
||||
}
|
||||
>
|
||||
<Icon
|
||||
icon='material-symbols:delete-outline-rounded'
|
||||
width={24}
|
||||
height={24}
|
||||
/>
|
||||
</Button>
|
||||
expenseIdx,
|
||||
val
|
||||
);
|
||||
}}
|
||||
options={nonstockOptions}
|
||||
isLoading={isLoadingNonstockOptions}
|
||||
onInputChange={setNonstockInputValue}
|
||||
className={{ wrapper: 'min-w-48' }}
|
||||
/>
|
||||
</td>
|
||||
)}
|
||||
</tr>
|
||||
)
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{type !== 'detail' && (
|
||||
<Button
|
||||
type='button'
|
||||
variant='outline'
|
||||
color='success'
|
||||
onClick={() => addExpenseItemHandler(kandangExpenseIdx)}
|
||||
className='w-fit mx-auto'
|
||||
>
|
||||
<Icon icon='ic:round-plus' width={24} height={24} />{' '}
|
||||
Tambah
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
);
|
||||
}
|
||||
)}
|
||||
<td className='p-2'>
|
||||
<NumberInput
|
||||
required
|
||||
name={`cost_per_kandangs[${kandangExpenseIdx}].cost_items[${expenseIdx}].quantity`}
|
||||
placeholder='Masukkan Total Kuantitas'
|
||||
value={
|
||||
formik.values.cost_per_kandangs[
|
||||
kandangExpenseIdx
|
||||
].cost_items[expenseIdx].quantity ?? ''
|
||||
}
|
||||
onChange={formik.handleChange}
|
||||
onBlur={formik.handleBlur}
|
||||
isError={isExpenseRepeaterInputError(
|
||||
'quantity',
|
||||
kandangExpenseIdx,
|
||||
expenseIdx
|
||||
)}
|
||||
className={{ wrapper: 'min-w-24' }}
|
||||
/>
|
||||
</td>
|
||||
|
||||
<td className='p-2'>
|
||||
<NumberInput
|
||||
name={`cost_per_kandangs[${kandangExpenseIdx}].cost_items[${expenseIdx}].total_cost`}
|
||||
placeholder='Masukkan Total Biaya'
|
||||
value={
|
||||
formik.values.cost_per_kandangs[
|
||||
kandangExpenseIdx
|
||||
].cost_items[expenseIdx].total_cost ??
|
||||
''
|
||||
}
|
||||
onChange={formik.handleChange}
|
||||
onBlur={formik.handleBlur}
|
||||
isError={isExpenseRepeaterInputError(
|
||||
'total_cost',
|
||||
kandangExpenseIdx,
|
||||
expenseIdx
|
||||
)}
|
||||
inputPrefix={
|
||||
<span className='text-gray-600 font-medium'>
|
||||
Rp
|
||||
</span>
|
||||
}
|
||||
className={{ wrapper: 'min-w-24' }}
|
||||
/>
|
||||
</td>
|
||||
|
||||
<td className='p-2'>
|
||||
<TextInput
|
||||
name={`cost_per_kandangs[${kandangExpenseIdx}].cost_items[${expenseIdx}].notes`}
|
||||
placeholder='Tuliskan catatan'
|
||||
value={
|
||||
formik.values.cost_per_kandangs[
|
||||
kandangExpenseIdx
|
||||
].cost_items[expenseIdx].notes ?? ''
|
||||
}
|
||||
onChange={formik.handleChange}
|
||||
onBlur={formik.handleBlur}
|
||||
isError={isExpenseRepeaterInputError(
|
||||
'notes',
|
||||
kandangExpenseIdx,
|
||||
expenseIdx
|
||||
)}
|
||||
className={{ wrapper: 'min-w-24' }}
|
||||
/>
|
||||
</td>
|
||||
|
||||
{type !== 'detail' && (
|
||||
<td>
|
||||
<Button
|
||||
type='button'
|
||||
color='error'
|
||||
onClick={() =>
|
||||
deleteExpenseItemHandler(
|
||||
kandangExpenseIdx,
|
||||
expenseIdx
|
||||
)
|
||||
}
|
||||
>
|
||||
<Icon
|
||||
icon='material-symbols:delete-outline-rounded'
|
||||
width={24}
|
||||
height={24}
|
||||
/>
|
||||
</Button>
|
||||
</td>
|
||||
)}
|
||||
</tr>
|
||||
)
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{type !== 'detail' && (
|
||||
<Button
|
||||
type='button'
|
||||
variant='outline'
|
||||
color='success'
|
||||
onClick={() => addExpenseItemHandler(kandangExpenseIdx)}
|
||||
className='w-fit mx-auto'
|
||||
>
|
||||
<Icon icon='ic:round-plus' width={24} height={24} />{' '}
|
||||
Tambah
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
);
|
||||
}
|
||||
)}
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user