Merge pull request #954 from CDLUC3/feature/944/JS-adding-autosave-back-to-answering-questions

Added auto save back to the PlanOverviewQuestionPage component

Author: jupiter007

CHANGELOG.md

@@ -1,5 +1,17 @@
 ### Added
+- Added `autosave` back to the `PlanOverviewQuestionpage` [#944]
 - Hooked up the `Download plan` page and added a `download-narrative` api endpoint [#313]
+
+### Updated
+
+### Fixed
+
+### Removed
+
+### Chore
+====================================================================================================================================
+## All changes above the line happened after the merge to the main branch on Nov 3, 2025
+### Added
 - Added user's org as a filter for the Plan Create (`projects/9/dmp/create`) page, and updated filter text to include `organization` [#735]
   - Fixed filtering on the Plan Create (`projects/9/dmp/create`) page so that it takes search term into consideration when used with checked filters [#735]
   - Moved checkbox filters below search field to make them more noticeable [#735]

app/[locale]/projects/[projectId]/dmp/[dmpid]/s/[sid]/q/[qid]/__tests__/page.spec.tsx

@@ -2247,3 +2247,68 @@ describe('Prevent unload when user has unsaved changes', () => {
     });
   });
 });
+
+describe('Auto save', () => {
+  it('should show saved message after auto-saving changes', async () => {
+    HTMLElement.prototype.scrollIntoView = mockScrollIntoView;
+
+    // Mock window.tinymce
+    window.tinymce = {
+      init: jest.fn(),
+      remove: jest.fn(),
+    };
+
+    mockUseParams.mockReturnValue({ projectId: 1, dmpid: 1, sid: 22, qid: 344 });
+    mockUseRouter.mockReturnValue({
+      push: jest.fn(),
+    });
+
+    (useMeQuery as jest.Mock).mockReturnValue({
+      data: mockMeData,
+      loading: false,
+      error: undefined
+    });
+
+
+    (usePlanQuery as jest.Mock).mockReturnValue({
+      data: mockPlanData,
+      loading: false,
+      error: undefined,
+    });
+
+    (usePublishedQuestionQuery as jest.Mock).mockReturnValue({
+      data: mockCheckboxQuestion,
+      loading: false,
+      error: undefined,
+    });
+
+    (useAnswerByVersionedQuestionIdQuery as jest.Mock).mockReturnValue({
+      data: mockCheckboxAnswer,
+      loading: false,
+      error: undefined,
+    });
+
+    const setTimeoutSpy = jest.spyOn(global, 'setTimeout');
+    await act(async () => {
+      render(
+        <PlanOverviewQuestionPage />
+      );
+    });
+
+    const checkboxGroup = screen.getByTestId('checkbox-group');
+    expect(checkboxGroup).toBeInTheDocument();
+    const checkboxes = within(checkboxGroup).getAllByRole('checkbox');
+    const alexCheckbox = checkboxes.find(
+      (checkbox) => (checkbox as HTMLInputElement).value === 'Alex'
+    );
+
+    fireEvent.click(alexCheckbox!);
+
+    const lastSavedText = screen.getByText('messages.unsavedChanges');
+    expect(lastSavedText).toBeInTheDocument();
+    // Verify timeout scheduled
+    expect(setTimeoutSpy).toHaveBeenCalledWith(expect.any(Function), 3000);
+
+    setTimeoutSpy.mockRestore();
+  });
+});

app/[locale]/projects/[projectId]/dmp/[dmpid]/s/[sid]/q/[qid]/page.tsx

@@ -186,6 +186,10 @@ const PlanOverviewQuestionPage: React.FC = () => {
   const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
   // Track whether there are unsaved changes
   const [hasUnsavedChanges, setHasUnsavedChanges] = useState<boolean>(false);
+  const [isAutoSaving, setIsAutoSaving] = useState<boolean>(false);
+  const [lastSavedAt, setLastSavedAt] = useState<Date | null>(null);
+  const [currentTime, setCurrentTime] = useState(new Date());
+  const autoSaveTimeoutRef = useRef<NodeJS.Timeout>();
 
   // Localization
   const Global = useTranslations('Global');
@@ -366,6 +370,7 @@ const PlanOverviewQuestionPage: React.FC = () => {
       ...prev,
       otherAffiliationName: value
     }));
+    setHasUnsavedChanges(true);
   };
 
   // Update the selected radio value when user selects different option
@@ -750,7 +755,11 @@ const PlanOverviewQuestionPage: React.FC = () => {
   };
 
   // Call Server Action updateAnswerAction or addAnswerAction to save answer
-  const addAnswer = async () => {
+  const addAnswer = async (isAutoSave = false) => {
+    if (isAutoSave) {
+      setIsAutoSaving(true);
+    }
+
     const jsonPayload = getAnswerJson();
     // Check is answer already exists. If so, we want to call an update mutation rather than add
     const isUpdate = Boolean(answerData?.answerByVersionedQuestionId);
@@ -785,6 +794,11 @@ const PlanOverviewQuestionPage: React.FC = () => {
             path: routePath('projects.dmp.versionedQuestion.detail', { projectId, dmpId, versionedSectionId, versionedQuestionId })
           }
         });
+      } finally {
+        if (isAutoSave) {
+          setIsAutoSaving(false);
+          setHasUnsavedChanges(false);
+        }
       }
     }
     return {
@@ -804,6 +818,11 @@ const PlanOverviewQuestionPage: React.FC = () => {
     if (isSubmitting) return;
     setIsSubmitting(true);
 
+    // Clear any pending auto-save
+    if (autoSaveTimeoutRef.current) {
+      clearTimeout(autoSaveTimeoutRef.current);
+    }
+
     const result = await addAnswer();
 
     if (!result.success) {
@@ -825,11 +844,32 @@ const PlanOverviewQuestionPage: React.FC = () => {
         // Show user a success message and redirect back to the Section page
         showSuccessToast();
         router.push(routePath('projects.dmp.versionedSection', { projectId, dmpId, versionedSectionId }))
-
       }
     }
   };
 
+  // Helper function to format the last saved messaging
+  const getLastSavedText = () => {
+
+    if (isAutoSaving) {
+      return `${Global('buttons.saving')}...`;
+    }
+
+    if (!lastSavedAt) {
+      return hasUnsavedChanges ? t('messages.unsavedChanges') : '';
+    }
+
+    const diffInMinutes = Math.floor(Math.abs(currentTime.getTime() - lastSavedAt.getTime()) / (1000 * 60));
+
+    if (diffInMinutes === 0) {
+      return t('messages.savedJustNow');
+    } else if (diffInMinutes === 1) {
+      return t('messages.lastSavedOneMinuteAgo');
+    } else {
+      return t('messages.lastSaves', { minutes: diffInMinutes });
+    }
+  };
+
   // Get parsed JSON from question, and set parsed, question and questionType in state
   useEffect(() => {
     if (selectedQuestion) {
@@ -934,20 +974,65 @@ const PlanOverviewQuestionPage: React.FC = () => {
 
   }, [answerData, questionType]);
 
-  // Warn user of unsaved changes if they try to leave the page
+
+  // Auto-save logic
   useEffect(() => {
+    if (!hasUnsavedChanges) return;
+    if (!versionedQuestionId || !versionedSectionId || !question) return;
+
+    // Set a timeout to auto-save after 3 seconds of inactivity
+    autoSaveTimeoutRef.current = setTimeout(async () => {
+      const { success } = await addAnswer(true);
+      if (success) {
+        setLastSavedAt(new Date());
+        setHasUnsavedChanges(false);
+      }
+    }, 3000);
+
+    return () => clearTimeout(autoSaveTimeoutRef.current);
+  }, [formData, versionedQuestionId, versionedSectionId, question, hasUnsavedChanges]);
+
+
+
+  // Auto-save on window blur and before unload
+  useEffect(() => {
+    const handleWindowBlur = () => {
+      if (hasUnsavedChanges && !isAutoSaving) {
+        if (autoSaveTimeoutRef.current) {
+          clearTimeout(autoSaveTimeoutRef.current);
+        }
+        addAnswer(true);
+      }
+    };
+
     const handleBeforeUnload = (e: BeforeUnloadEvent) => {
       if (hasUnsavedChanges) {
         e.preventDefault();
         e.returnValue = ''; // Required for Chrome/Firefox to show the confirm dialog
       }
     };
 
+    window.addEventListener('blur', handleWindowBlur);
     window.addEventListener('beforeunload', handleBeforeUnload);
+
     return () => {
+      window.removeEventListener('blur', handleWindowBlur);
       window.removeEventListener('beforeunload', handleBeforeUnload);
+      if (autoSaveTimeoutRef.current) {
+        clearTimeout(autoSaveTimeoutRef.current);
+      }
     };
-  }, [hasUnsavedChanges]);
+  }, [hasUnsavedChanges, isAutoSaving]);
+
+
+  // Set up an interval to update the current time every minute
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setCurrentTime(new Date());
+    }, 60 * 1000); // Update every minute
+
+    return () => clearInterval(interval);
+  }, []);
 
   useEffect(() => {
     // Set whether current user can add comments based on their role and plan data
@@ -1159,7 +1244,11 @@ const PlanOverviewQuestionPage: React.FC = () => {
 
                   </div>
                   {parsed && questionField}
-
+                </div>
+                <div className="lastSaved mt-5"
+                  aria-live="polite"
+                  role="status">
+                  {getLastSavedText()}
                 </div>
               </Card>