feat: get tasks from api in calendar
This commit is contained in:
@@ -5,6 +5,7 @@ import Dialog from "@/components/ui/Dialog";
|
||||
import ModalWindow from "@/components/ui/Modal";
|
||||
import { withTitle } from "@/constructors/Component";
|
||||
import { UrlsTitle } from "@/enums/urls";
|
||||
import apiClient from "@/services/api";
|
||||
import { cn } from "@/utils/class-merge";
|
||||
import {
|
||||
BookOpenIcon,
|
||||
@@ -15,16 +16,19 @@ import {
|
||||
TrashIcon,
|
||||
} from "@heroicons/react/24/outline";
|
||||
import { FunctionComponent } from "preact";
|
||||
import { useEffect, useState } from "preact/hooks";
|
||||
import { useEffect, useMemo, useState } from "preact/hooks";
|
||||
import { Calendar, CalendarDateTemplateEvent } from "primereact/calendar";
|
||||
import { Nullable } from "primereact/ts-helpers";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { ITask, ITaskForm } from "./profile_tasks.dto";
|
||||
|
||||
const example_tags: { first: string[]; second: string[] } = {
|
||||
first: ["Программирование", "Информатика", "Физика", "Математика"],
|
||||
second: ["Лабораторная работа", "Практическая работа", "Домашнее задание", "Экзамен"],
|
||||
};
|
||||
import { SubmitHandler, useForm } from "react-hook-form";
|
||||
import {
|
||||
IApiResponse,
|
||||
ICreateTaskResponse,
|
||||
IDeleteTaskResponse,
|
||||
IEditTaskResponse,
|
||||
ITask,
|
||||
ITaskDetails,
|
||||
ITaskForm,
|
||||
} from "./profile_tasks.dto";
|
||||
|
||||
const calendarStyles = {
|
||||
root: "inline-flex w-full relative",
|
||||
@@ -59,6 +63,9 @@ const ProfileCalendar: FunctionComponent = () => {
|
||||
const [calendarDate, setCalendarDate] = useState<Nullable<Date>>();
|
||||
const [tags, setTags] = useState<ITags>({ first: "", second: "", overdue: false });
|
||||
const [showDeleteDialog, setShowDeleteDialog] = useState(false);
|
||||
const [subjectChoices, setSubjectChoices] = useState<Record<string, string>>({});
|
||||
const [taskTypeChoices, setTaskTypeChoices] = useState<Record<string, string>>({});
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
|
||||
const {
|
||||
handleSubmit,
|
||||
@@ -73,21 +80,164 @@ const ProfileCalendar: FunctionComponent = () => {
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
const storedTasks = localStorage.getItem("tasks");
|
||||
if (storedTasks) {
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
const parsedTasks: ITask[] = JSON.parse(storedTasks).map((task: any) => ({
|
||||
...task,
|
||||
date: new Date(task.date),
|
||||
}));
|
||||
setTasks(parsedTasks);
|
||||
}
|
||||
fetchTasks();
|
||||
}, []);
|
||||
const handleDeleteTask = () => {
|
||||
|
||||
const fetchTasks = async () => {
|
||||
try {
|
||||
setIsLoading(true);
|
||||
const response = await apiClient<IApiResponse>("/api/tasks/view_tasks/");
|
||||
|
||||
setSubjectChoices(response.subject_choices);
|
||||
setTaskTypeChoices(response.task_type_choices);
|
||||
|
||||
const convertedTasks: ITask[] = response.tasks.map((apiTask) => ({
|
||||
id: apiTask.id.toString(),
|
||||
name: apiTask.title,
|
||||
checked: apiTask.isCompleted,
|
||||
date: new Date(apiTask.due_date),
|
||||
description: apiTask.description,
|
||||
tags: [apiTask.subject, apiTask.task_type],
|
||||
new: false,
|
||||
}));
|
||||
|
||||
setTasks(convertedTasks);
|
||||
} catch (error) {
|
||||
console.error("Failed to fetch tasks:", error);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const example_tags = useMemo(
|
||||
() => ({
|
||||
first: Object.keys(subjectChoices),
|
||||
second: Object.keys(taskTypeChoices),
|
||||
}),
|
||||
[subjectChoices, taskTypeChoices]
|
||||
);
|
||||
|
||||
const saveTask: SubmitHandler<ITaskForm> = async (data) => {
|
||||
if (!calendarDate) {
|
||||
setError("date", { message: "Выберите дату" });
|
||||
return;
|
||||
}
|
||||
if ((!editContent?.tags[0] || !editContent.tags[1]) && (!tags.first || !tags.second)) {
|
||||
setError("tags", { message: "Выберите теги" });
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const selectedSubject = editContent?.tags[0] || tags.first;
|
||||
const selectedTaskType = editContent?.tags[1] || tags.second;
|
||||
|
||||
// Format date to DD-MM-YYYYTHH:MM
|
||||
const formattedDate = calendarDate
|
||||
.toLocaleString("en-GB", {
|
||||
day: "2-digit",
|
||||
month: "2-digit",
|
||||
year: "numeric",
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
hour12: false,
|
||||
})
|
||||
.replace(",", "T")
|
||||
.replace(/\//g, "-")
|
||||
.replace("T ", "T");
|
||||
|
||||
const taskData = {
|
||||
title: data.name,
|
||||
description: data.description || "",
|
||||
subject: selectedSubject,
|
||||
taskType: selectedTaskType,
|
||||
dateTime_due: formattedDate,
|
||||
telegram_notifications: false,
|
||||
};
|
||||
|
||||
if (!editContent) {
|
||||
const response = await apiClient<ICreateTaskResponse>("/api/tasks/create_task/", {
|
||||
method: "POST",
|
||||
body: JSON.stringify(taskData),
|
||||
});
|
||||
|
||||
if (!response.success) {
|
||||
throw new Error(response.message);
|
||||
}
|
||||
} else {
|
||||
const response = await apiClient<IEditTaskResponse>(`/api/tasks/edit_task/${editContent.id}/`, {
|
||||
method: "PUT",
|
||||
body: JSON.stringify(taskData),
|
||||
});
|
||||
|
||||
if (!response.success) {
|
||||
throw new Error(response.message);
|
||||
}
|
||||
}
|
||||
|
||||
await fetchTasks();
|
||||
setIsOpen(false);
|
||||
setTags({ first: "", second: "", overdue: false });
|
||||
} catch (error) {
|
||||
console.error("Failed to save task:", error);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDeleteTask = async () => {
|
||||
if (!editContent) return;
|
||||
setTasks(tasks.filter((task) => task.id !== editContent.id));
|
||||
setIsOpen(false);
|
||||
setShowDeleteDialog(false);
|
||||
|
||||
try {
|
||||
const response = await apiClient<IDeleteTaskResponse>(`/api/tasks/delete_task/${editContent.id}/`, {
|
||||
method: "DELETE",
|
||||
});
|
||||
|
||||
if (!response.success) {
|
||||
throw new Error(response.message);
|
||||
}
|
||||
|
||||
await fetchTasks();
|
||||
setIsOpen(false);
|
||||
setShowDeleteDialog(false);
|
||||
} catch (error) {
|
||||
console.error("Failed to delete task:", error);
|
||||
}
|
||||
};
|
||||
|
||||
const handleTaskCheck = async (taskId: string) => {
|
||||
try {
|
||||
await apiClient(`/api/tasks/toggle_complete_task/${taskId}/`, {
|
||||
method: "PATCH",
|
||||
});
|
||||
|
||||
setTasks((prevTasks) =>
|
||||
prevTasks.map((task) => (task.id === taskId ? { ...task, checked: !task.checked } : task))
|
||||
);
|
||||
} catch (error) {
|
||||
console.error("Failed to mark task:", error);
|
||||
}
|
||||
};
|
||||
|
||||
const handleViewTask = async (taskId: string) => {
|
||||
try {
|
||||
const taskDetails = await apiClient<ITaskDetails>(`/api/tasks/view_task/${taskId}/`);
|
||||
|
||||
const task: ITask = {
|
||||
id: taskId,
|
||||
name: taskDetails.title,
|
||||
checked: false,
|
||||
date: new Date(taskDetails.dateTime_due),
|
||||
description: taskDetails.description,
|
||||
tags: [taskDetails.subject, taskDetails.taskType],
|
||||
new: false,
|
||||
};
|
||||
|
||||
setIsOpen(true);
|
||||
setIsEdit(true);
|
||||
setEditContent(task);
|
||||
setCalendarDate(task.date);
|
||||
setIsEditModal(false);
|
||||
} catch (error) {
|
||||
console.error("Failed to fetch task details:", error);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
@@ -109,9 +259,6 @@ const ProfileCalendar: FunctionComponent = () => {
|
||||
if (editContent) reset({ ...editContent, date: editContent.date.toISOString().slice(0, 16) });
|
||||
else reset();
|
||||
}, [editContent]);
|
||||
useEffect(() => {
|
||||
localStorage.setItem("tasks", JSON.stringify(tasks));
|
||||
}, [tasks]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!editContent) return;
|
||||
@@ -175,12 +322,6 @@ const ProfileCalendar: FunctionComponent = () => {
|
||||
);
|
||||
};
|
||||
|
||||
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",
|
||||
@@ -189,26 +330,6 @@ const ProfileCalendar: FunctionComponent = () => {
|
||||
}).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: "", overdue: false });
|
||||
};
|
||||
|
||||
const pt = {
|
||||
root: { className: calendarStyles.root },
|
||||
input: { root: { className: calendarStyles.input } },
|
||||
@@ -230,193 +351,206 @@ const ProfileCalendar: FunctionComponent = () => {
|
||||
|
||||
return (
|
||||
<div class="flex w-full flex-col items-center">
|
||||
<ModalTags
|
||||
isOpen={openModalTags}
|
||||
setIsOpen={setOpenModalTags}
|
||||
tagsList={example_tags}
|
||||
value={tags}
|
||||
onClose={() => {
|
||||
setTags({ first: "", second: "", overdue: false });
|
||||
}}
|
||||
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: "", overdue: false });
|
||||
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);
|
||||
{isLoading ? (
|
||||
<div class="flex w-full flex-1 items-center justify-center">
|
||||
<div class="text-2xl">Загрузка...</div>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<ModalTags
|
||||
isOpen={openModalTags}
|
||||
setIsOpen={setOpenModalTags}
|
||||
tagsList={example_tags}
|
||||
value={tags}
|
||||
onClose={() => {
|
||||
setTags({ first: "", second: "", overdue: false });
|
||||
}}
|
||||
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: "", overdue: false });
|
||||
setCalendarDate(null);
|
||||
}}
|
||||
>
|
||||
<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 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>}
|
||||
{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);
|
||||
{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);
|
||||
}}
|
||||
>
|
||||
<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], overdue: false });
|
||||
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>
|
||||
<Dialog
|
||||
isOpen={showDeleteDialog}
|
||||
setIsOpen={setShowDeleteDialog}
|
||||
title="Удаление задачи"
|
||||
content="Вы уверены, что хотите удалить эту задачу?"
|
||||
onConfirm={handleDeleteTask}
|
||||
confirmText="Удалить"
|
||||
cancelText="Отмена"
|
||||
/>
|
||||
<Calendar
|
||||
value={currentDate}
|
||||
onChange={(e) => setCurrentDate(e ? e.value! : new Date())}
|
||||
inline
|
||||
pt={pt}
|
||||
dateTemplate={dateTemplate}
|
||||
className="[&_.p-datepicker]:!border-0 [&_.p-datepicker-calendar]:border-separate [&_.p-datepicker-calendar]:border-spacing-2 [&_td]:rounded-lg [&_td]:border [&_td]:border-[rgba(251,194,199,0.38)]"
|
||||
/>
|
||||
<div class="flex w-full flex-row items-start justify-between">
|
||||
<div class="flex flex-1 flex-col gap-1 pe-2">
|
||||
<input
|
||||
class={cn("w-full p-2 text-2xl outline-0", {
|
||||
"rounded-md bg-gray-400/30 ring-1 ring-gray-400": isEditModal,
|
||||
})}
|
||||
disabled={!isEditModal}
|
||||
placeholder="Название"
|
||||
{...register("name", {
|
||||
required: "Заполните название",
|
||||
maxLength: { value: 20, message: "Максимум 20 символов в названии" },
|
||||
})}
|
||||
/>
|
||||
<textarea
|
||||
class={cn("h-[5rem] w-full resize-none p-2 outline-0", {
|
||||
"rounded-md bg-gray-400/30 ring-1 ring-gray-400": isEditModal,
|
||||
})}
|
||||
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 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>}
|
||||
{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], overdue: false });
|
||||
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>
|
||||
<Dialog
|
||||
isOpen={showDeleteDialog}
|
||||
setIsOpen={setShowDeleteDialog}
|
||||
title="Удаление задачи"
|
||||
content="Вы уверены, что хотите удалить эту задачу?"
|
||||
onConfirm={handleDeleteTask}
|
||||
confirmText="Удалить"
|
||||
cancelText="Отмена"
|
||||
/>
|
||||
<Calendar
|
||||
value={currentDate}
|
||||
onChange={(e) => setCurrentDate(e ? e.value! : new Date())}
|
||||
inline
|
||||
pt={pt}
|
||||
dateTemplate={dateTemplate}
|
||||
className="[&_.p-datepicker]:!border-0 [&_.p-datepicker-calendar]:border-separate [&_.p-datepicker-calendar]:border-spacing-2 [&_td]:rounded-lg [&_td]:border [&_td]:border-[rgba(251,194,199,0.38)]"
|
||||
/>
|
||||
|
||||
<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 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={() => handleViewTask(task.id)}
|
||||
onMarkClick={() => handleTaskCheck(task.id)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div class="rounded-lg bg-[rgba(251,194,199,0.2)] p-4 text-center">На этот день задач нет</div>
|
||||
)}
|
||||
</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