feat: price by category
This commit is contained in:
@@ -1,24 +1,24 @@
|
||||
import {FC, useEffect, useState} from "react";
|
||||
import styles from './LeadsPage.module.css';
|
||||
import { FC, useEffect, useState } from "react";
|
||||
import styles from "./LeadsPage.module.css";
|
||||
import Board from "../../../components/Dnd/Board/Board.tsx";
|
||||
import {DragDropContext, Droppable, DropResult} from "@hello-pangea/dnd";
|
||||
import {useDealSummaries} from "../hooks/useDealSummaries.tsx";
|
||||
import {DealStatus, getDealStatusByName} from "../../../shared/enums/DealStatus.ts";
|
||||
import { DragDropContext, Droppable, DropResult } from "@hello-pangea/dnd";
|
||||
import { useDealSummaries } from "../hooks/useDealSummaries.tsx";
|
||||
import { DealStatus, getDealStatusByName } from "../../../shared/enums/DealStatus.ts";
|
||||
import PageBlock from "../../../components/PageBlock/PageBlock.tsx";
|
||||
import DealEditDrawer from "../drawers/DealEditDrawer/DealEditDrawer.tsx";
|
||||
import {DealPageContextProvider} from "../contexts/DealPageContext.tsx";
|
||||
import {modals} from "@mantine/modals";
|
||||
import {DealService, DealSummaryReorderRequest} from "../../../client";
|
||||
import {ActionIcon, Flex, rem, Text} from "@mantine/core";
|
||||
import { DealPageContextProvider } from "../contexts/DealPageContext.tsx";
|
||||
import { modals } from "@mantine/modals";
|
||||
import { DealService, DealSummaryReorderRequest } from "../../../client";
|
||||
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 { 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";
|
||||
import { motion } from "framer-motion";
|
||||
|
||||
enum DisplayMode {
|
||||
BOARD,
|
||||
@@ -26,9 +26,9 @@ enum DisplayMode {
|
||||
}
|
||||
|
||||
export const LeadsPage: FC = () => {
|
||||
const {data, form} = useDealsPageState();
|
||||
const { data, form } = useDealsPageState();
|
||||
|
||||
const {summariesRaw, refetch} = useDealSummaries();
|
||||
const { summariesRaw, refetch } = useDealSummaries();
|
||||
const [summaries, setSummaries] = useState(summariesRaw);
|
||||
const [displayMode, setDisplayMode] = useState<DisplayMode>(DisplayMode.BOARD);
|
||||
const [isDragEnded, setIsDragEnded] = useState(true);
|
||||
@@ -46,19 +46,19 @@ export const LeadsPage: FC = () => {
|
||||
Вы действительно хотите удалить сделку {summary.name}?
|
||||
</Flex>,
|
||||
onConfirm: () => {
|
||||
DealService.deleteDeal({requestBody: {dealId: dealId}})
|
||||
.then(async ({ok, message}) => {
|
||||
notifications.guess(ok, {message});
|
||||
DealService.deleteDeal({ requestBody: { dealId: dealId } })
|
||||
.then(async ({ ok, message }) => {
|
||||
notifications.guess(ok, { message });
|
||||
if (!ok) return;
|
||||
await refetch();
|
||||
})
|
||||
});
|
||||
},
|
||||
labels: {
|
||||
confirm: "Удалить",
|
||||
cancel: "Отмена"
|
||||
}
|
||||
cancel: "Отмена",
|
||||
},
|
||||
});
|
||||
}
|
||||
};
|
||||
const onSuccess = (dealId: number) => {
|
||||
const summary = summaries.find(summary => summary.id == dealId);
|
||||
if (!summary) return;
|
||||
@@ -69,19 +69,19 @@ export const LeadsPage: FC = () => {
|
||||
Вы действительно хотите завершить сделку {summary.name}?
|
||||
</Flex>,
|
||||
onConfirm: () => {
|
||||
DealService.completeDeal({requestBody: {dealId: dealId}})
|
||||
.then(async ({ok, message}) => {
|
||||
notifications.guess(ok, {message});
|
||||
DealService.completeDeal({ requestBody: { dealId: dealId } })
|
||||
.then(async ({ ok, message }) => {
|
||||
notifications.guess(ok, { message });
|
||||
if (!ok) return;
|
||||
await refetch();
|
||||
})
|
||||
});
|
||||
},
|
||||
labels: {
|
||||
confirm: "Завершить",
|
||||
cancel: "Отмена"
|
||||
}
|
||||
cancel: "Отмена",
|
||||
},
|
||||
});
|
||||
}
|
||||
};
|
||||
const onDragEnd = async (result: DropResult) => {
|
||||
setIsDragEnded(true);
|
||||
// If there is no changes
|
||||
@@ -97,11 +97,11 @@ export const LeadsPage: FC = () => {
|
||||
|
||||
// Checking if it is custom actions
|
||||
const droppableId = result.destination.droppableId;
|
||||
if (droppableId === 'DELETE') {
|
||||
if (droppableId === "DELETE") {
|
||||
onDelete(dealId);
|
||||
return;
|
||||
}
|
||||
if (droppableId === 'SUCCESS') {
|
||||
if (droppableId === "SUCCESS") {
|
||||
onSuccess(dealId);
|
||||
return;
|
||||
}
|
||||
@@ -109,10 +109,10 @@ export const LeadsPage: FC = () => {
|
||||
const request: Partial<DealSummaryReorderRequest> = {
|
||||
dealId: dealId,
|
||||
index: result.destination.index,
|
||||
status: status
|
||||
}
|
||||
status: status,
|
||||
};
|
||||
if (status == summary.status) {
|
||||
DealService.reorderDealSummaries({requestBody: request as DealSummaryReorderRequest})
|
||||
DealService.reorderDealSummaries({ requestBody: request as DealSummaryReorderRequest })
|
||||
.then(async response => {
|
||||
setSummaries(response.summaries);
|
||||
await refetch();
|
||||
@@ -120,33 +120,33 @@ export const LeadsPage: FC = () => {
|
||||
return;
|
||||
}
|
||||
modals.openContextModal({
|
||||
modal: 'enterDeadline',
|
||||
modal: "enterDeadline",
|
||||
title: "Необходимо указать дедлайн",
|
||||
innerProps: {
|
||||
onSubmit: (event) => DealService.reorderDealSummaries({requestBody: event})
|
||||
onSubmit: (event) => DealService.reorderDealSummaries({ requestBody: event })
|
||||
.then(async response => {
|
||||
setSummaries(response.summaries);
|
||||
await refetch();
|
||||
}),
|
||||
request: request
|
||||
}
|
||||
request: request,
|
||||
},
|
||||
});
|
||||
|
||||
}
|
||||
};
|
||||
const getTableBody = () => {
|
||||
return (
|
||||
<motion.div
|
||||
key={displayMode}
|
||||
|
||||
initial={{opacity: 0}}
|
||||
animate={{opacity: 1}}
|
||||
transition={{duration: 0.2}}
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
>
|
||||
|
||||
<DealsTable items={data}/>
|
||||
<DealsTable items={data} />
|
||||
</motion.div>
|
||||
)
|
||||
}
|
||||
);
|
||||
};
|
||||
const getBoardBody = () => {
|
||||
return (
|
||||
|
||||
@@ -154,12 +154,12 @@ export const LeadsPage: FC = () => {
|
||||
style={{
|
||||
display: "flex",
|
||||
height: "100%",
|
||||
flex: 1
|
||||
flex: 1,
|
||||
}}
|
||||
key={displayMode}
|
||||
initial={{opacity: 0}}
|
||||
animate={{opacity: 1}}
|
||||
transition={{duration: 0.2}}
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
>
|
||||
|
||||
<DragDropContext
|
||||
@@ -170,24 +170,24 @@ export const LeadsPage: FC = () => {
|
||||
<Flex
|
||||
justify={"space-between"}
|
||||
direction={"column"}
|
||||
style={{flex: 1}}
|
||||
style={{ flex: 1 }}
|
||||
>
|
||||
|
||||
<div className={styles['boards']}>
|
||||
<div className={styles["boards"]}>
|
||||
<Board
|
||||
withCreateButton
|
||||
summaries={summaries
|
||||
.filter(summary => summary.status == DealStatus.AWAITING_ACCEPTANCE)}
|
||||
title={"Ожидает приемки"}
|
||||
droppableId={"AWAITING_ACCEPTANCE"}
|
||||
color={'#4A90E2'}
|
||||
color={"#4A90E2"}
|
||||
/>
|
||||
<Board
|
||||
summaries={summaries
|
||||
.filter(summary => summary.status == DealStatus.PACKAGING)}
|
||||
title={"Упаковка"}
|
||||
droppableId={"PACKAGING"}
|
||||
color={'#F5A623'}
|
||||
color={"#F5A623"}
|
||||
|
||||
/>
|
||||
<Board
|
||||
@@ -195,7 +195,7 @@ export const LeadsPage: FC = () => {
|
||||
.filter(summary => summary.status == DealStatus.AWAITING_SHIPMENT)}
|
||||
title={"Ожидает отгрузки"}
|
||||
droppableId={"AWAITING_SHIPMENT"}
|
||||
color={'#7ED321'}
|
||||
color={"#7ED321"}
|
||||
|
||||
/>
|
||||
<Board
|
||||
@@ -203,7 +203,7 @@ export const LeadsPage: FC = () => {
|
||||
.filter(summary => summary.status == DealStatus.AWAITING_PAYMENT)}
|
||||
title={"Ожидает оплаты"}
|
||||
droppableId={"AWAITING_PAYMENT"}
|
||||
color={'#D0021B'}
|
||||
color={"#D0021B"}
|
||||
|
||||
/>
|
||||
<Board
|
||||
@@ -211,15 +211,15 @@ export const LeadsPage: FC = () => {
|
||||
.filter(summary => summary.status == DealStatus.COMPLETED)}
|
||||
title={"Завершена"}
|
||||
droppableId={"COMPLETED"}
|
||||
color={'#417505'}
|
||||
color={"#417505"}
|
||||
/>
|
||||
</div>
|
||||
<Flex justify={"space-between"} gap={rem(10)}>
|
||||
<div
|
||||
className={
|
||||
classNames(
|
||||
styles['delete'],
|
||||
isDragEnded && styles['delete-hidden']
|
||||
styles["delete"],
|
||||
isDragEnded && styles["delete-hidden"],
|
||||
)
|
||||
}
|
||||
>
|
||||
@@ -250,8 +250,8 @@ export const LeadsPage: FC = () => {
|
||||
<div
|
||||
className={
|
||||
classNames(
|
||||
styles['delete'],
|
||||
isDragEnded && styles['delete-hidden']
|
||||
styles["delete"],
|
||||
isDragEnded && styles["delete-hidden"],
|
||||
)
|
||||
}
|
||||
>
|
||||
@@ -284,11 +284,11 @@ export const LeadsPage: FC = () => {
|
||||
</DragDropContext>
|
||||
</motion.div>
|
||||
|
||||
)
|
||||
}
|
||||
);
|
||||
};
|
||||
const getBody = () => {
|
||||
return displayMode === DisplayMode.TABLE ? getTableBody() : getBoardBody();
|
||||
}
|
||||
};
|
||||
return (
|
||||
<PageBlock
|
||||
fullHeight
|
||||
@@ -302,7 +302,7 @@ export const LeadsPage: FC = () => {
|
||||
>
|
||||
<DealPageContextProvider>
|
||||
<PageBlock
|
||||
style={{flex: 0}}
|
||||
style={{ flex: 0 }}
|
||||
>
|
||||
<Flex
|
||||
align={"center"}
|
||||
@@ -326,7 +326,7 @@ export const LeadsPage: FC = () => {
|
||||
|
||||
}>
|
||||
<IconMenuDeep
|
||||
style={{rotate: "-90deg"}}
|
||||
style={{ rotate: "-90deg" }}
|
||||
/>
|
||||
</ActionIcon>
|
||||
<ActionIcon
|
||||
@@ -346,14 +346,14 @@ export const LeadsPage: FC = () => {
|
||||
</Flex>
|
||||
<motion.div
|
||||
key={displayMode}
|
||||
initial={{opacity: 0}}
|
||||
animate={{opacity: 1}}
|
||||
transition={{duration: 0.2}}
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
>
|
||||
<div
|
||||
|
||||
className={styles['top-panel']}
|
||||
style={{display: displayMode === DisplayMode.TABLE ? "flex" : "none"}}
|
||||
className={styles["top-panel"]}
|
||||
style={{ display: displayMode === DisplayMode.TABLE ? "flex" : "none" }}
|
||||
>
|
||||
<DealStatusSelect
|
||||
onClear={() => form.setFieldValue("dealStatus", null)}
|
||||
@@ -384,7 +384,7 @@ export const LeadsPage: FC = () => {
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
flex: 1,
|
||||
height: "100%"
|
||||
height: "100%",
|
||||
}}>
|
||||
{getBody()}
|
||||
</PageBlock>
|
||||
@@ -394,5 +394,5 @@ export const LeadsPage: FC = () => {
|
||||
|
||||
</PageBlock>
|
||||
|
||||
)
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user