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 | 1x 1x | import { FC, useState } from 'react'
import { Controller, useFieldArray, useFormContext } from 'react-hook-form'
import { Button } from '@tmk/ui-kit'
import cn from 'classnames'
import { CustomPropertyFormValue, SelectPropertyModal, useDeleteProperty } from '@/entities/property'
import { FieldErrorNested, getFormField, useTranslate } from '@/shared/lib'
import PlusIcon from '@/shared/assets/icons/common/plus.svg'
import TrashIcon from '@/shared/assets/icons/common/TrashIcon.svg'
import { getIdFromIRI } from '@/shared/helpers'
export interface CustomPropertiesFormProps {
isGroupEditing?: boolean
}
export const CustomPropertiesForm: FC<CustomPropertiesFormProps> = ({ isGroupEditing }) => {
const { t } = useTranslate(['accounting-object', 'common'])
const [isOpenSelectProperty, setIsOpenSelectProperty] = useState(false)
const { control } = useFormContext()
const {
fields: customProperties,
append: onAppendProperty,
remove: onRemoveProperty,
} = useFieldArray({
control,
name: 'customProperties',
})
const { mutate: deleteProperty } = useDeleteProperty()
const handleDeleteProperty = (propertyIndex: number) => {
const isLocalCustomProperty = (customProperties as CustomPropertyFormValue[])[propertyIndex]['@id'].includes(
'properties'
)
onRemoveProperty(propertyIndex)
if (!isGroupEditing && !isLocalCustomProperty) {
const propertyHashToDelete = getIdFromIRI((customProperties as CustomPropertyFormValue[])[propertyIndex]['@id'])
deleteProperty({ id: propertyHashToDelete as string })
}
}
return (
<>
<div className={cn('bg-white w-full px-5 py-4 flex flex-col', { 'gap-y-2.5': customProperties?.length > 0 })}>
<div className='flex items-center gap-x-2.5'>
<h2>{t('custom_properties')}</h2>
<Button variant='border-icon' onClick={() => setIsOpenSelectProperty(true)}>
<PlusIcon className='stroke-currentColor' />
</Button>
</div>
<div className='grid grid-cols-3 gap-2.5'>
{customProperties.map((customProperty, index) => (
<div key={customProperty.id} className='p-4 bg-gray-tertiary rounded-base'>
<Controller
control={control}
name={`customProperties.${index}`}
render={({ field, fieldState: { error } }) => {
const { label: propertyLabel, fieldType: propertyFieldType, value: propertyValue } = field.value
const fieldError = {
value: { ...error, ...(error && { message: t('common:Required_field') }) },
} as FieldErrorNested
return (
<div className='flex items-end gap-x-2.5'>
{getFormField({
field: field,
label: propertyLabel,
value: propertyValue,
valueAsObject: true,
type: propertyFieldType,
t: t,
error: fieldError,
})}
<Button
variant='icon'
className={cn('py-[8.5px]', {
'self-center': fieldError.value?.message,
'self-end': !fieldError,
})}
onClick={() => handleDeleteProperty(index)}
>
<TrashIcon className='fill-blue-dark' />
</Button>
</div>
)
}}
/>
</div>
))}
</div>
</div>
<SelectPropertyModal
isOpenSelectProperty={isOpenSelectProperty}
onCloseSelectProperty={() => setIsOpenSelectProperty(false)}
onAppendProperty={onAppendProperty}
/>
</>
)
}
|