feat: fixed tags

2025-05-12 19:50:02 +03:00
parent c72ce9baa4
commit 049e6dd912
4 changed files with 464 additions and 482 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();
@@ -374,35 +375,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 +464,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 +518,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 +581,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>
  );
 };