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;

33
src/components/ui/BaseTable/components/UpdateDeleteTableActions.tsx
View File

@ -1,7 +1,8 @@
import React, { CSSProperties, FC } from "react";
import { IconDotsVertical, IconEdit, IconTrash } from "@tabler/icons-react";
import { Box, Flex, Group, Menu, Text } from "@mantine/core";
import { Box, Flex, Menu } from "@mantine/core";
import ActionIconWithTip from "@/components/ui/ActionIconWithTip/ActionIconWithTip";
import DropdownMenuItem from "@/components/ui/DropdownMenuItem/DropdownMenuItem";
import ThemeIcon from "@/components/ui/ThemeIcon/ThemeIcon";
import useIsMobile from "@/hooks/utils/useIsMobile";
@ -31,26 +32,16 @@ const UpdateDeleteTableActions: FC<Props> = ({
</Box>
</Menu.Target>
<Menu.Dropdown>
<Menu.Item
onClick={e => {
e.stopPropagation();
onChange();
}}>
<Group wrap={"nowrap"}>
<IconEdit />
<Text>Редактировать</Text>
</Group>
</Menu.Item>
<Menu.Item
onClick={e => {
e.stopPropagation();
onDelete();
}}>
<Group wrap={"nowrap"}>
<IconTrash />
<Text>Удалить</Text>
</Group>
</Menu.Item>
<DropdownMenuItem
onClick={onChange}
icon={<IconEdit />}
label={"Редактировать"}
/>
<DropdownMenuItem
onClick={onDelete}
icon={<IconTrash />}
label={"Удалить"}
/>
</Menu.Dropdown>
</Menu>
);

26
src/components/ui/DropdownMenuItem/DropdownMenuItem.tsx Normal file
View File

@ -0,0 +1,26 @@
import React, { FC, MouseEventHandler, ReactNode } from "react";
import { Group, Menu, Text } from "@mantine/core";
type Props = {
onClick: MouseEventHandler<HTMLButtonElement>;
icon: ReactNode;
label: string;
};
const DropdownMenuItem: FC<Props> = ({ icon, label, onClick }) => {
const onClickWrapper: MouseEventHandler<HTMLButtonElement> = e => {
e.stopPropagation();
onClick(e);
};
return (
<Menu.Item onClick={onClickWrapper}>
<Group wrap={"nowrap"}>
{icon}
<Text>{label}</Text>
</Group>
</Menu.Item>
);
};
export default DropdownMenuItem;

6
src/hooks/cruds/useStatusesCrud.tsx
View File

@ -1,4 +1,5 @@
import { LexoRank } from "lexorank";
import statusColors from "@/app/deals/utils/statusColors";
import { useCrudOperations } from "@/hooks/cruds/baseCrud";
import {
CreateStatusSchema,
@ -10,8 +11,8 @@ import {
deleteStatusMutation,
updateStatusMutation,
} from "@/lib/client/@tanstack/react-query.gen";
import { getMaxByLexorank } from "@/utils/lexorank/max";
import { getNewLexorank } from "@/utils/lexorank/generation";
import { getMaxByLexorank } from "@/utils/lexorank/max";
type Props = {
statuses: StatusSchema[];
@ -48,10 +49,13 @@ export const useStatusesCrud = ({
const newLexorank = getNewLexorank(
lastBoard ? LexoRank.parse(lastBoard.lexorank) : null
);
const nextColorIdx = statuses.length % statusColors.length;
const color = statusColors[nextColorIdx];
return {
name: data.name!,
boardId,
lexorank: newLexorank.toString(),
color,
};
},
getUpdateEntity: (old, update) => ({

12
src/lib/client/types.gen.ts
View File

@ -748,6 +748,10 @@ export type CreateStatusSchema = {
* Lexorank
*/
lexorank: string;
/**
* Color
*/
color: string;
};
/**
@ -1522,6 +1526,10 @@ export type StatusSchema = {
* Lexorank
*/
lexorank: string;
/**
* Color
*/
color: string;
};
/**
@ -2013,6 +2021,10 @@ export type UpdateStatusSchema = {
* Lexorank
*/
lexorank?: string | null;
/**
* Color
*/
color?: string | null;
};
/**

3
src/lib/client/zod.gen.ts
View File

@ -312,6 +312,7 @@ export const zStatusSchema = z.object({
id: z.int(),
name: z.string(),
lexorank: z.string(),
color: z.string(),
});
/**
@ -556,6 +557,7 @@ export const zCreateStatusSchema = z.object({
name: z.string(),
boardId: z.int(),
lexorank: z.string(),
color: z.string(),
});
/**
@ -1190,6 +1192,7 @@ export const zUpdateServicesKitResponse = z.object({
export const zUpdateStatusSchema = z.object({
name: z.optional(z.union([z.string(), z.null()])),
lexorank: z.optional(z.union([z.string(), z.null()])),
color: z.optional(z.union([z.string(), z.null()])),
});
/**

2
src/modals/modals.ts
View File

@ -1,5 +1,6 @@
import BarcodeTemplateEditorModal from "@/app/barcode-templates/modals/BarcodeTemplateFormModal/BarcodeTemplateEditorModal";
import ClientEditorModal from "@/app/clients/modals/ClientFormModal/ClientFormModal";
import ColorPickerModal from "@/app/deals/modals/ColorPickerModal/ColorPickerModal";
import DealsBoardFiltersModal from "@/app/deals/modals/DealsBoardFiltersModal/DealsBoardFiltersModal";
import DealsScheduleFiltersModal from "@/app/deals/modals/DealsScheduleFiltersModal/DealsScheduleFiltersModal";
import DealsTableFiltersModal from "@/app/deals/modals/DealsTableFiltersModal/DealsTableFiltersModal";
@ -36,4 +37,5 @@ export const modals = {
barcodeTemplateEditorModal: BarcodeTemplateEditorModal,
clientEditorModal: ClientEditorModal,
printBarcodeModal: PrintBarcodeModal,
statusColorPickerModal: ColorPickerModal,
};

33
src/modules/dealModularEditorTabs/FulfillmentBase/mobile/components/ProductMenu/ProductMenu.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 { DealProductSchema } from "@/lib/client";
@ -26,26 +27,16 @@ const ProductMenu: FC<Props> = ({ value, onChange, onDelete }) => {
</Box>
</Menu.Target>
<Menu.Dropdown>
<Menu.Item
onClick={e => {
e.stopPropagation();
onChange(value);
}}>
<Group wrap={"nowrap"}>
<IconEdit />
<Text>Редактировать</Text>
</Group>
</Menu.Item>
<Menu.Item
onClick={e => {
e.stopPropagation();
onDelete(value);
}}>
<Group wrap={"nowrap"}>
<IconTrash />
<Text>Удалить</Text>
</Group>
</Menu.Item>
<DropdownMenuItem
onClick={() => onChange(value)}
icon={<IconEdit />}
label={"Редактировать"}
/>
<DropdownMenuItem
onClick={() => onDelete(value)}
icon={<IconTrash />}
label={"Удалить"}
/>
</Menu.Dropdown>
</Menu>
);