From 180ddd85302675671426e096a89dc654c0f9fd09 Mon Sep 17 00:00:00 2001
From: DonnyLe <98658081+DonnyLe@users.noreply.github.com>
Date: Sat, 25 Jan 2025 20:02:02 -0500
Subject: [PATCH 1/6] Added checkbox input

Made a button that adds a square box to represent the checkboxes.
---
 .../DraggableSignature.tsx                    |  2 +-
 .../DraggableText.tsx                         | 14 ++-
 .../createFormTemplateEditor/FormEditor.tsx   | 89 ++++++++++++++++---
 apps/web/src/static/icons.tsx                 | 18 ++++
 4 files changed, 105 insertions(+), 18 deletions(-)

diff --git a/apps/web/src/components/createFormTemplate/createFormTemplateEditor/DraggableSignature.tsx b/apps/web/src/components/createFormTemplate/createFormTemplateEditor/DraggableSignature.tsx
index 404f33c5..14652713 100644
--- a/apps/web/src/components/createFormTemplate/createFormTemplateEditor/DraggableSignature.tsx
+++ b/apps/web/src/components/createFormTemplate/createFormTemplateEditor/DraggableSignature.tsx
@@ -27,7 +27,7 @@ export default function DraggableSignature({
       display: 'inline-block',
       cursor: 'pointer',
       padding: 4,
-    },
+    }, 
   };
   return (
     <Draggable onStop={onEnd}>
diff --git a/apps/web/src/components/createFormTemplate/createFormTemplateEditor/DraggableText.tsx b/apps/web/src/components/createFormTemplate/createFormTemplateEditor/DraggableText.tsx
index d387db81..b257213b 100644
--- a/apps/web/src/components/createFormTemplate/createFormTemplateEditor/DraggableText.tsx
+++ b/apps/web/src/components/createFormTemplate/createFormTemplateEditor/DraggableText.tsx
@@ -1,6 +1,6 @@
 import { Rnd, RndResizeCallback } from 'react-rnd';
 import { DraggableEventHandler } from 'react-draggable';
-import { TextFieldPosition } from './FormEditor';
+import { FieldType, TextFieldPosition } from './FormEditor';
 import { FaTimes } from 'react-icons/fa';
 
 export default function DraggableText({
@@ -10,6 +10,7 @@ export default function DraggableText({
   onRemove,
   currentPosition,
   disableEdit,
+  type,
 }: {
   onStop: DraggableEventHandler;
   onResizeStop: RndResizeCallback;
@@ -18,14 +19,21 @@ export default function DraggableText({
   onRemove: () => void;
   currentPosition: TextFieldPosition;
   disableEdit: boolean;
+  type: FieldType;
 }) {
   return (
     <Rnd
+      lockAspectRatio={type == FieldType.Checkbox ? true : false}
       bounds="parent"
       position={{ x: currentPosition.x, y: currentPosition.y }}
       size={{ height: currentPosition.height, width: currentPosition.width }}
-      minWidth="50px"
-      minHeight="40px"
+      minWidth={type == FieldType.Checkbox ? '30px' : '50px'}
+      enableResizing={
+        type == FieldType.Checkbox
+          ? { left: false, right: false, top: false, bottom: false }
+          : {}
+      }
+      minHeight={type == FieldType.Checkbox ? '30px' : '40px'}
       style={{
         position: 'absolute',
         zIndex: 100000,
diff --git a/apps/web/src/components/createFormTemplate/createFormTemplateEditor/FormEditor.tsx b/apps/web/src/components/createFormTemplate/createFormTemplateEditor/FormEditor.tsx
index 5eb5ab7e..767f1def 100644
--- a/apps/web/src/components/createFormTemplate/createFormTemplateEditor/FormEditor.tsx
+++ b/apps/web/src/components/createFormTemplate/createFormTemplateEditor/FormEditor.tsx
@@ -1,7 +1,7 @@
 import { useRef, useState } from 'react';
 import { Document, Page, pdfjs } from 'react-pdf';
 import { Box, Text, Button } from '@chakra-ui/react';
-import { TextIcon, PlusSign } from 'apps/web/src/static/icons';
+import { TextIcon, PlusSign, Checkbox } from 'apps/web/src/static/icons';
 import { DraggableData, DraggableEvent } from 'react-draggable';
 import PagingControl from './PagingControl';
 import { v4 as uuidv4 } from 'uuid';
@@ -17,6 +17,12 @@ export type TextFieldPosition = {
   height: number;
 };
 
+export enum FieldType {
+  Text,
+  Checkbox,
+  Signature,
+}
+
 type FieldGroupColor = {
   border: string;
   background: string;
@@ -29,7 +35,10 @@ export type FieldGroups = Map<groupId, FieldGroupColor>;
 // index = page num (zero indexing)
 export type FormFields = Record<
   number,
-  Map<fieldId, { position: TextFieldPosition; groupId: string }>
+  Map<
+    fieldId,
+    { position: TextFieldPosition; groupId: string; type: FieldType }
+  >
 >;
 
 export const FormEditor = ({
@@ -60,13 +69,9 @@ export const FormEditor = ({
     ['#A16308', '#FFFDDB'],
   ];
 
-  const handleAddField = () => {
+  const handleAddTextField = () => {
     if (fieldGroups.size > 0 && documentRef.current && !disableEdit) {
-      const container = documentRef.current;
-      const { scrollLeft, scrollTop, clientWidth, clientHeight } = container;
-
-      const centerX = scrollLeft + clientWidth / 2;
-      const centerY = scrollTop + clientHeight / 2;
+      const { centerX, centerY } = convertCoordinates(documentRef.current);
 
       setFormFields({
         ...formFields,
@@ -82,6 +87,33 @@ export const FormEditor = ({
                 height: 30,
               },
               groupId: currentGroup,
+              type: FieldType.Text,
+            },
+          ],
+        ]),
+      });
+    }
+  };
+
+  const handleAddCheckbox = () => {
+    if (fieldGroups.size > 0 && documentRef.current && !disableEdit) {
+      const { centerX, centerY } = convertCoordinates(documentRef.current);
+
+      setFormFields({
+        ...formFields,
+        [pageNum]: new Map([
+          ...formFields[pageNum],
+          [
+            uuidv4(),
+            {
+              position: {
+                x: centerX - 40,
+                y: centerY - 15,
+                width: 10,
+                height: 10,
+              },
+              groupId: currentGroup,
+              type: FieldType.Checkbox,
             },
           ],
         ]),
@@ -108,11 +140,15 @@ export const FormEditor = ({
     pos: TextFieldPosition,
   ) => {
     if (disableEdit) return;
-
+    console.log(pos.x, pos.y);
     setFormFields({
       ...formFields,
       [pageNum]: new Map([
-        ...formFields[pageNum].set(fieldId, { position: pos, groupId }),
+        ...formFields[pageNum].set(fieldId, {
+          position: pos,
+          groupId: groupId,
+          type: formFields[pageNum].get(fieldId)?.type ?? FieldType.Text,
+        }),
       ]),
     });
   };
@@ -133,6 +169,13 @@ export const FormEditor = ({
     }
   };
 
+  const convertCoordinates = (container: HTMLDivElement) => {
+    const { scrollLeft, scrollTop, clientWidth, clientHeight } = container;
+    const centerX = scrollLeft + clientWidth / 2;
+    const centerY = scrollTop + clientHeight / 2;
+    return { centerX, centerY };
+  };
+
   return (
     <Box
       background="white"
@@ -229,10 +272,24 @@ export const FormEditor = ({
               justifyContent="center"
               alignItems="center"
               isDisabled={fieldGroups.size == 0 || disableEdit}
-              onClick={handleAddField}
+              onClick={handleAddTextField}
             >
               <div>{TextIcon}</div>
             </Button>
+            <Button
+              position="relative"
+              width="40px"
+              height="40px"
+              backgroundColor="white"
+              borderRadius="4px"
+              display="flex"
+              justifyContent="center"
+              alignItems="center"
+              isDisabled={fieldGroups.size == 0 || disableEdit}
+              onClick={handleAddCheckbox}
+            >
+              <div>{Checkbox}</div>
+            </Button>
           </Box>
           <Box
             height="474px"
@@ -271,6 +328,10 @@ export const FormEditor = ({
                   Array.from(formFields[pageNum].entries()).map(
                     ([fieldId, { position, groupId }], index) => (
                       <DraggableText
+                        type={
+                          formFields[pageNum].get(fieldId)?.type ??
+                          FieldType.Text
+                        }
                         currentPosition={position}
                         onRemove={() => {
                           handleRemoveField(fieldId);
@@ -299,9 +360,9 @@ export const FormEditor = ({
                             width: Number.isNaN(newWidth)
                               ? position.width
                               : newWidth,
-                            height: Number.isNaN(newHeight)
-                              ? position.height
-                              : newHeight,
+                            height: Number.isNaN(newWidth)
+                              ? position.width
+                              : newWidth,
                             x: pos.x,
                             y: pos.y,
                           });
diff --git a/apps/web/src/static/icons.tsx b/apps/web/src/static/icons.tsx
index 42fa56e8..bdfa3878 100644
--- a/apps/web/src/static/icons.tsx
+++ b/apps/web/src/static/icons.tsx
@@ -390,6 +390,24 @@ export const CalendarClockIcon = (
     <path d="M200-640h560v-80H200v80Zm0 0v-80 80Zm0 560q-33 0-56.5-23.5T120-160v-560q0-33 23.5-56.5T200-800h40v-80h80v80h320v-80h80v80h40q33 0 56.5 23.5T840-720v227q-19-9-39-15t-41-9v-43H200v400h252q7 22 16.5 42T491-80H200Zm520 40q-83 0-141.5-58.5T520-240q0-83 58.5-141.5T720-440q83 0 141.5 58.5T920-240q0 83-58.5 141.5T720-40Zm67-105 28-28-75-75v-112h-40v128l87 87Z" />
   </svg>
 );
+export const Checkbox = (
+  <svg
+    width="18"
+    height="18"
+    viewBox="0 0 18 18"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g id="flowbite:check-outline">
+      <rect x="1" y="1" width="16" height="16" rx="1.5" stroke="#808080" />
+      <path
+        id="Vector"
+        d="M6.89585 12.0815L4.61773 9.32207C4.36168 9.01193 3.94808 9.01193 3.69203 9.32207C3.43599 9.63221 3.43599 10.1332 3.69203 10.4433L6.43629 13.7674C6.69233 14.0775 7.10594 14.0775 7.36198 13.7674L14.308 5.35388C14.564 5.04374 14.564 4.54274 14.308 4.2326C14.0519 3.92247 13.6383 3.92247 13.3823 4.2326L6.89585 12.0815Z"
+        fill="#808080"
+      />
+    </g>
+  </svg>
+);
 
 export const UploadIcon = createIcon({
   displayName: 'UploadIcon',

From ac1747f265bc9084bbba184901ec0fa21fc26237 Mon Sep 17 00:00:00 2001
From: DonnyLe <98658081+DonnyLe@users.noreply.github.com>
Date: Sat, 25 Jan 2025 20:08:17 -0500
Subject: [PATCH 2/6] Added delete toggle

---
 .../createFormTemplateEditor/DraggableText.tsx   |  4 +++-
 .../createFormTemplateEditor/FormEditor.tsx      | 16 ++++++++++++++++
 2 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/apps/web/src/components/createFormTemplate/createFormTemplateEditor/DraggableText.tsx b/apps/web/src/components/createFormTemplate/createFormTemplateEditor/DraggableText.tsx
index b257213b..1d4a415a 100644
--- a/apps/web/src/components/createFormTemplate/createFormTemplateEditor/DraggableText.tsx
+++ b/apps/web/src/components/createFormTemplate/createFormTemplateEditor/DraggableText.tsx
@@ -11,6 +11,7 @@ export default function DraggableText({
   currentPosition,
   disableEdit,
   type,
+  disableDelete,
 }: {
   onStop: DraggableEventHandler;
   onResizeStop: RndResizeCallback;
@@ -20,6 +21,7 @@ export default function DraggableText({
   currentPosition: TextFieldPosition;
   disableEdit: boolean;
   type: FieldType;
+  disableDelete: boolean;
 }) {
   return (
     <Rnd
@@ -53,7 +55,7 @@ export default function DraggableText({
           borderRadius: 4,
         }}
       >
-        {!disableEdit && (
+        {!disableEdit && disableDelete && (
           <div
             style={{
               display: 'inline-block',
diff --git a/apps/web/src/components/createFormTemplate/createFormTemplateEditor/FormEditor.tsx b/apps/web/src/components/createFormTemplate/createFormTemplateEditor/FormEditor.tsx
index 767f1def..c2aefbe1 100644
--- a/apps/web/src/components/createFormTemplate/createFormTemplateEditor/FormEditor.tsx
+++ b/apps/web/src/components/createFormTemplate/createFormTemplateEditor/FormEditor.tsx
@@ -59,6 +59,7 @@ export const FormEditor = ({
   const [totalPages, setTotalPages] = useState(0);
   const documentRef = useRef<HTMLDivElement>(null);
   const [groupNum, setGroupNum] = useState(fieldGroups.size);
+  const [deleteFields, setDeleteFields] = useState(false);
 
   //colors for group buttons: colors[0] = border/text color, colors[1] = background color
   const groupColors = [
@@ -290,6 +291,20 @@ export const FormEditor = ({
             >
               <div>{Checkbox}</div>
             </Button>
+            <Button
+              position="relative"
+              width="40px"
+              height="40px"
+              backgroundColor="white"
+              borderRadius="4px"
+              display="flex"
+              justifyContent="center"
+              alignItems="center"
+              isDisabled={fieldGroups.size == 0 || disableEdit}
+              onClick={() => setDeleteFields(!deleteFields)}
+            >
+              <div>X</div>
+            </Button>
           </Box>
           <Box
             height="474px"
@@ -328,6 +343,7 @@ export const FormEditor = ({
                   Array.from(formFields[pageNum].entries()).map(
                     ([fieldId, { position, groupId }], index) => (
                       <DraggableText
+                        disableDelete={deleteFields}
                         type={
                           formFields[pageNum].get(fieldId)?.type ??
                           FieldType.Text

From cb00769867516b3aa1a11374fec297f2990c2281 Mon Sep 17 00:00:00 2001
From: DonnyLe <98658081+DonnyLe@users.noreply.github.com>
Date: Sat, 25 Jan 2025 20:16:03 -0500
Subject: [PATCH 3/6] Update DraggableText.tsx

---
 .../createFormTemplateEditor/DraggableText.tsx                | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/web/src/components/createFormTemplate/createFormTemplateEditor/DraggableText.tsx b/apps/web/src/components/createFormTemplate/createFormTemplateEditor/DraggableText.tsx
index 1d4a415a..4bf42da1 100644
--- a/apps/web/src/components/createFormTemplate/createFormTemplateEditor/DraggableText.tsx
+++ b/apps/web/src/components/createFormTemplate/createFormTemplateEditor/DraggableText.tsx
@@ -29,13 +29,13 @@ export default function DraggableText({
       bounds="parent"
       position={{ x: currentPosition.x, y: currentPosition.y }}
       size={{ height: currentPosition.height, width: currentPosition.width }}
-      minWidth={type == FieldType.Checkbox ? '30px' : '50px'}
+      minWidth={type == FieldType.Checkbox ? '10px' : '50px'}
       enableResizing={
         type == FieldType.Checkbox
           ? { left: false, right: false, top: false, bottom: false }
           : {}
       }
-      minHeight={type == FieldType.Checkbox ? '30px' : '40px'}
+      minHeight={type == FieldType.Checkbox ? '10px' : '40px'}
       style={{
         position: 'absolute',
         zIndex: 100000,

From b40db01b6d210d23705da8cefa2136c3ca289ee7 Mon Sep 17 00:00:00 2001
From: DonnyLe <98658081+DonnyLe@users.noreply.github.com>
Date: Sat, 25 Jan 2025 22:09:13 -0500
Subject: [PATCH 4/6] Update DraggableSignature.tsx

---
 .../createFormTemplateEditor/DraggableSignature.tsx             | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/web/src/components/createFormTemplate/createFormTemplateEditor/DraggableSignature.tsx b/apps/web/src/components/createFormTemplate/createFormTemplateEditor/DraggableSignature.tsx
index 14652713..404f33c5 100644
--- a/apps/web/src/components/createFormTemplate/createFormTemplateEditor/DraggableSignature.tsx
+++ b/apps/web/src/components/createFormTemplate/createFormTemplateEditor/DraggableSignature.tsx
@@ -27,7 +27,7 @@ export default function DraggableSignature({
       display: 'inline-block',
       cursor: 'pointer',
       padding: 4,
-    }, 
+    },
   };
   return (
     <Draggable onStop={onEnd}>

From af25a1532fa920bff972175129fd974292221c63 Mon Sep 17 00:00:00 2001
From: DonnyLe <98658081+DonnyLe@users.noreply.github.com>
Date: Sun, 2 Feb 2025 15:36:27 -0500
Subject: [PATCH 5/6] adjusted for comments and refactored some stuff

---
 .../createFormTemplate/ReviewBox.tsx          |  3 +-
 .../{DraggableText.tsx => CheckBox.tsx}       | 28 ++++----
 .../DraggableSignature.tsx                    | 46 -------------
 .../DraggableTextFactory.tsx                  | 49 ++++++++++++++
 .../createFormTemplateEditor/FormEditor.tsx   | 53 ++++++---------
 .../createFormTemplateEditor/TextField.tsx    | 64 +++++++++++++++++++
 .../components/createFormTemplate/types.ts    | 31 +++++++++
 .../src/context/CreateFormTemplateContext.tsx |  2 +-
 apps/web/src/context/types.ts                 |  2 +-
 9 files changed, 183 insertions(+), 95 deletions(-)
 rename apps/web/src/components/createFormTemplate/createFormTemplateEditor/{DraggableText.tsx => CheckBox.tsx} (73%)
 delete mode 100644 apps/web/src/components/createFormTemplate/createFormTemplateEditor/DraggableSignature.tsx
 create mode 100644 apps/web/src/components/createFormTemplate/createFormTemplateEditor/DraggableTextFactory.tsx
 create mode 100644 apps/web/src/components/createFormTemplate/createFormTemplateEditor/TextField.tsx

diff --git a/apps/web/src/components/createFormTemplate/ReviewBox.tsx b/apps/web/src/components/createFormTemplate/ReviewBox.tsx
index 6c04505f..6d34705b 100644
--- a/apps/web/src/components/createFormTemplate/ReviewBox.tsx
+++ b/apps/web/src/components/createFormTemplate/ReviewBox.tsx
@@ -1,5 +1,6 @@
 import { Box, Text, Flex } from '@chakra-ui/react';
-import { FormEditor, FieldGroups } from './createFormTemplateEditor/FormEditor';
+import { FormEditor } from './createFormTemplateEditor/FormEditor';
+import { FieldGroups } from './types';
 import { useCreateFormTemplate } from '../../context/CreateFormTemplateContext';
 
 /**
diff --git a/apps/web/src/components/createFormTemplate/createFormTemplateEditor/DraggableText.tsx b/apps/web/src/components/createFormTemplate/createFormTemplateEditor/CheckBox.tsx
similarity index 73%
rename from apps/web/src/components/createFormTemplate/createFormTemplateEditor/DraggableText.tsx
rename to apps/web/src/components/createFormTemplate/createFormTemplateEditor/CheckBox.tsx
index 4bf42da1..c59ac5aa 100644
--- a/apps/web/src/components/createFormTemplate/createFormTemplateEditor/DraggableText.tsx
+++ b/apps/web/src/components/createFormTemplate/createFormTemplateEditor/CheckBox.tsx
@@ -1,41 +1,43 @@
 import { Rnd, RndResizeCallback } from 'react-rnd';
 import { DraggableEventHandler } from 'react-draggable';
-import { FieldType, TextFieldPosition } from './FormEditor';
+import { FieldType, TextFieldPosition } from '../types';
 import { FaTimes } from 'react-icons/fa';
 
-export default function DraggableText({
+export default function Checkbox({
   onStop,
   onResizeStop,
   color,
   onRemove,
   currentPosition,
   disableEdit,
-  type,
   disableDelete,
 }: {
   onStop: DraggableEventHandler;
   onResizeStop: RndResizeCallback;
-  initialText: string | null;
   color: string;
   onRemove: () => void;
   currentPosition: TextFieldPosition;
   disableEdit: boolean;
-  type: FieldType;
   disableDelete: boolean;
 }) {
   return (
     <Rnd
-      lockAspectRatio={type == FieldType.Checkbox ? true : false}
+      lockAspectRatio={true}
       bounds="parent"
       position={{ x: currentPosition.x, y: currentPosition.y }}
       size={{ height: currentPosition.height, width: currentPosition.width }}
-      minWidth={type == FieldType.Checkbox ? '10px' : '50px'}
-      enableResizing={
-        type == FieldType.Checkbox
-          ? { left: false, right: false, top: false, bottom: false }
-          : {}
-      }
-      minHeight={type == FieldType.Checkbox ? '10px' : '40px'}
+      minWidth={'10px'}
+      minHeight={'10px'}
+      enableResizing={{
+        bottom: false,
+        bottomLeft: false,
+        bottomRight: false,
+        left: false,
+        right: false,
+        top: false,
+        topLeft: false,
+        topRight: false,
+      }}
       style={{
         position: 'absolute',
         zIndex: 100000,
diff --git a/apps/web/src/components/createFormTemplate/createFormTemplateEditor/DraggableSignature.tsx b/apps/web/src/components/createFormTemplate/createFormTemplateEditor/DraggableSignature.tsx
deleted file mode 100644
index 404f33c5..00000000
--- a/apps/web/src/components/createFormTemplate/createFormTemplateEditor/DraggableSignature.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import Draggable, { DraggableEventHandler } from 'react-draggable';
-
-export default function DraggableSignature({
-  onEnd,
-  onSet,
-  onCancel,
-  url,
-}: {
-  onEnd: DraggableEventHandler;
-  onSet: () => void;
-  onCancel: () => void;
-  url: string;
-}) {
-  const styles = {
-    container: {
-      Position: 'absolute',
-      zIndex: 100000,
-      border: `2px solid gray`,
-    },
-    controls: {
-      Position: 'absolute',
-      right: 0,
-      display: 'inline-block',
-      backgroundColor: 'white',
-    },
-    smallButton: {
-      display: 'inline-block',
-      cursor: 'pointer',
-      padding: 4,
-    },
-  };
-  return (
-    <Draggable onStop={onEnd}>
-      <div style={styles.container}>
-        <div style={styles.controls}>
-          <div style={styles.smallButton} onClick={onSet}>
-            Set{' '}
-          </div>
-          <div style={styles.smallButton} onClick={onCancel}>
-            Cancel
-          </div>
-        </div>
-      </div>
-    </Draggable>
-  );
-}
diff --git a/apps/web/src/components/createFormTemplate/createFormTemplateEditor/DraggableTextFactory.tsx b/apps/web/src/components/createFormTemplate/createFormTemplateEditor/DraggableTextFactory.tsx
new file mode 100644
index 00000000..b6ddf380
--- /dev/null
+++ b/apps/web/src/components/createFormTemplate/createFormTemplateEditor/DraggableTextFactory.tsx
@@ -0,0 +1,49 @@
+import { Rnd, RndResizeCallback } from 'react-rnd';
+import { DraggableEventHandler } from 'react-draggable';
+import { FieldType, TextFieldPosition } from '../types';
+import { FaTimes } from 'react-icons/fa';
+import Checkbox from './CheckBox';
+import TextField from './TextField';
+
+export default function DraggableTextFactory({
+  onStop,
+  onResizeStop,
+  color,
+  onRemove,
+  currentPosition,
+  disableEdit,
+  type,
+  disableDelete,
+}: {
+  onStop: DraggableEventHandler;
+  onResizeStop: RndResizeCallback;
+  initialText: string | null;
+  color: string;
+  onRemove: () => void;
+  currentPosition: TextFieldPosition;
+  disableEdit: boolean;
+  type: FieldType;
+  disableDelete: boolean;
+}) {
+  return type === FieldType.Checkbox ? (
+    <Checkbox
+      onStop={onStop}
+      onResizeStop={onResizeStop}
+      color={color}
+      onRemove={onRemove}
+      currentPosition={currentPosition}
+      disableEdit={disableEdit}
+      disableDelete={disableDelete}
+    ></Checkbox>
+  ) : (
+    <TextField
+      onStop={onStop}
+      onResizeStop={onResizeStop}
+      color={color}
+      onRemove={onRemove}
+      currentPosition={currentPosition}
+      disableEdit={disableEdit}
+      disableDelete={disableDelete}
+    ></TextField>
+  );
+}
diff --git a/apps/web/src/components/createFormTemplate/createFormTemplateEditor/FormEditor.tsx b/apps/web/src/components/createFormTemplate/createFormTemplateEditor/FormEditor.tsx
index c2aefbe1..88d8e9ed 100644
--- a/apps/web/src/components/createFormTemplate/createFormTemplateEditor/FormEditor.tsx
+++ b/apps/web/src/components/createFormTemplate/createFormTemplateEditor/FormEditor.tsx
@@ -5,42 +5,12 @@ import { TextIcon, PlusSign, Checkbox } from 'apps/web/src/static/icons';
 import { DraggableData, DraggableEvent } from 'react-draggable';
 import PagingControl from './PagingControl';
 import { v4 as uuidv4 } from 'uuid';
-import DraggableText from './DraggableText';
+import DraggableTextFactory from './DraggableTextFactory';
 import { useCreateFormTemplate } from 'apps/web/src/context/CreateFormTemplateContext';
+import { FieldType, TextFieldPosition, FormFields } from '../types';
 
 pdfjs.GlobalWorkerOptions.workerSrc = `https://cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.min.js`;
 
-export type TextFieldPosition = {
-  x: number;
-  y: number;
-  width: number;
-  height: number;
-};
-
-export enum FieldType {
-  Text,
-  Checkbox,
-  Signature,
-}
-
-type FieldGroupColor = {
-  border: string;
-  background: string;
-};
-
-type groupId = string;
-type fieldId = string;
-export type FieldGroups = Map<groupId, FieldGroupColor>;
-
-// index = page num (zero indexing)
-export type FormFields = Record<
-  number,
-  Map<
-    fieldId,
-    { position: TextFieldPosition; groupId: string; type: FieldType }
-  >
->;
-
 export const FormEditor = ({
   formTemplateName,
   pdfUrl,
@@ -170,6 +140,7 @@ export const FormEditor = ({
     }
   };
 
+  // converts HTML web coordinates to PDF coordinates
   const convertCoordinates = (container: HTMLDivElement) => {
     const { scrollLeft, scrollTop, clientWidth, clientHeight } = container;
     const centerX = scrollLeft + clientWidth / 2;
@@ -291,6 +262,22 @@ export const FormEditor = ({
             >
               <div>{Checkbox}</div>
             </Button>
+          </Box>
+          <Box
+            position="absolute"
+            right="24px"
+            top="69px"
+            background="white"
+            padding="6px"
+            boxShadow="0px 1px 4px #E5E5E5"
+            borderRadius="5px"
+            border="1px #E5E5E5 solid"
+            flexDirection="column"
+            justifyContent="center"
+            alignItems="center"
+            gap="8px"
+            display="flex"
+          >
             <Button
               position="relative"
               width="40px"
@@ -342,7 +329,7 @@ export const FormEditor = ({
                 {formFields[pageNum] &&
                   Array.from(formFields[pageNum].entries()).map(
                     ([fieldId, { position, groupId }], index) => (
-                      <DraggableText
+                      <DraggableTextFactory
                         disableDelete={deleteFields}
                         type={
                           formFields[pageNum].get(fieldId)?.type ??
diff --git a/apps/web/src/components/createFormTemplate/createFormTemplateEditor/TextField.tsx b/apps/web/src/components/createFormTemplate/createFormTemplateEditor/TextField.tsx
new file mode 100644
index 00000000..426deb1e
--- /dev/null
+++ b/apps/web/src/components/createFormTemplate/createFormTemplateEditor/TextField.tsx
@@ -0,0 +1,64 @@
+import { Rnd, RndResizeCallback } from 'react-rnd';
+import { DraggableEventHandler } from 'react-draggable';
+import { FieldType, TextFieldPosition } from '../types';
+import { FaTimes } from 'react-icons/fa';
+
+export default function TextField({
+  onStop,
+  onResizeStop,
+  color,
+  onRemove,
+  currentPosition,
+  disableEdit,
+  disableDelete,
+}: {
+  onStop: DraggableEventHandler;
+  onResizeStop: RndResizeCallback;
+  color: string;
+  onRemove: () => void;
+  currentPosition: TextFieldPosition;
+  disableEdit: boolean;
+  disableDelete: boolean;
+}) {
+  return (
+    <Rnd
+      bounds="parent"
+      position={{ x: currentPosition.x, y: currentPosition.y }}
+      size={{ height: currentPosition.height, width: currentPosition.width }}
+      minWidth={'50px'}
+      minHeight={'40px'}
+      style={{
+        position: 'absolute',
+        zIndex: 100000,
+        background: `${color}`,
+        opacity: '10px',
+        border: `solid 1px grey`,
+        padding: 4,
+      }}
+      onDragStop={onStop}
+      onResizeStop={onResizeStop}
+      disableDragging={disableEdit}
+    >
+      <div
+        style={{
+          position: 'absolute',
+          display: 'inline-block',
+          borderRadius: 4,
+        }}
+      >
+        {!disableEdit && disableDelete && (
+          <div
+            style={{
+              display: 'inline-block',
+              cursor: 'pointer',
+              padding: 4,
+            }}
+            onClick={onRemove}
+          >
+            <FaTimes color={'#ef6565'} />
+          </div>
+        )}
+      </div>
+    </Rnd>
+  );
+}
diff --git a/apps/web/src/components/createFormTemplate/types.ts b/apps/web/src/components/createFormTemplate/types.ts
index 78b3a3ac..632bee10 100644
--- a/apps/web/src/components/createFormTemplate/types.ts
+++ b/apps/web/src/components/createFormTemplate/types.ts
@@ -2,3 +2,34 @@ export type TempSignatureField = {
   id: string;
   value: string;
 };
+export type TextFieldPosition = {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+};
+
+export enum FieldType {
+  Text,
+  Checkbox,
+  Signature,
+}
+
+export type FieldGroupColor = {
+  border: string;
+  background: string;
+};
+
+export type groupId = string;
+export type fieldId = string;
+
+export type FieldGroups = Map<groupId, FieldGroupColor>;
+
+// Dictionary from page number to fields on that page.
+export type FormFields = Record<number, Map<fieldId, Field>>;
+
+export type Field = {
+  position: TextFieldPosition;
+  groupId: string;
+  type: FieldType;
+};
diff --git a/apps/web/src/context/CreateFormTemplateContext.tsx b/apps/web/src/context/CreateFormTemplateContext.tsx
index 79dc8ca3..3f2e313a 100644
--- a/apps/web/src/context/CreateFormTemplateContext.tsx
+++ b/apps/web/src/context/CreateFormTemplateContext.tsx
@@ -4,7 +4,7 @@ import { useBlob } from '@web/hooks/useBlob';
 import {
   FormFields,
   FieldGroups,
-} from '@web/components/createFormTemplate/createFormTemplateEditor/FormEditor';
+} from '@web/components/createFormTemplate/types';
 import { useEffect } from 'react';
 import { useRouter } from 'next/router';
 
diff --git a/apps/web/src/context/types.ts b/apps/web/src/context/types.ts
index c26361c8..e79e39b8 100644
--- a/apps/web/src/context/types.ts
+++ b/apps/web/src/context/types.ts
@@ -2,7 +2,7 @@ import { Dispatch, SetStateAction } from 'react';
 import {
   FormFields,
   FieldGroups,
-} from '@web/components/createFormTemplate/createFormTemplateEditor/FormEditor';
+} from '@web/components/createFormTemplate/types';
 
 // for storage in context
 export type User = {

From fc3f88f6cfb86198d9fcc120aa7bcc8dcb451d9b Mon Sep 17 00:00:00 2001
From: DonnyLe <98658081+DonnyLe@users.noreply.github.com>
Date: Wed, 12 Feb 2025 19:40:39 -0500
Subject: [PATCH 6/6] idk what these changes are

---
 .../assigned-group.service.spec.ts               | 14 +++++++-------
 .../createFormTemplate/FormTemplateButtons.tsx   |  1 -
 .../components/createFormTemplate/ReviewBox.tsx  |  4 ++--
 .../DraggableTextFactory.tsx                     |  2 ++
 .../createFormTemplateEditor/FormEditor.tsx      | 16 ++++++++++------
 .../createFormTemplateEditor/TextField.tsx       |  7 +++----
 .../src/context/CreateFormTemplateContext.tsx    |  9 ++++-----
 7 files changed, 28 insertions(+), 25 deletions(-)

diff --git a/apps/server/src/assigned-group/assigned-group.service.spec.ts b/apps/server/src/assigned-group/assigned-group.service.spec.ts
index 6fc080f1..3e66defc 100644
--- a/apps/server/src/assigned-group/assigned-group.service.spec.ts
+++ b/apps/server/src/assigned-group/assigned-group.service.spec.ts
@@ -7,7 +7,7 @@ import { PositionsService } from '../positions/positions.service';
 import { AssignedGroupService } from './assigned-group.service';
 import { ConnectEmployeeDto } from './dto/create-assigned-group.dto';
 
-let assignedGroupPositionSigner = {
+const assignedGroupPositionSigner = {
   id: 'assignedGroup-id',
   formInstanceId: 'form-instance-id',
   signerType: SignerType.POSITION,
@@ -19,7 +19,7 @@ let assignedGroupPositionSigner = {
   updatedAt: new Date(1672531200),
 };
 
-let assignedGroupDepartmentSigner = {
+const assignedGroupDepartmentSigner = {
   id: 'assignedGroup-id',
   formInstanceId: 'form-instance-id',
   signerType: SignerType.DEPARTMENT,
@@ -35,7 +35,7 @@ const db = {
   assignedGroup: {
     findFirstOrThrow: jest.fn().mockResolvedValue(assignedGroupPositionSigner),
     update: jest.fn().mockImplementation((args) => {
-      let val = {
+      const val = {
         ...assignedGroupPositionSigner,
         ...args.data,
       };
@@ -129,7 +129,7 @@ describe('AssignedGroupService', () => {
           signerDepartmentId: undefined,
           signerEmployeeId: undefined,
         };
-        let updatedSignature = await service.updateSigner(
+        const updatedSignature = await service.updateSigner(
           'assignedGroup-id',
           updateSignatureSignerDto,
         );
@@ -151,7 +151,7 @@ describe('AssignedGroupService', () => {
           signerDepartmentId: 'department-id',
           signerEmployeeId: undefined,
         };
-        let updatedSignature = await service.updateSigner(
+        const updatedSignature = await service.updateSigner(
           'assignedGroup-id',
           updateSignatureSignerDto,
         );
@@ -173,7 +173,7 @@ describe('AssignedGroupService', () => {
           signerDepartmentId: undefined,
           signerEmployeeId: 'employee-id',
         };
-        let updatedSignature = await service.updateSigner(
+        const updatedSignature = await service.updateSigner(
           'assignedGroup-id',
           updateSignatureSignerDto,
         );
@@ -199,7 +199,7 @@ describe('AssignedGroupService', () => {
             { id: 'employee-id-2' },
           ],
         };
-        let updatedSignature = await service.updateSigner(
+        const updatedSignature = await service.updateSigner(
           'assignedGroup-id',
           updateSignatureSignerDto,
         );
diff --git a/apps/web/src/components/createFormTemplate/FormTemplateButtons.tsx b/apps/web/src/components/createFormTemplate/FormTemplateButtons.tsx
index 500e527f..b1a97ff2 100644
--- a/apps/web/src/components/createFormTemplate/FormTemplateButtons.tsx
+++ b/apps/web/src/components/createFormTemplate/FormTemplateButtons.tsx
@@ -5,7 +5,6 @@ import {
   formTemplatesControllerCreateMutation,
   formTemplatesControllerFindAllQueryKey,
 } from '@web/client/@tanstack/react-query.gen';
-import { client } from '@web/client/client.gen';
 import { useCreateFormTemplate } from '@web/context/CreateFormTemplateContext';
 import { queryClient } from '@web/pages/_app';
 import { useRouter } from 'next/router';
diff --git a/apps/web/src/components/createFormTemplate/ReviewBox.tsx b/apps/web/src/components/createFormTemplate/ReviewBox.tsx
index acd9cfda..e5bcbe91 100644
--- a/apps/web/src/components/createFormTemplate/ReviewBox.tsx
+++ b/apps/web/src/components/createFormTemplate/ReviewBox.tsx
@@ -1,7 +1,7 @@
-import { Box, Text, Flex } from '@chakra-ui/react';
+import { Box, Flex, Text } from '@chakra-ui/react';
+import { useCreateFormTemplate } from '../../context/CreateFormTemplateContext';
 import { FormEditor } from './createFormTemplateEditor/FormEditor';
 import { FieldGroups } from './types';
-import { useCreateFormTemplate } from '../../context/CreateFormTemplateContext';
 
 /**
  * The contents of the white box for the page (step 2) that asks the user for the form's name and
diff --git a/apps/web/src/components/createFormTemplate/createFormTemplateEditor/DraggableTextFactory.tsx b/apps/web/src/components/createFormTemplate/createFormTemplateEditor/DraggableTextFactory.tsx
index b6ddf380..a6e7e918 100644
--- a/apps/web/src/components/createFormTemplate/createFormTemplateEditor/DraggableTextFactory.tsx
+++ b/apps/web/src/components/createFormTemplate/createFormTemplateEditor/DraggableTextFactory.tsx
@@ -36,6 +36,8 @@ export default function DraggableTextFactory({
       disableDelete={disableDelete}
     ></Checkbox>
   ) : (
+    // we'll have to add something else for signature fields but right now lets treat it as
+    // a text field
     <TextField
       onStop={onStop}
       onResizeStop={onResizeStop}
diff --git a/apps/web/src/components/createFormTemplate/createFormTemplateEditor/FormEditor.tsx b/apps/web/src/components/createFormTemplate/createFormTemplateEditor/FormEditor.tsx
index 8af55cf4..091b1b70 100644
--- a/apps/web/src/components/createFormTemplate/createFormTemplateEditor/FormEditor.tsx
+++ b/apps/web/src/components/createFormTemplate/createFormTemplateEditor/FormEditor.tsx
@@ -1,13 +1,17 @@
+import { Box, Button, Text } from '@chakra-ui/react';
+import { Checkbox, PlusSign, TextIcon } from 'apps/web/src/static/icons';
 import { useRef, useState } from 'react';
-import { Document, Page, pdfjs } from 'react-pdf';
-import { Box, Text, Button } from '@chakra-ui/react';
-import { TextIcon, PlusSign, Checkbox } from 'apps/web/src/static/icons';
 import { DraggableData, DraggableEvent } from 'react-draggable';
-import PagingControl from './PagingControl';
+import { Document, Page, pdfjs } from 'react-pdf';
 import { v4 as uuidv4 } from 'uuid';
+import {
+  FieldGroups,
+  FieldType,
+  FormFields,
+  TextFieldPosition,
+} from '../types';
 import DraggableTextFactory from './DraggableTextFactory';
-import { useCreateFormTemplate } from 'apps/web/src/context/CreateFormTemplateContext';
-import { FieldType, TextFieldPosition, FormFields } from '../types';
+import PagingControl from './PagingControl';
 
 pdfjs.GlobalWorkerOptions.workerSrc = `https://cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.min.js`;
 
diff --git a/apps/web/src/components/createFormTemplate/createFormTemplateEditor/TextField.tsx b/apps/web/src/components/createFormTemplate/createFormTemplateEditor/TextField.tsx
index 8096ad86..e035a7d7 100644
--- a/apps/web/src/components/createFormTemplate/createFormTemplateEditor/TextField.tsx
+++ b/apps/web/src/components/createFormTemplate/createFormTemplateEditor/TextField.tsx
@@ -1,7 +1,7 @@
-import { Rnd, RndResizeCallback } from 'react-rnd';
 import { DraggableEventHandler } from 'react-draggable';
-import { FieldType, TextFieldPosition } from '../types';
 import { FaTimes } from 'react-icons/fa';
+import { Rnd, RndResizeCallback } from 'react-rnd';
+import { TextFieldPosition } from '../types';
 
 export default function TextField({
   onStop,
@@ -24,9 +24,8 @@ export default function TextField({
     <Rnd
       bounds="parent"
       position={{ x: currentPosition.x, y: currentPosition.y }}
-      size={{ height: currentPosition.height, width: currentPosition.width }}
       minWidth={'50px'}
-      minHeight={'40px'}
+      minHeight={'15px'}
       style={{
         position: 'absolute',
         zIndex: 1,
diff --git a/apps/web/src/context/CreateFormTemplateContext.tsx b/apps/web/src/context/CreateFormTemplateContext.tsx
index e28b0545..abc933e7 100644
--- a/apps/web/src/context/CreateFormTemplateContext.tsx
+++ b/apps/web/src/context/CreateFormTemplateContext.tsx
@@ -1,12 +1,11 @@
-import React, { createContext, useContext, useState } from 'react';
-import { CreateFormTemplateContextType } from './types';
-import { useBlob } from '@web/hooks/useBlob';
 import {
-  FormFields,
   FieldGroups,
+  FormFields,
 } from '@web/components/createFormTemplate/types';
-import { useEffect } from 'react';
+import { useBlob } from '@web/hooks/useBlob';
 import { useRouter } from 'next/router';
+import { createContext, useContext, useEffect, useState } from 'react';
+import { CreateFormTemplateContextType } from './types';
 
 export const CreateFormTemplateContext =
   createContext<CreateFormTemplateContextType>(