CREATE AND DELETE column

src/pages/taskmanager/components/Column.tsx

@@ -1,6 +1,12 @@
-import { Add, AddCircle, CloseCircle, More } from "iconsax-react";
+import { Add, AddCircle, CloseCircle } from "iconsax-react";
 import { useRef, useState, type FC } from "react";
+import { useTranslation } from "react-i18next";
+import { toast } from "react-toastify";
+import ModalConfrim from "../../../components/ModalConfrim";
+import { ErrorType } from "../../../helpers/types";
+import { useDeleteTaskPhase } from "../task-phase/hooks/useTaskPhaseData";
 import type { Column as ColumnType, Task as TaskType } from "../types";
+import ColumnMenu from "./ColumnMenu";
 import Task from "./Task";
 
 type Props = {
@@ -15,6 +21,7 @@ type Props = {
   onColumnDragEnd: () => void;
   onColumnDrop: (overColumnId: string) => void;
   onTaskClick?: (task: TaskType) => void;
+  onColumnDeleted?: (columnId: string) => void;
 };
 
 const Column: FC<Props> = ({
@@ -29,8 +36,13 @@ const Column: FC<Props> = ({
   onColumnDragEnd,
   onColumnDrop,
   onTaskClick,
+  onColumnDeleted,
 }) => {
+  const { t } = useTranslation("global");
+  const deleteTaskPhase = useDeleteTaskPhase();
+
   const [isAdding, setIsAdding] = useState(false);
+  const [isDeleteConfirmOpen, setIsDeleteConfirmOpen] = useState(false);
   const [isDragOver, setIsDragOver] = useState(false);
   const [isColumnDragOver, setIsColumnDragOver] = useState(false);
   const columnRef = useRef<HTMLDivElement>(null);
@@ -116,6 +128,19 @@ const Column: FC<Props> = ({
     onColumnDrop(column.id);
   };
 
+  const handleDeleteColumn = () => {
+    deleteTaskPhase.mutate(column.id, {
+      onSuccess: () => {
+        onColumnDeleted?.(column.id);
+        setIsDeleteConfirmOpen(false);
+        toast.success(t("taskmanager.column_deleted"));
+      },
+      onError: (error: ErrorType) => {
+        toast.error(error.response?.data?.error.message[0]);
+      },
+    });
+  };
+
   return (
     <div
       ref={columnRef}
@@ -139,16 +164,26 @@ const Column: FC<Props> = ({
         }
       }}
     >
-      <div
-        draggable
-        onDragStart={handleColumnDragStart}
-        onDragEnd={handleColumnDragEnd}
-        className="flex justify-between items-center shrink-0 cursor-grab active:cursor-grabbing"
-      >
-        <div className="font-bold text-sm truncate">{column.title}</div>
-        <More size={20} color="black" className="shrink-0 pointer-events-none" />
+      <div className="flex justify-between items-center shrink-0 gap-2">
+        <div
+          draggable
+          onDragStart={handleColumnDragStart}
+          onDragEnd={handleColumnDragEnd}
+          className="flex-1 min-w-0 font-bold text-sm truncate cursor-grab active:cursor-grabbing"
+        >
+          {column.title}
+        </div>
+        <ColumnMenu onDelete={() => setIsDeleteConfirmOpen(true)} />
       </div>
 
+      <ModalConfrim
+        isOpen={isDeleteConfirmOpen}
+        close={() => setIsDeleteConfirmOpen(false)}
+        onConfrim={handleDeleteColumn}
+        isLoading={deleteTaskPhase.isPending}
+        label={t("taskmanager.delete_column_confirm")}
+      />
+
       <div className="mt-3 sm:mt-4 xl:mt-5 flex-1 min-h-0 overflow-y-auto overscroll-y-contain flex flex-col gap-3 sm:gap-4">
         {tasks.map((task, index) => (
           <div