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 { Icon } from '@iconify/react';
|
||||||
import Button from '@/components/Button';
|
import Button from '@/components/Button';
|
||||||
import TextInput from '@/components/input/TextInput';
|
import TextInput from '@/components/input/TextInput';
|
||||||
|
import NumberInput from '@/components/input/NumberInput';
|
||||||
import SelectInput, { OptionType } from '@/components/input/SelectInput';
|
import SelectInput, { OptionType } from '@/components/input/SelectInput';
|
||||||
import { FormHeader } from '@/components/helper/form/FormHeader';
|
import { FormHeader } from '@/components/helper/form/FormHeader';
|
||||||
import { FormActions } from '@/components/helper/form/FormActions';
|
import { FormActions } from '@/components/helper/form/FormActions';
|
||||||
@@ -1299,27 +1300,35 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
|
|||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
{type === 'detail' ? (
|
{type === 'detail' ? (
|
||||||
<Button
|
<>
|
||||||
color='primary'
|
<div className='flex flex-col items-start gap-2'>
|
||||||
className='w-full min-w-52 flex items-center justify-center gap-2'
|
<Button
|
||||||
disabled={!delivery.document_path}
|
color='primary'
|
||||||
href={delivery.document_path ?? undefined}
|
className='w-full min-w-52 flex items-center justify-center gap-2'
|
||||||
target='_blank'
|
disabled={!delivery.document_path}
|
||||||
rel='noopener noreferrer'
|
href={delivery.document_path ?? undefined}
|
||||||
>
|
target='_blank'
|
||||||
{delivery.document_path ? (
|
rel='noopener noreferrer'
|
||||||
<>
|
>
|
||||||
<Icon
|
{delivery.document_path ? (
|
||||||
icon='material-symbols:file-open-outline'
|
<>
|
||||||
width={20}
|
<Icon
|
||||||
height={20}
|
icon='material-symbols:file-open-outline'
|
||||||
/>
|
width={20}
|
||||||
Lihat Dokumen
|
height={20}
|
||||||
</>
|
/>
|
||||||
) : (
|
Lihat Dokumen
|
||||||
'-'
|
</>
|
||||||
)}
|
) : (
|
||||||
</Button>
|
'-'
|
||||||
|
)}
|
||||||
|
</Button>
|
||||||
|
<FieldMessage
|
||||||
|
message={null}
|
||||||
|
isVisible={false}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
) : (
|
) : (
|
||||||
<FileInput
|
<FileInput
|
||||||
name={`deliveries.${idx}.document`}
|
name={`deliveries.${idx}.document`}
|
||||||
@@ -1352,15 +1361,17 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
|
|||||||
)}
|
)}
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
<TextInput
|
<NumberInput
|
||||||
required
|
required
|
||||||
type='number'
|
|
||||||
name={`deliveries.${idx}.delivery_cost`}
|
name={`deliveries.${idx}.delivery_cost`}
|
||||||
value={delivery.delivery_cost || ''}
|
value={delivery.delivery_cost || ''}
|
||||||
onChange={(e) =>
|
onChange={(e) =>
|
||||||
handleDeliveryCostChange(idx, e.target.value)
|
handleDeliveryCostChange(idx, e.target.value)
|
||||||
}
|
}
|
||||||
onBlur={formik.handleBlur}
|
onBlur={formik.handleBlur}
|
||||||
|
maskType='currency'
|
||||||
|
decimals={0}
|
||||||
|
min={0}
|
||||||
{...isRepeaterInputError(
|
{...isRepeaterInputError(
|
||||||
'deliveries',
|
'deliveries',
|
||||||
'delivery_cost',
|
'delivery_cost',
|
||||||
@@ -1368,14 +1379,14 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
|
|||||||
)}
|
)}
|
||||||
readOnly={type === 'detail'}
|
readOnly={type === 'detail'}
|
||||||
className={{
|
className={{
|
||||||
wrapper: 'w-full min-w-48',
|
wrapper:
|
||||||
|
'w-full min-w-52 md:min-w-72 lg:min-w-80',
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
<TextInput
|
<NumberInput
|
||||||
required
|
required
|
||||||
type='number'
|
|
||||||
name={`deliveries.${idx}.delivery_cost_per_item`}
|
name={`deliveries.${idx}.delivery_cost_per_item`}
|
||||||
value={delivery.delivery_cost_per_item || ''}
|
value={delivery.delivery_cost_per_item || ''}
|
||||||
onChange={(e) =>
|
onChange={(e) =>
|
||||||
@@ -1385,6 +1396,9 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
|
|||||||
)
|
)
|
||||||
}
|
}
|
||||||
onBlur={formik.handleBlur}
|
onBlur={formik.handleBlur}
|
||||||
|
maskType='currency'
|
||||||
|
decimals={0}
|
||||||
|
min={0}
|
||||||
{...isRepeaterInputError(
|
{...isRepeaterInputError(
|
||||||
'deliveries',
|
'deliveries',
|
||||||
'delivery_cost_per_item',
|
'delivery_cost_per_item',
|
||||||
@@ -1392,7 +1406,8 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
|
|||||||
)}
|
)}
|
||||||
readOnly={type === 'detail'}
|
readOnly={type === 'detail'}
|
||||||
className={{
|
className={{
|
||||||
wrapper: 'w-full min-w-48',
|
wrapper:
|
||||||
|
'w-full min-w-52 md:min-w-72 lg:min-w-80',
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
</td>
|
</td>
|
||||||
|
|||||||
Reference in New Issue
Block a user