feat: new tag system

src/pages/profile_calendar.tsx

@@ -22,12 +22,14 @@ import { Nullable } from "primereact/ts-helpers";
 import { SubmitHandler, useForm } from "react-hook-form";
 import {
   IApiResponse,
+  IAPITag,
   ICreateTaskResponse,
   IDeleteTaskResponse,
   IEditTaskResponse,
   ITask,
   ITaskDetails,
   ITaskForm,
+  IViewTagsResponse,
 } from "./profile_tasks.dto";
 
 const calendarStyles = {
@@ -61,10 +63,10 @@ const ProfileCalendar: FunctionComponent = () => {
   const [isEditModal, setIsEditModal] = useState(false);
   const [editContent, setEditContent] = useState<ITask | null>(null);
   const [calendarDate, setCalendarDate] = useState<Nullable<Date>>();
-  const [tags, setTags] = useState<ITags>({ first: "", second: "", overdue: false });
+  const [tags, setTags] = useState<ITags>({ first: 0, second: 0, overdue: false });
   const [showDeleteDialog, setShowDeleteDialog] = useState(false);
-  const [subjectChoices, setSubjectChoices] = useState<Record<string, string>>({});
-  const [taskTypeChoices, setTaskTypeChoices] = useState<Record<string, string>>({});
+  const [subjectChoices, setSubjectChoices] = useState<IAPITag[]>([]);
+  const [taskTypeChoices, setTaskTypeChoices] = useState<IAPITag[]>([]);
   const [isLoading, setIsLoading] = useState(true);
 
   const {
@@ -75,29 +77,46 @@ const ProfileCalendar: FunctionComponent = () => {
     formState: { errors },
   } = useForm<ITaskForm>({
     defaultValues: {
-      tags: [],
+      subject: {
+        name: "",
+        id: 0,
+      },
+      taskType: {
+        name: "",
+        id: 0,
+      },
     },
   });
 
   useEffect(() => {
     fetchTasks();
+    fetchTags();
   }, []);
 
+  const fetchTags = async () => {
+    try {
+      const response = await apiClient<IViewTagsResponse>("/api/tags/view_tags/");
+      setSubjectChoices(response.subjects);
+      setTaskTypeChoices(response.taskTypes);
+    } catch (error) {
+      console.error("Failed to fetch tags:", error);
+    }
+  };
+
   const fetchTasks = async () => {
     try {
       setIsLoading(true);
       const response = await apiClient<IApiResponse>("/api/tasks/view_tasks/");
 
-      setSubjectChoices(response.subject_choices);
-      setTaskTypeChoices(response.task_type_choices);
-
       const convertedTasks: ITask[] = response.tasks.map((apiTask) => ({
         id: apiTask.id.toString(),
         name: apiTask.title,
         checked: apiTask.isCompleted,
         date: new Date(apiTask.due_date),
         description: apiTask.description,
-        tags: [apiTask.subject, apiTask.task_type],
+        priority: apiTask.priority,
+        subject: apiTask.subject,
+        taskType: apiTask.taskType,
         new: false,
       }));
 
@@ -111,8 +130,8 @@ const ProfileCalendar: FunctionComponent = () => {
 
   const example_tags = useMemo(
     () => ({
-      first: Object.keys(subjectChoices),
-      second: Object.keys(taskTypeChoices),
+      first: subjectChoices,
+      second: taskTypeChoices,
     }),
     [subjectChoices, taskTypeChoices]
   );
@@ -122,14 +141,14 @@ const ProfileCalendar: FunctionComponent = () => {
       setError("date", { message: "Выберите дату" });
       return;
     }
-    if ((!editContent?.tags[0] || !editContent.tags[1]) && (!tags.first || !tags.second)) {
-      setError("tags", { message: "Выберите теги" });
+    if ((!editContent?.subject.id || !editContent.taskType.id) && (!tags.first || !tags.second)) {
+      setError("subject", { message: "Выберите теги" });
       return;
     }
 
     try {
-      const selectedSubject = editContent?.tags[0] || tags.first;
-      const selectedTaskType = editContent?.tags[1] || tags.second;
+      const selectedSubject = editContent?.subject.id || tags.first;
+      const selectedTaskType = editContent?.taskType.id || tags.second;
 
       // Format date to DD-MM-YYYYTHH:MM
       const formattedDate = calendarDate
@@ -176,7 +195,7 @@ const ProfileCalendar: FunctionComponent = () => {
 
       await fetchTasks();
       setIsOpen(false);
-      setTags({ first: "", second: "", overdue: false });
+      setTags({ first: 0, second: 0, overdue: false });
     } catch (error) {
       console.error("Failed to save task:", error);
     }
@@ -226,8 +245,9 @@ const ProfileCalendar: FunctionComponent = () => {
         checked: false,
         date: new Date(taskDetails.dateTime_due),
         description: taskDetails.description,
-        tags: [taskDetails.subject, taskDetails.taskType],
-        new: false,
+        subject: taskDetails.subject,
+        taskType: taskDetails.task_type,
+        priority: taskDetails.priority,
       };
 
       setIsOpen(true);
@@ -263,8 +283,8 @@ const ProfileCalendar: FunctionComponent = () => {
   useEffect(() => {
     if (!editContent) return;
     const newEditContent = editContent;
-    if (tags.first) newEditContent.tags = [tags.first, newEditContent.tags[1]];
-    if (tags.second) newEditContent.tags = [newEditContent.tags[0], tags.second];
+    if (tags.first) newEditContent.subject = subjectChoices.find((tag) => tag.id === tags.first)!;
+    if (tags.second) newEditContent.taskType = taskTypeChoices.find((tag) => tag.id === tags.second)!;
     setEditContent(newEditContent);
   }, [tags]);
 
@@ -363,7 +383,7 @@ const ProfileCalendar: FunctionComponent = () => {
             tagsList={example_tags}
             value={tags}
             onClose={() => {
-              setTags({ first: "", second: "", overdue: false });
+              setTags({ first: 0, second: 0, overdue: false });
             }}
             onChange={setTags}
           />
@@ -383,7 +403,7 @@ const ProfileCalendar: FunctionComponent = () => {
               setIsEdit(false);
               setEditContent(null);
               setIsEditModal(false);
-              setTags({ first: "", second: "", overdue: false });
+              setTags({ first: 0, second: 0, overdue: false });
               setCalendarDate(null);
             }}
           >
@@ -461,7 +481,7 @@ const ProfileCalendar: FunctionComponent = () => {
                 {errors.name && <p class="text-red-500">{errors.name.message}</p>}
                 {errors.description && <p class="text-red-500">{errors.description.message}</p>}
                 {errors.date && <p class="text-red-500">{errors.date.message}</p>}
-                {errors.tags && <p class="text-red-500">{errors.tags.message}</p>}
+                {errors.subject && <p class="text-red-500">{errors.subject.message}</p>}
                 <div class="flex flex-col items-center gap-6 self-center md:flex-row md:justify-start md:self-start">
                   <div
                     class={cn(
@@ -496,17 +516,17 @@ const ProfileCalendar: FunctionComponent = () => {
                     )}
                     onClick={() => {
                       if (!isEditModal) return;
-                      setTags({ first: editContent.tags[0], second: editContent.tags[1], overdue: false });
+                      setTags({ first: editContent.subject.id, second: editContent.taskType.id, overdue: false });
                       setOpenModalTags(true);
                     }}
                   >
                     <p class="flex flex-row gap-2">
                       <BookOpenIcon class="size-5" />
-                      {editContent.tags[0]}
+                      {editContent.subject.name}
                     </p>
                     <p class="flex flex-row gap-2">
                       <DocumentDuplicateIcon class="size-5" />
-                      {editContent.tags[1]}
+                      {editContent.taskType.name}
                     </p>
                   </div>
                 </div>