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

Compare commits

base: sergey:19ce2bf278af3e42525029adfef32ec2e93951bb
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

8 Commits
19ce2bf278 ... 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
15 changed files with 625 additions and 577 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>

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", "")} />

8
src/components/ModalTags.tsx
View File

@@ -1,4 +1,4 @@
import { IAPITag } from "@/pages/profile_tasks.dto"; import { IAPITag, IViewTagsResponse } from "@/pages/profile_tasks.dto";
import apiClient from "@/services/api"; import apiClient from "@/services/api";
import { cn } from "@/utils/class-merge"; import { cn } from "@/utils/class-merge";
import { BookOpenIcon, CheckIcon, DocumentDuplicateIcon, PlusCircleIcon } from "@heroicons/react/24/outline"; import { BookOpenIcon, CheckIcon, DocumentDuplicateIcon, PlusCircleIcon } from "@heroicons/react/24/outline";
@@ -25,7 +25,7 @@ interface ModalTagsProps extends ModalWindowProps {
first: IAPITag[]; first: IAPITag[];
second: IAPITag[]; second: IAPITag[];
}; };
refreshTags: () => void; refreshTags: () => Promise<IViewTagsResponse | void>;
} }
const ModalTags: FunctionComponent<ModalTagsProps> = ({ const ModalTags: FunctionComponent<ModalTagsProps> = ({
@@ -64,7 +64,7 @@ const ModalTags: FunctionComponent<ModalTagsProps> = ({
{ method: "POST", body: JSON.stringify(data) } { method: "POST", body: JSON.stringify(data) }
); );
if (response.success) { if (response.success) {
refreshTags(); await refreshTags();
if (showAddFirstTag) { if (showAddFirstTag) {
const new_subject_id = response.subject!.id; const new_subject_id = response.subject!.id;
onChange!((prev) => ({ ...prev, first: new_subject_id })); onChange!((prev) => ({ ...prev, first: new_subject_id }));
@@ -89,7 +89,7 @@ const ModalTags: FunctionComponent<ModalTagsProps> = ({
body: JSON.stringify(data), body: JSON.stringify(data),
}); });
if (!response.error) { if (!response.error) {
refreshTags(); await refreshTags();
} else { } else {
setShowErrorDialog(true); setShowErrorDialog(true);
const match = response.error?.match(/\[(.+)\]/); const match = response.error?.match(/\[(.+)\]/);

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 {

144
src/pages/profile_calendar.tsx
View File

@@ -18,8 +18,10 @@ 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, IAPITag,
@@ -31,6 +33,7 @@ import {
ITaskForm, ITaskForm,
IViewTagsResponse, 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",
@@ -68,6 +71,7 @@ const ProfileCalendar: FunctionComponent = () => {
const [subjectChoices, setSubjectChoices] = useState<IAPITag[]>([]); const [subjectChoices, setSubjectChoices] = useState<IAPITag[]>([]);
const [taskTypeChoices, setTaskTypeChoices] = useState<IAPITag[]>([]); const [taskTypeChoices, setTaskTypeChoices] = useState<IAPITag[]>([]);
const [isLoading, setIsLoading] = useState(true); const [isLoading, setIsLoading] = useState(true);
const [selectedPriority, setSelectedPriority] = useState(4);
const { const {
handleSubmit, handleSubmit,
@@ -76,16 +80,7 @@ const ProfileCalendar: FunctionComponent = () => {
setError, setError,
formState: { errors }, formState: { errors },
} = useForm<ITaskForm>({ } = useForm<ITaskForm>({
defaultValues: { defaultValues: {},
subject: {
name: "",
id: 0,
},
taskType: {
name: "",
id: 0,
},
},
}); });
useEffect(() => { useEffect(() => {
@@ -142,13 +137,13 @@ const ProfileCalendar: FunctionComponent = () => {
return; return;
} }
if ((!editContent?.subject.id || !editContent.taskType.id) && (!tags.first || !tags.second)) { if ((!editContent?.subject.id || !editContent.taskType.id) && (!tags.first || !tags.second)) {
setError("subject", { message: "Выберите теги" }); setError("date", { message: "Выберите теги" });
return; return;
} }
try { try {
const selectedSubject = editContent?.subject.id || tags.first; const selectedSubject = tags.first || editContent?.subject.id;
const selectedTaskType = editContent?.taskType.id || 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
@@ -167,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) {
@@ -190,7 +186,17 @@ 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();
@@ -254,6 +260,7 @@ const ProfileCalendar: FunctionComponent = () => {
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);
@@ -289,12 +296,29 @@ const ProfileCalendar: FunctionComponent = () => {
}, [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) => {
@@ -308,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 &&
@@ -332,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>
@@ -371,38 +396,13 @@ const ProfileCalendar: FunctionComponent = () => {
return ( return (
<div class="flex w-full flex-col items-center"> <div class="flex w-full flex-col items-center">
{isLoading ? (
<div class="flex w-full flex-1 items-center justify-center">
<div class="text-2xl">Загрузка...</div>
</div>
) : (
<>
<ModalTags
refreshTags={fetchTags}
isOpen={openModalTags}
setIsOpen={setOpenModalTags}
tagsList={example_tags}
value={tags}
onClose={() => {
setTags({ first: 0, second: 0, overdue: false });
}}
onChange={setTags}
/>
<ModalCalendar
isOpen={openModalCalendar}
setIsOpen={setOpenModalCalendar}
onClose={() => {
if (isEdit && !isEditModal) setCalendarDate(null);
}}
onChange={(e) => isEditModal && setCalendarDate(e.value)}
value={calendarDate!}
/>
<ModalWindow <ModalWindow
isOpen={openModal} isOpen={openModal}
setIsOpen={setIsOpen} setIsOpen={setIsOpen}
onClose={() => { onClose={() => {
setIsEdit(false); setIsEdit(false);
setEditContent(null); setEditContent(null);
setSelectedPriority(4);
setIsEditModal(false); setIsEditModal(false);
setTags({ first: 0, second: 0, overdue: false }); setTags({ first: 0, second: 0, overdue: false });
setCalendarDate(null); setCalendarDate(null);
@@ -482,15 +482,11 @@ const ProfileCalendar: FunctionComponent = () => {
{errors.name && <p class="text-red-500">{errors.name.message}</p>} {errors.name && <p class="text-red-500">{errors.name.message}</p>}
{errors.description && <p class="text-red-500">{errors.description.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.date && <p class="text-red-500">{errors.date.message}</p>}
{errors.subject && <p class="text-red-500">{errors.subject.message}</p>}
<div class="flex flex-col items-center gap-6 self-center md:flex-row md:justify-start md:self-start"> <div class="flex flex-col items-center gap-6 self-center md:flex-row md:justify-start md:self-start">
<div <div
class={cn( class={cn("flex h-full flex-row items-center gap-1 rounded-2xl bg-[rgba(251,194,199,0.38)] px-2 py-1", {
"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, "cursor-pointer": isEditModal,
} })}
)}
onClick={() => { onClick={() => {
if (!isEditModal) return; if (!isEditModal) return;
setOpenModalCalendar(true); setOpenModalCalendar(true);
@@ -509,12 +505,9 @@ const ProfileCalendar: FunctionComponent = () => {
</p> </p>
</div> </div>
<div <div
class={cn( class={cn("flex h-full flex-col items-start gap-1 rounded-2xl bg-[rgba(251,194,199,0.38)] px-4 py-2", {
"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, "cursor-pointer": isEditModal,
} })}
)}
onClick={() => { onClick={() => {
if (!isEditModal) return; if (!isEditModal) return;
setTags({ first: editContent.subject.id, second: editContent.taskType.id, overdue: false }); setTags({ first: editContent.subject.id, second: editContent.taskType.id, overdue: false });
@@ -530,10 +523,43 @@ const ProfileCalendar: FunctionComponent = () => {
{editContent.taskType.name} {editContent.taskType.name}
</p> </p>
</div> </div>
<Dropdown
disabled={!isEditModal}
pt={DropdownStyles}
options={priorities}
value={selectedPriority}
onChange={(e) => setSelectedPriority(e.value)}
itemTemplate={selectedPriorityTemplate}
valueTemplate={selectedPriorityTemplate}
/>
</div> </div>
</form> </form>
)} )}
</ModalWindow> </ModalWindow>
{isLoading ? (
<div class="flex w-full flex-1 items-center justify-center">Загрузка...</div>
) : (
<>
<ModalTags
refreshTags={fetchTags}
isOpen={openModalTags}
setIsOpen={setOpenModalTags}
tagsList={example_tags}
value={tags}
onClose={() => {
setTags({ first: 0, second: 0, overdue: false });
}}
onChange={setTags}
/>
<ModalCalendar
isOpen={openModalCalendar}
setIsOpen={setOpenModalCalendar}
onClose={() => {
if (isEdit && !isEditModal) setCalendarDate(null);
}}
onChange={(e) => isEditModal && setCalendarDate(e.value)}
value={calendarDate!}
/>
<Dialog <Dialog
isOpen={showDeleteDialog} isOpen={showDeleteDialog}
setIsOpen={setShowDeleteDialog} setIsOpen={setShowDeleteDialog}

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

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

@@ -17,7 +17,7 @@ export interface ITaskView extends Omit<ITask, "taskType"> {
task_type: IAPITag; task_type: IAPITag;
} }
export interface ITaskForm extends Omit<ITask, "date"> { export interface ITaskForm extends Omit<ITask, "date" | "subject" | "taskType"> {
date: string; date: string;
} }
@@ -80,15 +80,11 @@ 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;
};
}; };
} }

106
src/pages/profile_tasks.tsx
View File

@@ -32,7 +32,6 @@ import { Dropdown } from "primereact/dropdown";
import { SelectItem } from "primereact/selectitem"; import { SelectItem } from "primereact/selectitem";
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 { import {
IApiResponse, IApiResponse,
IAPITag, IAPITag,
@@ -47,7 +46,7 @@ import {
import classes from "./profile_tasks.module.scss"; import classes from "./profile_tasks.module.scss";
import { DropdownStyles, selectedPriorityTemplate } from "./profile_tasks.prime.styles"; import { DropdownStyles, selectedPriorityTemplate } from "./profile_tasks.prime.styles";
const priorities: SelectItem[] = [ export const priorities: SelectItem[] = [
{ label: "Приоритет 1", value: 1 }, { label: "Приоритет 1", value: 1 },
{ label: "Приоритет 2", value: 2 }, { label: "Приоритет 2", value: 2 },
{ label: "Приоритет 3", value: 3 }, { label: "Приоритет 3", value: 3 },
@@ -87,7 +86,7 @@ const ProfileTasks: FunctionComponent = () => {
fetchTags(); fetchTags();
}, []); }, []);
const fetchTags = async () => { const fetchTags = async (): Promise<IViewTagsResponse | void> => {
try { try {
const response = await apiClient<IViewTagsResponse>("/api/tags/view_tags/"); const response = await apiClient<IViewTagsResponse>("/api/tags/view_tags/");
setSubjectChoices(response.subjects); setSubjectChoices(response.subjects);
@@ -126,18 +125,7 @@ const ProfileTasks: FunctionComponent = () => {
reset, reset,
setError, setError,
formState: { errors }, formState: { errors },
} = useForm<ITaskForm>({ } = useForm<ITaskForm>({});
defaultValues: {
subject: {
name: "",
id: 0,
},
taskType: {
name: "",
id: 0,
},
},
});
const example_tags = useMemo( const example_tags = useMemo(
() => ({ () => ({
@@ -153,7 +141,7 @@ const ProfileTasks: FunctionComponent = () => {
return; return;
} }
if ((!editContent?.subject.id || !editContent.taskType.id) && (!tags.first || !tags.second)) { if ((!editContent?.subject.id || !editContent.taskType.id) && (!tags.first || !tags.second)) {
setError("subject", { message: "Выберите теги" }); setError("date", { message: "Выберите теги" });
return; return;
} }
@@ -182,7 +170,7 @@ const ProfileTasks: FunctionComponent = () => {
taskType_id: selectedTaskType, taskType_id: selectedTaskType,
dateTime_due: formattedDate, dateTime_due: formattedDate,
priority: selectedPriority, priority: selectedPriority,
telegram_notifications: false, telegram_notifications: true,
}; };
if (isCreating) { if (isCreating) {
@@ -202,11 +190,20 @@ const ProfileTasks: 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();
if (isCreating) setIsOpen(false); if (isCreating) setIsOpen(false);
setTags({ first: 0, second: 0, overdue: false }); setTags({ first: 0, second: 0, overdue: false });
} catch (error) { } catch (error) {
@@ -223,14 +220,6 @@ const ProfileTasks: FunctionComponent = () => {
name: "", name: "",
description: "", description: "",
date: "", date: "",
subject: {
name: "",
id: 0,
},
taskType: {
name: "",
id: 0,
},
priority: 4, priority: 4,
checked: false, checked: false,
}); });
@@ -373,7 +362,6 @@ const ProfileTasks: FunctionComponent = () => {
subject: taskDetails.subject, subject: taskDetails.subject,
taskType: taskDetails.task_type, taskType: taskDetails.task_type,
}; };
console.log(task);
setIsOpen(true); setIsOpen(true);
setIsEdit(true); setIsEdit(true);
@@ -388,34 +376,6 @@ const ProfileTasks: FunctionComponent = () => {
return ( return (
<div class={classes.container}> <div class={classes.container}>
{isLoading ? (
<div class="flex w-full flex-1 items-center justify-center">
<div class="text-2xl">Загрузка...</div>
</div>
) : (
<ModalTags
refreshTags={fetchTags}
zIndex={70}
isOpen={openModalTags}
setIsOpen={setOpenModalTags}
tagsList={example_tags}
value={tags}
onClose={() => {
if (!isCreating) setTags({ first: 0, second: 0, overdue: false });
}}
onChange={setTags}
/>
)}
<ModalCalendar
zIndex={80}
isOpen={openModalCalendar}
setIsOpen={setOpenModalCalendar}
onClose={() => {
if (isEdit && !isEditModal) setCalendarDate(null);
}}
onChange={(e) => (isCreating || isEditModal) && setCalendarDate(e.value)}
value={calendarDate!}
/>
<ModalWindow <ModalWindow
zIndex={60} zIndex={60}
isOpen={openModal} isOpen={openModal}
@@ -504,7 +464,6 @@ const ProfileTasks: FunctionComponent = () => {
{errors.name && <p class="text-red-500">{errors.name.message}</p>} {errors.name && <p class="text-red-500">{errors.name.message}</p>}
{errors.description && <p class="text-red-500">{errors.description.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.date && <p class="text-red-500">{errors.date.message}</p>}
{errors.subject && <p class="text-red-500">{errors.subject.message}</p>}
<div class="flex flex-col items-center gap-6 self-center md:flex-row md:justify-start md:self-start"> <div class="flex flex-col items-center gap-6 self-center md:flex-row md:justify-start md:self-start">
<div <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", { class={cn("flex h-full flex-row items-center gap-1 rounded-2xl bg-[rgba(251,194,199,0.38)] px-2 py-1", {
@@ -524,7 +483,7 @@ const ProfileTasks: FunctionComponent = () => {
year: "numeric", year: "numeric",
hour: "2-digit", hour: "2-digit",
minute: "2-digit", minute: "2-digit",
}).format(calendarDate!)} }).format(calendarDate ?? editContent.date)}
</p> </p>
</div> </div>
<div <div
@@ -563,7 +522,7 @@ const ProfileTasks: FunctionComponent = () => {
class="flex h-full w-full flex-col items-start justify-between" class="flex h-full w-full flex-col items-start justify-between"
onSubmit={(e) => { onSubmit={(e) => {
e.preventDefault(); e.preventDefault();
handleSubmit((data) => saveTask({ ...data, id: uuid() }))(); handleSubmit((data) => saveTask(data))();
}} }}
> >
<div class="flex w-full flex-1 flex-row items-start justify-between"> <div class="flex w-full flex-1 flex-row items-start justify-between">
@@ -609,7 +568,6 @@ const ProfileTasks: FunctionComponent = () => {
</div> </div>
{errors.name && <p class="text-red-500">{errors.name.message}</p>} {errors.name && <p class="text-red-500">{errors.name.message}</p>}
{errors.date && <p class="text-red-500">{errors.date.message}</p>} {errors.date && <p class="text-red-500">{errors.date.message}</p>}
{errors.subject?.message && <p class="text-red-500">{errors.subject.message}</p>}
<div className="mb-8 flex h-16 flex-col items-center gap-6 self-center md:mb-0 md:flex-row md:self-start"> <div className="mb-8 flex h-16 flex-col items-center gap-6 self-center md:mb-0 md:flex-row md:self-start">
<Button <Button
className="text-sm" className="text-sm"
@@ -626,6 +584,32 @@ const ProfileTasks: FunctionComponent = () => {
</form> </form>
)} )}
</ModalWindow> </ModalWindow>
{isLoading ? (
<div class="flex w-full flex-1 items-center justify-center">Загрузка...</div>
) : (
<>
<ModalTags
refreshTags={fetchTags}
zIndex={70}
isOpen={openModalTags}
setIsOpen={setOpenModalTags}
tagsList={example_tags}
value={tags}
onClose={() => {
if (!isCreating) setTags({ first: 0, second: 0, overdue: false });
}}
onChange={setTags}
/>
<ModalCalendar
zIndex={80}
isOpen={openModalCalendar}
setIsOpen={setOpenModalCalendar}
onClose={() => {
if (isEdit && !isEditModal) setCalendarDate(null);
}}
onChange={(e) => (isCreating || isEditModal) && setCalendarDate(e.value)}
value={calendarDate!}
/>
<Dialog <Dialog
isOpen={showDeleteDialog} isOpen={showDeleteDialog}
setIsOpen={setShowDeleteDialog} setIsOpen={setShowDeleteDialog}
@@ -977,6 +961,8 @@ const ProfileTasks: FunctionComponent = () => {
</div> </div>
</div> </div>
)} )}
</>
)}
</div> </div>
); );
}; };

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