feat(reports): add delete button to delete daily report

sws2apps · Jun 12, 2023 · af9bba3 · af9bba3
1 parent 36ab8d9
commit af9bba3
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 21 deletions.
diff --git a/src/features/userFieldServiceReports/S4DailyRecord.jsx b/src/features/userFieldServiceReports/S4DailyRecord.jsx
@@ -13,14 +13,13 @@ import S4BibleStudiesField from './S4BibleStudiesField';
 import { UserS4Records } from '../../classes/UserS4Records';
 import { shortDatePickerFormatState } from '../../states/main';
 
-const S4DailyRecord = ({ isOpen, month }) => {
+const S4DailyRecord = ({ isOpen, month, date, setDate }) => {
   const { t } = useTranslation('ui');
 
   const lastDate = new Date(new Date(month).getFullYear(), new Date(month).getMonth() + 1, 0);
 
   const shortDatePickerFormat = useRecoilValue(shortDatePickerFormatState);
 
-  const [date, setDate] = useState(null);
   const [placements, setPlacements] = useState(0);
   const [videos, setVideos] = useState(0);
   const [returnVisits, setReturnVisits] = useState(0);
@@ -48,7 +47,7 @@ const S4DailyRecord = ({ isOpen, month }) => {
 
   useEffect(() => {
     setDate(null);
-  }, [month]);
+  }, [month, setDate]);
 
   return (
     <Collapse

diff --git a/src/features/userFieldServiceReports/S4DailyRecordItem.jsx b/src/features/userFieldServiceReports/S4DailyRecordItem.jsx
@@ -1,5 +1,7 @@
 import { useTranslation } from 'react-i18next';
 import Box from '@mui/material/Box';
+import DeleteIcon from '@mui/icons-material/Delete';
+import IconButton from '@mui/material/IconButton';
 import Typography from '@mui/material/Typography';
 import { BibleStudies } from '../../classes/BibleStudies';
 
@@ -14,7 +16,7 @@ const styles = {
   },
 };
 
-const S4DailyRecord = ({ report }) => {
+const S4DailyRecord = ({ report, handleDeleteDailyRecord }) => {
   const { t } = useTranslation('ui');
 
   const date = new Date(report.month_date).getDate();
@@ -24,23 +26,32 @@ const S4DailyRecord = ({ report }) => {
     return bs.person_name;
   });
 
+  const handleDeleteRecord = async () => {
+    await handleDeleteDailyRecord(report.month_date);
+  };
+
   return (
     <Box sx={{ width: '300px', display: 'flex', gap: '8px' }}>
-      <Typography
-        sx={{
-          backgroundColor: '#3f51b5',
-          color: 'white',
-          width: '50px',
-          height: '50px',
-          padding: '10px',
-          textAlign: 'center',
-          borderRadius: '5px',
-          fontSize: '18px',
-          fontWeight: 'bold',
-        }}
-      >
-        {date}
-      </Typography>
+      <Box sx={{ display: 'flex', gap: '8px', flexDirection: 'column', alignItems: 'center' }}>
+        <Typography
+          sx={{
+            backgroundColor: '#3f51b5',
+            color: 'white',
+            width: '50px',
+            height: '50px',
+            padding: '10px',
+            textAlign: 'center',
+            borderRadius: '5px',
+            fontSize: '18px',
+            fontWeight: 'bold',
+          }}
+        >
+          {date}
+        </Typography>
+        <IconButton aria-label="delete" color="error" onClick={handleDeleteRecord}>
+          <DeleteIcon sx={{ fontSize: '35px' }} />
+        </IconButton>
+      </Box>
 
       <Box sx={{ display: 'flex', flexDirection: 'column', gap: '15px', marginBottom: '25px' }}>
         <Box>

diff --git a/src/pages/UserFieldServiceReport.jsx b/src/pages/UserFieldServiceReport.jsx
@@ -35,6 +35,7 @@ const UserFieldServiceReport = () => {
   const [isSubmitted, setIsSubmitted] = useState(false);
   const [isPending, setIsPending] = useState(true);
   const [isLocked, setIsLocked] = useState(false);
+  const [date, setDate] = useState(null);
 
   const secretaryRole = Setting.cong_role.includes('secretary');
 
@@ -69,6 +70,15 @@ const UserFieldServiceReport = () => {
     setIsSubmitted(currentS4.isSubmitted);
   };
 
+  const handleDeleteDailyRecord = async (report_date) => {
+    const currentReport = await UserS4Records.get(report_date);
+    await UserS4Records.delete(currentReport.report_uid);
+    setDate(null);
+
+    const currentS4 = await UserS4MonthlyReport.get(currentMonth);
+    setDailyRecords(currentS4.reports);
+  };
+
   useEffect(() => {
     if (currentServiceYear !== '') {
       const options = ServiceYear.getMonths(currentServiceYear);
@@ -209,7 +219,7 @@ const UserFieldServiceReport = () => {
           )}
         </Box>
 
-        <S4DailyRecord isOpen={openDailyRecord} month={currentMonth} />
+        <S4DailyRecord isOpen={openDailyRecord} month={currentMonth} date={date} setDate={setDate} />
       </Box>
 
       <UserS4 isOpen={showS4 || isLocked || isSubmitted} isSubmitted={isSubmitted} month={currentMonth} />
@@ -223,7 +233,9 @@ const UserFieldServiceReport = () => {
                   report.videos > 0 ||
                   report.duration !== 0 ||
                   report.returnVisits > 0 ||
-                  report.bibleStudies.length > 0) && <S4DailyRecordItem report={report} />}
+                  report.bibleStudies.length > 0) && (
+                  <S4DailyRecordItem report={report} handleDeleteDailyRecord={handleDeleteDailyRecord} />
+                )}
               </Box>
             );
           })}