243 feature add checkbox input in create form template flow

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,
         );

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';

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

@@ -1,6 +1,7 @@
-import { Box, Text, Flex } from '@chakra-ui/react';
-import { FormEditor, FieldGroups } from './createFormTemplateEditor/FormEditor';
+import { Box, Flex, Text } from '@chakra-ui/react';
 import { useCreateFormTemplate } from '../../context/CreateFormTemplateContext';
+import { FormEditor } from './createFormTemplateEditor/FormEditor';
+import { FieldGroups } from './types';
 
 /**
  * The contents of the white box for the page (step 2) that asks the user for the form's name and

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

@@ -0,0 +1,75 @@
+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 Checkbox({
+  onStop,
+  onResizeStop,
+  color,
+  onRemove,
+  currentPosition,
+  disableEdit,
+  disableDelete,
+}: {
+  onStop: DraggableEventHandler;
+  onResizeStop: RndResizeCallback;
+  color: string;
+  onRemove: () => void;
+  currentPosition: TextFieldPosition;
+  disableEdit: boolean;
+  disableDelete: boolean;
+}) {
+  return (
+    <Rnd
+      lockAspectRatio={true}
+      bounds="parent"
+      position={{ x: currentPosition.x, y: currentPosition.y }}
+      size={{ height: currentPosition.height, width: currentPosition.width }}
+      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,
+        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>
+  );
+}

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

@@ -0,0 +1,51 @@
+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>
+  ) : (
+    // 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}
+      color={color}
+      onRemove={onRemove}
+      currentPosition={currentPosition}
+      disableEdit={disableEdit}
+      disableDelete={disableDelete}
+    ></TextField>
+  );
+}