-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Browse files
Browse the repository at this point in the history
* Imported starter code and fixed typescript bugs * working on bugs * pdf viewer working (functionality broken tho) * fixed text boxes being behind pdf * fixed coordinate system * completely broken but replaced react-draggable with react-rnd * worked on frontend * broken but fixed some bugs * multiple boxes + grouping works * Update AssignInput.tsx * Made some front-end changes to match figma file * fixed zooming in and added overflow scroll to page * fixed frontend to match figma more * fixes to make it better accuracy to figma * Update AssignInput.tsx * Clean up form editor and make draggable text work * Finish form editor with draggable text * fix imports * test * refactored to support multiple pages and complete styling + fixed bugs * prettier fix * update name * update nav link * addressed comments * integrated with create template pages did not integrate with the summary page however. * persist form fields throughout * Remove console log * done * nvm --------- Co-authored-by: Gayatri-K26 <[email protected]> Co-authored-by: Kaiyang Zheng <[email protected]>
- Loading branch information
3 people
authored
Dec 4, 2024
1 parent
72f40df
commit c73d3b1
Showing
20 changed files
with
735 additions
and
57 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Binary file not shown.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
29 changes: 29 additions & 0 deletions
29
apps/web/src/components/createFormTemplate/createFormTemplateEditor/AssignInput.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> | ||
| ); | ||
| }; |
46 changes: 46 additions & 0 deletions
46
apps/web/src/components/createFormTemplate/createFormTemplateEditor/DraggableSignature.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> | ||
| ); | ||
| } |
63 changes: 63 additions & 0 deletions
63
apps/web/src/components/createFormTemplate/createFormTemplateEditor/DraggableText.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> | ||
| ); | ||
| } |
Oops, something went wrong.