feat: tasks priorities

src/components/ModalTags.tsx

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

src/components/task.module.scss

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

src/components/task.tsx

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

src/pages/profile_calendar.tsx

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

src/pages/profile_tasks.prime.styles.tsx

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

src/pages/profile_tasks.tsx

@@ -28,6 +28,8 @@ import { FunctionComponent } from "preact";
 import "preact/debug";
 import { useEffect, useMemo, useRef, useState } from "preact/hooks";
 import { Checkbox, CheckboxPassThroughMethodOptions } from "primereact/checkbox";
+import { Dropdown } from "primereact/dropdown";
+import { SelectItem } from "primereact/selectitem";
 import { Nullable } from "primereact/ts-helpers";
 import { SubmitHandler, useForm } from "react-hook-form";
 import { v4 as uuid } from "uuid";
@@ -43,6 +45,14 @@ import {
   IViewTagsResponse,
 } from "./profile_tasks.dto";
 import classes from "./profile_tasks.module.scss";
+import { DropdownStyles, selectedPriorityTemplate } from "./profile_tasks.prime.styles";
+
+const priorities: SelectItem[] = [
+  { label: "Приоритет 1", value: 1 },
+  { label: "Приоритет 2", value: 2 },
+  { label: "Приоритет 3", value: 3 },
+  { label: "Приоритет 4", value: 4 },
+];
 
 const ProfileTasks: FunctionComponent = () => {
   const [openModal, setIsOpen] = useState(false); // Открыта модалка
@@ -61,6 +71,7 @@ const ProfileTasks: FunctionComponent = () => {
   const [filterTags, setFilterTags] = useState<ITags>({ first: 0, second: 0, overdue: false });
   const [openFirstList, setOpenFirstList] = useState(false);
   const [openSecondList, setOpenSecondList] = useState(false);
+  const [selectedPriority, setSelectedPriority] = useState(4);
   const getDate = useMemo(() => {
     const date = new Date();
     const formatter = new Intl.DateTimeFormat("ru-RU", { month: "long", day: "numeric" });
@@ -168,9 +179,10 @@ const ProfileTasks: FunctionComponent = () => {
       const taskData = {
         title: data.name,
         description: data.description || "",
-        subject: selectedSubject,
+        subject_id: selectedSubject,
-        taskType: selectedTaskType,
+        taskType_id: selectedTaskType,
         dateTime_due: formattedDate,
+        priority: selectedPriority,
         telegram_notifications: false,
       };
 
@@ -223,6 +235,7 @@ const ProfileTasks: FunctionComponent = () => {
       priority: 4,
       checked: false,
     });
+    setSelectedPriority(4);
   }, [isCreating]);
   useEffect(() => {
     if (!editContent) return;
@@ -368,6 +381,7 @@ const ProfileTasks: FunctionComponent = () => {
       setEditContent(task);
       setCalendarDate(task.date);
       setIsEditModal(false);
+      setSelectedPriority(task.priority);
     } catch (error) {
       console.error("Failed to fetch task details:", error);
     }
@@ -447,6 +461,7 @@ const ProfileTasks: FunctionComponent = () => {
                     maxLength: { value: 200, message: "Максимум 200 символов в описании" },
                   })}
                 />
+
                 <input
                   type="datetime-local"
                   value={calendarDate ? calendarDate.toISOString().slice(0, 16) : ""}
@@ -531,6 +546,15 @@ const ProfileTasks: FunctionComponent = () => {
                   {editContent.taskType.name}
                 </p>
               </div>
+              <Dropdown
+                disabled={!isEditModal}
+                pt={DropdownStyles}
+                options={priorities}
+                value={selectedPriority}
+                onChange={(e) => setSelectedPriority(e.value)}
+                itemTemplate={selectedPriorityTemplate}
+                valueTemplate={selectedPriorityTemplate}
+              />
             </div>
           </form>
         )}
@@ -562,6 +586,14 @@ const ProfileTasks: FunctionComponent = () => {
                   hidden
                   {...register("date")}
                 />
+                <Dropdown
+                  pt={DropdownStyles}
+                  options={priorities}
+                  value={selectedPriority}
+                  onChange={(e) => setSelectedPriority(e.value)}
+                  itemTemplate={selectedPriorityTemplate}
+                  valueTemplate={selectedPriorityTemplate}
+                />
                 <input type="checkbox" checked={false} hidden {...register("checked")} />
               </div>
               <div class="flex flex-col gap-3 self-start md:flex-row">
@@ -640,6 +672,7 @@ const ProfileTasks: FunctionComponent = () => {
                     <Task
                       name={task.name}
                       key={task.id}
+                      priority={task.priority}
                       checked={task.checked}
                       overdue={task.date < new Date()}
                       onClick={() => handleViewTask(task.id)}
@@ -656,6 +689,7 @@ const ProfileTasks: FunctionComponent = () => {
                   {groupTasksByDate.tomorrow.map((task) => (
                     <Task
                       name={task.name}
+                      priority={task.priority}
                       key={task.id}
                       checked={task.checked}
                       onClick={() => handleViewTask(task.id)}
@@ -670,6 +704,7 @@ const ProfileTasks: FunctionComponent = () => {
                   {group.tasks.map((task) => (
                     <Task
                       name={task.name}
+                      priority={task.priority}
                       key={task.id}
                       checked={task.checked}
                       onClick={() => handleViewTask(task.id)}
@@ -719,6 +754,7 @@ const ProfileTasks: FunctionComponent = () => {
             filteredTasks.map((task) => (
               <Task
                 name={task.name}
+                priority={task.priority}
                 key={task.id}
                 checked={task.checked}
                 overdue={task.date < new Date()}
@@ -743,6 +779,7 @@ const ProfileTasks: FunctionComponent = () => {
         >
           <PlusIcon />
         </div>
+        {tasks.length > 0 && (
           <div class="absolute left-0 my-auto hidden flex-row space-x-3 opacity-0 transition-opacity duration-100 group-hover:opacity-100 md:flex">
             <div
               class="pointer-events-none flex aspect-square h-20 cursor-pointer flex-col items-center justify-center rounded-full bg-[rgba(206,232,251,0.7)] text-xl text-gray-600 shadow-[0px_4px_4px_0px_rgba(0,0,0,0.25)] group-hover:pointer-events-auto hover:bg-[rgba(206,232,251,0.9)]"
@@ -765,6 +802,7 @@ const ProfileTasks: FunctionComponent = () => {
               />
             </div>
           </div>
+        )}
       </div>
       {openSearchModal && (
         <div class="fixed bottom-28 z-50 w-full rounded-lg bg-white p-4 shadow-lg md:absolute md:right-[24rem] md:mx-0 md:w-80">