Releasing new design #161
@ -1,13 +1,14 @@
|
|||||||
import { PdfFile } from '../../types/drawing.ts'
|
import { PdfFile } from '../../types/drawing.ts'
|
||||||
import { CurrentUserMark } from '../../types/mark.ts'
|
import { CurrentUserMark, Mark } from '../../types/mark.ts'
|
||||||
import PdfPageItem from './PdfPageItem.tsx'
|
import PdfPageItem from './PdfPageItem.tsx'
|
||||||
|
|
||||||
interface PdfItemProps {
|
interface PdfItemProps {
|
||||||
pdfFile: PdfFile
|
|
||||||
currentUserMarks: CurrentUserMark[]
|
currentUserMarks: CurrentUserMark[]
|
||||||
handleMarkClick: (id: number) => void
|
handleMarkClick: (id: number) => void
|
||||||
selectedMarkValue: string
|
otherUserMarks: Mark[]
|
||||||
|
pdfFile: PdfFile
|
||||||
selectedMark: CurrentUserMark | null
|
selectedMark: CurrentUserMark | null
|
||||||
|
selectedMarkValue: string
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@ -18,7 +19,8 @@ const PdfItem = ({
|
|||||||
currentUserMarks,
|
currentUserMarks,
|
||||||
handleMarkClick,
|
handleMarkClick,
|
||||||
selectedMarkValue,
|
selectedMarkValue,
|
||||||
selectedMark
|
selectedMark,
|
||||||
|
otherUserMarks
|
||||||
}: PdfItemProps) => {
|
}: PdfItemProps) => {
|
||||||
const filterByPage = (
|
const filterByPage = (
|
||||||
marks: CurrentUserMark[],
|
marks: CurrentUserMark[],
|
||||||
@ -26,6 +28,9 @@ const PdfItem = ({
|
|||||||
): CurrentUserMark[] => {
|
): CurrentUserMark[] => {
|
||||||
return marks.filter((m) => m.mark.location.page === page)
|
return marks.filter((m) => m.mark.location.page === page)
|
||||||
}
|
}
|
||||||
|
const filterMarksByPage = (marks: Mark[], page: number): Mark[] => {
|
||||||
|
return marks.filter((mark) => mark.location.page === page)
|
||||||
|
}
|
||||||
return pdfFile.pages.map((page, i) => {
|
return pdfFile.pages.map((page, i) => {
|
||||||
return (
|
return (
|
||||||
<PdfPageItem
|
<PdfPageItem
|
||||||
@ -35,6 +40,7 @@ const PdfItem = ({
|
|||||||
handleMarkClick={handleMarkClick}
|
handleMarkClick={handleMarkClick}
|
||||||
selectedMarkValue={selectedMarkValue}
|
selectedMarkValue={selectedMarkValue}
|
||||||
selectedMark={selectedMark}
|
selectedMark={selectedMark}
|
||||||
|
otherUserMarks={filterMarksByPage(otherUserMarks, i)}
|
||||||
/>
|
/>
|
||||||
)
|
)
|
||||||
})
|
})
|
||||||
|
@ -18,13 +18,14 @@ import { UsersDetails } from '../UsersDetails.tsx'
|
|||||||
import { Meta } from '../../types'
|
import { Meta } from '../../types'
|
||||||
|
|
||||||
interface PdfMarkingProps {
|
interface PdfMarkingProps {
|
||||||
files: CurrentUserFile[]
|
|
||||||
currentUserMarks: CurrentUserMark[]
|
currentUserMarks: CurrentUserMark[]
|
||||||
setIsReadyToSign: (isReadyToSign: boolean) => void
|
files: CurrentUserFile[]
|
||||||
setCurrentUserMarks: (currentUserMarks: CurrentUserMark[]) => void
|
|
||||||
setUpdatedMarks: (markToUpdate: Mark) => void
|
|
||||||
handleDownload: () => void
|
handleDownload: () => void
|
||||||
meta: Meta | null
|
meta: Meta | null
|
||||||
|
otherUserMarks: Mark[]
|
||||||
|
setCurrentUserMarks: (currentUserMarks: CurrentUserMark[]) => void
|
||||||
|
setIsReadyToSign: (isReadyToSign: boolean) => void
|
||||||
|
setUpdatedMarks: (markToUpdate: Mark) => void
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@ -41,7 +42,8 @@ const PdfMarking = (props: PdfMarkingProps) => {
|
|||||||
setCurrentUserMarks,
|
setCurrentUserMarks,
|
||||||
setUpdatedMarks,
|
setUpdatedMarks,
|
||||||
handleDownload,
|
handleDownload,
|
||||||
meta
|
meta,
|
||||||
|
otherUserMarks
|
||||||
} = props
|
} = props
|
||||||
const [selectedMark, setSelectedMark] = useState<CurrentUserMark | null>(null)
|
const [selectedMark, setSelectedMark] = useState<CurrentUserMark | null>(null)
|
||||||
const [selectedMarkValue, setSelectedMarkValue] = useState<string>('')
|
const [selectedMarkValue, setSelectedMarkValue] = useState<string>('')
|
||||||
@ -142,6 +144,7 @@ const PdfMarking = (props: PdfMarkingProps) => {
|
|||||||
selectedMarkValue={selectedMarkValue}
|
selectedMarkValue={selectedMarkValue}
|
||||||
selectedMark={selectedMark}
|
selectedMark={selectedMark}
|
||||||
currentUserMarks={currentUserMarks}
|
currentUserMarks={currentUserMarks}
|
||||||
|
otherUserMarks={otherUserMarks}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
@ -1,14 +1,17 @@
|
|||||||
import styles from '../DrawPDFFields/style.module.scss'
|
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, Mark } from '../../types/mark.ts'
|
||||||
import PdfMarkItem from './PdfMarkItem.tsx'
|
import PdfMarkItem from './PdfMarkItem.tsx'
|
||||||
import { useEffect, useRef } from 'react'
|
import { useEffect, useRef } from 'react'
|
||||||
|
import pdfViewStyles from './style.module.scss'
|
||||||
|
import { inPx } from '../../utils/pdf.ts'
|
||||||
interface PdfPageProps {
|
interface PdfPageProps {
|
||||||
page: PdfPage
|
|
||||||
currentUserMarks: CurrentUserMark[]
|
currentUserMarks: CurrentUserMark[]
|
||||||
handleMarkClick: (id: number) => void
|
handleMarkClick: (id: number) => void
|
||||||
selectedMarkValue: string
|
otherUserMarks: Mark[]
|
||||||
|
page: PdfPage
|
||||||
selectedMark: CurrentUserMark | null
|
selectedMark: CurrentUserMark | null
|
||||||
|
selectedMarkValue: string
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@ -19,7 +22,8 @@ const PdfPageItem = ({
|
|||||||
currentUserMarks,
|
currentUserMarks,
|
||||||
handleMarkClick,
|
handleMarkClick,
|
||||||
selectedMarkValue,
|
selectedMarkValue,
|
||||||
selectedMark
|
selectedMark,
|
||||||
|
otherUserMarks
|
||||||
}: PdfPageProps) => {
|
}: PdfPageProps) => {
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (selectedMark !== null && !!markRefs.current[selectedMark.id]) {
|
if (selectedMark !== null && !!markRefs.current[selectedMark.id]) {
|
||||||
@ -49,6 +53,20 @@ const PdfPageItem = ({
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
|
{otherUserMarks.map((m, i) => (
|
||||||
|
<div
|
||||||
|
key={i}
|
||||||
|
className={pdfViewStyles.otherUserMarksDisplay}
|
||||||
|
style={{
|
||||||
|
left: inPx(m.location.left),
|
||||||
|
top: inPx(m.location.top),
|
||||||
|
width: inPx(m.location.width),
|
||||||
|
height: inPx(m.location.height)
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{m.value}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
@ -1,16 +1,17 @@
|
|||||||
import { Divider } from '@mui/material'
|
import { Divider } from '@mui/material'
|
||||||
import PdfItem from './PdfItem.tsx'
|
import PdfItem from './PdfItem.tsx'
|
||||||
import { CurrentUserMark } from '../../types/mark.ts'
|
import { CurrentUserMark, Mark } from '../../types/mark.ts'
|
||||||
import { CurrentUserFile } from '../../types/file.ts'
|
import { CurrentUserFile } from '../../types/file.ts'
|
||||||
import { useEffect, useRef } from 'react'
|
import { useEffect, useRef } from 'react'
|
||||||
|
|
||||||
interface PdfViewProps {
|
interface PdfViewProps {
|
||||||
files: CurrentUserFile[]
|
|
||||||
currentUserMarks: CurrentUserMark[]
|
|
||||||
handleMarkClick: (id: number) => void
|
|
||||||
selectedMarkValue: string
|
|
||||||
selectedMark: CurrentUserMark | null
|
|
||||||
currentFile: CurrentUserFile | null
|
currentFile: CurrentUserFile | null
|
||||||
|
currentUserMarks: CurrentUserMark[]
|
||||||
|
files: CurrentUserFile[]
|
||||||
|
handleMarkClick: (id: number) => void
|
||||||
|
otherUserMarks: Mark[]
|
||||||
|
selectedMark: CurrentUserMark | null
|
||||||
|
selectedMarkValue: string
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@ -22,7 +23,8 @@ const PdfView = ({
|
|||||||
handleMarkClick,
|
handleMarkClick,
|
||||||
selectedMarkValue,
|
selectedMarkValue,
|
||||||
selectedMark,
|
selectedMark,
|
||||||
currentFile
|
currentFile,
|
||||||
|
otherUserMarks
|
||||||
}: PdfViewProps) => {
|
}: PdfViewProps) => {
|
||||||
const pdfRefs = useRef<(HTMLDivElement | null)[]>([])
|
const pdfRefs = useRef<(HTMLDivElement | null)[]>([])
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
@ -41,6 +43,9 @@ const PdfView = ({
|
|||||||
(currentUserMark) => currentUserMark.mark.pdfFileHash === hash
|
(currentUserMark) => currentUserMark.mark.pdfFileHash === hash
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
const filterMarksByFile = (marks: Mark[], hash: string): Mark[] => {
|
||||||
|
return marks.filter((mark) => mark.pdfFileHash === hash)
|
||||||
|
}
|
||||||
const isNotLastPdfFile = (index: number, files: CurrentUserFile[]): boolean =>
|
const isNotLastPdfFile = (index: number, files: CurrentUserFile[]): boolean =>
|
||||||
index !== files.length - 1
|
index !== files.length - 1
|
||||||
return (
|
return (
|
||||||
@ -60,6 +65,7 @@ const PdfView = ({
|
|||||||
selectedMark={selectedMark}
|
selectedMark={selectedMark}
|
||||||
handleMarkClick={handleMarkClick}
|
handleMarkClick={handleMarkClick}
|
||||||
selectedMarkValue={selectedMarkValue}
|
selectedMarkValue={selectedMarkValue}
|
||||||
|
otherUserMarks={filterMarksByFile(otherUserMarks, hash)}
|
||||||
/>
|
/>
|
||||||
{isNotLastPdfFile(index, arr) && <Divider>File Separator</Divider>}
|
{isNotLastPdfFile(index, arr) && <Divider>File Separator</Divider>}
|
||||||
</div>
|
</div>
|
||||||
|
@ -29,3 +29,11 @@
|
|||||||
height: 100%;
|
height: 100%;
|
||||||
gap: 10px;
|
gap: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.otherUserMarksDisplay {
|
||||||
|
position: absolute;
|
||||||
|
z-index: 50;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
@ -32,7 +32,8 @@ import {
|
|||||||
readContentOfZipEntry,
|
readContentOfZipEntry,
|
||||||
sendNotification,
|
sendNotification,
|
||||||
signEventForMetaFile,
|
signEventForMetaFile,
|
||||||
updateUsersAppData
|
updateUsersAppData,
|
||||||
|
findOtherUserMarks
|
||||||
} from '../../utils'
|
} from '../../utils'
|
||||||
import { Container } from '../../components/Container'
|
import { Container } from '../../components/Container'
|
||||||
import { DisplayMeta } from './internal/displayMeta'
|
import { DisplayMeta } from './internal/displayMeta'
|
||||||
@ -110,6 +111,7 @@ export const SignPage = () => {
|
|||||||
[]
|
[]
|
||||||
)
|
)
|
||||||
const [isReadyToSign, setIsReadyToSign] = useState(false)
|
const [isReadyToSign, setIsReadyToSign] = useState(false)
|
||||||
|
const [otherUserMarks, setOtherUserMarks] = useState<Mark[]>([])
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (signers.length > 0) {
|
if (signers.length > 0) {
|
||||||
@ -209,6 +211,8 @@ export const SignPage = () => {
|
|||||||
)
|
)
|
||||||
const signedMarks = extractMarksFromSignedMeta(meta)
|
const signedMarks = extractMarksFromSignedMeta(meta)
|
||||||
const currentUserMarks = getCurrentUserMarks(metaMarks, signedMarks)
|
const currentUserMarks = getCurrentUserMarks(metaMarks, signedMarks)
|
||||||
|
const otherUserMarks = findOtherUserMarks(signedMarks, usersPubkey!)
|
||||||
|
setOtherUserMarks(otherUserMarks)
|
||||||
setCurrentUserMarks(currentUserMarks)
|
setCurrentUserMarks(currentUserMarks)
|
||||||
setIsReadyToSign(isCurrentUserMarksComplete(currentUserMarks))
|
setIsReadyToSign(isCurrentUserMarksComplete(currentUserMarks))
|
||||||
}
|
}
|
||||||
@ -960,6 +964,7 @@ export const SignPage = () => {
|
|||||||
setCurrentUserMarks={setCurrentUserMarks}
|
setCurrentUserMarks={setCurrentUserMarks}
|
||||||
setUpdatedMarks={setUpdatedMarks}
|
setUpdatedMarks={setUpdatedMarks}
|
||||||
handleDownload={handleDownload}
|
handleDownload={handleDownload}
|
||||||
|
otherUserMarks={otherUserMarks}
|
||||||
meta={meta}
|
meta={meta}
|
||||||
/>
|
/>
|
||||||
)
|
)
|
||||||
|
@ -127,6 +127,10 @@ const getUpdatedMark = (
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const findOtherUserMarks = (marks: Mark[], pubkey: string): Mark[] => {
|
||||||
|
return marks.filter((mark) => mark.npub !== hexToNpub(pubkey))
|
||||||
|
}
|
||||||
|
|
||||||
export {
|
export {
|
||||||
getCurrentUserMarks,
|
getCurrentUserMarks,
|
||||||
filterMarksByPubkey,
|
filterMarksByPubkey,
|
||||||
@ -136,5 +140,6 @@ export {
|
|||||||
updateMarks,
|
updateMarks,
|
||||||
updateCurrentUserMarks,
|
updateCurrentUserMarks,
|
||||||
isCurrentValueLast,
|
isCurrentValueLast,
|
||||||
getUpdatedMark
|
getUpdatedMark,
|
||||||
|
findOtherUserMarks
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user