Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 | 1x 1x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 2x 2x 2x 2x 2x 2x 2x 2x 2x | import { FC, useState } from 'react'
import { Controller, useFieldArray, useFormContext } from 'react-hook-form'
import { getNestedFieldName, useTranslate } from '@/shared/lib'
import { Button, Input, Select } from '@tmk/ui-kit'
import { normalizeSelectOptionsFromEnum } from '@/shared/helpers'
import { AcceptanceTransportType, TransportVanItem } from '@/entities/accounting-object'
import TrashIcon from '@/shared/assets/icons/common/TrashIcon.svg'
import CloseOutlinedIcon from '@/shared/assets/icons/common/close-outlined.svg'
import SuccessOutlinedIcon from '@/shared/assets/icons/common/success-outlined.svg'
export interface TransportBlockProps {
parentName: string
remove: () => void
}
export const TransportBlock: FC<TransportBlockProps> = ({ parentName, remove }) => {
const { control, watch } = useFormContext()
const [vanNumber, setVanNumber] = useState<string>('')
const { t } = useTranslate(['accounting-object', 'common'])
const isTrain = watch(getNestedFieldName(parentName, 'type')) === AcceptanceTransportType.TRAIN
const {
fields,
append,
remove: removeVan,
} = useFieldArray({
control,
name: getNestedFieldName(parentName, 'vans'),
})
return (
<div className='flex flex-col gap-y-2.5 bg-gray-tertiary rounded-base p-4'>
<div className='flex items-center justify-between'>
<Controller
name={getNestedFieldName(parentName, 'type')}
control={control}
render={({ field, fieldState: { error } }) => (
<Select
label={t('common:Transport')}
className='max-w-[320px]'
options={normalizeSelectOptionsFromEnum(AcceptanceTransportType, t, {
translatePrefix: 'common:',
})}
t={t}
inputProps={{
error,
}}
{...field}
/>
)}
/>
<Button variant='icon' childrenClassName='flex items-center gap-x-2 mt-2.5' onClick={remove}>
<TrashIcon className='fill-blue-dark' />
<span className='text-main-semibold text-blue-dark'>{t('common:Delete')}</span>
</Button>
</div>
{isTrain && (
<div className='flex flex-col gap-y-2.5'>
<Input
name='vans_number'
className='max-w-[320px]'
value={vanNumber}
label={t('common:Add_vans_number')}
onChange={e => setVanNumber(e.target.value)}
onKeyDown={e => {
if (e.key === 'Enter' && vanNumber) {
e.preventDefault()
append({ number: vanNumber })
setVanNumber('')
}
}}
needShowClearButton={false}
{...(vanNumber && {
extraContent: (
<Button
variant='icon'
onClick={() => {
if (vanNumber) {
append({ number: vanNumber })
setVanNumber('')
}
}}
>
<SuccessOutlinedIcon className='fill-blue-dark' />
</Button>
),
})}
/>
<div className='flex items-center gap-2.5 flex-wrap'>
{fields.map((item, index) => (
<div
key={item.id}
className='flex items-center gap-x-2.5 rounded-base bg-white border border-border py-2 px-3'
>
<span className='text-black text-main-regular'>{(item as TransportVanItem)?.number}</span>
<Button variant='icon' onClick={() => removeVan(index)}>
<CloseOutlinedIcon className='fill-text-secondary stroke-text-secondary' />
</Button>
</div>
))}
</div>
</div>
)}
</div>
)
}
|