draw signature feature

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",

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"

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<any>();
+  
+  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 (
+    <>   
+        <Grid item sx={{border:'1px solid #888888',borderRadius:2, width:'250px', height:'110px',marginLeft:'10px'}}>
+            <StyledCanvas
+                ref={sigCanvas}
+                canvasProps={{
+                className: 'signatureCanvas',
+                height:'110px',
+                width:'250px'
+                }}
+            />
+        </Grid>
+        <Grid  container flexDirection={'row'}  sx={{ marginTop:'10px'}}>
+            <Grid item sx={{marginLeft:'10px'}}>
+                <Button variant="contained" onClick={clear}>Clear</Button>
+            </Grid>
+            <Grid item sx={{marginLeft:'20px'}}>
+                <Button variant="contained" onClick={save}>Save</Button>
+            </Grid>
+        </Grid>
+    </>
+  );
+};
+
+export default SignatureComponent;

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) => (
   <MuiAccordion disableGutters elevation={0} square {...props} />
@@ -78,7 +80,7 @@ export default function PatientForm({ type }: Props) {
   const [alertProps, setAlertProps] = React.useState<any>({});
   const [expanded, setExpanded] = React.useState<string | false>('panel1');
   const [isChecked, setIsChecked] = React.useState(false);
-  const [signature, setSignature] = React.useState('');
+  const [signature, setSignature] = React.useState<any>();
   const [section1Data, setSection1Data] = React.useState<any>({});
   const [section2Data, setSection2Data] = React.useState<any>({});
   const [section3Data, setSection3Data] = React.useState<any>({});
@@ -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) {
             </Accordion>
 
             <Grid container>
+              
               <Grid item xs={12} className='collapsable-form-style-multiline'>
                 <FormGroup sx={{ marginTop: 3 }}>
                   <FormControlLabel
@@ -644,27 +649,34 @@ export default function PatientForm({ type }: Props) {
                 </FormGroup>
               </Grid>
 
-              <Grid item xs={6} className='collapsable-form-style'>
+              <Grid item xs={12}  >
-                <TextField
+              
-                  disabled={type == 'display'}
+                  <Grid container spacing={2} flexDirection={'row'}>
-                  variant='outlined'
+                    <Grid item className='collapsable-form-style'>
-                  label='SIGNATURE'
+                      <FormLabel>Signature:</FormLabel>
-                  name='treatmentGoal'
+                    <SignatureComponent signature={signature} setSignature={setSignature} />
-                  placeholder='Please type your name'
+                  </Grid>
-                  onChange={(event) => {
+
-                    setSignature(event.target.value);
+                  <Grid item>
-                  }}
+                      <FormLabel sx={{margin:0,padding:0}}>Please verify your signature here:</FormLabel>
-                />
+                      <Box sx={{border:'1px solid black',borderRadius:2,height:'110px',width:'250px'}}>
+                        <img src={signature} style={{height:'110px', width:'250px'}}/>
+                      </Box>
+                  </Grid>
+
                 </Grid>
               </Grid>
-            <Grid>
+
+            </Grid>
+            <Grid container flexDirection={'row-reverse'}>
+              <Grid item>
                   <Button
                     // type="submit"
                     variant='contained'
                     color='primary'
-                sx={{ margin: 5, left: '40%', width: '200px' }}
+                    sx={{ margin: 5, width: '200px' }}
                     disabled={
-                  isChecked == false || signature == '' || type == 'display'
+                      isChecked == false || signature == undefined || type == 'display'
                     }
                     onClick={handleSubmit}
                   >
@@ -672,6 +684,7 @@ export default function PatientForm({ type }: Props) {
                   </Button>
               </Grid>
             </Grid>
+          </Grid>
           {/* </form> */}
         </Paper>
         <Footer />