feat: tags on tasks
This commit is contained in:
@@ -1,10 +1,11 @@
|
||||
export interface ITask {
|
||||
id: number;
|
||||
id: string;
|
||||
name: string;
|
||||
checked: boolean;
|
||||
date: Date;
|
||||
description: string;
|
||||
tags: string[];
|
||||
new?: boolean;
|
||||
}
|
||||
|
||||
export interface ITaskForm extends Omit<ITask, "date"> {
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import Task from "@/components/task";
|
||||
|
||||
import ModalCalendar from "@/components/ModalCalendar";
|
||||
import ModalTags, { ITags } from "@/components/ModalTags";
|
||||
import Button from "@/components/ui/Button";
|
||||
import ModalWindow from "@/components/ui/Modal";
|
||||
import { withTitle } from "@/constructors/Component";
|
||||
@@ -21,56 +22,38 @@ import { FunctionComponent } from "preact";
|
||||
import { useEffect, useMemo, useState } from "preact/hooks";
|
||||
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_tasks: ITask[] = [
|
||||
{
|
||||
checked: false,
|
||||
date: new Date(),
|
||||
description: "test",
|
||||
id: 1,
|
||||
name: "test1",
|
||||
tags: ["Программирование", "Лабораторная работа"],
|
||||
},
|
||||
{
|
||||
checked: true,
|
||||
date: new Date(2025, 6, 2),
|
||||
description: "test2",
|
||||
id: 3,
|
||||
name: "test3",
|
||||
tags: ["Информатика", "Практическая работа"],
|
||||
},
|
||||
{
|
||||
checked: false,
|
||||
date: new Date(2025, 5, 1),
|
||||
description: "test3",
|
||||
id: 2,
|
||||
name: "test2",
|
||||
tags: ["Математика", "Домашнее задание"],
|
||||
},
|
||||
];
|
||||
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 [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: "" });
|
||||
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)
|
||||
: example_tasks;
|
||||
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[]>(init_tasks);
|
||||
const [tasks, setTasks] = useState<ITask[]>(clear ? [] : init_tasks);
|
||||
useEffect(() => {
|
||||
localStorage.setItem("tasks", JSON.stringify(tasks));
|
||||
}, [tasks]);
|
||||
@@ -91,10 +74,21 @@ const ProfileTasks: FunctionComponent = () => {
|
||||
setError("date", { message: "Выберите дату" });
|
||||
return;
|
||||
}
|
||||
const eTask: ITask = { ...data, date: calendarDate };
|
||||
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: "" });
|
||||
};
|
||||
useEffect(() => {
|
||||
if (editContent) reset({ ...editContent, date: editContent.date.toISOString().slice(0, 16) });
|
||||
@@ -105,12 +99,29 @@ const ProfileTasks: FunctionComponent = () => {
|
||||
name: "",
|
||||
description: "",
|
||||
date: "",
|
||||
tags: ["Тег1", "Тег2"],
|
||||
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]);
|
||||
return (
|
||||
<div class={classes.container}>
|
||||
<ModalTags
|
||||
isOpen={openModalTags}
|
||||
setIsOpen={setOpenModalTags}
|
||||
tagsList={example_tags}
|
||||
value={tags}
|
||||
onClose={() => {
|
||||
if (!isCreating) setTags({ first: "", second: "" });
|
||||
}}
|
||||
onChange={setTags}
|
||||
/>
|
||||
<ModalCalendar
|
||||
isOpen={openModalCalendar}
|
||||
setIsOpen={setOpenModalCalendar}
|
||||
@@ -128,6 +139,7 @@ const ProfileTasks: FunctionComponent = () => {
|
||||
setEditContent(null);
|
||||
setIsCreating(false);
|
||||
setIsEditModal(false);
|
||||
setTags({ first: "", second: "" });
|
||||
setCalendarDate(null);
|
||||
}}
|
||||
>
|
||||
@@ -192,6 +204,8 @@ const ProfileTasks: FunctionComponent = () => {
|
||||
</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", {
|
||||
@@ -214,7 +228,16 @@ const ProfileTasks: FunctionComponent = () => {
|
||||
}).format(calendarDate!)}
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex h-full flex-col items-start gap-1 rounded-2xl bg-[rgba(251,194,199,0.38)] px-4 py-2">
|
||||
<div
|
||||
class={cn("flex h-full flex-col items-start gap-1 rounded-2xl bg-[rgba(251,194,199,0.38)] px-4 py-2", {
|
||||
"cursor-pointer": isEditModal,
|
||||
})}
|
||||
onClick={() => {
|
||||
if (!isEditModal) return;
|
||||
setTags({ first: editContent.tags[0], second: editContent.tags[1] });
|
||||
setOpenModalTags(true);
|
||||
}}
|
||||
>
|
||||
<p class="flex flex-row gap-2">
|
||||
<BookOpenIcon class="size-5" />
|
||||
{editContent.tags[0]}
|
||||
@@ -232,7 +255,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: tasks.length + 1 }))();
|
||||
handleSubmit((data) => saveTask({ ...data, id: uuid() }))();
|
||||
}}
|
||||
>
|
||||
<div class="flex w-full flex-1 flex-row items-start justify-between">
|
||||
@@ -265,11 +288,12 @@ const ProfileTasks: FunctionComponent = () => {
|
||||
setCalendarDate(calendarDate ?? new Date());
|
||||
}}
|
||||
/>
|
||||
<BookmarkIcon class="ms-4 size-10 cursor-pointer" />
|
||||
<BookmarkIcon class="ms-4 size-10 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"
|
||||
|
||||
Reference in New Issue
Block a user