feat: integrate TagMultiSelect with AddTaskDialog

Author: Hell1213

frontend/src/components/HomeComponents/Tasks/AddTaskDialog.tsx

@@ -24,18 +24,18 @@ import {
 } from '@/components/ui/select';
 import { AddTaskDialogProps } from '@/components/utils/types';
 import { format } from 'date-fns';
+import { TagMultiSelect } from './TagMultiSelect';
 
 export const AddTaskdialog = ({
   isOpen,
   setIsOpen,
   newTask,
   setNewTask,
-  tagInput,
-  setTagInput,
   onSubmit,
   isCreatingNewProject,
   setIsCreatingNewProject,
   uniqueProjects = [],
+  uniqueTags = [],
   allTasks = [],
 }: AddTaskDialogProps) => {
   const [annotationInput, setAnnotationInput] = useState('');
@@ -102,20 +102,6 @@ export const AddTaskdialog = ({
     });
   };
 
-  const handleAddTag = () => {
-    if (tagInput && !newTask.tags.includes(tagInput, 0)) {
-      setNewTask({ ...newTask, tags: [...newTask.tags, tagInput] });
-      setTagInput('');
-    }
-  };
-
-  const handleRemoveTag = (tagToRemove: string) => {
-    setNewTask({
-      ...newTask,
-      tags: newTask.tags.filter((tag) => tag !== tagToRemove),
-    });
-  };
-
   return (
     <Dialog open={isOpen} onOpenChange={setIsOpen}>
       <DialogTrigger asChild>
@@ -417,40 +403,14 @@ export const AddTaskdialog = ({
               Tags
             </Label>
             <div className="col-span-6">
-              <Input
-                id="tags"
-                name="tags"
-                placeholder="Add a tag"
-                value={tagInput}
-                onChange={(e) => setTagInput(e.target.value)}
-                onKeyDown={(e) => e.key === 'Enter' && handleAddTag()}
-                required
-                className="col-span-6"
+              <TagMultiSelect
+                availableTags={uniqueTags}
+                selectedTags={newTask.tags}
+                onTagsChange={(tags) => setNewTask({ ...newTask, tags })}
+                placeholder="Select or create tags"
               />
             </div>
           </div>
-
-          <div className="mt-2">
-            {newTask.tags.length > 0 && (
-              <div className="grid grid-cols-4 items-center">
-                <div> </div>
-                <div className="flex flex-wrap gap-2 col-span-3">
-                  {newTask.tags.map((tag, index) => (
-                    <Badge key={index}>
-                      <span>{tag}</span>
-                      <button
-                        type="button"
-                        className="ml-2 text-red-500"
-                        onClick={() => handleRemoveTag(tag)}
-                      >
-                        ✖
-                      </button>
-                    </Badge>
-                  ))}
-                </div>
-              </div>
-            )}
-          </div>
           <div className="grid grid-cols-8 items-center gap-4">
             <Label htmlFor="annotations" className="text-right col-span-2">
               Annotation

frontend/src/components/HomeComponents/Tasks/Tasks.tsx

@@ -105,7 +105,6 @@ export const Tasks = (
   const [isCreatingNewProject, setIsCreatingNewProject] = useState(false);
   const [isAddTaskOpen, setIsAddTaskOpen] = useState(false);
   const [_isDialogOpen, setIsDialogOpen] = useState(false);
-  const [tagInput, setTagInput] = useState('');
   const [_selectedTask, setSelectedTask] = useState<Task | null>(null);
   const [editedTags, setEditedTags] = useState<string[]>(
     _selectedTask?.tags || []
@@ -1123,12 +1122,11 @@ export const Tasks = (
                         setIsOpen={setIsAddTaskOpen}
                         newTask={newTask}
                         setNewTask={setNewTask}
-                        tagInput={tagInput}
-                        setTagInput={setTagInput}
                         onSubmit={handleAddTask}
                         isCreatingNewProject={isCreatingNewProject}
                         setIsCreatingNewProject={setIsCreatingNewProject}
                         uniqueProjects={uniqueProjects}
+                        uniqueTags={uniqueTags}
                         allTasks={tasks}
                       />
                     </div>
@@ -1433,12 +1431,11 @@ export const Tasks = (
                         setIsOpen={setIsAddTaskOpen}
                         newTask={newTask}
                         setNewTask={setNewTask}
-                        tagInput={tagInput}
-                        setTagInput={setTagInput}
                         onSubmit={handleAddTask}
                         isCreatingNewProject={isCreatingNewProject}
                         setIsCreatingNewProject={setIsCreatingNewProject}
                         uniqueProjects={uniqueProjects}
+                        uniqueTags={uniqueTags}
                         allTasks={tasks}
                       />
                     </div>

frontend/src/components/utils/types.ts

@@ -119,12 +119,11 @@ export interface AddTaskDialogProps {
   setIsOpen: (value: boolean) => void;
   newTask: TaskFormData;
   setNewTask: (task: TaskFormData) => void;
-  tagInput: string;
-  setTagInput: (value: string) => void;
   onSubmit: (task: TaskFormData) => void;
   isCreatingNewProject: boolean;
   setIsCreatingNewProject: (value: boolean) => void;
   uniqueProjects: string[];
+  uniqueTags: string[];
   allTasks?: Task[];
 }