#216 form instance assign fields and groups

apps/web/package.json

@@ -42,10 +42,12 @@
     "pdf-lib": "^1.17.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-draggable": "^4.4.6",
     "react-dropzone": "^14.3.5",
     "react-icons": "^5.3.0",
     "react-pdf": "^7.7.0",
     "react-query": "^3.39.3",
+    "react-rnd": "^10.4.13",
     "react-router-dom": "^6.8.1",
     "react-scripts": "^5.0.1",
     "react-signature-canvas": "^1.0.6",

apps/web/src/components/FormInstance.tsx

@@ -15,7 +15,7 @@ import {
   UserProfileAvatar,
 } from 'apps/web/src/static/icons';
 import AssigneeMap from './AvatarMap';
-import { useState } from 'react';
+import { useRef, useState } from 'react';
 import { FormInstanceEntity, FormInstancesService } from '@web/client';
 import { useRouter } from 'next/router';
 import { useMutation } from '@tanstack/react-query';

apps/web/src/components/NavBar.tsx

@@ -17,6 +17,7 @@ import {
   SettingsIcon,
   PlusIcon,
   FormInstanceIcon,
+  GrayPencilIcon,
 } from 'apps/web/src/static/icons';
 import { useRouter } from 'next/router';
 import Link from 'next/link';
@@ -30,9 +31,9 @@ const icons = {
   pendingActive: <PendingIcon marginRight="2" />,
   completed: <CompletedIcon marginRight="2" />,
   completedActive: <CompletedIcon marginRight="2" />,
-  history: <HistoryIcon marginRight="2" />,
-  settings: <SettingsIcon marginRight="2" />,
   formInstance: <FormInstanceIcon marginRight="2" />,
+  test: <GrayPencilIcon marginRight="2" />,
+  testActive: <GrayPencilIcon marginRight="2" />,
 };
 type IconKeys = keyof typeof icons;
 /**
@@ -185,6 +186,20 @@ export const NavBar = ({
       <NavItem icon="completed" link="/completed">
         Completed
       </NavItem>
+      {process.env.NODE_ENV === 'development' && (
+        <Box>
+          <Box
+            mt="4"
+            mb="2"
+            mx="12"
+            borderBottomWidth="1px"
+            borderColor="gray.200"
+          ></Box>
+          <NavItem icon="test" link="/sandbox">
+            Test
+          </NavItem>
+        </Box>
+      )}
     </Box>
   );
 };

apps/web/src/components/createFormTemplate/ReviewBox.tsx

@@ -1,4 +1,6 @@
 import { Box, Text, Flex } from '@chakra-ui/react';
+import { FormEditor, FieldGroups } from './createFormTemplateEditor/FormEditor';
+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
@@ -12,10 +14,12 @@ export const ReviewBox = ({
   formLink,
   name,
   description,
+  fieldGroups,
 }: {
   formLink: string;
   name: string;
   description: string;
+  fieldGroups: FieldGroups;
 }) => {
   const textInputStyle = {
     alignSelf: 'stretch',
@@ -25,36 +29,28 @@ export const ReviewBox = ({
     outlineColor: 'transparent',
     borderColor: 'transparent',
   };
-  // TODO: these groups should instead be taken from state
-  const groups: string[] = ['Group 1', 'Group 2', 'Group 3'];
 
-  const GroupItem = ({ num }: { num: number }) => {
-    return num <= groups.length ? (
-      <Flex gap="10px">
+  const { formFields } = useCreateFormTemplate();
+
+  const GroupItem = ({
+    num,
+    color,
+    border,
+  }: {
+    num: number;
+    color: string;
+    border: string;
+  }) => {
+    return (
+      <Flex gap="10px" alignItems="center">
         <Box
           width="24px"
           height="24px"
-          {...(num === 1
-            ? {
-                border: '1px solid var(--Blue, #1367EA)',
-                background: '#EEF5FF',
-              }
-            : num === 2
-            ? {
-                border: '1px solid #BD21CA',
-                background: '#FDEAFF',
-              }
-            : num === 3
-            ? {
-                border: '1px solid #7645E8',
-                background: '#ECE4FF',
-              }
-            : {})}
-        ></Box>
-        <Text>{groups[num - 1]}</Text>
+          backgroundColor={color}
+          border={`1px solid ${border}`}
+        />
+        <Text>Group {num}</Text>
       </Flex>
-    ) : (
-      <></>
     );
   };
 
@@ -85,9 +81,20 @@ export const ReviewBox = ({
           <Flex gap="12px" flexDirection="column" width="480px">
             <Text fontWeight={600}>Input Field Groups</Text>
           </Flex>
-          <GroupItem num={1} />
-          <GroupItem num={2} />
-          <GroupItem num={3} />
+          {Object.keys(Object.fromEntries(fieldGroups)).map((key, index) => {
+            const { border, background } = fieldGroups.get(key) as {
+              border: string;
+              background: string;
+            };
+            return (
+              <GroupItem
+                key={index}
+                num={index + 1}
+                color={background}
+                border={border}
+              />
+            );
+          })}
         </Flex>
       </Flex>
       <Flex
@@ -104,20 +111,10 @@ export const ReviewBox = ({
         >
           Preview Only
         </Text>
-        <embed
-          src={formLink}
-          type="application/pdf"
-          width="400px"
-          height="500px"
-          style={{
-            display: 'flex',
-            justifyContent: 'center',
-            alignItems: 'center',
-            alignSelf: 'stretch',
-            border: '1px solid #E5E5E5',
-            borderRadius: '8px',
-            width: '100%',
-          }}
+        <FormEditor
+          formTemplateName={name}
+          pdfUrl={formLink}
+          disableEdit={true}
         />
       </Flex>
     </Flex>

apps/web/src/components/createFormTemplate/createFormTemplateEditor/AssignInput.tsx

@@ -0,0 +1,29 @@
+import { Box, Text } from '@chakra-ui/react';
+import { FormEditor } from './FormEditor';
+
+export const AssignInput = () => {
+  return (
+    <Box margin="36px" display="flex" flexDirection="column" gap="20px">
+      <Box>
+        <Text fontSize="30px" fontWeight="700" lineHeight="38px">
+          Create form template
+        </Text>
+        <Text
+          fontSize="19px"
+          color="#4B4C4F"
+          fontFamily="Hanken Grotesk"
+          fontWeight="500"
+          lineHeight="26px"
+          wordBreak="break-word"
+        >
+          Select an assignee group and drag to add input fields for each
+        </Text>
+      </Box>
+      <FormEditor
+        formTemplateName="Authorization Form"
+        pdfUrl={'http://localhost:3002/test.pdf'}
+        disableEdit={false}
+      />
+    </Box>
+  );
+};

apps/web/src/components/createFormTemplate/createFormTemplateEditor/DraggableSignature.tsx

@@ -0,0 +1,46 @@
+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>
+  );
+}

apps/web/src/components/createFormTemplate/createFormTemplateEditor/DraggableText.tsx

@@ -0,0 +1,63 @@
+import { Rnd, RndResizeCallback } from 'react-rnd';
+import { DraggableEventHandler } from 'react-draggable';
+import { TextFieldPosition } from './FormEditor';
+import { FaTimes } from 'react-icons/fa';
+
+export default function DraggableText({
+  onStop,
+  onResizeStop,
+  color,
+  onRemove,
+  currentPosition,
+  disableEdit,
+}: {
+  onStop: DraggableEventHandler;
+  onResizeStop: RndResizeCallback;
+  initialText: string | null;
+  color: string;
+  onRemove: () => void;
+  currentPosition: TextFieldPosition;
+  disableEdit: 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 && (
+          <div
+            style={{
+              display: 'inline-block',
+              cursor: 'pointer',
+              padding: 4,
+            }}
+            onClick={onRemove}
+          >
+            <FaTimes color={'#ef6565'} />
+          </div>
+        )}
+      </div>
+    </Rnd>
+  );
+}