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

feat: overdue tasks

Browse Source
This commit is contained in:
Sergey Elpashev
2025-05-06 12:35:35 +03:00
parent 4d1264417e
commit a53687d0f8
5 changed files with 66 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/ModalTags.tsx
View File

@@ -8,6 +8,7 @@ import ModalWindow, { ModalWindowProps } from "./ui/Modal";
export interface ITags { export interface ITags {
first: string; first: string;
second: string; second: string;
overdue: boolean;
} }
interface ModalTagsProps extends ModalWindowProps { interface ModalTagsProps extends ModalWindowProps {

2
src/components/task.module.scss
View File

@@ -1,5 +1,5 @@
@reference "../index.scss"; @reference "../index.scss";
.task { .task {
@apply flex h-24 w-full cursor-pointer flex-row items-center justify-start gap-4 rounded-[3rem] bg-[rgba(251,194,199,0.53)] px-5 py-6 text-xl shadow-[0px_4px_4px_0px_rgba(0,0,0,0.25)] transition-transform hover:scale-[1.05] hover:bg-[rgba(251,194,199,0.7)] active:scale-[1.05] md:w-[500px]; @apply relative flex h-24 w-full cursor-pointer flex-row items-center justify-start gap-4 rounded-[3rem] bg-[rgba(251,194,199,0.53)] px-5 py-6 text-xl shadow-[0px_4px_4px_0px_rgba(0,0,0,0.25)] transition-transform hover:scale-[1.05] hover:bg-[rgba(251,194,199,0.7)] active:scale-[1.05] md:w-[500px];
} }

10
src/components/task.tsx
View File

@@ -6,6 +6,7 @@ import classes from "./task.module.scss";
interface TaskProps { interface TaskProps {
name: string; name: string;
checked?: boolean; checked?: boolean;
overdue?: boolean;
onClick?: () => void; onClick?: () => void;
onMarkClick?: MouseEventHandler<HTMLParagraphElement>; onMarkClick?: MouseEventHandler<HTMLParagraphElement>;
} }
@@ -30,7 +31,13 @@ const markStyle = tv({
}, },
}); });
const Task: FunctionComponent<TaskProps> = ({ name, checked = false, onClick = () => {}, onMarkClick = () => {} }) => { const Task: FunctionComponent<TaskProps> = ({
name,
checked = false,
onClick = () => {},
onMarkClick = () => {},
overdue,
}) => {
return ( return (
<div class="w-[95%]"> <div class="w-[95%]">
<div class={classes.task} onClick={onClick}> <div class={classes.task} onClick={onClick}>
@@ -44,6 +51,7 @@ const Task: FunctionComponent<TaskProps> = ({ name, checked = false, onClick = (
<p class={markStyle({ checked })}>✓</p> <p class={markStyle({ checked })}>✓</p>
</div> </div>
{name} {name}
{overdue && <span class="absolute top-2 right-16 text-xs text-red-500">Просрочено</span>}
</div> </div>
</div> </div>
); );

10
src/pages/profile_calendar.tsx
View File

@@ -57,7 +57,7 @@ const ProfileCalendar: FunctionComponent = () => {
const [isEditModal, setIsEditModal] = useState(false); const [isEditModal, setIsEditModal] = useState(false);
const [editContent, setEditContent] = useState<ITask | null>(null); const [editContent, setEditContent] = useState<ITask | null>(null);
const [calendarDate, setCalendarDate] = useState<Nullable<Date>>(); const [calendarDate, setCalendarDate] = useState<Nullable<Date>>();
const [tags, setTags] = useState<ITags>({ first: "", second: "" }); const [tags, setTags] = useState<ITags>({ first: "", second: "", overdue: false });
const [showDeleteDialog, setShowDeleteDialog] = useState(false); const [showDeleteDialog, setShowDeleteDialog] = useState(false);
const { const {
@@ -206,7 +206,7 @@ const ProfileCalendar: FunctionComponent = () => {
}; };
setTasks(tasks.map((task) => (task.id === eTask.id ? eTask : task))); setTasks(tasks.map((task) => (task.id === eTask.id ? eTask : task)));
localStorage.setItem("tasks", JSON.stringify(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: "" }); setTags({ first: "", second: "", overdue: false });
}; };
const pt = { const pt = {
@@ -236,7 +236,7 @@ const ProfileCalendar: FunctionComponent = () => {
tagsList={example_tags} tagsList={example_tags}
value={tags} value={tags}
onClose={() => { onClose={() => {
setTags({ first: "", second: "" }); setTags({ first: "", second: "", overdue: false });
}} }}
onChange={setTags} onChange={setTags}
/> />
@@ -256,7 +256,7 @@ const ProfileCalendar: FunctionComponent = () => {
setIsEdit(false); setIsEdit(false);
setEditContent(null); setEditContent(null);
setIsEditModal(false); setIsEditModal(false);
setTags({ first: "", second: "" }); setTags({ first: "", second: "", overdue: false });
setCalendarDate(null); setCalendarDate(null);
}} }}
> >
@@ -359,7 +359,7 @@ const ProfileCalendar: FunctionComponent = () => {
})} })}
onClick={() => { onClick={() => {
if (!isEditModal) return; if (!isEditModal) return;
setTags({ first: editContent.tags[0], second: editContent.tags[1] }); setTags({ first: editContent.tags[0], second: editContent.tags[1], overdue: false });
setOpenModalTags(true); setOpenModalTags(true);
}} }}
> >

57
src/pages/profile_tasks.tsx
View File

@@ -24,6 +24,7 @@ import {
} from "@heroicons/react/24/outline"; } from "@heroicons/react/24/outline";
import { FunctionComponent } from "preact"; import { FunctionComponent } from "preact";
import { useEffect, useMemo, useRef, useState } from "preact/hooks"; import { useEffect, useMemo, useRef, useState } from "preact/hooks";
import { Checkbox } from "primereact/checkbox";
import { Nullable } from "primereact/ts-helpers"; import { Nullable } from "primereact/ts-helpers";
import { SubmitHandler, useForm } from "react-hook-form"; import { SubmitHandler, useForm } from "react-hook-form";
import { v4 as uuid } from "uuid"; import { v4 as uuid } from "uuid";
@@ -46,10 +47,10 @@ const ProfileTasks: FunctionComponent = () => {
const [isCreating, setIsCreating] = useState(false); // Включено создание задачи const [isCreating, setIsCreating] = useState(false); // Включено создание задачи
const [editContent, setEditContent] = useState<ITask | null>(null); // Содержимое редактируемой задачи const [editContent, setEditContent] = useState<ITask | null>(null); // Содержимое редактируемой задачи
const [calendarDate, setCalendarDate] = useState<Nullable<Date>>(); // Выбранная в календаре дата const [calendarDate, setCalendarDate] = useState<Nullable<Date>>(); // Выбранная в календаре дата
const [tags, setTags] = useState<ITags>({ first: "", second: "" }); const [tags, setTags] = useState<ITags>({ first: "", second: "", overdue: false });
const [showDeleteDialog, setShowDeleteDialog] = useState(false); const [showDeleteDialog, setShowDeleteDialog] = useState(false);
const [searchQuery, setSearchQuery] = useState(""); // Текст поиска const [searchQuery, setSearchQuery] = useState(""); // Текст поиска
const [filterTags, setFilterTags] = useState<ITags>({ first: "", second: "" }); const [filterTags, setFilterTags] = useState<ITags>({ first: "", second: "", overdue: false });
const [openFirstList, setOpenFirstList] = useState(false); const [openFirstList, setOpenFirstList] = useState(false);
const [openSecondList, setOpenSecondList] = useState(false); const [openSecondList, setOpenSecondList] = useState(false);
const getDate = useMemo(() => { const getDate = useMemo(() => {
@@ -99,7 +100,7 @@ const ProfileTasks: FunctionComponent = () => {
if (isCreating) setTasks([...tasks, eTask]); if (isCreating) setTasks([...tasks, eTask]);
else setTasks(tasks.map((task) => (task.id === eTask.id ? eTask : task))); else setTasks(tasks.map((task) => (task.id === eTask.id ? eTask : task)));
if (isCreating) setIsOpen(false); if (isCreating) setIsOpen(false);
setTags({ first: "", second: "" }); setTags({ first: "", second: "", overdue: false });
}; };
useEffect(() => { useEffect(() => {
if (editContent) reset({ ...editContent, date: editContent.date.toISOString().slice(0, 16) }); if (editContent) reset({ ...editContent, date: editContent.date.toISOString().slice(0, 16) });
@@ -201,6 +202,8 @@ const ProfileTasks: FunctionComponent = () => {
); );
} }
filtered = filtered.filter((task) => (filterTags.overdue ? task.date < new Date() : task.date >= new Date()));
console.log(filtered);
return filtered; return filtered;
}, [tasks, searchQuery, filterTags]); }, [tasks, searchQuery, filterTags]);
@@ -218,7 +221,7 @@ const ProfileTasks: FunctionComponent = () => {
tagsList={example_tags} tagsList={example_tags}
value={tags} value={tags}
onClose={() => { onClose={() => {
if (!isCreating) setTags({ first: "", second: "" }); if (!isCreating) setTags({ first: "", second: "", overdue: false });
}} }}
onChange={setTags} onChange={setTags}
/> />
@@ -241,7 +244,7 @@ const ProfileTasks: FunctionComponent = () => {
setEditContent(null); setEditContent(null);
setIsCreating(false); setIsCreating(false);
setIsEditModal(false); setIsEditModal(false);
setTags({ first: "", second: "" }); setTags({ first: "", second: "", overdue: false });
setCalendarDate(null); setCalendarDate(null);
}} }}
> >
@@ -344,7 +347,7 @@ const ProfileTasks: FunctionComponent = () => {
})} })}
onClick={() => { onClick={() => {
if (!isEditModal) return; if (!isEditModal) return;
setTags({ first: editContent.tags[0], second: editContent.tags[1] }); setTags({ first: editContent.tags[0], second: editContent.tags[1], overdue: false });
setOpenModalTags(true); setOpenModalTags(true);
}} }}
> >
@@ -429,7 +432,7 @@ const ProfileTasks: FunctionComponent = () => {
confirmText="Удалить" confirmText="Удалить"
cancelText="Отмена" cancelText="Отмена"
/> />
{!searchQuery && !filterTags.first && !filterTags.second ? ( {!searchQuery && !filterTags.first && !filterTags.second && !filterTags.overdue ? (
filteredTasks.length > 0 ? ( filteredTasks.length > 0 ? (
<> <>
<div class={classes.header}> <div class={classes.header}>
@@ -467,6 +470,7 @@ const ProfileTasks: FunctionComponent = () => {
name={task.name} name={task.name}
key={task.id} key={task.id}
checked={task.checked} checked={task.checked}
overdue={task.date < new Date()}
onClick={() => { onClick={() => {
setIsOpen(true); setIsOpen(true);
setIsEdit(true); setIsEdit(true);
@@ -564,6 +568,7 @@ const ProfileTasks: FunctionComponent = () => {
name={task.name} name={task.name}
key={task.id} key={task.id}
checked={task.checked} checked={task.checked}
overdue={task.date < new Date()}
onClick={() => { onClick={() => {
setIsOpen(true); setIsOpen(true);
setIsEdit(true); setIsEdit(true);
@@ -645,6 +650,44 @@ const ProfileTasks: FunctionComponent = () => {
<div class="flex flex-col gap-4"> <div class="flex flex-col gap-4">
<div class="text-center text-lg font-semibold">Фильтры</div> <div class="text-center text-lg font-semibold">Фильтры</div>
<div class="flex flex-col gap-2"> <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="relative">
<div <div
class={cn( class={cn(