fix: styling

feat(pdf-marking): integrates layouts
refactor: rename Files to StickySideColumns and update css
2024-08-14 16:08:42 +03:00 · 2024-08-14 12:36:51 +03:00 · 2024-08-14 12:28:39 +03:00 · 2024-08-14 12:28:39 +03:00 · 2024-08-14 12:24:15 +03:00 · 2024-08-13 12:48:52 +03:00
25 changed files with 1086 additions and 333 deletions
--- a/src/components/DrawPDFFields/style.module.scss
+++ b/src/components/DrawPDFFields/style.module.scss
@ -50,6 +50,7 @@
 .pdfImageWrapper {
  position: relative;
  user-select: none;
+  margin-bottom: 10px;
  
  &.drawing {
    cursor: crosshair;
@ -71,6 +72,10 @@
    visibility: hidden;
  }

+  &.edited {
+    border: 1px dotted #01aaad
+  }
+
  .resizeHandle {
    position: absolute;
    right: -5px;
--- a/src/components/FileList/index.tsx
+++ b/src/components/FileList/index.tsx
@ -0,0 +1,42 @@
+import { CurrentUserFile } from '../../types/file.ts'
+import styles from './style.module.scss'
+import { Button } from '@mui/material'
+
+interface FileListProps {
+  files: CurrentUserFile[]
+  currentFile: CurrentUserFile
+  setCurrentFile: (file: CurrentUserFile) => void
+  handleDownload: () => void
+}
+
+const FileList = ({
+  files,
+  currentFile,
+  setCurrentFile,
+  handleDownload
+}: FileListProps) => {
+  const isActive = (file: CurrentUserFile) => file.id === currentFile.id
+  return (
+    <div className={styles.wrap}>
+      <div className={styles.container}>
+        <ul className={styles.files}>
+          {files.map((file: CurrentUserFile) => (
+            <li
+              key={file.id}
+              className={`${styles.fileItem} ${isActive(file) && styles.active}`}
+              onClick={() => setCurrentFile(file)}
+            >
+              <span className={styles.fileNumber}>{file.id}</span>
+              <span className={styles.fileName}>{file.filename}</span>
+            </li>
+          ))}
+        </ul>
+      </div>
+      <Button variant="contained" fullWidth onClick={handleDownload}>
+        Download Files
+      </Button>
+    </div>
+  )
+}
+
+export default FileList
--- a/src/components/FileList/style.module.scss
+++ b/src/components/FileList/style.module.scss
@ -0,0 +1,106 @@
+.container {
+  border-radius: 4px;
+  background: white;
+  padding: 15px;
+  display: flex;
+  flex-direction: column;
+  grid-gap: 0px;
+}
+
+.filesPageContainer {
+  width: 100%;
+  display: grid;
+  grid-template-columns: 0.75fr 1.5fr 0.75fr;
+  grid-gap: 30px;
+  flex-grow: 1;
+}
+
+ul {
+  list-style-type: none; /* Removes bullet points */
+  margin: 0;             /* Removes default margin */
+  padding: 0;            /* Removes default padding */
+}
+
+
+.wrap {
+  position: sticky;
+  top: 15px;
+  display: flex;
+  flex-direction: column;
+  grid-gap: 15px;
+}
+
+.files {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  grid-gap: 15px;
+  max-height: 350px;
+  overflow: auto;
+  padding: 0 5px 0 0;
+  margin: 0 -5px 0 0;
+}
+
+.files::-webkit-scrollbar {
+  width: 10px;
+}
+
+.files::-webkit-scrollbar-track {
+  background-color: rgba(0,0,0,0.15);
+}
+
+.files::-webkit-scrollbar-thumb {
+  max-width: 10px;
+  border-radius: 2px;
+  background-color: #4c82a3;
+  cursor: grab;
+}
+
+.wrap {
+  margin-top: 5px;
+}
+
+.fileItem {
+  transition: ease 0.2s;
+  display: flex;
+  flex-direction: row;
+  grid-gap: 10px;
+  border-radius: 4px;
+  overflow: hidden;
+  background: #ffffff;
+  padding: 5px 10px;
+  align-items: center;
+  color: rgba(0,0,0,0.5);
+  cursor: pointer;
+  flex-grow: 1;
+  font-size: 16px;
+  font-weight: 500;
+
+
+  &.active {
+    background: #4c82a3;
+    color: white;
+  }
+}
+
+.fileItem:hover {
+  transition: ease 0.2s;
+  background: #4c82a3;
+  color: white;
+}
+
+.fileName {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  -webkit-line-clamp: 1;
+}
+
+.fileNumber {
+  font-size: 14px;
+  font-weight: 500;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
--- a/src/components/MarkFormField/index.tsx
+++ b/src/components/MarkFormField/index.tsx
@ -0,0 +1,124 @@
+import { CurrentUserMark } from '../../types/mark.ts'
+import styles from './style.module.scss'
+
+import { MARK_TYPE_TRANSLATION, NEXT, SIGN } from '../../utils/const.ts'
+import {
+  findNextIncompleteCurrentUserMark,
+  isCurrentUserMarksComplete,
+  isCurrentValueLast
+} from '../../utils'
+import { useState } from 'react'
+
+interface MarkFormFieldProps {
+  handleSubmit: (event: any) => void
+  handleSelectedMarkValueChange: (event: any) => void
+  selectedMark: CurrentUserMark
+  selectedMarkValue: string
+  currentUserMarks: CurrentUserMark[]
+  handleCurrentUserMarkChange: (mark: CurrentUserMark) => void
+}
+
+/**
+ * Responsible for rendering a form field connected to a mark and keeping track of its value.
+ */
+const MarkFormField = ({
+  handleSubmit,
+  handleSelectedMarkValueChange,
+  selectedMark,
+  selectedMarkValue,
+  currentUserMarks,
+  handleCurrentUserMarkChange
+}: MarkFormFieldProps) => {
+  const [displayActions, setDisplayActions] = useState(true)
+  const getSubmitButtonText = () => (isReadyToSign() ? SIGN : NEXT)
+  const isReadyToSign = () =>
+    isCurrentUserMarksComplete(currentUserMarks) ||
+    isCurrentValueLast(currentUserMarks, selectedMark, selectedMarkValue)
+  const isCurrent = (currentMark: CurrentUserMark) =>
+    currentMark.id === selectedMark.id
+  const isDone = (currentMark: CurrentUserMark) =>
+    isCurrent(currentMark) ? !!selectedMarkValue : currentMark.isCompleted
+  const findNext = () => {
+    return (
+      currentUserMarks[selectedMark.id] ||
+      findNextIncompleteCurrentUserMark(currentUserMarks)
+    )
+  }
+  const handleFormSubmit = (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault()
+    console.log('handle form submit runs...')
+    return isReadyToSign()
+      ? handleSubmit(event)
+      : handleCurrentUserMarkChange(findNext()!)
+  }
+  const toggleActions = () => setDisplayActions(!displayActions)
+  return (
+    <div className={styles.container}>
+      <div className={styles.trigger}>
+        <button
+          onClick={toggleActions}
+          className={styles.triggerBtn}
+          type="button"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="-64 0 512 512"
+            width="1em"
+            height="1em"
+            fill="currentColor"
+            transform={displayActions ? 'rotate(180)' : 'rotate(0)'}
+          >
+            <path d="M352 352c-8.188 0-16.38-3.125-22.62-9.375L192 205.3l-137.4 137.4c-12.5 12.5-32.75 12.5-45.25 0s-12.5-32.75 0-45.25l160-160c12.5-12.5 32.75-12.5 45.25 0l160 160c12.5 12.5 12.5 32.75 0 45.25C368.4 348.9 360.2 352 352 352z"></path>
+          </svg>
+        </button>
+      </div>
+      <div className={`${styles.actions} ${displayActions && styles.expanded}`}>
+        <div className={styles.actionsWrapper}>
+          <div className={styles.actionsTop}>
+            <div className={styles.actionsTopInfo}>
+              <p className={styles.actionsTopInfoText}>Add your signature</p>
+            </div>
+          </div>
+          <div className={styles.inputWrapper}>
+            <form onSubmit={(e) => handleFormSubmit(e)}>
+              <input
+                className={styles.input}
+                placeholder={
+                  MARK_TYPE_TRANSLATION[selectedMark.mark.type.valueOf()]
+                }
+                onChange={handleSelectedMarkValueChange}
+                value={selectedMarkValue}
+              />
+              <div className={styles.actionsBottom}>
+                <button type="submit" className={styles.submitButton}>
+                  {getSubmitButtonText()}
+                </button>
+              </div>
+            </form>
+            <div className={styles.footerContainer}>
+              <div className={styles.footer}>
+                {currentUserMarks.map((mark, index) => {
+                  return (
+                    <div className={styles.pagination} key={index}>
+                      <button
+                        className={`${styles.paginationButton} ${isDone(mark) && styles.paginationButtonDone}`}
+                        onClick={() => handleCurrentUserMarkChange(mark)}
+                      >
+                        {mark.id}
+                      </button>
+                      {isCurrent(mark) && (
+                        <div className={styles.paginationButtonCurrent}></div>
+                      )}
+                    </div>
+                  )
+                })}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default MarkFormField
--- a/src/components/MarkFormField/style.module.scss
+++ b/src/components/MarkFormField/style.module.scss
@ -0,0 +1,209 @@
+.container {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  position: fixed;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  align-items: center;
+}
+
+.actions {
+  background: white;
+  width: 100%;
+  border-radius: 4px;
+  padding: 10px 20px;
+  display: none;
+  flex-direction: column;
+  align-items: center;
+  grid-gap: 15px;
+  box-shadow: 0 -2px 4px 0 rgb(0,0,0,0.1);
+  max-width: 750px;
+
+  &.expanded {
+    display: flex;
+  }
+}
+
+.actionsWrapper {
+  display: flex;
+  flex-direction: column;
+  grid-gap: 20px;
+  flex-grow: 1;
+  width: 100%;
+}
+
+.actionsTop {
+  display: flex;
+  flex-direction: row;
+  grid-gap: 10px;
+  align-items: center;
+}
+
+.actionsTopInfo {
+  flex-grow: 1;
+}
+
+.actionsTopInfoText {
+  font-size: 16px;
+  color: #434343;
+}
+
+.actionsTrigger {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+}
+
+.actionButtons {
+  display: flex;
+  flex-direction: row;
+  grid-gap: 5px;
+}
+
+.inputWrapper {
+  display: flex;
+  flex-direction: column;
+  grid-gap: 10px;
+}
+
+.textInput {
+  height: 100px;
+  background: rgba(0,0,0,0.1);
+  border-radius: 4px;
+  border: solid 2px #4c82a3;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.input {
+  border-radius: 4px;
+  border: solid 1px rgba(0,0,0,0.15);
+  padding: 5px 10px;
+  font-size: 16px;
+  width: 100%;
+  background: linear-gradient(rgba(0,0,0,0.00), rgba(0,0,0,0.00) 100%), linear-gradient(white, white);
+}
+
+.input:focus {
+  border: solid 1px rgba(0,0,0,0.15);
+  outline: none;
+  background: linear-gradient(rgba(0,0,0,0.05), rgba(0,0,0,0.05) 100%), linear-gradient(white, white);
+}
+
+.actionsBottom {
+  display: flex;
+  flex-direction: row;
+  grid-gap: 5px;
+  justify-content: 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 {
+  width: 100%;
+  max-width: 300px;
+  margin-top: 10px;
+}
+
+.footerContainer {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+}
+
+.footer {
+  display: flex;
+  flex-direction: row;
+  grid-gap: 5px;
+  align-items: start;
+  justify-content: center;
+  width: 100%;
+}
+
+.pagination {
+  display: flex;
+  flex-direction: column;
+  grid-gap: 5px;
+}
+
+.paginationButton {
+  font-size: 12px;
+  padding: 5px 10px;
+  border-radius: 3px;
+  background: rgba(0,0,0,0.1);
+  color: rgba(0,0,0,0.5);
+}
+
+.paginationButton:hover {
+  background: #447592;
+  color: rgba(255,255,255,0.5);
+}
+
+.paginationButtonDone {
+  background: #5e8eab;
+  color: rgb(255,255,255);
+}
+
+.paginationButtonCurrent {
+  height: 2px;
+  width: 100%;
+  background: #4c82a3;
+}
+
+.trigger {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+}
+
+.triggerBtn {
+  background: white;
+  color: #434343;
+  padding: 5px 30px;
+  box-shadow: 0px -3px 4px 0 rgb(0,0,0,0.1);
+  position: absolute;
+  top: -25px;
+}
--- a/src/components/PDFView/PdfItem.tsx
+++ b/src/components/PDFView/PdfItem.tsx
@ -1,6 +1,6 @@
 import { PdfFile } from '../../types/drawing.ts'
 import { CurrentUserMark } from '../../types/mark.ts'
-import PdfPageItem  from './PdfPageItem.tsx';
+import PdfPageItem from './PdfPageItem.tsx'

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

-export default PdfItem
+export default PdfItem
--- a/src/components/PDFView/PdfMarkItem.tsx
+++ b/src/components/PDFView/PdfMarkItem.tsx
@ -12,26 +12,31 @@ interface PdfMarkItemProps {
 /**
 * Responsible for display an individual Pdf Mark.
 */
-const PdfMarkItem = ({ selectedMark, handleMarkClick, selectedMarkValue, userMark }: PdfMarkItemProps) => {
-  const { location } = userMark.mark;
-  const handleClick = () => handleMarkClick(userMark.mark.id);
-  const getMarkValue = () => (
-    selectedMark?.mark.id === userMark.mark.id
-      ? selectedMarkValue
-      : userMark.mark.value
-  )
+const PdfMarkItem = ({
+  selectedMark,
+  handleMarkClick,
+  selectedMarkValue,
+  userMark
+}: PdfMarkItemProps) => {
+  const { location } = userMark.mark
+  const handleClick = () => handleMarkClick(userMark.mark.id)
+  const isEdited = () => selectedMark?.mark.id === userMark.mark.id
+  const getMarkValue = () =>
+    isEdited() ? selectedMarkValue : userMark.currentValue
  return (
    <div
      onClick={handleClick}
-      className={styles.drawingRectangle}
+      className={`${styles.drawingRectangle} ${isEdited() && styles.edited}`}
      style={{
        left: inPx(location.left),
        top: inPx(location.top),
        width: inPx(location.width),
        height: inPx(location.height)
      }}
-    >{getMarkValue()}</div>
+    >
+      {getMarkValue()}
+    </div>
  )
 }

-export default PdfMarkItem
+export default PdfMarkItem
--- a/src/components/PDFView/PdfMarking.tsx
+++ b/src/components/PDFView/PdfMarking.tsx
@ -1,23 +1,27 @@
 import PdfView from './index.tsx'
-import MarkFormField from '../../pages/sign/MarkFormField.tsx'
-import { PdfFile } from '../../types/drawing.ts'
+import MarkFormField from '../MarkFormField'
 import { CurrentUserMark, Mark } from '../../types/mark.ts'
 import React, { useState, useEffect } from 'react'
 import {
-  findNextCurrentUserMark,
-  isCurrentUserMarksComplete,
-  updateCurrentUserMarks,
+  findNextIncompleteCurrentUserMark,
+  getUpdatedMark,
+  updateCurrentUserMarks
 } from '../../utils'
 import { EMPTY } from '../../utils/const.ts'
 import { Container } from '../Container'
-import styles from '../../pages/sign/style.module.scss'
+import signPageStyles from '../../pages/sign/style.module.scss'
+import styles from './style.module.scss'
+import { CurrentUserFile } from '../../types/file.ts'
+import FileList from '../FileList'
+import { StickySideColumns } from '../../layouts/StickySideColumns.tsx'

 interface PdfMarkingProps {
-  files: { pdfFile: PdfFile, filename: string, hash: string | null }[],
-  currentUserMarks: CurrentUserMark[],
-  setIsReadyToSign: (isReadyToSign: boolean) => void,
-  setCurrentUserMarks: (currentUserMarks: CurrentUserMark[]) => void,
+  files: CurrentUserFile[]
+  currentUserMarks: CurrentUserMark[]
+  setIsReadyToSign: (isReadyToSign: boolean) => void
+  setCurrentUserMarks: (currentUserMarks: CurrentUserMark[]) => void
  setUpdatedMarks: (markToUpdate: Mark) => void
+  handleDownload: () => void
 }

 /**
@ -32,69 +36,125 @@ const PdfMarking = (props: PdfMarkingProps) => {
    currentUserMarks,
    setIsReadyToSign,
    setCurrentUserMarks,
-    setUpdatedMarks
+    setUpdatedMarks,
+    handleDownload
  } = props
  const [selectedMark, setSelectedMark] = useState<CurrentUserMark | null>(null)
-  const [selectedMarkValue, setSelectedMarkValue] = useState<string>("")
+  const [selectedMarkValue, setSelectedMarkValue] = useState<string>('')
+  const [currentFile, setCurrentFile] = useState<CurrentUserFile | null>(null)

  useEffect(() => {
-    setSelectedMark(findNextCurrentUserMark(currentUserMarks) || null)
-  }, [currentUserMarks])
+    if (selectedMark === null && currentUserMarks.length > 0) {
+      setSelectedMark(
+        findNextIncompleteCurrentUserMark(currentUserMarks) ||
+          currentUserMarks[0]
+      )
+    }
+  }, [currentUserMarks, selectedMark])
+
+  useEffect(() => {
+    if (currentFile === null && files.length > 0) {
+      setCurrentFile(files[0])
+    }
+  }, [files, currentFile])

  const handleMarkClick = (id: number) => {
-    const nextMark = currentUserMarks.find((mark) => mark.mark.id === id);
-    setSelectedMark(nextMark!);
-    setSelectedMarkValue(nextMark?.mark.value ?? EMPTY);
+    const nextMark = currentUserMarks.find((mark) => mark.mark.id === id)
+    setSelectedMark(nextMark!)
+    setSelectedMarkValue(nextMark?.mark.value ?? EMPTY)
+  }
+
+  const handleCurrentUserMarkChange = (mark: CurrentUserMark) => {
+    if (!selectedMark) return
+    const updatedSelectedMark: CurrentUserMark = getUpdatedMark(
+      selectedMark,
+      selectedMarkValue
+    )
+
+    const updatedCurrentUserMarks = updateCurrentUserMarks(
+      currentUserMarks,
+      updatedSelectedMark
+    )
+    setCurrentUserMarks(updatedCurrentUserMarks)
+    setSelectedMarkValue(mark.currentValue ?? EMPTY)
+    setSelectedMark(mark)
  }

  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
-    event.preventDefault();
-    if (!selectedMarkValue || !selectedMark) return;
+    event.preventDefault()
+    if (!selectedMarkValue || !selectedMark) return

-    const updatedMark: CurrentUserMark = {
-      ...selectedMark,
-      mark: {
-        ...selectedMark.mark,
-        value: selectedMarkValue
-      },
-      isCompleted: true
-    }
+    const updatedMark: CurrentUserMark = getUpdatedMark(
+      selectedMark,
+      selectedMarkValue
+    )

    setSelectedMarkValue(EMPTY)
-    const updatedCurrentUserMarks = updateCurrentUserMarks(currentUserMarks, updatedMark);
+    const updatedCurrentUserMarks = updateCurrentUserMarks(
+      currentUserMarks,
+      updatedMark
+    )
    setCurrentUserMarks(updatedCurrentUserMarks)
-    setSelectedMark(findNextCurrentUserMark(updatedCurrentUserMarks) || null)
-    console.log(isCurrentUserMarksComplete(updatedCurrentUserMarks))
-    setIsReadyToSign(isCurrentUserMarksComplete(updatedCurrentUserMarks))
+    setSelectedMark(null)
+    setIsReadyToSign(true)
    setUpdatedMarks(updatedMark.mark)
  }

-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => setSelectedMarkValue(event.target.value)
+  // const updateCurrentUserMarkValues = () => {
+  //   const updatedMark: CurrentUserMark = getUpdatedMark(selectedMark!, selectedMarkValue)
+  //   const updatedCurrentUserMarks = updateCurrentUserMarks(currentUserMarks, updatedMark)
+  //   setSelectedMarkValue(EMPTY)
+  //   setCurrentUserMarks(updatedCurrentUserMarks)
+  // }
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) =>
+    setSelectedMarkValue(event.target.value)

  return (
    <>
-      <Container className={styles.container}>
-        {
-          currentUserMarks?.length > 0 && (
-            <PdfView
-              files={files}
-              handleMarkClick={handleMarkClick}
-              selectedMarkValue={selectedMarkValue}
-              selectedMark={selectedMark}
-              currentUserMarks={currentUserMarks}
-            />)}
-        {
-          selectedMark !== null && (
-            <MarkFormField
-              handleSubmit={handleSubmit}
-              handleChange={handleChange}
-              selectedMark={selectedMark}
-              selectedMarkValue={selectedMarkValue}
-            />
-          )}
+      <Container className={signPageStyles.container}>
+        <StickySideColumns
+          left={
+            <div>
+              {currentFile !== null && (
+                <FileList
+                  files={files}
+                  currentFile={currentFile}
+                  setCurrentFile={setCurrentFile}
+                  handleDownload={handleDownload}
+                />
+              )}
+            </div>
+          }
+        >
+          <div className={styles.container}>
+            {currentUserMarks?.length > 0 && (
+              <div className={styles.pdfView}>
+                <PdfView
+                  currentFile={currentFile}
+                  files={files}
+                  handleMarkClick={handleMarkClick}
+                  selectedMarkValue={selectedMarkValue}
+                  selectedMark={selectedMark}
+                  currentUserMarks={currentUserMarks}
+                />
+              </div>
+            )}
+          </div>
+        </StickySideColumns>
+        {selectedMark !== null && (
+          <MarkFormField
+            handleSubmit={handleSubmit}
+            handleSelectedMarkValueChange={handleChange}
+            selectedMark={selectedMark}
+            selectedMarkValue={selectedMarkValue}
+            currentUserMarks={currentUserMarks}
+            handleCurrentUserMarkChange={handleCurrentUserMarkChange}
+          />
+        )}
      </Container>
    </>
  )
 }

-export default PdfMarking
+export default PdfMarking
--- a/src/components/PDFView/PdfPageItem.tsx
+++ b/src/components/PDFView/PdfPageItem.tsx
@ -2,6 +2,7 @@ import styles from '../DrawPDFFields/style.module.scss'
 import { PdfPage } from '../../types/drawing.ts'
 import { CurrentUserMark } from '../../types/mark.ts'
 import PdfMarkItem from './PdfMarkItem.tsx'
+import { useEffect, useRef } from 'react'
 interface PdfPageProps {
  page: PdfPage
  currentUserMarks: CurrentUserMark[]
@ -13,34 +14,43 @@ interface PdfPageProps {
 /**
 * Responsible for rendering a single Pdf Page and its Marks
 */
-const PdfPageItem = ({ page, currentUserMarks, handleMarkClick, selectedMarkValue, selectedMark }: PdfPageProps) => {
+const PdfPageItem = ({
+  page,
+  currentUserMarks,
+  handleMarkClick,
+  selectedMarkValue,
+  selectedMark
+}: PdfPageProps) => {
+  useEffect(() => {
+    if (selectedMark !== null && !!markRefs.current[selectedMark.id]) {
+      markRefs.current[selectedMark.id]?.scrollIntoView({
+        behavior: 'smooth',
+        block: 'end'
+      })
+    }
+  }, [selectedMark])
+  const markRefs = useRef<(HTMLDivElement | null)[]>([])
  return (
    <div
      className={styles.pdfImageWrapper}
      style={{
-        border: '1px solid #c4c4c4',
-        marginBottom: '10px',
-        marginTop: '10px'
+        border: '1px solid #c4c4c4'
      }}
    >
-      <img
-        draggable="false"
-        src={page.image}
-        style={{ width: '100%'}}
-
-      />
-      {
-        currentUserMarks.map((m, i) => (
+      <img draggable="false" src={page.image} style={{ width: '100%' }} />
+      {currentUserMarks.map((m, i) => (
+        <div key={i} ref={(el) => (markRefs.current[m.id] = el)}>
          <PdfMarkItem
            key={i}
            handleMarkClick={handleMarkClick}
            selectedMarkValue={selectedMarkValue}
            userMark={m}
            selectedMark={selectedMark}
-        />
+          />
+        </div>
      ))}
    </div>
  )
 }

-export default PdfPageItem
+export default PdfPageItem
--- a/src/components/PDFView/index.tsx
+++ b/src/components/PDFView/index.tsx
@ -1,42 +1,72 @@
-import { PdfFile } from '../../types/drawing.ts'
-import { Box } from '@mui/material'
+import { Box, Divider } from '@mui/material'
 import PdfItem from './PdfItem.tsx'
 import { CurrentUserMark } from '../../types/mark.ts'
+import { CurrentUserFile } from '../../types/file.ts'
+import { useEffect, useRef } from 'react'

 interface PdfViewProps {
-  files: { pdfFile: PdfFile, filename: string, hash: string | null }[]
+  files: CurrentUserFile[]
  currentUserMarks: CurrentUserMark[]
  handleMarkClick: (id: number) => void
  selectedMarkValue: string
  selectedMark: CurrentUserMark | null
+  currentFile: CurrentUserFile | null
 }

 /**
 * Responsible for rendering Pdf files.
 */
-const PdfView = ({ files, currentUserMarks, handleMarkClick, selectedMarkValue, selectedMark }: PdfViewProps) => {
-  const filterByFile = (currentUserMarks: CurrentUserMark[], hash: string): CurrentUserMark[] => {
-    return currentUserMarks.filter((currentUserMark) => currentUserMark.mark.pdfFileHash === hash)
+const PdfView = ({
+  files,
+  currentUserMarks,
+  handleMarkClick,
+  selectedMarkValue,
+  selectedMark,
+  currentFile
+}: PdfViewProps) => {
+  const pdfRefs = useRef<(HTMLDivElement | null)[]>([])
+  useEffect(() => {
+    if (currentFile !== null && !!pdfRefs.current[currentFile.id]) {
+      pdfRefs.current[currentFile.id]?.scrollIntoView({
+        behavior: 'smooth',
+        block: 'end'
+      })
+    }
+  }, [currentFile])
+  const filterByFile = (
+    currentUserMarks: CurrentUserMark[],
+    fileName: string
+  ): CurrentUserMark[] => {
+    return currentUserMarks.filter(
+      (currentUserMark) => currentUserMark.mark.fileName === fileName
+    )
  }
+  const isNotLastPdfFile = (index: number, files: CurrentUserFile[]): boolean =>
+    index !== files.length - 1
  return (
-    <Box sx={{ width: '100%' }}>
-      {
-        files.map(({ pdfFile, hash }, i) => {
-          if (!hash) return
-          return (
+    <>
+      {files.map((currentUserFile, index, arr) => {
+        const { hash, pdfFile, filename, id } = currentUserFile
+        if (!hash) return
+        return (
+          <div
+            id={pdfFile.file.name}
+            ref={(el) => (pdfRefs.current[id] = el)}
+            key={index}
+          >
            <PdfItem
              pdfFile={pdfFile}
-              key={i}
-              currentUserMarks={filterByFile(currentUserMarks, hash)}
+              currentUserMarks={filterByFile(currentUserMarks, filename)}
              selectedMark={selectedMark}
              handleMarkClick={handleMarkClick}
              selectedMarkValue={selectedMarkValue}
-          />
-          )
-        })
-      }
-    </Box>
+            />
+            {isNotLastPdfFile(index, arr) && <Divider>File Separator</Divider>}
+          </div>
+        )
+      })}
+    </>
  )
 }

-export default PdfView;
+export default PdfView
--- a/src/components/PDFView/style.module.scss
+++ b/src/components/PDFView/style.module.scss
@ -13,4 +13,19 @@
  max-width: 100%;
  max-height: 100%;
  object-fit: contain; /* Ensure the image fits within the container */
-}
+}
+
+.container {
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+
+}
+
+.pdfView {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  gap: 10px;
+}
--- a/src/layouts/StickySideColumns.module.scss
+++ b/src/layouts/StickySideColumns.module.scss
@ -0,0 +1,29 @@
+@import '../styles/colors.scss';
+@import '../styles/sizes.scss';
+
+.container {
+  display: grid;
+  grid-template-columns: 0.75fr 1.5fr 0.75fr;
+  grid-gap: 30px;
+  flex-grow: 1;
+}
+
+.sidesWrap {
+  position: relative;
+}
+
+.sides {
+  position: sticky;
+  top: $header-height + $body-vertical-padding;
+}
+
+.files {
+  display: flex;
+  flex-direction: column;
+  grid-gap: 15px;
+}
+.content {
+  max-width: 550px;
+  width: 550px;
+  margin: 0 auto;
+}
--- a/src/layouts/StickySideColumns.tsx
+++ b/src/layouts/StickySideColumns.tsx
@ -0,0 +1,26 @@
+import { PropsWithChildren, ReactNode } from 'react'
+
+import styles from './StickySideColumns.module.scss'
+
+interface StickySideColumnsProps {
+  left?: ReactNode
+  right?: ReactNode
+}
+
+export const StickySideColumns = ({
+  left,
+  right,
+  children
+}: PropsWithChildren<StickySideColumnsProps>) => {
+  return (
+    <div className={styles.container}>
+      <div className={`${styles.sidesWrap} ${styles.files}`}>
+        <div className={styles.sides}>{left}</div>
+      </div>
+      <div className={styles.content}>{children}</div>
+      <div className={styles.sidesWrap}>
+        <div className={styles.sides}>{right}</div>
+      </div>
+    </div>
+  )
+}
--- a/src/pages/create/index.tsx
+++ b/src/pages/create/index.tsx
@ -338,32 +338,36 @@ export const CreatePage = () => {
      fileHashes[file.name] = hash
    }

+    console.log('file hashes: ', fileHashes)
+
    return fileHashes
  }

-  const createMarks = (fileHashes: { [key: string]: string }) : Mark[] => {
-    return drawnPdfs.flatMap((drawnPdf) => {
-      const fileHash = fileHashes[drawnPdf.file.name];
-      return drawnPdf.pages.flatMap((page, index) => {
-        return page.drawnFields.map((drawnField) => {
-          return {
-            type: drawnField.type,
-            location: {
-              page: index,
-              top: drawnField.top,
-              left: drawnField.left,
-              height: drawnField.height,
-              width: drawnField.width,
-            },
-            npub: drawnField.counterpart,
-            pdfFileHash: fileHash
-          }
+  const createMarks = (fileHashes: { [key: string]: string }): Mark[] => {
+    return drawnPdfs
+      .flatMap((drawnPdf) => {
+        const fileHash = fileHashes[drawnPdf.file.name]
+        return drawnPdf.pages.flatMap((page, index) => {
+          return page.drawnFields.map((drawnField) => {
+            return {
+              type: drawnField.type,
+              location: {
+                page: index,
+                top: drawnField.top,
+                left: drawnField.left,
+                height: drawnField.height,
+                width: drawnField.width
+              },
+              npub: drawnField.counterpart,
+              pdfFileHash: fileHash,
+              fileName: drawnPdf.file.name
+            }
+          })
        })
      })
-    })
      .map((mark, index) => {
-        return {...mark, id: index }
-      });
+        return { ...mark, id: index }
+      })
  }

  // Handle errors during zip file generation
@ -431,13 +435,9 @@ export const CreatePage = () => {

    if (!arraybuffer) return null

-    return new File(
-      [new Blob([arraybuffer])],
-      `${unixNow}.sigit.zip`,
-      {
-        type: 'application/zip'
-      }
-    )
+    return new File([new Blob([arraybuffer])], `${unixNow}.sigit.zip`, {
+      type: 'application/zip'
+    })
  }

  // Handle errors during file upload
@ -545,9 +545,7 @@ export const CreatePage = () => {
        : viewers.map((viewer) => viewer.pubkey)
    ).filter((receiver) => receiver !== usersPubkey)

-    return receivers.map((receiver) =>
-      sendNotification(receiver, meta)
-    )
+    return receivers.map((receiver) => sendNotification(receiver, meta))
  }

  const handleCreate = async () => {
--- a/src/pages/sign/MarkFormField.tsx
+++ b/src/pages/sign/MarkFormField.tsx
@ -1,37 +0,0 @@
-import { CurrentUserMark } from '../../types/mark.ts'
-import styles from './style.module.scss'
-import { Box, Button, TextField } from '@mui/material'
-
-import { MARK_TYPE_TRANSLATION } from '../../utils/const.ts'
-
-interface MarkFormFieldProps {
-  handleSubmit: (event: any) => void
-  handleChange: (event: any) => void
-  selectedMark: CurrentUserMark
-  selectedMarkValue: string
-}
-
-/**
- * Responsible for rendering a form field connected to a mark and keeping track of its value.
- */
-const MarkFormField = (props: MarkFormFieldProps) => {
-  const { handleSubmit, handleChange, selectedMark, selectedMarkValue } = props;
-  const getSubmitButton = () => selectedMark.isLast ? 'Complete' : 'Next';
-  return (
-    <div className={styles.fixedBottomForm}>
-      <Box component="form" onSubmit={handleSubmit}>
-        <TextField
-          id="mark-value"
-          label={MARK_TYPE_TRANSLATION[selectedMark.mark.type.valueOf()]}
-          value={selectedMarkValue}
-          onChange={handleChange}
-        />
-        <Button type="submit" variant="contained">
-          {getSubmitButton()}
-        </Button>
-      </Box>
-    </div>
-  )
-}
-
-export default MarkFormField;
--- a/src/pages/sign/index.tsx
+++ b/src/pages/sign/index.tsx
@ -16,13 +16,16 @@ import { State } from '../../store/rootReducer'
 import { CreateSignatureEventContent, Meta, SignedEvent } from '../../types'
 import {
  decryptArrayBuffer,
-  encryptArrayBuffer, extractMarksFromSignedMeta,
+  encryptArrayBuffer,
+  extractMarksFromSignedMeta,
  extractZipUrlAndEncryptionKey,
  generateEncryptionKey,
-  generateKeysFile, getFilesWithHashes,
+  generateKeysFile,
+  getCurrentUserFiles,
  getHash,
  hexToNpub,
-  isOnline, loadZip,
+  isOnline,
+  loadZip,
  now,
  npubToHex,
  parseJson,
@ -41,9 +44,12 @@ import { getLastSignersSig } from '../../utils/sign.ts'
 import {
  filterMarksByPubkey,
  getCurrentUserMarks,
-  isCurrentUserMarksComplete, updateMarks
+  isCurrentUserMarksComplete,
+  updateMarks
 } from '../../utils'
 import PdfMarking from '../../components/PDFView/PdfMarking.tsx'
+import { getZipWithFiles } from '../../utils/file.ts'
+import { ARRAY_BUFFER, DEFLATE } from '../../utils/const.ts'
 enum SignedStatus {
  Fully_Signed,
  User_Is_Next_Signer,
@ -81,7 +87,7 @@ export const SignPage = () => {

  const [signers, setSigners] = useState<`npub1${string}`[]>([])
  const [viewers, setViewers] = useState<`npub1${string}`[]>([])
-  const [marks, setMarks] = useState<Mark[] >([])
+  const [marks, setMarks] = useState<Mark[]>([])
  const [creatorFileHashes, setCreatorFileHashes] = useState<{
    [key: string]: string
  }>({})
@ -100,8 +106,10 @@ export const SignPage = () => {

  const [authUrl, setAuthUrl] = useState<string>()
  const nostrController = NostrController.getInstance()
-  const [currentUserMarks, setCurrentUserMarks] = useState<CurrentUserMark[]>([]);
-  const [isReadyToSign, setIsReadyToSign] = useState(false);
+  const [currentUserMarks, setCurrentUserMarks] = useState<CurrentUserMark[]>(
+    []
+  )
+  const [isReadyToSign, setIsReadyToSign] = useState(false)

  useEffect(() => {
    if (signers.length > 0) {
@ -192,13 +200,16 @@ export const SignPage = () => {
      setViewers(createSignatureContent.viewers)
      setCreatorFileHashes(createSignatureContent.fileHashes)
      setSubmittedBy(createSignatureEvent.pubkey)
-      setMarks(createSignatureContent.markConfig);
+      setMarks(createSignatureContent.markConfig)

      if (usersPubkey) {
-        const metaMarks = filterMarksByPubkey(createSignatureContent.markConfig, usersPubkey!)
+        const metaMarks = filterMarksByPubkey(
+          createSignatureContent.markConfig,
+          usersPubkey!
+        )
        const signedMarks = extractMarksFromSignedMeta(meta)
-        const currentUserMarks = getCurrentUserMarks(metaMarks, signedMarks);
-        setCurrentUserMarks(currentUserMarks);
+        const currentUserMarks = getCurrentUserMarks(metaMarks, signedMarks)
+        setCurrentUserMarks(currentUserMarks)
        // setCurrentUserMark(findNextCurrentUserMark(currentUserMarks) || null)
        setIsReadyToSign(isCurrentUserMarksComplete(currentUserMarks))
      }
@ -307,7 +318,7 @@ export const SignPage = () => {
      )

      if (arrayBuffer) {
-        files[fileName] = await convertToPdfFile(arrayBuffer, fileName);
+        files[fileName] = await convertToPdfFile(arrayBuffer, fileName)

        const hash = await getHash(arrayBuffer)
        if (hash) {
@ -348,7 +359,7 @@ export const SignPage = () => {
  const decrypt = async (file: File) => {
    setLoadingSpinnerDesc('Decrypting file')

-    const zip = await loadZip(file);
+    const zip = await loadZip(file)
    if (!zip) return

    const parsedKeysJson = await parseKeysJson(zip)
@ -414,6 +425,27 @@ export const SignPage = () => {
    return null
  }

+  const handleDownload = async () => {
+    if (Object.entries(files).length === 0 || !meta || !usersPubkey) return
+    setLoadingSpinnerDesc('Generating file')
+    try {
+      const zip = await getZipWithFiles(meta, files)
+      const arrayBuffer = await zip.generateAsync({
+        type: ARRAY_BUFFER,
+        compression: DEFLATE,
+        compressionOptions: {
+          level: 6
+        }
+      })
+      if (!arrayBuffer) return
+      const blob = new Blob([arrayBuffer])
+      saveAs(blob, `exported-${now()}.sigit.zip`)
+    } catch (error: any) {
+      console.log('error in zip:>> ', error)
+      toast.error(error.message || 'Error occurred in generating zip file')
+    }
+  }
+
  const handleDecryptedArrayBuffer = async (arrayBuffer: ArrayBuffer) => {
    const decryptedZipFile = new File([arrayBuffer], 'decrypted.zip')

@ -439,7 +471,7 @@ export const SignPage = () => {
      )

      if (arrayBuffer) {
-        files[fileName] = await convertToPdfFile(arrayBuffer, fileName);
+        files[fileName] = await convertToPdfFile(arrayBuffer, fileName)

        const hash = await getHash(arrayBuffer)
        if (hash) {
@ -520,7 +552,10 @@ export const SignPage = () => {
  }

  // Sign the event for the meta file
-  const signEventForMeta = async (signerContent: { prevSig: string, marks: Mark[] }) => {
+  const signEventForMeta = async (signerContent: {
+    prevSig: string
+    marks: Mark[]
+  }) => {
    return await signEventForMetaFile(
      JSON.stringify(signerContent),
      nostrController,
@ -529,8 +564,8 @@ export const SignPage = () => {
  }

  const getSignerMarksForMeta = (): Mark[] | undefined => {
-    if (currentUserMarks.length === 0) return;
-    return currentUserMarks.map(( { mark }: CurrentUserMark) => mark);
+    if (currentUserMarks.length === 0) return
+    return currentUserMarks.map(({ mark }: CurrentUserMark) => mark)
  }

  // Update the meta signatures
@ -600,13 +635,9 @@ export const SignPage = () => {

    if (!arraybuffer) return null

-    return new File(
-      [new Blob([arraybuffer])],
-      `${unixNow}.sigit.zip`,
-      {
-        type: 'application/zip'
-      }
-    )
+    return new File([new Blob([arraybuffer])], `${unixNow}.sigit.zip`, {
+      type: 'application/zip'
+    })
  }

  // Handle errors during zip file generation
@ -694,7 +725,7 @@ export const SignPage = () => {
    setIsLoading(true)
    setLoadingSpinnerDesc('Signing nostr event')

-    if (!meta) return;
+    if (!meta) return

    const prevSig = getLastSignersSig(meta, signers)
    if (!prevSig) return
@ -918,11 +949,14 @@ export const SignPage = () => {
    )
  }

-  return <PdfMarking
-    files={getFilesWithHashes(files, currentFileHashes)}
-    currentUserMarks={currentUserMarks}
-    setIsReadyToSign={setIsReadyToSign}
-    setCurrentUserMarks={setCurrentUserMarks}
-    setUpdatedMarks={setUpdatedMarks}
-  />
+  return (
+    <PdfMarking
+      files={getCurrentUserFiles(files, currentFileHashes)}
+      currentUserMarks={currentUserMarks}
+      setIsReadyToSign={setIsReadyToSign}
+      setCurrentUserMarks={setCurrentUserMarks}
+      setUpdatedMarks={setUpdatedMarks}
+      handleDownload={handleDownload}
+    />
+  )
 }
--- a/src/pages/sign/style.module.scss
+++ b/src/pages/sign/style.module.scss
@ -2,8 +2,8 @@

 .container {
  color: $text-color;
-  width: 550px;
-  max-width: 550px;
+  //width: 550px;
+  //max-width: 550px;

  .inputBlock {
    position: relative;
--- a/src/pages/verify/index.tsx
+++ b/src/pages/verify/index.tsx
@ -23,14 +23,17 @@ import {
  SignedEventContent
 } from '../../types'
 import {
-  decryptArrayBuffer, extractMarksFromSignedMeta,
+  decryptArrayBuffer,
+  extractMarksFromSignedMeta,
  extractZipUrlAndEncryptionKey,
  getHash,
-  hexToNpub, now,
+  hexToNpub,
+  now,
  npubToHex,
  parseJson,
  readContentOfZipEntry,
-  shorten, signEventForMetaFile
+  shorten,
+  signEventForMetaFile
 } from '../../utils'
 import styles from './style.module.scss'
 import { Cancel, CheckCircle } from '@mui/icons-material'
@ -41,7 +44,7 @@ import {
  addMarks,
  convertToPdfBlob,
  convertToPdfFile,
-  groupMarksByPage,
+  groupMarksByPage
 } from '../../utils/pdf.ts'
 import { State } from '../../store/rootReducer.ts'
 import { useSelector } from 'react-redux'
@ -78,7 +81,7 @@ export const VerifyPage = () => {
  const [currentFileHashes, setCurrentFileHashes] = useState<{
    [key: string]: string | null
  }>({})
-  const [files, setFiles] = useState<{ [filename: string]: PdfFile}>({})
+  const [files, setFiles] = useState<{ [filename: string]: PdfFile }>({})

  const [metadata, setMetadata] = useState<{ [key: string]: ProfileMetadata }>(
    {}
@ -155,7 +158,10 @@ export const VerifyPage = () => {
                )

                if (arrayBuffer) {
-                  files[fileName] = await convertToPdfFile(arrayBuffer, fileName!)
+                  files[fileName] = await convertToPdfFile(
+                    arrayBuffer,
+                    fileName!
+                  )
                  const hash = await getHash(arrayBuffer)

                  if (hash) {
@ -169,7 +175,6 @@ export const VerifyPage = () => {
              setCurrentFileHashes(fileHashes)
              setFiles(files)

-
              setSigners(createSignatureContent.signers)
              setViewers(createSignatureContent.viewers)
              setCreatorFileHashes(createSignatureContent.fileHashes)
@ -177,8 +182,6 @@ export const VerifyPage = () => {

              setMeta(metaInNavState)
              setIsLoading(false)
-
-
            }
          })
          .catch((err) => {
@ -381,7 +384,7 @@ export const VerifyPage = () => {
  }

  const handleExport = async () => {
-    if (Object.entries(files).length === 0 ||!meta ||!usersPubkey) return;
+    if (Object.entries(files).length === 0 || !meta || !usersPubkey) return

    const usersNpub = hexToNpub(usersPubkey)
    if (
@ -395,10 +398,8 @@ export const VerifyPage = () => {
    setIsLoading(true)
    setLoadingSpinnerDesc('Signing nostr event')

-    if (!meta) return;
-
    const prevSig = getLastSignersSig(meta, signers)
-    if (!prevSig) return;
+    if (!prevSig) return

    const signedEvent = await signEventForMetaFile(
      JSON.stringify({ prevSig }),
@ -406,10 +407,10 @@ export const VerifyPage = () => {
      setIsLoading
    )

-    if (!signedEvent) return;
+    if (!signedEvent) return

    const exportSignature = JSON.stringify(signedEvent, null, 2)
-    const updatedMeta = {...meta, exportSignature }
+    const updatedMeta = { ...meta, exportSignature }
    const stringifiedMeta = JSON.stringify(updatedMeta, null, 2)

    const zip = new JSZip()
--- a/src/types/file.ts
+++ b/src/types/file.ts
@ -0,0 +1,8 @@
+import { PdfFile } from './drawing.ts'
+
+export interface CurrentUserFile {
+  id: number
+  pdfFile: PdfFile
+  filename: string
+  hash?: string
+}
--- a/src/types/mark.ts
+++ b/src/types/mark.ts
@ -1,24 +1,27 @@
-import { MarkType } from "./drawing";
+import { MarkType } from './drawing'

 export interface CurrentUserMark {
+  id: number
  mark: Mark
  isLast: boolean
  isCompleted: boolean
+  currentValue?: string
 }

 export interface Mark {
-  id: number;
-  npub: string;
-  pdfFileHash: string;
-  type: MarkType;
-  location: MarkLocation;
-  value?: string;
+  id: number
+  npub: string
+  pdfFileHash: string
+  type: MarkType
+  location: MarkLocation
+  fileName: string
+  value?: string
 }

 export interface MarkLocation {
-  top: number;
-  left: number;
-  height: number;
-  width: number;
-  page: number;
+  top: number
+  left: number
+  height: number
+  width: number
+  page: number
 }
--- a/src/utils/const.ts
+++ b/src/utils/const.ts
@ -3,4 +3,8 @@ import { MarkType } from '../types/drawing.ts'
 export const EMPTY: string = ''
 export const MARK_TYPE_TRANSLATION: { [key: string]: string } = {
  [MarkType.FULLNAME.valueOf()]: 'Full Name'
-}
+}
+export const SIGN: string = 'Sign'
+export const NEXT: string = 'Next'
+export const ARRAY_BUFFER = 'arraybuffer'
+export const DEFLATE = 'DEFLATE'
--- a/src/utils/file.ts
+++ b/src/utils/file.ts
@ -0,0 +1,24 @@
+import { Meta } from '../types'
+import { extractMarksFromSignedMeta } from './mark.ts'
+import { addMarks, convertToPdfBlob, groupMarksByPage } from './pdf.ts'
+import JSZip from 'jszip'
+import { PdfFile } from '../types/drawing.ts'
+
+const getZipWithFiles = async (
+  meta: Meta,
+  files: { [filename: string]: PdfFile }
+): Promise<JSZip> => {
+  const zip = new JSZip()
+  const marks = extractMarksFromSignedMeta(meta)
+  const marksByPage = groupMarksByPage(marks)
+
+  for (const [fileName, pdf] of Object.entries(files)) {
+    const pages = await addMarks(pdf.file, marksByPage)
+    const blob = await convertToPdfBlob(pages)
+    zip.file(`/files/${fileName}`, blob)
+  }
+
+  return zip
+}
+
+export { getZipWithFiles }
--- a/src/utils/mark.ts
+++ b/src/utils/mark.ts
@ -2,6 +2,7 @@ import { CurrentUserMark, Mark } from '../types/mark.ts'
 import { hexToNpub } from './nostr.ts'
 import { Meta, SignedEventContent } from '../types'
 import { Event } from 'nostr-tools'
+import { EMPTY } from './const.ts'

 /**
 * Takes in an array of Marks already filtered by User.
@ -9,16 +10,18 @@ import { Event } from 'nostr-tools'
 * @param marks - default Marks extracted from Meta
 * @param signedMetaMarks - signed user Marks extracted from DocSignatures
 */
-const getCurrentUserMarks = (marks: Mark[], signedMetaMarks: Mark[]): CurrentUserMark[] => {
+const getCurrentUserMarks = (
+  marks: Mark[],
+  signedMetaMarks: Mark[]
+): CurrentUserMark[] => {
  return marks.map((mark, index, arr) => {
-    const signedMark = signedMetaMarks.find((m) => m.id === mark.id);
-    if (signedMark && !!signedMark.value) {
-      mark.value = signedMark.value
-    }
+    const signedMark = signedMetaMarks.find((m) => m.id === mark.id)
    return {
      mark,
+      currentValue: signedMark?.value ?? EMPTY,
+      id: index + 1,
      isLast: isLast(index, arr),
-      isCompleted: !!mark.value
+      isCompleted: !!signedMark?.value
    }
  })
 }
@ -27,8 +30,10 @@ const getCurrentUserMarks = (marks: Mark[], signedMetaMarks: Mark[]): CurrentUse
 * Returns next incomplete CurrentUserMark if there is one
 * @param usersMarks
 */
-const findNextCurrentUserMark = (usersMarks: CurrentUserMark[]): CurrentUserMark | undefined => {
-  return usersMarks.find((mark) => !mark.isCompleted);
+const findNextIncompleteCurrentUserMark = (
+  usersMarks: CurrentUserMark[]
+): CurrentUserMark | undefined => {
+  return usersMarks.find((mark) => !mark.isCompleted)
 }

 /**
@ -37,7 +42,7 @@ const findNextCurrentUserMark = (usersMarks: CurrentUserMark[]): CurrentUserMark
 * @param pubkey
 */
 const filterMarksByPubkey = (marks: Mark[], pubkey: string): Mark[] => {
-  return marks.filter(mark => mark.npub === hexToNpub(pubkey))
+  return marks.filter((mark) => mark.npub === hexToNpub(pubkey))
 }

 /**
@ -57,7 +62,9 @@ const extractMarksFromSignedMeta = (meta: Meta): Mark[] => {
 * marked as complete.
 * @param currentUserMarks
 */
-const isCurrentUserMarksComplete = (currentUserMarks: CurrentUserMark[]): boolean => {
+const isCurrentUserMarksComplete = (
+  currentUserMarks: CurrentUserMark[]
+): boolean => {
  return currentUserMarks.every((mark) => mark.isCompleted)
 }

@ -68,7 +75,7 @@ const isCurrentUserMarksComplete = (currentUserMarks: CurrentUserMark[]): boolea
 * @param markToUpdate
 */
 const updateMarks = (marks: Mark[], markToUpdate: Mark): Mark[] => {
-  const indexToUpdate = marks.findIndex(mark => mark.id === markToUpdate.id);
+  const indexToUpdate = marks.findIndex((mark) => mark.id === markToUpdate.id)
  return [
    ...marks.slice(0, indexToUpdate),
    markToUpdate,
@ -76,8 +83,13 @@ const updateMarks = (marks: Mark[], markToUpdate: Mark): Mark[] => {
  ]
 }

-const updateCurrentUserMarks = (currentUserMarks: CurrentUserMark[], markToUpdate: CurrentUserMark): CurrentUserMark[] => {
-  const indexToUpdate = currentUserMarks.findIndex((m) => m.mark.id === markToUpdate.mark.id)
+const updateCurrentUserMarks = (
+  currentUserMarks: CurrentUserMark[],
+  markToUpdate: CurrentUserMark
+): CurrentUserMark[] => {
+  const indexToUpdate = currentUserMarks.findIndex(
+    (m) => m.mark.id === markToUpdate.mark.id
+  )
  return [
    ...currentUserMarks.slice(0, indexToUpdate),
    markToUpdate,
@ -85,14 +97,40 @@ const updateCurrentUserMarks = (currentUserMarks: CurrentUserMark[], markToUpdat
  ]
 }

-const isLast = <T>(index: number, arr: T[]) => (index === (arr.length -1))
+const isLast = <T>(index: number, arr: T[]) => index === arr.length - 1
+
+const isCurrentValueLast = (
+  currentUserMarks: CurrentUserMark[],
+  selectedMark: CurrentUserMark,
+  selectedMarkValue: string
+) => {
+  const filteredMarks = currentUserMarks.filter(
+    (mark) => mark.id !== selectedMark.id
+  )
+  return (
+    isCurrentUserMarksComplete(filteredMarks) && selectedMarkValue.length > 0
+  )
+}
+
+const getUpdatedMark = (
+  selectedMark: CurrentUserMark,
+  selectedMarkValue: string
+): CurrentUserMark => {
+  return {
+    ...selectedMark,
+    currentValue: selectedMarkValue,
+    isCompleted: !!selectedMarkValue
+  }
+}

 export {
  getCurrentUserMarks,
  filterMarksByPubkey,
  extractMarksFromSignedMeta,
  isCurrentUserMarksComplete,
-  findNextCurrentUserMark,
+  findNextIncompleteCurrentUserMark,
  updateMarks,
  updateCurrentUserMarks,
+  isCurrentValueLast,
+  getUpdatedMark
 }
--- a/src/utils/pdf.ts
+++ b/src/utils/pdf.ts
@ -3,13 +3,14 @@ import * as PDFJS from 'pdfjs-dist'
 import { PDFDocument } from 'pdf-lib'
 import { Mark } from '../types/mark.ts'

-PDFJS.GlobalWorkerOptions.workerSrc = 'node_modules/pdfjs-dist/build/pdf.worker.mjs';
+PDFJS.GlobalWorkerOptions.workerSrc =
+  'node_modules/pdfjs-dist/build/pdf.worker.mjs'

 /**
 * Scale between the PDF page's natural size and rendered size
 * @constant {number}
 */
-const SCALE: number = 3;
+const SCALE: number = 3
 /**
 * Defined font size used when generating a PDF. Currently it is difficult to fully
 * correlate font size used at the time of filling in / drawing on the PDF
@ -17,20 +18,20 @@ const SCALE: number = 3;
 * This should be fixed going forward.
 * Switching to PDF-Lib will most likely make this problem redundant.
 */
-const FONT_SIZE: number = 40;
+const FONT_SIZE: number = 40
 /**
 * Current font type used when generating a PDF.
 */
-const FONT_TYPE: string = 'Arial';
+const FONT_TYPE: string = 'Arial'

 /**
 * Converts a PDF ArrayBuffer to a generic PDF File
 * @param arrayBuffer of a PDF
 * @param fileName identifier of the pdf file
 */
-const toFile = (arrayBuffer: ArrayBuffer, fileName: string) : File => {
-  const blob = new Blob([arrayBuffer], { type: "application/pdf" });
-  return new File([blob], fileName, { type: "application/pdf" });
+const toFile = (arrayBuffer: ArrayBuffer, fileName: string): File => {
+  const blob = new Blob([arrayBuffer], { type: 'application/pdf' })
+  return new File([blob], fileName, { type: 'application/pdf' })
 }

 /**
@ -50,42 +51,40 @@ const toPdfFile = async (file: File): Promise<PdfFile> => {
 * @return PdfFile[] - an array of Sigit's internal Pdf File type
 */
 const toPdfFiles = async (selectedFiles: File[]): Promise<PdfFile[]> => {
-  return Promise.all(selectedFiles
-    .filter(isPdf)
-    .map(toPdfFile));
+  return Promise.all(selectedFiles.filter(isPdf).map(toPdfFile))
 }

 /**
 * A utility that transforms a drawing coordinate number into a CSS-compatible string
 * @param coordinate
 */
-const inPx = (coordinate: number): string => `${coordinate}px`;
+const inPx = (coordinate: number): string => `${coordinate}px`

 /**
 * A utility that checks if a given file is of the pdf type
 * @param file
 */
-const isPdf = (file: File) => file.type.toLowerCase().includes('pdf');
+const isPdf = (file: File) => file.type.toLowerCase().includes('pdf')

 /**
 * Reads the pdf file binaries
 */
 const readPdf = (file: File): Promise<string> => {
  return new Promise((resolve, reject) => {
-    const reader = new FileReader();
+    const reader = new FileReader()

    reader.onload = (e: any) => {
      const data = e.target.result

      resolve(data)
-    };
+    }

    reader.onerror = (err) => {
      console.error('err', err)
      reject(err)
-    };
+    }

-    reader.readAsDataURL(file);
+    reader.readAsDataURL(file)
  })
 }

@ -94,26 +93,28 @@ const readPdf = (file: File): Promise<string> => {
 * @param data pdf file bytes
 */
 const pdfToImages = async (data: any): Promise<PdfPage[]> => {
-  const images: string[] = [];
-  const pdf = await PDFJS.getDocument(data).promise;
-  const canvas = document.createElement("canvas");
+  const images: string[] = []
+  const pdf = await PDFJS.getDocument(data).promise
+  const canvas = document.createElement('canvas')

  for (let i = 0; i < pdf.numPages; i++) {
-    const page = await pdf.getPage(i + 1);
-    const viewport = page.getViewport({ scale: SCALE });
-    const context = canvas.getContext("2d");
-    canvas.height = viewport.height;
-    canvas.width = viewport.width;
-    await page.render({ canvasContext: context!, viewport: viewport }).promise;
-    images.push(canvas.toDataURL());
+    const page = await pdf.getPage(i + 1)
+    const viewport = page.getViewport({ scale: SCALE })
+    const context = canvas.getContext('2d')
+    canvas.height = viewport.height
+    canvas.width = viewport.width
+    await page.render({ canvasContext: context!, viewport: viewport }).promise
+    images.push(canvas.toDataURL())
  }

-  return Promise.resolve(images.map((image) => {
-    return {
-      image,
-      drawnFields: []
-    }
-  }))
+  return Promise.resolve(
+    images.map((image) => {
+      return {
+        image,
+        drawnFields: []
+      }
+    })
+  )
 }

 /**
@ -121,34 +122,37 @@ const pdfToImages = async (data: any): Promise<PdfPage[]> => {
 * Returns an array of encoded images where each image is a representation
 * of a PDF page with completed and signed marks from all users
 */
-const addMarks = async (file: File, marksPerPage: {[key: string]: Mark[]}) => {
-  const p = await readPdf(file);
-  const pdf = await PDFJS.getDocument(p).promise;
-  const canvas = document.createElement("canvas");
+const addMarks = async (
+  file: File,
+  marksPerPage: { [key: string]: Mark[] }
+) => {
+  const p = await readPdf(file)
+  const pdf = await PDFJS.getDocument(p).promise
+  const canvas = document.createElement('canvas')

-  const images: string[] = [];
+  const images: string[] = []

-  for (let i = 0; i< pdf.numPages; i++) {
-    const page = await pdf.getPage(i+1)
-    const viewport = page.getViewport({ scale: SCALE });
-    const context = canvas.getContext("2d");
-    canvas.height = viewport.height;
-    canvas.width = viewport.width;
-    await page.render({ canvasContext: context!, viewport: viewport }).promise;
+  for (let i = 0; i < pdf.numPages; i++) {
+    const page = await pdf.getPage(i + 1)
+    const viewport = page.getViewport({ scale: SCALE })
+    const context = canvas.getContext('2d')
+    canvas.height = viewport.height
+    canvas.width = viewport.width
+    await page.render({ canvasContext: context!, viewport: viewport }).promise

-    marksPerPage[i].forEach(mark => draw(mark, context!))
+    marksPerPage[i]?.forEach((mark) => draw(mark, context!))

-    images.push(canvas.toDataURL());
+    images.push(canvas.toDataURL())
  }

-  return Promise.resolve(images);
+  return Promise.resolve(images)
 }

 /**
 * Utility to scale mark in line with the PDF-to-PNG scale
 */
 const scaleMark = (mark: Mark): Mark => {
-  const { location } = mark;
+  const { location } = mark
  return {
    ...mark,
    location: {
@ -165,7 +169,7 @@ const scaleMark = (mark: Mark): Mark => {
 * Utility to check if a Mark has value
 * @param mark
 */
-const hasValue = (mark: Mark): boolean => !!mark.value;
+const hasValue = (mark: Mark): boolean => !!mark.value

 /**
 * Draws a Mark on a Canvas representation of a PDF Page
@ -173,14 +177,14 @@ const hasValue = (mark: Mark): boolean => !!mark.value;
 * @param ctx a Canvas representation of a specific PDF Page
 */
 const draw = (mark: Mark, ctx: CanvasRenderingContext2D) => {
-  const { location } = mark;
+  const { location } = mark

-  ctx!.font = FONT_SIZE + 'px ' + FONT_TYPE;
-  ctx!.fillStyle = 'black';
-  const textMetrics = ctx!.measureText(mark.value!);
-  const textX = location.left + (location.width - textMetrics.width) / 2;
-  const textY = location.top + (location.height + parseInt(ctx!.font)) / 2;
-  ctx!.fillText(mark.value!, textX, textY);
+  ctx!.font = FONT_SIZE + 'px ' + FONT_TYPE
+  ctx!.fillStyle = 'black'
+  const textMetrics = ctx!.measureText(mark.value!)
+  const textX = location.left + (location.width - textMetrics.width) / 2
+  const textY = location.top + (location.height + parseInt(ctx!.font)) / 2
+  ctx!.fillText(mark.value!, textX, textY)
 }

 /**
@ -188,7 +192,7 @@ const draw = (mark: Mark, ctx: CanvasRenderingContext2D) => {
 * @param markedPdfPages
 */
 const convertToPdfBlob = async (markedPdfPages: string[]): Promise<Blob> => {
-  const pdfDoc = await PDFDocument.create();
+  const pdfDoc = await PDFDocument.create()

  for (const page of markedPdfPages) {
    const pngImage = await pdfDoc.embedPng(page)
@ -203,7 +207,6 @@ const convertToPdfBlob = async (markedPdfPages: string[]): Promise<Blob> => {

  const pdfBytes = await pdfDoc.save()
  return new Blob([pdfBytes], { type: 'application/pdf' })
-
 }

 /**
@ -211,9 +214,12 @@ const convertToPdfBlob = async (markedPdfPages: string[]): Promise<Blob> => {
 * @param arrayBuffer
 * @param fileName
 */
-const convertToPdfFile = async (arrayBuffer: ArrayBuffer, fileName: string): Promise<PdfFile> => {
-  const file = toFile(arrayBuffer, fileName);
-  return toPdfFile(file);
+const convertToPdfFile = async (
+  arrayBuffer: ArrayBuffer,
+  fileName: string
+): Promise<PdfFile> => {
+  const file = toFile(arrayBuffer, fileName)
+  return toPdfFile(file)
 }

 /**
@ -226,7 +232,7 @@ const groupMarksByPage = (marks: Mark[]) => {
  return marks
    .filter(hasValue)
    .map(scaleMark)
-    .reduce<{[key: number]: Mark[]}>(byPage, {})
+    .reduce<{ [key: number]: Mark[] }>(byPage, {})
 }

 /**
@ -237,11 +243,10 @@ const groupMarksByPage = (marks: Mark[]) => {
 * @param obj - accumulator in the reducer callback
 * @param mark - current value, i.e. Mark being examined
 */
-const byPage = (obj: { [key: number]: Mark[]}, mark: Mark) => {
-  const key = mark.location.page;
-  const curGroup = obj[key] ?? [];
-  return { ...obj, [key]: [...curGroup, mark]
-  }
+const byPage = (obj: { [key: number]: Mark[] }, mark: Mark) => {
+  const key = mark.location.page
+  const curGroup = obj[key] ?? []
+  return { ...obj, [key]: [...curGroup, mark] }
 }

 export {
@ -252,5 +257,5 @@ export {
  convertToPdfFile,
  addMarks,
  convertToPdfBlob,
-  groupMarksByPage,
-}
+  groupMarksByPage
+}
--- a/src/utils/utils.ts
+++ b/src/utils/utils.ts
@ -1,4 +1,5 @@
 import { PdfFile } from '../types/drawing.ts'
+import { CurrentUserFile } from '../types/file.ts'

 export const compareObjects = (
  obj1: object | null | undefined,
@ -72,11 +73,16 @@ export const timeout = (ms: number = 60000) => {
 * @param files
 * @param fileHashes
 */
-export const getFilesWithHashes = (
-  files: { [filename: string ]: PdfFile },
+export const getCurrentUserFiles = (
+  files: { [filename: string]: PdfFile },
  fileHashes: { [key: string]: string | null }
-  ) => {
-  return Object.entries(files).map(([filename, pdfFile]) => {
-    return { pdfFile, filename, hash: fileHashes[filename] }
+): CurrentUserFile[] => {
+  return Object.entries(files).map(([filename, pdfFile], index) => {
+    return {
+      pdfFile,
+      filename,
+      id: index + 1,
+      ...(!!fileHashes[filename] && { hash: fileHashes[filename]! })
+    }
  })
 }
Author	SHA1	Message	Date
Eugene	d41d577c29	fix: styling	2024-08-14 16:08:42 +03:00
Eugene	64dbd7d479	feat(pdf-marking): integrates layouts	2024-08-14 12:36:51 +03:00
enes	50c8f2b2d0	refactor: rename Files to StickySideColumns and update css	2024-08-14 12:28:39 +03:00
enes	dfe67b99ad	feat: add sticky layout with slots	2024-08-14 12:28:39 +03:00
Eugene	97c82718cb	fix: page scrolling	2024-08-14 12:24:15 +03:00
Eugene	6d881ccb45	feat(pdf-marking): adds file downloading functionality	2024-08-13 12:48:52 +03:00
Eugene	3549b6e542	fix: toggle	2024-08-12 12:32:36 +03:00
Eugene	4c04c12403	fix: button colour	2024-08-12 12:08:53 +03:00
Eugene	0d52cd7113	fix: selected mark selection	2024-08-12 10:16:30 +03:00
Eugene	ed0158e817	feat(pdf-marking): updates design and functionality of the pdf marking form	2024-08-11 22:19:26 +03:00