feat: integrate TagMultiSelect with AddTaskDialog

Author: Hell1213

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

@@ -31,19 +31,19 @@ import { format } from 'date-fns';
 import { ADDTASKDIALOG_FIELDS } from './constants';
 import { useAddTaskDialogKeyboard } from './UseTaskDialogKeyboard';
 import { useAddTaskDialogFocusMap } from './UseTaskDialogFocusMap';
+import { TagMultiSelect } from './TagMultiSelect';
 
 export const AddTaskdialog = ({
   onOpenChange,
   isOpen,
   setIsOpen,
   newTask,
   setNewTask,
-  tagInput,
-  setTagInput,
   onSubmit,
   isCreatingNewProject,
   setIsCreatingNewProject,
   uniqueProjects = [],
+  uniqueTags = [],
   allTasks = [],
 }: AddTaskDialogProps) => {
   const [annotationInput, setAnnotationInput] = useState('');
@@ -164,20 +164,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={handleDialogOpenChange}>
       <DialogTrigger asChild>
@@ -523,44 +509,19 @@ export const AddTaskdialog = ({
             <div
               className={`grid grid-cols-4 items-center gap-4 border-b py-6 px-2 w-full ${focusedField === 'tags' ? 'dark:bg-muted/50 bg-black/15' : ''} `}
             >
-              <Label htmlFor="tags" className="text-left col-spa w-[77px]">
+              <Label htmlFor="tags" className="text-left col-span-1 w-[77px]">
                 Tags
               </Label>
               <div className="col-span-3">
-                <Input
-                  ref={(element) => (inputRefs.current.tags = element)}
-                  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: string[]) => setNewTask({ ...newTask, tags })}
+                  placeholder="Select or create tags"
                 />
               </div>
             </div>
 
-            {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
               className={`grid grid-cols-4 items-center gap-4 border-b py-6 px-2 w-full ${focusedField === 'annotations' ? 'dark:bg-muted/50 bg-black/15' : ''} `}
             >

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 || []
@@ -1124,12 +1123,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>
@@ -1435,12 +1433,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

@@ -123,12 +123,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[];
 }