feat(evaluations): multi-select

Author: NicoSerranoP

project-evaluations/src/components/AddModal.tsx

@@ -1,4 +1,4 @@
-import { useRef } from "react";
+import { useState } from "react";
 
 import type { Category } from "../types.js";
 import { CATEGORIES } from "../schema.js";
@@ -9,24 +9,27 @@ interface AddModalProps {
 }
 
 export default function AddModal({ onClose }: AddModalProps) {
-  const titleRef = useRef<HTMLInputElement>(null);
-  const descRef = useRef<HTMLTextAreaElement>(null);
-  const categoryRef = useRef<HTMLSelectElement>(null);
+  const [title, setTitle] = useState("");
+  const [description, setDescription] = useState("");
+  const [selectedCategories, setSelectedCategories] = useState<Category[]>([]);
 
   const { addEvaluation } = useEvaluationsData();
 
   const fieldClass =
     "w-full bg-gray-800 border border-gray-700 rounded px-3 py-2 text-sm text-gray-100 focus:outline-none focus:border-indigo-500";
 
   const handleConfirm = (): void => {
-    const title = titleRef.current?.value.trim() ?? "";
-    if (!title) {
+    const trimmedTitle = title.trim();
+    if (!trimmedTitle) {
       alert("Please enter a title.");
       return;
     }
-    const description = descRef.current?.value.trim() ?? "";
-    const category = (categoryRef.current?.value ?? CATEGORIES[0]) as Category;
-    addEvaluation(title, description, category);
+    if (selectedCategories.length === 0) {
+      alert("Please select at least one category.");
+      return;
+    }
+    const trimmedDescription = description.trim();
+    addEvaluation(trimmedTitle, trimmedDescription, selectedCategories);
     onClose();
   };
 
@@ -41,21 +44,49 @@ export default function AddModal({ onClose }: AddModalProps) {
         <div className="space-y-3">
           <div>
             <label className="block text-xs text-gray-400 mb-1">Title</label>
-            <input ref={titleRef} type="text" placeholder="Protocol name" className={fieldClass} />
+            <input
+              type="text"
+              placeholder="Protocol name"
+              value={title}
+              onChange={(e) => {
+                setTitle(e.target.value);
+              }}
+              className={fieldClass}
+            />
           </div>
           <div>
             <label className="block text-xs text-gray-400 mb-1">Description</label>
-            <textarea ref={descRef} rows={3} placeholder="Brief description" className={`${fieldClass} resize-none`} />
+            <textarea
+              rows={3}
+              placeholder="Brief
+                description"
+              value={description}
+              onChange={(e) => {
+                setDescription(e.target.value);
+              }}
+              className={`${fieldClass} resize-none`}
+            />
           </div>
           <div>
-            <label className="block text-xs text-gray-400 mb-1">Category</label>
-            <select ref={categoryRef} className={fieldClass}>
-              {CATEGORIES.map((c) => (
-                <option key={c} value={c}>
-                  {c}
-                </option>
+            <label className="block text-xs text-gray-400 mb-2">Categories</label>
+            <div className="space-y-2 bg-gray-800 border border-gray-700 rounded p-3">
+              {CATEGORIES.map((cat) => (
+                <label key={cat} className="flex items-center gap-2 cursor-pointer">
+                  <input
+                    type="checkbox"
+                    checked={selectedCategories.includes(cat)}
+                    onChange={(e) => {
+                      const updated = e.target.checked
+                        ? [...selectedCategories, cat]
+                        : selectedCategories.filter((c) => c !== cat);
+                      setSelectedCategories(updated);
+                    }}
+                    className="w-4 h-4 bg-gray-700 border border-gray-600 rounded focus:outline-none focus:border-indigo-500"
+                  />
+                  <span className="text-xs text-gray-300">{cat}</span>
+                </label>
               ))}
-            </select>
+            </div>
           </div>
         </div>
         <div className="flex gap-3 mt-5">

project-evaluations/src/components/PropertyRow.tsx

@@ -15,7 +15,43 @@ export default function PropertyRow({ def, prop, onUpdate }: PropertyRowProps) {
   const inputClass =
     "w-full bg-gray-800 border border-gray-700 rounded px-2 py-1 text-xs text-gray-100 focus:outline-none focus:border-indigo-500";
 
+  const parseMultiSelectValue = (): string[] => {
+    if (!prop?.value) return [];
+    try {
+      return JSON.parse(prop.value) as string[];
+    } catch {
+      return [];
+    }
+  };
+
+  const handleMultiSelectChange = (option: string, checked: boolean): void => {
+    const current = parseMultiSelectValue();
+    const updated = checked ? [...current, option] : current.filter((v) => v !== option);
+    onUpdate(def.name, "value", JSON.stringify(updated));
+  };
+
   const renderValueInput = (): React.ReactNode => {
+    if (def.inputType === "multi-select" && def.options) {
+      const selected = parseMultiSelectValue();
+      return (
+        <div className="space-y-2 bg-gray-800 border border-gray-700 rounded p-2">
+          {def.options.map((opt) => (
+            <label key={opt} className="flex items-center gap-2 cursor-pointer">
+              <input
+                type="checkbox"
+                checked={selected.includes(opt)}
+                onChange={(e) => {
+                  handleMultiSelectChange(opt, e.target.checked);
+                }}
+                className="w-4 h-4 bg-gray-700 border border-gray-600 rounded focus:outline-none focus:border-indigo-500"
+              />
+              <span className="text-xs text-gray-300">{opt}</span>
+            </label>
+          ))}
+        </div>
+      );
+    }
+
     if (def.inputType === "select" && def.options) {
       return (
         <select
@@ -34,6 +70,7 @@ export default function PropertyRow({ def, prop, onUpdate }: PropertyRowProps) {
         </select>
       );
     }
+
     return (
       <input
         type={def.inputType === "number" ? "number" : "text"}
@@ -47,12 +84,21 @@ export default function PropertyRow({ def, prop, onUpdate }: PropertyRowProps) {
     );
   };
 
+  const getDisplayValue = (): string => {
+    if (def.inputType === "multi-select") {
+      const selected = parseMultiSelectValue();
+      return selected.length > 0 ? selected.join(", ") : "— none selected —";
+    }
+    return prop?.value ?? "";
+  };
+
   return (
     <div className="bg-gray-900 border border-gray-800 rounded-lg p-3 space-y-2">
       <div className="flex items-start justify-between gap-2">
         <div>
           <p className="text-xs font-medium text-gray-200">{def.name}</p>
           <p className="text-xs text-gray-500 mt-0.5">{def.description}</p>
+          {def.inputType === "multi-select" && <p className="text-xs text-indigo-400 mt-1">{getDisplayValue()}</p>}
         </div>
       </div>
       {renderValueInput()}