feat: tasks group by date and delete
This commit is contained in:
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user