Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

244 feature add signature input in create form template flow #272

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
/*
Warnings:
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We shouldn't have to make a new migration - i would delete this folder. I think this comes from running yarn prisma migrate dev, which automatically generates a new migration. I think yarn prisma migrate reset to run the migrations + seedings should be fine


- You are about to drop the column `employeeId` on the `Signature` table. All the data in the column will be lost.

*/
-- DropForeignKey
ALTER TABLE "Signature" DROP CONSTRAINT "Signature_employeeId_fkey";

-- AlterTable
ALTER TABLE "Signature" DROP COLUMN "employeeId";
Original file line number Diff line number Diff line change
@@ -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, SignatureIcon } from 'apps/web/src/static/icons';
import { DraggableData, DraggableEvent } from 'react-draggable';
import PagingControl from './PagingControl';
import { v4 as uuidv4 } from 'uuid';
Expand Down Expand Up @@ -50,6 +50,7 @@ export const FormEditor = ({
const [totalPages, setTotalPages] = useState(0);
const documentRef = useRef<HTMLDivElement>(null);
const [groupNum, setGroupNum] = useState(fieldGroups.size);
const [signatureFieldId, setSignatureFieldId] = useState<string | null>(null);

//colors for group buttons: colors[0] = border/text color, colors[1] = background color
const groupColors = [
Expand Down Expand Up @@ -133,6 +134,24 @@ export const FormEditor = ({
}
};

const handleSetSignature = () => {
const newFieldId = uuidv4();
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This logic is valid, I would create a new component other than DraggableText to represent signatures, especially with the new designs for signature boxes: https://www.figma.com/design/xTNJRHyohsIf714Ba1eWFY/Hi-fi-Wireframes?node-id=5741-1908&m=dev

setSignatureFieldId(newFieldId);
setFormFields({
...formFields,
[pageNum]: new Map([
...formFields[pageNum],
[
newFieldId,
{
position: { x: 0, y: 0, width: 150, height: 50 },
groupId: currentGroup,
},
],
]),
});
};

return (
<Box
background="white"
Expand Down Expand Up @@ -233,6 +252,23 @@ export const FormEditor = ({
>
<div>{TextIcon}</div>
</Button>

<Button
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Selecting this should disable the text box input and make the background of the signature button darker. Not sure if I'm looking at it wrong, but the screenshots look off, as the Text button is still selected.

position="relative"
width="40px"
height="40px"
backgroundColor="#1367EA"
borderRadius="4px"
display="flex"
justifyContent="center"
alignItems="center"
isDisabled={fieldGroups.size == 0 || disableEdit}
border="1px solid #1367EA"
onClick={() => handleSetSignature()}
>
<div>{SignatureIcon}</div>
</Button>

</Box>
<Box
height="474px"
Expand Down
18 changes: 18 additions & 0 deletions apps/web/src/static/icons.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -420,6 +420,24 @@ export const TextIcon = (
</svg>
);

export const SignatureIcon = (
<svg
width="32"
height="32"
viewBox="0 0 32 32"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M7.75929 21.436C7.8042 21.436 7.84911 21.4315 7.89402 21.4248L11.682 20.7592C11.727 20.7502 11.7696 20.73 11.8011 20.6962L21.3486 11.1352C21.3694 11.1144 21.3859 11.0897 21.3972 11.0625C21.4085 11.0353 21.4143 11.0061 21.4143 10.9766C21.4143 10.9472 21.4085 10.918 21.3972 10.8908C21.3859 10.8636 21.3694 10.8389 21.3486 10.8181L17.6055 7.06521C17.5628 7.02249 17.5067 7 17.446 7C17.3854 7 17.3293 7.02249 17.2866 7.06521L7.73909 16.6262C7.70542 16.66 7.68519 16.7005 7.67623 16.7454L7.01158 20.5388C6.96892 20.7884 7.04525 21.0335 7.22265 21.2111C7.37085 21.3573 7.55945 21.436 7.75929 21.436ZM17.9644 17.284C18.5881 16.9499 19.2548 16.8137 19.8911 16.934C20.62 17.0718 21.2361 17.5325 21.6695 18.274C22.3446 19.4291 22.1569 20.5822 21.2532 21.5278C20.8573 21.942 20.3282 22.3176 19.6767 22.6623L19.6701 22.6657L19.6892 22.6716C19.9854 22.7608 20.2992 22.8092 20.6248 22.8117L20.6512 22.8118C22.0266 22.8118 22.9255 22.3132 23.4729 21.2808C23.6829 20.8847 24.1738 20.7341 24.5693 20.9444C24.9648 21.1547 25.1152 21.6463 24.9051 22.0424C24.0654 23.6263 22.6058 24.4358 20.6512 24.4358C19.5772 24.4358 18.5805 24.0968 17.7641 23.5027L17.7403 23.4853L17.7097 23.4959C16.6696 23.8568 15.486 24.1714 14.2104 24.4418L14.16 24.4524C13.0661 24.6829 11.9695 24.8669 11.0259 24.9928C10.582 25.052 10.1743 24.7396 10.1152 24.2951C10.056 23.8505 10.368 23.4422 10.8118 23.383C11.7171 23.2622 12.7741 23.0848 13.8262 22.8631C14.7901 22.6601 15.6958 22.4316 16.5144 22.1787L16.5197 22.1771L16.5099 22.1614C16.1391 21.5648 15.9275 20.9111 15.9211 20.2839L15.9209 20.2545C15.9209 19.1288 16.8118 17.9015 17.9644 17.284ZM19.5903 18.5298C19.3484 18.4841 19.0475 18.5456 18.7293 18.7161C18.0639 19.0726 17.5425 19.7907 17.5425 20.2545C17.5425 20.6651 17.7427 21.16 18.0991 21.6019L18.1044 21.6085L18.132 21.5969C19.0142 21.2229 19.6744 20.8239 20.0673 20.4198L20.0817 20.4048C20.5037 19.9633 20.5634 19.5964 20.27 19.0943C20.066 18.7453 19.8414 18.5773 19.5903 18.5298Z"
fill="white"
/>
</svg>

)

export const PlusSign = (
<svg
width="14"
Expand Down
Loading