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

feat: tasks priorities

Browse Source
This commit is contained in:
Sergey Elpashev
2025-05-12 00:02:22 +03:00
parent d61b1ccffe
commit dca682ac1e
6 changed files with 162 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/ModalTags.tsx
View File

@@ -61,14 +61,14 @@ const ModalTags: FunctionComponent<ModalTagsProps> = ({
onClick={() => setShowFirstTags(!showFirstTags)}
>
<BookOpenIcon class="size-6" />
{value?.first || "Предмет"}
{tagsList?.first?.find((tag) => tag.id === value?.first)?.name || "Предмет"}
</Button>
<Button
className="flex w-full flex-row items-center justify-center gap-1 text-[1rem]! break-words"
onClick={() => setShowSecondTags(!showSecondTags)}
>
<DocumentDuplicateIcon class="size-6" />
{value?.second || "Тема"}
{tagsList?.second?.find((tag) => tag.id === value?.second)?.name || "Тема"}
</Button>
{showFirstTags && (
<div class="absolute top-full left-0 mt-3 ml-2 flex h-fit w-[18rem] flex-col items-center rounded-[4rem] bg-white px-8 py-4 text-xs md:top-0 md:left-full md:mt-0 md:ml-5">

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

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

14
src/components/task.tsx
View File

@@ -1,3 +1,4 @@
import { cn } from "@/utils/class-merge";
import { FunctionComponent } from "preact";
import { MouseEventHandler } from "preact/compat";
import { tv } from "tailwind-variants";
@@ -5,6 +6,7 @@ import classes from "./task.module.scss";
interface TaskProps {
name: string;
priority?: number;
checked?: boolean;
overdue?: boolean;
onClick?: () => void;
@@ -36,11 +38,21 @@ const Task: FunctionComponent<TaskProps> = ({
checked = false,
onClick = () => {},
onMarkClick = () => {},
priority = 4,
overdue,
}) => {
return (
<div class="w-[95%]">
<div class={classes.task} onClick={onClick}>
<div
class={cn(
classes.task,
{ "bg-[linear-gradient(90.00deg,rgba(18,26,230,0.29),rgba(251,194,199,0.34)_100%)]": priority == 1 },
{ "bg-[linear-gradient(90.00deg,rgba(97,200,232,0.6),rgba(251,194,199,0.42)_100%)]": priority == 2 },
{ "bg-[linear-gradient(90.00deg,rgba(247,220,52,0.61),rgba(251,194,199,0.38)_97.71%)]": priority == 3 },
{ "bg-[rgba(251,194,199,0.53)] hover:bg-[rgba(251,194,199,0.7)]": priority == 4 }
)}
onClick={onClick}
>
<div
class={taskStyle({ checked })}
onClick={(e) => {

2
src/pages/profile_calendar.tsx
View File

@@ -560,6 +560,8 @@ const ProfileCalendar: FunctionComponent = () => {
key={task.id}
name={task.name}
checked={task.checked}
priority={task.priority}
overdue={task.date < new Date()}
onClick={() => handleViewTask(task.id)}
onMarkClick={() => handleTaskCheck(task.id)}
/>

86
src/pages/profile_tasks.prime.styles.tsx Normal file
View File

@@ -0,0 +1,86 @@
import { cn } from "@/utils/class-merge";
import { FlagIcon as FlagIconSolid } from "@heroicons/react/20/solid";
import { DropdownPassThroughMethodOptions, DropdownPassThroughOptions } from "primereact/dropdown";
export const DropdownStyles: DropdownPassThroughOptions = {
root: ({ props }: DropdownPassThroughMethodOptions) => ({
className: cn(
"cursor-pointer inline-flex relative select-none mb-2",
"bg-white border border-gray-400 transition-colors duration-200 ease-in-out rounded-md",
"w-full md:w-56",
"hover:border-[rgba(251,194,199,0.7)] focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(251,194,199,1)] ",
{ "opacity-60 select-none pointer-events-none cursor-default": props.disabled }
),
}),
input: ({ props }: DropdownPassThroughMethodOptions) => ({
className: cn(
"cursor-pointer flex flex-auto overflow-hidden overflow-ellipsis whitespace-nowrap relative",
"bg-transparent border-0 text-gray-800",
"p-3 transition duration-200 bg-transparent rounded appearance-none font-sans text-base",
"focus:outline-none focus:shadow-none",
{ "pr-7": props.showClear }
),
}),
trigger: {
className: cn(
"flex items-center justify-center shrink-0",
"bg-transparent text-gray-500 w-12 rounded-tr-lg rounded-br-lg"
),
},
wrapper: {
className: cn("max-h-[200px] overflow-auto", "bg-white text-gray-700 border-0 rounded-md shadow-lg", " "),
},
list: { className: "py-3 list-none m-0" },
item: ({ context }: DropdownPassThroughMethodOptions) => ({
className: cn(
"cursor-pointer font-normal overflow-hidden relative whitespace-nowrap",
"m-0 p-3 border-0 transition-shadow duration-200 rounded-none",
"hover:text-gray-700 hover:bg-gray-200",
{
"text-gray-700": !context.focused && !context.selected,
"bg-gray-300 text-gray-700 ": context.focused && !context.selected,
"bg-[rgba(251,194,199,0.7)] text-black ": context.focused && context.selected,
"bg-blue-50 text-gray-700": !context.focused && context.selected,
"opacity-60 select-none pointer-events-none cursor-default": context.disabled,
}
),
}),
itemGroup: {
className: cn("m-0 p-3 text-gray-800 bg-white font-bold", " ", "cursor-auto"),
},
header: {
className: cn("p-3 border-b border-gray-300 text-gray-700 bg-gray-100 mt-0 rounded-tl-lg rounded-tr-lg"),
},
filterContainer: {
className: "relative",
},
filterInput: {
className: cn(
"pr-7 -mr-7",
"w-full",
"font-sans text-base text-gray-700 bg-white py-3 px-3 border border-gray-300 transition duration-200 rounded-lg appearance-none",
"hover:border-[rgba(251,194,199,0.7)] focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(251,194,199,1)] "
),
},
filterIcon: { className: "-mt-2 absolute top-1/2" },
clearIcon: { className: "text-gray-500 right-12 -mt-2 absolute top-1/2" },
};
export const selectedPriorityTemplate = (option: { label: string; value: number }) => {
return (
<div class="flex items-center">
<FlagIconSolid
className={cn(
"mr-2 size-4",
{ "text-[rgba(18,26,230,0.29)]": option.value == 1 },
{ "text-[rgba(97,200,232,0.6)]": option.value == 2 },
{
"text-[rgba(247,220,52,0.61)]": option.value == 3,
},
{ "text-[rgba(251,194,199,0.53)]": option.value == 4 }
)}
/>
<span>{option.label}</span>
</div>
);
};

78
src/pages/profile_tasks.tsx
View File

@@ -28,6 +28,8 @@ import { FunctionComponent } from "preact";
import "preact/debug";
import { useEffect, useMemo, useRef, useState } from "preact/hooks";
import { Checkbox, CheckboxPassThroughMethodOptions } from "primereact/checkbox";
import { Dropdown } from "primereact/dropdown";
import { SelectItem } from "primereact/selectitem";
import { Nullable } from "primereact/ts-helpers";
import { SubmitHandler, useForm } from "react-hook-form";
import { v4 as uuid } from "uuid";
@@ -43,6 +45,14 @@ import {
IViewTagsResponse,
} from "./profile_tasks.dto";
import classes from "./profile_tasks.module.scss";
import { DropdownStyles, selectedPriorityTemplate } from "./profile_tasks.prime.styles";
const priorities: SelectItem[] = [
{ label: "Приоритет 1", value: 1 },
{ label: "Приоритет 2", value: 2 },
{ label: "Приоритет 3", value: 3 },
{ label: "Приоритет 4", value: 4 },
];
const ProfileTasks: FunctionComponent = () => {
const [openModal, setIsOpen] = useState(false); // Открыта модалка
@@ -61,6 +71,7 @@ const ProfileTasks: FunctionComponent = () => {
const [filterTags, setFilterTags] = useState<ITags>({ first: 0, second: 0, overdue: false });
const [openFirstList, setOpenFirstList] = useState(false);
const [openSecondList, setOpenSecondList] = useState(false);
const [selectedPriority, setSelectedPriority] = useState(4);
const getDate = useMemo(() => {
const date = new Date();
const formatter = new Intl.DateTimeFormat("ru-RU", { month: "long", day: "numeric" });
@@ -168,9 +179,10 @@ const ProfileTasks: FunctionComponent = () => {
const taskData = {
title: data.name,
description: data.description || "",
subject: selectedSubject,
taskType: selectedTaskType,
subject_id: selectedSubject,
taskType_id: selectedTaskType,
dateTime_due: formattedDate,
priority: selectedPriority,
telegram_notifications: false,
};
@@ -223,6 +235,7 @@ const ProfileTasks: FunctionComponent = () => {
priority: 4,
checked: false,
});
setSelectedPriority(4);
}, [isCreating]);
useEffect(() => {
if (!editContent) return;
@@ -368,6 +381,7 @@ const ProfileTasks: FunctionComponent = () => {
setEditContent(task);
setCalendarDate(task.date);
setIsEditModal(false);
setSelectedPriority(task.priority);
} catch (error) {
console.error("Failed to fetch task details:", error);
}
@@ -447,6 +461,7 @@ const ProfileTasks: FunctionComponent = () => {
maxLength: { value: 200, message: "Максимум 200 символов в описании" },
})}
/>
<input
type="datetime-local"
value={calendarDate ? calendarDate.toISOString().slice(0, 16) : ""}
@@ -531,6 +546,15 @@ const ProfileTasks: FunctionComponent = () => {
{editContent.taskType.name}
</p>
</div>
<Dropdown
disabled={!isEditModal}
pt={DropdownStyles}
options={priorities}
value={selectedPriority}
onChange={(e) => setSelectedPriority(e.value)}
itemTemplate={selectedPriorityTemplate}
valueTemplate={selectedPriorityTemplate}
/>
</div>
</form>
)}
@@ -562,6 +586,14 @@ const ProfileTasks: FunctionComponent = () => {
hidden
{...register("date")}
/>
<Dropdown
pt={DropdownStyles}
options={priorities}
value={selectedPriority}
onChange={(e) => setSelectedPriority(e.value)}
itemTemplate={selectedPriorityTemplate}
valueTemplate={selectedPriorityTemplate}
/>
<input type="checkbox" checked={false} hidden {...register("checked")} />
</div>
<div class="flex flex-col gap-3 self-start md:flex-row">
@@ -640,6 +672,7 @@ const ProfileTasks: FunctionComponent = () => {
<Task
name={task.name}
key={task.id}
priority={task.priority}
checked={task.checked}
overdue={task.date < new Date()}
onClick={() => handleViewTask(task.id)}
@@ -656,6 +689,7 @@ const ProfileTasks: FunctionComponent = () => {
{groupTasksByDate.tomorrow.map((task) => (
<Task
name={task.name}
priority={task.priority}
key={task.id}
checked={task.checked}
onClick={() => handleViewTask(task.id)}
@@ -670,6 +704,7 @@ const ProfileTasks: FunctionComponent = () => {
{group.tasks.map((task) => (
<Task
name={task.name}
priority={task.priority}
key={task.id}
checked={task.checked}
onClick={() => handleViewTask(task.id)}
@@ -719,6 +754,7 @@ const ProfileTasks: FunctionComponent = () => {
filteredTasks.map((task) => (
<Task
name={task.name}
priority={task.priority}
key={task.id}
checked={task.checked}
overdue={task.date < new Date()}
@@ -743,28 +779,30 @@ const ProfileTasks: FunctionComponent = () => {
>
<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"
{tasks.length > 0 && (
<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 (!openFilterModal) setOpenSearchModal(false);
setOpenFilterModal(!openFilterModal);
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>
)}
</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">