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

Compare commits

base: sergey:f7870e5e009b3c21e8e13ad1b97e6a6e1e3dc85e
Branches Tags
sergey:master sergey:back_connect sergey:dev sergey:form
sergey:v0.0.1
..
compare: sergey:back_connect
Branches Tags
sergey:back_connect sergey:dev sergey:form sergey:master
sergey:v0.0.1

14 Commits
f7870e5e00 ... back_conne

Author SHA1 Message Date
Sergey Elpashev
f6b19767f2 feat: calendar circle colors 2025-05-15 16:36:15 +03:00
Sergey Elpashev
049e6dd912 feat: fixed tags 2025-05-12 19:50:02 +03:00
Sergey Elpashev
c72ce9baa4 feat: avatars 2025-05-12 16:16:26 +03:00
Sergey Elpashev
ac1b7338f8 feat: nice isLoading view 2025-05-12 15:59:16 +03:00
Sergey Elpashev
ae1e0ad0c0 feat: priority select in calendar 2025-05-12 15:39:50 +03:00
Sergey Elpashev
2d2d5699a3 feat: tg bot link 2025-05-12 02:36:20 +03:00
Sergey Elpashev
d0cb13a7f1 fix: removed console logs 2025-05-12 01:51:34 +03:00
Sergey Elpashev
4ad7a00535 feat: small text fix 2025-05-12 01:46:34 +03:00
Sergey Elpashev
19ce2bf278 feat: tag delete 2025-05-12 01:43:10 +03:00
Sergey Elpashev
95a264f5a4 feat: creating tasks 2025-05-12 01:04:33 +03:00
Sergey Elpashev
dca682ac1e feat: tasks priorities 2025-05-12 00:02:22 +03:00
Sergey Elpashev
d61b1ccffe feat: added if empty pic 2025-05-12 00:00:54 +03:00
Sergey Elpashev
32984642e5 feat: new tag system 2025-05-11 22:53:52 +03:00
Sergey Elpashev
3addff881b fix: overdue filter 2025-05-10 15:38:37 +03:00
20 changed files with 1113 additions and 700 deletions
Expand all files Collapse all files

2
index.html
View File

@@ -2,7 +2,7 @@
<html lang="ru"> <html lang="ru">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Антихвост</title> <title>Антихвост</title>
</head> </head>

12
src/assets/main.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 2.3 MiB

BIN
src/assets/status/1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1012 KiB

BIN
src/assets/status/2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 MiB

BIN
src/assets/status/3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 970 KiB

BIN
src/assets/status/4.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.0 MiB

BIN
src/assets/status/5.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 973 KiB

9
src/components/ModalSettings.tsx
View File

@@ -145,7 +145,7 @@ const ModalSettings: FunctionComponent<ModalWindowProps> = ({ isOpen, setIsOpen,
<input <input
class="flex-1 outline-0" class="flex-1 outline-0"
{...register("oldPassword")} {...register("oldPassword")}
placeholder="Новый пароль" placeholder="Старый пароль"
type={showOldPassword ? "text" : "password"} type={showOldPassword ? "text" : "password"}
/> />
{showOldPassword ? ( {showOldPassword ? (
@@ -185,7 +185,12 @@ const ModalSettings: FunctionComponent<ModalWindowProps> = ({ isOpen, setIsOpen,
</div> </div>
<div class={cn({ hidden: !enableNotification })}> <div class={cn({ hidden: !enableNotification })}>
<div class="flex flex-col items-start gap-2"> <div class="flex flex-col items-start gap-2">
<span class="ms-5 text-sm">Telegram ID</span> <span class="ms-5 text-sm">
Telegram ID. Для работы перейдите в бота{" "}
<a href="https://t.me/antihvost_notif_bot" class="font-medium text-blue-600 hover:underline">
@antihvost_notif_bot
</a>
</span>
<div class="flex w-full flex-row items-center rounded-[4rem] px-5 py-3 leading-8 ring-2 ring-[rgba(206,232,251,0.7)]"> <div class="flex w-full flex-row items-center rounded-[4rem] px-5 py-3 leading-8 ring-2 ring-[rgba(206,232,251,0.7)]">
<input class="flex-1 outline-0" {...register("tgId")} placeholder={tgId} /> <input class="flex-1 outline-0" {...register("tgId")} placeholder={tgId} />
<XCircleIcon class="size-6 cursor-pointer" onClick={() => setValue("tgId", "")} /> <XCircleIcon class="size-6 cursor-pointer" onClick={() => setValue("tgId", "")} />

308
src/components/ModalTags.tsx
View File

@@ -1,13 +1,17 @@
import { IAPITag, IViewTagsResponse } from "@/pages/profile_tasks.dto";
import apiClient from "@/services/api";
import { cn } from "@/utils/class-merge"; import { cn } from "@/utils/class-merge";
import { BookOpenIcon, DocumentDuplicateIcon } from "@heroicons/react/24/outline"; import { BookOpenIcon, CheckIcon, DocumentDuplicateIcon, PlusCircleIcon } from "@heroicons/react/24/outline";
import { XMarkIcon } from "@heroicons/react/24/solid";
import { FunctionComponent } from "preact"; import { FunctionComponent } from "preact";
import { Dispatch, StateUpdater, useEffect, useState } from "preact/hooks"; import { Dispatch, StateUpdater, useEffect, useRef, useState } from "preact/hooks";
import Button from "./ui/Button"; import Button from "./ui/Button";
import Dialog from "./ui/Dialog";
import ModalWindow, { ModalWindowProps } from "./ui/Modal"; import ModalWindow, { ModalWindowProps } from "./ui/Modal";
export interface ITags { export interface ITags {
first: string; first: number;
second: string; second: number;
overdue: boolean; overdue: boolean;
} }
@@ -18,9 +22,10 @@ interface ModalTagsProps extends ModalWindowProps {
value?: ITags; value?: ITags;
onChange?: Dispatch<StateUpdater<ITags>>; onChange?: Dispatch<StateUpdater<ITags>>;
tagsList?: { tagsList?: {
first: string[]; first: IAPITag[];
second: string[]; second: IAPITag[];
}; };
refreshTags: () => Promise<IViewTagsResponse | void>;
} }
const ModalTags: FunctionComponent<ModalTagsProps> = ({ const ModalTags: FunctionComponent<ModalTagsProps> = ({
@@ -30,103 +35,234 @@ const ModalTags: FunctionComponent<ModalTagsProps> = ({
onChange, onChange,
value, value,
tagsList, tagsList,
refreshTags,
...rest ...rest
}) => { }) => {
const [showFirstTags, setShowFirstTags] = useState(false); const [showFirstTags, setShowFirstTags] = useState(false);
const [showSecondTags, setShowSecondTags] = useState(false); const [showSecondTags, setShowSecondTags] = useState(false);
const [showAddFirstTag, setShowAddFirstTag] = useState(false);
const [showAddSecondTag, setShowAddSecondTag] = useState(false);
const [showErrorDialog, setShowErrorDialog] = useState(false);
const [errorMessage, setErrorMessage] = useState<string[]>([]);
const addFirstTagRef = useRef<HTMLInputElement>(null);
const addSecondTagRef = useRef<HTMLInputElement>(null);
useEffect(() => { useEffect(() => {
if (showFirstTags && showSecondTags) setShowFirstTags(false); if (showFirstTags && showSecondTags) setShowFirstTags(false);
}, [showSecondTags]); }, [showSecondTags]);
useEffect(() => { useEffect(() => {
if (showFirstTags && showSecondTags) setShowSecondTags(false); if (showFirstTags && showSecondTags) setShowSecondTags(false);
}, [showFirstTags]); }, [showFirstTags]);
const handleCreateTag = async () => {
if (!addFirstTagRef.current?.value && !addSecondTagRef.current?.value) return;
const data: { subject_name?: string; taskType_name?: string } = {};
if (addFirstTagRef.current && addFirstTagRef.current.value) data.subject_name = addFirstTagRef.current.value;
if (addSecondTagRef.current && addSecondTagRef.current.value) data.taskType_name = addSecondTagRef.current.value;
const response = await apiClient<{ success: boolean; subject?: IAPITag; taskType?: IAPITag }>(
"/api/tags/create_tags/",
{ method: "POST", body: JSON.stringify(data) }
);
if (response.success) {
await refreshTags();
if (showAddFirstTag) {
const new_subject_id = response.subject!.id;
onChange!((prev) => ({ ...prev, first: new_subject_id }));
setShowAddFirstTag(false);
}
if (showAddSecondTag) {
const new_taskType_id = response.taskType!.id;
onChange!((prev) => ({ ...prev, second: new_taskType_id }));
setShowAddSecondTag(false);
}
}
if (addFirstTagRef.current) addFirstTagRef.current.value = "";
if (addSecondTagRef.current) addSecondTagRef.current.value = "";
};
const handleDeleteTag = async (id: number) => {
const data: { subject_id?: number; taskType_id?: number } = {};
if (showFirstTags) data.subject_id = id;
if (showSecondTags) data.taskType_id = id;
const response = await apiClient<{ error?: string }>(`/api/tags/delete_tag/`, {
method: "DELETE",
body: JSON.stringify(data),
});
if (!response.error) {
await refreshTags();
} else {
setShowErrorDialog(true);
const match = response.error?.match(/\[(.+)\]/);
if (match) setErrorMessage(match[1].split(", ").map((s) => s.trim().replace(/'/g, "")));
}
};
return ( return (
<ModalWindow <>
isOpen={isOpen} <Dialog
{...rest} isOpen={showErrorDialog}
setIsOpen={setIsOpen} setIsOpen={setShowErrorDialog}
onClose={() => { title="Ошибка!"
onClose!(); confirmation={false}
setShowFirstTags(false); cancelText="Ок"
setShowSecondTags(false); >
}} <div class="flex flex-col items-start gap-1">
className="relative h-[14rem] justify-between py-4 md:h-[14rem] md:w-[25rem]" <p class="mb-6 text-sm sm:text-[1rem]">
zIndex={70} Данный тег есть в других задачах. Поменяйте теги в них и повторите операцию.
> </p>
<p class="text-2xl font-semibold">Теги</p> <p class="text-sm sm:text-[1rem]">Задачи с этим тегом:</p>
<div class="flex w-[85%] flex-col gap-2 md:w-full"> <ul class="ms-6 list-disc">
<Button {errorMessage.map((s, i) => (
className="flex w-full flex-row items-center justify-center gap-1 text-[1rem]!" <li key={i}>{s}</li>
onClick={() => setShowFirstTags(!showFirstTags)} ))}
> </ul>
<BookOpenIcon class="size-6" /> </div>
{value?.first || "Предмет"} </Dialog>
</Button> <ModalWindow
<Button isOpen={isOpen}
className="flex w-full flex-row items-center justify-center gap-1 text-[1rem]! break-words" {...rest}
onClick={() => setShowSecondTags(!showSecondTags)} setIsOpen={setIsOpen}
> onClose={() => {
<DocumentDuplicateIcon class="size-6" /> onClose!();
{value?.second || "Тема"} setShowFirstTags(false);
</Button> setShowSecondTags(false);
{showFirstTags && ( setShowAddFirstTag(false);
<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"> setShowAddSecondTag(false);
<div class="flex h-fit max-h-[45vh] w-full flex-col gap-3 overflow-y-auto"> }}
{tagsList?.first.map((tag) => ( className="relative h-[14rem] justify-between py-4 md:h-[14rem] md:w-[25rem]"
<div zIndex={70}
class="flex cursor-pointer flex-row gap-2" >
onClick={() => <p class="text-2xl font-semibold">Теги</p>
onChange?.((prev) => { <div class="flex w-[85%] flex-col gap-2 md:w-full">
return { ...prev, first: tag }; <Button
}) className="flex w-full flex-row items-center justify-center gap-1 text-[1rem]!"
} onClick={() => {
> setShowFirstTags(!showFirstTags);
setShowSecondTags(false);
setShowAddFirstTag(false);
setShowAddSecondTag(false);
}}
>
<BookOpenIcon class="size-6" />
{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);
setShowFirstTags(false);
setShowAddFirstTag(false);
setShowAddSecondTag(false);
}}
>
<DocumentDuplicateIcon class="size-6" />
{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 gap-3 md:top-0 md:left-full md:mt-0 md:ml-5">
<div class="flex h-fit max-h-[15rem] w-full flex-col gap-3 overflow-y-auto rounded-[4rem] bg-white px-8 py-4 text-xs">
{tagsList?.first.map((tag) => (
<div <div
class={cn( class="flex cursor-pointer flex-row items-center gap-2"
"pointer-events-none flex aspect-square size-4 flex-col items-center justify-center rounded-full border-1 border-black text-white select-none", onClick={() =>
{ onChange?.((prev) => {
"bg-black": value?.first === tag, return { ...prev, first: tag.id };
} })
)} }
> >
✓ <div
class={cn(
"pointer-events-none flex aspect-square size-4 flex-col items-center justify-center rounded-full border-1 border-black text-white select-none",
{
"bg-black": value?.first === tag.id,
}
)}
>
✓
</div>
<p class="flex-1">{tag.name}</p>
<XMarkIcon
class="size-4 cursor-pointer"
onClick={(e) => {
e.stopPropagation();
handleDeleteTag(tag.id);
}}
/>
</div> </div>
<p>{tag}</p> ))}
</div> <button
))} class="mt-2 flex w-full cursor-pointer flex-row items-center gap-2"
</div> onClick={() => {
</div> setShowAddFirstTag(!showAddFirstTag);
)} setTimeout(() => addFirstTagRef.current?.focus(), 100);
{showSecondTags && ( }}
<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">
<div class="flex h-fit max-h-[45vh] w-full flex-col gap-3 overflow-y-auto">
{tagsList?.second.map((tag) => (
<div
class="flex cursor-pointer flex-row gap-2"
onClick={() =>
onChange?.((prev) => {
return { ...prev, second: tag };
})
}
> >
<div <PlusCircleIcon class="size-5" />
class={cn( <span>Добавить</span>
"pointer-events-none flex aspect-square size-4 flex-col items-center justify-center rounded-full border-1 border-black text-white select-none", </button>
{ </div>
"bg-black": value?.second === tag, {showAddFirstTag && (
} <div class="flex w-full flex-row items-center rounded-[4rem] bg-white px-8 py-4 text-xs">
)} <input placeholder="Введите текст" class="flex-1 outline-0" ref={addFirstTagRef} />
> <CheckIcon class="size-6 cursor-pointer" onClick={handleCreateTag} />
✓
</div>
<p>{tag}</p>
</div> </div>
))} )}
</div> </div>
</div> )}
)} {showSecondTags && (
</div> <div class="absolute top-full left-0 mt-3 ml-2 flex h-fit w-[18rem] flex-col items-center gap-3 md:top-0 md:left-full md:mt-0 md:ml-5">
</ModalWindow> <div class="flex h-fit max-h-[15rem] w-full flex-col gap-3 overflow-y-auto rounded-[4rem] bg-white px-8 py-4 text-xs">
{tagsList?.second.map((tag) => (
<div
class="flex cursor-pointer flex-row gap-2"
onClick={() =>
onChange?.((prev) => {
return { ...prev, second: tag.id };
})
}
>
<div
class={cn(
"pointer-events-none flex aspect-square size-4 flex-col items-center justify-center rounded-full border-1 border-black text-white select-none",
{
"bg-black": value?.second === tag.id,
}
)}
>
✓
</div>
<p class="flex-1">{tag.name}</p>
<XMarkIcon
class="size-4 cursor-pointer"
onClick={(e) => {
e.stopPropagation();
handleDeleteTag(tag.id);
}}
/>
</div>
))}
<button
class="mt-2 flex w-full cursor-pointer flex-row items-center gap-2"
onClick={() => {
setShowAddSecondTag(!showAddSecondTag);
setTimeout(() => addSecondTagRef.current?.focus(), 100);
}}
>
<PlusCircleIcon class="size-5" />
<span>Добавить</span>
</button>
</div>
{showAddSecondTag && (
<div class="flex w-full flex-row items-center rounded-[4rem] bg-white px-8 py-4 text-xs">
<input placeholder="Введите текст" class="flex-1 outline-0" ref={addSecondTagRef} />
<CheckIcon class="size-6 cursor-pointer" onClick={handleCreateTag} />
</div>
)}
</div>
)}
</div>
</ModalWindow>
</>
); );
}; };

15
src/components/menu.tsx
View File

@@ -1,12 +1,13 @@
import { useAppContext } from "@/providers/AuthProvider";
import apiClient from "@/services/api";
import { getAvatarPicUrl } from "@/services/avatar-pic";
import { cn } from "@/utils/class-merge"; import { cn } from "@/utils/class-merge";
import { CalendarDaysIcon, ListBulletIcon, UserIcon } from "@heroicons/react/24/solid"; import { CalendarDaysIcon, ListBulletIcon, UserIcon } from "@heroicons/react/24/solid";
import { FunctionComponent, h } from "preact"; import { FunctionComponent, h } from "preact";
import { useLocation } from "preact-iso"; import { useLocation } from "preact-iso";
import { useEffect, useState } from "preact/hooks";
import { tv } from "tailwind-variants"; import { tv } from "tailwind-variants";
import classes from "./menu.module.scss"; import classes from "./menu.module.scss";
import { useEffect, useState } from "preact/hooks";
import apiClient from "@/services/api";
import { useAppContext } from "@/providers/AuthProvider";
interface UserProfile { interface UserProfile {
username: string; username: string;
@@ -72,7 +73,7 @@ const Avatar: FunctionComponent = () => {
} }
}, [isLoggedIn.value]); }, [isLoggedIn.value]);
return ( return username ? (
<button <button
onClick={() => route("/profile/settings")} onClick={() => route("/profile/settings")}
class={cn("hidden h-32 w-full cursor-pointer overflow-hidden opacity-100 transition-[height,opacity] md:block", { class={cn("hidden h-32 w-full cursor-pointer overflow-hidden opacity-100 transition-[height,opacity] md:block", {
@@ -84,14 +85,16 @@ const Avatar: FunctionComponent = () => {
"h-full flex-row items-center justify-around rounded-[3rem] bg-[linear-gradient(180.00deg,rgba(249,134,143,0.5)_3.053%,rgb(228,242,252)_96.183%)] px-5 py-5 md:flex" "h-full flex-row items-center justify-around rounded-[3rem] bg-[linear-gradient(180.00deg,rgba(249,134,143,0.5)_3.053%,rgb(228,242,252)_96.183%)] px-5 py-5 md:flex"
)} )}
> >
<div class="my-5 aspect-square h-full rounded-full bg-white"></div> <div class="my-5 aspect-square h-full rounded-full">
<img class="size-full rounded-full" src={getAvatarPicUrl(status)} alt="avatar" />
</div>
<div class="flex flex-col items-center justify-center"> <div class="flex flex-col items-center justify-center">
<p class="text-3xl font-semibold">{username}</p> <p class="text-3xl font-semibold">{username}</p>
<div class="rounded-[1rem] bg-white px-5 leading-5 font-light italic">{status}</div> <div class="rounded-[1rem] bg-white px-5 leading-5 font-light italic">{status}</div>
</div> </div>
</div> </div>
</button> </button>
); ) : null;
}; };
interface MenuItems { interface MenuItems {

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

@@ -1,5 +1,5 @@
@reference "../index.scss"; @reference "../index.scss";
.task { .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 { FunctionComponent } from "preact";
import { MouseEventHandler } from "preact/compat"; import { MouseEventHandler } from "preact/compat";
import { tv } from "tailwind-variants"; import { tv } from "tailwind-variants";
@@ -5,6 +6,7 @@ import classes from "./task.module.scss";
interface TaskProps { interface TaskProps {
name: string; name: string;
priority?: number;
checked?: boolean; checked?: boolean;
overdue?: boolean; overdue?: boolean;
onClick?: () => void; onClick?: () => void;
@@ -36,11 +38,21 @@ const Task: FunctionComponent<TaskProps> = ({
checked = false, checked = false,
onClick = () => {}, onClick = () => {},
onMarkClick = () => {}, onMarkClick = () => {},
priority = 4,
overdue, overdue,
}) => { }) => {
return ( return (
<div class="w-[95%]"> <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 <div
class={taskStyle({ checked })} class={taskStyle({ checked })}
onClick={(e) => { onClick={(e) => {

43
src/components/ui/Dialog.tsx
View File

@@ -5,20 +5,21 @@ interface DialogProps {
isOpen: boolean; isOpen: boolean;
setIsOpen: (isOpen: boolean) => void; setIsOpen: (isOpen: boolean) => void;
title: string; title: string;
content: string; onConfirm?: () => void;
onConfirm: () => void;
confirmText?: string; confirmText?: string;
cancelText?: string; cancelText?: string;
confirmation?: boolean;
} }
const Dialog: FunctionComponent<DialogProps> = ({ const Dialog: FunctionComponent<DialogProps> = ({
isOpen, isOpen,
setIsOpen, setIsOpen,
title, title,
content, children,
onConfirm, onConfirm = () => {},
confirmText = "Подтвердить", confirmText = "Подтвердить",
cancelText = "Отмена", cancelText = "Отмена",
confirmation = true,
}) => { }) => {
if (!isOpen) return null; if (!isOpen) return null;
@@ -26,20 +27,28 @@ const Dialog: FunctionComponent<DialogProps> = ({
<div class="fixed inset-0 z-150 flex items-center justify-center bg-black/50"> <div class="fixed inset-0 z-150 flex items-center justify-center bg-black/50">
<div class="w-full max-w-md rounded-[4rem] bg-white p-6 shadow-lg"> <div class="w-full max-w-md rounded-[4rem] bg-white p-6 shadow-lg">
<h2 class="mb-4 text-xl font-semibold">{title}</h2> <h2 class="mb-4 text-xl font-semibold">{title}</h2>
<p class="mb-6 text-sm sm:text-[1rem]">{content}</p> {children}
<div class="flex justify-end gap-4"> <div class="flex justify-end gap-4">
<Button onClick={() => setIsOpen(false)} className="bg-gray-200 text-gray-800 hover:bg-gray-300"> {confirmation ? (
{cancelText} <>
</Button> <Button onClick={() => setIsOpen(false)} className="bg-gray-200 text-gray-800 hover:bg-gray-300">
<Button {cancelText}
onClick={() => { </Button>
onConfirm(); <Button
setIsOpen(false); onClick={() => {
}} onConfirm();
color="red" setIsOpen(false);
> }}
{confirmText} color="red"
</Button> >
{confirmText}
</Button>
</>
) : (
<Button onClick={() => setIsOpen(false)} className="bg-gray-200 text-gray-800 hover:bg-gray-300">
{cancelText}
</Button>
)}
</div> </div>
</div> </div>
</div> </div>

396
src/pages/profile_calendar.tsx
View File

@@ -18,17 +18,22 @@ import {
import { FunctionComponent } from "preact"; import { FunctionComponent } from "preact";
import { useEffect, useMemo, useState } from "preact/hooks"; import { useEffect, useMemo, useState } from "preact/hooks";
import { Calendar, CalendarDateTemplateEvent } from "primereact/calendar"; import { Calendar, CalendarDateTemplateEvent } from "primereact/calendar";
import { Dropdown } from "primereact/dropdown";
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 { priorities } from "./profile_tasks";
import { import {
IApiResponse, IApiResponse,
IAPITag,
ICreateTaskResponse, ICreateTaskResponse,
IDeleteTaskResponse, IDeleteTaskResponse,
IEditTaskResponse, IEditTaskResponse,
ITask, ITask,
ITaskDetails, ITaskDetails,
ITaskForm, ITaskForm,
IViewTagsResponse,
} from "./profile_tasks.dto"; } from "./profile_tasks.dto";
import { DropdownStyles, selectedPriorityTemplate } from "./profile_tasks.prime.styles";
const calendarStyles = { const calendarStyles = {
root: "inline-flex w-full relative", root: "inline-flex w-full relative",
@@ -61,11 +66,12 @@ 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: "", overdue: false }); const [tags, setTags] = useState<ITags>({ first: 0, second: 0, overdue: false });
const [showDeleteDialog, setShowDeleteDialog] = useState(false); const [showDeleteDialog, setShowDeleteDialog] = useState(false);
const [subjectChoices, setSubjectChoices] = useState<Record<string, string>>({}); const [subjectChoices, setSubjectChoices] = useState<IAPITag[]>([]);
const [taskTypeChoices, setTaskTypeChoices] = useState<Record<string, string>>({}); const [taskTypeChoices, setTaskTypeChoices] = useState<IAPITag[]>([]);
const [isLoading, setIsLoading] = useState(true); const [isLoading, setIsLoading] = useState(true);
const [selectedPriority, setSelectedPriority] = useState(4);
const { const {
handleSubmit, handleSubmit,
@@ -74,30 +80,38 @@ const ProfileCalendar: FunctionComponent = () => {
setError, setError,
formState: { errors }, formState: { errors },
} = useForm<ITaskForm>({ } = useForm<ITaskForm>({
defaultValues: { defaultValues: {},
tags: [],
},
}); });
useEffect(() => { useEffect(() => {
fetchTasks(); fetchTasks();
fetchTags();
}, []); }, []);
const fetchTags = async () => {
try {
const response = await apiClient<IViewTagsResponse>("/api/tags/view_tags/");
setSubjectChoices(response.subjects);
setTaskTypeChoices(response.taskTypes);
} catch (error) {
console.error("Failed to fetch tags:", error);
}
};
const fetchTasks = async () => { const fetchTasks = async () => {
try { try {
setIsLoading(true); setIsLoading(true);
const response = await apiClient<IApiResponse>("/api/tasks/view_tasks/"); const response = await apiClient<IApiResponse>("/api/tasks/view_tasks/");
setSubjectChoices(response.subject_choices);
setTaskTypeChoices(response.task_type_choices);
const convertedTasks: ITask[] = response.tasks.map((apiTask) => ({ const convertedTasks: ITask[] = response.tasks.map((apiTask) => ({
id: apiTask.id.toString(), id: apiTask.id.toString(),
name: apiTask.title, name: apiTask.title,
checked: apiTask.isCompleted, checked: apiTask.isCompleted,
date: new Date(apiTask.due_date), date: new Date(apiTask.due_date),
description: apiTask.description, description: apiTask.description,
tags: [apiTask.subject, apiTask.task_type], priority: apiTask.priority,
subject: apiTask.subject,
taskType: apiTask.taskType,
new: false, new: false,
})); }));
@@ -111,8 +125,8 @@ const ProfileCalendar: FunctionComponent = () => {
const example_tags = useMemo( const example_tags = useMemo(
() => ({ () => ({
first: Object.keys(subjectChoices), first: subjectChoices,
second: Object.keys(taskTypeChoices), second: taskTypeChoices,
}), }),
[subjectChoices, taskTypeChoices] [subjectChoices, taskTypeChoices]
); );
@@ -122,14 +136,14 @@ const ProfileCalendar: FunctionComponent = () => {
setError("date", { message: "Выберите дату" }); setError("date", { message: "Выберите дату" });
return; return;
} }
if ((!editContent?.tags[0] || !editContent.tags[1]) && (!tags.first || !tags.second)) { if ((!editContent?.subject.id || !editContent.taskType.id) && (!tags.first || !tags.second)) {
setError("tags", { message: "Выберите теги" }); setError("date", { message: "Выберите теги" });
return; return;
} }
try { try {
const selectedSubject = editContent?.tags[0] || tags.first; const selectedSubject = tags.first || editContent?.subject.id;
const selectedTaskType = editContent?.tags[1] || tags.second; const selectedTaskType = tags.second || editContent?.taskType.id;
// Format date to DD-MM-YYYYTHH:MM // Format date to DD-MM-YYYYTHH:MM
const formattedDate = calendarDate const formattedDate = calendarDate
@@ -148,10 +162,11 @@ const ProfileCalendar: FunctionComponent = () => {
const taskData = { const taskData = {
title: data.name, title: data.name,
description: data.description || "", description: data.description || "",
subject: selectedSubject, subject_id: selectedSubject,
taskType: selectedTaskType, taskType_id: selectedTaskType,
dateTime_due: formattedDate, dateTime_due: formattedDate,
telegram_notifications: false, telegram_notifications: false,
priority: selectedPriority,
}; };
if (!editContent) { if (!editContent) {
@@ -171,12 +186,22 @@ const ProfileCalendar: FunctionComponent = () => {
if (!response.success) { if (!response.success) {
throw new Error(response.message); throw new Error(response.message);
} } else if (isEdit)
setEditContent({
name: response.task.title,
id: response.task.id.toString(),
description: response.task.description,
priority: response.task.priority,
checked: response.task.isCompleted,
subject: response.task.subject,
taskType: response.task.task_type,
date: new Date(response.task.dateTime_due),
});
} }
await fetchTasks(); await fetchTasks();
setIsOpen(false); setIsOpen(false);
setTags({ first: "", second: "", overdue: false }); setTags({ first: 0, second: 0, overdue: false });
} catch (error) { } catch (error) {
console.error("Failed to save task:", error); console.error("Failed to save task:", error);
} }
@@ -226,14 +251,16 @@ const ProfileCalendar: FunctionComponent = () => {
checked: false, checked: false,
date: new Date(taskDetails.dateTime_due), date: new Date(taskDetails.dateTime_due),
description: taskDetails.description, description: taskDetails.description,
tags: [taskDetails.subject, taskDetails.taskType], subject: taskDetails.subject,
new: false, taskType: taskDetails.task_type,
priority: taskDetails.priority,
}; };
setIsOpen(true); setIsOpen(true);
setIsEdit(true); setIsEdit(true);
setEditContent(task); setEditContent(task);
setCalendarDate(task.date); setCalendarDate(task.date);
setSelectedPriority(task.priority);
setIsEditModal(false); setIsEditModal(false);
} catch (error) { } catch (error) {
console.error("Failed to fetch task details:", error); console.error("Failed to fetch task details:", error);
@@ -263,18 +290,35 @@ const ProfileCalendar: FunctionComponent = () => {
useEffect(() => { useEffect(() => {
if (!editContent) return; if (!editContent) return;
const newEditContent = editContent; const newEditContent = editContent;
if (tags.first) newEditContent.tags = [tags.first, newEditContent.tags[1]]; if (tags.first) newEditContent.subject = subjectChoices.find((tag) => tag.id === tags.first)!;
if (tags.second) newEditContent.tags = [newEditContent.tags[0], tags.second]; if (tags.second) newEditContent.taskType = taskTypeChoices.find((tag) => tag.id === tags.second)!;
setEditContent(newEditContent); setEditContent(newEditContent);
}, [tags]); }, [tags]);
const tasksCount = (date: CalendarDateTemplateEvent) => { const tasksCount = (date: CalendarDateTemplateEvent) => {
return tasks.filter((task) => { const filterTasks = tasks.filter((task) => {
const taskDate = task.date; const taskDate = task.date;
return ( return (
taskDate.getDate() === date.day && taskDate.getMonth() === date.month && taskDate.getFullYear() === date.year taskDate.getDate() === date.day && taskDate.getMonth() === date.month && taskDate.getFullYear() === date.year
); );
}).length; });
return {
length: filterTasks.length,
colors: filterTasks.map((task) => {
switch (task.priority) {
case 1:
return "bg-[rgba(18,26,230,1)]";
case 2:
return "bg-[rgba(97,200,232,1)]";
case 3:
return "bg-[rgba(247,220,52,1)]";
case 4:
return "bg-[rgba(251,194,199,1)]";
default:
return "bg-[rgba(251,194,199,1)]";
}
}),
};
}; };
const hasTasksOnDate = (date: CalendarDateTemplateEvent) => { const hasTasksOnDate = (date: CalendarDateTemplateEvent) => {
@@ -288,7 +332,8 @@ const ProfileCalendar: FunctionComponent = () => {
const dateTemplate = (date: CalendarDateTemplateEvent) => { const dateTemplate = (date: CalendarDateTemplateEvent) => {
const isHighlighted = hasTasksOnDate(date); const isHighlighted = hasTasksOnDate(date);
const countT = tasksCount(date); const taskInfo = tasksCount(date);
if (taskInfo.length) console.log(taskInfo);
const isSelected = const isSelected =
currentDate && currentDate &&
currentDate.getDate() === date.day && currentDate.getDate() === date.day &&
@@ -312,10 +357,10 @@ const ProfileCalendar: FunctionComponent = () => {
<span>{date.day}</span> <span>{date.day}</span>
{isHighlighted && ( {isHighlighted && (
<div class="absolute top-2 right-2 flex h-fit w-2 flex-col items-center gap-1 md:h-2 md:w-fit md:flex-row"> <div class="absolute top-2 right-2 flex h-fit w-2 flex-col items-center gap-1 md:h-2 md:w-fit md:flex-row">
{Array.from({ length: countT > 3 ? 3 : countT }).map((_, i) => ( {Array.from({ length: taskInfo.length > 3 ? 3 : taskInfo.length }).map((_, i) => (
<span key={i} className="size-2 rounded-full bg-pink-400" /> <span key={i} className={cn("size-2 rounded-full", taskInfo.colors[i])} />
))} ))}
{countT > 3 && <span className="text-xs font-bold text-pink-400 select-none">+</span>} {taskInfo.length > 3 && <span className="text-xs font-bold text-pink-400 select-none">+</span>}
</div> </div>
)} )}
</div> </div>
@@ -351,19 +396,158 @@ const ProfileCalendar: FunctionComponent = () => {
return ( return (
<div class="flex w-full flex-col items-center"> <div class="flex w-full flex-col items-center">
<ModalWindow
isOpen={openModal}
setIsOpen={setIsOpen}
onClose={() => {
setIsEdit(false);
setEditContent(null);
setSelectedPriority(4);
setIsEditModal(false);
setTags({ first: 0, second: 0, overdue: false });
setCalendarDate(null);
}}
>
{isEdit && editContent && (
<form
class="flex h-full w-full flex-col items-start justify-between"
onSubmit={(e) => {
e.preventDefault();
if (isEditModal) handleSubmit(saveTask)();
else setIsEditModal(!isEditModal);
}}
>
<div class="flex w-full flex-row items-start justify-between">
<div class="flex flex-1 flex-col gap-1 pe-2">
<input
class={cn("w-full p-2 text-2xl outline-0", {
"rounded-md bg-gray-400/30 ring-1 ring-gray-400": isEditModal,
})}
disabled={!isEditModal}
placeholder="Название"
{...register("name", {
required: "Заполните название",
maxLength: { value: 20, message: "Максимум 20 символов в названии" },
})}
/>
<textarea
class={cn("h-[5rem] w-full resize-none p-2 outline-0", {
"rounded-md bg-gray-400/30 ring-1 ring-gray-400": isEditModal,
})}
disabled={!isEditModal}
placeholder={isEditModal ? "Описание" : ""}
{...register("description", {
maxLength: { value: 200, message: "Максимум 200 символов в описании" },
})}
/>
<input
type="datetime-local"
value={calendarDate ? calendarDate.toISOString().slice(0, 16) : ""}
hidden
{...register("date")}
/>
<input type="checkbox" hidden {...register("checked")} />
</div>
<div class="flex flex-row gap-4">
<div
className="flex cursor-pointer flex-col items-center gap-3"
onClick={() => {
if (isEditModal) {
handleSubmit(saveTask)();
setIsEditModal(!isEditModal);
} else setIsEditModal(!isEditModal);
}}
>
{isEditModal ? (
<>
<InboxArrowDownIcon class="size-6" />
<p class="text-[0.7rem]">Сохранить</p>
</>
) : (
<>
<PencilIcon class="size-6" />
<p class="text-[0.7rem]">Редактировать</p>
</>
)}
</div>
<div
className="flex cursor-pointer flex-col items-center gap-3"
onClick={() => setShowDeleteDialog(true)}
>
<TrashIcon class="size-6" />
<p class="text-[0.7rem]">Удалить</p>
</div>
</div>
</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>}
<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", {
"cursor-pointer": isEditModal,
})}
onClick={() => {
if (!isEditModal) return;
setOpenModalCalendar(true);
setCalendarDate(editContent.date);
}}
>
<CalendarDaysIcon class="size-10" />
<p>
{Intl.DateTimeFormat("ru-RU", {
day: "2-digit",
month: "2-digit",
year: "numeric",
hour: "2-digit",
minute: "2-digit",
}).format(calendarDate!)}
</p>
</div>
<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.subject.id, second: editContent.taskType.id, overdue: false });
setOpenModalTags(true);
}}
>
<p class="flex flex-row gap-2">
<BookOpenIcon class="size-5" />
{editContent.subject.name}
</p>
<p class="flex flex-row gap-2">
<DocumentDuplicateIcon class="size-5" />
{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>
)}
</ModalWindow>
{isLoading ? ( {isLoading ? (
<div class="flex w-full flex-1 items-center justify-center"> <div class="flex w-full flex-1 items-center justify-center">Загрузка...</div>
<div class="text-2xl">Загрузка...</div>
</div>
) : ( ) : (
<> <>
<ModalTags <ModalTags
refreshTags={fetchTags}
isOpen={openModalTags} isOpen={openModalTags}
setIsOpen={setOpenModalTags} setIsOpen={setOpenModalTags}
tagsList={example_tags} tagsList={example_tags}
value={tags} value={tags}
onClose={() => { onClose={() => {
setTags({ first: "", second: "", overdue: false }); setTags({ first: 0, second: 0, overdue: false });
}} }}
onChange={setTags} onChange={setTags}
/> />
@@ -376,152 +560,16 @@ const ProfileCalendar: FunctionComponent = () => {
onChange={(e) => isEditModal && setCalendarDate(e.value)} onChange={(e) => isEditModal && setCalendarDate(e.value)}
value={calendarDate!} value={calendarDate!}
/> />
<ModalWindow
isOpen={openModal}
setIsOpen={setIsOpen}
onClose={() => {
setIsEdit(false);
setEditContent(null);
setIsEditModal(false);
setTags({ first: "", second: "", overdue: false });
setCalendarDate(null);
}}
>
{isEdit && editContent && (
<form
class="flex h-full w-full flex-col items-start justify-between"
onSubmit={(e) => {
e.preventDefault();
if (isEditModal) handleSubmit(saveTask)();
else setIsEditModal(!isEditModal);
}}
>
<div class="flex w-full flex-row items-start justify-between">
<div class="flex flex-1 flex-col gap-1 pe-2">
<input
class={cn("w-full p-2 text-2xl outline-0", {
"rounded-md bg-gray-400/30 ring-1 ring-gray-400": isEditModal,
})}
disabled={!isEditModal}
placeholder="Название"
{...register("name", {
required: "Заполните название",
maxLength: { value: 20, message: "Максимум 20 символов в названии" },
})}
/>
<textarea
class={cn("h-[5rem] w-full resize-none p-2 outline-0", {
"rounded-md bg-gray-400/30 ring-1 ring-gray-400": isEditModal,
})}
disabled={!isEditModal}
placeholder={isEditModal ? "Описание" : ""}
{...register("description", {
maxLength: { value: 200, message: "Максимум 200 символов в описании" },
})}
/>
<input
type="datetime-local"
value={calendarDate ? calendarDate.toISOString().slice(0, 16) : ""}
hidden
{...register("date")}
/>
<input type="checkbox" hidden {...register("checked")} />
</div>
<div class="flex flex-row gap-4">
<div
className="flex cursor-pointer flex-col items-center gap-3"
onClick={() => {
if (isEditModal) {
handleSubmit(saveTask)();
setIsEditModal(!isEditModal);
} else setIsEditModal(!isEditModal);
}}
>
{isEditModal ? (
<>
<InboxArrowDownIcon class="size-6" />
<p class="text-[0.7rem]">Сохранить</p>
</>
) : (
<>
<PencilIcon class="size-6" />
<p class="text-[0.7rem]">Редактировать</p>
</>
)}
</div>
<div
className="flex cursor-pointer flex-col items-center gap-3"
onClick={() => setShowDeleteDialog(true)}
>
<TrashIcon class="size-6" />
<p class="text-[0.7rem]">Удалить</p>
</div>
</div>
</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",
{
"cursor-pointer": isEditModal,
}
)}
onClick={() => {
if (!isEditModal) return;
setOpenModalCalendar(true);
setCalendarDate(editContent.date);
}}
>
<CalendarDaysIcon class="size-10" />
<p>
{Intl.DateTimeFormat("ru-RU", {
day: "2-digit",
month: "2-digit",
year: "numeric",
hour: "2-digit",
minute: "2-digit",
}).format(calendarDate!)}
</p>
</div>
<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], overdue: false });
setOpenModalTags(true);
}}
>
<p class="flex flex-row gap-2">
<BookOpenIcon class="size-5" />
{editContent.tags[0]}
</p>
<p class="flex flex-row gap-2">
<DocumentDuplicateIcon class="size-5" />
{editContent.tags[1]}
</p>
</div>
</div>
</form>
)}
</ModalWindow>
<Dialog <Dialog
isOpen={showDeleteDialog} isOpen={showDeleteDialog}
setIsOpen={setShowDeleteDialog} setIsOpen={setShowDeleteDialog}
title="Удаление задачи" title="Удаление задачи"
content="Вы уверены, что хотите удалить эту задачу?"
onConfirm={handleDeleteTask} onConfirm={handleDeleteTask}
confirmText="Удалить" confirmText="Удалить"
cancelText="Отмена" cancelText="Отмена"
/> >
<p class="mb-6 text-sm sm:text-[1rem]">"Вы уверены, что хотите удалить эту задачу?"</p>
</Dialog>
<Calendar <Calendar
value={currentDate} value={currentDate}
onChange={(e) => setCurrentDate(e ? e.value! : new Date())} onChange={(e) => setCurrentDate(e ? e.value! : new Date())}
@@ -540,6 +588,8 @@ const ProfileCalendar: FunctionComponent = () => {
key={task.id} key={task.id}
name={task.name} name={task.name}
checked={task.checked} checked={task.checked}
priority={task.priority}
overdue={task.date < new Date()}
onClick={() => handleViewTask(task.id)} onClick={() => handleViewTask(task.id)}
onMarkClick={() => handleTaskCheck(task.id)} onMarkClick={() => handleTaskCheck(task.id)}
/> />

2
src/pages/profile_settings.module.scss
View File

@@ -5,7 +5,7 @@
} }
#avatar { #avatar {
@apply flex aspect-square h-[7rem] flex-col items-center justify-center rounded-full bg-white; @apply flex aspect-square h-[7rem] flex-col items-center justify-center rounded-full;
} }
.profile_container { .profile_container {

13
src/pages/profile_settings.tsx
View File

@@ -4,6 +4,7 @@ import { withTitle } from "@/constructors/Component";
import { UrlsTitle } from "@/enums/urls"; import { UrlsTitle } from "@/enums/urls";
import { useAppContext } from "@/providers/AuthProvider"; import { useAppContext } from "@/providers/AuthProvider";
import apiClient from "@/services/api"; import apiClient from "@/services/api";
import { getAvatarPicUrl } from "@/services/avatar-pic";
import { cn } from "@/utils/class-merge"; import { cn } from "@/utils/class-merge";
import { ArrowRightStartOnRectangleIcon, Cog8ToothIcon } from "@heroicons/react/24/outline"; import { ArrowRightStartOnRectangleIcon, Cog8ToothIcon } from "@heroicons/react/24/outline";
import { FunctionComponent } from "preact"; import { FunctionComponent } from "preact";
@@ -62,11 +63,19 @@ const ProfileSettings: FunctionComponent = () => {
console.error("Logout failed:", error); console.error("Logout failed:", error);
} }
}; };
if (!userData.username)
return (
<div class="flex h-full w-full flex-1 flex-col items-center justify-center">
<div class="flex w-full flex-1 items-center justify-center">Загрузка...</div>;
</div>
);
return ( return (
<div class={classes.container}> <div class={classes.container}>
<ModalSettings isOpen={isSettingsOpen} setIsOpen={setIsSettingsOpen} onClose={fetchUserData} /> <ModalSettings isOpen={isSettingsOpen} setIsOpen={setIsSettingsOpen} onClose={fetchUserData} />
<div class="flex w-full flex-col items-center rounded-[4rem] bg-[linear-gradient(180.00deg,rgb(251,194,199),rgba(206,232,251,0.72)_100%)] px-7 py-5 shadow-[0px_4px_4px_0px_rgba(0,0,0,0.25)] md:flex-row"> <div class="flex w-full flex-col items-center rounded-[4rem] bg-[linear-gradient(180.00deg,rgb(251,194,199),rgba(206,232,251,0.72)_100%)] px-7 py-5 shadow-[0px_4px_4px_0px_rgba(0,0,0,0.25)] md:flex-row">
<div id={classes.avatar}>"Аватар"</div> <div id={classes.avatar}>
<img class="size-28 rounded-full" src={getAvatarPicUrl(userData.status)} alt="avatar" />
</div>
<div class={classes.header_block__name}> <div class={classes.header_block__name}>
<p class="text-4xl font-semibold">{userData.username}</p> <p class="text-4xl font-semibold">{userData.username}</p>
<p class="text-2xl font-light">{userData.status}</p> <p class="text-2xl font-light">{userData.status}</p>
@@ -100,4 +109,6 @@ const ProfileSettings: FunctionComponent = () => {
); );
}; };
ProfileSettings.displayName = "ProfileSettings";
export default withTitle(UrlsTitle.PROFILE, ProfileSettings); export default withTitle(UrlsTitle.PROFILE, ProfileSettings);

46
src/pages/profile_tasks.dto.ts
View File

@@ -1,14 +1,23 @@
export interface IAPITag {
name: string;
id: number;
}
export interface ITask { export interface ITask {
id: string; id: string;
name: string; name: string;
checked: boolean; checked: boolean;
priority: number;
date: Date; date: Date;
description: string; description: string;
tags: string[]; subject: IAPITag;
new?: boolean; taskType: IAPITag;
} }
export interface ITaskForm extends Omit<ITask, "date"> { export interface ITaskView extends Omit<ITask, "taskType"> {
task_type: IAPITag;
}
export interface ITaskForm extends Omit<ITask, "date" | "subject" | "taskType"> {
date: string; date: string;
} }
@@ -16,17 +25,16 @@ export interface IApiTask {
id: number; id: number;
title: string; title: string;
description: string; description: string;
priority: number;
isCompleted: boolean; isCompleted: boolean;
due_date: string; due_date: string;
subject: string; subject: IAPITag;
task_type: string; taskType: IAPITag;
} }
export interface IApiResponse { export interface IApiResponse {
profile: string; profile: string;
tasks: IApiTask[]; tasks: IApiTask[];
subject_choices: Record<string, string>;
task_type_choices: Record<string, string>;
} }
export interface ICreateTaskResponse { export interface ICreateTaskResponse {
@@ -53,12 +61,10 @@ export interface ITaskDetails {
profile: string; profile: string;
title: string; title: string;
description: string; description: string;
subject: string; subject: IAPITag;
taskType: string; task_type: IAPITag;
priority: number;
dateTime_due: string; dateTime_due: string;
remind_before_days: number;
repeat_reminder: number;
reminder_time: string;
} }
export interface IDeleteTaskResponse { export interface IDeleteTaskResponse {
@@ -74,14 +80,16 @@ export interface IEditTaskResponse {
id: number; id: number;
title: string; title: string;
description: string; description: string;
subject: string; subject: IAPITag;
taskType: string; task_type: IAPITag;
dateTime_due: string; dateTime_due: string;
isCompleted: boolean; isCompleted: boolean;
reminder?: { priority: number;
remind_before_days: number;
repeat_interval: number;
reminder_time: string;
};
}; };
} }
export interface IViewTagsResponse {
profile: string;
subjects: IAPITag[];
taskTypes: IAPITag[];
}

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>
);
};

844
src/pages/profile_tasks.tsx
View File

File diff suppressed because it is too large Load Diff

21
src/services/avatar-pic.ts Normal file
View File

@@ -0,0 +1,21 @@
import Status1 from "@/assets/status/1.png";
import Status2 from "@/assets/status/2.png";
import Status3 from "@/assets/status/3.png";
import Status4 from "@/assets/status/4.png";
import Status5 from "@/assets/status/5.png";
export const getAvatarPicUrl = (status: string) => {
switch (true) {
case status.includes("точно"):
return Status1;
case status.includes("плана нет"):
return Status2;
case status.includes("прокрастинации"):
return Status3;
case status.includes("3000"):
return Status4;
case status.includes("планирования"):
return Status5;
default:
return Status1;
}
};