Updated Notes UI

ohcnetwork · Jan 13, 2025 · 0e6f7ba · 0e6f7ba
1 parent 4b5d5a7
commit 0e6f7ba
Show file tree

Hide file tree

Showing 2 changed files with 82 additions and 51 deletions.
diff --git a/src/components/Questionnaire/QuestionTypes/NotesInput.tsx b/src/components/Questionnaire/QuestionTypes/NotesInput.tsx
@@ -1,8 +1,13 @@
 import { useState } from "react";
 
-import CareIcon from "@/CAREUI/icons/CareIcon";
+import { cn } from "@/lib/utils";
 
 import { Button } from "@/components/ui/button";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
 import { Textarea } from "@/components/ui/textarea";
 
 import type { QuestionnaireResponse } from "@/types/questionnaire/form";
@@ -11,48 +16,52 @@ interface NotesInputProps {
   questionnaireResponse: QuestionnaireResponse;
   updateQuestionnaireResponseCB: (response: QuestionnaireResponse) => void;
   disabled?: boolean;
+  className?: string;
 }
 
 export function NotesInput({
   questionnaireResponse,
   updateQuestionnaireResponseCB,
   disabled,
+  className,
 }: NotesInputProps) {
-  const [showNotes, setShowNotes] = useState(false);
+  const [open, setOpen] = useState(false);
   const notes = questionnaireResponse.note || "";
   const hasNotes = notes.length > 0;
 
   return (
-    <div className="space-y-2">
-      <Button
-        variant="ghost"
-        size="sm"
-        onClick={(e) => {
-          e.preventDefault();
-          setShowNotes(!showNotes);
-        }}
-        className={`h-6 px-2 ${
-          hasNotes ? "text-blue-500" : "text-gray-500"
-        } hover:bg-gray-100`}
-        disabled={disabled}
-      >
-        <CareIcon icon="l-notes" className="mr-2 h-4 w-4" />
-        {showNotes ? "Hide Notes" : hasNotes ? "Show Notes" : "Add Notes"}
-      </Button>
-      {showNotes && (
-        <Textarea
-          value={notes}
-          onChange={(e) =>
-            updateQuestionnaireResponseCB({
-              ...questionnaireResponse,
-              note: e.target.value,
-            })
-          }
-          placeholder="Add notes..."
-          className="min-h-[100px]"
-          disabled={disabled}
-        />
-      )}
+    <div className={cn("space-y-2 rounded-md flex items-center", className)}>
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger asChild>
+          <Button
+            variant="ghost"
+            size="sm"
+            className="h-full w-28 text-sm font-normal text-gray-700 hover:text-gray-900"
+            disabled={disabled}
+          >
+            {hasNotes ? (
+              <div className="w-1.5 h-1.5 rounded-full bg-orange-400 " />
+            ) : (
+              <span className=" text-base">+</span>
+            )}
+            {hasNotes ? "View Note" : "Add Note"}
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="bg-yellow-100 border border-yellow-200 text-gray-900 shadow-lg p-2">
+          <Textarea
+            value={notes}
+            onChange={(e) =>
+              updateQuestionnaireResponseCB({
+                ...questionnaireResponse,
+                note: e.target.value,
+              })
+            }
+            className=" border-yellow-200 focus-visible:border-yellow-300 focus-visible:ring-yellow-300"
+            placeholder="Add notes..."
+            disabled={disabled}
+          />
+        </PopoverContent>
+      </Popover>
     </div>
   );
 }
diff --git a/src/components/Questionnaire/QuestionTypes/QuestionInput.tsx b/src/components/Questionnaire/QuestionTypes/QuestionInput.tsx
@@ -80,6 +80,7 @@ export function QuestionInput({
   const renderSingleInput = (index: number = 0) => {
     const commonProps = {
       classes: question.styling_metadata?.classes,
+      disableRightBorder: true,
       question,
       questionnaireResponse,
       updateQuestionnaireResponseCB,
@@ -175,23 +176,52 @@ export function QuestionInput({
                 data-question-id={question.id}
               >
                 {index === 0 && <QuestionLabel question={question} />}
-                {renderSingleInput(index)}
+                <div
+                  className={cn("flex w-full", {
+                    "flex-col": question.repeats || question.type === "text",
+                  })}
+                >
+                  <div className="flex-1">{renderSingleInput(index)}</div>
+                  {/* Notes are not available for structured questions */}
+                  {!question.structured_type && !question.repeats && (
+                    <NotesInput
+                      className={cn({
+                        "bg-white border rounded-l-none -ml-2": !(
+                          question.type === "text"
+                        ),
+                        "mt-2": question.type === "text",
+                      })}
+                      questionnaireResponse={questionnaireResponse}
+                      updateQuestionnaireResponseCB={
+                        updateQuestionnaireResponseCB
+                      }
+                      disabled={disabled}
+                    />
+                  )}
+                </div>
               </div>
               {removeButton}
             </div>
           );
         })}
         {question.repeats && (
-          <Button
-            variant="outline"
-            size="sm"
-            onClick={handleAddValue}
-            className="mt-2"
-            disabled={disabled}
-          >
-            <CareIcon icon="l-plus" className="mr-2 h-4 w-4" />
-            Add Another
-          </Button>
+          <div className="mt-2 flex items-center">
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={handleAddValue}
+              className=""
+              disabled={disabled}
+            >
+              <CareIcon icon="l-plus" className="mr-2 h-4 w-4" />
+              Add Another
+            </Button>
+            <NotesInput
+              questionnaireResponse={questionnaireResponse}
+              updateQuestionnaireResponseCB={updateQuestionnaireResponseCB}
+              disabled={disabled}
+            />
+          </div>
         )}
       </div>
     );
@@ -203,14 +233,6 @@ export function QuestionInput({
     <div className="space-y-2">
       {renderInput()}
       {error && <p className="text-sm font-medium text-red-500">{error}</p>}
-      {/* Notes are not available for structured questions */}
-      {!question.structured_type && (
-        <NotesInput
-          questionnaireResponse={questionnaireResponse}
-          updateQuestionnaireResponseCB={updateQuestionnaireResponseCB}
-          disabled={disabled}
-        />
-      )}
     </div>
   );
 }