feat: tag delete

2025-05-12 01:43:10 +03:00
parent 95a264f5a4
commit 19ce2bf278
4 changed files with 218 additions and 149 deletions
--- a/src/components/ModalTags.tsx
+++ b/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>
+    </>
  );
 };

--- a/src/components/ui/Dialog.tsx
+++ b/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,
-  onConfirm,
+  children,
+  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>
--- a/src/pages/profile_calendar.tsx
+++ b/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())}
--- a/src/pages/profile_tasks.tsx
+++ b/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}`}