mirror of
https://gitlab.com/mbugroup/lti-web-client.git
synced 2026-05-20 13:32:00 +00:00
refactor(FE-62): enhance MovementForm by integrating NumberInput for delivery cost fields and improving layout
This commit is contained in:
@@ -7,6 +7,7 @@ import useSWR from 'swr';
|
||||
import { Icon } from '@iconify/react';
|
||||
import Button from '@/components/Button';
|
||||
import TextInput from '@/components/input/TextInput';
|
||||
import NumberInput from '@/components/input/NumberInput';
|
||||
import SelectInput, { OptionType } from '@/components/input/SelectInput';
|
||||
import { FormHeader } from '@/components/helper/form/FormHeader';
|
||||
import { FormActions } from '@/components/helper/form/FormActions';
|
||||
@@ -1299,27 +1300,35 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
|
||||
</td>
|
||||
<td>
|
||||
{type === 'detail' ? (
|
||||
<Button
|
||||
color='primary'
|
||||
className='w-full min-w-52 flex items-center justify-center gap-2'
|
||||
disabled={!delivery.document_path}
|
||||
href={delivery.document_path ?? undefined}
|
||||
target='_blank'
|
||||
rel='noopener noreferrer'
|
||||
>
|
||||
{delivery.document_path ? (
|
||||
<>
|
||||
<Icon
|
||||
icon='material-symbols:file-open-outline'
|
||||
width={20}
|
||||
height={20}
|
||||
/>
|
||||
Lihat Dokumen
|
||||
</>
|
||||
) : (
|
||||
'-'
|
||||
)}
|
||||
</Button>
|
||||
<>
|
||||
<div className='flex flex-col items-start gap-2'>
|
||||
<Button
|
||||
color='primary'
|
||||
className='w-full min-w-52 flex items-center justify-center gap-2'
|
||||
disabled={!delivery.document_path}
|
||||
href={delivery.document_path ?? undefined}
|
||||
target='_blank'
|
||||
rel='noopener noreferrer'
|
||||
>
|
||||
{delivery.document_path ? (
|
||||
<>
|
||||
<Icon
|
||||
icon='material-symbols:file-open-outline'
|
||||
width={20}
|
||||
height={20}
|
||||
/>
|
||||
Lihat Dokumen
|
||||
</>
|
||||
) : (
|
||||
'-'
|
||||
)}
|
||||
</Button>
|
||||
<FieldMessage
|
||||
message={null}
|
||||
isVisible={false}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<FileInput
|
||||
name={`deliveries.${idx}.document`}
|
||||
@@ -1352,15 +1361,17 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
|
||||
)}
|
||||
</td>
|
||||
<td>
|
||||
<TextInput
|
||||
<NumberInput
|
||||
required
|
||||
type='number'
|
||||
name={`deliveries.${idx}.delivery_cost`}
|
||||
value={delivery.delivery_cost || ''}
|
||||
onChange={(e) =>
|
||||
handleDeliveryCostChange(idx, e.target.value)
|
||||
}
|
||||
onBlur={formik.handleBlur}
|
||||
maskType='currency'
|
||||
decimals={0}
|
||||
min={0}
|
||||
{...isRepeaterInputError(
|
||||
'deliveries',
|
||||
'delivery_cost',
|
||||
@@ -1368,14 +1379,14 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
|
||||
)}
|
||||
readOnly={type === 'detail'}
|
||||
className={{
|
||||
wrapper: 'w-full min-w-48',
|
||||
wrapper:
|
||||
'w-full min-w-52 md:min-w-72 lg:min-w-80',
|
||||
}}
|
||||
/>
|
||||
</td>
|
||||
<td>
|
||||
<TextInput
|
||||
<NumberInput
|
||||
required
|
||||
type='number'
|
||||
name={`deliveries.${idx}.delivery_cost_per_item`}
|
||||
value={delivery.delivery_cost_per_item || ''}
|
||||
onChange={(e) =>
|
||||
@@ -1385,6 +1396,9 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
|
||||
)
|
||||
}
|
||||
onBlur={formik.handleBlur}
|
||||
maskType='currency'
|
||||
decimals={0}
|
||||
min={0}
|
||||
{...isRepeaterInputError(
|
||||
'deliveries',
|
||||
'delivery_cost_per_item',
|
||||
@@ -1392,7 +1406,8 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
|
||||
)}
|
||||
readOnly={type === 'detail'}
|
||||
className={{
|
||||
wrapper: 'w-full min-w-48',
|
||||
wrapper:
|
||||
'w-full min-w-52 md:min-w-72 lg:min-w-80',
|
||||
}}
|
||||
/>
|
||||
</td>
|
||||
|
||||
Reference in New Issue
Block a user