diff --git a/package-lock.json b/package-lock.json index 7f1ffd9..28653c4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -41,6 +41,7 @@ "react-leaflet": "^4.2.1", "react-router-dom": "^6.14.2", "react-scripts": "5.0.1", + "react-signature-canvas": "^1.0.6", "react-table": "^7.8.0", "recharts": "^2.7.2", "typescript": "^4.9.5", @@ -53,6 +54,7 @@ "@types/leaflet": "^1.9.3", "@types/react-date-range": "^1.4.4", "@types/react-gauge-chart": "^0.4.0", + "@types/react-signature-canvas": "^1.0.2", "autoprefixer": "^10.4.14", "postcss": "^8.4.24", "tailwindcss": "^3.3.2" @@ -4972,6 +4974,16 @@ "@types/react": "*" } }, + "node_modules/@types/react-signature-canvas": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/@types/react-signature-canvas/-/react-signature-canvas-1.0.2.tgz", + "integrity": "sha512-uDHDoo2JM/9qYS+U7PRKDLBgOnQOOUEkDdXjCxBvI19fWtOLqXisrjiquPu+enu5iu2oWIfU7cVhn1QJZPkLTg==", + "dev": true, + "dependencies": { + "@types/react": "*", + "@types/signature_pad": "*" + } + }, "node_modules/@types/react-transition-group": { "version": "4.4.6", "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.6.tgz", @@ -5029,6 +5041,12 @@ "@types/node": "*" } }, + "node_modules/@types/signature_pad": { + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/@types/signature_pad/-/signature_pad-2.3.2.tgz", + "integrity": "sha512-dDfWIgRcdzAaeVOpLRmLHIumGwc5inSD4Dj2Duis3yUEoSADZECLJHKkUQphbaANQ7kSC2bkf1JzyBPSmTlrPQ==", + "dev": true + }, "node_modules/@types/sockjs": { "version": "0.3.33", "resolved": "https://registry.npmjs.org/@types/sockjs/-/sockjs-0.3.33.tgz", @@ -15961,6 +15979,20 @@ } } }, + "node_modules/react-signature-canvas": { + "version": "1.0.6", + "resolved": "https://registry.npmjs.org/react-signature-canvas/-/react-signature-canvas-1.0.6.tgz", + "integrity": "sha512-NoMHomYu9HxFeLjUGbIeV9abPdWSROfFxFNDekGdwmmaIx+w5ziOEiU2C34X0Ao4GxFnwqyUy/BpYlA4lCD1CA==", + "dependencies": { + "signature_pad": "^2.3.2", + "trim-canvas": "^0.1.0" + }, + "peerDependencies": { + "prop-types": "^15.5.8", + "react": "0.14 - 18", + "react-dom": "0.14 - 18" + } + }, "node_modules/react-smooth": { "version": "2.0.3", "resolved": "https://registry.npmjs.org/react-smooth/-/react-smooth-2.0.3.tgz", @@ -16844,6 +16876,11 @@ "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz", "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==" }, + "node_modules/signature_pad": { + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/signature_pad/-/signature_pad-2.3.2.tgz", + "integrity": "sha512-peYXLxOsIY6MES2TrRLDiNg2T++8gGbpP2yaC+6Ohtxr+a2dzoaqWosWDY9sWqTAAk6E/TyQO+LJw9zQwyu5kA==" + }, "node_modules/sisteransi": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/sisteransi/-/sisteransi-1.0.5.tgz", @@ -17691,6 +17728,11 @@ "node": ">=8" } }, + "node_modules/trim-canvas": { + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/trim-canvas/-/trim-canvas-0.1.2.tgz", + "integrity": "sha512-nd4Ga3iLFV94mdhW9JFMLpQbHUyCQuhFOD71PEAt1NjtMD5wbZctzhX8c3agHNybMR5zXD1XTGoIEWk995E6pQ==" + }, "node_modules/tryer": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/tryer/-/tryer-1.0.1.tgz", diff --git a/package.json b/package.json index 0e57cc1..4aabaea 100644 --- a/package.json +++ b/package.json @@ -37,6 +37,7 @@ "react-leaflet": "^4.2.1", "react-router-dom": "^6.14.2", "react-scripts": "5.0.1", + "react-signature-canvas": "^1.0.6", "react-table": "^7.8.0", "recharts": "^2.7.2", "typescript": "^4.9.5", @@ -73,6 +74,7 @@ "@types/leaflet": "^1.9.3", "@types/react-date-range": "^1.4.4", "@types/react-gauge-chart": "^0.4.0", + "@types/react-signature-canvas": "^1.0.2", "autoprefixer": "^10.4.14", "postcss": "^8.4.24", "tailwindcss": "^3.3.2" diff --git a/src/Components/Helper/SignatureComponent.tsx b/src/Components/Helper/SignatureComponent.tsx new file mode 100644 index 0000000..abe196f --- /dev/null +++ b/src/Components/Helper/SignatureComponent.tsx @@ -0,0 +1,51 @@ +import React, { useEffect, useRef } from 'react'; +import SignatureCanvas from 'react-signature-canvas'; +import Button from '@mui/material/Button'; +import { styled } from '@mui/material/styles'; +import { FormLabel, Grid } from '@mui/material'; + + +type Props={ + signature:any; + setSignature: (value: any) => void; +} +const SignatureComponent = ({signature,setSignature}:Props) => { + const sigCanvas = useRef(); + + const clear = () => sigCanvas.current.clear(); +// setSignature(sigCanvas.current.toDataURL()); + + const save = () => { + console.log("ajsdjby",sigCanvas.current.toDataURL()) + setSignature(sigCanvas.current.toDataURL()); + }; + + const StyledCanvas = styled(SignatureCanvas)({ + border: '5px solid #888888' + }); + + return ( + <> + + + + + + + + + + + + + ); +}; + +export default SignatureComponent; diff --git a/src/Components/PatientForm/PatientForm.tsx b/src/Components/PatientForm/PatientForm.tsx index 2725462..9af139a 100644 --- a/src/Components/PatientForm/PatientForm.tsx +++ b/src/Components/PatientForm/PatientForm.tsx @@ -4,6 +4,7 @@ import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; import Footer from '../Footer'; import Header from '../Header'; import { + Box, Button, Checkbox, FormControlLabel, @@ -33,6 +34,7 @@ import OtherDetails8 from './OtherDetails8'; import PatientImageMarker from '../ImageMarker/PatientImageMarker'; import ViewPatientImageMarker from '../ImageMarker/ViewPatientImageMarker'; import AlertDialog from '../Helper/AlertDialogBox'; +import SignatureComponent from '../Helper/SignatureComponent'; const Accordion = styled((props: AccordionProps) => ( @@ -78,7 +80,7 @@ export default function PatientForm({ type }: Props) { const [alertProps, setAlertProps] = React.useState({}); const [expanded, setExpanded] = React.useState('panel1'); const [isChecked, setIsChecked] = React.useState(false); - const [signature, setSignature] = React.useState(''); + const [signature, setSignature] = React.useState(); const [section1Data, setSection1Data] = React.useState({}); const [section2Data, setSection2Data] = React.useState({}); const [section3Data, setSection3Data] = React.useState({}); @@ -347,6 +349,7 @@ export default function PatientForm({ type }: Props) { recreationalActivities: section7Data, otherDetails: section8Data, injuryPainDetails: saved.entries, + signature: signature, }; // Create a copy of the existing data array and push the new patient data @@ -410,7 +413,8 @@ export default function PatientForm({ type }: Props) { JSON.parse(localStorage.getItem('patientData')) : []; - console.log('dfsdfdsf', patientData); + console.log("dsfdsfsa",signature) + return ( <> @@ -629,6 +633,7 @@ export default function PatientForm({ type }: Props) { + - - { - setSignature(event.target.value); - }} - /> + + + + + Signature: + + + + + Please verify your signature here: + + + + + + + - - + + + + {/* */}