add note, edit

hack4impact-upenn · Apr 28, 2024 · 1bb148e · 1bb148e
1 parent 4b234f1
commit 1bb148e
Show file tree

Hide file tree

Showing 9 changed files with 346 additions and 107 deletions.
diff --git a/client/src/donorProfile/DateInfoBox.tsx b/client/src/donorProfile/DateInfoBox.tsx
@@ -1,47 +1,56 @@
 import React from 'react';
 import { Box, Typography } from '@mui/material';
 import BoxWithShadow from './BoxWithShadow'; // Assuming you have exported it from the file above
-
-interface IDonor {
-  _id: string;
-  contact_name: string;
-  contact_email: string;
-  contact_address: string;
-  contact_phone: string;
-  donor_group: string;
-  registered_date: Date | null;
-  last_donation_date: Date | null;
-  last_communication_date: Date | null;
-  type: string;
-  comments: string;
-}
+import IDonor from '../util/types/donor';
 
 interface ProfileInfoProps {
   donatorData: IDonor | null;
 }
 
 function DateInfoBox({ donatorData }: ProfileInfoProps) {
+  const formatDate = (time: Date | undefined | null | string): string => {
+    if (time instanceof Date) {
+      const year = time.getFullYear().toString();
+      const month = (time.getMonth() + 1).toString().padStart(2, '0'); // Month is zero-indexed, so add 1
+      const day = time.getDate().toString().padStart(2, '0');
+      return `${year}-${month}-${day}`;
+    } if (typeof time === 'string') {
+      const date = new Date(time);
+      const year = date.getFullYear().toString();
+      const month = (date.getMonth() + 1).toString().padStart(2, '0'); // Month is zero-indexed, so add 1
+      const day = date.getDate().toString().padStart(2, '0');
+      return `${year}-${month}-${day}`;
+    }
+    return '';
+  };
+
   return (
-    <BoxWithShadow>
-      <Typography variant="body1" gutterBottom>
-        REGISTERED DATE
+    <Box
+      sx={{
+        boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.2)',
+        borderRadius: 2,
+        p: 2,
+      }}
+    >
+      <Typography variant="body1" gutterBottom sx={{ fontWeight: 'bold' }}>
+        Registered Date
       </Typography>
       <Typography variant="body1" gutterBottom>
-        {donatorData?.registered_date?.toLocaleString()}
+        {formatDate(donatorData?.registered_date)}
       </Typography>
-      <Typography variant="body1" gutterBottom>
-        RECENT DONATION
+      <Typography variant="body1" gutterBottom sx={{ fontWeight: 'bold' }}>
+        Recent Donation
       </Typography>
       <Typography variant="body1" gutterBottom>
-        {donatorData?.last_donation_date?.toLocaleString()}
+        {formatDate(donatorData?.last_donation_date)}
       </Typography>
-      <Typography variant="body1" gutterBottom>
-        LAST COMMUNICATION
+      <Typography variant="body1" gutterBottom sx={{ fontWeight: 'bold' }}>
+        Last Communication
       </Typography>
       <Typography variant="body1" gutterBottom>
-        {donatorData?.last_communication_date?.toLocaleString()}
+        {formatDate(donatorData?.last_communication_date)}
       </Typography>
-    </BoxWithShadow>
+    </Box>
   );
 }
 

diff --git a/client/src/donorProfile/DonorNoteBox.tsx b/client/src/donorProfile/DonorNoteBox.tsx
@@ -0,0 +1,100 @@
+import React, { useState, useEffect } from 'react';
+import {
+  Box,
+  Typography,
+  Button,
+  DialogTitle,
+  Dialog,
+  DialogContent,
+  DialogActions,
+  TextField,
+} from '@mui/material';
+import IDonor from '../util/types/donor';
+import { postData } from '../util/api';
+
+interface ProfileInfoProps {
+  donatorData: IDonor | null;
+}
+
+function DonorNoteBox({ donatorData }: ProfileInfoProps) {
+
+  const [open, setOpen] = useState(false); // State to manage dialog visibility
+  const [noteText, setNoteText] = useState<string>(''); // State to capture note text
+
+  const handleOpen = () => {
+    if (donatorData != null) {
+      setNoteText(donatorData.note);
+    }
+    setOpen(true);
+  };
+
+  const handleClose = () => {
+    setOpen(false);
+  };
+
+  const handleSaveNote = () => {
+    if (donatorData != null) {
+      // eslint-disable-next-line no-underscore-dangle
+      const data = { id: donatorData._id, note: noteText };
+      postData('donor/note', data)
+      .then((response2) => {
+        console.log(response2);
+    })
+    .catch((error) => {
+        console.log(error);
+    });
+    }
+    handleClose(); // Close dialog after saving note
+  };
+
+  return (
+    <Box
+      sx={{
+        maxWidth: 400,
+        maxHeight: 300,
+        overflow: 'auto',
+        boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.2)',
+        borderRadius: 2,
+        p: 2,
+      }}
+    >
+      <Typography variant="body1" gutterBottom sx={{ fontWeight: 'bold' }}>
+        Note
+      </Typography>
+      <Typography
+        variant="body1"
+        gutterBottom
+        sx={{ maxHeight: 120, overflowY: 'auto', marginBottom: '10px' }}
+      >
+        {donatorData?.note}
+      </Typography>
+      <Button variant="outlined" onClick={handleOpen}>
+        Take Note
+      </Button>
+      <Dialog open={open} onClose={handleClose}>
+        <DialogTitle>Take Note</DialogTitle>
+        <DialogContent>
+          <TextField
+            fullWidth
+            multiline
+            rows={4}
+            variant="outlined"
+            placeholder="Type your note here..."
+            value={noteText}
+            onChange={(e) => setNoteText(e.target.value)}
+          />
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={handleClose} color="secondary">
+            Cancel
+          </Button>
+          <Button onClick={handleSaveNote} color="primary">
+            Save
+          </Button>
+        </DialogActions>
+      </Dialog>
+    </Box>
+  );
+}
+
+export default DonorNoteBox;
diff --git a/client/src/donorProfile/DonorProfilePage.tsx b/client/src/donorProfile/DonorProfilePage.tsx
@@ -4,21 +4,9 @@ import { Box, Button, TextField, MenuItem, Popover, Grid } from '@mui/material';
 import { useParams } from 'react-router-dom';
 import ProfileInfo from './ProfileInfo';
 import DateInfoBox from './DateInfoBox';
-import { useData } from '../util/api';
-
-interface IDonor {
-  _id: string;
-  contact_name: string;
-  contact_email: string;
-  contact_address: string;
-  contact_phone: string;
-  donor_group: string;
-  registered_date: Date;
-  last_donation_date: Date;
-  last_communication_date: Date;
-  type: string;
-  comments: string;
-}
+import DonorNoteBox from './DonorNoteBox';
+import IDonor from '../util/types/donor';
+import { useData, postData } from '../util/api';
 
 function DonorProfilePage() {
   const [anchorEl, setAnchorEl] = useState(null);
@@ -40,10 +28,28 @@ function DonorProfilePage() {
   useEffect(() => {
     const data = donator?.data || null;
     setDonatorData(data);
+    setName(data?.contact_name);
+    setEmail(data?.contact_email);
+    setPhone(data?.contact_phone);
+    setAddress(data?.contact_address);
+    setSelectedDonorGroup(data?.donor_group);
+    setOrgName(data?.org_name);
+    setOrgEmail(data?.org_email);
+    setOrgAddress(data?.org_address);
   }, [donator]);
 
   const handleClick = (event: any) => {
     setAnchorEl(event.currentTarget);
+    if (donatorData != null) {
+      setName(donatorData.contact_name);
+      setEmail(donatorData.contact_email);
+      setPhone(donatorData.contact_phone);
+      setAddress(donatorData.contact_address);
+      setSelectedDonorGroup(donatorData.donor_group);
+      setOrgName(donatorData.org_name);
+      setOrgEmail(donatorData.org_email);
+      setOrgAddress(donatorData.org_address);
+    }
   };
 
   const handleClose = () => {
@@ -57,11 +63,37 @@ function DonorProfilePage() {
     setOrgAddress('');
     setSelectedDonorGroup('');
     setSelectedDonorType('');
-    setConfirmDisabled(true); // Reset confirm button state
+    setConfirmDisabled(true);
   };
 
   const handleConfirm = () => {
     // update donor
+    const updateDonor = {
+      donor_id: donatorData._id,
+      contact_name: name,
+      contact_email: email,
+      contact_address: address,
+      contact_phone: phone,
+      donor_group: selectedDonorGroup,
+      registered_date: donatorData?.registered_date,
+      last_donation_date: donatorData?.last_donation_date,
+      last_communication_date: donatorData?.last_communication_date,
+      type: donatorData?.type,
+      comments: donatorData?.comments,
+      org_address: orgAddress,
+      org_email: orgEmail,
+      org_name: orgName,
+    };
+
+    postData('donor/edit', updateDonor)
+      .then((response2) => {
+        // Handle the response here
+        console.log(response2);
+      })
+      .catch((error) => {
+        // Handle the error here
+        console.log(error);
+      });
     handleClose(); // Close the popover after confirming changes
   };
 
@@ -71,8 +103,7 @@ function DonorProfilePage() {
       email !== '' &&
       phone !== '' &&
       address !== '' &&
-      selectedDonorGroup !== '' &&
-      selectedDonorType !== ''
+      selectedDonorGroup !== ''
     );
   };
 
@@ -87,7 +118,10 @@ function DonorProfilePage() {
     <Box sx={{ p: 3 }}>
       <Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 3 }}>
         <ProfileInfo donatorData={donatorData} />
-        <DateInfoBox donatorData={donatorData} />
+        <Box sx={{ display: 'flex', alignItems: 'flex-start', gap: 2 }}>
+          <DonorNoteBox donatorData={donatorData} />
+          <DateInfoBox donatorData={donatorData} />
+        </Box>
       </Box>
 
       {/* Buttons */}
@@ -163,7 +197,7 @@ function DonorProfilePage() {
               <Grid item xs={6}>
                 <TextField
                   select
-                  label="Donor Group"
+                  label="Donor Group*"
                   value={selectedDonorGroup}
                   onChange={(e) => {
                     setSelectedDonorGroup(e.target.value);
@@ -181,50 +215,38 @@ function DonorProfilePage() {
                   <MenuItem value="Gov/Municipal">Gov/Municipal</MenuItem>
                 </TextField>
               </Grid>
-              <Grid item xs={6}>
-                <TextField
-                  select
-                  label="Donation Type"
-                  value={selectedDonorType}
-                  onChange={(e) => {
-                    setSelectedDonorType(e.target.value);
-                    handleFieldChange();
-                  }}
-                  fullWidth
-                  sx={{ mb: 2 }}
-                >
-                  <MenuItem value="Donation">Donation</MenuItem>
-                  <MenuItem value="Sponsor">Sponsor</MenuItem>
-                  <MenuItem value="Grant">Grant</MenuItem>
-                </TextField>
-              </Grid>
-              <Grid item xs={6}>
-                <TextField
-                  label="Organization name"
-                  value={orgName}
-                  onChange={(e) => setOrgName(e.target.value)}
-                  fullWidth
-                  sx={{ mb: 2 }}
-                />
-              </Grid>
-              <Grid item xs={6}>
-                <TextField
-                  label="Organization email"
-                  value={orgEmail}
-                  onChange={(e) => setOrgEmail(e.target.value)}
-                  fullWidth
-                  sx={{ mb: 2 }}
-                />
-              </Grid>
-              <Grid item xs={6}>
-                <TextField
-                  label="Organization address"
-                  value={orgAddress}
-                  onChange={(e) => setOrgAddress(e.target.value)}
-                  fullWidth
-                  sx={{ mb: 2 }}
-                />
-              </Grid>
+              {donatorData?.donor_group !== 'Individual' &&
+              donatorData?.donor_group !== 'Board Member' ? (
+                <>
+                  <Grid item xs={6}>
+                    <TextField
+                      label="Organization name"
+                      value={orgName}
+                      onChange={(e) => setOrgName(e.target.value)}
+                      fullWidth
+                      sx={{ mb: 2 }}
+                    />
+                  </Grid>
+                  <Grid item xs={6}>
+                    <TextField
+                      label="Organization email"
+                      value={orgEmail}
+                      onChange={(e) => setOrgEmail(e.target.value)}
+                      fullWidth
+                      sx={{ mb: 2 }}
+                    />
+                  </Grid>
+                  <Grid item xs={6}>
+                    <TextField
+                      label="Organization address"
+                      value={orgAddress}
+                      onChange={(e) => setOrgAddress(e.target.value)}
+                      fullWidth
+                      sx={{ mb: 2 }}
+                    />
+                  </Grid>
+                </>
+              ) : null}
             </Grid>
             <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
               <Button variant="outlined" onClick={handleClose}>