feat(create-page): new create page design #153

Merged
enes merged 17 commits from 148-create-page into staging 2024-08-20 12:43:20 +00:00
17 changed files with 939 additions and 558 deletions

View File

@ -7,7 +7,7 @@
"scripts": { "scripts": {
"dev": "vite", "dev": "vite",
"build": "tsc && vite build", "build": "tsc && vite build",
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 25", "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 2",
"lint:fix": "eslint . --fix --ext ts,tsx --report-unused-disable-directives --max-warnings 0", "lint:fix": "eslint . --fix --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
"lint:staged": "eslint --fix --ext ts,tsx --report-unused-disable-directives --max-warnings 0", "lint:staged": "eslint --fix --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
"formatter:check": "prettier --check \"src/**/*.{ts,tsx,js,jsx,html,css,sass,less,yml,md,graphql}\"", "formatter:check": "prettier --check \"src/**/*.{ts,tsx,js,jsx,html,css,sass,less,yml,md,graphql}\"",

View File

@ -1,40 +1,27 @@
import { import { Close } from '@mui/icons-material'
AccessTime,
CalendarMonth,
ExpandMore,
Gesture,
PictureAsPdf,
Badge,
Work,
Close
} from '@mui/icons-material'
import { import {
Box, Box,
Typography,
Accordion,
AccordionDetails,
AccordionSummary,
CircularProgress, CircularProgress,
Divider,
FormControl, FormControl,
InputLabel, InputLabel,
MenuItem, MenuItem,
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 } from '../../types' import { ProfileMetadata, User, UserRole } from '../../types'
import { import {
PdfFile, PdfFile,
DrawTool,
MouseState, MouseState,
PdfPage, PdfPage,
DrawnField, DrawnField,
MarkType DrawTool
} from '../../types/drawing' } from '../../types/drawing'
import { truncate } from 'lodash' import { truncate } from 'lodash'
import { hexToNpub } from '../../utils' import { extractFileExtension, hexToNpub } from '../../utils'
import { toPdfFiles } from '../../utils/pdf.ts' import { toPdfFiles } from '../../utils/pdf.ts'
PDFJS.GlobalWorkerOptions.workerSrc = new URL( PDFJS.GlobalWorkerOptions.workerSrc = new URL(
'pdfjs-dist/build/pdf.worker.min.mjs', 'pdfjs-dist/build/pdf.worker.min.mjs',
@ -46,64 +33,31 @@ interface Props {
users: User[] users: User[]
metadata: { [key: string]: ProfileMetadata } metadata: { [key: string]: ProfileMetadata }
onDrawFieldsChange: (pdfFiles: PdfFile[]) => void onDrawFieldsChange: (pdfFiles: PdfFile[]) => void
selectedTool?: DrawTool
} }
export const DrawPDFFields = (props: Props) => { export const DrawPDFFields = (props: Props) => {
const { selectedFiles, onDrawFieldsChange, users } = props const { selectedFiles, selectedTool, onDrawFieldsChange, users } = props
const [pdfFiles, setPdfFiles] = useState<PdfFile[]>([]) const [pdfFiles, setPdfFiles] = useState<PdfFile[]>([])
const [parsingPdf, setParsingPdf] = useState<boolean>(false) const [parsingPdf, setParsingPdf] = useState<boolean>(false)
const [showDrawToolBox, setShowDrawToolBox] = useState<boolean>(false)
const [selectedTool, setSelectedTool] = useState<DrawTool | null>()
const [toolbox] = useState<DrawTool[]>([
{
identifier: MarkType.SIGNATURE,
icon: <Gesture />,
label: 'Signature',
active: false
},
{
identifier: MarkType.FULLNAME,
icon: <Badge />,
label: 'Full Name',
active: true
},
{
identifier: MarkType.JOBTITLE,
icon: <Work />,
label: 'Job Title',
active: false
},
{
identifier: MarkType.DATE,
icon: <CalendarMonth />,
label: 'Date',
active: false
},
{
identifier: MarkType.DATETIME,
icon: <AccessTime />,
label: 'Datetime',
active: false
}
])
const [mouseState, setMouseState] = useState<MouseState>({ const [mouseState, setMouseState] = useState<MouseState>({
clicked: false clicked: false
}) })
useEffect(() => { useEffect(() => {
/**
* Reads the pdf binary files and converts it's pages to images
* creates the pdfFiles object and sets to a state
*/
const parsePdfPages = async () => {
const pdfFiles: PdfFile[] = await toPdfFiles(selectedFiles)
setPdfFiles(pdfFiles)
}
if (selectedFiles) { if (selectedFiles) {
/**
* Reads the pdf binary files and converts it's pages to images
* creates the pdfFiles object and sets to a state
*/
const parsePdfPages = async () => {
const pdfFiles: PdfFile[] = await toPdfFiles(selectedFiles)
setPdfFiles(pdfFiles)
}
setParsingPdf(true) setParsingPdf(true)
parsePdfPages().finally(() => { parsePdfPages().finally(() => {
@ -148,11 +102,7 @@ export const DrawPDFFields = (props: Props) => {
// Proceed only if left click // Proceed only if left click
if (event.button !== 0) return if (event.button !== 0) return
// Only allow drawing if mouse is not over other drawn element if (!selectedTool) {
const target = event.target as HTMLElement
const isOverPdfImageWrapper = target.tagName === 'IMG'
if (!selectedTool || !isOverPdfImageWrapper) {
return return
} }
@ -204,8 +154,14 @@ export const DrawPDFFields = (props: Props) => {
) => { ) => {
if (mouseState.clicked && selectedTool) { if (mouseState.clicked && selectedTool) {
const lastElementIndex = page.drawnFields.length - 1 const lastElementIndex = page.drawnFields.length - 1
const lastDrawnField = page.drawnFields[lastElementIndex] const lastDrawnField = page.drawnFields[lastElementIndex]
// Return early if we don't have lastDrawnField
// Issue noticed in the console when dragging out of bounds
// to the page below (without releaseing mouse click)
if (!lastDrawnField) return
const { mouseX, mouseY } = getMouseCoordinates(event) const { mouseX, mouseY } = getMouseCoordinates(event)
const width = mouseX - lastDrawnField.left const width = mouseX - lastDrawnField.left
@ -255,15 +211,14 @@ export const DrawPDFFields = (props: Props) => {
* @param event Mouse event * @param event Mouse event
* @param drawnField which we are moving * @param drawnField which we are moving
*/ */
const onDranwFieldMouseMove = ( const onDrawnFieldMouseMove = (
event: React.MouseEvent<HTMLDivElement>, event: React.MouseEvent<HTMLDivElement>,
drawnField: DrawnField drawnField: DrawnField
) => { ) => {
const target = event.target as HTMLElement | null
if (mouseState.dragging) { if (mouseState.dragging) {
const { mouseX, mouseY, rect } = getMouseCoordinates( const { mouseX, mouseY, rect } = getMouseCoordinates(
event, event,
target?.parentNode as HTMLElement event.currentTarget.parentElement
) )
const coordsOffset = mouseState.coordsInWrapper const coordsOffset = mouseState.coordsInWrapper
@ -292,7 +247,9 @@ export const DrawPDFFields = (props: Props) => {
* @param event Mouse event * @param event Mouse event
* @param drawnField which we are resizing * @param drawnField which we are resizing
*/ */
const onResizeHandleMouseDown = (event: React.MouseEvent<HTMLDivElement>) => { const onResizeHandleMouseDown = (
event: React.MouseEvent<HTMLSpanElement>
) => {
// Proceed only if left click // Proceed only if left click
if (event.button !== 0) return if (event.button !== 0) return
@ -309,14 +266,16 @@ export const DrawPDFFields = (props: Props) => {
* @param drawnField which we are resizing * @param drawnField which we are resizing
*/ */
const onResizeHandleMouseMove = ( const onResizeHandleMouseMove = (
event: React.MouseEvent<HTMLSpanElement | HTMLDivElement>, event: React.MouseEvent<HTMLSpanElement>,
drawnField: DrawnField drawnField: DrawnField
) => { ) => {
const target = event.target as HTMLElement | null
if (mouseState.resizing) { if (mouseState.resizing) {
const { mouseX, mouseY } = getMouseCoordinates( const { mouseX, mouseY } = getMouseCoordinates(
event, event,
target?.parentNode?.parentNode as HTMLElement // currentTarget = span handle
// 1st parent = drawnField
// 2nd parent = img
event.currentTarget.parentElement?.parentElement
) )
const width = mouseX - drawnField.left const width = mouseX - drawnField.left
@ -337,7 +296,7 @@ export const DrawPDFFields = (props: Props) => {
* @param drawnFileIndex drawn file index * @param drawnFileIndex drawn file index
*/ */
const onRemoveHandleMouseDown = ( const onRemoveHandleMouseDown = (
event: React.MouseEvent<HTMLDivElement | HTMLSpanElement>, event: React.MouseEvent<HTMLSpanElement>,
pdfFileIndex: number, pdfFileIndex: number,
pdfPageIndex: number, pdfPageIndex: number,
drawnFileIndex: number drawnFileIndex: number
@ -368,10 +327,10 @@ export const DrawPDFFields = (props: Props) => {
* event.target will be used * event.target will be used
*/ */
const getMouseCoordinates = ( const getMouseCoordinates = (
event: React.MouseEvent<HTMLDivElement | HTMLSpanElement>, event: React.MouseEvent<HTMLElement>,
customTarget?: HTMLElement customTarget?: HTMLElement | null
) => { ) => {
const target = (customTarget ? customTarget : event.target) as HTMLElement const target = customTarget ? customTarget : event.currentTarget
const rect = target.getBoundingClientRect() const rect = target.getBoundingClientRect()
const mouseX = event.clientX - rect.left //x position within the element. const mouseX = event.clientX - rect.left //x position within the element.
const mouseY = event.clientY - rect.top //y position within the element. const mouseY = event.clientY - rect.top //y position within the element.
@ -383,64 +342,26 @@ export const DrawPDFFields = (props: Props) => {
} }
} }
/**
*
* @returns if expanded pdf accordion is present
*/
const hasExpandedPdf = () => {
return !!pdfFiles.filter((pdfFile) => !!pdfFile.expanded).length
}
const handleAccordionExpandChange = (expanded: boolean, pdfFile: PdfFile) => {
pdfFile.expanded = expanded
refreshPdfFiles()
setShowDrawToolBox(hasExpandedPdf())
}
/**
* Changes the drawing tool
* @param drawTool to draw with
*/
const handleToolSelect = (drawTool: DrawTool) => {
// If clicked on the same tool, unselect
if (drawTool.identifier === selectedTool?.identifier) {
setSelectedTool(null)
return
}
setSelectedTool(drawTool)
}
/** /**
* Renders the pdf pages and drawing elements * Renders the pdf pages and drawing elements
*/ */
const getPdfPages = (pdfFile: PdfFile, pdfFileIndex: number) => { const getPdfPages = (pdfFile: PdfFile, pdfFileIndex: number) => {
return ( return (
<Box <>
sx={{
width: '100%'
}}
>
{pdfFile.pages.map((page, pdfPageIndex: number) => { {pdfFile.pages.map((page, pdfPageIndex: number) => {
return ( return (
<div <div
key={pdfPageIndex} key={pdfPageIndex}
style={{
border: '1px solid #c4c4c4',
marginBottom: '10px'
}}
className={`${styles.pdfImageWrapper} ${selectedTool ? styles.drawing : ''}`} className={`${styles.pdfImageWrapper} ${selectedTool ? styles.drawing : ''}`}
onMouseMove={(event) => {
onMouseMove(event, page)
}}
onMouseDown={(event) => {
onMouseDown(event, page)
}}
> >
<img <img
onMouseMove={(event) => {
onMouseMove(event, page)
}}
onMouseDown={(event) => {
onMouseDown(event, page)
}}
draggable="false" draggable="false"
style={{ width: '100%' }}
src={page.image} src={page.image}
/> />
@ -450,7 +371,7 @@ export const DrawPDFFields = (props: Props) => {
key={drawnFieldIndex} key={drawnFieldIndex}
onMouseDown={onDrawnFieldMouseDown} onMouseDown={onDrawnFieldMouseDown}
onMouseMove={(event) => { onMouseMove={(event) => {
onDranwFieldMouseMove(event, drawnField) onDrawnFieldMouseMove(event, drawnField)
}} }}
className={styles.drawingRectangle} className={styles.drawingRectangle}
style={{ style={{
@ -496,36 +417,38 @@ export const DrawPDFFields = (props: Props) => {
labelId="counterparts" labelId="counterparts"
label="Counterparts" label="Counterparts"
> >
{users.map((user, index) => { {users
let displayValue = truncate( .filter((u) => u.role === UserRole.signer)
hexToNpub(user.pubkey), .map((user, index) => {
{ let displayValue = truncate(
length: 16 hexToNpub(user.pubkey),
}
)
const metadata = props.metadata[user.pubkey]
if (metadata) {
displayValue = truncate(
metadata.name ||
metadata.display_name ||
metadata.username,
{ {
length: 16 length: 16
} }
) )
}
return ( const metadata = props.metadata[user.pubkey]
<MenuItem
key={index} if (metadata) {
value={hexToNpub(user.pubkey)} displayValue = truncate(
> metadata.name ||
{displayValue} metadata.display_name ||
</MenuItem> metadata.username,
) {
})} length: 16
}
)
}
return (
<MenuItem
key={index}
value={hexToNpub(user.pubkey)}
>
{displayValue}
</MenuItem>
)
})}
</Select> </Select>
</FormControl> </FormControl>
</div> </div>
@ -535,7 +458,7 @@ export const DrawPDFFields = (props: Props) => {
</div> </div>
) )
})} })}
</Box> </>
) )
} }
@ -552,57 +475,38 @@ export const DrawPDFFields = (props: Props) => {
} }
return ( return (
<Box> <div className={styles.view}>
<Box sx={{ mt: 1 }}> {selectedFiles.map((file, i) => {
<Typography sx={{ mb: 1 }}>Draw fields on the PDFs:</Typography> const name = file.name
const extension = extractFileExtension(name)
{pdfFiles.map((pdfFile, pdfFileIndex: number) => { const pdfFile = pdfFiles.find((pdf) => pdf.file.name === name)
return ( return (
<Accordion <React.Fragment key={name}>
key={pdfFileIndex} <div
expanded={pdfFile.expanded} className={`${styles.fileWrapper} ${styles.scrollTarget}`}
onChange={(_event, expanded) => { id={`file-${name}`}
handleAccordionExpandChange(expanded, pdfFile)
}}
> >
<AccordionSummary {pdfFile ? (
expandIcon={<ExpandMore />} getPdfPages(pdfFile, i)
aria-controls={`panel${pdfFileIndex}-content`} ) : (
id={`panel${pdfFileIndex}header`} <div className={styles.otherFile}>
This is a {extension} file
</div>
)}
</div>
{i < selectedFiles.length - 1 && (
<Divider
sx={{
fontSize: '12px',
color: 'rgba(0,0,0,0.15)'
}}
> >
<PictureAsPdf sx={{ mr: 1 }} /> File Separator
{pdfFile.file.name} </Divider>
</AccordionSummary> )}
<AccordionDetails> </React.Fragment>
{getPdfPages(pdfFile, pdfFileIndex)} )
</AccordionDetails> })}
</Accordion> </div>
)
})}
</Box>
{showDrawToolBox && (
<Box className={styles.drawToolBoxContainer}>
<Box className={styles.drawToolBox}>
{toolbox
.filter((drawTool) => drawTool.active)
.map((drawTool: DrawTool, index: number) => {
return (
<Box
key={index}
onClick={() => {
handleToolSelect(drawTool)
}}
className={`${styles.toolItem} ${selectedTool?.identifier === drawTool.identifier ? styles.selected : ''}`}
>
{drawTool.icon}
{drawTool.label}
</Box>
)
})}
</Box>
</Box>
)}
</Box>
) )
} }

View File

@ -1,3 +1,5 @@
@import '../../styles/sizes.scss';
.pdfFieldItem { .pdfFieldItem {
background: white; background: white;
padding: 10px; padding: 10px;
@ -5,53 +7,10 @@
cursor: pointer; cursor: pointer;
} }
.drawToolBoxContainer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
display: flex;
justify-content: center;
z-index: 50;
.drawToolBox {
display: flex;
gap: 10px;
min-width: 100px;
background-color: white;
padding: 15px;
box-shadow: 0 0 10px 1px #0000003b;
border-radius: 4px;
.toolItem {
display: flex;
flex-direction: column;
align-items: center;
border: 1px solid rgba(0, 0, 0, 0.137);
padding: 5px;
cursor: pointer;
-webkit-user-select: none;
user-select: none;
&.selected {
border-color: #01aaad;
color: #01aaad;
}
&:not(.selected) {
&:hover {
border-color: #01aaad79;
}
}
}
}
}
.pdfImageWrapper { .pdfImageWrapper {
position: relative; position: relative;
-webkit-user-select: none; -webkit-user-select: none;
user-select: none; user-select: none;
margin-bottom: 10px;
> img { > img {
display: block; display: block;
@ -81,7 +40,7 @@
} }
&.edited { &.edited {
border: 1px dotted #01aaad border: 1px dotted #01aaad;
} }
.resizeHandle { .resizeHandle {
@ -93,7 +52,14 @@
background-color: #fff; background-color: #fff;
border: 1px solid rgb(160, 160, 160); border: 1px solid rgb(160, 160, 160);
border-radius: 50%; border-radius: 50%;
cursor: pointer; cursor: nwse-resize;
// Increase the area a bit so it's easier to click
&::after {
content: '';
position: absolute;
inset: -14px;
}
} }
.removeHandle { .removeHandle {
@ -124,3 +90,29 @@
padding: 5px 0; padding: 5px 0;
} }
} }
.fileWrapper {
display: flex;
flex-direction: column;
gap: 15px;
position: relative;
scroll-margin-top: $header-height + $body-vertical-padding;
}
.view {
display: flex;
flex-direction: column;
gap: 25px;
}
.otherFile {
border-radius: 4px;
background: rgba(255, 255, 255, 0.5);
height: 100px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: rgba(0, 0, 0, 0.25);
font-size: 14px;
}

View File

@ -17,8 +17,8 @@
ul { ul {
list-style-type: none; /* Removes bullet points */ list-style-type: none; /* Removes bullet points */
margin: 0; /* Removes default margin */ margin: 0; /* Removes default margin */
padding: 0; /* Removes default padding */ padding: 0; /* Removes default padding */
} }
li { li {
@ -27,7 +27,6 @@ li {
padding: 0; /* Removes any default padding */ padding: 0; /* Removes any default padding */
} }
.wrap { .wrap {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -50,7 +49,7 @@ li {
} }
.files::-webkit-scrollbar-track { .files::-webkit-scrollbar-track {
background-color: rgba(0,0,0,0.15); background-color: rgba(0, 0, 0, 0.15);
} }
.files::-webkit-scrollbar-thumb { .files::-webkit-scrollbar-thumb {
@ -70,12 +69,12 @@ li {
background: #ffffff; background: #ffffff;
padding: 5px 10px; padding: 5px 10px;
align-items: center; align-items: center;
color: rgba(0,0,0,0.5); color: rgba(0, 0, 0, 0.5);
cursor: pointer; cursor: pointer;
flex-grow: 1; flex-grow: 1;
font-size: 16px; font-size: 16px;
font-weight: 500; font-weight: 500;
min-height: 45px;
&.active { &.active {
background: #4c82a3; background: #4c82a3;
@ -84,7 +83,6 @@ li {
} }
.fileItem:hover { .fileItem:hover {
transition: ease 0.2s;
background: #4c82a3; background: #4c82a3;
color: white; color: white;
} }
@ -100,6 +98,7 @@ li {
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
overflow: hidden; overflow: hidden;
-webkit-line-clamp: 1; -webkit-line-clamp: 1;
line-clamp: 1;
} }
.fileNumber { .fileNumber {

View File

@ -8,6 +8,39 @@
left: 0; left: 0;
align-items: center; align-items: center;
z-index: 1000; z-index: 1000;
button {
transition: ease 0.2s;
width: auto;
border-radius: 4px;
outline: unset;
border: unset;
background: unset;
color: #ffffff;
background: #4c82a3;
font-weight: 500;
font-size: 14px;
padding: 8px 15px;
white-space: nowrap;
display: flex;
flex-direction: row;
grid-gap: 12px;
justify-content: center;
align-items: center;
text-decoration: unset;
position: relative;
cursor: pointer;
}
button:hover {
background: #5e8eab;
color: white;
}
button:active {
background: #447592;
color: white;
}
} }
.actions { .actions {
@ -19,7 +52,7 @@
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
grid-gap: 15px; grid-gap: 15px;
box-shadow: 0 -2px 4px 0 rgb(0,0,0,0.1); box-shadow: 0 -2px 4px 0 rgb(0, 0, 0, 0.1);
max-width: 750px; max-width: 750px;
&.expanded { &.expanded {
@ -73,7 +106,7 @@
.textInput { .textInput {
height: 100px; height: 100px;
background: rgba(0,0,0,0.1); background: rgba(0, 0, 0, 0.1);
border-radius: 4px; border-radius: 4px;
border: solid 2px #4c82a3; border: solid 2px #4c82a3;
display: flex; display: flex;
@ -84,17 +117,19 @@
.input { .input {
border-radius: 4px; border-radius: 4px;
border: solid 1px rgba(0,0,0,0.15); border: solid 1px rgba(0, 0, 0, 0.15);
padding: 5px 10px; padding: 5px 10px;
font-size: 16px; font-size: 16px;
width: 100%; width: 100%;
background: linear-gradient(rgba(0,0,0,0.00), rgba(0,0,0,0.00) 100%), linear-gradient(white, white); background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 100%),
linear-gradient(white, white);
} }
.input:focus { .input:focus {
border: solid 1px rgba(0,0,0,0.15); border: solid 1px rgba(0, 0, 0, 0.15);
outline: none; outline: none;
background: linear-gradient(rgba(0,0,0,0.05), rgba(0,0,0,0.05) 100%), linear-gradient(white, white); background: linear-gradient(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 100%),
linear-gradient(white, white);
} }
.actionsBottom { .actionsBottom {
@ -105,41 +140,6 @@
align-items: center; align-items: center;
} }
button {
transition: ease 0.2s;
width: auto;
border-radius: 4px;
outline: unset;
border: unset;
background: unset;
color: #ffffff;
background: #4c82a3;
font-weight: 500;
font-size: 14px;
padding: 8px 15px;
white-space: nowrap;
display: flex;
flex-direction: row;
grid-gap: 12px;
justify-content: center;
align-items: center;
text-decoration: unset;
position: relative;
cursor: pointer;
}
button:hover {
transition: ease 0.2s;
background: #5e8eab;
color: white;
}
button:active {
transition: ease 0.2s;
background: #447592;
color: white;
}
.submitButton { .submitButton {
width: 100%; width: 100%;
max-width: 300px; max-width: 300px;
@ -172,18 +172,18 @@ button:active {
font-size: 12px; font-size: 12px;
padding: 5px 10px; padding: 5px 10px;
border-radius: 3px; border-radius: 3px;
background: rgba(0,0,0,0.1); background: rgba(0, 0, 0, 0.1);
color: rgba(0,0,0,0.5); color: rgba(0, 0, 0, 0.5);
} }
.paginationButton:hover { .paginationButton:hover {
background: #447592; background: #447592;
color: rgba(255,255,255,0.5); color: rgba(255, 255, 255, 0.5);
} }
.paginationButtonDone { .paginationButtonDone {
background: #5e8eab; background: #5e8eab;
color: rgb(255,255,255); color: rgb(255, 255, 255);
} }
.paginationButtonCurrent { .paginationButtonCurrent {
@ -204,7 +204,7 @@ button:active {
background: white; background: white;
color: #434343; color: #434343;
padding: 5px 30px; padding: 5px 30px;
box-shadow: 0px -3px 4px 0 rgb(0,0,0,0.1); box-shadow: 0px -3px 4px 0 rgb(0, 0, 0, 0.1);
position: absolute; position: absolute;
top: -25px; top: -25px;
} }

View File

@ -30,7 +30,7 @@ export const UserAvatar = ({ pubkey, name, image }: UserAvatarProps) => {
padding: 0 padding: 0
}} }}
/> />
{name ? <label className={styles.username}>{name}</label> : null} {name ? <span className={styles.username}>{name}</span> : null}
</Link> </Link>
) )
} }

View File

@ -10,4 +10,8 @@
font-weight: 500; font-weight: 500;
font-size: 14px; font-size: 14px;
color: var(--text-color); color: var(--text-color);
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
} }

View File

@ -10,6 +10,9 @@
.sidesWrap { .sidesWrap {
position: relative; position: relative;
// HACK: Stop grid column from growing
min-width: 0;
} }
.sides { .sides {

View File

@ -1,27 +1,16 @@
import { Clear, DragHandle } from '@mui/icons-material'
import { import {
Box,
Button, Button,
FormControl, FormHelperText,
IconButton, ListItemIcon,
InputLabel, ListItemText,
MenuItem, MenuItem,
Paper,
Select, Select,
Table,
TableBody,
TableCell,
TableContainer,
TableHead,
TableRow,
TextField, TextField,
Tooltip, Tooltip
Typography
} from '@mui/material' } from '@mui/material'
import type { Identifier, XYCoord } from 'dnd-core' import type { Identifier, XYCoord } from 'dnd-core'
import saveAs from 'file-saver' import saveAs from 'file-saver'
import JSZip from 'jszip' import JSZip from 'jszip'
import { MuiFileInput } from 'mui-file-input'
import { Event, kinds } from 'nostr-tools' import { Event, kinds } from 'nostr-tools'
import { useEffect, useRef, useState } from 'react' import { useEffect, useRef, useState } from 'react'
import { DndProvider, useDrag, useDrop } from 'react-dnd' import { DndProvider, useDrag, useDrop } from 'react-dnd'
@ -61,14 +50,46 @@ 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 { PdfFile } from '../../types/drawing' import fileListStyles from '../../components/FileList/style.module.scss'
import { DrawTool, MarkType, 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'
import { StickySideColumns } from '../../layouts/StickySideColumns.tsx'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import {
fa1,
faBriefcase,
faCalendarDays,
faCheckDouble,
faCircleDot,
faClock,
faCreditCard,
faEllipsis,
faEye,
faGripLines,
faHeading,
faIdCard,
faImage,
faPaperclip,
faPen,
faPhone,
faPlus,
faSignature,
faSquareCaretDown,
faSquareCheck,
faStamp,
faT,
faTableCellsLarge,
faTrash,
faUpload
} from '@fortawesome/free-solid-svg-icons'
export const CreatePage = () => { 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('')
@ -76,9 +97,22 @@ export const CreatePage = () => {
const [authUrl, setAuthUrl] = useState<string>() const [authUrl, setAuthUrl] = useState<string>()
const [title, setTitle] = useState(`sigit_${formatTimestamp(Date.now())}`) const [title, setTitle] = useState(`sigit_${formatTimestamp(Date.now())}`)
const [selectedFiles, setSelectedFiles] = useState<File[]>([]) const [selectedFiles, setSelectedFiles] = useState<File[]>([])
const fileInputRef = useRef<HTMLInputElement>(null)
const handleUploadButtonClick = () => {
if (fileInputRef.current) {
fileInputRef.current.click()
}
}
const [userInput, setUserInput] = useState('') const [userInput, setUserInput] = useState('')
const handleInputKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
if (event.code === 'Enter' || event.code === 'NumpadEnter') {
event.preventDefault()
handleAddUser()
}
}
const [userRole, setUserRole] = useState<UserRole>(UserRole.signer) const [userRole, setUserRole] = useState<UserRole>(UserRole.signer)
const [error, setError] = useState<string>() const [error, setError] = useState<string>()
@ -93,6 +127,132 @@ export const CreatePage = () => {
) )
const [drawnPdfs, setDrawnPdfs] = useState<PdfFile[]>([]) const [drawnPdfs, setDrawnPdfs] = useState<PdfFile[]>([])
const [selectedTool, setSelectedTool] = useState<DrawTool>()
const [toolbox] = useState<DrawTool[]>([
{
identifier: MarkType.TEXT,
icon: <FontAwesomeIcon icon={faT} />,
label: 'Text',
active: false
},
{
identifier: MarkType.SIGNATURE,
icon: <FontAwesomeIcon icon={faSignature} />,
label: 'Signature',
active: false
},
{
identifier: MarkType.JOBTITLE,
icon: <FontAwesomeIcon icon={faBriefcase} />,
label: 'Job Title',
active: false
},
{
identifier: MarkType.FULLNAME,
icon: <FontAwesomeIcon icon={faIdCard} />,
label: 'Full Name',
active: true
},
{
identifier: MarkType.INITIALS,
icon: <FontAwesomeIcon icon={faHeading} />,
label: 'Initials',
active: false
},
{
identifier: MarkType.DATETIME,
icon: <FontAwesomeIcon icon={faClock} />,
label: 'Date Time',
active: false
},
{
identifier: MarkType.DATE,
icon: <FontAwesomeIcon icon={faCalendarDays} />,
label: 'Date',
active: false
},
{
identifier: MarkType.NUMBER,
icon: <FontAwesomeIcon icon={fa1} />,
label: 'Number',
active: false
},
{
identifier: MarkType.IMAGES,
icon: <FontAwesomeIcon icon={faImage} />,
label: 'Images',
active: false
},
{
identifier: MarkType.CHECKBOX,
icon: <FontAwesomeIcon icon={faSquareCheck} />,
label: 'Checkbox',
active: false
},
{
identifier: MarkType.MULTIPLE,
icon: <FontAwesomeIcon icon={faCheckDouble} />,
label: 'Multiple',
active: false
},
{
identifier: MarkType.FILE,
icon: <FontAwesomeIcon icon={faPaperclip} />,
label: 'File',
active: false
},
{
identifier: MarkType.RADIO,
icon: <FontAwesomeIcon icon={faCircleDot} />,
label: 'Radio',
active: false
},
{
identifier: MarkType.SELECT,
icon: <FontAwesomeIcon icon={faSquareCaretDown} />,
label: 'Select',
active: false
},
{
identifier: MarkType.CELLS,
icon: <FontAwesomeIcon icon={faTableCellsLarge} />,
label: 'Cells',
active: false
},
{
identifier: MarkType.STAMP,
icon: <FontAwesomeIcon icon={faStamp} />,
label: 'Stamp',
active: false
},
{
identifier: MarkType.PAYMENT,
icon: <FontAwesomeIcon icon={faCreditCard} />,
label: 'Payment',
active: false
},
{
identifier: MarkType.PHONE,
icon: <FontAwesomeIcon icon={faPhone} />,
label: 'Phone',
active: false
}
])
/**
* Changes the drawing tool
* @param drawTool to draw with
*/
const handleToolSelect = (drawTool: DrawTool) => {
// If clicked on the same tool, unselect
if (drawTool.identifier === selectedTool?.identifier) {
setSelectedTool(undefined)
return
}
setSelectedTool(drawTool)
}
useEffect(() => { useEffect(() => {
users.forEach((user) => { users.forEach((user) => {
if (!(user.pubkey in metadata)) { if (!(user.pubkey in metadata)) {
@ -268,19 +428,22 @@ export const CreatePage = () => {
}) })
} }
const handleSelectFiles = (files: File[]) => { const handleSelectFiles = (event: React.ChangeEvent<HTMLInputElement>) => {
setSelectedFiles((prev) => { if (event.target.files) {
const prevFileNames = prev.map((file) => file.name) setSelectedFiles(Array.from(event.target.files))
}
const newFiles = files.filter(
(file) => !prevFileNames.includes(file.name)
)
return [...prev, ...newFiles]
})
} }
const handleRemoveFile = (fileToRemove: File) => { const handleFileClick = (id: string) => {
document.getElementById(id)?.scrollIntoView({ behavior: 'smooth' })
}
const handleRemoveFile = (
event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
fileToRemove: File
) => {
event.stopPropagation()
setSelectedFiles((prevFiles) => setSelectedFiles((prevFiles) =>
prevFiles.filter((file) => file.name !== fileToRemove.name) prevFiles.filter((file) => file.name !== fileToRemove.name)
) )
@ -702,94 +865,200 @@ export const CreatePage = () => {
<> <>
{isLoading && <LoadingSpinner desc={loadingSpinnerDesc} />} {isLoading && <LoadingSpinner desc={loadingSpinnerDesc} />}
<Container className={styles.container}> <Container className={styles.container}>
<TextField <StickySideColumns
label="Title" left={
value={title} <div className={styles.flexWrap}>
onChange={(e) => setTitle(e.target.value)} <div className={styles.inputWrapper}>
variant="outlined" <TextField
/> placeholder="Title"
size="small"
<Box> type="text"
<MuiFileInput value={title}
fullWidth onChange={(e) => setTitle(e.target.value)}
multiple sx={{
placeholder="Choose Files" width: '100%',
value={selectedFiles} fontSize: '16px',
onChange={(value) => handleSelectFiles(value)} '& .MuiInputBase-input': {
/> padding: '7px 14px'
},
{selectedFiles.length > 0 && ( '& .MuiOutlinedInput-notchedOutline': {
<ul> display: 'none'
{selectedFiles.map((file, index) => ( }
<li key={index}> }}
<Typography component="label">{file.name}</Typography> />
<IconButton onClick={() => handleRemoveFile(file)}> </div>
<Clear style={{ color: 'red' }} />{' '} <ol className={`${styles.paperGroup} ${styles.orderedFilesList}`}>
</IconButton> {selectedFiles.length > 0 &&
</li> selectedFiles.map((file, index) => (
))} <div
</ul> key={index}
)} className={`${fileListStyles.fileItem} ${isActive(file) && fileListStyles.active}`}
</Box> onClick={() => {
handleFileClick('file-' + file.name)
<Typography component="label" variant="h6"> setCurrentFile(file)
Add Counterparts }}
</Typography> >
<Box className={styles.inputBlock}> <>
<Box className={styles.inputBlock}> <span className={styles.fileName}>{file.name}</span>
<TextField <Button
label="nip05 / npub" variant="text"
value={userInput} onClick={(event) => handleRemoveFile(event, file)}
onChange={(e) => setUserInput(e.target.value)} sx={{
helperText={error} minWidth: '44px'
error={!!error} }}
/> >
<FormControl fullWidth> <FontAwesomeIcon icon={faTrash} />
<InputLabel id="select-role-label">Role</InputLabel> </Button>
<Select </>
labelId="select-role-label" </div>
id="demo-simple-select" ))}
value={userRole} </ol>
label="Role" <Button variant="contained" onClick={handleUploadButtonClick}>
onChange={(e) => setUserRole(e.target.value as UserRole)} <FontAwesomeIcon icon={faUpload} />
> <span className={styles.uploadFileText}>Upload new files</span>
<MenuItem value={UserRole.signer}>{UserRole.signer}</MenuItem> <input
<MenuItem value={UserRole.viewer}>{UserRole.viewer}</MenuItem> ref={fileInputRef}
</Select> hidden={true}
</FormControl> multiple={true}
type="file"
<Box sx={{ mt: 1, display: 'flex', justifyContent: 'center' }}> onChange={handleSelectFiles}
<Button />
disabled={!userInput}
onClick={handleAddUser}
variant="contained"
>
Add
</Button> </Button>
</Box> </div>
</Box> }
</Box> right={
<div className={styles.flexWrap}>
<div className={styles.inputWrapper}>
<TextField
placeholder="User (nip05 / npub)"
value={userInput}
onChange={(e) => setUserInput(e.target.value)}
onKeyDown={handleInputKeyDown}
error={!!error}
fullWidth
sx={{
fontSize: '16px',
'& .MuiInputBase-input': {
padding: '7px 14px'
},
'& .MuiOutlinedInput-notchedOutline': {
display: 'none'
}
}}
/>
<Select
name="add-user-role"
aria-label="role"
value={userRole}
variant="filled"
// Hide arrow for dropdown
IconComponent={() => null}
renderValue={(value) => (
<FontAwesomeIcon
color="var(--primary-main)"
icon={value === UserRole.signer ? faPen : faEye}
/>
)}
onChange={(e) => setUserRole(e.target.value as UserRole)}
sx={{
fontSize: '16px',
minWidth: '44px',
'& .MuiInputBase-input': {
padding: '7px 14px!important',
textOverflow: 'unset!important'
}
}}
>
<MenuItem value={UserRole.signer}>
<ListItemIcon>
<FontAwesomeIcon icon={faPen} />
</ListItemIcon>
<ListItemText>{UserRole.signer}</ListItemText>
</MenuItem>
<MenuItem value={UserRole.viewer} sx={{}}>
<ListItemIcon>
<FontAwesomeIcon icon={faEye} />
</ListItemIcon>
<ListItemText>{UserRole.viewer}</ListItemText>
</MenuItem>
</Select>
<Button
disabled={!userInput}
onClick={handleAddUser}
variant="contained"
aria-label="Add"
sx={{
minWidth: '44px',
padding: '11.5px 12px',
borderTopLeftRadius: 0,
borderBottomLeftRadius: 0
}}
>
<FontAwesomeIcon icon={faPlus} />
</Button>
</div>
<DisplayUser <div className={styles.paperGroup}>
metadata={metadata} <DisplayUser
users={users} metadata={metadata}
handleUserRoleChange={handleUserRoleChange} users={users}
handleRemoveUser={handleRemoveUser} handleUserRoleChange={handleUserRoleChange}
moveSigner={moveSigner} handleRemoveUser={handleRemoveUser}
/> moveSigner={moveSigner}
/>
</div>
<DrawPDFFields <Button onClick={handleCreate} variant="contained">
metadata={metadata} Publish
users={users} </Button>
selectedFiles={selectedFiles}
onDrawFieldsChange={onDrawFieldsChange}
/>
<Box sx={{ mt: 1, mb: 5, display: 'flex', justifyContent: 'center' }}> <div className={`${styles.paperGroup} ${styles.toolbox}`}>
<Button onClick={handleCreate} variant="contained"> {toolbox.map((drawTool: DrawTool, index: number) => {
Create return (
</Button> <div
</Box> key={index}
onClick={
drawTool.active
? () => {
handleToolSelect(drawTool)
}
: () => null
}
className={`${styles.toolItem} ${selectedTool?.identifier === drawTool.identifier ? styles.selected : ''} ${!drawTool.active ? styles.comingSoon : ''}
`}
>
{drawTool.icon}
{drawTool.label}
{drawTool.active ? (
<FontAwesomeIcon icon={faEllipsis} />
) : (
<span
style={{
fontSize: '10px'
}}
>
Coming soon
</span>
)}
</div>
)
})}
</div>
{!!error && (
<FormHelperText error={!!error}>{error}</FormHelperText>
)}
</div>
}
>
<DrawPDFFields
metadata={metadata}
users={users}
selectedFiles={selectedFiles}
onDrawFieldsChange={onDrawFieldsChange}
selectedTool={selectedTool}
/>
</StickySideColumns>
</Container> </Container>
</> </>
) )
@ -811,80 +1080,93 @@ const DisplayUser = ({
moveSigner moveSigner
}: DisplayUsersProps) => { }: DisplayUsersProps) => {
return ( return (
<TableContainer component={Paper} elevation={3} sx={{ marginTop: '20px' }}> <>
<Table> <DndProvider backend={HTML5Backend}>
<TableHead> {users
<TableRow> .filter((user) => user.role === UserRole.signer)
<TableCell className={styles.tableHeaderCell}>User</TableCell> .map((user, index) => (
<TableCell className={styles.tableHeaderCell}>Role</TableCell> <SignerRow
<TableCell>Action</TableCell> key={`signer-${index}`}
</TableRow> userMeta={metadata[user.pubkey]}
</TableHead> user={user}
<TableBody> index={index}
<DndProvider backend={HTML5Backend}> moveSigner={moveSigner}
{users handleUserRoleChange={handleUserRoleChange}
.filter((user) => user.role === UserRole.signer) handleRemoveUser={handleRemoveUser}
.map((user, index) => ( />
<SignerRow ))}
key={`signer-${index}`} </DndProvider>
userMeta={metadata[user.pubkey]} {users
user={user} .filter((user) => user.role === UserRole.viewer)
index={index} .map((user, index) => {
moveSigner={moveSigner} const userMeta = metadata[user.pubkey]
handleUserRoleChange={handleUserRoleChange} return (
handleRemoveUser={handleRemoveUser} <div className={styles.user} key={index}>
<div className={styles.avatar}>
<UserAvatar
pubkey={user.pubkey}
name={
userMeta?.display_name ||
userMeta?.name ||
shorten(hexToNpub(user.pubkey))
}
image={userMeta?.picture}
/> />
))} </div>
</DndProvider> <Select
{users name={`change-user-role-${user.pubkey}`}
.filter((user) => user.role === UserRole.viewer) aria-label="role"
.map((user, index) => { value={user.role}
const userMeta = metadata[user.pubkey] variant="outlined"
return ( IconComponent={() => null}
<TableRow key={index}> renderValue={(value) => (
<TableCell className={styles.tableCell}> <FontAwesomeIcon
<UserAvatar fontSize={'14px'}
pubkey={user.pubkey} color="var(--primary-main)"
name={ icon={value === UserRole.signer ? faPen : faEye}
userMeta?.display_name || />
userMeta?.name || )}
shorten(hexToNpub(user.pubkey)) onChange={(e) =>
} handleUserRoleChange(e.target.value as UserRole, user.pubkey)
image={userMeta?.picture} }
/> sx={{
</TableCell> fontSize: '16px',
<TableCell className={styles.tableCell}> minWidth: '34px',
<Select maxWidth: '34px',
fullWidth minHeight: '34px',
value={user.role} maxHeight: '34px',
onChange={(e) => '& .MuiInputBase-input': {
handleUserRoleChange( padding: '10px !important',
e.target.value as UserRole, textOverflow: 'unset!important'
user.pubkey },
) '& .MuiOutlinedInput-notchedOutline': {
} display: 'none'
> }
<MenuItem value={UserRole.signer}> }}
{UserRole.signer} >
</MenuItem> <MenuItem value={UserRole.signer}>{UserRole.signer}</MenuItem>
<MenuItem value={UserRole.viewer}> <MenuItem value={UserRole.viewer}>{UserRole.viewer}</MenuItem>
{UserRole.viewer} </Select>
</MenuItem> <Tooltip title="Remove User" arrow>
</Select> <Button
</TableCell> onClick={() => handleRemoveUser(user.pubkey)}
<TableCell> sx={{
<Tooltip title="Remove User" arrow> minWidth: '34px',
<IconButton onClick={() => handleRemoveUser(user.pubkey)}> height: '34px',
<Clear style={{ color: 'red' }} /> padding: 0,
</IconButton> color: 'rgba(0, 0, 0, 0.35)',
</Tooltip> '&:hover': {
</TableCell> color: 'white'
</TableRow> }
) }}
})} >
</TableBody> <FontAwesomeIcon fontSize={'14px'} icon={faTrash} />
</Table> </Button>
</TableContainer> </Tooltip>
</div>
)
})}
</>
) )
} }
@ -988,16 +1270,14 @@ const SignerRow = ({
drag(drop(ref)) drag(drop(ref))
return ( return (
<TableRow <div
sx={{ cursor: 'move', opacity }} className={styles.user}
style={{ cursor: 'move', opacity }}
data-handler-id={handlerId} data-handler-id={handlerId}
ref={ref} ref={ref}
> >
<TableCell <FontAwesomeIcon width={'14px'} fontSize={'14px'} icon={faGripLines} />
className={styles.tableCell} <div className={styles.avatar}>
sx={{ display: 'flex', alignItems: 'center', gap: '10px' }}
>
<DragHandle />
<UserAvatar <UserAvatar
pubkey={user.pubkey} pubkey={user.pubkey}
name={ name={
@ -1007,26 +1287,57 @@ const SignerRow = ({
} }
image={userMeta?.picture} image={userMeta?.picture}
/> />
</TableCell> </div>
<TableCell className={styles.tableCell}> <Select
<Select name={`change-user-role-${user.pubkey}`}
fullWidth aria-label="role"
value={user.role} value={user.role}
onChange={(e) => variant="outlined"
handleUserRoleChange(e.target.value as UserRole, user.pubkey) IconComponent={() => null}
renderValue={(value) => (
<FontAwesomeIcon
fontSize={'14px'}
color="var(--primary-main)"
icon={value === UserRole.signer ? faPen : faEye}
/>
)}
onChange={(e) =>
handleUserRoleChange(e.target.value as UserRole, user.pubkey)
}
sx={{
fontSize: '16px',
minWidth: '34px',
maxWidth: '34px',
minHeight: '34px',
maxHeight: '34px',
'& .MuiInputBase-input': {
padding: '10px !important',
textOverflow: 'unset!important'
},
'& .MuiOutlinedInput-notchedOutline': {
display: 'none'
} }
}}
>
<MenuItem value={UserRole.signer}>{UserRole.signer}</MenuItem>
<MenuItem value={UserRole.viewer}>{UserRole.viewer}</MenuItem>
</Select>
<Tooltip title="Remove User" arrow>
<Button
onClick={() => handleRemoveUser(user.pubkey)}
sx={{
minWidth: '34px',
height: '34px',
padding: 0,
color: 'rgba(0, 0, 0, 0.35)',
'&:hover': {
color: 'white'
}
}}
> >
<MenuItem value={UserRole.signer}>{UserRole.signer}</MenuItem> <FontAwesomeIcon fontSize={'14px'} icon={faTrash} />
<MenuItem value={UserRole.viewer}>{UserRole.viewer}</MenuItem> </Button>
</Select> </Tooltip>
</TableCell> </div>
<TableCell>
<Tooltip title="Remove User" arrow>
<IconButton onClick={() => handleRemoveUser(user.pubkey)}>
<Clear style={{ color: 'red' }} />
</IconButton>
</Tooltip>
</TableCell>
</TableRow>
) )
} }

View File

@ -1,41 +1,176 @@
@import '../../styles/colors.scss'; @import '../../styles/colors.scss';
.container { .flexWrap {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
color: $text-color; gap: 15px;
margin-top: 10px;
gap: 10px;
width: 550px;
max-width: 550px;
.inputBlock {
display: flex;
flex-direction: column;
gap: 25px;
}
} }
.subHeader { .orderedFilesList {
border-bottom: 0.5px solid; counter-reset: item;
} list-style-type: none;
margin: 0;
.tableHeaderCell { li {
border-right: 1px solid rgba(224, 224, 224, 1);
}
.tableCell {
border-right: 1px solid rgba(224, 224, 224, 1);
height: 56px;
.user {
display: flex; display: flex;
align-items: center; align-items: center;
transition: ease 0.4s;
border-radius: 4px;
background: #ffffff;
padding: 7px 10px;
color: rgba(0, 0, 0, 0.5);
min-height: 45px;
cursor: pointer;
gap: 10px; gap: 10px;
.name { &::before {
text-align: center; content: counter(item) ' ';
cursor: pointer; counter-increment: item;
font-size: 14px;
}
:nth-child(1) {
flex-grow: 1;
font-size: 16px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
button {
color: $primary-main;
}
&:hover,
&.active,
&:focus-within {
background: $primary-main;
color: white;
button {
color: white;
}
} }
} }
} }
.uploadFileText {
margin-left: 12px;
}
.paperGroup {
border-radius: 4px;
background: white;
padding: 15px;
display: flex;
flex-direction: column;
gap: 15px;
// Automatic scrolling if paper-group gets large enough
// used for files on the left and users on the right
max-height: 350px;
overflow-x: hidden;
overflow-y: auto;
}
.inputWrapper {
display: flex;
align-items: center;
height: 34px;
overflow: hidden;
border-radius: 4px;
outline: solid 1px #dddddd;
background: white;
width: 100%;
&:focus-within {
outline-color: $primary-main;
}
}
.user {
display: flex;
gap: 10px;
font-size: 14px;
text-align: start;
justify-content: center;
align-items: center;
a:hover {
text-decoration: none;
}
}
.avatar {
flex-grow: 1;
min-width: 0;
&:first-child {
margin-left: 24px;
}
img {
// Override the default avatar size
width: 30px;
height: 30px;
}
}
.fileName {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
flex-grow: 1;
}
.toolbox {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 15px;
max-height: 450px;
overflow-x: hidden;
overflow-y: auto;
}
.toolItem {
width: 90px;
height: 90px;
transition: ease 0.2s;
display: inline-flex;
flex-direction: column;
gap: 5px;
border-radius: 4px;
padding: 10px 5px 5px 5px;
background: rgba(0, 0, 0, 0.05);
color: rgba(0, 0, 0, 0.5);
align-items: center;
justify-content: center;
font-size: 14px;
cursor: pointer;
-webkit-user-select: none;
user-select: none;
&.selected {
background: $primary-main;
color: white;
}
&:not(.selected) {
&:hover {
background: $primary-light;
color: white;
}
}
&.comingSoon {
opacity: 0.5;
cursor: not-allowed;
}
}

View File

@ -225,11 +225,11 @@ export const HomePage = () => {
type="button" type="button"
aria-label="upload files" aria-label="upload files"
> >
<input {...getInputProps()} /> <input id="file-upload" {...getInputProps()} />
{isDragActive ? ( {isDragActive ? (
<p>Drop the files here ...</p> <label htmlFor="file-upload">Drop the files here ...</label>
) : ( ) : (
<p>Click or drag files to upload!</p> <label htmlFor="file-upload">Click or drag files to upload!</label>
)} )}
</button> </button>
<div className={styles.submissions}> <div className={styles.submissions}>

View File

@ -236,9 +236,11 @@ export const SignPage = () => {
if (!arrayBuffer) return if (!arrayBuffer) return
const blob = new Blob([arrayBuffer]) const blob = new Blob([arrayBuffer])
saveAs(blob, `exported-${unixNow()}.sigit.zip`) saveAs(blob, `exported-${unixNow()}.sigit.zip`)
} catch (error: any) { } catch (error) {
console.log('error in zip:>> ', error) console.log('error in zip:>> ', error)
toast.error(error.message || 'Error occurred in generating zip file') if (error instanceof Error) {
toast.error(error.message || 'Error occurred in generating zip file')
}
} }
} }

View File

@ -141,7 +141,7 @@ export const DisplayMeta = ({
}) })
} }
}) })
}, [users, submittedBy]) }, [users, submittedBy, metadata])
const downloadFile = async (filename: string) => { const downloadFile = async (filename: string) => {
const arrayBuffer = await files[filename].file.arrayBuffer() const arrayBuffer = await files[filename].file.arrayBuffer()

View File

@ -41,9 +41,22 @@ export interface DrawTool {
} }
export enum MarkType { export enum MarkType {
TEXT = 'TEXT',
SIGNATURE = 'SIGNATURE', SIGNATURE = 'SIGNATURE',
JOBTITLE = 'JOBTITLE', JOBTITLE = 'JOBTITLE',
FULLNAME = 'FULLNAME', FULLNAME = 'FULLNAME',
INITIALS = 'INITIALS',
DATETIME = 'DATETIME',
DATE = 'DATE', DATE = 'DATE',
DATETIME = 'DATETIME' NUMBER = 'NUMBER',
IMAGES = 'IMAGES',
CHECKBOX = 'CHECKBOX',
MULTIPLE = 'MULTIPLE',
FILE = 'FILE',
RADIO = 'RADIO',
SELECT = 'SELECT',
CELLS = 'CELLS',
STAMP = 'STAMP',
PAYMENT = 'PAYMENT',
PHONE = 'PHONE'
} }

View File

@ -1,18 +1,26 @@
export class DecryptionError extends Error { export class DecryptionError extends Error {
public message: string = '' public message: string = ''
constructor(public inputError: any) { constructor(public inputError: unknown) {
super() super()
if (inputError.message.toLowerCase().includes('expected')) { // Make sure inputError has access to the .message
this.message = `The decryption key length or format is invalid.` if (inputError instanceof Error) {
} else if ( if (inputError.message.toLowerCase().includes('expected')) {
inputError.message.includes('The JWK "alg" member was inconsistent') this.message = `The decryption key length or format is invalid.`
) { } else if (
this.message = `The decryption key is invalid.` inputError.message.includes('The JWK "alg" member was inconsistent')
) {
this.message = `The decryption key is invalid.`
} else {
this.message =
inputError.message || 'An error occurred while decrypting file.'
}
} else { } else {
// We don't have message on the inputError
// Stringify whole error and set that as a message
this.message = this.message =
inputError.message || 'An error occurred while decrypting file.' JSON.stringify(inputError) || 'An error occurred while decrypting file.'
} }
this.name = 'DecryptionError' this.name = 'DecryptionError'

View File

@ -190,3 +190,11 @@ export const extractFileExtensions = (fileNames: string[]) => {
return { extensions, isSame } return { extensions, isSame }
} }
/**
* @param fileName - Filename to check
* @returns Extension string
*/
export const extractFileExtension = (fileName: string) => {
return fileName.split('.').pop()
}

View File

@ -37,9 +37,11 @@ const readContentOfZipEntry = async <T extends OutputType>(
const loadZip = async (data: InputFileFormat): Promise<JSZip | null> => { const loadZip = async (data: InputFileFormat): Promise<JSZip | null> => {
try { try {
return await JSZip.loadAsync(data) return await JSZip.loadAsync(data)
} catch (err: any) { } catch (err) {
console.log('err in loading zip file :>> ', err) console.log('err in loading zip file :>> ', err)
toast.error(err.message || 'An error occurred in loading zip file.') if (err instanceof Error) {
toast.error(err.message || 'An error occurred in loading zip file.')
}
return null return null
} }
} }