feat(verify-page): new verify page design #151
@ -1,6 +1,8 @@
|
|||||||
import { CurrentUserFile } from '../../types/file.ts'
|
import { CurrentUserFile } from '../../types/file.ts'
|
||||||
import styles from './style.module.scss'
|
import styles from './style.module.scss'
|
||||||
import { Button } from '@mui/material'
|
import { Button } from '@mui/material'
|
||||||
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
||||||
|
import { faCheck } from '@fortawesome/free-solid-svg-icons'
|
||||||
|
|
||||||
interface FileListProps {
|
interface FileListProps {
|
||||||
files: CurrentUserFile[]
|
files: CurrentUserFile[]
|
||||||
@ -26,8 +28,14 @@ const FileList = ({
|
|||||||
className={`${styles.fileItem} ${isActive(file) && styles.active}`}
|
className={`${styles.fileItem} ${isActive(file) && styles.active}`}
|
||||||
onClick={() => setCurrentFile(file)}
|
onClick={() => setCurrentFile(file)}
|
||||||
>
|
>
|
||||||
<span className={styles.fileNumber}>{file.id}</span>
|
<div className={styles.fileNumber}>{file.id}</div>
|
||||||
<span className={styles.fileName}>{file.filename}</span>
|
<div className={styles.fileInfo}>
|
||||||
|
<div className={styles.fileName}>{file.filename}</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className={styles.fileVisual}>
|
||||||
|
{file.isHashValid && <FontAwesomeIcon icon={faCheck} />}
|
||||||
|
</div>
|
||||||
</li>
|
</li>
|
||||||
))}
|
))}
|
||||||
</ul>
|
</ul>
|
||||||
|
@ -21,6 +21,12 @@ ul {
|
|||||||
padding: 0; /* Removes default padding */
|
padding: 0; /* Removes default padding */
|
||||||
}
|
}
|
||||||
|
|
||||||
|
li {
|
||||||
|
list-style-type: none; /* Removes the bullets */
|
||||||
|
margin: 0; /* Removes any default margin */
|
||||||
|
padding: 0; /* Removes any default padding */
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
.wrap {
|
.wrap {
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -83,6 +89,12 @@ ul {
|
|||||||
color: white;
|
color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.fileInfo {
|
||||||
|
flex-grow: 1;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
.fileName {
|
.fileName {
|
||||||
display: -webkit-box;
|
display: -webkit-box;
|
||||||
-webkit-box-orient: vertical;
|
-webkit-box-orient: vertical;
|
||||||
@ -97,4 +109,15 @@ ul {
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
width: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fileVisual {
|
||||||
|
display: flex;
|
||||||
|
flex-shrink: 0;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
height: 25px;
|
||||||
|
width: 25px;
|
||||||
}
|
}
|
@ -952,7 +952,7 @@ export const SignPage = () => {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<PdfMarking
|
<PdfMarking
|
||||||
files={getCurrentUserFiles(files, currentFileHashes)}
|
files={getCurrentUserFiles(files, currentFileHashes, creatorFileHashes)}
|
||||||
currentUserMarks={currentUserMarks}
|
currentUserMarks={currentUserMarks}
|
||||||
setIsReadyToSign={setIsReadyToSign}
|
setIsReadyToSign={setIsReadyToSign}
|
||||||
setCurrentUserMarks={setCurrentUserMarks}
|
setCurrentUserMarks={setCurrentUserMarks}
|
||||||
|
@ -5,4 +5,5 @@ export interface CurrentUserFile {
|
|||||||
pdfFile: PdfFile
|
pdfFile: PdfFile
|
||||||
filename: string
|
filename: string
|
||||||
hash?: string
|
hash?: string
|
||||||
|
isHashValid: boolean
|
||||||
}
|
}
|
||||||
|
@ -72,17 +72,20 @@ export const timeout = (ms: number = 60000) => {
|
|||||||
* including its name, hash, and content
|
* including its name, hash, and content
|
||||||
* @param files
|
* @param files
|
||||||
* @param fileHashes
|
* @param fileHashes
|
||||||
|
* @param creatorFileHashes
|
||||||
*/
|
*/
|
||||||
export const getCurrentUserFiles = (
|
export const getCurrentUserFiles = (
|
||||||
files: { [filename: string]: PdfFile },
|
files: { [filename: string]: PdfFile },
|
||||||
fileHashes: { [key: string]: string | null }
|
fileHashes: { [key: string]: string | null },
|
||||||
|
creatorFileHashes: { [key: string]: string }
|
||||||
): CurrentUserFile[] => {
|
): CurrentUserFile[] => {
|
||||||
return Object.entries(files).map(([filename, pdfFile], index) => {
|
return Object.entries(files).map(([filename, pdfFile], index) => {
|
||||||
return {
|
return {
|
||||||
pdfFile,
|
pdfFile,
|
||||||
filename,
|
filename,
|
||||||
id: index + 1,
|
id: index + 1,
|
||||||
...(!!fileHashes[filename] && { hash: fileHashes[filename]! })
|
...(!!fileHashes[filename] && { hash: fileHashes[filename]! }),
|
||||||
|
isHashValid: creatorFileHashes[filename] === fileHashes[filename]
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user