feat: calendar circle colors

src/components/ModalTags.tsx

@@ -1,4 +1,4 @@
-import { IAPITag } from "@/pages/profile_tasks.dto";
+import { IAPITag, IViewTagsResponse } from "@/pages/profile_tasks.dto";
 import apiClient from "@/services/api";
 import { cn } from "@/utils/class-merge";
 import { BookOpenIcon, CheckIcon, DocumentDuplicateIcon, PlusCircleIcon } from "@heroicons/react/24/outline";
@@ -25,7 +25,7 @@ interface ModalTagsProps extends ModalWindowProps {
     first: IAPITag[];
     second: IAPITag[];
   };
-  refreshTags: () => void;
+  refreshTags: () => Promise<IViewTagsResponse | void>;
 }
 
 const ModalTags: FunctionComponent<ModalTagsProps> = ({
@@ -64,7 +64,7 @@ const ModalTags: FunctionComponent<ModalTagsProps> = ({
       { method: "POST", body: JSON.stringify(data) }
     );
     if (response.success) {
-      refreshTags();
+      await refreshTags();
       if (showAddFirstTag) {
         const new_subject_id = response.subject!.id;
         onChange!((prev) => ({ ...prev, first: new_subject_id }));
@@ -89,7 +89,7 @@ const ModalTags: FunctionComponent<ModalTagsProps> = ({
       body: JSON.stringify(data),
     });
     if (!response.error) {
-      refreshTags();
+      await refreshTags();
     } else {
       setShowErrorDialog(true);
       const match = response.error?.match(/\[(.+)\]/);

src/pages/profile_calendar.tsx

@@ -80,16 +80,7 @@ const ProfileCalendar: FunctionComponent = () => {
     setError,
     formState: { errors },
   } = useForm<ITaskForm>({
-    defaultValues: {
+    defaultValues: {},
-      subject: {
-        name: "",
-        id: 0,
-      },
-      taskType: {
-        name: "",
-        id: 0,
-      },
-    },
   });
 
   useEffect(() => {
@@ -146,13 +137,13 @@ const ProfileCalendar: FunctionComponent = () => {
       return;
     }
     if ((!editContent?.subject.id || !editContent.taskType.id) && (!tags.first || !tags.second)) {
-      setError("subject", { message: "Выберите теги" });
+      setError("date", { message: "Выберите теги" });
       return;
     }
 
     try {
-      const selectedSubject = editContent?.subject.id || tags.first;
+      const selectedSubject = tags.first || editContent?.subject.id;
-      const selectedTaskType = editContent?.taskType.id || tags.second;
+      const selectedTaskType = tags.second || editContent?.taskType.id;
 
       // Format date to DD-MM-YYYYTHH:MM
       const formattedDate = calendarDate
@@ -171,8 +162,8 @@ const ProfileCalendar: FunctionComponent = () => {
       const taskData = {
         title: data.name,
         description: data.description || "",
-        subject: selectedSubject,
+        subject_id: selectedSubject,
-        taskType: selectedTaskType,
+        taskType_id: selectedTaskType,
         dateTime_due: formattedDate,
         telegram_notifications: false,
         priority: selectedPriority,
@@ -195,7 +186,17 @@ const ProfileCalendar: FunctionComponent = () => {
 
         if (!response.success) {
           throw new Error(response.message);
-        }
+        } else if (isEdit)
+          setEditContent({
+            name: response.task.title,
+            id: response.task.id.toString(),
+            description: response.task.description,
+            priority: response.task.priority,
+            checked: response.task.isCompleted,
+            subject: response.task.subject,
+            taskType: response.task.task_type,
+            date: new Date(response.task.dateTime_due),
+          });
       }
 
       await fetchTasks();
@@ -295,12 +296,29 @@ const ProfileCalendar: FunctionComponent = () => {
   }, [tags]);
 
   const tasksCount = (date: CalendarDateTemplateEvent) => {
-    return tasks.filter((task) => {
+    const filterTasks = tasks.filter((task) => {
       const taskDate = task.date;
       return (
         taskDate.getDate() === date.day && taskDate.getMonth() === date.month && taskDate.getFullYear() === date.year
       );
-    }).length;
+    });
+    return {
+      length: filterTasks.length,
+      colors: filterTasks.map((task) => {
+        switch (task.priority) {
+          case 1:
+            return "bg-[rgba(18,26,230,1)]";
+          case 2:
+            return "bg-[rgba(97,200,232,1)]";
+          case 3:
+            return "bg-[rgba(247,220,52,1)]";
+          case 4:
+            return "bg-[rgba(251,194,199,1)]";
+          default:
+            return "bg-[rgba(251,194,199,1)]";
+        }
+      }),
+    };
   };
 
   const hasTasksOnDate = (date: CalendarDateTemplateEvent) => {
@@ -314,7 +332,8 @@ const ProfileCalendar: FunctionComponent = () => {
 
   const dateTemplate = (date: CalendarDateTemplateEvent) => {
     const isHighlighted = hasTasksOnDate(date);
-    const countT = tasksCount(date);
+    const taskInfo = tasksCount(date);
+    if (taskInfo.length) console.log(taskInfo);
     const isSelected =
       currentDate &&
       currentDate.getDate() === date.day &&
@@ -338,10 +357,10 @@ const ProfileCalendar: FunctionComponent = () => {
         <span>{date.day}</span>
         {isHighlighted && (
           <div class="absolute top-2 right-2 flex h-fit w-2 flex-col items-center gap-1 md:h-2 md:w-fit md:flex-row">
-            {Array.from({ length: countT > 3 ? 3 : countT }).map((_, i) => (
+            {Array.from({ length: taskInfo.length > 3 ? 3 : taskInfo.length }).map((_, i) => (
-              <span key={i} className="size-2 rounded-full bg-pink-400" />
+              <span key={i} className={cn("size-2 rounded-full", taskInfo.colors[i])} />
             ))}
-            {countT > 3 && <span className="text-xs font-bold text-pink-400 select-none">+</span>}
+            {taskInfo.length > 3 && <span className="text-xs font-bold text-pink-400 select-none">+</span>}
           </div>
         )}
       </div>
@@ -374,35 +393,9 @@ const ProfileCalendar: FunctionComponent = () => {
     month: { className: calendarStyles.month },
     year: { className: calendarStyles.year },
   };
-  if (isLoading)
-    return (
-      <div class="flex h-full w-full flex-1 flex-col items-center justify-center">
-        <div class="flex w-full flex-1 items-center justify-center">Загрузка...</div>;
-      </div>
-    );
 
   return (
     <div class="flex w-full flex-col items-center">
-      <ModalTags
-        refreshTags={fetchTags}
-        isOpen={openModalTags}
-        setIsOpen={setOpenModalTags}
-        tagsList={example_tags}
-        value={tags}
-        onClose={() => {
-          setTags({ first: 0, second: 0, overdue: false });
-        }}
-        onChange={setTags}
-      />
-      <ModalCalendar
-        isOpen={openModalCalendar}
-        setIsOpen={setOpenModalCalendar}
-        onClose={() => {
-          if (isEdit && !isEditModal) setCalendarDate(null);
-        }}
-        onChange={(e) => isEditModal && setCalendarDate(e.value)}
-        value={calendarDate!}
-      />
       <ModalWindow
         isOpen={openModal}
         setIsOpen={setIsOpen}
@@ -489,7 +482,6 @@ 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.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("flex h-full flex-row items-center gap-1 rounded-2xl bg-[rgba(251,194,199,0.38)] px-2 py-1", {
@@ -544,6 +536,30 @@ const ProfileCalendar: FunctionComponent = () => {
           </form>
         )}
       </ModalWindow>
+      {isLoading ? (
+        <div class="flex w-full flex-1 items-center justify-center">Загрузка...</div>
+      ) : (
+        <>
+          <ModalTags
+            refreshTags={fetchTags}
+            isOpen={openModalTags}
+            setIsOpen={setOpenModalTags}
+            tagsList={example_tags}
+            value={tags}
+            onClose={() => {
+              setTags({ first: 0, second: 0, overdue: false });
+            }}
+            onChange={setTags}
+          />
+          <ModalCalendar
+            isOpen={openModalCalendar}
+            setIsOpen={setOpenModalCalendar}
+            onClose={() => {
+              if (isEdit && !isEditModal) setCalendarDate(null);
+            }}
+            onChange={(e) => isEditModal && setCalendarDate(e.value)}
+            value={calendarDate!}
+          />
           <Dialog
             isOpen={showDeleteDialog}
             setIsOpen={setShowDeleteDialog}
@@ -583,6 +599,8 @@ const ProfileCalendar: FunctionComponent = () => {
               <div class="rounded-lg bg-[rgba(251,194,199,0.2)] p-4 text-center">На этот день задач нет</div>
             )}
           </div>
+        </>
+      )}
     </div>
   );
 };

src/pages/profile_tasks.dto.ts

@@ -17,7 +17,7 @@ export interface ITaskView extends Omit<ITask, "taskType"> {
   task_type: IAPITag;
 }
 
-export interface ITaskForm extends Omit<ITask, "date"> {
+export interface ITaskForm extends Omit<ITask, "date" | "subject" | "taskType"> {
   date: string;
 }
 
@@ -80,15 +80,11 @@ export interface IEditTaskResponse {
     id: number;
     title: string;
     description: string;
-    subject: string;
+    subject: IAPITag;
-    taskType: string;
+    task_type: IAPITag;
     dateTime_due: string;
     isCompleted: boolean;
-    reminder?: {
+    priority: number;
-      remind_before_days: number;
-      repeat_interval: number;
-      reminder_time: string;
-    };
   };
 }
 

src/pages/profile_tasks.tsx

@@ -32,7 +32,6 @@ import { Dropdown } from "primereact/dropdown";
 import { SelectItem } from "primereact/selectitem";
 import { Nullable } from "primereact/ts-helpers";
 import { SubmitHandler, useForm } from "react-hook-form";
-import { v4 as uuid } from "uuid";
 import {
   IApiResponse,
   IAPITag,
@@ -87,7 +86,7 @@ const ProfileTasks: FunctionComponent = () => {
     fetchTags();
   }, []);
 
-  const fetchTags = async () => {
+  const fetchTags = async (): Promise<IViewTagsResponse | void> => {
     try {
       const response = await apiClient<IViewTagsResponse>("/api/tags/view_tags/");
       setSubjectChoices(response.subjects);
@@ -126,18 +125,7 @@ const ProfileTasks: FunctionComponent = () => {
     reset,
     setError,
     formState: { errors },
-  } = useForm<ITaskForm>({
+  } = useForm<ITaskForm>({});
-    defaultValues: {
-      subject: {
-        name: "",
-        id: 0,
-      },
-      taskType: {
-        name: "",
-        id: 0,
-      },
-    },
-  });
 
   const example_tags = useMemo(
     () => ({
@@ -153,7 +141,7 @@ const ProfileTasks: FunctionComponent = () => {
       return;
     }
     if ((!editContent?.subject.id || !editContent.taskType.id) && (!tags.first || !tags.second)) {
-      setError("subject", { message: "Выберите теги" });
+      setError("date", { message: "Выберите теги" });
       return;
     }
 
@@ -202,11 +190,20 @@ const ProfileTasks: FunctionComponent = () => {
 
         if (!response.success) {
           throw new Error(response.message);
-        }
+        } else if (isEdit)
+          setEditContent({
+            name: response.task.title,
+            id: response.task.id.toString(),
+            description: response.task.description,
+            priority: response.task.priority,
+            checked: response.task.isCompleted,
+            subject: response.task.subject,
+            taskType: response.task.task_type,
+            date: new Date(response.task.dateTime_due),
+          });
       }
 
       await fetchTasks();
-
       if (isCreating) setIsOpen(false);
       setTags({ first: 0, second: 0, overdue: false });
     } catch (error) {
@@ -223,14 +220,6 @@ const ProfileTasks: FunctionComponent = () => {
       name: "",
       description: "",
       date: "",
-      subject: {
-        name: "",
-        id: 0,
-      },
-      taskType: {
-        name: "",
-        id: 0,
-      },
       priority: 4,
       checked: false,
     });
@@ -385,37 +374,8 @@ const ProfileTasks: FunctionComponent = () => {
     }
   };
 
-  if (isLoading)
-    return (
-      <div class="flex h-full w-full flex-1 flex-col items-center justify-center">
-        <div class="flex w-full flex-1 items-center justify-center">Загрузка...</div>;
-      </div>
-    );
-
   return (
     <div class={classes.container}>
-      <ModalTags
-        refreshTags={fetchTags}
-        zIndex={70}
-        isOpen={openModalTags}
-        setIsOpen={setOpenModalTags}
-        tagsList={example_tags}
-        value={tags}
-        onClose={() => {
-          if (!isCreating) setTags({ first: 0, second: 0, overdue: false });
-        }}
-        onChange={setTags}
-      />
-      <ModalCalendar
-        zIndex={80}
-        isOpen={openModalCalendar}
-        setIsOpen={setOpenModalCalendar}
-        onClose={() => {
-          if (isEdit && !isEditModal) setCalendarDate(null);
-        }}
-        onChange={(e) => (isCreating || isEditModal) && setCalendarDate(e.value)}
-        value={calendarDate!}
-      />
       <ModalWindow
         zIndex={60}
         isOpen={openModal}
@@ -504,7 +464,6 @@ const ProfileTasks: 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.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("flex h-full flex-row items-center gap-1 rounded-2xl bg-[rgba(251,194,199,0.38)] px-2 py-1", {
@@ -524,7 +483,7 @@ const ProfileTasks: FunctionComponent = () => {
                     year: "numeric",
                     hour: "2-digit",
                     minute: "2-digit",
-                  }).format(calendarDate!)}
+                  }).format(calendarDate ?? editContent.date)}
                 </p>
               </div>
               <div
@@ -563,7 +522,7 @@ const ProfileTasks: FunctionComponent = () => {
             class="flex h-full w-full flex-col items-start justify-between"
             onSubmit={(e) => {
               e.preventDefault();
-              handleSubmit((data) => saveTask({ ...data, id: uuid() }))();
+              handleSubmit((data) => saveTask(data))();
             }}
           >
             <div class="flex w-full flex-1 flex-row items-start justify-between">
@@ -609,7 +568,6 @@ const ProfileTasks: FunctionComponent = () => {
             </div>
             {errors.name && <p class="text-red-500">{errors.name.message}</p>}
             {errors.date && <p class="text-red-500">{errors.date.message}</p>}
-            {errors.subject?.message && <p class="text-red-500">{errors.subject.message}</p>}
             <div className="mb-8 flex h-16 flex-col items-center gap-6 self-center md:mb-0 md:flex-row md:self-start">
               <Button
                 className="text-sm"
@@ -626,6 +584,32 @@ const ProfileTasks: FunctionComponent = () => {
           </form>
         )}
       </ModalWindow>
+      {isLoading ? (
+        <div class="flex w-full flex-1 items-center justify-center">Загрузка...</div>
+      ) : (
+        <>
+          <ModalTags
+            refreshTags={fetchTags}
+            zIndex={70}
+            isOpen={openModalTags}
+            setIsOpen={setOpenModalTags}
+            tagsList={example_tags}
+            value={tags}
+            onClose={() => {
+              if (!isCreating) setTags({ first: 0, second: 0, overdue: false });
+            }}
+            onChange={setTags}
+          />
+          <ModalCalendar
+            zIndex={80}
+            isOpen={openModalCalendar}
+            setIsOpen={setOpenModalCalendar}
+            onClose={() => {
+              if (isEdit && !isEditModal) setCalendarDate(null);
+            }}
+            onChange={(e) => (isCreating || isEditModal) && setCalendarDate(e.value)}
+            value={calendarDate!}
+          />
           <Dialog
             isOpen={showDeleteDialog}
             setIsOpen={setShowDeleteDialog}
@@ -977,6 +961,8 @@ const ProfileTasks: FunctionComponent = () => {
               </div>
             </div>
           )}
+        </>
+      )}
     </div>
   );
 };