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 | 1x 1x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 1x 3x 3x 1x 1x 1x 3x 3x 3x 3x 3x 3x 3x 2x 2x 2x 2x 2x 2x 2x 2x 3x 3x 3x 3x 3x 3x 3x 2x 2x 2x 2x 2x 3x 3x 3x 3x 3x | import { FC, useEffect, useState } from 'react'
import { FormBlockWrapper } from '@/shared/ui'
import { Controller, useFormContext } from 'react-hook-form'
import { Datepicker, RadioGroup } from '@tmk/ui-kit'
import { normalizeSelectOptionsFromEnum } from '@/shared/helpers'
import { PipeStateForRepairEnum } from '@/entities/pipe'
import { useTranslate } from '@/shared/lib'
import {
CLOSE_OPERATION_MODAL_OPTIONS,
OperationRepairForm,
useCloseOperationModal,
} from '@/entities/accounting-object'
export const OperationRepairBaseInfo: FC = () => {
const { t } = useTranslate(['accounting-object', 'common'])
const [isFirstRender, setIsFirstRender] = useState(true)
const { isOperationFormHasChange, setIsOperationFormHasChanges, setCloseOperationModalOption } =
useCloseOperationModal()
const {
control,
formState: { errors },
watch,
} = useFormContext<OperationRepairForm>()
useEffect(() => {
setCloseOperationModalOption(CLOSE_OPERATION_MODAL_OPTIONS.WITHOUT_CONFIRM)
}, [])
useEffect(() => {
const subscription = watch(() => {
if (isOperationFormHasChange) setCloseOperationModalOption(CLOSE_OPERATION_MODAL_OPTIONS.WITH_CONFIRM)
if (isFirstRender) {
setIsFirstRender(false)
} else {
setIsOperationFormHasChanges(true)
}
})
return () => subscription.unsubscribe()
}, [watch, isOperationFormHasChange, isFirstRender, setCloseOperationModalOption, setIsOperationFormHasChanges])
return (
<FormBlockWrapper childrenClassName='flex gap-5 items-center'>
<Controller
name='date'
control={control}
render={({ field, fieldState: { error } }) => (
<Datepicker
inputProps={{
label: t('Operation date') + ' *',
error,
}}
className='col-span-1 !w-[360px]'
{...field}
/>
)}
/>
<div className='flex flex-col gap-y-3'>
<span className='text-main-regular'>{t('Pipes_state') + ' *'}</span>
<Controller
name='newPipeState'
control={control}
render={({ field }) => (
<RadioGroup
{...field}
className='flex items-center gap-x-5'
options={normalizeSelectOptionsFromEnum(PipeStateForRepairEnum, t)}
/>
)}
/>
{errors?.newPipeState?.message && <span className='text-sm text-red'>{errors?.newPipeState?.message}</span>}
</div>
</FormBlockWrapper>
)
}
|