From 58f3c770de9e52d1f8531720b2279ea13eb594e0 Mon Sep 17 00:00:00 2001
From: Richard Griffiths <rich.griffiths89@gmail.com>
Date: Thu, 23 Jan 2025 13:27:29 +0000
Subject: [PATCH] UI updates

---
 .../components/cases/NodeAttributes.tsx       | 169 ++++++++++++++++++
 next_frontend/components/common/EditForm.tsx  |  52 ------
 next_frontend/components/common/NodeEdit.tsx  |  14 +-
 3 files changed, 181 insertions(+), 54 deletions(-)
 create mode 100644 next_frontend/components/cases/NodeAttributes.tsx

diff --git a/next_frontend/components/cases/NodeAttributes.tsx b/next_frontend/components/cases/NodeAttributes.tsx
new file mode 100644
index 00000000..d96dea6e
--- /dev/null
+++ b/next_frontend/components/cases/NodeAttributes.tsx
@@ -0,0 +1,169 @@
+'use client'
+
+import React, { Dispatch, SetStateAction, useState } from 'react'
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form"
+import { z } from "zod"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { useForm } from "react-hook-form"
+import { Textarea } from "../ui/textarea"
+import { Button } from '../ui/button'
+import useStore from '@/data/store';
+import { updateAssuranceCase, updateAssuranceCaseNode } from '@/lib/case-helper'
+import { useSession } from 'next-auth/react'
+import { MinusIcon, PlusIcon } from 'lucide-react'
+
+const formSchema = z.object({
+  assumption: z.string().optional(),
+  justification: z.string().optional()
+})
+
+interface NodeAttributesProps {
+  node: any;
+  actions: any
+  onClose: () => void
+  setUnresolvedChanges: Dispatch<SetStateAction<boolean>>
+};
+
+const NodeAttributes: React.FC<NodeAttributesProps> = ({
+  node,
+  actions,
+  onClose,
+  setUnresolvedChanges
+}) => {
+  const { assuranceCase, setAssuranceCase } = useStore();
+  const { data: session } = useSession()
+  const [loading, setLoading] = useState<boolean>(false)
+  const [newAssumption, setNewAssumption] = useState<boolean>(false)
+  const [newJustification, setNewJustification] = useState<boolean>(false)
+
+  const { setSelectedLink, setAction } = actions
+
+  const reset = () => {
+    setSelectedLink(false)
+    setAction('')
+  }
+
+  const handleCancel = () => {
+    form.reset(); // Reset the form state
+    reset(); // Perform additional reset actions
+  };
+
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: node.data || {
+      assumption: '',
+      justification: ''
+    }
+  });
+
+  async function onSubmit(values: z.infer<typeof formSchema>) {
+    setLoading(true)
+    // Update item via api
+    const updateItem = {
+      assumption: values.assumption,
+      justification: values.justification,
+    }
+
+    const updated = await updateAssuranceCaseNode(node.type, node.data.id, session?.key ?? '', updateItem)
+
+    if(updated) {
+      // Assurance Case Update
+      const updatedAssuranceCase = await updateAssuranceCase(node.type, assuranceCase, updateItem, node.data.id, node)
+      if(updatedAssuranceCase) {
+        setAssuranceCase(updatedAssuranceCase)
+        setLoading(false)
+        onClose()
+      }
+    }
+  }
+
+  let readOnly = (assuranceCase.permissions === 'view' || assuranceCase.permissions === 'review') ? true : false
+
+  // useEffect(() => {
+  //   form.watch((values, { name }) => {
+  //     if (name === 'assumption') {
+  //       setUnresolvedChanges(true);
+  //     }
+  //   });
+  // }, [form.watch, setUnresolvedChanges]);
+
+  return (
+    <div className='my-4 border-t'>
+      <div className='mt-4 font-medium text-muted-foreground text-sm'>
+        Please use this section to manage attributes for this element.
+      </div>
+
+      <div className='mt-4 flex justify-start items-center gap-2'>
+        {!node.data.assumption && (
+          <Button 
+            variant={'outline'} 
+            size={'sm'}
+            onClick={() => setNewAssumption(!newAssumption)}
+          >
+            {newAssumption ? <MinusIcon className='size-3 mr-2' /> : <PlusIcon className='size-3 mr-2' />}
+            Assumption
+          </Button>
+        )}
+        {!node.data.justification && node.type === 'strategy' && (
+          <Button 
+            variant={'outline'} 
+            size={'sm'}
+            onClick={() => setNewJustification(!newJustification)}
+          >
+            {newJustification ? <MinusIcon className='size-3 mr-2' /> : <PlusIcon className='size-3 mr-2' />}
+            Justification
+          </Button>
+        )}
+      </div>
+      
+      <Form {...form}>
+        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6 my-4">
+          {(node.data.assumption || newAssumption) && (
+            <FormField
+              control={form.control}
+              name="assumption"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Assumption</FormLabel>
+                  <FormControl>
+                    <Textarea placeholder="Type your assumption here." rows={5} {...field} readOnly={readOnly}/>
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          )}
+          {node.type === 'strategy' && (node.data.justification || newJustification) && (
+            <FormField
+              control={form.control}
+              name="justification"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Justification</FormLabel>
+                  <FormControl>
+                    <Textarea placeholder="Type your justification here." rows={5} {...field} readOnly={readOnly} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          )}
+          <div className='flex justify-start items-center gap-3 pt-4'>
+            <Button variant={"outline"} onClick={handleCancel}>Cancel</Button>
+            <Button type="submit" disabled={loading} className="bg-indigo-500 hover:bg-indigo-600 dark:text-white">
+              {loading ? 'Saving...' : 'Update Attributes'}</Button>
+          </div>
+        </form>
+      </Form>
+    </div>
+  )
+}
+
+export default NodeAttributes
diff --git a/next_frontend/components/common/EditForm.tsx b/next_frontend/components/common/EditForm.tsx
index 0396f91d..11fea518 100644
--- a/next_frontend/components/common/EditForm.tsx
+++ b/next_frontend/components/common/EditForm.tsx
@@ -30,8 +30,6 @@ const formSchema = z.object({
   description: z.string().min(2, {
     message: "Description must be atleast 2 characters"
   }),
-  assumption: z.string().optional(),
-  justification: z.string().optional()
 })
 
 interface EditFormProps {
@@ -55,8 +53,6 @@ const EditForm: React.FC<EditFormProps> = ({
     defaultValues: node.data || {
       URL: '',
       description: '',
-      assumption: '',
-      justification: ''
     }
   });
 
@@ -65,8 +61,6 @@ const EditForm: React.FC<EditFormProps> = ({
     // Update item via api
     const updateItem = {
       short_description: values.description,
-      assumption: values.assumption,
-      justification: values.justification
     }
 
     if(node.type === 'evidence') {
@@ -123,52 +117,6 @@ const EditForm: React.FC<EditFormProps> = ({
             </FormItem>
           )}
         />
-        {node.type !== 'evidence' && (
-          <FormField
-            control={form.control}
-            name="assumption"
-            render={({ field }) => (
-              <FormItem>
-                <FormLabel className='flex justify-start items-center gap-2'>
-                  Assumption
-                  {readOnly && (
-                    <span title='Read Only' className='flex justify-start items-center gap-2 text-xs text-muted-foreground py-2'><Lock className='w-3 h-3' /></span>
-                  )}
-                </FormLabel>
-                <FormControl>
-                  <Textarea
-                    placeholder="" {...field}
-                    readOnly={readOnly}
-                  />
-                </FormControl>
-                <FormMessage />
-              </FormItem>
-            )}
-          />
-        )}
-        {node.type !== 'evidence' && node.type === 'strategy' && (
-          <FormField
-            control={form.control}
-            name="justification"
-            render={({ field }) => (
-              <FormItem>
-                <FormLabel className='flex justify-start items-center gap-2'>
-                  Justification
-                  {readOnly && (
-                    <span title='Read Only' className='flex justify-start items-center gap-2 text-xs text-muted-foreground py-2'><Lock className='w-3 h-3' /></span>
-                  )}
-                </FormLabel>
-                <FormControl>
-                  <Textarea
-                    placeholder="" {...field}
-                    readOnly={readOnly}
-                  />
-                </FormControl>
-                <FormMessage />
-              </FormItem>
-            )}
-          />
-        )}
         {node.type === 'evidence' && (
           <FormField
             control={form.control}
diff --git a/next_frontend/components/common/NodeEdit.tsx b/next_frontend/components/common/NodeEdit.tsx
index 22ff0e40..91d6f44e 100644
--- a/next_frontend/components/common/NodeEdit.tsx
+++ b/next_frontend/components/common/NodeEdit.tsx
@@ -3,7 +3,7 @@
 import { Button } from "@/components/ui/button"
 import { Dispatch, SetStateAction, useEffect, useState } from "react";
 import EditSheet from "../ui/edit-sheet";
-import { BookOpenText, CloudFog, Eye, EyeOff, MessageCirclePlus, Move, Plus, PlusCircle, Trash2, Unplug } from "lucide-react"
+import { BookOpenText, CloudFog, Eye, EyeOff, LibraryIcon, MessageCirclePlus, Move, Plus, PlusCircle, Trash2, Unplug } from "lucide-react"
 import EditForm from "./EditForm";
 import { Autour_One } from "next/font/google";
 import { addEvidenceToClaim, addPropertyClaimToNested, createAssuranceCaseNode, deleteAssuranceCaseNode, listPropertyClaims, setNodeIdentifier, updateAssuranceCaseNode, caseItemDescription, updateAssuranceCase, removeAssuranceCaseNode, extractGoalsClaimsStrategies, findElementById, getChildrenHiddenStatus, findSiblingHiddenState, findParentNode, detachCaseElement } from "@/lib/case-helper";
@@ -26,6 +26,7 @@ import { ChatBubbleIcon } from "@radix-ui/react-icons";
 import NodeComment from "../cases/NodeComments";
 import { useSession } from "next-auth/react";
 import NodeContext from "../cases/NodeContext";
+import NodeAttributes from "../cases/NodeAttributes";
 
 interface NodeEditProps {
   node: Node | any
@@ -284,8 +285,14 @@ const NodeEdit = ({ node, isOpen, setEditOpen }: NodeEditProps) => {
                       Manage Context
                     </Button>
                   )}
+                  {node.type !== 'evidence' && (
+                  <Button variant={'outline'} onClick={() => setAction('attributes')} className="w-full">
+                    <LibraryIcon className="w-4 h-4 mr-2"/>
+                    Manage Attributes
+                  </Button>
+                  )}
                   {node.type !== 'context' && node.type !== 'evidence' && (
-                    <Button variant={'outline'} onClick={() => setAction('new')} className="w-full"><PlusCircle className="w-4 h-4 mr-2"/>Add New</Button>
+                    <Button variant={'outline'} onClick={() => setAction('new')} className="w-full"><PlusCircle className="w-4 h-4 mr-2"/>Add New Element</Button>
                   )}
                   {node.type !== 'context' && node.type !== 'evidence' && (
                     <Button variant={'outline'} onClick={() => setAction('existing')} className="w-full"><Unplug className="w-4 h-4 mr-2"/>Reattach Element(s)</Button>
@@ -503,6 +510,9 @@ const NodeEdit = ({ node, isOpen, setEditOpen }: NodeEditProps) => {
       {action === 'context' && (
         <NodeContext node={node} actions={{ setSelectedLink, handleClose, setAction }} setUnresolvedChanges={setUnresolvedChanges} />
       )}
+      {action === 'attributes' && (
+        <NodeAttributes node={node} onClose={handleClose} actions={{ setSelectedLink, handleClose, setAction }} setUnresolvedChanges={setUnresolvedChanges} />
+      )}
       <AlertModal
         isOpen={deleteOpen}
         onClose={() => setDeleteOpen(false)}