feat: add and edit task modal

src/components/task.tsx

@@ -5,6 +5,7 @@ import classes from "./task.module.scss";
 interface TaskProps {
   name: string;
   checked?: boolean;
+  onClick?: () => void;
 }
 
 const taskStyle = tv({
@@ -27,10 +28,10 @@ const markStyle = tv({
   },
 });
 
-const Task: FunctionComponent<TaskProps> = ({ name, checked = false }: TaskProps) => {
+const Task: FunctionComponent<TaskProps> = ({ name, checked = false, onClick = () => {} }: TaskProps) => {
   return (
     // Временное действие для тестирования
-    <button onClick={() => alert(name)} class="w-[95%]">
+    <button onClick={onClick} class="w-[95%]">
       <div class={classes.task}>
         <div class={taskStyle({ checked })}>
           <p class={markStyle({ checked })}>✓</p>

src/components/ui/Button.tsx

@@ -7,18 +7,25 @@ const button = tv({
     color: {
       primary: "bg-[rgba(206,232,251,0.7)] hover:bg-[rgba(206,232,251,0.9)] active:bg-[rgba(206,232,251,0.9)]",
       secondary: "bg-[rgba(255,251,197,0.68)] hover:bg-[rgba(255,251,197,0.9)] active:bg-[rgba(255,251,197,0.9)]",
+      red: "bg-[rgba(251,194,199,0.53)] hover:bg-[rgba(251,194,199,0.9)] active:bg-[rgba(251,194,199,0.9)]",
     },
   },
 });
 
 interface ButtonProps {
-  color?: "primary" | "secondary";
+  color?: "primary" | "secondary" | "red";
   onClick?: () => void;
+  className?: string;
 }
 
-const Button: FunctionComponent<ButtonProps> = ({ children, onClick = () => {}, color = "primary" }) => {
+const Button: FunctionComponent<ButtonProps> = ({
+  children,
+  onClick = () => {},
+  color = "primary",
+  className = "",
+}) => {
   return (
-    <button type="button" class={button({ color: color })} onClick={onClick}>
+    <button type="button" class={button({ color: color, class: className })} onClick={onClick}>
       {children}
     </button>
   );

src/components/ui/Modal.tsx

@@ -0,0 +1,38 @@
+import { cn } from "@/utils/class-merge";
+import { FunctionComponent } from "preact";
+import { Dispatch, StateUpdater, useEffect } from "preact/hooks";
+
+interface ModalWindowProps {
+  isOpen?: boolean;
+  setIsOpen?: Dispatch<StateUpdater<boolean>>;
+  onClose?: () => void;
+}
+const ModalWindow: FunctionComponent<ModalWindowProps> = ({ isOpen, children, setIsOpen, onClose }) => {
+  useEffect(() => {
+    if (isOpen) return;
+    if (onClose) onClose();
+  }, [isOpen]);
+  return (
+    <div
+      onClick={(e) => {
+        e.stopPropagation();
+        if (setIsOpen) setIsOpen(false);
+      }}
+      class={cn(
+        "fixed top-0 left-0 z-50 flex h-screen w-screen cursor-pointer flex-col items-center justify-center bg-black/50",
+        {
+          hidden: !isOpen,
+        }
+      )}
+    >
+      <div
+        class="h-[40rem] w-[95%] cursor-auto rounded-[4rem] bg-white px-8 py-12 md:me-[20rem] md:h-[20rem] md:w-[65%] md:px-16"
+        onClick={(e) => e.stopPropagation()}
+      >
+        {children}
+      </div>
+    </div>
+  );
+};
+
+export default ModalWindow;

src/pages/profile_tasks.dto.ts

@@ -0,0 +1,8 @@
+export interface ITask {
+  id: number;
+  name: string;
+  checked: boolean;
+  date: Date;
+  description: string;
+  tags: string[];
+}

src/pages/profile_tasks.tsx

@@ -1,13 +1,49 @@
 import Task from "@/components/task";
+import Button from "@/components/ui/Button";
+import ModalWindow from "@/components/ui/Modal";
 import { withTitle } from "@/constructors/Component";
 import { UrlsTitle } from "@/enums/urls";
 import { PlusIcon } from "@heroicons/react/20/solid";
-import { FunnelIcon, MagnifyingGlassIcon } from "@heroicons/react/24/outline";
+import {
+  BookmarkIcon,
+  BookOpenIcon,
+  CalendarDaysIcon,
+  DocumentDuplicateIcon,
+  FunnelIcon,
+  MagnifyingGlassIcon,
+  PencilIcon,
+} from "@heroicons/react/24/outline";
 import { FunctionComponent } from "preact";
-import { useMemo } from "preact/hooks";
+import { useMemo, useRef, useState } from "preact/hooks";
+import { ITask } from "./profile_tasks.dto";
 import classes from "./profile_tasks.module.scss";
 
-const example_tasks = ["Test 1", "Test 2", "Test 3", "Test 4", "Test 5", "Test 6", "Test 7", "Test 8"];
+const example_tasks: ITask[] = [
+  {
+    checked: false,
+    date: new Date(),
+    description: "test",
+    id: 1,
+    name: "test1",
+    tags: ["Программирование", "Лабораторная работа"],
+  },
+  {
+    checked: true,
+    date: new Date(2025, 6, 2),
+    description: "test2",
+    id: 3,
+    name: "test3",
+    tags: ["Информатика", "Практическая работа"],
+  },
+  {
+    checked: false,
+    date: new Date(2025, 5, 1),
+    description: "test3",
+    id: 2,
+    name: "test2",
+    tags: ["Математика", "Домашнее задание"],
+  },
+];
 
 const ProfileTasks: FunctionComponent = () => {
   const getDate = useMemo(() => {
@@ -15,18 +51,140 @@ const ProfileTasks: FunctionComponent = () => {
     const formatter = new Intl.DateTimeFormat("ru-RU", { month: "long", day: "numeric" });
     return formatter.format(date);
   }, []);
+  const [tasks, setTasks] = useState(example_tasks);
+  const [openModal, setIsOpen] = useState(false);
+  const [isEdit, setIsEdit] = useState(false);
+  const [isCreating, setIsCreating] = useState(false);
+  const [editContent, setEditContent] = useState<ITask | null>(null);
+  const taskNameRef = useRef<HTMLInputElement>(null);
+  const taskDescriptionRef = useRef<HTMLTextAreaElement>(null);
   return (
     <div class={classes.container}>
-      {example_tasks.length > 0 ? (
+      <ModalWindow
+        isOpen={openModal}
+        setIsOpen={setIsOpen}
+        onClose={() => {
+          setIsEdit(false);
+          setEditContent(null);
+          setIsCreating(false);
+        }}
+      >
+        {isEdit && editContent && (
+          <div class="flex h-full w-full flex-col items-start justify-between">
+            <div class="flex w-full flex-row items-start justify-between">
+              <div class="flex flex-col">
+                <p class="text-2xl">{editContent.name}</p>
+                <p>{editContent.description}</p>
+              </div>
+              <div className="flex cursor-pointer flex-col items-center gap-3">
+                <PencilIcon class="size-6" />
+                <p class="text-[0.7rem]">Редактировать</p>
+              </div>
+            </div>
+            <div class="flex flex-col items-center gap-6 self-center md:flex-row md:justify-start md:self-start">
+              <div class="flex h-full flex-row items-center gap-1 rounded-2xl bg-[rgba(251,194,199,0.38)] px-2 py-1">
+                <CalendarDaysIcon class="size-10" />
+                <p>
+                  {Intl.DateTimeFormat("ru-RU", {
+                    day: "2-digit",
+                    month: "2-digit",
+                    year: "numeric",
+                    hour: "2-digit",
+                    minute: "2-digit",
+                  }).format(editContent.date)}
+                </p>
+              </div>
+              <div class="flex h-full flex-col items-start gap-1 rounded-2xl bg-[rgba(251,194,199,0.38)] px-4 py-2">
+                <p class="flex flex-row gap-2">
+                  <BookOpenIcon class="size-5" />
+                  {editContent.tags[0]}
+                </p>
+                <p class="flex flex-row gap-2">
+                  <DocumentDuplicateIcon class="size-5" />
+                  {editContent.tags[1]}
+                </p>
+              </div>
+            </div>
+          </div>
+        )}
+        {isCreating && (
+          <div class="flex h-full w-full flex-col items-start justify-between">
+            <div class="flex w-full flex-row items-start justify-between">
+              <div class="me-4 flex flex-1 flex-col gap-1">
+                <input class="text-2xl outline-0" maxLength={20} placeholder="Название" ref={taskNameRef} />
+                <textarea
+                  class="h-[5rem] w-full resize-none outline-0"
+                  maxLength={200}
+                  placeholder="Описание"
+                  ref={taskDescriptionRef}
+                />
+              </div>
+              <CalendarDaysIcon class="size-10 cursor-pointer" />
+              <BookmarkIcon class="ms-4 size-10 cursor-pointer" />
+            </div>
+            <div className="flex h-16 flex-row gap-6">
+              <Button
+                className="text-sm"
+                onClick={() => {
+                  setIsOpen(false);
+                }}
+              >
+                Отмена
+              </Button>
+              <Button
+                color="red"
+                onClick={() => {
+                  if (taskNameRef.current && taskDescriptionRef.current) {
+                    if (!taskNameRef.current.value || !taskDescriptionRef.current.value) {
+                      alert("Заполните все поля");
+                      return;
+                    }
+                    const task: ITask = {
+                      id: tasks.length + 1,
+                      name: taskNameRef.current.value,
+                      description: taskDescriptionRef.current.value,
+                      date: new Date(),
+                      checked: false,
+                      tags: ["Математика", "Домашнее задание"],
+                    };
+                    setTasks([...tasks, task]);
+                    setIsOpen(false);
+                  }
+                }}
+              >
+                Добавить задачу
+              </Button>
+            </div>
+          </div>
+        )}
+      </ModalWindow>
+      {tasks.length > 0 ? (
         <>
           <div class={classes.header}>Сегодня: {getDate}</div>
           <div class={classes.tasks_container}>
-            {example_tasks.map((task, index) => (
+            {tasks
-              <Task name={task} key={index} checked={index % 2 === 0} />
+              .sort((a, b) => b.id - a.id)
+              .map((task) => (
+                <Task
+                  name={task.name}
+                  key={task.id}
+                  checked={task.checked}
+                  onClick={() => {
+                    setIsOpen(true);
+                    setIsEdit(true);
+                    setEditContent(task);
+                  }}
+                />
               ))}
           </div>
           <div class="group fixed right-[22rem] bottom-4 hidden flex-row items-center justify-start space-x-3 overflow-x-hidden py-2 md:flex">
-            <div class="flex aspect-square h-20 cursor-pointer items-center justify-center rounded-full bg-[rgb(251,194,199,0.53)] text-9xl text-white shadow-[0px_4px_4px_0px_rgba(0,0,0,0.25)] transition-all duration-300 ease-out group-hover:ml-[12rem] hover:bg-[rgb(251,194,199,0.7)]">
+            <div
+              class="flex aspect-square h-20 cursor-pointer items-center justify-center rounded-full bg-[rgb(251,194,199,0.53)] text-9xl text-white shadow-[0px_4px_4px_0px_rgba(0,0,0,0.25)] transition-all duration-300 ease-out group-hover:ml-[12rem] hover:bg-[rgb(251,194,199,0.7)]"
+              onClick={() => {
+                setIsCreating(true);
+                setIsOpen(true);
+              }}
+            >
               <PlusIcon />
             </div>
             <div class="absolute left-0 my-auto flex flex-row space-x-3 opacity-0 transition-opacity duration-100 group-hover:opacity-100">
@@ -43,7 +201,13 @@ const ProfileTasks: FunctionComponent = () => {
         <>
           <div class="flex w-full flex-1 flex-col items-center justify-center text-2xl">Начни уже сегодня!</div>
           <div class="fixed right-[22rem] bottom-4 hidden flex-row items-center justify-start overflow-x-hidden py-2 md:flex">
-            <div class="flex aspect-square h-20 cursor-pointer items-center justify-center rounded-full bg-[rgb(251,194,199,0.53)] text-9xl text-white shadow-[0px_4px_4px_0px_rgba(0,0,0,0.25)] transition-all duration-300 ease-out hover:bg-[rgb(251,194,199,0.7)]">
+            <div
+              class="flex aspect-square h-20 cursor-pointer items-center justify-center rounded-full bg-[rgb(251,194,199,0.53)] text-9xl text-white shadow-[0px_4px_4px_0px_rgba(0,0,0,0.25)] transition-all duration-300 ease-out hover:bg-[rgb(251,194,199,0.7)]"
+              onClick={() => {
+                setIsCreating(true);
+                setIsOpen(true);
+              }}
+            >
               <PlusIcon />
             </div>
           </div>