feat: status editing and deleting

src/app/deals/components/Funnel/Funnel.tsx

@@ -4,14 +4,14 @@ import React, { FC, ReactNode } from "react";
 import DealCard from "@/app/deals/components/DealCard/DealCard";
 import DealContainer from "@/app/deals/components/DealContainer/DealContainer";
 import StatusColumnWrapper from "@/app/deals/components/StatusColumnWrapper/StatusColumnWrapper";
-import { useStatusesContext } from "@/app/deals/contexts/StatusesContext";
+import { useDealsContext } from "@/app/deals/contexts/DealsContext";
 import useDealsAndStatusesDnd from "@/app/deals/hooks/useDealsAndStatusesDnd";
 import FunnelDnd from "@/components/dnd/FunnelDnd/FunnelDnd";
 import { DealSchema, StatusSchema } from "@/lib/client";
 import { sortByLexorank } from "@/utils/lexorank";
 
 const Funnel: FC = () => {
-    const { deals } = useStatusesContext();
+    const { deals } = useDealsContext();
 
     const {
         sortedStatuses,

src/app/deals/components/StatusColumnWrapper/StatusColumnWrapper.tsx

@@ -1,5 +1,7 @@
-import React, { ReactNode } from "react";
-import { Box, Text } from "@mantine/core";
+import React, { ReactNode, useEffect, useRef, useState } from "react";
+import { Box, Group, Text, TextInput } from "@mantine/core";
+import StatusMenu from "@/app/deals/components/StatusColumnWrapper/StatusMenu";
+import { useStatusesContext } from "@/app/deals/contexts/StatusesContext";
 import { StatusSchema } from "@/lib/client";
 
 type Props = {
@@ -13,23 +15,98 @@ const StatusColumnWrapper = ({
     children,
     isDragging = false,
 }: Props) => {
+    const { onUpdateStatus } = useStatusesContext();
+    const [isEditing, setIsEditing] = useState(false);
+    const [editValue, setEditValue] = useState(status.name);
+    const inputRef = useRef<HTMLInputElement>(null);
+
+    useEffect(() => {
+        if (isEditing && inputRef.current) {
+            inputRef.current.focus();
+        }
+    }, [isEditing]);
+
+    useEffect(() => {
+        const handleClickOutside = (event: MouseEvent) => {
+            if (
+                isEditing &&
+                inputRef.current &&
+                !inputRef.current.contains(event.target as Node)
+            ) {
+                handleSave();
+            }
+        };
+
+        document.addEventListener("mousedown", handleClickOutside);
+        return () =>
+            document.removeEventListener("mousedown", handleClickOutside);
+    }, [isEditing, editValue]);
+
+    const handleEdit = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+        e.preventDefault();
+        e.stopPropagation();
+
+        setEditValue(status.name);
+        setIsEditing(true);
+    };
+
+    const handleSave = () => {
+        const newValue = editValue.trim();
+        if (newValue && newValue !== status.name) {
+            onUpdateStatus(status.id, { name: newValue });
+        }
+        setIsEditing(false);
+    };
+
     return (
         <Box
+            p={"xs"}
             style={{
                 borderWidth: 1,
                 borderColor: "gray",
-                padding: 2,
                 width: "15vw",
                 minWidth: 150,
             }}>
-            <Text
-                style={{
-                    cursor: "grab",
-                    userSelect: "none",
-                    opacity: isDragging ? 0.5 : 1,
-                }}>
-                {status.name}
-            </Text>
+            <Group
+                wrap={"nowrap"}
+                justify={"space-between"}
+                ml={"xs"}
+                mb={"xs"}>
+                {isEditing ? (
+                    <TextInput
+                        ref={inputRef}
+                        value={editValue}
+                        onChange={e => setEditValue(e.target.value)}
+                        onKeyDown={e => {
+                            if (e.key === "Enter") handleSave();
+                            if (e.key === "Escape") {
+                                setEditValue(status.name);
+                                setIsEditing(false);
+                            }
+                        }}
+                        variant="unstyled"
+                        styles={{
+                            input: {
+                                height: 25,
+                                minHeight: 25,
+                            },
+                        }}
+                    />
+                ) : (
+                    <Text
+                        style={{
+                            cursor: "grab",
+                            userSelect: "none",
+                            opacity: isDragging ? 0.5 : 1,
+                        }}>
+                        {status.name}
+                    </Text>
+                )}
+                <StatusMenu
+                    status={status}
+                    handleEdit={handleEdit}
+                />
+            </Group>
             {children}
         </Box>
     );

src/app/deals/components/StatusColumnWrapper/StatusMenu.tsx

@@ -0,0 +1,48 @@
+import React, { FC } from "react";
+import { IconDotsVertical, IconEdit, IconTrash } from "@tabler/icons-react";
+import { Box, Group, Menu, Text } from "@mantine/core";
+import { useStatusesContext } from "@/app/deals/contexts/StatusesContext";
+import { StatusSchema } from "@/lib/client";
+
+type Props = {
+    status: StatusSchema;
+    handleEdit: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+};
+
+const StatusMenu: FC<Props> = ({ status, handleEdit }) => {
+    const { onDeleteStatus } = useStatusesContext();
+
+    return (
+        <Menu>
+            <Menu.Target>
+                <Box
+                    p={5}
+                    style={{
+                        cursor: "pointer",
+                    }}
+                    onClick={e => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                    }}>
+                    <IconDotsVertical size={16} />
+                </Box>
+            </Menu.Target>
+            <Menu.Dropdown>
+                <Menu.Item onClick={handleEdit}>
+                    <Group wrap={"nowrap"}>
+                        <IconEdit />
+                        <Text>Переименовать</Text>
+                    </Group>
+                </Menu.Item>
+                <Menu.Item onClick={() => onDeleteStatus(status.id)}>
+                    <Group wrap={"nowrap"}>
+                        <IconTrash />
+                        <Text>Удалить</Text>
+                    </Group>
+                </Menu.Item>
+            </Menu.Dropdown>
+        </Menu>
+    );
+};
+
+export default StatusMenu;