feat: working calendar

src/pages/profile_calendar.tsx

@@ -1,15 +1,389 @@
-import BigCalendar from "@/components/calendar";
 import { withTitle } from "@/constructors/Component";
 import { UrlsTitle } from "@/enums/urls";
 import { FunctionComponent } from "preact";
+import { useState, useEffect } from "preact/hooks";
+import { Calendar, CalendarDateTemplateEvent } from "primereact/calendar";
+import { cn } from "@/utils/class-merge";
+import { ITask } from "./profile_tasks.dto";
+import Task from "@/components/task";
+import ModalWindow from "@/components/ui/Modal";
+import ModalCalendar from "@/components/ModalCalendar";
+import ModalTags, { ITags } from "@/components/ModalTags";
+import { useForm } from "react-hook-form";
+import { ITaskForm } from "./profile_tasks.dto";
+import { Nullable } from "primereact/ts-helpers";
+import { 
+  PencilIcon, 
+  InboxArrowDownIcon,
+  CalendarDaysIcon,
+  BookOpenIcon,
+  DocumentDuplicateIcon
+} from "@heroicons/react/24/outline";
+
+const example_tags: { first: string[]; second: string[] } = {
+  first: ["Программирование", "Информатика", "Физика", "Математика"],
+  second: ["Лабораторная работа", "Практическая работа", "Домашнее задание", "Экзамен"],
+};
+
+const calendarStyles = {
+  root: "inline-flex w-full relative",
+  input: "font-sans text-base text-gray-600 bg-white p-3",
+  panel: "bg-white min-w-full p-2",
+  header: "flex items-center justify-between p-2 text-gray-700 font-semibold m-0 mb-4",
+  title: "leading-8 mx-auto text-xl",
+  previousButton: "flex items-center justify-center cursor-pointer w-8 h-8 text-gray-600",
+  nextButton: "flex items-center justify-center cursor-pointer w-8 h-8 text-gray-600",
+  table: "border-collapse w-full",
+  tableHeaderCell: "p-2 text-center",
+  weekDay: "text-gray-600 font-normal pb-4",
+  monthTitle: "text-gray-700 font-semibold mr-2",
+  yearTitle: "text-gray-700 font-semibold",
+  monthPicker: "grid grid-cols-3 gap-2",
+  yearPicker: "grid grid-cols-2 gap-2",
+  month: "p-2 text-center cursor-pointer rounded-lg hover:bg-[rgba(251,194,199,0.1)] [&.p-highlight]:bg-[rgba(251,194,199,0.2)]",
+  year: "p-2 text-center cursor-pointer rounded-lg hover:bg-[rgba(251,194,199,0.1)] [&.p-highlight]:bg-[rgba(251,194,199,0.2)]"
+};
 
 const ProfileCalendar: FunctionComponent = () => {
-  const onDateSelect = (date: Date) => {
+  const [currentDate, setCurrentDate] = useState(new Date());
-    console.log(date);
+  const [tasks, setTasks] = useState<ITask[]>([]);
+  const [selectedTasks, setSelectedTasks] = useState<ITask[]>([]);
+  const [openModal, setIsOpen] = useState(false);
+  const [openModalCalendar, setOpenModalCalendar] = useState(false);
+  const [openModalTags, setOpenModalTags] = useState(false);
+  const [isEdit, setIsEdit] = useState(false);
+  const [isEditModal, setIsEditModal] = useState(false);
+  const [editContent, setEditContent] = useState<ITask | null>(null);
+  const [calendarDate, setCalendarDate] = useState<Nullable<Date>>();
+  const [tags, setTags] = useState<ITags>({ first: "", second: "" });
+
+  const {
+    handleSubmit,
+    register,
+    reset,
+    setError,
+    formState: { errors },
+  } = useForm<ITaskForm>({
+    defaultValues: {
+      tags: [],
+    },
+  });
+
+  useEffect(() => {
+    const storedTasks = localStorage.getItem("tasks");
+    if (storedTasks) {
+      const parsedTasks: ITask[] = JSON.parse(storedTasks).map((task: any) => ({
+        ...task,
+        date: new Date(task.date)
+      }));
+      setTasks(parsedTasks);
+    }
+
+    const handleStorageChange = (e: StorageEvent) => {
+      if (e.key === "tasks" && e.newValue) {
+        const updatedTasks: ITask[] = JSON.parse(e.newValue).map((task: any) => ({
+          ...task,
+          date: new Date(task.date)
+        }));
+        setTasks(updatedTasks);
+      }
+    };
+
+    window.addEventListener("storage", handleStorageChange);
+    return () => window.removeEventListener("storage", handleStorageChange);
+  }, []);
+
+  useEffect(() => {
+    if (!currentDate) return;
+    
+    const tasksForDate = tasks.filter(task => {
+      const taskDate = task.date;
+      return taskDate.getDate() === currentDate.getDate() &&
+             taskDate.getMonth() === currentDate.getMonth() &&
+             taskDate.getFullYear() === currentDate.getFullYear();
+    });
+    
+    setSelectedTasks(tasksForDate);
+  }, [currentDate, tasks]);
+
+  useEffect(() => {
+    if (editContent) reset({ ...editContent, date: editContent.date.toISOString().slice(0, 16) });
+    else reset();
+  }, [editContent]);
+
+  useEffect(() => {
+    if (!editContent) return;
+    const newEditContent = editContent;
+    if (tags.first) newEditContent.tags = [tags.first, newEditContent.tags[1]];
+    if (tags.second) newEditContent.tags = [newEditContent.tags[0], tags.second];
+    setEditContent(newEditContent);
+  }, [tags]);
+
+  const hasTasksOnDate = (date: CalendarDateTemplateEvent) => {
+    return tasks.some(task => {
+      const taskDate = task.date;
+      return taskDate.getDate() === date.day &&
+             taskDate.getMonth() === date.month &&
+             taskDate.getFullYear() === date.year;
+    });
   };
+
+  const dateTemplate = (date: CalendarDateTemplateEvent) => {
+    const isHighlighted = hasTasksOnDate(date);
+    const isSelected = currentDate && 
+      currentDate.getDate() === date.day && 
+      currentDate.getMonth() === date.month && 
+      currentDate.getFullYear() === date.year;
+    const isToday = new Date().getDate() === date.day && 
+      new Date().getMonth() === date.month && 
+      new Date().getFullYear() === date.year;
+
+    return (
+      <div className={cn(
+        "relative w-full h-20 flex items-start justify-start p-2 cursor-pointer rounded-lg",
+        "hover:bg-[rgba(251,194,199,0.1)]",
+        {
+          "bg-[rgba(251,194,199,0.4)]": isSelected,
+          "bg-[rgba(251,194,199,0.2)]": isToday && !isSelected,
+        }
+      )}>
+        <span>{date.day}</span>
+        {isHighlighted && <span className="absolute top-2 right-2 w-2 h-2 rounded-full bg-pink-400" />}
+      </div>
+    );
+  };
+
+  const handleTaskCheck = (taskId: string) => {
+    const updatedTasks = tasks.map(task => 
+      task.id === taskId ? { ...task, checked: !task.checked } : task
+    );
+    setTasks(updatedTasks);
+    localStorage.setItem("tasks", JSON.stringify(updatedTasks));
+  };
+
+  const formatDate = (date: Date) => {
+    return new Intl.DateTimeFormat("ru-RU", { 
+      day: "numeric",
+      month: "long",
+      year: "numeric"
+    }).format(date);
+  };
+
+  const saveTask = (data: ITaskForm) => {
+    if (!calendarDate) {
+      setError("date", { message: "Выберите дату" });
+      return;
+    }
+    if ((!editContent?.tags[0] || !editContent.tags[1]) && (!tags.first || !tags.second)) {
+      setError("tags", { message: "Выберите теги" });
+      return;
+    }
+    const eTask: ITask = {
+      ...data,
+      date: calendarDate,
+      tags: editContent?.tags.length ? editContent.tags : [tags.first, tags.second],
+      new: true,
+    };
+    setTasks(tasks.map((task) => (task.id === eTask.id ? eTask : task)));
+    localStorage.setItem("tasks", JSON.stringify(tasks.map((task) => (task.id === eTask.id ? eTask : task))));
+    setTags({ first: "", second: "" });
+  };
+
+  const pt = {
+    root: { className: calendarStyles.root },
+    input: { root: { className: calendarStyles.input }},
+    panel: { className: calendarStyles.panel },
+    header: { className: calendarStyles.header },
+    title: { className: calendarStyles.title },
+    previousButton: { className: calendarStyles.previousButton },
+    nextButton: { className: calendarStyles.nextButton },
+    table: { className: calendarStyles.table },
+    tableHeaderCell: { className: calendarStyles.tableHeaderCell },
+    weekDay: { className: calendarStyles.weekDay },
+    monthTitle: { className: calendarStyles.monthTitle },
+    yearTitle: { className: calendarStyles.yearTitle },
+    monthPicker: { className: calendarStyles.monthPicker },
+    yearPicker: { className: calendarStyles.yearPicker },
+    month: { className: calendarStyles.month },
+    year: { className: calendarStyles.year }
+  };
+
   return (
     <div class="flex w-full flex-col items-center">
-      <BigCalendar onDateSelect={onDateSelect} />
+      <ModalTags
+        isOpen={openModalTags}
+        setIsOpen={setOpenModalTags}
+        tagsList={example_tags}
+        value={tags}
+        onClose={() => {
+          setTags({ first: "", second: "" });
+        }}
+        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}
+        onClose={() => {
+          setIsEdit(false);
+          setEditContent(null);
+          setIsEditModal(false);
+          setTags({ first: "", second: "" });
+          setCalendarDate(null);
+        }}
+      >
+        {isEdit && editContent && (
+          <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-1 flex-col gap-1 pe-2">
+                <input
+                  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"
+                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>}
+            {errors.date && <p class="text-red-500">{errors.date.message}</p>}
+            {errors.tags && <p class="text-red-500">{errors.tags.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", {
+                  "cursor-pointer": isEditModal,
+                })}
+                onClick={() => {
+                  if (!isEditModal) return;
+                  setOpenModalCalendar(true);
+                  setCalendarDate(editContent.date);
+                }}
+              >
+                <CalendarDaysIcon class="size-10" />
+                <p>
+                  {Intl.DateTimeFormat("ru-RU", {
+                    day: "2-digit",
+                    month: "2-digit",
+                    year: "numeric",
+                    hour: "2-digit",
+                    minute: "2-digit",
+                  }).format(calendarDate!)}
+                </p>
+              </div>
+              <div
+                class={cn("flex h-full flex-col items-start gap-1 rounded-2xl bg-[rgba(251,194,199,0.38)] px-4 py-2", {
+                  "cursor-pointer": isEditModal,
+                })}
+                onClick={() => {
+                  if (!isEditModal) return;
+                  setTags({ first: editContent.tags[0], second: editContent.tags[1] });
+                  setOpenModalTags(true);
+                }}
+              >
+                <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>
+          </form>
+        )}
+      </ModalWindow>
+
+      <Calendar 
+        value={currentDate} 
+        onChange={(e) => setCurrentDate(e ? e.value! : new Date())} 
+        inline
+        pt={pt}
+        dateTemplate={dateTemplate}
+        className="[&_.p-datepicker-calendar]:border-separate [&_.p-datepicker-calendar]:border-spacing-2 [&_td]:border [&_td]:border-[rgba(251,194,199,0.38)] [&_td]:rounded-lg [&_.p-datepicker]:!border-0"
+      />
+      
+      <div class="mt-8 w-full px-4">
+        <h2 class="mb-4 text-2xl font-semibold">
+          Задачи на {formatDate(currentDate)}
+        </h2>
+        {selectedTasks.length > 0 ? (
+          <div class="flex flex-col gap-4">
+            {selectedTasks.map(task => (
+              <Task
+                key={task.id}
+                name={task.name}
+                checked={task.checked}
+                onClick={() => {
+                  setIsOpen(true);
+                  setIsEdit(true);
+                  setEditContent(task);
+                  setCalendarDate(task.date);
+                }}
+                onMarkClick={() => handleTaskCheck(task.id)}
+              />
+            ))}
+          </div>
+        ) : (
+          <div class="rounded-lg bg-[rgba(251,194,199,0.2)] p-4 text-center">
+            На этот день задач нет
+          </div>
+        )}
+      </div>
     </div>
   );
 };