2024-08-13 13:32:32 +02:00
|
|
|
import { Meta } from '../../types'
|
2024-08-15 17:48:05 +02:00
|
|
|
import { SigitCardDisplayInfo, SigitStatus, SignStatus } from '../../utils'
|
2024-08-06 12:42:21 +02:00
|
|
|
import { Link } from 'react-router-dom'
|
2024-09-13 18:13:34 +02:00
|
|
|
import { formatTimestamp, npubToHex } from '../../utils'
|
2024-08-06 12:42:21 +02:00
|
|
|
import { appPublicRoutes, appPrivateRoutes } from '../../routes'
|
|
|
|
import { Button, Divider, Tooltip } from '@mui/material'
|
|
|
|
import { DisplaySigner } from '../DisplaySigner'
|
|
|
|
import {
|
|
|
|
faArchive,
|
|
|
|
faCalendar,
|
|
|
|
faCopy,
|
|
|
|
faEye,
|
2024-08-22 18:58:30 +02:00
|
|
|
faFile,
|
|
|
|
faFileCircleExclamation
|
2024-08-06 12:42:21 +02:00
|
|
|
} from '@fortawesome/free-solid-svg-icons'
|
|
|
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
|
|
|
import { UserAvatarGroup } from '../UserAvatarGroup'
|
|
|
|
|
|
|
|
import styles from './style.module.scss'
|
2024-08-06 13:29:43 +02:00
|
|
|
import { getExtensionIconLabel } from '../getExtensionIconLabel'
|
2024-08-14 14:27:49 +02:00
|
|
|
import { useSigitMeta } from '../../hooks/useSigitMeta'
|
2024-08-22 18:58:30 +02:00
|
|
|
import { extractFileExtensions } from '../../utils/file'
|
2024-08-06 12:42:21 +02:00
|
|
|
|
|
|
|
type SigitProps = {
|
2024-09-11 13:30:39 +02:00
|
|
|
sigitCreateId: string
|
2024-08-06 12:42:21 +02:00
|
|
|
meta: Meta
|
2024-08-12 14:26:03 +02:00
|
|
|
parsedMeta: SigitCardDisplayInfo
|
2024-08-06 12:42:21 +02:00
|
|
|
}
|
|
|
|
|
2024-09-11 13:30:39 +02:00
|
|
|
export const DisplaySigit = ({
|
|
|
|
meta,
|
|
|
|
parsedMeta,
|
|
|
|
sigitCreateId: sigitCreateId
|
|
|
|
}: SigitProps) => {
|
2024-08-22 18:58:30 +02:00
|
|
|
const { title, createdAt, submittedBy, signers, signedStatus, isValid } =
|
|
|
|
parsedMeta
|
2024-08-06 12:42:21 +02:00
|
|
|
|
2024-08-22 18:58:30 +02:00
|
|
|
const { signersStatus, fileHashes } = useSigitMeta(meta)
|
|
|
|
const { extensions, isSame } = extractFileExtensions(Object.keys(fileHashes))
|
|
|
|
|
2024-08-06 12:42:21 +02:00
|
|
|
return (
|
2024-08-06 13:38:33 +02:00
|
|
|
<div className={styles.itemWrapper}>
|
2024-09-11 17:29:47 +02:00
|
|
|
{signedStatus === SigitStatus.Complete && (
|
|
|
|
<Link
|
|
|
|
to={appPublicRoutes.verify}
|
|
|
|
state={{ meta }}
|
|
|
|
className={styles.insetLink}
|
|
|
|
></Link>
|
|
|
|
)}
|
|
|
|
{signedStatus !== SigitStatus.Complete && (
|
|
|
|
<Link
|
|
|
|
to={`${appPrivateRoutes.sign}/${sigitCreateId}`}
|
|
|
|
className={styles.insetLink}
|
|
|
|
></Link>
|
|
|
|
)}
|
2024-08-06 12:42:21 +02:00
|
|
|
<p className={`line-clamp-2 ${styles.title}`}>{title}</p>
|
|
|
|
<div className={styles.users}>
|
2024-09-13 18:13:34 +02:00
|
|
|
{submittedBy && (
|
|
|
|
<DisplaySigner
|
|
|
|
status={isValid ? SignStatus.Signed : SignStatus.Invalid}
|
|
|
|
pubkey={submittedBy}
|
|
|
|
/>
|
|
|
|
)}
|
2024-08-06 12:42:21 +02:00
|
|
|
{submittedBy && signers.length ? (
|
|
|
|
<Divider orientation="vertical" flexItem />
|
|
|
|
) : null}
|
2024-08-13 17:26:21 +02:00
|
|
|
<UserAvatarGroup max={7}>
|
2024-08-06 12:42:21 +02:00
|
|
|
{signers.map((signer) => {
|
|
|
|
const pubkey = npubToHex(signer)!
|
|
|
|
return (
|
2024-09-13 18:13:34 +02:00
|
|
|
<DisplaySigner
|
|
|
|
key={pubkey}
|
|
|
|
status={signersStatus[signer]}
|
|
|
|
pubkey={pubkey}
|
|
|
|
/>
|
2024-08-06 12:42:21 +02:00
|
|
|
)
|
|
|
|
})}
|
|
|
|
</UserAvatarGroup>
|
|
|
|
</div>
|
2024-09-13 18:13:34 +02:00
|
|
|
<div className={`${styles.details} ${styles.iconLabel}`}>
|
2024-08-06 12:42:21 +02:00
|
|
|
<FontAwesomeIcon icon={faCalendar} />
|
2024-08-07 14:15:20 +02:00
|
|
|
{createdAt ? formatTimestamp(createdAt) : null}
|
2024-08-06 12:42:21 +02:00
|
|
|
</div>
|
|
|
|
<div className={`${styles.details} ${styles.status}`}>
|
|
|
|
<span className={styles.iconLabel}>
|
|
|
|
<FontAwesomeIcon icon={faEye} /> {signedStatus}
|
|
|
|
</span>
|
2024-08-22 18:58:30 +02:00
|
|
|
{extensions.length > 0 ? (
|
2024-08-06 13:29:43 +02:00
|
|
|
<span className={styles.iconLabel}>
|
2024-08-22 18:58:30 +02:00
|
|
|
{!isSame ? (
|
2024-08-06 13:29:43 +02:00
|
|
|
<>
|
|
|
|
<FontAwesomeIcon icon={faFile} /> Multiple File Types
|
|
|
|
</>
|
|
|
|
) : (
|
2024-08-22 18:58:30 +02:00
|
|
|
getExtensionIconLabel(extensions[0])
|
2024-08-06 13:29:43 +02:00
|
|
|
)}
|
|
|
|
</span>
|
2024-08-22 18:58:30 +02:00
|
|
|
) : (
|
|
|
|
<>
|
|
|
|
<FontAwesomeIcon icon={faFileCircleExclamation} /> —
|
|
|
|
</>
|
|
|
|
)}
|
2024-08-06 12:42:21 +02:00
|
|
|
</div>
|
|
|
|
<div className={styles.itemActions}>
|
|
|
|
<Tooltip title="Duplicate" arrow placement="top" disableInteractive>
|
|
|
|
<Button
|
|
|
|
sx={{
|
|
|
|
color: 'var(--primary-main)',
|
|
|
|
minWidth: '34px',
|
|
|
|
padding: '10px'
|
|
|
|
}}
|
|
|
|
variant={'text'}
|
|
|
|
>
|
|
|
|
<FontAwesomeIcon icon={faCopy} />
|
|
|
|
</Button>
|
|
|
|
</Tooltip>
|
|
|
|
<Tooltip title="Archive" arrow placement="top" disableInteractive>
|
|
|
|
<Button
|
|
|
|
sx={{
|
|
|
|
color: 'var(--primary-main)',
|
|
|
|
minWidth: '34px',
|
|
|
|
padding: '10px'
|
|
|
|
}}
|
|
|
|
variant={'text'}
|
|
|
|
>
|
|
|
|
<FontAwesomeIcon icon={faArchive} />
|
|
|
|
</Button>
|
|
|
|
</Tooltip>
|
|
|
|
</div>
|
2024-08-06 13:38:33 +02:00
|
|
|
</div>
|
2024-08-06 12:42:21 +02:00
|
|
|
)
|
|
|
|
}
|