Note edit and delete

eap_backend/eap_api/urls.py

@@ -21,11 +21,17 @@
         views.property_claim_list,
         name="property_claim_list",
     ),
+    # path(
+    #     "comments/<int:assurance_case_id>/",
+    #     views.comment_list,
+    #     name="comment_list",
+    # ),
     path(
-        "comments/<int:assurance_case_id>/",
+        "assurance_case/<int:assurance_case_id>/comments/",
         views.comment_list,
         name="comment_list",
     ),
+    path("comments/<int:pk>/", views.comment_detail, name="comment_detail"),
     path(
         "comments/<int:comment_id>/reply/",
         views.reply_to_comment,

eap_backend/eap_api/views.py

@@ -641,12 +641,45 @@ def comment_list(request, assurance_case_id):
         return Response(serializer.data)
 
     elif request.method == "POST":
-        serializer = CommentSerializer(data=request.data)
+        data = request.data.copy()
+        data["assurance_case_id"] = (
+            assurance_case_id  # Ensure assurance_case_id is set in the data
+        )
+        serializer = CommentSerializer(data=data)
         if serializer.is_valid():
             # Ensure the author is set to the current user
             serializer.save(author=request.user)
             return Response(serializer.data, status=status.HTTP_201_CREATED)
         return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
+
+    return JsonResponse(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
+
+
+@api_view(["GET", "PUT", "DELETE"])
+def comment_detail(request, pk):
+    """
+    Retrieve, update or delete a specific comment.
+    """
+    try:
+        comment = Comment.objects.get(id=pk)
+    except Comment.DoesNotExist:
+        return HttpResponse(status=404)
+
+    if request.method == "GET":
+        serializer = CommentSerializer(comment)
+        return Response(serializer.data)
+
+    elif request.method == "PUT":
+        serializer = CommentSerializer(comment, data=request.data, partial=True)
+        if serializer.is_valid():
+            serializer.save()
+            return Response(serializer.data)
+        return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
+
+    elif request.method == "DELETE":
+        comment.delete()
+        return HttpResponse(status=204)
+
     return JsonResponse(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
 
 

next_frontend/.env.local

@@ -1,7 +1,7 @@
 # TODO(cgavidia): This should be handled via environment variables.
-# NEXT_PUBLIC_API_URL=http://localhost:8000
+NEXT_PUBLIC_API_URL=http://localhost:8000
 # NEXT_PUBLIC_API_URL=https://eap-backend.azurewebsites.net
-NEXT_PUBLIC_API_URL=https://staging-eap-backend.azurewebsites.net
+# NEXT_PUBLIC_API_URL=https://staging-eap-backend.azurewebsites.net
 
 NEXT_PUBLIC_STORAGESASTOKEN=sv=2022-11-02&ss=bfqt&srt=c&sp=rwdlacupiytfx&se=2025-05-06T03:07:05Z&st=2024-05-05T19:07:05Z&spr=https&sig=vUQsHpRHQ%2BZAiE9k3riG4qmXJubVd0jMdbBFgM0fpuY%3D
 NEXT_PUBLIC_STORAGESOURCENAME=teamedia

next_frontend/components/cases/NotesEditForm.tsx

@@ -0,0 +1,116 @@
+'use client'
+
+import React, { Dispatch, SetStateAction, useState } from 'react'
+import { boolean, z } from "zod"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { useForm } from "react-hook-form"
+import { Button } from "@/components/ui/button"
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form"
+import { Textarea } from '../ui/textarea'
+import { useLoginToken } from '@/hooks/useAuth'
+import useStore from '@/data/store'
+
+type NotesEditFormProps = {
+  note: any,
+  setEdit: Dispatch<SetStateAction<boolean | undefined>>
+}
+
+const formSchema = z.object({
+  comment: z.string().min(2).max(50),
+})
+
+const NotesEditForm = ({ note, setEdit } : NotesEditFormProps ) => {
+  const [token] = useLoginToken();
+  const { assuranceCase, setAssuranceCase } = useStore()
+  const [loading, setLoading] = useState<boolean>(false)
+
+  const { id, content } = note
+
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      comment: content,
+    }
+  })
+
+  async function onSubmit(values: z.infer<typeof formSchema>) {
+    setLoading(true)
+
+    const newComment = {
+      content: values.comment
+    }
+
+    try {
+      let url = `${process.env.NEXT_PUBLIC_API_URL}/api/comments/${id}/`
+
+      const requestOptions: RequestInit = {
+          method: "PUT",
+          headers: {
+              Authorization: `Token ${token}`,
+              "Content-Type": "application/json",
+          },
+          body: JSON.stringify(newComment),
+      };
+      const response = await fetch(url, requestOptions);
+
+      if(!response.ok) {
+          console.log('error')
+      }
+
+      const updatedComment = await response.json();
+
+      // Find the index of the updated comment in the existing comments array
+      const updatedComments = assuranceCase.comments.map((comment:any) =>
+          comment.id === updatedComment.id ? updatedComment : comment
+      );
+
+      const updatedAssuranceCase = {
+          ...assuranceCase,
+          comments: updatedComments,
+      };
+
+      setAssuranceCase(updatedAssuranceCase);
+      setEdit(false);
+      setLoading(false)
+    } catch (error) {
+        console.log('Error', error)
+        setLoading(false)
+    }
+  }
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+        <FormField
+          control={form.control}
+          name="comment"
+          render={({ field }) => (
+            <FormItem>
+              {/* <FormLabel>Username</FormLabel> */}
+              <FormControl>
+                <Textarea placeholder="Type your message here." {...field} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <div className='flex justify-end items-center gap-2'>
+          <Button variant={'ghost'} onClick={() => setEdit(false)}>Cancel</Button>
+          <Button type="submit" disabled={loading}>
+            {loading ? 'Saving' : 'Save'}
+          </Button>
+        </div>
+      </form>
+    </Form>
+  )
+}
+
+export default NotesEditForm

next_frontend/components/cases/NotesFeed.tsx

@@ -1,8 +1,15 @@
-import { Fragment, useEffect } from 'react'
+'use client'
+
+import { Fragment, useEffect, useState } from 'react'
 import { ChatBubbleLeftEllipsisIcon, TagIcon, UserCircleIcon } from '@heroicons/react/20/solid'
-import { User2Icon } from 'lucide-react'
+import { Edit2, Pencil, PencilLine, PhoneOffIcon, Save, Trash2, User2Icon, X } from 'lucide-react'
 import moment from 'moment'
 import useStore from '@/data/store'
+import { Button } from '../ui/button'
+import { useLoginToken } from '@/hooks/useAuth'
+import { boolean } from 'zod'
+import NotesEditField from './NotesEditForm'
+import NotesEditForm from './NotesEditForm'
 
 // const activity = [
 //   {
@@ -45,16 +52,51 @@ import useStore from '@/data/store'
 // ]
 
 export default function NotesFeed({ }) {
-  const { assuranceCase } = useStore()
+  const { assuranceCase, setAssuranceCase } = useStore()
+  const [token] = useLoginToken();
+  const [edit, setEdit] = useState<boolean>()
+  const [newComment, setNewComment] = useState<string>()
 
   //@ts-ignore
   assuranceCase.comments.sort((a, b) => new Date(b.created_at) - new Date(a.created_at));
 
   useEffect(() => {
     //@ts-ignore
     assuranceCase.comments.sort((a, b) => new Date(b.created_at) - new Date(a.created_at));
+    console.log('Comments', assuranceCase.comments)
   },[assuranceCase])
 
+  const handleNoteDelete = async (id: number) => {
+    try {
+      let url = `${process.env.NEXT_PUBLIC_API_URL}/api/comments/${id}/`
+
+      const requestOptions: RequestInit = {
+          method: "DELETE",
+          headers: {
+              Authorization: `Token ${token}`,
+              "Content-Type": "application/json",
+          }
+      };
+      const response = await fetch(url, requestOptions);
+
+      if(!response.ok) {
+          console.log('error')
+      }
+
+      const updatedComments = assuranceCase.comments.filter((comment:any) => comment.id !== id)
+      console.log('Updated Comments', updatedComments)
+
+      const updatedAssuranceCase = {
+        ...assuranceCase,
+        comments: updatedComments
+      }
+
+      setAssuranceCase(updatedAssuranceCase)
+    } catch (error) {
+        console.log('Error', error)
+    }
+  }
+
   return (
     <div className="mt-4 py-8 px-4">
       <ul role="list" className="-mb-8">
@@ -63,11 +105,11 @@ export default function NotesFeed({ }) {
         )}
         {assuranceCase.comments.map((activityItem: any, activityItemIdx: any) => (
           <li key={crypto.randomUUID()}>
-            <div className="relative pb-8">
+            <div className="relative pb-8 group">
               {activityItemIdx !== assuranceCase.comments.length - 1 ? (
-                <span className="absolute left-5 top-5 -ml-px h-full w-0.5 bg-gray-200 dark:bg-gray-800" aria-hidden="true" />
+                <span className="absolute left-9 top-5 -ml-px h-full w-0.5 bg-gray-200 dark:bg-gray-800" aria-hidden="true" />
               ) : null}
-              <div className="relative flex items-start space-x-3">
+              <div className="relative flex justify-start items-start space-x-3 p-4 rounded-md group-hover:bg-gray-100/50 dark:group-hover:bg-foreground/10">
                 <div className="relative mr-4">
                   {/* <img
                     className="flex h-10 w-10 items-center justify-center rounded-full bg-gray-400 ring-8 ring-white"
@@ -92,9 +134,22 @@ export default function NotesFeed({ }) {
                     <p className="mt-0.5 text-sm text-foreground/70">Created On: {moment(new Date(activityItem.created_at)).format('DD/MM/YYYY')}</p>
                   </div>
                   <div className="mt-2 text-sm text-foreground">
-                    <p className="whitespace-normal">{activityItem.content}</p> {/* Apply whitespace-normal to force text wrapping */}
+                    {edit ? (
+                      <NotesEditForm note={activityItem} setEdit={setEdit} />
+                    ) : (
+                      <p className="whitespace-normal">{activityItem.content}</p>
+                    )}
+
                   </div>
                 </div>
+                {!edit && (
+                <div className='hidden group-hover:flex justify-center items-center gap-2'>
+                  <Button onClick={() => setEdit(!edit)} size={'icon'} className='bg-background hover:bg-background/50 text-foreground'>
+                    <PencilLine className='w-4 h-4'/>
+                  </Button>
+                  <Button onClick={() => handleNoteDelete(activityItem.id)} size={'icon'} variant={'destructive'}><Trash2 className='w-4 h-4'/></Button>
+                </div>
+                )}
               </div>
             </div>
           </li>

next_frontend/components/cases/NotesForm.tsx

@@ -40,7 +40,7 @@ const NotesForm: React.FC<NotesFormProps> = ({ }) => {
 
   async function onSubmit(values: z.infer<typeof formSchema>) {
     try {
-        let url = `${process.env.NEXT_PUBLIC_API_URL}/api/comments/${assuranceCase.id}/`
+        let url = `${process.env.NEXT_PUBLIC_API_URL}/api/assurance_case/${assuranceCase.id}/comments/`
 
         const requestOptions: RequestInit = {
             method: "POST",