feat: calendar circle colors

src/components/ModalTags.tsx

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

src/components/menu.tsx

@@ -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 { CalendarDaysIcon, ListBulletIcon, UserIcon } from "@heroicons/react/24/solid";
 import { FunctionComponent, h } from "preact";
 import { useLocation } from "preact-iso";
+import { useEffect, useState } from "preact/hooks";
 import { tv } from "tailwind-variants";
 import classes from "./menu.module.scss";
-import { useEffect, useState } from "preact/hooks";
-import apiClient from "@/services/api";
-import { useAppContext } from "@/providers/AuthProvider";
 
 interface UserProfile {
   username: string;
@@ -72,7 +73,7 @@ const Avatar: FunctionComponent = () => {
     }
   }, [isLoggedIn.value]);
 
-  return (
+  return username ? (
     <button
       onClick={() => route("/profile/settings")}
       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"
         )}
       >
-        <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">
           <p class="text-3xl font-semibold">{username}</p>
           <div class="rounded-[1rem] bg-white px-5 leading-5 font-light italic">{status}</div>
         </div>
       </div>
     </button>
-  );
+  ) : null;
 };
 
 interface MenuItems {

src/pages/profile_calendar.tsx

@@ -80,16 +80,7 @@ const ProfileCalendar: FunctionComponent = () => {
     setError,
     formState: { errors },
   } = useForm<ITaskForm>({
-    defaultValues: {
+    defaultValues: {},
-      subject: {
-        name: "",
-        id: 0,
-      },
-      taskType: {
-        name: "",
-        id: 0,
-      },
-    },
   });
 
   useEffect(() => {
@@ -146,13 +137,13 @@ const ProfileCalendar: FunctionComponent = () => {
       return;
     }
     if ((!editContent?.subject.id || !editContent.taskType.id) && (!tags.first || !tags.second)) {
-      setError("subject", { message: "Выберите теги" });
+      setError("date", { message: "Выберите теги" });
       return;
     }
 
     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
       const formattedDate = calendarDate
@@ -171,8 +162,8 @@ const ProfileCalendar: FunctionComponent = () => {
       const taskData = {
         title: data.name,
         description: data.description || "",
-        subject: selectedSubject,
+        subject_id: selectedSubject,
-        taskType: selectedTaskType,
+        taskType_id: selectedTaskType,
         dateTime_due: formattedDate,
         telegram_notifications: false,
         priority: selectedPriority,
@@ -195,7 +186,17 @@ const ProfileCalendar: FunctionComponent = () => {
 
         if (!response.success) {
           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();
@@ -295,12 +296,29 @@ const ProfileCalendar: FunctionComponent = () => {
   }, [tags]);
 
   const tasksCount = (date: CalendarDateTemplateEvent) => {
-    return tasks.filter((task) => {
+    const filterTasks = tasks.filter((task) => {
       const taskDate = task.date;
       return (
         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) => {
@@ -314,7 +332,8 @@ const ProfileCalendar: FunctionComponent = () => {
 
   const dateTemplate = (date: CalendarDateTemplateEvent) => {
     const isHighlighted = hasTasksOnDate(date);
-    const countT = tasksCount(date);
+    const taskInfo = tasksCount(date);
+    if (taskInfo.length) console.log(taskInfo);
     const isSelected =
       currentDate &&
       currentDate.getDate() === date.day &&
@@ -338,10 +357,10 @@ const ProfileCalendar: FunctionComponent = () => {
         <span>{date.day}</span>
         {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">
-            {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>
@@ -377,32 +396,6 @@ const ProfileCalendar: FunctionComponent = () => {
 
   return (
     <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
         isOpen={openModal}
         setIsOpen={setIsOpen}
@@ -489,15 +482,11 @@ const ProfileCalendar: FunctionComponent = () => {
             {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.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={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,
-                      }
+                })}
-                    )}
                 onClick={() => {
                   if (!isEditModal) return;
                   setOpenModalCalendar(true);
@@ -516,12 +505,9 @@ const ProfileCalendar: FunctionComponent = () => {
                 </p>
               </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,
-                      }
+                })}
-                    )}
                 onClick={() => {
                   if (!isEditModal) return;
                   setTags({ first: editContent.subject.id, second: editContent.taskType.id, overdue: false });
@@ -550,6 +536,30 @@ const ProfileCalendar: FunctionComponent = () => {
           </form>
         )}
       </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
             isOpen={showDeleteDialog}
             setIsOpen={setShowDeleteDialog}

src/pages/profile_settings.module.scss

@@ -5,7 +5,7 @@
 }
 
 #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 {

src/pages/profile_settings.tsx

@@ -4,6 +4,7 @@ import { withTitle } from "@/constructors/Component";
 import { UrlsTitle } from "@/enums/urls";
 import { useAppContext } from "@/providers/AuthProvider";
 import apiClient from "@/services/api";
+import { getAvatarPicUrl } from "@/services/avatar-pic";
 import { cn } from "@/utils/class-merge";
 import { ArrowRightStartOnRectangleIcon, Cog8ToothIcon } from "@heroicons/react/24/outline";
 import { FunctionComponent } from "preact";
@@ -62,11 +63,19 @@ const ProfileSettings: FunctionComponent = () => {
       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 (
     <div class={classes.container}>
       <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 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}>
           <p class="text-4xl font-semibold">{userData.username}</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);

src/pages/profile_tasks.dto.ts

@@ -17,7 +17,7 @@ export interface ITaskView extends Omit<ITask, "taskType"> {
   task_type: IAPITag;
 }
 
-export interface ITaskForm extends Omit<ITask, "date"> {
+export interface ITaskForm extends Omit<ITask, "date" | "subject" | "taskType"> {
   date: string;
 }
 
@@ -80,15 +80,11 @@ export interface IEditTaskResponse {
     id: number;
     title: string;
     description: string;
-    subject: string;
+    subject: IAPITag;
-    taskType: string;
+    task_type: IAPITag;
     dateTime_due: string;
     isCompleted: boolean;
-    reminder?: {
+    priority: number;
-      remind_before_days: number;
-      repeat_interval: number;
-      reminder_time: string;
-    };
   };
 }
 

src/pages/profile_tasks.tsx

@@ -32,7 +32,6 @@ 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";
 import {
   IApiResponse,
   IAPITag,
@@ -87,7 +86,7 @@ const ProfileTasks: FunctionComponent = () => {
     fetchTags();
   }, []);
 
-  const fetchTags = async () => {
+  const fetchTags = async (): Promise<IViewTagsResponse | void> => {
     try {
       const response = await apiClient<IViewTagsResponse>("/api/tags/view_tags/");
       setSubjectChoices(response.subjects);
@@ -126,18 +125,7 @@ const ProfileTasks: FunctionComponent = () => {
     reset,
     setError,
     formState: { errors },
-  } = useForm<ITaskForm>({
+  } = useForm<ITaskForm>({});
-    defaultValues: {
-      subject: {
-        name: "",
-        id: 0,
-      },
-      taskType: {
-        name: "",
-        id: 0,
-      },
-    },
-  });
 
   const example_tags = useMemo(
     () => ({
@@ -153,7 +141,7 @@ const ProfileTasks: FunctionComponent = () => {
       return;
     }
     if ((!editContent?.subject.id || !editContent.taskType.id) && (!tags.first || !tags.second)) {
-      setError("subject", { message: "Выберите теги" });
+      setError("date", { message: "Выберите теги" });
       return;
     }
 
@@ -202,11 +190,20 @@ const ProfileTasks: FunctionComponent = () => {
 
         if (!response.success) {
           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();
-
       if (isCreating) setIsOpen(false);
       setTags({ first: 0, second: 0, overdue: false });
     } catch (error) {
@@ -223,14 +220,6 @@ const ProfileTasks: FunctionComponent = () => {
       name: "",
       description: "",
       date: "",
-      subject: {
-        name: "",
-        id: 0,
-      },
-      taskType: {
-        name: "",
-        id: 0,
-      },
       priority: 4,
       checked: false,
     });
@@ -387,34 +376,6 @@ const ProfileTasks: FunctionComponent = () => {
 
   return (
     <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
         zIndex={60}
         isOpen={openModal}
@@ -503,7 +464,6 @@ const ProfileTasks: FunctionComponent = () => {
             {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.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={cn("flex h-full flex-row items-center gap-1 rounded-2xl bg-[rgba(251,194,199,0.38)] px-2 py-1", {
@@ -523,7 +483,7 @@ const ProfileTasks: FunctionComponent = () => {
                     year: "numeric",
                     hour: "2-digit",
                     minute: "2-digit",
-                  }).format(calendarDate!)}
+                  }).format(calendarDate ?? editContent.date)}
                 </p>
               </div>
               <div
@@ -562,7 +522,7 @@ const ProfileTasks: FunctionComponent = () => {
             class="flex h-full w-full flex-col items-start justify-between"
             onSubmit={(e) => {
               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">
@@ -608,7 +568,6 @@ const ProfileTasks: FunctionComponent = () => {
             </div>
             {errors.name && <p class="text-red-500">{errors.name.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">
               <Button
                 className="text-sm"
@@ -625,6 +584,32 @@ const ProfileTasks: FunctionComponent = () => {
           </form>
         )}
       </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
             isOpen={showDeleteDialog}
             setIsOpen={setShowDeleteDialog}
@@ -976,6 +961,8 @@ const ProfileTasks: FunctionComponent = () => {
               </div>
             </div>
           )}
+        </>
+      )}
     </div>
   );
 };

src/services/avatar-pic.ts

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