Merge pull request #2417 from Marilynn-Stone/track-218

TRACK-218 Update Issues Tab so Notes save

epictrack-web/cypress/support/mocks.ts

@@ -85,6 +85,7 @@ export const generateMockWork = (): Work => ({
   decision_date: faker.date.future().toISOString(),
   first_nation_notes: faker.lorem.sentence(),
   status_notes: faker.lorem.sentence(),
+  issue_notes: faker.lorem.sentence(),
   work_state: faker.lorem.word(),
   project_id: faker.number.int(),
   ministry_id: faker.number.int(),

epictrack-web/src/components/work/WorkForm/__test__/WorkForm.cy.tsx

@@ -197,6 +197,7 @@ const mockWork = {
   work_decision_date: faker.date.future().toISOString(),
   first_nation_notes: faker.lorem.paragraph(),
   status_notes: faker.lorem.paragraph(),
+  issue_notes: faker.lorem.sentence(),
   work_state: WORK_STATE.IN_PROGRESS.value,
   project_id: faker.number.int(),
   ministry_id: faker.number.int(),

epictrack-web/src/components/work/__test__/WorkList.cy.tsx

@@ -62,6 +62,7 @@ const generateMockWork = (): Work => {
     work_decision_date: faker.date.future().toISOString(),
     first_nation_notes: faker.lorem.paragraph(),
     status_notes: faker.lorem.paragraph(),
+    issue_notes: faker.lorem.sentence(),
     work_state: faker.random.word(),
     project_id: faker.datatype.number(),
     ministry_id: faker.datatype.number(),

epictrack-web/src/components/workPlan/issues/IssuesContainer.tsx

@@ -6,7 +6,7 @@ import { ETTab, ETTabs } from "../../shared/tab/Tab";
 import TabPanel from "../../shared/tab/TabPanel";
 import IssuesView from "./IssuesView";
 import { ReportsPreview } from "./ReportsPreview";
-import { Notes } from "./Notes";
+import Notes from "./Notes";
 import { titleStyle, tabStyle, tabPanelStyle } from "../common/styles";
 
 const IssuesContainer = () => {

epictrack-web/src/components/workPlan/issues/IssuesContext.tsx

@@ -11,6 +11,7 @@ import { WORKPLAN_TAB } from "../constants";
 
 interface IssuesContextProps {
   isIssuesLoading: boolean;
+  workId: string | null;
   addIssue: (issueForm: CreateIssueForm) => Promise<void>;
   editIssue: (issueForm: EditIssueForm) => Promise<void>;
   editIssueUpdate: (issueForm: CloneForm) => Promise<void>;
@@ -42,6 +43,7 @@ interface IssueContainerRouteParams extends URLSearchParams {
 
 export const initialIssueContextValue = {
   isIssuesLoading: true,
+  workId: null,
   addIssue: (_: CreateIssueForm) => {
     return Promise.resolve();
   },
@@ -254,6 +256,7 @@ export const IssuesProvider = ({
     <IssuesContext.Provider
       value={{
         isIssuesLoading,
+        workId,
         addIssue,
         issueToApproveId,
         setIssueToApproveId,

epictrack-web/src/components/workPlan/issues/Notes.tsx

@@ -1,10 +1,53 @@
 import React from "react";
 import RichTextEditor from "../../shared/richTextEditor";
+import { WorkplanContext } from "../WorkPlanContext";
+import { IssuesContext } from "./IssuesContext";
+import { showNotification } from "../../shared/notificationProvider";
+import debounce from "lodash/debounce";
+import workService from "../../../services/workService/workService";
+
+const Notes = () => {
+  const { work, setWork } = React.useContext(WorkplanContext);
+  const { workId } = React.useContext(IssuesContext);
+  const [notes, setNotes] = React.useState("");
+  const initialNotes = React.useMemo(() => work?.issue_notes, [work?.id]);
+
+  React.useEffect(() => {
+    setNotes(work?.issue_notes || "");
+  }, [work]);
+
+  const saveIssuesNotes = React.useCallback(async (value: string) => {
+    const result = await workService.saveNotes(
+      Number(workId),
+      value,
+      "issue_notes"
+    );
+    if (result.status === 200) {
+      setWork(result.data);
+      showNotification("Notes saved successfully", {
+        type: "success",
+        duration: 1000,
+      });
+    }
+  }, []);
+
+  const debounceSave = React.useMemo(() => {
+    return debounce(saveIssuesNotes, 1000);
+  }, [saveIssuesNotes]);
 
-export const Notes = () => {
   const handleNotesChange = (value: string) => {
-    return null;
+    if (value !== notes) {
+      setNotes(value);
+      debounceSave(value);
+    }
   };
 
-  return <RichTextEditor handleEditorStateChange={handleNotesChange} />;
+  return (
+    <RichTextEditor
+      handleEditorStateChange={handleNotesChange}
+      initialRawEditorState={initialNotes}
+    />
+  );
 };
+
+export default Notes;

epictrack-web/src/models/work.ts

@@ -21,6 +21,7 @@ export interface Work extends MasterBase {
   work_decision_date: string;
   first_nation_notes: string;
   status_notes: string;
+  issue_notes: string;
   work_state: string;
 
   project_id: number;