fix(create-page): file list

This commit is contained in:
enes 2024-08-19 14:55:26 +02:00
parent 48f54d8568
commit 1caeb48e6c
3 changed files with 33 additions and 26 deletions

View File

@ -16,7 +16,7 @@ import {
Select
} from '@mui/material'
import styles from './style.module.scss'
import { useEffect, useState } from 'react'
import React, { useEffect, useState } from 'react'
import * as PDFJS from 'pdfjs-dist'
import { ProfileMetadata, User, UserRole } from '../../types'
@ -535,17 +535,14 @@ export const DrawPDFFields = (props: Props) => {
<div className={styles.view}>
{pdfFiles.map((pdfFile, pdfFileIndex: number) => {
return (
<>
<React.Fragment key={pdfFile.file.name}>
<div
key={pdfFile.file.name}
className={`${styles.fileWrapper} ${styles.scrollTarget}`}
id={`file-${pdfFile.file.name}`}
>
{getPdfPages(pdfFile, pdfFileIndex)}
</div>
{pdfFileIndex < pdfFiles.length - 1 && (
<Divider
key={pdfFile.file.name + `-divider`}
sx={{
fontSize: '12px',
color: 'rgba(0,0,0,0.15)'
@ -554,7 +551,8 @@ export const DrawPDFFields = (props: Props) => {
File Separator
</Divider>
)}
</>
</div>
</React.Fragment>
)
})}

View File

@ -52,6 +52,7 @@ import {
} from '../../utils'
import { Container } from '../../components/Container'
import styles from './style.module.scss'
import fileListStyles from '../../components/FileList/style.module.scss'
import { PdfFile } from '../../types/drawing'
import { DrawPDFFields } from '../../components/DrawPDFFields'
import { Mark } from '../../types/mark.ts'
@ -69,6 +70,8 @@ export const CreatePage = () => {
const navigate = useNavigate()
const location = useLocation()
const { uploadedFiles } = location.state || {}
const [currentFile, setCurrentFile] = useState<File>()
const isActive = (file: File) => file.name === currentFile?.name
const [isLoading, setIsLoading] = useState(false)
const [loadingSpinnerDesc, setLoadingSpinnerDesc] = useState('')
@ -281,8 +284,8 @@ export const CreatePage = () => {
}
}
const handleFileClick = (name: string) => {
document.getElementById(name)?.scrollIntoView({ behavior: 'smooth' })
const handleFileClick = (id: string) => {
document.getElementById(id)?.scrollIntoView({ behavior: 'smooth' })
}
const handleRemoveFile = (
@ -737,13 +740,16 @@ export const CreatePage = () => {
<ol className={`${styles.paperGroup} ${styles.orderedFilesList}`}>
{selectedFiles.length > 0 &&
selectedFiles.map((file, index) => (
<Button
<div
key={index}
className={styles.file}
onClick={() => handleFileClick('file-' + file.name)}
className={`${fileListStyles.fileItem} ${isActive(file) && fileListStyles.active}`}
onClick={() => {
handleFileClick('file-' + file.name)
setCurrentFile(file)
}}
>
<>
<span>{file.name}</span>
<span className={styles.fileName}>{file.name}</span>
<Button
variant="text"
onClick={(event) => handleRemoveFile(event, file)}
@ -754,7 +760,7 @@ export const CreatePage = () => {
<FontAwesomeIcon icon={faTrash} />
</Button>
</>
</Button>
</div>
))}
</ol>
<Button variant="contained" onClick={handleUploadButtonClick}>

View File

@ -24,10 +24,6 @@
cursor: pointer;
gap: 10px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
&::before {
content: counter(item) ' ';
counter-increment: item;
@ -113,3 +109,10 @@
margin-left: 34px;
}
}
.fileName {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
flex-grow: 1;
}