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>