Merge pull request #2890 from OneCommunityGlobal/Jingyi_Add_intangibl…

…e_time_reminder/confirmation_modal Jingyi_Add intangible time reminder/confirmation modal
OneCommunityGlobal · Dec 7, 2024 · 905764f · 905764f
2 parents 032d74b + 18ec26a
commit 905764f
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 38 deletions.
diff --git a/src/components/Timelog/TimeEntryForm/TimeEntryForm.jsx b/src/components/Timelog/TimeEntryForm/TimeEntryForm.jsx
@@ -15,13 +15,12 @@ import {
   ModalFooter,
 } from 'reactstrap';
 import moment from 'moment-timezone';
-import { isEmpty, isEqual } from 'lodash';
+import { isEmpty, isEqual, set } from 'lodash';
 import { Editor } from '@tinymce/tinymce-react';
 import { toast } from 'react-toastify';
 import ReactTooltip from 'react-tooltip';
 import { postTimeEntry, editTimeEntry, getTimeEntriesForWeek } from '../../../actions/timeEntries';
 import { getUserProfile } from 'actions/userProfile';
-
 import AboutModal from './AboutModal';
 import TangibleInfoModal from './TangibleInfoModal';
 import ReminderModal from './ReminderModal';
@@ -204,13 +203,7 @@ const TimeEntryForm = props => {
         if (+target.value < 0 || +target.value > 59) return;
         return setFormValues(formValues => ({ ...formValues, minutes: +target.value }));
       case 'isTangible':
-        // Trigger modal on attempting to check the box
-        if (target.checked && !formValues.isTangible) {
-            setTimelogConfirmationModalVisible(true);
-        } else {
-            setFormValues(formValues => ({ ...formValues, isTangible: target.checked }));
-        }
-        break;
+        return setFormValues(formValues => ({ ...formValues, isTangible: target.checked }));
       default:
         return setFormValues(formValues => ({ ...formValues, [target.name]: target.value }));
     }
@@ -241,15 +234,6 @@ const TimeEntryForm = props => {
     }));
   };
 
-  // Function to handle modal confirmation
-  const handleConfirm = () => {
-    setFormValues(prev => ({ ...prev, isTangible: true }));
-    setTimelogConfirmationModalVisible(false);
-  };
-
-  const handleCancel = () => {
-    setTimelogConfirmationModalVisible(false);
-  };
 
   const validateForm = isTimeModified => {
     const errorObj = {};
@@ -311,28 +295,37 @@ const TimeEntryForm = props => {
     if (closed === true && isOpen) toggle();
   };
 
-  const handleSubmit = async event => {
-    event.preventDefault();
+  const handleSubmit = async (event) => {
+    if (event) {
+      event.preventDefault();
+    }
     setSubmitting(true);
-
+  
     if (edit && isEqual(formValues, initialFormValues)) {
       toast.info(`Nothing is changed for this time entry`);
       setSubmitting(false);
       return;
     }
+
+    if (!edit && !formValues.isTangible) {
+      setTimelogConfirmationModalVisible(true);
+      setSubmitting(false);
+      return;
+    }
+
+    await submitTimeEntry();
+  };
 
+  const submitTimeEntry = async () => {
     const { hours: formHours, minutes: formMinutes } = formValues;
-
+    const timeEntry = { ...formValues };
     const isTimeModified = edit && (initialHours !== formHours || initialMinutes !== formMinutes);
-
+  
     if (!validateForm(isTimeModified)) {
       setSubmitting(false);
       return;
     }
-
-    // Construct the timeEntry object
-    const timeEntry = { ...formValues };
-
+
     try {
       if (edit) {
         await props.editTimeEntry(data._id, timeEntry, initialDateOfWork);
@@ -382,7 +375,16 @@ const TimeEntryForm = props => {
     } catch (error) {
       toast.error(`An error occurred while attempting to submit your time entry. Error: ${error}`);
       setSubmitting(false);
-    }
+    };
+  };
+
+  const handleTangibleTimelogConfirm = async () => {
+    setTimelogConfirmationModalVisible(false);
+    await submitTimeEntry();
+  };
+
+  const handleTangibleTimelogCancel = () => {
+    setTimelogConfirmationModalVisible(false);
   };
 
   const tangibleInfoModalToggle = e => {
@@ -705,12 +707,12 @@ const TimeEntryForm = props => {
         cancelChange={cancelChange}
         darkMode={darkMode}
       />
-      <TimeLogConfirmationModal
+      <TimeLogConfirmationModal 
         isOpen={isTimelogConfirmationModalVisible}
-        toggleModal={handleCancel}
-        onConfirm={handleConfirm}
-        onReject={handleCancel}
-        onIntangible={handleCancel}
+        toggleModal={handleTangibleTimelogCancel}
+        onConfirm={handleTangibleTimelogConfirm}
+        onReject={handleTangibleTimelogCancel}
+        onIntangible={handleTangibleTimelogConfirm}
         darkMode={darkMode}
       />
     </>

diff --git a/src/components/Timelog/TimeEntryForm/TimeLogConfirmationModal.jsx b/src/components/Timelog/TimeEntryForm/TimeLogConfirmationModal.jsx
@@ -5,16 +5,16 @@ function TimeLogConfirmationModal({ isOpen, toggleModal, onConfirm, onReject, on
     const [userChoice, setUserChoice] = useState('');
 
     const handleUserAction = (choice) => {
-        setUserChoice(choice);
+        setUserChoice(choice); 
         toggleModal();
 
         // Call corresponding action based on user's choice
         if (choice === 'confirmed') {
-            onConfirm(); // Process if confirmed
+            onConfirm(); 
         } else if (choice === 'rejected') {
-            onReject(); // Handle rejection
+            onReject();
         } else if (choice === 'intangible') {
-            onIntangible(); // Handle intangible time
+            onIntangible();
         }
     };
 
@@ -31,7 +31,7 @@ function TimeLogConfirmationModal({ isOpen, toggleModal, onConfirm, onReject, on
                 <Button color="danger" onClick={() => handleUserAction('rejected')} style={{ flex: 1, marginRight: '10px' }}>
                     Oops, didn’t do that! Take me back.
                 </Button>
-                <Button color="info" onClick={() => handleUserAction('intangible')} style={{ flex: 1 }}>
+                <Button color="info" onClick={() => handleUserAction('intangible')} style={{ flex: 1, marginRight: '10px' }}>
                     Time is meant as Intangible. Please proceed.
                 </Button>
             </ModalFooter>