fix(create-page): file list
This commit is contained in:
parent
48f54d8568
commit
1caeb48e6c
@ -16,7 +16,7 @@ import {
|
|||||||
Select
|
Select
|
||||||
} from '@mui/material'
|
} from '@mui/material'
|
||||||
import styles from './style.module.scss'
|
import styles from './style.module.scss'
|
||||||
import { useEffect, useState } from 'react'
|
import React, { useEffect, useState } from 'react'
|
||||||
|
|
||||||
import * as PDFJS from 'pdfjs-dist'
|
import * as PDFJS from 'pdfjs-dist'
|
||||||
import { ProfileMetadata, User, UserRole } from '../../types'
|
import { ProfileMetadata, User, UserRole } from '../../types'
|
||||||
@ -535,17 +535,14 @@ export const DrawPDFFields = (props: Props) => {
|
|||||||
<div className={styles.view}>
|
<div className={styles.view}>
|
||||||
{pdfFiles.map((pdfFile, pdfFileIndex: number) => {
|
{pdfFiles.map((pdfFile, pdfFileIndex: number) => {
|
||||||
return (
|
return (
|
||||||
<>
|
<React.Fragment key={pdfFile.file.name}>
|
||||||
<div
|
<div
|
||||||
key={pdfFile.file.name}
|
|
||||||
className={`${styles.fileWrapper} ${styles.scrollTarget}`}
|
className={`${styles.fileWrapper} ${styles.scrollTarget}`}
|
||||||
id={`file-${pdfFile.file.name}`}
|
id={`file-${pdfFile.file.name}`}
|
||||||
>
|
>
|
||||||
{getPdfPages(pdfFile, pdfFileIndex)}
|
{getPdfPages(pdfFile, pdfFileIndex)}
|
||||||
</div>
|
|
||||||
{pdfFileIndex < pdfFiles.length - 1 && (
|
{pdfFileIndex < pdfFiles.length - 1 && (
|
||||||
<Divider
|
<Divider
|
||||||
key={pdfFile.file.name + `-divider`}
|
|
||||||
sx={{
|
sx={{
|
||||||
fontSize: '12px',
|
fontSize: '12px',
|
||||||
color: 'rgba(0,0,0,0.15)'
|
color: 'rgba(0,0,0,0.15)'
|
||||||
@ -554,7 +551,8 @@ export const DrawPDFFields = (props: Props) => {
|
|||||||
File Separator
|
File Separator
|
||||||
</Divider>
|
</Divider>
|
||||||
)}
|
)}
|
||||||
</>
|
</div>
|
||||||
|
</React.Fragment>
|
||||||
)
|
)
|
||||||
})}
|
})}
|
||||||
|
|
||||||
|
@ -52,6 +52,7 @@ import {
|
|||||||
} from '../../utils'
|
} from '../../utils'
|
||||||
import { Container } from '../../components/Container'
|
import { Container } from '../../components/Container'
|
||||||
import styles from './style.module.scss'
|
import styles from './style.module.scss'
|
||||||
|
import fileListStyles from '../../components/FileList/style.module.scss'
|
||||||
import { PdfFile } from '../../types/drawing'
|
import { PdfFile } from '../../types/drawing'
|
||||||
import { DrawPDFFields } from '../../components/DrawPDFFields'
|
import { DrawPDFFields } from '../../components/DrawPDFFields'
|
||||||
import { Mark } from '../../types/mark.ts'
|
import { Mark } from '../../types/mark.ts'
|
||||||
@ -69,6 +70,8 @@ export const CreatePage = () => {
|
|||||||
const navigate = useNavigate()
|
const navigate = useNavigate()
|
||||||
const location = useLocation()
|
const location = useLocation()
|
||||||
const { uploadedFiles } = location.state || {}
|
const { uploadedFiles } = location.state || {}
|
||||||
|
const [currentFile, setCurrentFile] = useState<File>()
|
||||||
|
const isActive = (file: File) => file.name === currentFile?.name
|
||||||
|
|
||||||
const [isLoading, setIsLoading] = useState(false)
|
const [isLoading, setIsLoading] = useState(false)
|
||||||
const [loadingSpinnerDesc, setLoadingSpinnerDesc] = useState('')
|
const [loadingSpinnerDesc, setLoadingSpinnerDesc] = useState('')
|
||||||
@ -281,8 +284,8 @@ export const CreatePage = () => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const handleFileClick = (name: string) => {
|
const handleFileClick = (id: string) => {
|
||||||
document.getElementById(name)?.scrollIntoView({ behavior: 'smooth' })
|
document.getElementById(id)?.scrollIntoView({ behavior: 'smooth' })
|
||||||
}
|
}
|
||||||
|
|
||||||
const handleRemoveFile = (
|
const handleRemoveFile = (
|
||||||
@ -737,13 +740,16 @@ export const CreatePage = () => {
|
|||||||
<ol className={`${styles.paperGroup} ${styles.orderedFilesList}`}>
|
<ol className={`${styles.paperGroup} ${styles.orderedFilesList}`}>
|
||||||
{selectedFiles.length > 0 &&
|
{selectedFiles.length > 0 &&
|
||||||
selectedFiles.map((file, index) => (
|
selectedFiles.map((file, index) => (
|
||||||
<Button
|
<div
|
||||||
key={index}
|
key={index}
|
||||||
className={styles.file}
|
className={`${fileListStyles.fileItem} ${isActive(file) && fileListStyles.active}`}
|
||||||
onClick={() => handleFileClick('file-' + file.name)}
|
onClick={() => {
|
||||||
|
handleFileClick('file-' + file.name)
|
||||||
|
setCurrentFile(file)
|
||||||
|
}}
|
||||||
>
|
>
|
||||||
<>
|
<>
|
||||||
<span>{file.name}</span>
|
<span className={styles.fileName}>{file.name}</span>
|
||||||
<Button
|
<Button
|
||||||
variant="text"
|
variant="text"
|
||||||
onClick={(event) => handleRemoveFile(event, file)}
|
onClick={(event) => handleRemoveFile(event, file)}
|
||||||
@ -754,7 +760,7 @@ export const CreatePage = () => {
|
|||||||
<FontAwesomeIcon icon={faTrash} />
|
<FontAwesomeIcon icon={faTrash} />
|
||||||
</Button>
|
</Button>
|
||||||
</>
|
</>
|
||||||
</Button>
|
</div>
|
||||||
))}
|
))}
|
||||||
</ol>
|
</ol>
|
||||||
<Button variant="contained" onClick={handleUploadButtonClick}>
|
<Button variant="contained" onClick={handleUploadButtonClick}>
|
||||||
|
@ -24,10 +24,6 @@
|
|||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
gap: 10px;
|
gap: 10px;
|
||||||
|
|
||||||
overflow: hidden;
|
|
||||||
white-space: nowrap;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
|
|
||||||
&::before {
|
&::before {
|
||||||
content: counter(item) ' ';
|
content: counter(item) ' ';
|
||||||
counter-increment: item;
|
counter-increment: item;
|
||||||
@ -113,3 +109,10 @@
|
|||||||
margin-left: 34px;
|
margin-left: 34px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.fileName {
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
flex-grow: 1;
|
||||||
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user