Releasing new design #161

Merged
b merged 241 commits from staging into main 2024-08-21 11:38:25 +00:00
7 changed files with 118 additions and 77 deletions
Showing only changes of commit 97c82718cb - Show all commits

View File

@ -48,17 +48,17 @@
flex-grow: 1; flex-grow: 1;
font-size: 16px; font-size: 16px;
font-weight: 500; font-weight: 500;
&.active {
background: #4c82a3;
color: white;
}
} }
.fileItem:hover { .fileItem:hover {
transition: ease 0.2s; transition: ease 0.2s;
background: #4c82a3; background: #4c82a3;
color: white; color: white;
&.active {
background: #4c82a3;
color: white;
}
} }
.fileName { .fileName {

View File

@ -1,6 +1,6 @@
import { PdfFile } from '../../types/drawing.ts' import { PdfFile } from '../../types/drawing.ts'
import { CurrentUserMark } from '../../types/mark.ts' import { CurrentUserMark } from '../../types/mark.ts'
import PdfPageItem from './PdfPageItem.tsx'; import PdfPageItem from './PdfPageItem.tsx'
interface PdfItemProps { interface PdfItemProps {
pdfFile: PdfFile pdfFile: PdfFile
@ -13,23 +13,31 @@ interface PdfItemProps {
/** /**
* Responsible for displaying pages of a single Pdf File. * Responsible for displaying pages of a single Pdf File.
*/ */
const PdfItem = ({ pdfFile, currentUserMarks, handleMarkClick, selectedMarkValue, selectedMark }: PdfItemProps) => { const PdfItem = ({
const filterByPage = (marks: CurrentUserMark[], page: number): CurrentUserMark[] => { pdfFile,
return marks.filter((m) => m.mark.location.page === page); currentUserMarks,
handleMarkClick,
selectedMarkValue,
selectedMark
}: PdfItemProps) => {
const filterByPage = (
marks: CurrentUserMark[],
page: number
): CurrentUserMark[] => {
return marks.filter((m) => m.mark.location.page === page)
} }
return ( return pdfFile.pages.map((page, i) => {
pdfFile.pages.map((page, i) => { return (
return ( <PdfPageItem
<PdfPageItem page={page}
page={page} key={i}
key={i} currentUserMarks={filterByPage(currentUserMarks, i)}
currentUserMarks={filterByPage(currentUserMarks, i)} handleMarkClick={handleMarkClick}
handleMarkClick={handleMarkClick} selectedMarkValue={selectedMarkValue}
selectedMarkValue={selectedMarkValue} selectedMark={selectedMark}
selectedMark={selectedMark} />
/> )
) })
}))
} }
export default PdfItem export default PdfItem

View File

@ -126,6 +126,7 @@ const PdfMarking = (props: PdfMarkingProps) => {
{currentUserMarks?.length > 0 && ( {currentUserMarks?.length > 0 && (
<div className={styles.pdfView}> <div className={styles.pdfView}>
<PdfView <PdfView
currentFile={currentFile}
files={files} files={files}
handleMarkClick={handleMarkClick} handleMarkClick={handleMarkClick}
selectedMarkValue={selectedMarkValue} selectedMarkValue={selectedMarkValue}

View File

@ -2,6 +2,7 @@ import styles from '../DrawPDFFields/style.module.scss'
import { PdfPage } from '../../types/drawing.ts' import { PdfPage } from '../../types/drawing.ts'
import { CurrentUserMark } from '../../types/mark.ts' import { CurrentUserMark } from '../../types/mark.ts'
import PdfMarkItem from './PdfMarkItem.tsx' import PdfMarkItem from './PdfMarkItem.tsx'
import { useEffect, useRef } from 'react'
interface PdfPageProps { interface PdfPageProps {
page: PdfPage page: PdfPage
currentUserMarks: CurrentUserMark[] currentUserMarks: CurrentUserMark[]
@ -13,7 +14,22 @@ interface PdfPageProps {
/** /**
* Responsible for rendering a single Pdf Page and its Marks * 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 ( return (
<div <div
className={styles.pdfImageWrapper} className={styles.pdfImageWrapper}
@ -23,21 +39,17 @@ const PdfPageItem = ({ page, currentUserMarks, handleMarkClick, selectedMarkValu
marginTop: '10px' marginTop: '10px'
}} }}
> >
<img <img draggable="false" src={page.image} style={{ width: '100%' }} />
draggable="false" {currentUserMarks.map((m, i) => (
src={page.image} <div key={i} ref={(el) => (markRefs.current[m.id] = el)}>
style={{ width: '100%'}}
/>
{
currentUserMarks.map((m, i) => (
<PdfMarkItem <PdfMarkItem
key={i} key={i}
handleMarkClick={handleMarkClick} handleMarkClick={handleMarkClick}
selectedMarkValue={selectedMarkValue} selectedMarkValue={selectedMarkValue}
userMark={m} userMark={m}
selectedMark={selectedMark} selectedMark={selectedMark}
/> />
</div>
))} ))}
</div> </div>
) )

View File

@ -1,7 +1,8 @@
import { Box } from '@mui/material' import { Box, Divider } from '@mui/material'
import PdfItem from './PdfItem.tsx' import PdfItem from './PdfItem.tsx'
import { CurrentUserMark } from '../../types/mark.ts' import { CurrentUserMark } from '../../types/mark.ts'
import { CurrentUserFile } from '../../types/file.ts' import { CurrentUserFile } from '../../types/file.ts'
import { useEffect, useRef } from 'react'
interface PdfViewProps { interface PdfViewProps {
files: CurrentUserFile[] files: CurrentUserFile[]
@ -9,6 +10,7 @@ interface PdfViewProps {
handleMarkClick: (id: number) => void handleMarkClick: (id: number) => void
selectedMarkValue: string selectedMarkValue: string
selectedMark: CurrentUserMark | null selectedMark: CurrentUserMark | null
currentFile: CurrentUserFile | null
} }
/** /**
@ -19,29 +21,48 @@ const PdfView = ({
currentUserMarks, currentUserMarks,
handleMarkClick, handleMarkClick,
selectedMarkValue, selectedMarkValue,
selectedMark selectedMark,
currentFile
}: PdfViewProps) => { }: 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 = ( const filterByFile = (
currentUserMarks: CurrentUserMark[], currentUserMarks: CurrentUserMark[],
hash: string fileName: string
): CurrentUserMark[] => { ): CurrentUserMark[] => {
return currentUserMarks.filter( 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 ( return (
<Box sx={{ width: '100%' }}> <Box sx={{ width: '100%' }}>
{files.map(({ pdfFile, hash }, i) => { {files.map((currentUserFile, index, arr) => {
const { hash, pdfFile, filename, id } = currentUserFile
if (!hash) return if (!hash) return
return ( return (
<PdfItem <div
pdfFile={pdfFile} id={pdfFile.file.name}
key={i} ref={(el) => (pdfRefs.current[id] = el)}
currentUserMarks={filterByFile(currentUserMarks, hash)} key={index}
selectedMark={selectedMark} >
handleMarkClick={handleMarkClick} <PdfItem
selectedMarkValue={selectedMarkValue} pdfFile={pdfFile}
/> currentUserMarks={filterByFile(currentUserMarks, filename)}
selectedMark={selectedMark}
handleMarkClick={handleMarkClick}
selectedMarkValue={selectedMarkValue}
/>
{isNotLastPdfFile(index, arr) && <Divider>File Separator</Divider>}
</div>
) )
})} })}
</Box> </Box>

View File

@ -338,32 +338,36 @@ export const CreatePage = () => {
fileHashes[file.name] = hash fileHashes[file.name] = hash
} }
console.log('file hashes: ', fileHashes)
return fileHashes return fileHashes
} }
const createMarks = (fileHashes: { [key: string]: string }) : Mark[] => { const createMarks = (fileHashes: { [key: string]: string }): Mark[] => {
return drawnPdfs.flatMap((drawnPdf) => { return drawnPdfs
const fileHash = fileHashes[drawnPdf.file.name]; .flatMap((drawnPdf) => {
return drawnPdf.pages.flatMap((page, index) => { const fileHash = fileHashes[drawnPdf.file.name]
return page.drawnFields.map((drawnField) => { return drawnPdf.pages.flatMap((page, index) => {
return { return page.drawnFields.map((drawnField) => {
type: drawnField.type, return {
location: { type: drawnField.type,
page: index, location: {
top: drawnField.top, page: index,
left: drawnField.left, top: drawnField.top,
height: drawnField.height, left: drawnField.left,
width: drawnField.width, height: drawnField.height,
}, width: drawnField.width
npub: drawnField.counterpart, },
pdfFileHash: fileHash npub: drawnField.counterpart,
} pdfFileHash: fileHash,
fileName: drawnPdf.file.name
}
})
}) })
}) })
})
.map((mark, index) => { .map((mark, index) => {
return {...mark, id: index } return { ...mark, id: index }
}); })
} }
// Handle errors during zip file generation // Handle errors during zip file generation
@ -431,13 +435,9 @@ export const CreatePage = () => {
if (!arraybuffer) return null if (!arraybuffer) return null
return new File( return new File([new Blob([arraybuffer])], `${unixNow}.sigit.zip`, {
[new Blob([arraybuffer])], type: 'application/zip'
`${unixNow}.sigit.zip`, })
{
type: 'application/zip'
}
)
} }
// Handle errors during file upload // Handle errors during file upload
@ -545,9 +545,7 @@ export const CreatePage = () => {
: viewers.map((viewer) => viewer.pubkey) : viewers.map((viewer) => viewer.pubkey)
).filter((receiver) => receiver !== usersPubkey) ).filter((receiver) => receiver !== usersPubkey)
return receivers.map((receiver) => return receivers.map((receiver) => sendNotification(receiver, meta))
sendNotification(receiver, meta)
)
} }
const handleCreate = async () => { const handleCreate = async () => {

View File

@ -14,6 +14,7 @@ export interface Mark {
pdfFileHash: string pdfFileHash: string
type: MarkType type: MarkType
location: MarkLocation location: MarkLocation
fileName: string
value?: string value?: string
} }