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 | 1x 1x 2x 2x 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 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 2x 2x 2x | import { FC } from 'react'
import { Form, FormMode, useTranslate } from '@/shared/lib'
import { FormBlockWrapper } from '@/shared/ui'
import { Controller } from 'react-hook-form'
import { Button, Input } from '@tmk/ui-kit'
import { ContractGroup } from '@/entities/contract'
import {
getDefaultWarehouseFormValues,
useWarehouseMutate,
warehouseCreateValidationSchema,
} from '@/features/warehouse-mutation'
import { useRouter } from 'next/router'
import { WAREHOUSE_PAGE, Warehouse, useWarehouse } from '@/entities/warehouse'
import { PERMISSION_EDIT_WAREHOUSE_NAME, RoleProvider } from '@/features/rolevik'
export interface WarehouseMutationFormProps {
mode: FormMode
}
export const WarehouseMutationForm: FC<WarehouseMutationFormProps> = ({ mode }) => {
const { t } = useTranslate(['accounting-object', 'common'])
const isCreateMode = mode === FormMode.Create
const router = useRouter()
const { data } = useWarehouse(router.query.pid as string, {
enabled: !!router.query.pid,
key: [router.query.pid as string],
})
const { submitHandler, isLoading, CancelModal, openModal } = useWarehouseMutate(mode)
const handleOnCancelClick = (touchedFields: Partial<Readonly<unknown>>) => {
Object.keys(touchedFields).length !== 0 ? openModal(() => router.push(WAREHOUSE_PAGE)) : router.push(WAREHOUSE_PAGE)
}
return (
<>
<CancelModal />
<Form<Warehouse>
formParams={{
...(isCreateMode && { defaultValues: getDefaultWarehouseFormValues() }),
values: data,
}}
// @ts-expect-error
validationSchema={warehouseCreateValidationSchema(t)}
onSubmit={async data => {
await submitHandler(data)
}}
onError={error => console.error(error)}
>
{({ control, formState: { touchedFields } }) => (
<div className='flex flex-col gap-y-2.5'>
<RoleProvider availablePermissions={[PERMISSION_EDIT_WAREHOUSE_NAME]} emptySpace>
<div className='bg-white w-full px-5 py-4 mt-2.5 grid grid-cols-8'>
<FormBlockWrapper className='col-span-2'>
<Controller
render={({ field, fieldState: { error } }) => (
<Input error={error} label={t('Warehouse name')} {...field} />
)}
name='name'
control={control}
/>
</FormBlockWrapper>
</div>
</RoleProvider>
<ContractGroup />
<div className='flex items-center justify-end gap-x-2.5 px-5 py-4'>
<Button variant='outlined' color='secondary' onClick={() => handleOnCancelClick(touchedFields)}>
<h2>{t('common:Cancel')}</h2>
</Button>
<Button type='submit' loading={isLoading}>
<h2>{t('common:Save')}</h2>
</Button>
</div>
</div>
)}
</Form>
</>
)
}
|