feat: status editing and deleting

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>
     );