feat: deals table
This commit is contained in:
@@ -5,7 +5,6 @@
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
|
||||
.search-input {
|
||||
|
||||
}
|
||||
@@ -37,5 +36,10 @@
|
||||
|
||||
.delete-hidden {
|
||||
border: none;
|
||||
|
||||
}
|
||||
|
||||
.top-panel {
|
||||
padding: rem(5);
|
||||
gap: rem(10);
|
||||
display: flex;
|
||||
}
|
||||
|
||||
@@ -9,14 +9,28 @@ import DealEditDrawer from "../drawers/DealEditDrawer/DealEditDrawer.tsx";
|
||||
import {DealPageContextProvider} from "../contexts/DealPageContext.tsx";
|
||||
import {modals} from "@mantine/modals";
|
||||
import {DealService, DealSummaryReorderRequest} from "../../../client";
|
||||
import {Flex} from "@mantine/core";
|
||||
import {ActionIcon, Flex, rem, Text} from "@mantine/core";
|
||||
import classNames from "classnames";
|
||||
import {notifications} from "../../../shared/lib/notifications.ts";
|
||||
import {IconMenu2, IconMenuDeep} from "@tabler/icons-react";
|
||||
import useDealsPageState from "../../DealsPage/hooks/useDealsPageState.tsx";
|
||||
import DealStatusSelect from "../../DealsPage/components/DealStatusSelect/DealStatusSelect.tsx";
|
||||
import BaseMarketplaceSelect from "../../../components/Selects/BaseMarketplaceSelect/BaseMarketplaceSelect.tsx";
|
||||
import ClientSelectNew from "../../../components/Selects/ClientSelectNew/ClientSelectNew.tsx";
|
||||
import DealsTable from "../../DealsPage/components/DealsTable/DealsTable.tsx";
|
||||
import {motion} from "framer-motion";
|
||||
|
||||
enum DisplayMode {
|
||||
BOARD,
|
||||
TABLE
|
||||
}
|
||||
|
||||
export const LeadsPage: FC = () => {
|
||||
const {data, form} = useDealsPageState();
|
||||
|
||||
const {summariesRaw, refetch} = useDealSummaries();
|
||||
const [summaries, setSummaries] = useState(summariesRaw);
|
||||
const [displayMode, setDisplayMode] = useState<DisplayMode>(DisplayMode.BOARD);
|
||||
const [isDragEnded, setIsDragEnded] = useState(true);
|
||||
useEffect(() => {
|
||||
setSummaries(summariesRaw);
|
||||
@@ -92,99 +106,218 @@ export const LeadsPage: FC = () => {
|
||||
});
|
||||
|
||||
}
|
||||
return (
|
||||
<>
|
||||
<DealPageContextProvider>
|
||||
const getTableBody = () => {
|
||||
return (
|
||||
<motion.div
|
||||
key={displayMode}
|
||||
|
||||
<PageBlock fullHeight style={{
|
||||
display: "flex",
|
||||
flexDirection: "column"
|
||||
}}>
|
||||
<DragDropContext
|
||||
onDragStart={() => {
|
||||
setIsDragEnded(false);
|
||||
}}
|
||||
onDragEnd={onDragEnd}>
|
||||
<div className={styles['boards']}>
|
||||
<Board
|
||||
withCreateButton
|
||||
summaries={summaries
|
||||
.filter(summary => summary.status == DealStatus.AWAITING_ACCEPTANCE)}
|
||||
title={"Ожидает приемки"}
|
||||
droppableId={"AWAITING_ACCEPTANCE"}
|
||||
color={'#4A90E2'}
|
||||
/>
|
||||
<Board
|
||||
summaries={summaries
|
||||
.filter(summary => summary.status == DealStatus.PACKAGING)}
|
||||
title={"Упаковка"}
|
||||
droppableId={"PACKAGING"}
|
||||
color={'#F5A623'}
|
||||
initial={{opacity: 0}}
|
||||
animate={{opacity: 1}}
|
||||
transition={{duration: 0.2}}
|
||||
>
|
||||
|
||||
/>
|
||||
<Board
|
||||
summaries={summaries
|
||||
.filter(summary => summary.status == DealStatus.AWAITING_SHIPMENT)}
|
||||
title={"Ожидает отгрузки"}
|
||||
droppableId={"AWAITING_SHIPMENT"}
|
||||
color={'#7ED321'}
|
||||
<DealsTable items={data}/>
|
||||
</motion.div>
|
||||
)
|
||||
}
|
||||
const getBoardBody = () => {
|
||||
return (
|
||||
<motion.div
|
||||
key={displayMode}
|
||||
initial={{opacity: 0}}
|
||||
animate={{opacity: 1}}
|
||||
transition={{duration: 0.2}}
|
||||
>
|
||||
|
||||
/>
|
||||
<Board
|
||||
summaries={summaries
|
||||
.filter(summary => summary.status == DealStatus.AWAITING_PAYMENT)}
|
||||
title={"Ожидает оплаты"}
|
||||
droppableId={"AWAITING_PAYMENT"}
|
||||
color={'#D0021B'}
|
||||
<DragDropContext
|
||||
onDragStart={() => {
|
||||
setIsDragEnded(false);
|
||||
}}
|
||||
onDragEnd={onDragEnd}>
|
||||
<div className={styles['boards']}>
|
||||
<Board
|
||||
withCreateButton
|
||||
summaries={summaries
|
||||
.filter(summary => summary.status == DealStatus.AWAITING_ACCEPTANCE)}
|
||||
title={"Ожидает приемки"}
|
||||
droppableId={"AWAITING_ACCEPTANCE"}
|
||||
color={'#4A90E2'}
|
||||
/>
|
||||
<Board
|
||||
summaries={summaries
|
||||
.filter(summary => summary.status == DealStatus.PACKAGING)}
|
||||
title={"Упаковка"}
|
||||
droppableId={"PACKAGING"}
|
||||
color={'#F5A623'}
|
||||
|
||||
/>
|
||||
<Board
|
||||
summaries={summaries
|
||||
.filter(summary => summary.status == DealStatus.COMPLETED)}
|
||||
title={"Завершена"}
|
||||
droppableId={"COMPLETED"}
|
||||
color={'#417505'}
|
||||
/>
|
||||
</div>
|
||||
<Flex justify={"flex-end"}>
|
||||
<div
|
||||
className={
|
||||
classNames(
|
||||
styles['delete'],
|
||||
isDragEnded && styles['delete-hidden']
|
||||
)
|
||||
}
|
||||
>
|
||||
<Droppable droppableId={"DELETE"}>
|
||||
{(provided) => (
|
||||
<>
|
||||
<div
|
||||
{...provided.droppableProps}
|
||||
ref={provided.innerRef}
|
||||
>
|
||||
{!isDragEnded &&
|
||||
<span>
|
||||
/>
|
||||
<Board
|
||||
summaries={summaries
|
||||
.filter(summary => summary.status == DealStatus.AWAITING_SHIPMENT)}
|
||||
title={"Ожидает отгрузки"}
|
||||
droppableId={"AWAITING_SHIPMENT"}
|
||||
color={'#7ED321'}
|
||||
|
||||
/>
|
||||
<Board
|
||||
summaries={summaries
|
||||
.filter(summary => summary.status == DealStatus.AWAITING_PAYMENT)}
|
||||
title={"Ожидает оплаты"}
|
||||
droppableId={"AWAITING_PAYMENT"}
|
||||
color={'#D0021B'}
|
||||
|
||||
/>
|
||||
<Board
|
||||
summaries={summaries
|
||||
.filter(summary => summary.status == DealStatus.COMPLETED)}
|
||||
title={"Завершена"}
|
||||
droppableId={"COMPLETED"}
|
||||
color={'#417505'}
|
||||
/>
|
||||
</div>
|
||||
<Flex justify={"flex-end"}>
|
||||
<div
|
||||
className={
|
||||
classNames(
|
||||
styles['delete'],
|
||||
isDragEnded && styles['delete-hidden']
|
||||
)
|
||||
}
|
||||
>
|
||||
<Droppable droppableId={"DELETE"}>
|
||||
{(provided) => (
|
||||
<>
|
||||
<div
|
||||
{...provided.droppableProps}
|
||||
ref={provided.innerRef}
|
||||
>
|
||||
{!isDragEnded &&
|
||||
<span>
|
||||
Удалить
|
||||
</span>
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
</div>
|
||||
{provided.placeholder}
|
||||
</>
|
||||
</div>
|
||||
{provided.placeholder}
|
||||
</>
|
||||
|
||||
)}
|
||||
</Droppable>
|
||||
</div>
|
||||
)}
|
||||
</Droppable>
|
||||
</div>
|
||||
</Flex>
|
||||
</DragDropContext>
|
||||
</motion.div>
|
||||
|
||||
)
|
||||
}
|
||||
const getBody = () => {
|
||||
return displayMode === DisplayMode.TABLE ? getTableBody() : getBoardBody();
|
||||
}
|
||||
return (
|
||||
<PageBlock
|
||||
fullHeight
|
||||
style={{
|
||||
gap: rem(10),
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
backgroundColor: "transparent",
|
||||
boxShadow: "none",
|
||||
}}
|
||||
>
|
||||
<DealPageContextProvider>
|
||||
<PageBlock
|
||||
style={{flex: 0}}
|
||||
>
|
||||
<Flex
|
||||
align={"center"}
|
||||
justify={"space-between"}
|
||||
>
|
||||
<Flex
|
||||
gap={rem(10)}
|
||||
direction={"column"}
|
||||
align={"center"}
|
||||
>
|
||||
<Text size={"xs"}>Вид</Text>
|
||||
<Flex gap={rem(10)}>
|
||||
<ActionIcon
|
||||
onClick={() => setDisplayMode(DisplayMode.BOARD)}
|
||||
variant={
|
||||
displayMode === DisplayMode.BOARD ?
|
||||
|
||||
"filled"
|
||||
:
|
||||
"default"
|
||||
|
||||
}>
|
||||
<IconMenuDeep
|
||||
style={{rotate: "-90deg"}}
|
||||
/>
|
||||
</ActionIcon>
|
||||
<ActionIcon
|
||||
onClick={() => setDisplayMode(DisplayMode.TABLE)}
|
||||
variant={
|
||||
displayMode === DisplayMode.TABLE ?
|
||||
"filled"
|
||||
:
|
||||
"default"
|
||||
}
|
||||
>
|
||||
<IconMenu2
|
||||
/>
|
||||
</ActionIcon>
|
||||
|
||||
</Flex>
|
||||
</Flex>
|
||||
</DragDropContext>
|
||||
<motion.div
|
||||
key={displayMode}
|
||||
initial={{opacity: 0}}
|
||||
animate={{opacity: 1}}
|
||||
transition={{duration: 0.2}}
|
||||
>
|
||||
<div
|
||||
|
||||
className={styles['top-panel']}
|
||||
style={{display: displayMode === DisplayMode.TABLE ? "flex" : "none"}}
|
||||
>
|
||||
<DealStatusSelect
|
||||
onClear={() => form.setFieldValue("dealStatus", null)}
|
||||
clearable
|
||||
placeholder={"Выберите статус "}
|
||||
{...form.getInputProps("dealStatus")}
|
||||
/>
|
||||
<BaseMarketplaceSelect
|
||||
onClear={() => form.setFieldValue("marketplace", null)}
|
||||
clearable
|
||||
|
||||
placeholder={"Выберите маркетплейс"}
|
||||
{...form.getInputProps("marketplace")}
|
||||
/>
|
||||
<ClientSelectNew
|
||||
onClear={() => form.setFieldValue("client", null)}
|
||||
clearable
|
||||
searchable
|
||||
placeholder={"Выберите клиента"}
|
||||
{...form.getInputProps("client")}
|
||||
/>
|
||||
</div>
|
||||
</motion.div>
|
||||
</Flex>
|
||||
</PageBlock>
|
||||
<PageBlock
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
flex: 1,
|
||||
height: "100%"
|
||||
}}>
|
||||
{getBody()}
|
||||
</PageBlock>
|
||||
<DealEditDrawer
|
||||
/>
|
||||
</DealPageContextProvider>
|
||||
|
||||
</>
|
||||
</PageBlock>
|
||||
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user