feat: statuses colors

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

@@ -3,17 +3,22 @@ import {
     IconDotsVertical,
     IconEdit,
     IconExchange,
+    IconPalette,
     IconTrash,
 } from "@tabler/icons-react";
-import { Box, Group, Menu, Text } from "@mantine/core";
+import { Box, Menu } from "@mantine/core";
+import { modals } from "@mantine/modals";
+import statusColors from "@/app/deals/utils/statusColors";
+import DropdownMenuItem from "@/components/ui/DropdownMenuItem/DropdownMenuItem";
+import ThemeIcon from "@/components/ui/ThemeIcon/ThemeIcon";
 import { useDrawersContext } from "@/drawers/DrawersContext";
 import useIsMobile from "@/hooks/utils/useIsMobile";
 import { BoardSchema, StatusSchema } from "@/lib/client";
-import ThemeIcon from "@/components/ui/ThemeIcon/ThemeIcon";
 
 type Props = {
     status: StatusSchema;
     handleEdit: () => void;
+    onStatusColorChange: (color: string) => void;
     board: BoardSchema | null;
     onDeleteStatus: (status: StatusSchema) => void;
     refetchStatuses?: () => void;
@@ -23,6 +28,7 @@ type Props = {
 const StatusMenu: FC<Props> = ({
     status,
     handleEdit,
+    onStatusColorChange,
     board,
     onDeleteStatus,
     refetchStatuses,
@@ -31,6 +37,31 @@ const StatusMenu: FC<Props> = ({
     const isMobile = useIsMobile();
     const { openDrawer } = useDrawersContext();
 
+    const openStatusesMobileEditor = () => {
+        if (!board) return;
+        openDrawer({
+            key: "statusesMobileEditorDrawer",
+            props: {
+                board,
+            },
+            onClose: refetchStatuses,
+        });
+    };
+
+    const openStatusColorPicker = () => {
+        if (!board) return;
+        modals.openContextModal({
+            modal: "statusColorPickerModal",
+            title: "Изменение цвета статуса",
+            withCloseButton: false,
+            innerProps: {
+                color: status.color,
+                onChange: onStatusColorChange,
+                switches: statusColors,
+            },
+        });
+    };
+
     return (
         <Menu>
             <Menu.Target>
@@ -43,44 +74,27 @@ const StatusMenu: FC<Props> = ({
                 </Box>
             </Menu.Target>
             <Menu.Dropdown>
-                <Menu.Item
-                    onClick={e => {
-                        e.stopPropagation();
-                        handleEdit();
-                    }}>
-                    <Group wrap={"nowrap"}>
-                        <IconEdit />
-                        <Text>Переименовать</Text>
-                    </Group>
-                </Menu.Item>
-                <Menu.Item
-                    onClick={e => {
-                        e.stopPropagation();
-                        onDeleteStatus(status);
-                    }}>
-                    <Group wrap={"nowrap"}>
-                        <IconTrash />
-                        <Text>Удалить</Text>
-                    </Group>
-                </Menu.Item>
+                <DropdownMenuItem
+                    onClick={handleEdit}
+                    icon={<IconEdit />}
+                    label={"Переименовать"}
+                />
+                <DropdownMenuItem
+                    onClick={openStatusColorPicker}
+                    icon={<IconPalette />}
+                    label={"Изменить цвет"}
+                />
+                <DropdownMenuItem
+                    onClick={() => onDeleteStatus(status)}
+                    icon={<IconTrash />}
+                    label={"Удалить"}
+                />
                 {isMobile && withChangeOrderButton && (
-                    <Menu.Item
-                        onClick={e => {
-                            e.stopPropagation();
-                            if (!board) return;
-                            openDrawer({
-                                key: "statusesMobileEditorDrawer",
-                                props: {
-                                    board,
-                                },
-                                onClose: refetchStatuses,
-                            });
-                        }}>
-                        <Group wrap={"nowrap"}>
-                            <IconExchange />
-                            <Text>Изменить порядок</Text>
-                        </Group>
-                    </Menu.Item>
+                    <DropdownMenuItem
+                        onClick={openStatusesMobileEditor}
+                        icon={<IconExchange />}
+                        label={"Изменить порядок"}
+                    />
                 )}
             </Menu.Dropdown>
         </Menu>