Merge pull request #186 from djnunez-aot/note-section

Notes front end and backend integration

submit-api/src/submit_api/models/submission_item_note.py

@@ -1,6 +1,6 @@
-"""Internal staff document model class.
+"""Submission item note document model class.
 
-Manages the internal staff
+Manages the submission item notes.
 """
 
 from __future__ import annotations

submit-api/src/submit_api/resources/staff/submission_item_note.py

@@ -38,8 +38,8 @@
 
 @cors_preflight("OPTIONS, POST")
 @API.route("/submission-items/<int:submission_item_id>", methods=["POST", "OPTIONS"])
-class InternalStaffDocuments(Resource):
-    """Resource for managing projects."""
+class SubmissionItemNoteResource(Resource):
+    """Resource for managing submission item notes."""
 
     @staticmethod
     @ApiHelper.swagger_decorators(API, endpoint_description="Create a staff note")

submit-api/src/submit_api/schemas/item.py

@@ -11,6 +11,7 @@
 from submit_api.schemas.item_type import ItemTypeSchema
 from submit_api.schemas.submission import SubmittedDocumentSchema, SubmittedFormSchema
 from submit_api.schemas.submission_review import SubmissionReviewSchema
+from submit_api.schemas.submission_item_note import SubmissionItemNote
 
 
 class ItemSubmissionSchema(Schema):
@@ -70,3 +71,4 @@ class Meta:  # pylint: disable=too-few-public-methods
 
     internal_staff_documents = fields.Nested(InternalStaffDocument, data_key="internal_staff_documents", many=True)
     review = fields.Nested(SubmissionReviewSchema, data_key="review")
+    notes = fields.Nested(SubmissionItemNote, data_key="notes", many=True)

submit-api/src/submit_api/schemas/submission_item_note.py

@@ -3,7 +3,7 @@
 Manages the package
 """
 
-from marshmallow import EXCLUDE, Schema, fields
+from marshmallow import EXCLUDE, Schema, fields, pre_dump
 
 
 class SubmissionItemNote(Schema):
@@ -20,6 +20,12 @@ class Meta:  # pylint: disable=too-few-public-methods
     created_date = fields.DateTime(data_key="created_date")
     created_by = fields.Str(data_key="created_by")
 
+    @pre_dump
+    def get_submitted_by(self, obj, **kwargs):
+        """Get created_by."""
+        obj.created_by = obj.created_by_user.account_user.full_name if obj.created_by_user else None
+        return obj
+
 
 class PostSubmissionItemNote(Schema):
     """Post note schema."""

submit-api/src/submit_api/services/submission_item_note.py

@@ -31,9 +31,7 @@ def create_note(cls, submission_item_id, data):
             raise ResourceNotFoundError("Submission item not found")
 
         note = SubmissionItemNoteModel(
-            name=data.get("name"),
-            url=data.get("url"),
-            type=data.get("type"),
+            note=data.get("note"),
             item_id=submission_item_id,
             created_by=TokenInfo.get_id(),
         )

submit-web/src/components/Submission/ItemsTable.tsx

@@ -37,15 +37,15 @@ export default function ItemsTable({
     submitted_by: subItem?.submitted_by,
     version: subItem.version,
     submissions: subItem.submissions.filter(
-      (submission) => submission.type === SUBMISSION_TYPE.DOCUMENT,
+      (submission) => submission.type === SUBMISSION_TYPE.DOCUMENT
     ),
     has_document:
       subItem.type.submission_method === SUBMISSION_ITEM_METHOD.DOCUMENT_UPLOAD,
     reviewStatus: subItem.review?.status,
   }));
 
   const internalStaffDocuments = submissionItems.flatMap(
-    (item) => item.internal_staff_documents ?? [],
+    (item) => item.internal_staff_documents ?? []
   );
 
   return (

submit-web/src/components/SubmissionItem/ConsultationRecord/ConsultationRecordStaffView/Note.tsx

@@ -1,14 +1,16 @@
 import { Box, Typography } from "@mui/material";
 import { BCDesignTokens } from "epic.theme";
-
-interface Note {
+import dayjs from "dayjs";
+export interface Note {
   id: string;
   note: string;
   created_by: string;
-  date_created: string;
+  created_date: string;
 }
 
 export default function Note({ note }: { note: Note }) {
+  const createdDate = dayjs(note.created_date).format("DD/MM/YYYY");
+
   return (
     <Box sx={{ mb: BCDesignTokens.layoutMarginMedium }}>
       <Box
@@ -22,7 +24,7 @@ export default function Note({ note }: { note: Note }) {
         <Typography variant="subtitle1" sx={{ fontWeight: "bold" }}>
           {note.created_by}
         </Typography>
-        <Typography variant="subtitle1">{note.date_created}</Typography>
+        <Typography variant="subtitle1">{createdDate}</Typography>
       </Box>
       <Typography key={note.id} variant="body1" sx={{ mb: 1 }}>
         {note.note}

submit-web/src/components/SubmissionItem/ConsultationRecord/ConsultationRecordStaffView/NotesSection.tsx

@@ -10,20 +10,53 @@ import {
 import KeyboardArrowRightIcon from "@mui/icons-material/KeyboardArrowRight";
 import { BCDesignTokens } from "epic.theme";
 import EventNoteIcon from "@mui/icons-material/EventNote";
-import Note from "./Note";
+import Note, { Note as NoteType } from "./Note";
 import { When } from "react-if";
 import { useState } from "react";
+import { getSubmissionItemForStaffQueryOptions } from "@/hooks/api/useItems";
+import { useParams } from "@tanstack/react-router";
+import { useQueryClient } from "@tanstack/react-query";
+import { useCreateNote } from "@/hooks/api/useSubmissionItemNotes";
+import { SubmissionItem } from "@/models/SubmissionItem";
+import { LoadingButton } from "@/components/Shared/LoadingButton";
 
 export default function NotesSection() {
-  const mockNotes = [];
   const [addNote, setAddNote] = useState(false);
   const [expanded, setExpanded] = useState(false);
+  const [noteText, setNoteText] = useState("");
+  const { submissionPackageId, submissionId: submissionItemId } = useParams({
+    from: "/staff/_staffLayout/projects/$projectId/_projectLayout/submission-packages/$submissionPackageId/_submissionLayout/submissions/$submissionId",
+  });
+
+  const queryClient = useQueryClient();
+  const submissionItem = queryClient.getQueryData<SubmissionItem>(
+    getSubmissionItemForStaffQueryOptions({ itemId: Number(submissionItemId) })
+      .queryKey
+  );
+
+  const { notes } = submissionItem;
+
+  const { mutateAsync: createNote, isPending: createNoteLoading } =
+    useCreateNote({
+      itemId: Number(submissionItemId),
+      packageId: Number(submissionPackageId),
+    });
 
   const handleAddNote = () => {
     setAddNote(!addNote);
     setExpanded(true);
   };
 
+  const handleSaveNote = async () => {
+    createNote({
+      submission_item_id: Number(submissionItemId),
+      note: {
+        note: noteText,
+      },
+    });
+    setAddNote(false);
+  };
+
   return (
     <Accordion
       disableGutters
@@ -95,22 +128,33 @@ export default function NotesSection() {
             <Typography variant="subtitle1" sx={{ fontWeight: "bold" }}>
               Notes
             </Typography>
-            <TextField multiline fullWidth minRows={6} />
-            <Button sx={{ mr: BCDesignTokens.layoutMarginSmall }}>
+            <TextField
+              multiline
+              fullWidth
+              minRows={6}
+              onChange={(e) => setNoteText(e.target.value)}
+            />
+            <LoadingButton
+              onClick={handleSaveNote}
+              sx={{ mr: BCDesignTokens.layoutMarginSmall }}
+              loading={createNoteLoading}
+            >
               Save Note
-            </Button>
+            </LoadingButton>
             <Button color="secondary" onClick={() => setAddNote(false)}>
               Cancel
             </Button>
           </Box>
         </When>
-        {mockNotes.length > 0 ? (
-          mockNotes.map((note) => <Note key={note.id} note={note} />)
-        ) : (
-          <Typography variant="body1" sx={{ mb: 1 }}>
-            No notes have been added yet.
-          </Typography>
-        )}
+        <When condition={notes}>
+          {notes ? (
+            notes.map((note: NoteType) => <Note key={note.id} note={note} />)
+          ) : (
+            <Typography variant="body1" sx={{ mb: 1 }}>
+              No notes have been added yet.
+            </Typography>
+          )}
+        </When>
       </AccordionDetails>
     </Accordion>
   );

submit-web/src/components/SubmissionItem/ConsultationRecord/ConsultationRecordStaffView/ReviewSection.tsx

@@ -31,7 +31,7 @@ export default function ReviewSection() {
   const queryClient = useQueryClient();
   const submissionItem = queryClient.getQueryData<SubmissionItem>(
     getSubmissionItemForStaffQueryOptions({ itemId: Number(submissionItemId) })
-      .queryKey,
+      .queryKey
   );
   const defaultValues = useMemo(() => {
     if (!submissionItem) return undefined;

submit-web/src/hooks/api/useSubmissionItemNotes.ts

@@ -0,0 +1,47 @@
+import { submitRequest } from "@/utils/axiosUtils";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { Options } from "./types";
+import { STAFF_QUERY_KEY } from "./constants";
+import { Note } from "@/components/SubmissionItem/ConsultationRecord/ConsultationRecordStaffView/Note";
+import { notify } from "@/components/Shared/Snackbar/snackbarStore";
+
+type CreateNoteType = {
+  submission_item_id: number;
+  note: Partial<Note>;
+};
+export const createNote = ({ submission_item_id, note }: CreateNoteType) => {
+  return submitRequest<Note>({
+    url: `/staff/notes/submission-items/${submission_item_id}`,
+    method: "post",
+    data: note,
+  });
+};
+
+type UseCreateNoteProps = {
+  itemId: number;
+  packageId: number;
+  options?: Options;
+};
+export const useCreateNote = ({
+  itemId,
+  packageId,
+  options,
+}: UseCreateNoteProps) => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: createNote,
+    ...options,
+    onSuccess: () => {
+      if (options?.onSuccess) {
+        options.onSuccess();
+      }
+      notify.success("Note added successfully");
+      queryClient.invalidateQueries({
+        queryKey: [STAFF_QUERY_KEY.SUBMISSION_ITEM, itemId],
+      });
+      queryClient.invalidateQueries({
+        queryKey: [STAFF_QUERY_KEY.SUBMISSION_PACKAGE, packageId],
+      });
+    },
+  });
+};

submit-web/src/models/SubmissionItem.ts

@@ -1,3 +1,4 @@
+import { Note } from "@/components/SubmissionItem/ConsultationRecord/ConsultationRecordStaffView/Note";
 import { Submission, SubmissionStatus } from "./Submission";
 import { SubmissionReview } from "./SubmissionReview";
 
@@ -40,6 +41,7 @@ export interface SubmissionItem {
   submissions: Submission[];
   internal_staff_documents?: InternalStaffDocument[];
   review?: SubmissionReview;
+  notes?: Note[];
 }
 
 export type InternalStaffDocumentType = "S3" | "LINK";