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

feat: status creating

Browse Source
This commit is contained in:
AlexSserb
2025-08-08 11:31:27 +04:00
parent e29664ecc5
commit f52fde0097
9 changed files with 308 additions and 281 deletions
Download Patch File Download Diff File Expand all files Collapse all files

94
src/app/deals/components/Board/Board.tsx
View File

@ -1,7 +1,8 @@
import React, { FC, useEffect, useRef, useState } from "react";
import { Group, Text, TextInput } from "@mantine/core";
import React, { FC, useState } from "react";
import { Box, Group, Text } from "@mantine/core";
import BoardMenu from "@/app/deals/components/Board/BoardMenu";
import { useBoardsContext } from "@/app/deals/contexts/BoardsContext";
import InPlaceInput from "@/components/ui/InPlaceInput/InPlaceInput";
import { BoardSchema } from "@/lib/client";
type Props = {
@ -10,48 +11,7 @@ type Props = {
const Board: FC<Props> = ({ board }) => {
const [isHovered, setIsHovered] = useState(false);
const [isEditing, setIsEditing] = useState(false);
const [editValue, setEditValue] = useState(board.name);
const { onUpdateBoard } = useBoardsContext();
const inputRef = useRef<HTMLInputElement>(null);
useEffect(() => {
if (isEditing && inputRef.current) {
inputRef.current.focus();
}
}, [isEditing]);
useEffect(() => {
const handleClickOutside = (event: MouseEvent) => {
if (
isEditing &&
inputRef.current &&
!inputRef.current.contains(event.target as Node)
) {
handleSave();
}
};
document.addEventListener("mousedown", handleClickOutside);
return () =>
document.removeEventListener("mousedown", handleClickOutside);
}, [isEditing, editValue]);
const handleSave = () => {
const newValue = editValue.trim();
if (newValue && newValue !== board.name) {
onUpdateBoard(board.id, { name: newValue });
}
setIsEditing(false);
};
const handleEdit = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
e.preventDefault();
e.stopPropagation();
setEditValue(board.name);
setIsEditing(true);
};
return (
<Group
@ -63,33 +23,27 @@ const Board: FC<Props> = ({ board }) => {
style={{ borderWidth: 1 }}
onMouseEnter={() => setIsHovered(true)}
onMouseLeave={() => setIsHovered(false)}>
{isEditing ? (
<TextInput
ref={inputRef}
value={editValue}
onChange={e => setEditValue(e.target.value)}
onKeyDown={e => {
if (e.key === "Enter") handleSave();
if (e.key === "Escape") {
setEditValue(board.name);
setIsEditing(false);
}
}}
variant="unstyled"
styles={{
input: {
height: 25,
minHeight: 25,
},
}}
/>
) : (
<Text>{board.name}</Text>
)}
<BoardMenu
isHovered={isHovered}
board={board}
handleEdit={handleEdit}
<InPlaceInput
defaultValue={board.name}
onComplete={value => onUpdateBoard(board.id, { name: value })}
inputStyles={{
input: {
height: 25,
minHeight: 25,
},
}}
getChildren={startEditing => (
<>
<Box>
<Text>{board.name}</Text>
</Box>
<BoardMenu
isHovered={isHovered}
board={board}
startEditing={startEditing}
/>
</>
)}
/>
</Group>
);

11
src/app/deals/components/Board/BoardMenu.tsx
View File

@ -7,10 +7,10 @@ import { BoardSchema } from "@/lib/client";
type Props = {
isHovered: boolean;
board: BoardSchema;
handleEdit: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
startEditing: () => void;
};
const BoardMenu: FC<Props> = ({ isHovered, board, handleEdit }) => {
const BoardMenu: FC<Props> = ({ isHovered, board, startEditing }) => {
const { selectedBoard, onDeleteBoard } = useBoardsContext();
return (
@ -30,7 +30,12 @@ const BoardMenu: FC<Props> = ({ isHovered, board, handleEdit }) => {
</Box>
</Menu.Target>
<Menu.Dropdown>
<Menu.Item onClick={handleEdit}>
<Menu.Item
onClick={e => {
e.preventDefault();
e.stopPropagation();
startEditing();
}}>
<Group wrap={"nowrap"}>
<IconEdit />
<Text>Переименовать</Text>

52
src/app/deals/components/CreateBoardButton/CreateBoardButton.tsx
View File

@ -1,52 +1,22 @@
import { useState } from "react";
import { IconCheck, IconPlus, IconX } from "@tabler/icons-react";
import { Box, Group, TextInput } from "@mantine/core";
import { IconPlus } from "@tabler/icons-react";
import { Box } from "@mantine/core";
import { useBoardsContext } from "@/app/deals/contexts/BoardsContext";
import InPlaceInput from "@/components/ui/InPlaceInput/InPlaceInput";
const CreateBoardButton = () => {
const { onCreateBoard } = useBoardsContext();
const [isWriting, setIsWriting] = useState<boolean>(false);
const [name, setName] = useState<string>("");
const onStartCreating = () => {
setName("");
setIsWriting(true);
};
const onCancelCreating = () => setIsWriting(false);
const onCompleteCreating = () => {
if (name) {
onCreateBoard(name);
}
setIsWriting(false);
};
return (
<Box style={{ cursor: "pointer" }}>
{isWriting ? (
<Group>
<TextInput
placeholder={"Название доски"}
variant={"unstyled"}
value={name}
onChange={e => setName(e.target.value)}
onKeyDown={e =>
e.key === "Enter" && onCompleteCreating()
}
/>
<Box onClick={onCompleteCreating}>
<IconCheck />
<InPlaceInput
placeholder={"Название доски"}
onComplete={onCreateBoard}
getChildren={startEditing => (
<Box onClick={startEditing}>
<IconPlus />
</Box>
<Box onClick={onCancelCreating}>
<IconX />
</Box>
</Group>
) : (
<Box onClick={onStartCreating}>
<IconPlus />
</Box>
)}
)}
/>
</Box>
);
};

34
src/app/deals/components/CreateStatusButton/CreateStatusButton.tsx Normal file
View File

@ -0,0 +1,34 @@
import React from "react";
import { Box, Text } from "@mantine/core";
import { useStatusesContext } from "@/app/deals/contexts/StatusesContext";
import InPlaceInput from "@/components/ui/InPlaceInput/InPlaceInput";
const CreateStatusButton = () => {
const { onCreateStatus } = useStatusesContext();
return (
<Box
style={{
borderWidth: 1,
borderStyle: "dashed",
borderColor: "gray",
width: "15vw",
minWidth: 150,
cursor: "pointer",
}}>
<InPlaceInput
placeholder={"Название доски"}
onComplete={onCreateStatus}
getChildren={startEditing => (
<Box
p={9}
onClick={() => startEditing()}>
<Text>Создать колонку</Text>
</Box>
)}
/>
</Box>
);
};
export default CreateStatusButton;

95
src/app/deals/components/Funnel/Funnel.tsx
View File

@ -1,6 +1,8 @@
"use client";
import React, { FC, ReactNode } from "react";
import { Group, ScrollArea } from "@mantine/core";
import CreateStatusButton from "@/app/deals/components/CreateStatusButton/CreateStatusButton";
import DealCard from "@/app/deals/components/DealCard/DealCard";
import DealContainer from "@/app/deals/components/DealContainer/DealContainer";
import StatusColumnWrapper from "@/app/deals/components/StatusColumnWrapper/StatusColumnWrapper";
@ -23,45 +25,62 @@ const Funnel: FC = () => {
} = useDealsAndStatusesDnd();
return (
<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}
<ScrollArea
offsetScrollbars={"x"}
scrollbarSize={"0.5rem"}>
<Group align={"start"}>
<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>
)}
/>
)}
activeContainer={activeStatus}
activeItem={activeDeal}
renderItemOverlay={(deal: DealSchema) => <DealCard deal={deal} />}
renderContainerOverlay={(status: StatusSchema, children) => (
<StatusColumnWrapper
status={status}
isDragging>
{children}
</StatusColumnWrapper>
)}
/>
<CreateStatusButton />
</Group>
</ScrollArea>
);
};

101
src/app/deals/components/StatusColumnWrapper/StatusColumnWrapper.tsx
View File

@ -1,7 +1,8 @@
import React, { ReactNode, useEffect, useRef, useState } from "react";
import { Box, Group, Text, TextInput } from "@mantine/core";
import React, { ReactNode } from "react";
import { Box, Group, Text } from "@mantine/core";
import StatusMenu from "@/app/deals/components/StatusColumnWrapper/StatusMenu";
import { useStatusesContext } from "@/app/deals/contexts/StatusesContext";
import InPlaceInput from "@/components/ui/InPlaceInput/InPlaceInput";
import { StatusSchema } from "@/lib/client";
type Props = {
@ -16,46 +17,12 @@ const StatusColumnWrapper = ({
isDragging = false,
}: Props) => {
const { onUpdateStatus } = useStatusesContext();
const [isEditing, setIsEditing] = useState(false);
const [editValue, setEditValue] = useState(status.name);
const inputRef = useRef<HTMLInputElement>(null);
useEffect(() => {
if (isEditing && inputRef.current) {
inputRef.current.focus();
}
}, [isEditing]);
useEffect(() => {
const handleClickOutside = (event: MouseEvent) => {
if (
isEditing &&
inputRef.current &&
!inputRef.current.contains(event.target as Node)
) {
handleSave();
}
};
document.addEventListener("mousedown", handleClickOutside);
return () =>
document.removeEventListener("mousedown", handleClickOutside);
}, [isEditing, editValue]);
const handleEdit = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
e.preventDefault();
e.stopPropagation();
setEditValue(status.name);
setIsEditing(true);
};
const handleSave = () => {
const newValue = editValue.trim();
const handleSave = (value: string) => {
const newValue = value.trim();
if (newValue && newValue !== status.name) {
onUpdateStatus(status.id, { name: newValue });
}
setIsEditing(false);
};
return (
@ -72,39 +39,31 @@ const StatusColumnWrapper = ({
justify={"space-between"}
ml={"xs"}
mb={"xs"}>
{isEditing ? (
<TextInput
ref={inputRef}
value={editValue}
onChange={e => setEditValue(e.target.value)}
onKeyDown={e => {
if (e.key === "Enter") handleSave();
if (e.key === "Escape") {
setEditValue(status.name);
setIsEditing(false);
}
}}
variant="unstyled"
styles={{
input: {
height: 25,
minHeight: 25,
},
}}
/>
) : (
<Text
style={{
cursor: "grab",
userSelect: "none",
opacity: isDragging ? 0.5 : 1,
}}>
{status.name}
</Text>
)}
<StatusMenu
status={status}
handleEdit={handleEdit}
<InPlaceInput
defaultValue={status.name}
onComplete={value => handleSave(value)}
inputStyles={{
input: {
height: 25,
minHeight: 25,
},
}}
getChildren={startEditing => (
<>
<Text
style={{
cursor: "grab",
userSelect: "none",
opacity: isDragging ? 0.5 : 1,
}}>
{status.name}
</Text>
<StatusMenu
status={status}
handleEdit={startEditing}
/>
</>
)}
/>
</Group>
{children}

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

@ -6,7 +6,7 @@ import { StatusSchema } from "@/lib/client";
type Props = {
status: StatusSchema;
handleEdit: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
handleEdit: () => void;
};
const StatusMenu: FC<Props> = ({ status, handleEdit }) => {
@ -28,7 +28,12 @@ const StatusMenu: FC<Props> = ({ status, handleEdit }) => {
</Box>
</Menu.Target>
<Menu.Dropdown>
<Menu.Item onClick={handleEdit}>
<Menu.Item
onClick={e => {
e.preventDefault();
e.stopPropagation();
handleEdit();
}}>
<Group wrap={"nowrap"}>
<IconEdit />
<Text>Переименовать</Text>