feat(create-page): new create page design #153
@ -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}\"",
|
||||||
|
@ -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>
|
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
@ -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;
|
||||||
|
}
|
||||||
|
@ -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 {
|
||||||
|
@ -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;
|
||||||
}
|
}
|
||||||
|
@ -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>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
@ -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;
|
||||||
}
|
}
|
||||||
|
@ -10,6 +10,9 @@
|
|||||||
|
|
||||||
.sidesWrap {
|
.sidesWrap {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
|
// HACK: Stop grid column from growing
|
||||||
|
min-width: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sides {
|
.sides {
|
||||||
|
@ -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>
|
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@ -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}>
|
||||||
|
@ -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')
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -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()
|
||||||
|
@ -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'
|
||||||
}
|
}
|
||||||
|
@ -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'
|
||||||
|
@ -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()
|
||||||
|
}
|
||||||
|
@ -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
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user