feat: prettier
This commit is contained in:
@@ -3,7 +3,10 @@ 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 {
|
||||
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";
|
||||
@@ -22,7 +25,7 @@ import { motion } from "framer-motion";
|
||||
|
||||
enum DisplayMode {
|
||||
BOARD,
|
||||
TABLE
|
||||
TABLE,
|
||||
}
|
||||
|
||||
export const LeadsPage: FC = () => {
|
||||
@@ -30,7 +33,9 @@ export const LeadsPage: FC = () => {
|
||||
|
||||
const { summariesRaw, refetch } = useDealSummaries();
|
||||
const [summaries, setSummaries] = useState(summariesRaw);
|
||||
const [displayMode, setDisplayMode] = useState<DisplayMode>(DisplayMode.BOARD);
|
||||
const [displayMode, setDisplayMode] = useState<DisplayMode>(
|
||||
DisplayMode.BOARD
|
||||
);
|
||||
const [isDragEnded, setIsDragEnded] = useState(true);
|
||||
useEffect(() => {
|
||||
setSummaries(summariesRaw);
|
||||
@@ -41,17 +46,19 @@ export const LeadsPage: FC = () => {
|
||||
if (!summary) return;
|
||||
modals.openConfirmModal({
|
||||
title: "Удаление сделки",
|
||||
children:
|
||||
children: (
|
||||
<Flex>
|
||||
Вы действительно хотите удалить сделку {summary.name}?
|
||||
</Flex>,
|
||||
</Flex>
|
||||
),
|
||||
onConfirm: () => {
|
||||
DealService.deleteDeal({ requestBody: { dealId: dealId } })
|
||||
.then(async ({ ok, message }) => {
|
||||
notifications.guess(ok, { message });
|
||||
if (!ok) return;
|
||||
await refetch();
|
||||
});
|
||||
DealService.deleteDeal({
|
||||
requestBody: { dealId: dealId },
|
||||
}).then(async ({ ok, message }) => {
|
||||
notifications.guess(ok, { message });
|
||||
if (!ok) return;
|
||||
await refetch();
|
||||
});
|
||||
},
|
||||
labels: {
|
||||
confirm: "Удалить",
|
||||
@@ -64,17 +71,19 @@ export const LeadsPage: FC = () => {
|
||||
if (!summary) return;
|
||||
modals.openConfirmModal({
|
||||
title: "Завершение сделки",
|
||||
children:
|
||||
children: (
|
||||
<Flex>
|
||||
Вы действительно хотите завершить сделку {summary.name}?
|
||||
</Flex>,
|
||||
</Flex>
|
||||
),
|
||||
onConfirm: () => {
|
||||
DealService.completeDeal({ requestBody: { dealId: dealId } })
|
||||
.then(async ({ ok, message }) => {
|
||||
notifications.guess(ok, { message });
|
||||
if (!ok) return;
|
||||
await refetch();
|
||||
});
|
||||
DealService.completeDeal({
|
||||
requestBody: { dealId: dealId },
|
||||
}).then(async ({ ok, message }) => {
|
||||
notifications.guess(ok, { message });
|
||||
if (!ok) return;
|
||||
await refetch();
|
||||
});
|
||||
},
|
||||
labels: {
|
||||
confirm: "Завершить",
|
||||
@@ -112,44 +121,42 @@ export const LeadsPage: FC = () => {
|
||||
status: status,
|
||||
};
|
||||
if (status == summary.status) {
|
||||
DealService.reorderDealSummaries({ requestBody: request as DealSummaryReorderRequest })
|
||||
.then(async response => {
|
||||
setSummaries(response.summaries);
|
||||
await refetch();
|
||||
});
|
||||
DealService.reorderDealSummaries({
|
||||
requestBody: request as DealSummaryReorderRequest,
|
||||
}).then(async response => {
|
||||
setSummaries(response.summaries);
|
||||
await refetch();
|
||||
});
|
||||
return;
|
||||
}
|
||||
modals.openContextModal({
|
||||
modal: "enterDeadline",
|
||||
title: "Необходимо указать дедлайн",
|
||||
innerProps: {
|
||||
onSubmit: (event) => DealService.reorderDealSummaries({ requestBody: event })
|
||||
.then(async response => {
|
||||
onSubmit: event =>
|
||||
DealService.reorderDealSummaries({
|
||||
requestBody: event,
|
||||
}).then(async response => {
|
||||
setSummaries(response.summaries);
|
||||
await refetch();
|
||||
}),
|
||||
request: request,
|
||||
},
|
||||
});
|
||||
|
||||
};
|
||||
const getTableBody = () => {
|
||||
return (
|
||||
<motion.div
|
||||
key={displayMode}
|
||||
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
>
|
||||
|
||||
transition={{ duration: 0.2 }}>
|
||||
<DealsTable items={data} />
|
||||
</motion.div>
|
||||
);
|
||||
};
|
||||
const getBoardBody = () => {
|
||||
return (
|
||||
|
||||
<motion.div
|
||||
style={{
|
||||
display: "flex",
|
||||
@@ -159,9 +166,7 @@ export const LeadsPage: FC = () => {
|
||||
key={displayMode}
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
>
|
||||
|
||||
transition={{ duration: 0.2 }}>
|
||||
<DragDropContext
|
||||
onDragStart={() => {
|
||||
setIsDragEnded(false);
|
||||
@@ -170,124 +175,115 @@ export const LeadsPage: FC = () => {
|
||||
<Flex
|
||||
justify={"space-between"}
|
||||
direction={"column"}
|
||||
style={{ flex: 1 }}
|
||||
>
|
||||
|
||||
style={{ flex: 1 }}>
|
||||
<div className={styles["boards"]}>
|
||||
<Board
|
||||
withCreateButton
|
||||
summaries={summaries
|
||||
.filter(summary => summary.status == DealStatus.AWAITING_ACCEPTANCE)}
|
||||
summaries={summaries.filter(
|
||||
summary =>
|
||||
summary.status ==
|
||||
DealStatus.AWAITING_ACCEPTANCE
|
||||
)}
|
||||
title={"Ожидает приемки"}
|
||||
droppableId={"AWAITING_ACCEPTANCE"}
|
||||
color={"#4A90E2"}
|
||||
/>
|
||||
<Board
|
||||
summaries={summaries
|
||||
.filter(summary => summary.status == DealStatus.PACKAGING)}
|
||||
summaries={summaries.filter(
|
||||
summary =>
|
||||
summary.status == DealStatus.PACKAGING
|
||||
)}
|
||||
title={"Упаковка"}
|
||||
droppableId={"PACKAGING"}
|
||||
color={"#F5A623"}
|
||||
|
||||
/>
|
||||
<Board
|
||||
summaries={summaries
|
||||
.filter(summary => summary.status == DealStatus.AWAITING_SHIPMENT)}
|
||||
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)}
|
||||
summaries={summaries.filter(
|
||||
summary =>
|
||||
summary.status ==
|
||||
DealStatus.AWAITING_PAYMENT
|
||||
)}
|
||||
title={"Ожидает оплаты"}
|
||||
droppableId={"AWAITING_PAYMENT"}
|
||||
color={"#D0021B"}
|
||||
|
||||
/>
|
||||
<Board
|
||||
summaries={summaries
|
||||
.filter(summary => summary.status == DealStatus.COMPLETED)}
|
||||
summaries={summaries.filter(
|
||||
summary =>
|
||||
summary.status == DealStatus.COMPLETED
|
||||
)}
|
||||
title={"Завершена"}
|
||||
droppableId={"COMPLETED"}
|
||||
color={"#417505"}
|
||||
/>
|
||||
</div>
|
||||
<Flex justify={"space-between"} gap={rem(10)}>
|
||||
<Flex
|
||||
justify={"space-between"}
|
||||
gap={rem(10)}>
|
||||
<div
|
||||
className={
|
||||
classNames(
|
||||
styles["delete"],
|
||||
isDragEnded && styles["delete-hidden"],
|
||||
)
|
||||
}
|
||||
>
|
||||
className={classNames(
|
||||
styles["delete"],
|
||||
isDragEnded && styles["delete-hidden"]
|
||||
)}>
|
||||
<Droppable droppableId={"DELETE"}>
|
||||
{(provided, snapshot) => (
|
||||
<>
|
||||
<div
|
||||
{...provided.droppableProps}
|
||||
ref={provided.innerRef}
|
||||
>
|
||||
{
|
||||
!isDragEnded
|
||||
&&
|
||||
!snapshot.isDraggingOver &&
|
||||
<span>
|
||||
Удалить
|
||||
</span>
|
||||
|
||||
}
|
||||
|
||||
ref={provided.innerRef}>
|
||||
{!isDragEnded &&
|
||||
!snapshot.isDraggingOver && (
|
||||
<span>Удалить</span>
|
||||
)}
|
||||
</div>
|
||||
{provided.placeholder}
|
||||
</>
|
||||
|
||||
)}
|
||||
</Droppable>
|
||||
</div>
|
||||
<div
|
||||
className={
|
||||
classNames(
|
||||
styles["delete"],
|
||||
isDragEnded && styles["delete-hidden"],
|
||||
)
|
||||
}
|
||||
>
|
||||
className={classNames(
|
||||
styles["delete"],
|
||||
isDragEnded && styles["delete-hidden"]
|
||||
)}>
|
||||
<Droppable droppableId={"SUCCESS"}>
|
||||
{(provided, snapshot) => (
|
||||
<>
|
||||
<div
|
||||
{...provided.droppableProps}
|
||||
ref={provided.innerRef}
|
||||
>
|
||||
{
|
||||
!isDragEnded
|
||||
&&
|
||||
!snapshot.isDraggingOver &&
|
||||
<span>
|
||||
Успешно завершена
|
||||
</span>
|
||||
|
||||
}
|
||||
ref={provided.innerRef}>
|
||||
{!isDragEnded &&
|
||||
!snapshot.isDraggingOver && (
|
||||
<span>
|
||||
Успешно завершена
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
{provided.placeholder}
|
||||
</>
|
||||
|
||||
)}
|
||||
</Droppable>
|
||||
</div>
|
||||
</Flex>
|
||||
</Flex>
|
||||
|
||||
</DragDropContext>
|
||||
</motion.div>
|
||||
|
||||
);
|
||||
};
|
||||
const getBody = () => {
|
||||
return displayMode === DisplayMode.TABLE ? getTableBody() : getBoardBody();
|
||||
return displayMode === DisplayMode.TABLE
|
||||
? getTableBody()
|
||||
: getBoardBody();
|
||||
};
|
||||
return (
|
||||
<PageBlock
|
||||
@@ -298,78 +294,77 @@ export const LeadsPage: FC = () => {
|
||||
flexDirection: "column",
|
||||
backgroundColor: "transparent",
|
||||
boxShadow: "none",
|
||||
}}
|
||||
>
|
||||
}}>
|
||||
<DealPageContextProvider>
|
||||
<PageBlock
|
||||
style={{ flex: 0 }}
|
||||
>
|
||||
<PageBlock style={{ flex: 0 }}>
|
||||
<Flex
|
||||
align={"center"}
|
||||
justify={"space-between"}
|
||||
>
|
||||
justify={"space-between"}>
|
||||
<Flex
|
||||
gap={rem(10)}
|
||||
direction={"column"}
|
||||
align={"center"}
|
||||
>
|
||||
align={"center"}>
|
||||
<Text size={"xs"}>Вид</Text>
|
||||
<Flex gap={rem(10)}>
|
||||
<ActionIcon
|
||||
onClick={() => setDisplayMode(DisplayMode.BOARD)}
|
||||
onClick={() =>
|
||||
setDisplayMode(DisplayMode.BOARD)
|
||||
}
|
||||
variant={
|
||||
displayMode === DisplayMode.BOARD ?
|
||||
|
||||
"filled"
|
||||
:
|
||||
"default"
|
||||
|
||||
displayMode === DisplayMode.BOARD
|
||||
? "filled"
|
||||
: "default"
|
||||
}>
|
||||
<IconMenuDeep
|
||||
style={{ rotate: "-90deg" }}
|
||||
/>
|
||||
</ActionIcon>
|
||||
<ActionIcon
|
||||
onClick={() => setDisplayMode(DisplayMode.TABLE)}
|
||||
variant={
|
||||
displayMode === DisplayMode.TABLE ?
|
||||
"filled"
|
||||
:
|
||||
"default"
|
||||
onClick={() =>
|
||||
setDisplayMode(DisplayMode.TABLE)
|
||||
}
|
||||
>
|
||||
<IconMenu2
|
||||
/>
|
||||
variant={
|
||||
displayMode === DisplayMode.TABLE
|
||||
? "filled"
|
||||
: "default"
|
||||
}>
|
||||
<IconMenu2 />
|
||||
</ActionIcon>
|
||||
|
||||
</Flex>
|
||||
</Flex>
|
||||
<motion.div
|
||||
key={displayMode}
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
>
|
||||
transition={{ duration: 0.2 }}>
|
||||
<div
|
||||
|
||||
className={styles["top-panel"]}
|
||||
style={{ display: displayMode === DisplayMode.TABLE ? "flex" : "none" }}
|
||||
>
|
||||
style={{
|
||||
display:
|
||||
displayMode === DisplayMode.TABLE
|
||||
? "flex"
|
||||
: "none",
|
||||
}}>
|
||||
<DealStatusSelect
|
||||
onClear={() => form.setFieldValue("dealStatus", null)}
|
||||
onClear={() =>
|
||||
form.setFieldValue("dealStatus", null)
|
||||
}
|
||||
clearable
|
||||
placeholder={"Выберите статус "}
|
||||
{...form.getInputProps("dealStatus")}
|
||||
/>
|
||||
<BaseMarketplaceSelect
|
||||
onClear={() => form.setFieldValue("marketplace", null)}
|
||||
onClear={() =>
|
||||
form.setFieldValue("marketplace", null)
|
||||
}
|
||||
clearable
|
||||
|
||||
placeholder={"Выберите маркетплейс"}
|
||||
{...form.getInputProps("marketplace")}
|
||||
/>
|
||||
<ClientSelectNew
|
||||
onClear={() => form.setFieldValue("client", null)}
|
||||
onClear={() =>
|
||||
form.setFieldValue("client", null)
|
||||
}
|
||||
clearable
|
||||
searchable
|
||||
placeholder={"Выберите клиента"}
|
||||
@@ -388,11 +383,8 @@ export const LeadsPage: FC = () => {
|
||||
}}>
|
||||
{getBody()}
|
||||
</PageBlock>
|
||||
<DealEditDrawer
|
||||
/>
|
||||
<DealEditDrawer />
|
||||
</DealPageContextProvider>
|
||||
|
||||
</PageBlock>
|
||||
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user