sergey/anti-hvost
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: fixed tags

Browse Source
This commit is contained in:
Sergey Elpashev
2025-05-12 19:50:02 +03:00
parent c72ce9baa4
commit 049e6dd912
4 changed files with 464 additions and 482 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/ModalTags.tsx
View File

@@ -1,4 +1,4 @@
import { IAPITag } from "@/pages/profile_tasks.dto";
import { IAPITag, IViewTagsResponse } from "@/pages/profile_tasks.dto";
import apiClient from "@/services/api";
import { cn } from "@/utils/class-merge";
import { BookOpenIcon, CheckIcon, DocumentDuplicateIcon, PlusCircleIcon } from "@heroicons/react/24/outline";
@@ -25,7 +25,7 @@ interface ModalTagsProps extends ModalWindowProps {
first: IAPITag[];
second: IAPITag[];
};
refreshTags: () => void;
refreshTags: () => Promise<IViewTagsResponse | void>;
}
const ModalTags: FunctionComponent<ModalTagsProps> = ({
@@ -64,7 +64,7 @@ const ModalTags: FunctionComponent<ModalTagsProps> = ({
{ method: "POST", body: JSON.stringify(data) }
);
if (response.success) {
refreshTags();
await refreshTags();
if (showAddFirstTag) {
const new_subject_id = response.subject!.id;
onChange!((prev) => ({ ...prev, first: new_subject_id }));
@@ -89,7 +89,7 @@ const ModalTags: FunctionComponent<ModalTagsProps> = ({
body: JSON.stringify(data),
});
if (!response.error) {
refreshTags();
await refreshTags();
} else {
setShowErrorDialog(true);
const match = response.error?.match(/\[(.+)\]/);

160
src/pages/profile_calendar.tsx
View File

@@ -80,16 +80,7 @@ const ProfileCalendar: FunctionComponent = () => {
setError,
formState: { errors },
} = useForm<ITaskForm>({
defaultValues: {
subject: {
name: "",
id: 0,
},
taskType: {
name: "",
id: 0,
},
},
defaultValues: {},
});
useEffect(() => {
@@ -146,13 +137,13 @@ const ProfileCalendar: FunctionComponent = () => {
return;
}
if ((!editContent?.subject.id || !editContent.taskType.id) && (!tags.first || !tags.second)) {
setError("subject", { message: "Выберите теги" });
setError("date", { message: "Выберите теги" });
return;
}
try {
const selectedSubject = editContent?.subject.id || tags.first;
const selectedTaskType = editContent?.taskType.id || tags.second;
const selectedSubject = tags.first || editContent?.subject.id;
const selectedTaskType = tags.second || editContent?.taskType.id;
// Format date to DD-MM-YYYYTHH:MM
const formattedDate = calendarDate
@@ -171,8 +162,8 @@ const ProfileCalendar: FunctionComponent = () => {
const taskData = {
title: data.name,
description: data.description || "",
subject: selectedSubject,
taskType: selectedTaskType,
subject_id: selectedSubject,
taskType_id: selectedTaskType,
dateTime_due: formattedDate,
telegram_notifications: false,
priority: selectedPriority,
@@ -195,7 +186,17 @@ const ProfileCalendar: FunctionComponent = () => {
if (!response.success) {
throw new Error(response.message);
}
} else if (isEdit)
setEditContent({
name: response.task.title,
id: response.task.id.toString(),
description: response.task.description,
priority: response.task.priority,
checked: response.task.isCompleted,
subject: response.task.subject,
taskType: response.task.task_type,
date: new Date(response.task.dateTime_due),
});
}
await fetchTasks();
@@ -374,35 +375,9 @@ const ProfileCalendar: FunctionComponent = () => {
month: { className: calendarStyles.month },
year: { className: calendarStyles.year },
};
if (isLoading)
return (
<div class="flex h-full w-full flex-1 flex-col items-center justify-center">
<div class="flex w-full flex-1 items-center justify-center">Загрузка...</div>;
</div>
);
return (
<div class="flex w-full flex-col items-center">
<ModalTags
refreshTags={fetchTags}
isOpen={openModalTags}
setIsOpen={setOpenModalTags}
tagsList={example_tags}
value={tags}
onClose={() => {
setTags({ first: 0, second: 0, 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}
@@ -489,7 +464,6 @@ const ProfileCalendar: FunctionComponent = () => {
{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.subject && <p class="text-red-500">{errors.subject.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", {
@@ -544,45 +518,71 @@ const ProfileCalendar: FunctionComponent = () => {
</form>
)}
</ModalWindow>
<Dialog
isOpen={showDeleteDialog}
setIsOpen={setShowDeleteDialog}
title="Удаление задачи"
onConfirm={handleDeleteTask}
confirmText="Удалить"
cancelText="Отмена"
>
<p class="mb-6 text-sm sm:text-[1rem]">"Вы уверены, что хотите удалить эту задачу?"</p>
</Dialog>
<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)]"
/>
{isLoading ? (
<div class="flex w-full flex-1 items-center justify-center">Загрузка...</div>
) : (
<>
<ModalTags
refreshTags={fetchTags}
isOpen={openModalTags}
setIsOpen={setOpenModalTags}
tagsList={example_tags}
value={tags}
onClose={() => {
setTags({ first: 0, second: 0, overdue: false });
}}
onChange={setTags}
/>
<ModalCalendar
isOpen={openModalCalendar}
setIsOpen={setOpenModalCalendar}
onClose={() => {
if (isEdit && !isEditModal) setCalendarDate(null);
}}
onChange={(e) => isEditModal && setCalendarDate(e.value)}
value={calendarDate!}
/>
<Dialog
isOpen={showDeleteDialog}
setIsOpen={setShowDeleteDialog}
title="Удаление задачи"
onConfirm={handleDeleteTask}
confirmText="Удалить"
cancelText="Отмена"
>
<p class="mb-6 text-sm sm:text-[1rem]">"Вы уверены, что хотите удалить эту задачу?"</p>
</Dialog>
<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}
priority={task.priority}
overdue={task.date < new Date()}
onClick={() => handleViewTask(task.id)}
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}
priority={task.priority}
overdue={task.date < new Date()}
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>
);
};

12
src/pages/profile_tasks.dto.ts
View File

@@ -17,7 +17,7 @@ export interface ITaskView extends Omit<ITask, "taskType"> {
task_type: IAPITag;
}
export interface ITaskForm extends Omit<ITask, "date"> {
export interface ITaskForm extends Omit<ITask, "date" | "subject" | "taskType"> {
date: string;
}
@@ -80,15 +80,11 @@ export interface IEditTaskResponse {
id: number;
title: string;
description: string;
subject: string;
taskType: string;
subject: IAPITag;
task_type: IAPITag;
dateTime_due: string;
isCompleted: boolean;
reminder?: {
remind_before_days: number;
repeat_interval: number;
reminder_time: string;
};
priority: number;
};
}

766
src/pages/profile_tasks.tsx
View File

@@ -32,7 +32,6 @@ import { Dropdown } from "primereact/dropdown";
import { SelectItem } from "primereact/selectitem";
import { Nullable } from "primereact/ts-helpers";
import { SubmitHandler, useForm } from "react-hook-form";
import { v4 as uuid } from "uuid";
import {
IApiResponse,
IAPITag,
@@ -87,7 +86,7 @@ const ProfileTasks: FunctionComponent = () => {
fetchTags();
}, []);
const fetchTags = async () => {
const fetchTags = async (): Promise<IViewTagsResponse | void> => {
try {
const response = await apiClient<IViewTagsResponse>("/api/tags/view_tags/");
setSubjectChoices(response.subjects);
@@ -126,18 +125,7 @@ const ProfileTasks: FunctionComponent = () => {
reset,
setError,
formState: { errors },
} = useForm<ITaskForm>({
defaultValues: {
subject: {
name: "",
id: 0,
},
taskType: {
name: "",
id: 0,
},
},
});
} = useForm<ITaskForm>({});
const example_tags = useMemo(
() => ({
@@ -153,7 +141,7 @@ const ProfileTasks: FunctionComponent = () => {
return;
}
if ((!editContent?.subject.id || !editContent.taskType.id) && (!tags.first || !tags.second)) {
setError("subject", { message: "Выберите теги" });
setError("date", { message: "Выберите теги" });
return;
}
@@ -202,11 +190,20 @@ const ProfileTasks: FunctionComponent = () => {
if (!response.success) {
throw new Error(response.message);
}
} else if (isEdit)
setEditContent({
name: response.task.title,
id: response.task.id.toString(),
description: response.task.description,
priority: response.task.priority,
checked: response.task.isCompleted,
subject: response.task.subject,
taskType: response.task.task_type,
date: new Date(response.task.dateTime_due),
});
}
await fetchTasks();
if (isCreating) setIsOpen(false);
setTags({ first: 0, second: 0, overdue: false });
} catch (error) {
@@ -223,14 +220,6 @@ const ProfileTasks: FunctionComponent = () => {
name: "",
description: "",
date: "",
subject: {
name: "",
id: 0,
},
taskType: {
name: "",
id: 0,
},
priority: 4,
checked: false,
});
@@ -385,37 +374,8 @@ const ProfileTasks: FunctionComponent = () => {
}
};
if (isLoading)
return (
<div class="flex h-full w-full flex-1 flex-col items-center justify-center">
<div class="flex w-full flex-1 items-center justify-center">Загрузка...</div>;
</div>
);
return (
<div class={classes.container}>
<ModalTags
refreshTags={fetchTags}
zIndex={70}
isOpen={openModalTags}
setIsOpen={setOpenModalTags}
tagsList={example_tags}
value={tags}
onClose={() => {
if (!isCreating) setTags({ first: 0, second: 0, overdue: false });
}}
onChange={setTags}
/>
<ModalCalendar
zIndex={80}
isOpen={openModalCalendar}
setIsOpen={setOpenModalCalendar}
onClose={() => {
if (isEdit && !isEditModal) setCalendarDate(null);
}}
onChange={(e) => (isCreating || isEditModal) && setCalendarDate(e.value)}
value={calendarDate!}
/>
<ModalWindow
zIndex={60}
isOpen={openModal}
@@ -504,7 +464,6 @@ const ProfileTasks: FunctionComponent = () => {
{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.subject && <p class="text-red-500">{errors.subject.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", {
@@ -524,7 +483,7 @@ const ProfileTasks: FunctionComponent = () => {
year: "numeric",
hour: "2-digit",
minute: "2-digit",
}).format(calendarDate!)}
}).format(calendarDate ?? editContent.date)}
</p>
</div>
<div
@@ -563,7 +522,7 @@ const ProfileTasks: FunctionComponent = () => {
class="flex h-full w-full flex-col items-start justify-between"
onSubmit={(e) => {
e.preventDefault();
handleSubmit((data) => saveTask({ ...data, id: uuid() }))();
handleSubmit((data) => saveTask(data))();
}}
>
<div class="flex w-full flex-1 flex-row items-start justify-between">
@@ -609,7 +568,6 @@ const ProfileTasks: FunctionComponent = () => {
</div>
{errors.name && <p class="text-red-500">{errors.name.message}</p>}
{errors.date && <p class="text-red-500">{errors.date.message}</p>}
{errors.subject?.message && <p class="text-red-500">{errors.subject.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"
@@ -626,37 +584,201 @@ const ProfileTasks: FunctionComponent = () => {
</form>
)}
</ModalWindow>
<Dialog
isOpen={showDeleteDialog}
setIsOpen={setShowDeleteDialog}
title="Удаление задачи"
onConfirm={handleDeleteTask}
confirmText="Удалить"
cancelText="Отмена"
>
<p class="mb-6 text-sm sm:text-[1rem]">"Вы уверены, что хотите удалить эту задачу?"</p>
</Dialog>
{!searchQuery && !filterTags.first && !filterTags.second && !filterTags.overdue ? (
filteredTasks.length > 0 ? (
<>
<div class={classes.header}>
Сегодня: {getDate}
<div class="flex flex-row items-center gap-2 md:hidden">
{!openSearchModal && (
<div
class="flex aspect-square h-12 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)] hover:bg-[rgba(206,232,251,0.9)]"
onClick={(e) => {
e.stopPropagation();
if (!openSearchModal) setOpenFilterModal(false);
setOpenSearchModal(!openSearchModal);
}}
>
<MagnifyingGlassIcon class="size-6" />
{isLoading ? (
<div class="flex w-full flex-1 items-center justify-center">Загрузка...</div>
) : (
<>
<ModalTags
refreshTags={fetchTags}
zIndex={70}
isOpen={openModalTags}
setIsOpen={setOpenModalTags}
tagsList={example_tags}
value={tags}
onClose={() => {
if (!isCreating) setTags({ first: 0, second: 0, overdue: false });
}}
onChange={setTags}
/>
<ModalCalendar
zIndex={80}
isOpen={openModalCalendar}
setIsOpen={setOpenModalCalendar}
onClose={() => {
if (isEdit && !isEditModal) setCalendarDate(null);
}}
onChange={(e) => (isCreating || isEditModal) && setCalendarDate(e.value)}
value={calendarDate!}
/>
<Dialog
isOpen={showDeleteDialog}
setIsOpen={setShowDeleteDialog}
title="Удаление задачи"
onConfirm={handleDeleteTask}
confirmText="Удалить"
cancelText="Отмена"
>
<p class="mb-6 text-sm sm:text-[1rem]">"Вы уверены, что хотите удалить эту задачу?"</p>
</Dialog>
{!searchQuery && !filterTags.first && !filterTags.second && !filterTags.overdue ? (
filteredTasks.length > 0 ? (
<>
<div class={classes.header}>
Сегодня: {getDate}
<div class="flex flex-row items-center gap-2 md:hidden">
{!openSearchModal && (
<div
class="flex aspect-square h-12 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)] hover:bg-[rgba(206,232,251,0.9)]"
onClick={(e) => {
e.stopPropagation();
if (!openSearchModal) setOpenFilterModal(false);
setOpenSearchModal(!openSearchModal);
}}
>
<MagnifyingGlassIcon class="size-6" />
</div>
)}
<div class="flex aspect-square h-12 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)] hover:bg-[rgba(206,232,251,0.9)]">
<FunnelIcon
class="size-6"
onClick={(e) => {
e.stopPropagation();
if (!openFilterModal) setOpenSearchModal(false);
setOpenFilterModal(!openFilterModal);
}}
/>
</div>
</div>
)}
<div class="flex aspect-square h-12 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)] hover:bg-[rgba(206,232,251,0.9)]">
</div>
<div class={classes.tasks_container}>
{groupTasksByDate.today.length > 0 ? (
<div class="w-full">
{groupTasksByDate.today.map((task) => (
<Task
name={task.name}
key={task.id}
priority={task.priority}
checked={task.checked}
overdue={task.date < new Date()}
onClick={() => handleViewTask(task.id)}
onMarkClick={() => handleMarkTask(task.id)}
/>
))}
</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}
priority={task.priority}
key={task.id}
checked={task.checked}
onClick={() => handleViewTask(task.id)}
onMarkClick={() => handleMarkTask(task.id)}
/>
))}
</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}
priority={task.priority}
key={task.id}
checked={task.checked}
onClick={() => handleViewTask(task.id)}
onMarkClick={() => handleMarkTask(task.id)}
/>
))}
</div>
))}
</div>
</>
) : (
<div class="my-auto flex h-full w-full flex-col items-center justify-start">
<img src={MainSvg} />
<div class="flex w-full flex-1 flex-col items-center justify-center text-2xl">Начни уже сегодня!</div>
</div>
)
) : (
<div class={classes.tasks_container}>
<div class="mb-8 flex w-full flex-row items-center justify-between text-xl font-semibold sm:text-3xl md:text-5xl">
{searchQuery ? "Результаты поиска" : "Результаты фильтрации"}
<div class="flex flex-row items-center gap-2 md:hidden">
{!openSearchModal && (
<div
class="flex aspect-square h-12 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)] hover:bg-[rgba(206,232,251,0.9)]"
onClick={(e) => {
e.stopPropagation();
if (!openSearchModal) setOpenFilterModal(false);
setOpenSearchModal(!openSearchModal);
}}
>
<MagnifyingGlassIcon class="size-6" />
</div>
)}
<div class="flex aspect-square h-12 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)] hover:bg-[rgba(206,232,251,0.9)]">
<FunnelIcon
class="size-6"
onClick={(e) => {
e.stopPropagation();
if (!openFilterModal) setOpenSearchModal(false);
setOpenFilterModal(!openFilterModal);
}}
/>
</div>
</div>
</div>
{filteredTasks.length > 0 ? (
filteredTasks.map((task) => (
<Task
name={task.name}
priority={task.priority}
key={task.id}
checked={task.checked}
overdue={task.date < new Date()}
onClick={() => handleViewTask(task.id)}
onMarkClick={() => handleMarkTask(task.id)}
/>
))
) : (
<div class="w-full text-center text-xl">
{searchQuery ? "Ничего не найдено" : "Нет задач с выбранными фильтрами"}
</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
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={() => {
setIsCreating(true);
setIsOpen(true);
}}
>
<PlusIcon />
</div>
{tasks.length > 0 && (
<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)]"
onClick={(e) => {
e.stopPropagation();
if (!openSearchModal) setOpenFilterModal(false);
setOpenSearchModal(!openSearchModal);
}}
>
<MagnifyingGlassIcon class="size-12" />
</div>
<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)]">
<FunnelIcon
class="size-6"
class="size-12"
onClick={(e) => {
e.stopPropagation();
if (!openFilterModal) setOpenSearchModal(false);
@@ -665,317 +787,181 @@ const ProfileTasks: FunctionComponent = () => {
/>
</div>
</div>
</div>
<div class={classes.tasks_container}>
{groupTasksByDate.today.length > 0 ? (
<div class="w-full">
{groupTasksByDate.today.map((task) => (
<Task
name={task.name}
key={task.id}
priority={task.priority}
checked={task.checked}
overdue={task.date < new Date()}
onClick={() => handleViewTask(task.id)}
onMarkClick={() => handleMarkTask(task.id)}
/>
))}
</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}
priority={task.priority}
key={task.id}
checked={task.checked}
onClick={() => handleViewTask(task.id)}
onMarkClick={() => handleMarkTask(task.id)}
/>
))}
</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}
priority={task.priority}
key={task.id}
checked={task.checked}
onClick={() => handleViewTask(task.id)}
onMarkClick={() => handleMarkTask(task.id)}
/>
))}
</div>
))}
</div>
</>
) : (
<div class="my-auto flex h-full w-full flex-col items-center justify-start">
<img src={MainSvg} />
<div class="flex w-full flex-1 flex-col items-center justify-center text-2xl">Начни уже сегодня!</div>
)}
</div>
)
) : (
<div class={classes.tasks_container}>
<div class="mb-8 flex w-full flex-row items-center justify-between text-xl font-semibold sm:text-3xl md:text-5xl">
{searchQuery ? "Результаты поиска" : "Результаты фильтрации"}
<div class="flex flex-row items-center gap-2 md:hidden">
{!openSearchModal && (
<div
class="flex aspect-square h-12 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)] hover:bg-[rgba(206,232,251,0.9)]"
onClick={(e) => {
e.stopPropagation();
if (!openSearchModal) setOpenFilterModal(false);
setOpenSearchModal(!openSearchModal);
{openSearchModal && (
<div class="fixed bottom-28 z-50 w-full rounded-lg bg-white p-4 shadow-lg md:absolute md:right-[24rem] md:mx-0 md:w-80">
{/* Пофиксить разфокус при вводе */}
<div class="flex items-center gap-2">
<MagnifyingGlassIcon class="size-6 text-gray-400" />
<input
type="text"
class="w-full rounded-lg border-0 px-4 py-2 outline-none"
placeholder="Поиск"
ref={searchInputRef}
value={searchQuery}
onInput={(e) => {
setSearchQuery((e.target as HTMLInputElement).value);
}}
>
<MagnifyingGlassIcon class="size-6" />
</div>
)}
<div class="flex aspect-square h-12 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)] hover:bg-[rgba(206,232,251,0.9)]">
<FunnelIcon
class="size-6"
onClick={(e) => {
e.stopPropagation();
if (!openFilterModal) setOpenSearchModal(false);
setOpenFilterModal(!openFilterModal);
/>
<XMarkIcon
class="size-5 cursor-pointer text-gray-400 hover:text-gray-600"
onClick={() => {
setSearchQuery("");
setOpenSearchModal(false);
}}
/>
</div>
</div>
</div>
{filteredTasks.length > 0 ? (
filteredTasks.map((task) => (
<Task
name={task.name}
priority={task.priority}
key={task.id}
checked={task.checked}
overdue={task.date < new Date()}
onClick={() => handleViewTask(task.id)}
onMarkClick={() => handleMarkTask(task.id)}
/>
))
) : (
<div class="w-full text-center text-xl">
{searchQuery ? "Ничего не найдено" : "Нет задач с выбранными фильтрами"}
)}
{openFilterModal && (
<div class="fixed top-[50%] z-50 w-full rounded-[2rem] bg-white p-4 shadow-lg md:absolute md:top-auto md:right-[24rem] md:bottom-28 md:w-80">
<div class="flex flex-col gap-4">
<div class="text-center text-lg font-semibold">Фильтры</div>
<div class="flex flex-col gap-2">
<div class="flex flex-row gap-2">
<Checkbox
name="overdue"
checked={filterTags.overdue}
onChange={(e) => {
setFilterTags({ ...filterTags, overdue: e.target.checked! });
}}
pt={{
root: {
className: cn("cursor-pointer inline-flex relative select-none align-bottom", "w-6 h-6"),
},
input: {
className: cn(
"absolute appearance-none top-0 left-0 size-full p-0 m-0 opacity-0 z-10 outline-none cursor-pointer"
),
},
box: ({ props, context }: CheckboxPassThroughMethodOptions) => ({
className: cn(
"flex items-center justify-center",
"border-2 w-6 h-6 text-gray-600 rounded-lg transition-colors duration-200",
{
"border-gray-300 bg-white": !context.checked,
"border-blue-500 bg-blue-500": context.checked,
},
{
"hover:border-blue-500 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)]":
!props.disabled,
"cursor-default opacity-60": props.disabled,
}
),
}),
icon: {
className: "w-4 h-4 transition-all duration-200 text-white text-base",
},
}}
></Checkbox>
<label htmlFor="overdue" class="cursor-pointer">
Просроченные
</label>
</div>
<div class="relative">
<div
class={cn(
"flex cursor-pointer items-center justify-center gap-2 rounded-lg bg-[rgba(206,232,251,0.7)] px-4 py-2",
{
"bg-[rgba(206,232,251,0.9)]": filterTags.first,
}
)}
onClick={() => {
setOpenFirstList(!openFirstList);
setOpenSecondList(false);
}}
>
<BookOpenIcon class="size-5" />
<span>{subjectChoices.find((s) => s.id === filterTags.first)?.name || "Предмет"}</span>
</div>
{openFirstList && (
<div class="absolute top-full right-0 z-50 max-h-[15rem] w-64 overflow-y-auto rounded-lg bg-white p-2 shadow-lg md:top-0 md:right-full md:mr-2">
{example_tags.first.map((tag) => {
return (
<div
key={`subject_${tag.id}`}
class="group flex cursor-pointer items-center gap-2 rounded-lg px-4 py-2 hover:bg-[rgba(206,232,251,0.3)]"
onClick={() => {
setFilterTags({ ...filterTags, first: tag.id });
setOpenFirstList(false);
}}
>
<div
class={cn("flex h-5 w-5 items-center justify-center rounded-full border-2", {
"border-[#FBC2C7] bg-[#FBC2C7]": filterTags.first === tag.id,
"border-[#D4D4D4]": filterTags.first !== tag.id,
})}
>
{filterTags.first === tag.id && <div class="h-2.5 w-2.5 rounded-full bg-white" />}
</div>
<span class="text-sm font-medium text-[#404040]">{tag.name}</span>
</div>
);
})}
</div>
)}
</div>
<div class="relative">
<div
class={cn(
"flex cursor-pointer items-center justify-center gap-2 rounded-lg bg-[rgba(206,232,251,0.7)] px-4 py-2",
{
"bg-[rgba(206,232,251,0.9)]": filterTags.second,
}
)}
onClick={() => {
setOpenSecondList(!openSecondList);
setOpenFirstList(false);
}}
>
<DocumentDuplicateIcon class="size-5" />
<span>{taskTypeChoices.find((s) => s.id === filterTags.second)?.name || "Задача"}</span>
</div>
{openSecondList && (
<div class="absolute top-full right-0 z-50 max-h-[15rem] w-64 overflow-y-auto rounded-lg bg-white p-2 shadow-lg md:top-0 md:right-full md:mr-2">
{example_tags.second.map((tag) => (
<div
key={`taskType_${tag.id}`}
class="group flex cursor-pointer items-center gap-2 rounded-lg px-4 py-2 hover:bg-[rgba(206,232,251,0.3)]"
onClick={() => {
setFilterTags({ ...filterTags, second: tag.id });
setOpenSecondList(false);
}}
>
<div
class={cn("flex h-5 w-5 items-center justify-center rounded-full border-2", {
"border-[#FBC2C7] bg-[#FBC2C7]": filterTags.second === tag.id,
"border-[#D4D4D4]": filterTags.second !== tag.id,
})}
>
{filterTags.second === tag.id && <div class="h-2.5 w-2.5 rounded-full bg-white" />}
</div>
<span class="text-sm font-medium text-[#404040]">{tag.name}</span>
</div>
))}
</div>
)}
</div>
{(filterTags.first || filterTags.second || filterTags.overdue) && (
<button
class="mt-2 w-full rounded-lg bg-red-100 px-4 py-2 text-red-600 hover:bg-red-200"
onClick={() => {
setFilterTags({ first: 0, second: 0, overdue: false });
setOpenFirstList(false);
setOpenSecondList(false);
}}
>
Сбросить фильтры
</button>
)}
</div>
</div>
</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
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={() => {
setIsCreating(true);
setIsOpen(true);
}}
>
<PlusIcon />
</div>
{tasks.length > 0 && (
<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)]"
onClick={(e) => {
e.stopPropagation();
if (!openSearchModal) setOpenFilterModal(false);
setOpenSearchModal(!openSearchModal);
}}
>
<MagnifyingGlassIcon class="size-12" />
</div>
<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)]">
<FunnelIcon
class="size-12"
onClick={(e) => {
e.stopPropagation();
if (!openFilterModal) setOpenSearchModal(false);
setOpenFilterModal(!openFilterModal);
}}
/>
</div>
</div>
)}
</div>
{openSearchModal && (
<div class="fixed bottom-28 z-50 w-full rounded-lg bg-white p-4 shadow-lg md:absolute md:right-[24rem] md:mx-0 md:w-80">
{/* Пофиксить разфокус при вводе */}
<div class="flex items-center gap-2">
<MagnifyingGlassIcon class="size-6 text-gray-400" />
<input
type="text"
class="w-full rounded-lg border-0 px-4 py-2 outline-none"
placeholder="Поиск"
ref={searchInputRef}
value={searchQuery}
onInput={(e) => {
setSearchQuery((e.target as HTMLInputElement).value);
}}
/>
<XMarkIcon
class="size-5 cursor-pointer text-gray-400 hover:text-gray-600"
onClick={() => {
setSearchQuery("");
setOpenSearchModal(false);
}}
/>
</div>
</div>
)}
{openFilterModal && (
<div class="fixed top-[50%] z-50 w-full rounded-[2rem] bg-white p-4 shadow-lg md:absolute md:top-auto md:right-[24rem] md:bottom-28 md:w-80">
<div class="flex flex-col gap-4">
<div class="text-center text-lg font-semibold">Фильтры</div>
<div class="flex flex-col gap-2">
<div class="flex flex-row gap-2">
<Checkbox
name="overdue"
checked={filterTags.overdue}
onChange={(e) => {
setFilterTags({ ...filterTags, overdue: e.target.checked! });
}}
pt={{
root: {
className: cn("cursor-pointer inline-flex relative select-none align-bottom", "w-6 h-6"),
},
input: {
className: cn(
"absolute appearance-none top-0 left-0 size-full p-0 m-0 opacity-0 z-10 outline-none cursor-pointer"
),
},
box: ({ props, context }: CheckboxPassThroughMethodOptions) => ({
className: cn(
"flex items-center justify-center",
"border-2 w-6 h-6 text-gray-600 rounded-lg transition-colors duration-200",
{
"border-gray-300 bg-white": !context.checked,
"border-blue-500 bg-blue-500": context.checked,
},
{
"hover:border-blue-500 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)]":
!props.disabled,
"cursor-default opacity-60": props.disabled,
}
),
}),
icon: {
className: "w-4 h-4 transition-all duration-200 text-white text-base",
},
}}
></Checkbox>
<label htmlFor="overdue" class="cursor-pointer">
Просроченные
</label>
</div>
<div class="relative">
<div
class={cn(
"flex cursor-pointer items-center justify-center gap-2 rounded-lg bg-[rgba(206,232,251,0.7)] px-4 py-2",
{
"bg-[rgba(206,232,251,0.9)]": filterTags.first,
}
)}
onClick={() => {
setOpenFirstList(!openFirstList);
setOpenSecondList(false);
}}
>
<BookOpenIcon class="size-5" />
<span>{subjectChoices.find((s) => s.id === filterTags.first)?.name || "Предмет"}</span>
</div>
{openFirstList && (
<div class="absolute top-full right-0 z-50 max-h-[15rem] w-64 overflow-y-auto rounded-lg bg-white p-2 shadow-lg md:top-0 md:right-full md:mr-2">
{example_tags.first.map((tag) => {
return (
<div
key={`subject_${tag.id}`}
class="group flex cursor-pointer items-center gap-2 rounded-lg px-4 py-2 hover:bg-[rgba(206,232,251,0.3)]"
onClick={() => {
setFilterTags({ ...filterTags, first: tag.id });
setOpenFirstList(false);
}}
>
<div
class={cn("flex h-5 w-5 items-center justify-center rounded-full border-2", {
"border-[#FBC2C7] bg-[#FBC2C7]": filterTags.first === tag.id,
"border-[#D4D4D4]": filterTags.first !== tag.id,
})}
>
{filterTags.first === tag.id && <div class="h-2.5 w-2.5 rounded-full bg-white" />}
</div>
<span class="text-sm font-medium text-[#404040]">{tag.name}</span>
</div>
);
})}
</div>
)}
</div>
<div class="relative">
<div
class={cn(
"flex cursor-pointer items-center justify-center gap-2 rounded-lg bg-[rgba(206,232,251,0.7)] px-4 py-2",
{
"bg-[rgba(206,232,251,0.9)]": filterTags.second,
}
)}
onClick={() => {
setOpenSecondList(!openSecondList);
setOpenFirstList(false);
}}
>
<DocumentDuplicateIcon class="size-5" />
<span>{taskTypeChoices.find((s) => s.id === filterTags.second)?.name || "Задача"}</span>
</div>
{openSecondList && (
<div class="absolute top-full right-0 z-50 max-h-[15rem] w-64 overflow-y-auto rounded-lg bg-white p-2 shadow-lg md:top-0 md:right-full md:mr-2">
{example_tags.second.map((tag) => (
<div
key={`taskType_${tag.id}`}
class="group flex cursor-pointer items-center gap-2 rounded-lg px-4 py-2 hover:bg-[rgba(206,232,251,0.3)]"
onClick={() => {
setFilterTags({ ...filterTags, second: tag.id });
setOpenSecondList(false);
}}
>
<div
class={cn("flex h-5 w-5 items-center justify-center rounded-full border-2", {
"border-[#FBC2C7] bg-[#FBC2C7]": filterTags.second === tag.id,
"border-[#D4D4D4]": filterTags.second !== tag.id,
})}
>
{filterTags.second === tag.id && <div class="h-2.5 w-2.5 rounded-full bg-white" />}
</div>
<span class="text-sm font-medium text-[#404040]">{tag.name}</span>
</div>
))}
</div>
)}
</div>
{(filterTags.first || filterTags.second || filterTags.overdue) && (
<button
class="mt-2 w-full rounded-lg bg-red-100 px-4 py-2 text-red-600 hover:bg-red-200"
onClick={() => {
setFilterTags({ first: 0, second: 0, overdue: false });
setOpenFirstList(false);
setOpenSecondList(false);
}}
>
Сбросить фильтры
</button>
)}
</div>
</div>
</div>
</>
)}
</div>
);