feat: tasks group by date and delete

2025-04-27 14:05:13 +03:00
parent a2fe9bcfd7
commit 5086b64200
2 changed files with 218 additions and 39 deletions
--- a/src/components/ui/Dialog.tsx
+++ b/src/components/ui/Dialog.tsx
@@ -0,0 +1,52 @@
+import { FunctionComponent } from "preact";
+import Button from "./Button";
+
+interface DialogProps {
+  isOpen: boolean;
+  setIsOpen: (isOpen: boolean) => void;
+  title: string;
+  content: string;
+  onConfirm: () => void;
+  confirmText?: string;
+  cancelText?: string;
+}
+
+const Dialog: FunctionComponent<DialogProps> = ({
+  isOpen,
+  setIsOpen,
+  title,
+  content,
+  onConfirm,
+  confirmText = "Подтвердить",
+  cancelText = "Отмена",
+}) => {
+  if (!isOpen) return null;
+
+  return (
+    <div class="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
+      <div class="w-full max-w-md rounded-[4rem] bg-white p-6 shadow-lg">
+        <h2 class="mb-4 text-xl font-semibold">{title}</h2>
+        <p class="mb-6">{content}</p>
+        <div class="flex justify-end gap-4">
+          <Button
+            onClick={() => setIsOpen(false)}
+            className="bg-gray-200 text-gray-800 hover:bg-gray-300"
+          >
+            {cancelText}
+          </Button>
+          <Button
+            onClick={() => {
+              onConfirm();
+              setIsOpen(false);
+            }}
+            color="red"
+          >
+            {confirmText}
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Dialog; 
--- a/src/pages/profile_tasks.tsx
+++ b/src/pages/profile_tasks.tsx
@@ -17,6 +17,7 @@ import {
  InboxArrowDownIcon,
  MagnifyingGlassIcon,
  PencilIcon,
+  TrashIcon,
 } from "@heroicons/react/24/outline";
 import { FunctionComponent } from "preact";
 import { useEffect, useMemo, useState } from "preact/hooks";
@@ -25,6 +26,7 @@ import { SubmitHandler, useForm } from "react-hook-form";
 import { v4 as uuid } from "uuid";
 import { ITask, ITaskForm } from "./profile_tasks.dto";
 import classes from "./profile_tasks.module.scss";
+import Dialog from "@/components/ui/Dialog";

 const example_tags: { first: string[]; second: string[] } = {
  first: ["Программирование", "Информатика", "Физика", "Математика"],
@@ -41,6 +43,7 @@ const ProfileTasks: FunctionComponent = () => {
  const [editContent, setEditContent] = useState<ITask | null>(null); // Содержимое редактируемой задачи
  const [calendarDate, setCalendarDate] = useState<Nullable<Date>>(); // Выбранная в календаре дата
  const [tags, setTags] = useState<ITags>({ first: "", second: "" });
+  const [showDeleteDialog, setShowDeleteDialog] = useState(false);
  const getDate = useMemo(() => {
    const date = new Date();
    const formatter = new Intl.DateTimeFormat("ru-RU", { month: "long", day: "numeric" });
@@ -110,6 +113,67 @@ const ProfileTasks: FunctionComponent = () => {
    if (tags.second) newEditContent.tags = [newEditContent.tags[0], tags.second];
    setEditContent(newEditContent);
  }, [tags]);
+
+  const groupTasksByDate = useMemo(() => {
+    const today = new Date();
+    today.setHours(0, 0, 0, 0);
+    
+    const tomorrow = new Date(today);
+    tomorrow.setDate(tomorrow.getDate() + 1);
+    
+    const groupedTasks = {
+      today: [] as ITask[],
+      tomorrow: [] as ITask[],
+      future: [] as { date: Date; tasks: ITask[] }[],
+    };
+
+    tasks.forEach(task => {
+      const taskDate = new Date(task.date);
+      taskDate.setHours(0, 0, 0, 0);
+      
+      if (taskDate.getTime() === today.getTime()) {
+        groupedTasks.today.push(task);
+      } else if (taskDate.getTime() === tomorrow.getTime()) {
+        groupedTasks.tomorrow.push(task);
+      } else if (taskDate > tomorrow) {
+        const existingGroup = groupedTasks.future.find(group => 
+          group.date.getTime() === taskDate.getTime()
+        );
+        
+        if (existingGroup) {
+          existingGroup.tasks.push(task);
+        } else {
+          groupedTasks.future.push({ date: taskDate, tasks: [task] });
+        }
+      }
+    });
+
+    // Sort tasks within each group
+    groupedTasks.today.sort((a, b) => a.date.getTime() - b.date.getTime());
+    groupedTasks.tomorrow.sort((a, b) => a.date.getTime() - b.date.getTime());
+    groupedTasks.future.sort((a, b) => a.date.getTime() - b.date.getTime());
+    groupedTasks.future.forEach(group => {
+      group.tasks.sort((a, b) => a.date.getTime() - b.date.getTime());
+    });
+
+    return groupedTasks;
+  }, [tasks]);
+
+  const formatDate = (date: Date) => {
+    return new Intl.DateTimeFormat("ru-RU", {
+      day: "numeric",
+      month: "long",
+      year: "numeric"
+    }).format(date);
+  };
+
+  const handleDeleteTask = () => {
+    if (!editContent) return;
+    setTasks(tasks.filter((task) => task.id !== editContent.id));
+    setIsOpen(false);
+    setShowDeleteDialog(false);
+  };
+
  return (
    <div class={classes.container}>
      <ModalTags
@@ -179,27 +243,35 @@ const ProfileTasks: FunctionComponent = () => {
                />
                <input type="checkbox" hidden {...register("checked")} />
              </div>
-              <div
-                className="flex cursor-pointer flex-col items-center gap-3"
-                onClick={() => {
-                  if (isEditModal) {
-                    handleSubmit(saveTask)();
-                    setIsEditModal(!isEditModal);
-                  } else setIsEditModal(!isEditModal);
-                }}
-              >
-                {isEditModal ? (
-                  <>
-                    <InboxArrowDownIcon class="size-6" />
-                    <p class="text-[0.7rem]">Сохранить</p>
-                  </>
-                ) : (
-                  <>
-                    {" "}
-                    <PencilIcon class="size-6" />
-                    <p class="text-[0.7rem]">Редактировать</p>
-                  </>
-                )}
+              <div class="flex flex-row gap-4">
+                <div
+                  className="flex cursor-pointer flex-col items-center gap-3"
+                  onClick={() => {
+                    if (isEditModal) {
+                      handleSubmit(saveTask)();
+                      setIsEditModal(!isEditModal);
+                    } else setIsEditModal(!isEditModal);
+                  }}
+                >
+                  {isEditModal ? (
+                    <>
+                      <InboxArrowDownIcon class="size-6" />
+                      <p class="text-[0.7rem]">Сохранить</p>
+                    </>
+                  ) : (
+                    <>
+                      <PencilIcon class="size-6" />
+                      <p class="text-[0.7rem]">Редактировать</p>
+                    </>
+                  )}
+                </div>
+                <div
+                  className="flex cursor-pointer flex-col items-center gap-3"
+                  onClick={() => setShowDeleteDialog(true)}
+                >
+                  <TrashIcon class="size-6" />
+                  <p class="text-[0.7rem]">Удалить</p>
+                </div>
              </div>
            </div>
            {errors.name && <p class="text-red-500">{errors.name.message}</p>}
@@ -310,28 +382,83 @@ const ProfileTasks: FunctionComponent = () => {
          </form>
        )}
      </ModalWindow>
+      <Dialog
+        isOpen={showDeleteDialog}
+        setIsOpen={setShowDeleteDialog}
+        title="Удаление задачи"
+        content="Вы уверены, что хотите удалить эту задачу?"
+        onConfirm={handleDeleteTask}
+        confirmText="Удалить"
+        cancelText="Отмена"
+      />
      {tasks.length > 0 ? (
        <>
          <div class={classes.header}>Сегодня: {getDate}</div>
          <div class={classes.tasks_container}>
-            {tasks
-              .sort((a, b) => b.date.getTime() - a.date.getTime())
-              .map((task) => (
-                <Task
-                  name={task.name}
-                  key={task.id}
-                  checked={task.checked}
-                  onClick={() => {
-                    setIsOpen(true);
-                    setIsEdit(true);
-                    setEditContent(task);
-                    setCalendarDate(task.date);
-                  }}
-                  onMarkClick={() => {
-                    setTasks(tasks.map((t) => (t.id === task.id ? { ...t, checked: !t.checked } : t)));
-                  }}
-                />
-              ))}
+            {groupTasksByDate.today.length > 0 ? (
+              <div class="w-full">
+                {groupTasksByDate.today.map((task) => (
+                  <Task
+                    name={task.name}
+                    key={task.id}
+                    checked={task.checked}
+                    onClick={() => {
+                      setIsOpen(true);
+                      setIsEdit(true);
+                      setEditContent(task);
+                      setCalendarDate(task.date);
+                    }}
+                    onMarkClick={() => {
+                      setTasks(tasks.map((t) => (t.id === task.id ? { ...t, checked: !t.checked } : t)));
+                    }}
+                  />
+                ))}
+              </div>
+            ) : (
+              <div class="w-full text-center text-xl">Задач на сегодня нет</div>
+            )}
+            {groupTasksByDate.tomorrow.length > 0 && (
+              <div class="flex w-full flex-col gap-3 md:gap-10">
+                <div class="w-full text-3xl font-semibold md:text-5xl">Завтра</div>
+                {groupTasksByDate.tomorrow.map((task) => (
+                  <Task
+                    name={task.name}
+                    key={task.id}
+                    checked={task.checked}
+                    onClick={() => {
+                      setIsOpen(true);
+                      setIsEdit(true);
+                      setEditContent(task);
+                      setCalendarDate(task.date);
+                    }}
+                    onMarkClick={() => {
+                      setTasks(tasks.map((t) => (t.id === task.id ? { ...t, checked: !t.checked } : t)));
+                    }}
+                  />
+                ))}
+              </div>
+            )}
+            {groupTasksByDate.future.map((group) => (
+              <div class="flex w-full flex-col gap-3 md:gap-10" key={group.date.getTime()}>
+                <div class="w-full text-3xl font-semibold md:text-5xl">{formatDate(group.date)}</div>
+                {group.tasks.map((task) => (
+                  <Task
+                    name={task.name}
+                    key={task.id}
+                    checked={task.checked}
+                    onClick={() => {
+                      setIsOpen(true);
+                      setIsEdit(true);
+                      setEditContent(task);
+                      setCalendarDate(task.date);
+                    }}
+                    onMarkClick={() => {
+                      setTasks(tasks.map((t) => (t.id === task.id ? { ...t, checked: !t.checked } : t)));
+                    }}
+                  />
+                ))}
+              </div>
+            ))}
          </div>
          <div class="group fixed right-1 bottom-16 flex flex-row items-center justify-start space-x-3 overflow-x-hidden py-2 md:right-[22rem] md:bottom-4">
            <div