feat: overdue tasks

2025-05-06 12:35:35 +03:00
parent f510c8c415
commit 2c11c3b21a
5 changed files with 66 additions and 14 deletions
--- a/src/components/ModalTags.tsx
+++ b/src/components/ModalTags.tsx
@@ -8,6 +8,7 @@ import ModalWindow, { ModalWindowProps } from "./ui/Modal";
 export interface ITags {
  first: string;
  second: string;
+  overdue: boolean;
 }

 interface ModalTagsProps extends ModalWindowProps {
--- a/src/components/task.module.scss
+++ b/src/components/task.module.scss
@@ -1,5 +1,5 @@
@reference "../index.scss";

 .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];
 }
--- a/src/components/task.tsx
+++ b/src/components/task.tsx
@@ -6,6 +6,7 @@ import classes from "./task.module.scss";
 interface TaskProps {
  name: string;
  checked?: boolean;
+  overdue?: boolean;
  onClick?: () => void;
  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 (
    <div class="w-[95%]">
      <div class={classes.task} onClick={onClick}>
@@ -44,6 +51,7 @@ const Task: FunctionComponent<TaskProps> = ({ name, checked = false, onClick = (
          <p class={markStyle({ checked })}>✓</p>
        </div>
        {name}
+        {overdue && <span class="absolute top-2 right-16 text-xs text-red-500">Просрочено</span>}
      </div>
    </div>
  );
--- a/src/pages/profile_calendar.tsx
+++ b/src/pages/profile_calendar.tsx
@@ -57,7 +57,7 @@ const ProfileCalendar: FunctionComponent = () => {
  const [isEditModal, setIsEditModal] = useState(false);
  const [editContent, setEditContent] = useState<ITask | null>(null);
  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 {
@@ -206,7 +206,7 @@ const ProfileCalendar: FunctionComponent = () => {
    };
    setTasks(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 = {
@@ -236,7 +236,7 @@ const ProfileCalendar: FunctionComponent = () => {
        tagsList={example_tags}
        value={tags}
        onClose={() => {
-          setTags({ first: "", second: "" });
+          setTags({ first: "", second: "", overdue: false });
        }}
        onChange={setTags}
      />
@@ -256,7 +256,7 @@ const ProfileCalendar: FunctionComponent = () => {
          setIsEdit(false);
          setEditContent(null);
          setIsEditModal(false);
-          setTags({ first: "", second: "" });
+          setTags({ first: "", second: "", overdue: false });
          setCalendarDate(null);
        }}
      >
@@ -359,7 +359,7 @@ const ProfileCalendar: FunctionComponent = () => {
                })}
                onClick={() => {
                  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);
                }}
              >
--- a/src/pages/profile_tasks.tsx
+++ b/src/pages/profile_tasks.tsx
@@ -24,6 +24,7 @@ import {
 } 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";
@@ -46,10 +47,10 @@ const ProfileTasks: FunctionComponent = () => {
  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 [tags, setTags] = useState<ITags>({ first: "", second: "", overdue: false });
  const [showDeleteDialog, setShowDeleteDialog] = useState(false);
  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 [openSecondList, setOpenSecondList] = useState(false);
  const getDate = useMemo(() => {
@@ -99,7 +100,7 @@ const ProfileTasks: FunctionComponent = () => {
    if (isCreating) setTasks([...tasks, eTask]);
    else setTasks(tasks.map((task) => (task.id === eTask.id ? eTask : task)));
    if (isCreating) setIsOpen(false);
-    setTags({ first: "", second: "" });
+    setTags({ first: "", second: "", overdue: false });
  };
  useEffect(() => {
    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;
  }, [tasks, searchQuery, filterTags]);

@@ -218,7 +221,7 @@ const ProfileTasks: FunctionComponent = () => {
        tagsList={example_tags}
        value={tags}
        onClose={() => {
-          if (!isCreating) setTags({ first: "", second: "" });
+          if (!isCreating) setTags({ first: "", second: "", overdue: false });
        }}
        onChange={setTags}
      />
@@ -241,7 +244,7 @@ const ProfileTasks: FunctionComponent = () => {
          setEditContent(null);
          setIsCreating(false);
          setIsEditModal(false);
-          setTags({ first: "", second: "" });
+          setTags({ first: "", second: "", overdue: false });
          setCalendarDate(null);
        }}
      >
@@ -344,7 +347,7 @@ const ProfileTasks: FunctionComponent = () => {
                })}
                onClick={() => {
                  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);
                }}
              >
@@ -429,7 +432,7 @@ const ProfileTasks: FunctionComponent = () => {
        confirmText="Удалить"
        cancelText="Отмена"
      />
-      {!searchQuery && !filterTags.first && !filterTags.second ? (
+      {!searchQuery && !filterTags.first && !filterTags.second && !filterTags.overdue ? (
        filteredTasks.length > 0 ? (
          <>
            <div class={classes.header}>
@@ -467,6 +470,7 @@ const ProfileTasks: FunctionComponent = () => {
                      name={task.name}
                      key={task.id}
                      checked={task.checked}
+                      overdue={task.date < new Date()}
                      onClick={() => {
                        setIsOpen(true);
                        setIsEdit(true);
@@ -564,6 +568,7 @@ const ProfileTasks: FunctionComponent = () => {
                name={task.name}
                key={task.id}
                checked={task.checked}
+                overdue={task.date < new Date()}
                onClick={() => {
                  setIsOpen(true);
                  setIsEdit(true);
@@ -645,6 +650,44 @@ const ProfileTasks: FunctionComponent = () => {
          <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(