fakz9/Crm-Frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: statuses colors

Browse Source
This commit is contained in:
AlexSserb
2025-10-11 12:15:03 +04:00
parent 5e56daa765
commit a899177623
15 changed files with 222 additions and 130 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
src/app/deals/components/shared/BoardMenu/BoardMenu.tsx
View File

@ -1,6 +1,7 @@
import React, { FC } from "react";
import { IconDotsVertical, IconEdit, IconTrash } from "@tabler/icons-react";
import { Box, Group, Menu, Text } from "@mantine/core";
import { Box, Menu } from "@mantine/core";
import DropdownMenuItem from "@/components/ui/DropdownMenuItem/DropdownMenuItem";
import ThemeIcon from "@/components/ui/ThemeIcon/ThemeIcon";
import { BoardSchema } from "@/lib/client";
@ -32,26 +33,16 @@ const BoardMenu: FC<Props> = ({
</Box>
</Menu.Target>
<Menu.Dropdown>
<Menu.Item
onClick={e => {
e.stopPropagation();
startEditing();
}}>
<Group wrap={"nowrap"}>
<IconEdit />
<Text>Переименовать</Text>
</Group>
</Menu.Item>
<Menu.Item
onClick={e => {
e.stopPropagation();
onDeleteBoard(board);
}}>
<Group wrap={"nowrap"}>
<IconTrash />
<Text>Удалить</Text>
</Group>
</Menu.Item>
<DropdownMenuItem
onClick={startEditing}
icon={<IconEdit />}
label={"Переименовать"}
/>
<DropdownMenuItem
onClick={() => onDeleteBoard(board)}
icon={<IconTrash />}
label={"Удалить"}
/>
</Menu.Dropdown>
</Menu>
);

4
src/app/deals/components/shared/StatusColumnHeader/StatusColumnHeader.module.css
View File

@ -1,4 +0,0 @@
.header {
border-bottom: solid dodgerblue 3px;
}

8
src/app/deals/components/shared/StatusColumnHeader/StatusColumnHeader.tsx
View File

@ -5,7 +5,6 @@ import { useBoardsContext } from "@/app/deals/contexts/BoardsContext";
import { useStatusesContext } from "@/app/deals/contexts/StatusesContext";
import InPlaceInput from "@/components/ui/InPlaceInput/InPlaceInput";
import { StatusSchema } from "@/lib/client";
import styles from "./StatusColumnHeader.module.css";
type Props = {
status: StatusSchema;
@ -29,7 +28,9 @@ const StatusColumnHeader: FC<Props> = ({ status, isDragging }) => {
p={"sm"}
wrap={"nowrap"}
mb={"xs"}
className={styles.header}>
style={{
borderBottom: `solid ${status.color} 3px`,
}}>
<InPlaceInput
value={status.name}
onChange={value => handleSave(value)}
@ -53,6 +54,9 @@ const StatusColumnHeader: FC<Props> = ({ status, isDragging }) => {
board={selectedBoard}
status={status}
handleEdit={startEditing}
onStatusColorChange={color =>
statusesCrud.onUpdate(status.id, { color })
}
refetchStatuses={refetchStatuses}
onDeleteStatus={statusesCrud.onDelete}
/>

92
src/app/deals/components/shared/StatusMenu/StatusMenu.tsx
View File

@ -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>

33
src/app/deals/drawers/ProjectsMobileEditorDrawer/components/ProjectMenu.tsx
View File

@ -1,7 +1,8 @@
import React, { FC } from "react";
import { IconDotsVertical, IconEdit, IconTrash } from "@tabler/icons-react";
import { Box, Group, Menu, Text } from "@mantine/core";
import { Box, Menu } from "@mantine/core";
import { useProjectsContext } from "@/app/deals/contexts/ProjectsContext";
import DropdownMenuItem from "@/components/ui/DropdownMenuItem/DropdownMenuItem";
import { ProjectSchema } from "@/lib/client";
import styles from "./../ProjectsEditorDrawer.module.css";
@ -23,26 +24,16 @@ const ProjectMenu: FC<Props> = ({ project, startEditing }) => {
</Box>
</Menu.Target>
<Menu.Dropdown>
<Menu.Item
onClick={e => {
e.stopPropagation();
startEditing();
}}>
<Group wrap={"nowrap"}>
<IconEdit />
<Text>Переименовать</Text>
</Group>
</Menu.Item>
<Menu.Item
onClick={e => {
e.stopPropagation();
projectsCrud.onDelete(project);
}}>
<Group wrap={"nowrap"}>
<IconTrash />
<Text>Удалить</Text>
</Group>
</Menu.Item>
<DropdownMenuItem
onClick={startEditing}
icon={<IconEdit />}
label={"Переименовать"}
/>
<DropdownMenuItem
onClick={() => projectsCrud.onDelete(project)}
icon={<IconTrash />}
label={"Удалить"}
/>
</Menu.Dropdown>
</Menu>
);

1
src/app/deals/drawers/StatusesMobileEditorDrawer/components/StatusMobile.tsx
View File

@ -40,6 +40,7 @@ const StatusMobile: FC<Props> = ({ status, board }) => {
board={board}
onDeleteStatus={statusesCrud.onDelete}
handleEdit={startEditing}
onStatusColorChange={color => statusesCrud.onUpdate(status.id, { color })}
withChangeOrderButton={false}
/>
</Group>

50
src/app/deals/modals/ColorPickerModal/ColorPickerModal.tsx Normal file
View File

@ -0,0 +1,50 @@
"use client";
import { useState } from "react";
import { ColorPicker, Flex, Space, Text } from "@mantine/core";
import { ContextModalProps } from "@mantine/modals";
import statusColors from "@/app/deals/utils/statusColors";
import InlineButton from "@/components/ui/InlineButton/InlineButton";
type Props = {
color: string;
onChange: (color: string) => void;
switches?: string[];
};
const ColorPickerModal = ({
id,
context,
innerProps,
}: ContextModalProps<Props>) => {
const [color, setColor] = useState(innerProps.color);
return (
<Flex
gap={"xs"}
direction={"column"}>
<ColorPicker
format={"hex"}
value={color}
onChange={setColor}
swatches={statusColors}
styles={{
swatch: {
flex: 1,
},
}}
fullWidth
/>
<Space />
<InlineButton
onClick={() => {
innerProps.onChange(color);
context.closeModal(id);
}}>
<Text>Сохранить</Text>
</InlineButton>
</Flex>
);
};
export default ColorPickerModal;

16
src/app/deals/utils/statusColors.ts Normal file
View File

@ -0,0 +1,16 @@
const statusColors = [
"#228be6",
"#15aabf",
"#12b886",
"#40c057",
"#82c91e",
"#fab005",
"#fd7e14",
"#fa5252",
"#e64980",
"#be4bdb",
"#7950f2",
"#4c6ef5",
];
export default statusColors;