feat: working calendar
This commit is contained in:
@@ -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) => {
|
||||
console.log(date);
|
||||
const [currentDate, setCurrentDate] = useState(new 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>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user