feat: calendar circle colors

feat: fixed tags
2025-05-15 16:36:15 +03:00 · 2025-05-12 19:50:02 +03:00
4 changed files with 488 additions and 488 deletions
--- a/src/components/ModalTags.tsx
+++ b/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(/\[(.+)\]/);
--- a/src/pages/profile_calendar.tsx
+++ b/src/pages/profile_calendar.tsx
@@ -80,16 +80,7 @@ const ProfileCalendar: FunctionComponent = () => {
    setError,
    formState: { errors },
  } = useForm<ITaskForm>({
-    defaultValues: {
-      subject: {
-        name: "",
-        id: 0,
-      },
-      taskType: {
-        name: "",
-        id: 0,
-      },
-    },
+    defaultValues: {},
  });

  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 selectedTaskType = editContent?.taskType.id || tags.second;
+      const selectedSubject = tags.first || editContent?.subject.id;
+      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,
-        taskType: selectedTaskType,
+        subject_id: selectedSubject,
+        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) => (
-              <span key={i} className="size-2 rounded-full bg-pink-400" />
+            {Array.from({ length: taskInfo.length > 3 ? 3 : taskInfo.length }).map((_, i) => (
+              <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>
  );
 };
--- a/src/pages/profile_tasks.dto.ts
+++ b/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;
-    taskType: string;
+    subject: IAPITag;
+    task_type: IAPITag;
    dateTime_due: string;
    isCompleted: boolean;
-    reminder?: {
-      remind_before_days: number;
-      repeat_interval: number;
-      reminder_time: string;
-    };
+    priority: number;
  };
 }

--- a/src/pages/profile_tasks.tsx
+++ b/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>({
-    defaultValues: {
-      subject: {
-        name: "",
-        id: 0,
-      },
-      taskType: {
-        name: "",
-        id: 0,
-      },
-    },
-  });
+  } = useForm<ITaskForm>({});

  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>
  );
 };
Author	SHA1	Message	Date
Sergey Elpashev	f6b19767f2	feat: calendar circle colors	2025-05-15 16:36:15 +03:00
Sergey Elpashev	049e6dd912	feat: fixed tags	2025-05-12 19:50:02 +03:00