796 lines
33 KiB
TypeScript
796 lines
33 KiB
TypeScript
//! Файл большой, потому что было лень делить на компоненты
|
||
import Task from "@/components/task";
|
||
|
||
import ModalCalendar from "@/components/ModalCalendar";
|
||
import ModalTags, { ITags } from "@/components/ModalTags";
|
||
import Button from "@/components/ui/Button";
|
||
import Dialog from "@/components/ui/Dialog";
|
||
import ModalWindow from "@/components/ui/Modal";
|
||
import { withTitle } from "@/constructors/Component";
|
||
import { UrlsTitle } from "@/enums/urls";
|
||
import { cn } from "@/utils/class-merge";
|
||
import { PlusIcon } from "@heroicons/react/20/solid";
|
||
import {
|
||
BookmarkIcon,
|
||
BookOpenIcon,
|
||
CalendarDaysIcon,
|
||
DocumentDuplicateIcon,
|
||
FunnelIcon,
|
||
InboxArrowDownIcon,
|
||
MagnifyingGlassIcon,
|
||
PencilIcon,
|
||
TrashIcon,
|
||
XMarkIcon,
|
||
} from "@heroicons/react/24/outline";
|
||
import { FunctionComponent } from "preact";
|
||
import { useEffect, useMemo, useRef, useState } from "preact/hooks";
|
||
import { Checkbox } from "primereact/checkbox";
|
||
import { Nullable } from "primereact/ts-helpers";
|
||
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";
|
||
|
||
const example_tags: { first: string[]; second: string[] } = {
|
||
first: ["Программирование", "Информатика", "Физика", "Математика"],
|
||
second: ["Лабораторная работа", "Практическая работа", "Домашнее задание", "Экзамен"],
|
||
};
|
||
|
||
const ProfileTasks: FunctionComponent = () => {
|
||
const [openModal, setIsOpen] = useState(false); // Открыта модалка
|
||
const [openModalCalendar, setOpenModalCalendar] = useState(false); // Открыта модалка календаря
|
||
const [openModalTags, setOpenModalTags] = useState(false); // Открыта модалка тегов
|
||
const [openSearchModal, setOpenSearchModal] = useState(false); // Открыто окно поиска
|
||
const [openFilterModal, setOpenFilterModal] = useState(false);
|
||
const [isEdit, setIsEdit] = useState(false); // Открыта задача
|
||
const [isEditModal, setIsEditModal] = useState(false); // Включено редактирование задачи
|
||
const [isCreating, setIsCreating] = useState(false); // Включено создание задачи
|
||
const [editContent, setEditContent] = useState<ITask | null>(null); // Содержимое редактируемой задачи
|
||
const [calendarDate, setCalendarDate] = useState<Nullable<Date>>(); // Выбранная в календаре дата
|
||
const [tags, setTags] = useState<ITags>({ first: "", second: "", overdue: false });
|
||
const [showDeleteDialog, setShowDeleteDialog] = useState(false);
|
||
const [searchQuery, setSearchQuery] = useState(""); // Текст поиска
|
||
const [filterTags, setFilterTags] = useState<ITags>({ first: "", second: "", overdue: false });
|
||
const [openFirstList, setOpenFirstList] = useState(false);
|
||
const [openSecondList, setOpenSecondList] = useState(false);
|
||
const getDate = useMemo(() => {
|
||
const date = new Date();
|
||
const formatter = new Intl.DateTimeFormat("ru-RU", { month: "long", day: "numeric" });
|
||
return formatter.format(date);
|
||
}, []);
|
||
const init_tasks: ITask[] = localStorage.getItem("tasks") ? JSON.parse(localStorage.getItem("tasks") as string) : [];
|
||
let clear = false;
|
||
init_tasks.forEach((task) => {
|
||
clear = clear || (task.new == undefined ? true : false);
|
||
if (!clear) task.new = true;
|
||
task.date = new Date(task.date);
|
||
});
|
||
const [tasks, setTasks] = useState<ITask[]>(clear ? [] : init_tasks);
|
||
useEffect(() => {
|
||
localStorage.setItem("tasks", JSON.stringify(tasks));
|
||
}, [tasks]);
|
||
|
||
const {
|
||
handleSubmit,
|
||
register,
|
||
reset,
|
||
setError,
|
||
formState: { errors },
|
||
} = useForm<ITaskForm>({
|
||
defaultValues: {
|
||
tags: [],
|
||
},
|
||
});
|
||
const saveTask: SubmitHandler<ITaskForm> = (data) => {
|
||
if (!calendarDate) {
|
||
setError("date", { message: "Выберите дату" });
|
||
return;
|
||
}
|
||
console.log(tags);
|
||
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,
|
||
};
|
||
if (isCreating) setTasks([...tasks, eTask]);
|
||
else setTasks(tasks.map((task) => (task.id === eTask.id ? eTask : task)));
|
||
if (isCreating) setIsOpen(false);
|
||
setTags({ first: "", second: "", overdue: false });
|
||
};
|
||
useEffect(() => {
|
||
if (editContent) reset({ ...editContent, date: editContent.date.toISOString().slice(0, 16) });
|
||
else reset();
|
||
}, [editContent]);
|
||
useEffect(() => {
|
||
reset({
|
||
name: "",
|
||
description: "",
|
||
date: "",
|
||
tags: [],
|
||
checked: false,
|
||
});
|
||
}, [isCreating]);
|
||
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 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);
|
||
};
|
||
|
||
const filteredTasks = useMemo(() => {
|
||
let filtered = tasks;
|
||
|
||
// Фильтрация по поиску
|
||
if (searchQuery) {
|
||
filtered = filtered.filter(
|
||
(task) =>
|
||
task.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||
task.description?.toLowerCase().includes(searchQuery.toLowerCase())
|
||
);
|
||
}
|
||
|
||
// Фильтрация по тегам
|
||
if (filterTags.first || filterTags.second) {
|
||
filtered = filtered.filter(
|
||
(task) =>
|
||
(!filterTags.first || task.tags[0] === filterTags.first) &&
|
||
(!filterTags.second || task.tags[1] === filterTags.second)
|
||
);
|
||
}
|
||
|
||
filtered = filtered.filter((task) => (filterTags.overdue ? task.date < new Date() : task.date >= new Date()));
|
||
console.log(filtered);
|
||
return filtered;
|
||
}, [tasks, searchQuery, filterTags]);
|
||
|
||
const searchInputRef = useRef<HTMLInputElement>(null);
|
||
|
||
useEffect(() => {
|
||
if (searchInputRef.current && openSearchModal) searchInputRef.current.focus();
|
||
}, [searchInputRef, openSearchModal]);
|
||
return (
|
||
<div class={classes.container}>
|
||
<ModalTags
|
||
zIndex={70}
|
||
isOpen={openModalTags}
|
||
setIsOpen={setOpenModalTags}
|
||
tagsList={example_tags}
|
||
value={tags}
|
||
onClose={() => {
|
||
if (!isCreating) setTags({ first: "", second: "", 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}
|
||
setIsOpen={setIsOpen}
|
||
onClose={() => {
|
||
setIsEdit(false);
|
||
setEditContent(null);
|
||
setIsCreating(false);
|
||
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);
|
||
}}
|
||
>
|
||
<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);
|
||
}}
|
||
>
|
||
<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>
|
||
)}
|
||
{isCreating && (
|
||
<form
|
||
class="flex h-full w-full flex-col items-start justify-between"
|
||
onSubmit={(e) => {
|
||
e.preventDefault();
|
||
handleSubmit((data) => saveTask({ ...data, id: uuid() }))();
|
||
}}
|
||
>
|
||
<div class="flex w-full flex-1 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"
|
||
maxLength={20}
|
||
placeholder="Название"
|
||
{...register("name", { required: "Заполните название" })}
|
||
/>
|
||
<textarea
|
||
class="h-[5rem] w-full resize-none outline-0"
|
||
placeholder="Описание"
|
||
maxLength={200}
|
||
{...register("description")}
|
||
/>
|
||
<input
|
||
type="datetime-local"
|
||
value={calendarDate ? calendarDate.toISOString().slice(0, 16) : ""}
|
||
hidden
|
||
{...register("date")}
|
||
/>
|
||
<input type="checkbox" checked={false} hidden {...register("checked")} />
|
||
</div>
|
||
<div class="flex flex-row gap-3 self-start">
|
||
<CalendarDaysIcon
|
||
class="size-8 cursor-pointer"
|
||
onClick={() => {
|
||
setOpenModalCalendar(true);
|
||
setCalendarDate(calendarDate ?? new Date());
|
||
}}
|
||
/>
|
||
<BookmarkIcon class="size-8 cursor-pointer" onClick={() => setOpenModalTags(true)} />
|
||
</div>
|
||
</div>
|
||
{errors.name && <p class="text-red-500">{errors.name.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 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"
|
||
onClick={() => {
|
||
setIsOpen(false);
|
||
}}
|
||
>
|
||
Отмена
|
||
</Button>
|
||
<Button color="red" type="submit">
|
||
Добавить задачу
|
||
</Button>
|
||
</div>
|
||
</form>
|
||
)}
|
||
</ModalWindow>
|
||
<Dialog
|
||
isOpen={showDeleteDialog}
|
||
setIsOpen={setShowDeleteDialog}
|
||
title="Удаление задачи"
|
||
content="Вы уверены, что хотите удалить эту задачу?"
|
||
onConfirm={handleDeleteTask}
|
||
confirmText="Удалить"
|
||
cancelText="Отмена"
|
||
/>
|
||
{!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>
|
||
<div class={classes.tasks_container}>
|
||
{groupTasksByDate.today.length > 0 ? (
|
||
<div class="w-full">
|
||
{groupTasksByDate.today.map((task) => (
|
||
<Task
|
||
name={task.name}
|
||
key={task.id}
|
||
checked={task.checked}
|
||
overdue={task.date < new Date()}
|
||
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="flex w-full flex-1 flex-col items-center justify-center text-2xl">Начни уже сегодня!</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}
|
||
key={task.id}
|
||
checked={task.checked}
|
||
overdue={task.date < new Date()}
|
||
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 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>
|
||
<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 }) => ({
|
||
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 dark:border-blue-900/40 dark:bg-gray-900": !context.checked,
|
||
"border-blue-500 bg-blue-500 dark:border-blue-400 dark:bg-blue-400": context.checked,
|
||
},
|
||
{
|
||
"hover:border-blue-500 dark:hover:border-blue-400 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[inset_0_0_0_0.2rem_rgba(147,197,253,0.5)]":
|
||
!props.disabled,
|
||
"cursor-default opacity-60": props.disabled,
|
||
}
|
||
),
|
||
}),
|
||
icon: "w-4 h-4 transition-all duration-200 text-white text-base dark:text-gray-900",
|
||
}}
|
||
></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>{filterTags.first || "Предмет"}</span>
|
||
</div>
|
||
{openFirstList && (
|
||
<div class="absolute top-full right-0 z-50 w-64 rounded-lg bg-white p-2 shadow-lg md:top-0 md:right-full md:mr-2">
|
||
{example_tags.first.map((tag) => (
|
||
<div
|
||
key={tag}
|
||
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 });
|
||
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,
|
||
"border-[#D4D4D4]": filterTags.first !== tag,
|
||
})}
|
||
>
|
||
{filterTags.first === tag && <div class="h-2.5 w-2.5 rounded-full bg-white" />}
|
||
</div>
|
||
<span class="text-sm font-medium text-[#404040]">{tag}</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>{filterTags.second || "Задача"}</span>
|
||
</div>
|
||
{openSecondList && (
|
||
<div class="absolute top-full right-0 z-50 w-64 rounded-lg bg-white p-2 shadow-lg md:top-0 md:right-full md:mr-2">
|
||
{example_tags.second.map((tag) => (
|
||
<div
|
||
key={tag}
|
||
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 });
|
||
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,
|
||
"border-[#D4D4D4]": filterTags.second !== tag,
|
||
})}
|
||
>
|
||
{filterTags.second === tag && <div class="h-2.5 w-2.5 rounded-full bg-white" />}
|
||
</div>
|
||
<span class="text-sm font-medium text-[#404040]">{tag}</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
{(filterTags.first || filterTags.second) && (
|
||
<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: "", second: "" });
|
||
setOpenFirstList(false);
|
||
setOpenSecondList(false);
|
||
}}
|
||
>
|
||
Сбросить фильтры
|
||
</button>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default withTitle(UrlsTitle.TASKS, ProfileTasks);
|