feat: tag delete

src/components/ModalTags.tsx

@@ -2,9 +2,11 @@ import { IAPITag } 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";
+import { XMarkIcon } from "@heroicons/react/24/solid";
 import { FunctionComponent } from "preact";
 import { Dispatch, StateUpdater, useEffect, useRef, useState } from "preact/hooks";
 import Button from "./ui/Button";
+import Dialog from "./ui/Dialog";
 import ModalWindow, { ModalWindowProps } from "./ui/Modal";
 
 export interface ITags {
@@ -40,6 +42,8 @@ const ModalTags: FunctionComponent<ModalTagsProps> = ({
   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(() => {
@@ -51,6 +55,7 @@ const ModalTags: FunctionComponent<ModalTagsProps> = ({
 
   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;
@@ -71,9 +76,48 @@ const ModalTags: FunctionComponent<ModalTagsProps> = ({
         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) {
+      refreshTags();
+    } else {
+      setShowErrorDialog(true);
+      const match = response.error?.match(/\[(.+)\]/);
+      if (match) setErrorMessage(match[1].split(", ").map((s) => s.trim().replace(/'/g, "")));
+    }
   };
 
   return (
+    <>
+      <Dialog
+        isOpen={showErrorDialog}
+        setIsOpen={setShowErrorDialog}
+        title="Ошибка!"
+        confirmation={false}
+        cancelText="Ок"
+      >
+        <div class="flex flex-col items-start gap-1">
+          <p class="mb-6 text-sm sm:text-[1rem]">
+            Данный тег есть в других задачах. Поменяйте теги в них и повторите операцию.
+          </p>
+          <p class="text-sm sm:text-[1rem]">Задачи с этим тегом:</p>
+          <ul class="ms-6 list-disc">
+            {errorMessage.map((s, i) => (
+              <li key={i}>{s}</li>
+            ))}
+          </ul>
+        </div>
+      </Dialog>
       <ModalWindow
         isOpen={isOpen}
         {...rest}
@@ -116,10 +160,10 @@ const ModalTags: FunctionComponent<ModalTagsProps> = ({
           </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-[45vh] w-full flex-col gap-3 overflow-y-auto rounded-[4rem] bg-white px-8 py-4 text-xs">
+              <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
-                  class="flex cursor-pointer flex-row gap-2"
+                    class="flex cursor-pointer flex-row items-center gap-2"
                     onClick={() =>
                       onChange?.((prev) => {
                         return { ...prev, first: tag.id };
@@ -136,7 +180,14 @@ const ModalTags: FunctionComponent<ModalTagsProps> = ({
                     >
                       ✓
                     </div>
-                  <p>{tag.name}</p>
+                    <p class="flex-1">{tag.name}</p>
+                    <XMarkIcon
+                      class="size-4 cursor-pointer"
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        handleDeleteTag(tag.id);
+                      }}
+                    />
                   </div>
                 ))}
                 <button
@@ -160,7 +211,7 @@ const ModalTags: FunctionComponent<ModalTagsProps> = ({
           )}
           {showSecondTags && (
             <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-[45vh] w-full flex-col gap-3 overflow-y-auto rounded-[4rem] bg-white px-8 py-4 text-xs">
+              <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"
@@ -180,7 +231,14 @@ const ModalTags: FunctionComponent<ModalTagsProps> = ({
                     >
                       ✓
                     </div>
-                  <p>{tag.name}</p>
+                    <p class="flex-1">{tag.name}</p>
+                    <XMarkIcon
+                      class="size-4 cursor-pointer"
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        handleDeleteTag(tag.id);
+                      }}
+                    />
                   </div>
                 ))}
                 <button
@@ -204,6 +262,7 @@ const ModalTags: FunctionComponent<ModalTagsProps> = ({
           )}
         </div>
       </ModalWindow>
+    </>
   );
 };
 

src/components/ui/Dialog.tsx

@@ -5,20 +5,21 @@ interface DialogProps {
   isOpen: boolean;
   setIsOpen: (isOpen: boolean) => void;
   title: string;
-  content: string;
+  onConfirm?: () => void;
-  onConfirm: () => void;
   confirmText?: string;
   cancelText?: string;
+  confirmation?: boolean;
 }
 
 const Dialog: FunctionComponent<DialogProps> = ({
   isOpen,
   setIsOpen,
   title,
-  content,
+  children,
-  onConfirm,
+  onConfirm = () => {},
   confirmText = "Подтвердить",
   cancelText = "Отмена",
+  confirmation = true,
 }) => {
   if (!isOpen) return null;
 
@@ -26,8 +27,10 @@ const Dialog: FunctionComponent<DialogProps> = ({
     <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">
         <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">
+          {confirmation ? (
+            <>
               <Button onClick={() => setIsOpen(false)} className="bg-gray-200 text-gray-800 hover:bg-gray-300">
                 {cancelText}
               </Button>
@@ -40,6 +43,12 @@ const Dialog: FunctionComponent<DialogProps> = ({
               >
                 {confirmText}
               </Button>
+            </>
+          ) : (
+            <Button onClick={() => setIsOpen(false)} className="bg-gray-200 text-gray-800 hover:bg-gray-300">
+              {cancelText}
+            </Button>
+          )}
         </div>
       </div>
     </div>

src/pages/profile_calendar.tsx

@@ -538,11 +538,12 @@ const ProfileCalendar: FunctionComponent = () => {
             isOpen={showDeleteDialog}
             setIsOpen={setShowDeleteDialog}
             title="Удаление задачи"
-            content="Вы уверены, что хотите удалить эту задачу?"
             onConfirm={handleDeleteTask}
             confirmText="Удалить"
             cancelText="Отмена"
-          />
+          >
+            <p class="mb-6 text-sm sm:text-[1rem]">"Вы уверены, что хотите удалить эту задачу?"</p>
+          </Dialog>
           <Calendar
             value={currentDate}
             onChange={(e) => setCurrentDate(e ? e.value! : new Date())}

src/pages/profile_tasks.tsx

@@ -154,7 +154,6 @@ const ProfileTasks: FunctionComponent = () => {
     }
     if ((!editContent?.subject.id || !editContent.taskType.id) && (!tags.first || !tags.second)) {
       setError("subject", { message: "Выберите теги" });
-      setError("taskType", { message: "Выберите теги" });
       return;
     }
 
@@ -631,11 +630,12 @@ const ProfileTasks: FunctionComponent = () => {
         isOpen={showDeleteDialog}
         setIsOpen={setShowDeleteDialog}
         title="Удаление задачи"
-        content="Вы уверены, что хотите удалить эту задачу?"
         onConfirm={handleDeleteTask}
         confirmText="Удалить"
         cancelText="Отмена"
-      />
+      >
+        <p class="mb-6 text-sm sm:text-[1rem]">"Вы уверены, что хотите удалить эту задачу?"</p>
+      </Dialog>
       {!searchQuery && !filterTags.first && !filterTags.second && !filterTags.overdue ? (
         filteredTasks.length > 0 ? (
           <>
@@ -892,7 +892,7 @@ const ProfileTasks: FunctionComponent = () => {
                   <span>{subjectChoices.find((s) => s.id === filterTags.first)?.name || "Предмет"}</span>
                 </div>
                 {openFirstList && (
-                  <div class="absolute top-full right-0 z-50 w-64 rounded-lg bg-white p-2 shadow-lg md:top-0 md:right-full md:mr-2">
+                  <div class="absolute top-full right-0 z-50 max-h-[15rem] w-64 overflow-y-auto rounded-lg bg-white p-2 shadow-lg md:top-0 md:right-full md:mr-2">
                     {example_tags.first.map((tag) => {
                       return (
                         <div
@@ -936,7 +936,7 @@ const ProfileTasks: FunctionComponent = () => {
                   <span>{taskTypeChoices.find((s) => s.id === filterTags.second)?.name || "Задача"}</span>
                 </div>
                 {openSecondList && (
-                  <div class="absolute top-full right-0 z-50 w-64 rounded-lg bg-white p-2 shadow-lg md:top-0 md:right-full md:mr-2">
+                  <div class="absolute top-full right-0 z-50 max-h-[15rem] w-64 overflow-y-auto rounded-lg bg-white p-2 shadow-lg md:top-0 md:right-full md:mr-2">
                     {example_tags.second.map((tag) => (
                       <div
                         key={`taskType_${tag.id}`}