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 | 1x 1x | import { FC } from 'react'
import dayjs from 'dayjs'
import { DEFAULT_DATE_FORMAT } from '@/shared/config'
import { BaseInfoPassport } from '@/features/passport'
import { getLink } from '@/shared/helpers'
import { ChangeLogValue, DocumentFile, NewValue } from '@/entities/change-log'
import { DocumentModal, selectedRepairAtom } from '@/entities/accounting-object'
import { useTranslate } from '@/shared/lib'
import { useAtomValue } from 'jotai'
import { useDocumentsCollection } from '@/entities/documents'
export interface RepairDetailsModalProps {
isModalOpen: boolean
onClose: () => void
}
export const RepairDetailsModal: FC<RepairDetailsModalProps> = ({ isModalOpen, onClose }) => {
const { t } = useTranslate(['accounting-object', 'common'])
const selectedOperation = useAtomValue(selectedRepairAtom)
const isDocumentsChanged = !!selectedOperation?.metadata?.data?.documents?.length
const isLinksChanged = !!selectedOperation?.metadata?.data?.links?.length
const documentsIRIs = selectedOperation?.metadata.data?.documents
const { data: documents, isLoading: isLoadingDocuments } = useDocumentsCollection({
enabled: documentsIRIs && documentsIRIs?.length >= 0,
filters: {
id: documentsIRIs as string[],
},
key: ['repair-details-documents', selectedOperation?.id as string],
})
return (
<DocumentModal isModalOpen={isModalOpen} onClose={onClose}>
<div className='flex flex-col gap-y-2.5 text-center'>
<h1>{t('Learn_more_about_the_changes')}</h1>
<span className='text-min'>
{t(`common:${selectedOperation?.name}`)}:{' '}
<span className='text-min-semibold'>
{selectedOperation?.performedByDisplayName}, {dayjs(selectedOperation?.date).format(DEFAULT_DATE_FORMAT)}
</span>
</span>
</div>
<div className='grid grid-cols-2 gap-2.5'>
{Object.entries(selectedOperation?.metadata?.changePipes || {}).map(([key, value]) => (
<div
key={'repair-details-modal' + key}
className='flex flex-col py-2 px-3 gap-y-1 rounded-base bg-gray-secondary'
>
<span className='text-main-semibold'>{key}</span>
<ChangeLogValue value={value as NewValue} t={t} />
</div>
))}
</div>
{isLinksChanged && (
<div className='flex flex-col bg-gray-secondary p-4 gap-y-2.5 w-full rounded-base'>
<h2>{t('Links')}</h2>
{selectedOperation?.metadata?.data?.links?.map((link, index) => (
<BaseInfoPassport
isLink
isTruncated
maxWidth={245}
className='w-[245px] !bg-gray-tertiary'
title={`${t('Link for document')} ${index + 1}`}
value={getLink(link.link)}
customTitle={link.name}
key={link.link}
/>
))}
</div>
)}
{isDocumentsChanged && (
<div className='flex flex-col bg-gray-secondary p-4 gap-y-2.5 w-full rounded-base'>
<h2>{t('common:Documents')}</h2>
{documents?.['hydra:member']?.map(document => (
<DocumentFile
key={document.id}
id={document.id}
fileFromParent={document.file}
isNeedDocument={false}
className='!w-full'
isFileFromParent
isLoadingFileFromParent={isLoadingDocuments}
/>
))}
</div>
)}
</DocumentModal>
)
}
|