feat: task status change

src/components/ModalCalendar.tsx

@@ -199,4 +199,6 @@ const ModalCalendar: FunctionComponent<ModalCalendarProps> = ({ isOpen, setIsOpe
   );
 };
 
+ModalCalendar.displayName = "AHModalCalendar";
+
 export default ModalCalendar;

src/components/task.tsx

@@ -1,4 +1,5 @@
 import { FunctionComponent } from "preact";
+import { MouseEventHandler } from "preact/compat";
 import { tv } from "tailwind-variants";
 import classes from "./task.module.scss";
 
@@ -6,10 +7,11 @@ interface TaskProps {
   name: string;
   checked?: boolean;
   onClick?: () => void;
+  onMarkClick?: MouseEventHandler<HTMLParagraphElement>;
 }
 
 const taskStyle = tv({
-  base: "flex aspect-square h-full flex-col items-center justify-center rounded-full border",
+  base: "hover:scale-[1.1]active:scale-[1.1] flex aspect-square h-full flex-col items-center justify-center rounded-full border transition-[scale] duration-100 ease-in-out select-none",
   variants: {
     checked: {
       true: "bg-black",
@@ -28,18 +30,26 @@ const markStyle = tv({
   },
 });
 
-const Task: FunctionComponent<TaskProps> = ({ name, checked = false, onClick = () => {} }: TaskProps) => {
+const Task: FunctionComponent<TaskProps> = ({ name, checked = false, onClick = () => {}, onMarkClick = () => {} }) => {
   return (
     // Временное действие для тестирования
-    <button onClick={onClick} class="w-[95%]">
+    <div class="w-[95%]">
-      <div class={classes.task}>
+      <div class={classes.task} onClick={onClick}>
-        <div class={taskStyle({ checked })}>
+        <div
+          class={taskStyle({ checked })}
+          onClick={(e) => {
+            e.stopPropagation();
+            onMarkClick(e);
+          }}
+        >
           <p class={markStyle({ checked })}>✓</p>
         </div>
         {name}
       </div>
-    </button>
+    </div>
   );
 };
 
+Task.displayName = "AHTask";
+
 export default Task;

src/pages/profile_tasks.dto.ts

@@ -6,3 +6,7 @@ export interface ITask {
   description: string;
   tags: string[];
 }
+
+export interface ITaskForm extends Omit<ITask, "date"> {
+  date: string;
+}

src/pages/profile_tasks.tsx

@@ -5,6 +5,7 @@ import Button from "@/components/ui/Button";
 import ModalWindow from "@/components/ui/Modal";
 import { withTitle } from "@/constructors/Component";
 import { UrlsTitle } from "@/enums/urls";
+import { cn } from "@/utils/class-merge";
 import { PlusIcon } from "@heroicons/react/20/solid";
 import {
   BookmarkIcon,
@@ -12,13 +13,15 @@ import {
   CalendarDaysIcon,
   DocumentDuplicateIcon,
   FunnelIcon,
+  InboxArrowDownIcon,
   MagnifyingGlassIcon,
   PencilIcon,
 } from "@heroicons/react/24/outline";
 import { FunctionComponent } from "preact";
-import { useEffect, useMemo, useRef, useState } from "preact/hooks";
+import { useEffect, useMemo, useState } from "preact/hooks";
 import { Nullable } from "primereact/ts-helpers";
-import { ITask } from "./profile_tasks.dto";
+import { SubmitHandler, useForm } from "react-hook-form";
+import { ITask, ITaskForm } from "./profile_tasks.dto";
 import classes from "./profile_tasks.module.scss";
 
 const example_tasks: ITask[] = [
@@ -49,6 +52,13 @@ const example_tasks: ITask[] = [
 ];
 
 const ProfileTasks: FunctionComponent = () => {
+  const [openModal, setIsOpen] = useState(false); // Открыта модалка
+  const [openModalCalendar, setOpenModalCalendar] = useState(false); // Открыта модалка календаря
+  const [isEdit, setIsEdit] = useState(false); // Открыта задача
+  const [isEditModal, setIsEditModal] = useState(false); // Включено редактирование задачи
+  const [isCreating, setIsCreating] = useState(false); // Включено создание задачи
+  const [editContent, setEditContent] = useState<ITask | null>(null); // Содержимое редактируемой задачи
+  const [calendarDate, setCalendarDate] = useState<Nullable<Date>>(); // Выбранная в календаре дата
   const getDate = useMemo(() => {
     const date = new Date();
     const formatter = new Intl.DateTimeFormat("ru-RU", { month: "long", day: "numeric" });
@@ -64,23 +74,53 @@ const ProfileTasks: FunctionComponent = () => {
   useEffect(() => {
     localStorage.setItem("tasks", JSON.stringify(tasks));
   }, [tasks]);
-  const [openModal, setIsOpen] = useState(false);
+
-  const [openModalCalendar, setOpenModalCalendar] = useState(false);
+  const {
-  const [isEdit, setIsEdit] = useState(false);
+    handleSubmit,
-  const [isCreating, setIsCreating] = useState(false);
+    register,
-  const [editContent, setEditContent] = useState<ITask | null>(null);
+    reset,
-  const taskNameRef = useRef<HTMLInputElement>(null);
+    setError,
-  const taskDescriptionRef = useRef<HTMLTextAreaElement>(null);
+    formState: { errors },
-  const [calendarDate, setCalendarDate] = useState<Nullable<Date>>();
+  } = useForm<ITaskForm>({
+    defaultValues: {
+      tags: [],
+    },
+  });
+  const saveTask: SubmitHandler<ITaskForm> = (data) => {
+    if (!calendarDate) {
+      setError("date", { message: "Выберите дату" });
+      return;
+    }
+    const eTask: ITask = { ...data, date: calendarDate };
+    if (isCreating) setTasks([...tasks, eTask]);
+    else setTasks(tasks.map((task) => (task.id === eTask.id ? eTask : task)));
+    if (isCreating) setIsOpen(false);
+  };
+  useEffect(() => {
+    if (editContent) reset({ ...editContent, date: editContent.date.toISOString().slice(0, 16) });
+    else reset();
+  }, [editContent]);
+  useEffect(() => {
+    if (calendarDate && editContent) setEditContent({ ...editContent, date: calendarDate });
+  }, [calendarDate]);
+  useEffect(() => {
+    reset({
+      name: "",
+      description: "",
+      date: "",
+      tags: ["Тег1", "Тег2"],
+      checked: false,
+    });
+  }, [isCreating]);
   return (
     <div class={classes.container}>
       <ModalCalendar
         isOpen={openModalCalendar}
         setIsOpen={setOpenModalCalendar}
         onClose={() => {
-          if (isEdit) setCalendarDate(null);
+          if (isEdit && !isEditModal) setCalendarDate(null);
         }}
-        onChange={(e) => isCreating && setCalendarDate(e.value)}
+        onChange={(e) => (isCreating || isEditModal) && setCalendarDate(e.value)}
         value={calendarDate!}
       />
       <ModalWindow
@@ -90,25 +130,78 @@ const ProfileTasks: FunctionComponent = () => {
           setIsEdit(false);
           setEditContent(null);
           setIsCreating(false);
+          setIsEditModal(false);
           setCalendarDate(null);
         }}
       >
         {isEdit && editContent && (
-          <div class="flex h-full w-full flex-col items-start justify-between">
+          <form
+            class="flex h-full w-full flex-col items-start justify-between"
+            onSubmit={(e) => {
+              e.preventDefault();
+              if (isEditModal) handleSubmit(saveTask)();
+              else setIsEditModal(!isEditModal);
+            }}
+          >
             <div class="flex w-full flex-row items-start justify-between">
-              <div class="flex flex-col">
+              <div class="flex flex-1 flex-col gap-1 pe-2">
-                <p class="text-2xl">{editContent.name}</p>
+                <input
-                <p>{editContent.description}</p>
+                  class="w-full text-2xl outline-0"
+                  disabled={!isEditModal}
+                  placeholder="Название"
+                  {...register("name", {
+                    required: "Заполните название",
+                    maxLength: { value: 20, message: "Максимум 20 символов в названии" },
+                  })}
+                />
+                <textarea
+                  class="h-[5rem] w-full resize-none outline-0"
+                  disabled={!isEditModal}
+                  placeholder={isEditModal ? "Описание" : ""}
+                  {...register("description", {
+                    maxLength: { value: 200, message: "Максимум 200 символов в описании" },
+                  })}
+                />
+                <input
+                  type="datetime-local"
+                  value={calendarDate ? calendarDate.toISOString().slice(0, 16) : ""}
+                  hidden
+                  {...register("date")}
+                />
+                <input type="checkbox" hidden {...register("checked")} />
               </div>
-              <div className="flex cursor-pointer flex-col items-center gap-3">
+              <div
-                <PencilIcon class="size-6" />
+                className="flex cursor-pointer flex-col items-center gap-3"
-                <p class="text-[0.7rem]">Редактировать</p>
+                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>
+            {errors.name && <p class="text-red-500">{errors.name.message}</p>}
+            {errors.description && <p class="text-red-500">{errors.description.message}</p>}
             <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"
+                class={cn("flex h-full flex-row items-center gap-1 rounded-2xl bg-[rgba(251,194,199,0.38)] px-2 py-1", {
+                  "cursor-pointer": isEditModal,
+                })}
                 onClick={() => {
+                  if (!isEditModal) return;
                   setOpenModalCalendar(true);
                   setCalendarDate(editContent.date);
                 }}
@@ -135,30 +228,52 @@ const ProfileTasks: FunctionComponent = () => {
                 </p>
               </div>
             </div>
-          </div>
+          </form>
         )}
         {isCreating && (
-          <div class="flex h-full w-full flex-col items-start justify-between">
+          <form
-            <div class="flex w-full flex-row items-start justify-between">
+            class="flex h-full w-full flex-col items-start justify-between"
-              <div class="me-4 flex flex-1 flex-col gap-1">
+            onSubmit={(e) => {
-                <input class="text-2xl outline-0" maxLength={20} placeholder="Название" ref={taskNameRef} />
+              e.preventDefault();
-                <textarea
+              handleSubmit((data) => saveTask({ ...data, id: tasks.length + 1 }))();
-                  class="h-[5rem] w-full resize-none outline-0"
+            }}
-                  maxLength={200}
+          >
-                  placeholder="Описание"
+            <div class="flex w-full flex-1 flex-row items-start justify-between">
-                  ref={taskDescriptionRef}
+              <div class="me-4 flex h-full flex-1 flex-col gap-1">
+                <input
+                  class="text-2xl outline-0"
+                  maxLength={20}
+                  placeholder="Название"
+                  {...register("name", { required: "Заполните название" })}
                 />
+                <textarea
+                  class="mb-10 w-full flex-1 resize-none outline-0"
+                  placeholder="Описание"
+                  maxLength={200}
+                  {...register("description")}
+                />
+                <input
+                  type="datetime-local"
+                  value={calendarDate ? calendarDate.toISOString().slice(0, 16) : ""}
+                  hidden
+                  {...register("date")}
+                />
+                <input type="checkbox" checked={false} hidden {...register("checked")} />
+              </div>
+              <div class="flex flex-row gap-3 self-start">
+                <CalendarDaysIcon
+                  class="size-10 cursor-pointer"
+                  onClick={() => {
+                    setOpenModalCalendar(true);
+                    setCalendarDate(calendarDate ?? new Date());
+                  }}
+                />
+                <BookmarkIcon class="ms-4 size-10 cursor-pointer" />
               </div>
-              <CalendarDaysIcon
-                class="size-10 cursor-pointer"
-                onClick={() => {
-                  setOpenModalCalendar(true);
-                  setCalendarDate(calendarDate ?? new Date());
-                }}
-              />
-              <BookmarkIcon class="ms-4 size-10 cursor-pointer" />
             </div>
-            <div className="mb-8 flex h-16 flex-col items-center gap-6 self-center md:mb-0 md:flex-row">
+            {errors.name && <p class="text-red-500">{errors.name.message}</p>}
+            {errors.date && <p class="text-red-500">{errors.date.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"
                 onClick={() => {
@@ -167,36 +282,11 @@ const ProfileTasks: FunctionComponent = () => {
               >
                 Отмена
               </Button>
-              <Button
+              <Button color="red" type="submit">
-                color="red"
-                onClick={() => {
-                  if (taskNameRef.current && taskDescriptionRef.current) {
-                    if (!taskNameRef.current.value || !taskDescriptionRef.current.value) {
-                      alert("Заполните все поля");
-                      return;
-                    }
-                    if (!calendarDate) {
-                      alert("Заполните дату и время");
-                      return;
-                    }
-                    const task: ITask = {
-                      id: tasks.length + 1,
-                      name: taskNameRef.current.value,
-                      description: taskDescriptionRef.current.value,
-                      date: calendarDate,
-                      checked: false,
-                      tags: ["Математика", "Домашнее задание"],
-                    };
-                    setTasks([...tasks, task]);
-                    setIsOpen(false);
-                    setCalendarDate(null);
-                  }
-                }}
-              >
                 Добавить задачу
               </Button>
             </div>
-          </div>
+          </form>
         )}
       </ModalWindow>
       {tasks.length > 0 ? (
@@ -214,11 +304,15 @@ const ProfileTasks: FunctionComponent = () => {
                     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="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="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
               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={() => {
@@ -228,7 +322,7 @@ const ProfileTasks: FunctionComponent = () => {
             >
               <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">
+            <div class="absolute left-0 my-auto hidden flex-row space-x-3 opacity-0 transition-opacity duration-100 group-hover:opacity-100 md:flex">
               <div class="pointer-events-none flex aspect-square h-20 cursor-pointer flex-col items-center justify-center rounded-full bg-[rgba(206,232,251,0.7)] text-xl text-gray-600 shadow-[0px_4px_4px_0px_rgba(0,0,0,0.25)] group-hover:pointer-events-auto hover:bg-[rgba(206,232,251,0.9)]">
                 <MagnifyingGlassIcon class="size-12" />
               </div>