Attempt pdf window resizing (#420)

* attempt pdf window resizing

* vibe coded responsive sign form page

* fix translation for form fields

---------

Co-authored-by: Kaiyang Zheng <kaiyang.zheng@gmail.com>

Author: elvincheng3

apps/web/src/components/FormPreview.tsx

@@ -72,18 +72,20 @@ export const FormPreview = ({
               padding="24px"
               overflow="hidden"
               maxHeight="calc(100vh - 180px)"
-              width="900px"
+              minW="800px"
             >
               <FormEditor
                 formTemplateName={formInstance.name}
+                formTemplateDimensions={{
+                  width: formInstance.formTemplate.pageWidth,
+                  height: formInstance.formTemplate.pageHeight,
+                }}
                 pdfFile={pdfFile}
                 disableEdit={true}
                 fieldGroups={fieldGroups}
                 formFields={[]}
                 setFormFields={() => {}}
                 setFieldGroups={() => {}}
-                scale={1}
-                documentWidth={800}
                 showNav={false}
               />
             </Flex>

apps/web/src/components/createForm/FormButtons.tsx

@@ -21,6 +21,7 @@ import { useSignFormInstance } from '@web/hooks/useSignFormInstance';
 import { Toaster, toaster } from '../ui/toaster';
 import { useState } from 'react';
 import { AxiosError } from 'axios';
+import { PDF_HEIGHT_PX, PDF_WIDTH_PX } from '../createFormTemplate/utils';
 
 /**
  * Delete, Back, and Save & Continue buttons at the bottom of form template creation flow.
@@ -179,8 +180,8 @@ export const FormButtons = ({
       await createFormTemplateMutation
         .mutateAsync({
           body: {
-            pageHeight: formDimensions.height,
-            pageWidth: formDimensions.width,
+            pageHeight: formDimensions.height ?? PDF_HEIGHT_PX,
+            pageWidth: formDimensions.width ?? PDF_WIDTH_PX,
             name: formTemplateName ?? '',
             fieldGroups: fieldGroups,
             file: pdfFile,

apps/web/src/components/createForm/FormLayout.tsx

@@ -37,7 +37,7 @@ export const FormLayout = ({
   review?: boolean;
 }) => {
   return (
-    <Box height="100vh" marginTop="36px">
+    <Box height="100vh" marginTop="36px" minW="1000px">
       <Flex position="absolute" margin="0px" zIndex={5000}>
         <SideCreateForm curStep={pageNumber} interactionType={type} />
       </Flex>

apps/web/src/components/createForm/NameAndDescriptionBox.tsx

@@ -23,13 +23,15 @@ export const NameAndDescriptionBox = ({
   setName,
   description,
   setDescription,
+  formDimensions,
 }: {
   pdfFile: File | null;
   fieldGroups: FieldGroupBaseEntity[];
   name: string | null;
   setName: Dispatch<SetStateAction<string | null>>;
   description: string | null;
   setDescription: Dispatch<SetStateAction<string | null>>;
+  formDimensions: { width: number; height: number };
 }) => {
   const textInputStyle = {
     padding: '8px 10px',
@@ -54,6 +56,7 @@ export const NameAndDescriptionBox = ({
         gap="24px"
         alignItems={'flex-start'}
         flex={1}
+        maxW="500px"
       >
         <Flex gap="10px" flexDirection="column" width="100%">
           <Text>
@@ -99,17 +102,16 @@ export const NameAndDescriptionBox = ({
           >
             Preview Only
           </Text>
-          <Box width="580px">
+          <Box minW="500px">
             <FormEditor
               formTemplateName={name ?? ''}
+              formTemplateDimensions={formDimensions}
               pdfFile={pdfFile}
               disableEdit
               fieldGroups={formEditorTranslateFieldGroups(fieldGroups)}
               formFields={formEditorTranslateFormFields(fieldGroups)}
               setFormFields={() => {}}
               setFieldGroups={() => {}}
-              scale={0.6875}
-              documentWidth={550}
               showNav={false}
             />
           </Box>

apps/web/src/components/createFormInstance/AssignGroupsBox.tsx

@@ -14,6 +14,7 @@ import {
   formEditorTranslateFormFields,
 } from '@web/utils/formInstanceUtils';
 import { groupColors } from '@web/utils/formTemplateUtils';
+import Error from '../Error';
 
 /**
  * The contents of the white box for assigning groups.
@@ -43,7 +44,8 @@ export const AssignGroupsBox = ({
     borderColor: 'transparent',
   };
 
-  const { assignedGroupData, setAssignedGroupData } = useCreateFormInstance();
+  const { assignedGroupData, setAssignedGroupData, formTemplate } =
+    useCreateFormInstance();
   const { data: positions } = useQuery(positionsControllerFindAllOptions());
   const { data: employees } = useQuery(employeesControllerFindAllOptions());
   const { data: departments } = useQuery(
@@ -54,6 +56,10 @@ export const AssignGroupsBox = ({
     }),
   );
 
+  if (!formTemplate) {
+    return <Error></Error>;
+  }
+
   return (
     <Flex
       flexDirection={'row'}
@@ -113,7 +119,7 @@ export const AssignGroupsBox = ({
         >
           Preview Only
         </Text>
-        <Box width="500px">
+        <Box minW="500px">
           <FormEditor
             formTemplateName={name ?? ''}
             pdfFile={pdfFile}
@@ -122,9 +128,11 @@ export const AssignGroupsBox = ({
             formFields={formEditorTranslateFormFields(fieldGroups)}
             setFormFields={() => {}}
             setFieldGroups={() => {}}
-            scale={0.625}
-            documentWidth={500}
             showNav={false}
+            formTemplateDimensions={{
+              width: formTemplate?.pageWidth,
+              height: formTemplate?.pageHeight,
+            }}
           />
         </Box>
       </Flex>

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

@@ -7,6 +7,7 @@ import {
   formEditorTranslateFormFields,
 } from '@web/utils/formInstanceUtils';
 import { groupColors } from '@web/utils/formTemplateUtils';
+import Error from '../Error';
 
 export const ReviewBox = ({
   pdfFile,
@@ -28,7 +29,7 @@ export const ReviewBox = ({
     borderColor: 'transparent',
   };
 
-  const { assignedGroupData } = useCreateFormInstance();
+  const { assignedGroupData, formTemplate } = useCreateFormInstance();
 
   const GroupItem = ({ color, border }: { color: string; border: string }) => {
     return (
@@ -43,6 +44,10 @@ export const ReviewBox = ({
     );
   };
 
+  if (!formTemplate) {
+    return <Error></Error>;
+  }
+
   return (
     <Flex
       flexDirection={'row'}
@@ -95,7 +100,7 @@ export const ReviewBox = ({
         >
           Preview Only
         </Text>
-        <Box width="500px">
+        <Box minW="500px">
           <FormEditor
             formTemplateName={name ?? ''}
             pdfFile={pdfFile}
@@ -104,9 +109,11 @@ export const ReviewBox = ({
             formFields={formEditorTranslateFormFields(fieldGroups)}
             setFormFields={() => {}}
             setFieldGroups={() => {}}
-            scale={0.625}
-            documentWidth={500}
             showNav={false}
+            formTemplateDimensions={{
+              width: formTemplate?.pageWidth,
+              height: formTemplate?.pageHeight,
+            }}
           />
         </Box>
       </Flex>

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

@@ -31,7 +31,7 @@ export const ReviewBox = ({
     borderColor: 'transparent',
   };
 
-  const { formFields } = useCreateFormTemplate();
+  const { formFields, formDimensions } = useCreateFormTemplate();
 
   const GroupItem = ({
     num,
@@ -55,6 +55,10 @@ export const ReviewBox = ({
     );
   };
 
+  if (!formDimensions || !formFields) {
+    return <></>;
+  }
+
   return (
     <Flex
       flexDirection={'row'}
@@ -112,17 +116,16 @@ export const ReviewBox = ({
         >
           Preview Only
         </Text>
-        <Box width="500px">
+        <Box minW="500px">
           <FormEditor
             formTemplateName={name}
+            formTemplateDimensions={formDimensions}
             pdfFile={pdfFile}
             disableEdit
             fieldGroups={fieldGroups}
             formFields={formFields}
             setFormFields={() => {}}
             setFieldGroups={() => {}}
-            scale={0.625}
-            documentWidth={500}
             showNav={false}
           />
         </Box>