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

refactor: removed constant sizes

Browse Source
This commit is contained in:
AlexSserb
2025-08-14 12:15:09 +04:00
parent b6cec9a308
commit 255a39e2bb
14 changed files with 109 additions and 121 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/deals/components/mobile/CreateBoardButtonMobile/CreateBoardButtonMobile.module.css
View File

@ -1,6 +1,6 @@
.create-button {
padding: 11px 10px 12px 10px;
padding: 10px 10px 11px 10px;
border-bottom: 2px solid gray;
}

2
src/app/deals/components/mobile/CreateBoardButtonMobile/CreateBoardButtonMobile.tsx
View File

@ -16,7 +16,7 @@ const CreateBoardButtonMobile = () => {
<Box
onClick={startEditing}
className={styles["create-button"]}>
<IconPlus size={22} />
<IconPlus />
</Box>
)}
modalTitle={"Создание доски"}

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

@ -8,15 +8,9 @@ type Props = {
board: BoardSchema;
startEditing: () => void;
isHovered?: boolean;
menuIconSize?: number;
};
const BoardMenu: FC<Props> = ({
board,
startEditing,
isHovered = true,
menuIconSize = 16,
}) => {
const BoardMenu: FC<Props> = ({ board, startEditing, isHovered = true }) => {
const { selectedBoard, onDeleteBoard } = useBoardsContext();
return (
@ -29,7 +23,7 @@ const BoardMenu: FC<Props> = ({
cursor: "pointer",
}}
onClick={e => e.stopPropagation()}>
<IconDotsVertical size={menuIconSize} />
<IconDotsVertical />
</Box>
</Menu.Target>
<Menu.Dropdown>

17
src/app/deals/components/shared/CreateStatusButton/CreateStatusButton.tsx
View File

@ -1,26 +1,31 @@
import React from "react";
import { IconPlus } from "@tabler/icons-react";
import { Box, Center, Stack } from "@mantine/core";
import { Box, Center, Group, Stack, Text } from "@mantine/core";
import { useStatusesContext } from "@/app/deals/contexts/StatusesContext";
import InPlaceInput from "@/components/ui/InPlaceInput/InPlaceInput";
import useIsMobile from "@/hooks/useIsMobile";
import styles from "./CreateStatusButton.module.css";
const CreateStatusButton = () => {
const { onCreateStatus } = useStatusesContext();
const isMobile = useIsMobile();
return (
<Stack>
<Box
ml={6}
className={styles.container}>
<Box className={styles.container}>
<InPlaceInput
placeholder={"Название колонки"}
onComplete={onCreateStatus}
getChildren={startEditing => (
<Center
p={15}
p={"sm"}
onClick={() => startEditing()}>
<IconPlus size={20} />
<Group gap={"xs"} wrap={"nowrap"} align={"start"}>
<IconPlus />
{isMobile && (
<Text>Добавить</Text>
)}
</Group>
</Center>
)}
modalTitle={"Создание колонки"}

91
src/app/deals/components/shared/Funnel/Funnel.tsx
View File

@ -27,54 +27,46 @@ const Funnel: FC = () => {
} = useDealsAndStatusesDnd();
const renderFunnelDnd = () => (
<>
<FunnelDnd
containers={sortedStatuses}
items={deals}
onDragStart={handleDragStart}
onDragOver={handleDragOver}
onDragEnd={handleDragEnd}
getContainerId={(status: StatusSchema) => `${status.id}-status`}
getItemsByContainer={(
status: StatusSchema,
items: DealSchema[]
) =>
sortByLexorank(
items.filter(deal => deal.statusId === status.id)
)
}
renderContainer={(
status: StatusSchema,
funnelColumnComponent: ReactNode
) => (
<StatusColumnWrapper
status={status}
isDragging={activeStatus?.id === status.id}>
{funnelColumnComponent}
</StatusColumnWrapper>
)}
renderItem={(deal: DealSchema) => (
<DealContainer
key={deal.id}
deal={deal}
/>
)}
activeContainer={activeStatus}
activeItem={activeDeal}
renderItemOverlay={(deal: DealSchema) => (
<DealCard deal={deal} />
)}
renderContainerOverlay={(status: StatusSchema, children) => (
<StatusColumnWrapper
status={status}
isDragging>
{children}
</StatusColumnWrapper>
)}
disabledColumns={isMobile}
/>
{!isMobile && <CreateStatusButton />}
</>
<FunnelDnd
containers={sortedStatuses}
items={deals}
onDragStart={handleDragStart}
onDragOver={handleDragOver}
onDragEnd={handleDragEnd}
getContainerId={(status: StatusSchema) => `${status.id}-status`}
getItemsByContainer={(status: StatusSchema, items: DealSchema[]) =>
sortByLexorank(
items.filter(deal => deal.statusId === status.id)
)
}
renderContainer={(
status: StatusSchema,
funnelColumnComponent: ReactNode
) => (
<StatusColumnWrapper
status={status}
isDragging={activeStatus?.id === status.id}>
{funnelColumnComponent}
</StatusColumnWrapper>
)}
renderItem={(deal: DealSchema) => (
<DealContainer
key={deal.id}
deal={deal}
/>
)}
activeContainer={activeStatus}
activeItem={activeDeal}
renderItemOverlay={(deal: DealSchema) => <DealCard deal={deal} />}
renderContainerOverlay={(status: StatusSchema, children) => (
<StatusColumnWrapper
status={status}
isDragging>
{children}
</StatusColumnWrapper>
)}
disabledColumns={isMobile}
/>
);
if (isMobile) return renderFunnelDnd();
@ -86,8 +78,9 @@ const Funnel: FC = () => {
<Group
align={"start"}
wrap={"nowrap"}
gap={0}>
gap={"xs"}>
{renderFunnelDnd()}
<CreateStatusButton />
</Group>
</ScrollArea>
);

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

@ -7,3 +7,7 @@
width: 80vw;
}
}
.header {
border-bottom: solid blue 3px;
}

9
src/app/deals/components/shared/StatusColumnWrapper/StatusColumnWrapper.tsx
View File

@ -27,12 +27,13 @@ const StatusColumnWrapper = ({
};
return (
<Box
mx={7}
className={styles.container}>
<Box className={styles.container}>
<Group
justify={"space-between"}
className={"flex-nowrap border-b-3 border-blue-500 mb-3 p-3"}>
p={"sm"}
wrap={"nowrap"}
mb={"xs"}
className={styles.header}>
<InPlaceInput
defaultValue={status.name}
onComplete={value => handleSave(value)}

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

@ -23,12 +23,11 @@ const StatusMenu: FC<Props> = ({ status, handleEdit }) => {
<Menu>
<Menu.Target>
<Box
p={5}
style={{
cursor: "pointer",
}}
onClick={e => e.stopPropagation()}>
<IconDotsVertical size={16} />
<IconDotsVertical />
</Box>
</Menu.Target>
<Menu.Dropdown>