Merge pull request 'feat(create-page): new create page design' (#153) from 148-create-page into staging
All checks were successful
Release to Staging / build_and_release (push) Successful in 1m12s

Reviewed-on: #153
This commit is contained in:
enes 2024-08-20 12:43:20 +00:00
commit 4d794e1e53
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,54 +33,21 @@ 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(() => {
if (selectedFiles) {
/** /**
* Reads the pdf binary files and converts it's pages to images * Reads the pdf binary files and converts it's pages to images
* creates the pdfFiles object and sets to a state * creates the pdfFiles object and sets to a state
@ -103,7 +57,7 @@ export const DrawPDFFields = (props: Props) => {
setPdfFiles(pdfFiles) setPdfFiles(pdfFiles)
} }
if (selectedFiles) {
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 : ''}`}
>
<img
onMouseMove={(event) => { onMouseMove={(event) => {
onMouseMove(event, page) onMouseMove(event, page)
}} }}
onMouseDown={(event) => { onMouseDown={(event) => {
onMouseDown(event, page) onMouseDown(event, page)
}} }}
>
<img
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,7 +417,9 @@ export const DrawPDFFields = (props: Props) => {
labelId="counterparts" labelId="counterparts"
label="Counterparts" label="Counterparts"
> >
{users.map((user, index) => { {users
.filter((u) => u.role === UserRole.signer)
.map((user, index) => {
let displayValue = truncate( let displayValue = truncate(
hexToNpub(user.pubkey), hexToNpub(user.pubkey),
{ {
@ -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
<PictureAsPdf sx={{ mr: 1 }} /> </div>
{pdfFile.file.name}
</AccordionSummary>
<AccordionDetails>
{getPdfPages(pdfFile, pdfFileIndex)}
</AccordionDetails>
</Accordion>
)
})}
</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> </div>
{i < selectedFiles.length - 1 && (
<Divider
sx={{
fontSize: '12px',
color: 'rgba(0,0,0,0.15)'
}}
>
File Separator
</Divider>
)}
</React.Fragment>
)
})}
</div>
) )
} }

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

@ -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;
@ -75,7 +74,7 @@ li {
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 {
@ -88,13 +121,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;

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,74 +865,140 @@ export const CreatePage = () => {
<> <>
{isLoading && <LoadingSpinner desc={loadingSpinnerDesc} />} {isLoading && <LoadingSpinner desc={loadingSpinnerDesc} />}
<Container className={styles.container}> <Container className={styles.container}>
<StickySideColumns
left={
<div className={styles.flexWrap}>
<div className={styles.inputWrapper}>
<TextField <TextField
label="Title" placeholder="Title"
size="small"
type="text"
value={title} value={title}
onChange={(e) => setTitle(e.target.value)} onChange={(e) => setTitle(e.target.value)}
variant="outlined" sx={{
width: '100%',
fontSize: '16px',
'& .MuiInputBase-input': {
padding: '7px 14px'
},
'& .MuiOutlinedInput-notchedOutline': {
display: 'none'
}
}}
/> />
</div>
<Box> <ol className={`${styles.paperGroup} ${styles.orderedFilesList}`}>
<MuiFileInput {selectedFiles.length > 0 &&
fullWidth selectedFiles.map((file, index) => (
multiple <div
placeholder="Choose Files" key={index}
value={selectedFiles} className={`${fileListStyles.fileItem} ${isActive(file) && fileListStyles.active}`}
onChange={(value) => handleSelectFiles(value)} onClick={() => {
/> handleFileClick('file-' + file.name)
setCurrentFile(file)
{selectedFiles.length > 0 && ( }}
<ul> >
{selectedFiles.map((file, index) => ( <>
<li key={index}> <span className={styles.fileName}>{file.name}</span>
<Typography component="label">{file.name}</Typography> <Button
<IconButton onClick={() => handleRemoveFile(file)}> variant="text"
<Clear style={{ color: 'red' }} />{' '} onClick={(event) => handleRemoveFile(event, file)}
</IconButton> sx={{
</li> minWidth: '44px'
}}
>
<FontAwesomeIcon icon={faTrash} />
</Button>
</>
</div>
))} ))}
</ul> </ol>
)} <Button variant="contained" onClick={handleUploadButtonClick}>
</Box> <FontAwesomeIcon icon={faUpload} />
<span className={styles.uploadFileText}>Upload new files</span>
<Typography component="label" variant="h6"> <input
Add Counterparts ref={fileInputRef}
</Typography> hidden={true}
<Box className={styles.inputBlock}> multiple={true}
<Box className={styles.inputBlock}> type="file"
onChange={handleSelectFiles}
/>
</Button>
</div>
}
right={
<div className={styles.flexWrap}>
<div className={styles.inputWrapper}>
<TextField <TextField
label="nip05 / npub" placeholder="User (nip05 / npub)"
value={userInput} value={userInput}
onChange={(e) => setUserInput(e.target.value)} onChange={(e) => setUserInput(e.target.value)}
helperText={error} onKeyDown={handleInputKeyDown}
error={!!error} error={!!error}
fullWidth
sx={{
fontSize: '16px',
'& .MuiInputBase-input': {
padding: '7px 14px'
},
'& .MuiOutlinedInput-notchedOutline': {
display: 'none'
}
}}
/> />
<FormControl fullWidth>
<InputLabel id="select-role-label">Role</InputLabel>
<Select <Select
labelId="select-role-label" name="add-user-role"
id="demo-simple-select" aria-label="role"
value={userRole} value={userRole}
label="Role" 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)} 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}>{UserRole.signer}</MenuItem> <MenuItem value={UserRole.signer}>
<MenuItem value={UserRole.viewer}>{UserRole.viewer}</MenuItem> <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> </Select>
</FormControl>
<Box sx={{ mt: 1, display: 'flex', justifyContent: 'center' }}>
<Button <Button
disabled={!userInput} disabled={!userInput}
onClick={handleAddUser} onClick={handleAddUser}
variant="contained" variant="contained"
aria-label="Add"
sx={{
minWidth: '44px',
padding: '11.5px 12px',
borderTopLeftRadius: 0,
borderBottomLeftRadius: 0
}}
> >
Add <FontAwesomeIcon icon={faPlus} />
</Button> </Button>
</Box> </div>
</Box>
</Box>
<div className={styles.paperGroup}>
<DisplayUser <DisplayUser
metadata={metadata} metadata={metadata}
users={users} users={users}
@ -777,19 +1006,59 @@ export const CreatePage = () => {
handleRemoveUser={handleRemoveUser} handleRemoveUser={handleRemoveUser}
moveSigner={moveSigner} moveSigner={moveSigner}
/> />
</div>
<Button onClick={handleCreate} variant="contained">
Publish
</Button>
<div className={`${styles.paperGroup} ${styles.toolbox}`}>
{toolbox.map((drawTool: DrawTool, index: number) => {
return (
<div
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 <DrawPDFFields
metadata={metadata} metadata={metadata}
users={users} users={users}
selectedFiles={selectedFiles} selectedFiles={selectedFiles}
onDrawFieldsChange={onDrawFieldsChange} onDrawFieldsChange={onDrawFieldsChange}
selectedTool={selectedTool}
/> />
</StickySideColumns>
<Box sx={{ mt: 1, mb: 5, display: 'flex', justifyContent: 'center' }}>
<Button onClick={handleCreate} variant="contained">
Create
</Button>
</Box>
</Container> </Container>
</> </>
) )
@ -811,16 +1080,7 @@ const DisplayUser = ({
moveSigner moveSigner
}: DisplayUsersProps) => { }: DisplayUsersProps) => {
return ( return (
<TableContainer component={Paper} elevation={3} sx={{ marginTop: '20px' }}> <>
<Table>
<TableHead>
<TableRow>
<TableCell className={styles.tableHeaderCell}>User</TableCell>
<TableCell className={styles.tableHeaderCell}>Role</TableCell>
<TableCell>Action</TableCell>
</TableRow>
</TableHead>
<TableBody>
<DndProvider backend={HTML5Backend}> <DndProvider backend={HTML5Backend}>
{users {users
.filter((user) => user.role === UserRole.signer) .filter((user) => user.role === UserRole.signer)
@ -841,8 +1101,8 @@ const DisplayUser = ({
.map((user, index) => { .map((user, index) => {
const userMeta = metadata[user.pubkey] const userMeta = metadata[user.pubkey]
return ( return (
<TableRow key={index}> <div className={styles.user} key={index}>
<TableCell className={styles.tableCell}> <div className={styles.avatar}>
<UserAvatar <UserAvatar
pubkey={user.pubkey} pubkey={user.pubkey}
name={ name={
@ -852,39 +1112,61 @@ const DisplayUser = ({
} }
image={userMeta?.picture} image={userMeta?.picture}
/> />
</TableCell> </div>
<TableCell className={styles.tableCell}>
<Select <Select
fullWidth name={`change-user-role-${user.pubkey}`}
aria-label="role"
value={user.role} value={user.role}
variant="outlined"
IconComponent={() => null}
renderValue={(value) => (
<FontAwesomeIcon
fontSize={'14px'}
color="var(--primary-main)"
icon={value === UserRole.signer ? faPen : faEye}
/>
)}
onChange={(e) => onChange={(e) =>
handleUserRoleChange( handleUserRoleChange(e.target.value as UserRole, user.pubkey)
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}> <MenuItem value={UserRole.signer}>{UserRole.signer}</MenuItem>
{UserRole.signer} <MenuItem value={UserRole.viewer}>{UserRole.viewer}</MenuItem>
</MenuItem>
<MenuItem value={UserRole.viewer}>
{UserRole.viewer}
</MenuItem>
</Select> </Select>
</TableCell>
<TableCell>
<Tooltip title="Remove User" arrow> <Tooltip title="Remove User" arrow>
<IconButton onClick={() => handleRemoveUser(user.pubkey)}> <Button
<Clear style={{ color: 'red' }} /> onClick={() => handleRemoveUser(user.pubkey)}
</IconButton> sx={{
minWidth: '34px',
height: '34px',
padding: 0,
color: 'rgba(0, 0, 0, 0.35)',
'&:hover': {
color: 'white'
}
}}
>
<FontAwesomeIcon fontSize={'14px'} icon={faTrash} />
</Button>
</Tooltip> </Tooltip>
</TableCell> </div>
</TableRow>
) )
})} })}
</TableBody> </>
</Table>
</TableContainer>
) )
} }
@ -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
fullWidth name={`change-user-role-${user.pubkey}`}
aria-label="role"
value={user.role} value={user.role}
variant="outlined"
IconComponent={() => null}
renderValue={(value) => (
<FontAwesomeIcon
fontSize={'14px'}
color="var(--primary-main)"
icon={value === UserRole.signer ? faPen : faEye}
/>
)}
onChange={(e) => onChange={(e) =>
handleUserRoleChange(e.target.value as UserRole, user.pubkey) 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.signer}>{UserRole.signer}</MenuItem>
<MenuItem value={UserRole.viewer}>{UserRole.viewer}</MenuItem> <MenuItem value={UserRole.viewer}>{UserRole.viewer}</MenuItem>
</Select> </Select>
</TableCell>
<TableCell>
<Tooltip title="Remove User" arrow> <Tooltip title="Remove User" arrow>
<IconButton onClick={() => handleRemoveUser(user.pubkey)}> <Button
<Clear style={{ color: 'red' }} /> onClick={() => handleRemoveUser(user.pubkey)}
</IconButton> sx={{
minWidth: '34px',
height: '34px',
padding: 0,
color: 'rgba(0, 0, 0, 0.35)',
'&:hover': {
color: 'white'
}
}}
>
<FontAwesomeIcon fontSize={'14px'} icon={faTrash} />
</Button>
</Tooltip> </Tooltip>
</TableCell> </div>
</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; }
.orderedFilesList {
counter-reset: item;
list-style-type: none;
margin: 0;
li {
display: flex;
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;
width: 550px;
max-width: 550px;
.inputBlock { &::before {
content: counter(item) ' ';
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; display: flex;
flex-direction: column; flex-direction: column;
gap: 25px; 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;
} }
.subHeader { .inputWrapper {
border-bottom: 0.5px solid; display: flex;
} align-items: center;
.tableHeaderCell { height: 34px;
border-right: 1px solid rgba(224, 224, 224, 1); overflow: hidden;
} border-radius: 4px;
outline: solid 1px #dddddd;
background: white;
.tableCell { width: 100%;
border-right: 1px solid rgba(224, 224, 224, 1);
height: 56px; &:focus-within {
outline-color: $primary-main;
}
}
.user { .user {
display: flex; display: flex;
align-items: center;
gap: 10px; gap: 10px;
.name { font-size: 14px;
text-align: center; 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; 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,11 +236,13 @@ 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)
if (error instanceof Error) {
toast.error(error.message || 'Error occurred in generating zip file') toast.error(error.message || 'Error occurred in generating zip file')
} }
} }
}
const decrypt = useCallback( const decrypt = useCallback(
async (file: File) => { async (file: 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,9 +1,11 @@
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()
// Make sure inputError has access to the .message
if (inputError instanceof Error) {
if (inputError.message.toLowerCase().includes('expected')) { if (inputError.message.toLowerCase().includes('expected')) {
this.message = `The decryption key length or format is invalid.` this.message = `The decryption key length or format is invalid.`
} else if ( } else if (
@ -14,6 +16,12 @@ export class DecryptionError extends Error {
this.message = this.message =
inputError.message || 'An error occurred while decrypting file.' inputError.message || 'An error occurred while decrypting file.'
} }
} else {
// We don't have message on the inputError
// Stringify whole error and set that as a message
this.message =
JSON.stringify(inputError) || 'An error occurred while decrypting file.'
}
this.name = 'DecryptionError' this.name = 'DecryptionError'
Object.setPrototypeOf(this, DecryptionError.prototype) Object.setPrototypeOf(this, DecryptionError.prototype)

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)
if (err instanceof Error) {
toast.error(err.message || 'An error occurred in loading zip file.') toast.error(err.message || 'An error occurred in loading zip file.')
}
return null return null
} }
} }