feat: task status change

This commit is contained in:
2025-04-23 16:45:06 +03:00
parent b091e8d20d
commit 9841da8b88
2 changed files with 31 additions and 16 deletions

View File

@@ -238,8 +238,8 @@ const ProfileTasks: FunctionComponent = () => {
handleSubmit((data) => saveTask({ ...data, id: tasks.length + 1 }))();
}}
>
<div class="flex w-full flex-row items-start justify-between">
<div class="me-4 flex flex-1 flex-col gap-1">
<div class="flex w-full flex-1 flex-row items-start justify-between">
<div class="me-4 flex h-full flex-1 flex-col gap-1">
<input
class="text-2xl outline-0"
maxLength={20}
@@ -247,7 +247,7 @@ const ProfileTasks: FunctionComponent = () => {
{...register("name", { required: "Заполните название" })}
/>
<textarea
class="h-[5rem] w-full resize-none outline-0"
class="mb-10 w-full flex-1 resize-none outline-0"
placeholder="Описание"
maxLength={200}
{...register("description")}
@@ -260,14 +260,16 @@ const ProfileTasks: FunctionComponent = () => {
/>
<input type="checkbox" checked={false} hidden {...register("checked")} />
</div>
<CalendarDaysIcon
class="size-10 cursor-pointer"
onClick={() => {
setOpenModalCalendar(true);
setCalendarDate(calendarDate ?? new Date());
}}
/>
<BookmarkIcon class="ms-4 size-10 cursor-pointer" />
<div class="flex flex-row gap-3 self-start">
<CalendarDaysIcon
class="size-10 cursor-pointer"
onClick={() => {
setOpenModalCalendar(true);
setCalendarDate(calendarDate ?? new Date());
}}
/>
<BookmarkIcon class="ms-4 size-10 cursor-pointer" />
</div>
</div>
{errors.name && <p class="text-red-500">{errors.name.message}</p>}
{errors.date && <p class="text-red-500">{errors.date.message}</p>}
@@ -304,10 +306,13 @@ const ProfileTasks: FunctionComponent = () => {
setEditContent(task);
setCalendarDate(task.date);
}}
onMarkClick={() => {
setTasks(tasks.map((t) => (t.id === task.id ? { ...t, checked: !t.checked } : t)));
}}
/>
))}
</div>
<div class="group fixed right-[22rem] bottom-4 hidden flex-row items-center justify-start space-x-3 overflow-x-hidden py-2 md:flex">
<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={() => {
@@ -317,7 +322,7 @@ const ProfileTasks: FunctionComponent = () => {
>
<PlusIcon />
</div>
<div class="absolute left-0 my-auto flex flex-row space-x-3 opacity-0 transition-opacity duration-100 group-hover:opacity-100">
<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)]">
<MagnifyingGlassIcon class="size-12" />
</div>