Releasing new design #161
@ -48,17 +48,17 @@
|
||||
flex-grow: 1;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
|
||||
&.active {
|
||||
background: #4c82a3;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
.fileItem:hover {
|
||||
transition: ease 0.2s;
|
||||
background: #4c82a3;
|
||||
color: white;
|
||||
|
||||
&.active {
|
||||
background: #4c82a3;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
.fileName {
|
||||
|
@ -1,6 +1,6 @@
|
||||
import { PdfFile } from '../../types/drawing.ts'
|
||||
import { CurrentUserMark } from '../../types/mark.ts'
|
||||
import PdfPageItem from './PdfPageItem.tsx';
|
||||
import PdfPageItem from './PdfPageItem.tsx'
|
||||
|
||||
interface PdfItemProps {
|
||||
pdfFile: PdfFile
|
||||
@ -13,12 +13,20 @@ interface PdfItemProps {
|
||||
/**
|
||||
* Responsible for displaying pages of a single Pdf File.
|
||||
*/
|
||||
const PdfItem = ({ pdfFile, currentUserMarks, handleMarkClick, selectedMarkValue, selectedMark }: PdfItemProps) => {
|
||||
const filterByPage = (marks: CurrentUserMark[], page: number): CurrentUserMark[] => {
|
||||
return marks.filter((m) => m.mark.location.page === page);
|
||||
const PdfItem = ({
|
||||
pdfFile,
|
||||
currentUserMarks,
|
||||
handleMarkClick,
|
||||
selectedMarkValue,
|
||||
selectedMark
|
||||
}: PdfItemProps) => {
|
||||
const filterByPage = (
|
||||
marks: CurrentUserMark[],
|
||||
page: number
|
||||
): CurrentUserMark[] => {
|
||||
return marks.filter((m) => m.mark.location.page === page)
|
||||
}
|
||||
return (
|
||||
pdfFile.pages.map((page, i) => {
|
||||
return pdfFile.pages.map((page, i) => {
|
||||
return (
|
||||
<PdfPageItem
|
||||
page={page}
|
||||
@ -29,7 +37,7 @@ const PdfItem = ({ pdfFile, currentUserMarks, handleMarkClick, selectedMarkValue
|
||||
selectedMark={selectedMark}
|
||||
/>
|
||||
)
|
||||
}))
|
||||
})
|
||||
}
|
||||
|
||||
export default PdfItem
|
@ -126,6 +126,7 @@ const PdfMarking = (props: PdfMarkingProps) => {
|
||||
{currentUserMarks?.length > 0 && (
|
||||
<div className={styles.pdfView}>
|
||||
<PdfView
|
||||
currentFile={currentFile}
|
||||
files={files}
|
||||
handleMarkClick={handleMarkClick}
|
||||
selectedMarkValue={selectedMarkValue}
|
||||
|
@ -2,6 +2,7 @@ import styles from '../DrawPDFFields/style.module.scss'
|
||||
import { PdfPage } from '../../types/drawing.ts'
|
||||
import { CurrentUserMark } from '../../types/mark.ts'
|
||||
import PdfMarkItem from './PdfMarkItem.tsx'
|
||||
import { useEffect, useRef } from 'react'
|
||||
interface PdfPageProps {
|
||||
page: PdfPage
|
||||
currentUserMarks: CurrentUserMark[]
|
||||
@ -13,7 +14,22 @@ interface PdfPageProps {
|
||||
/**
|
||||
* Responsible for rendering a single Pdf Page and its Marks
|
||||
*/
|
||||
const PdfPageItem = ({ page, currentUserMarks, handleMarkClick, selectedMarkValue, selectedMark }: PdfPageProps) => {
|
||||
const PdfPageItem = ({
|
||||
page,
|
||||
currentUserMarks,
|
||||
handleMarkClick,
|
||||
selectedMarkValue,
|
||||
selectedMark
|
||||
}: PdfPageProps) => {
|
||||
useEffect(() => {
|
||||
if (selectedMark !== null && !!markRefs.current[selectedMark.id]) {
|
||||
markRefs.current[selectedMark.id]?.scrollIntoView({
|
||||
behavior: 'smooth',
|
||||
block: 'end'
|
||||
})
|
||||
}
|
||||
}, [selectedMark])
|
||||
const markRefs = useRef<(HTMLDivElement | null)[]>([])
|
||||
return (
|
||||
<div
|
||||
className={styles.pdfImageWrapper}
|
||||
@ -23,14 +39,9 @@ const PdfPageItem = ({ page, currentUserMarks, handleMarkClick, selectedMarkValu
|
||||
marginTop: '10px'
|
||||
}}
|
||||
>
|
||||
<img
|
||||
draggable="false"
|
||||
src={page.image}
|
||||
style={{ width: '100%'}}
|
||||
|
||||
/>
|
||||
{
|
||||
currentUserMarks.map((m, i) => (
|
||||
<img draggable="false" src={page.image} style={{ width: '100%' }} />
|
||||
{currentUserMarks.map((m, i) => (
|
||||
<div key={i} ref={(el) => (markRefs.current[m.id] = el)}>
|
||||
<PdfMarkItem
|
||||
key={i}
|
||||
handleMarkClick={handleMarkClick}
|
||||
@ -38,6 +49,7 @@ const PdfPageItem = ({ page, currentUserMarks, handleMarkClick, selectedMarkValu
|
||||
userMark={m}
|
||||
selectedMark={selectedMark}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
|
@ -1,7 +1,8 @@
|
||||
import { Box } from '@mui/material'
|
||||
import { Box, Divider } from '@mui/material'
|
||||
import PdfItem from './PdfItem.tsx'
|
||||
import { CurrentUserMark } from '../../types/mark.ts'
|
||||
import { CurrentUserFile } from '../../types/file.ts'
|
||||
import { useEffect, useRef } from 'react'
|
||||
|
||||
interface PdfViewProps {
|
||||
files: CurrentUserFile[]
|
||||
@ -9,6 +10,7 @@ interface PdfViewProps {
|
||||
handleMarkClick: (id: number) => void
|
||||
selectedMarkValue: string
|
||||
selectedMark: CurrentUserMark | null
|
||||
currentFile: CurrentUserFile | null
|
||||
}
|
||||
|
||||
/**
|
||||
@ -19,29 +21,48 @@ const PdfView = ({
|
||||
currentUserMarks,
|
||||
handleMarkClick,
|
||||
selectedMarkValue,
|
||||
selectedMark
|
||||
selectedMark,
|
||||
currentFile
|
||||
}: PdfViewProps) => {
|
||||
const pdfRefs = useRef<(HTMLDivElement | null)[]>([])
|
||||
useEffect(() => {
|
||||
if (currentFile !== null && !!pdfRefs.current[currentFile.id]) {
|
||||
pdfRefs.current[currentFile.id]?.scrollIntoView({
|
||||
behavior: 'smooth',
|
||||
block: 'end'
|
||||
})
|
||||
}
|
||||
}, [currentFile])
|
||||
const filterByFile = (
|
||||
currentUserMarks: CurrentUserMark[],
|
||||
hash: string
|
||||
fileName: string
|
||||
): CurrentUserMark[] => {
|
||||
return currentUserMarks.filter(
|
||||
(currentUserMark) => currentUserMark.mark.pdfFileHash === hash
|
||||
(currentUserMark) => currentUserMark.mark.fileName === fileName
|
||||
)
|
||||
}
|
||||
const isNotLastPdfFile = (index: number, files: CurrentUserFile[]): boolean =>
|
||||
!(index !== files.length - 1)
|
||||
return (
|
||||
<Box sx={{ width: '100%' }}>
|
||||
{files.map(({ pdfFile, hash }, i) => {
|
||||
{files.map((currentUserFile, index, arr) => {
|
||||
const { hash, pdfFile, filename, id } = currentUserFile
|
||||
if (!hash) return
|
||||
return (
|
||||
<div
|
||||
id={pdfFile.file.name}
|
||||
ref={(el) => (pdfRefs.current[id] = el)}
|
||||
key={index}
|
||||
>
|
||||
<PdfItem
|
||||
pdfFile={pdfFile}
|
||||
key={i}
|
||||
currentUserMarks={filterByFile(currentUserMarks, hash)}
|
||||
currentUserMarks={filterByFile(currentUserMarks, filename)}
|
||||
selectedMark={selectedMark}
|
||||
handleMarkClick={handleMarkClick}
|
||||
selectedMarkValue={selectedMarkValue}
|
||||
/>
|
||||
{isNotLastPdfFile(index, arr) && <Divider>File Separator</Divider>}
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</Box>
|
||||
|
@ -338,12 +338,15 @@ export const CreatePage = () => {
|
||||
fileHashes[file.name] = hash
|
||||
}
|
||||
|
||||
console.log('file hashes: ', fileHashes)
|
||||
|
||||
return fileHashes
|
||||
}
|
||||
|
||||
const createMarks = (fileHashes: { [key: string]: string }) : Mark[] => {
|
||||
return drawnPdfs.flatMap((drawnPdf) => {
|
||||
const fileHash = fileHashes[drawnPdf.file.name];
|
||||
const createMarks = (fileHashes: { [key: string]: string }): Mark[] => {
|
||||
return drawnPdfs
|
||||
.flatMap((drawnPdf) => {
|
||||
const fileHash = fileHashes[drawnPdf.file.name]
|
||||
return drawnPdf.pages.flatMap((page, index) => {
|
||||
return page.drawnFields.map((drawnField) => {
|
||||
return {
|
||||
@ -353,17 +356,18 @@ export const CreatePage = () => {
|
||||
top: drawnField.top,
|
||||
left: drawnField.left,
|
||||
height: drawnField.height,
|
||||
width: drawnField.width,
|
||||
width: drawnField.width
|
||||
},
|
||||
npub: drawnField.counterpart,
|
||||
pdfFileHash: fileHash
|
||||
pdfFileHash: fileHash,
|
||||
fileName: drawnPdf.file.name
|
||||
}
|
||||
})
|
||||
})
|
||||
})
|
||||
.map((mark, index) => {
|
||||
return {...mark, id: index }
|
||||
});
|
||||
return { ...mark, id: index }
|
||||
})
|
||||
}
|
||||
|
||||
// Handle errors during zip file generation
|
||||
@ -431,13 +435,9 @@ export const CreatePage = () => {
|
||||
|
||||
if (!arraybuffer) return null
|
||||
|
||||
return new File(
|
||||
[new Blob([arraybuffer])],
|
||||
`${unixNow}.sigit.zip`,
|
||||
{
|
||||
return new File([new Blob([arraybuffer])], `${unixNow}.sigit.zip`, {
|
||||
type: 'application/zip'
|
||||
}
|
||||
)
|
||||
})
|
||||
}
|
||||
|
||||
// Handle errors during file upload
|
||||
@ -545,9 +545,7 @@ export const CreatePage = () => {
|
||||
: viewers.map((viewer) => viewer.pubkey)
|
||||
).filter((receiver) => receiver !== usersPubkey)
|
||||
|
||||
return receivers.map((receiver) =>
|
||||
sendNotification(receiver, meta)
|
||||
)
|
||||
return receivers.map((receiver) => sendNotification(receiver, meta))
|
||||
}
|
||||
|
||||
const handleCreate = async () => {
|
||||
|
@ -14,6 +14,7 @@ export interface Mark {
|
||||
pdfFileHash: string
|
||||
type: MarkType
|
||||
location: MarkLocation
|
||||
fileName: string
|
||||
value?: string
|
||||
}
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user