v0.1

src/pages/LeadsPage/ui/LeadsPage.tsx

@@ -1,31 +1,77 @@
 import {FC, useEffect, useState} from "react";
 import styles from './LeadsPage.module.css';
 import Board from "../../../components/Dnd/Board/Board.tsx";
-import {DragDropContext, DropResult, OnDragEndResponder, ResponderProvided} from "@hello-pangea/dnd";
+import {DragDropContext, Droppable, DropResult} from "@hello-pangea/dnd";
 import {useDealSummaries} from "../hooks/useDealSummaries.tsx";
-import {DealStatus} 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";
 import {modals} from "@mantine/modals";
-import {DealSummaryReorderRequest} from "../../../client";
+import {DealService, DealSummaryReorderRequest} from "../../../client";
+import {Flex} from "@mantine/core";
+import classNames from "classnames";
+import {notifications} from "../../../shared/lib/notifications.ts";
 
 
 export const LeadsPage: FC = () => {
-    const summariesRaw = useDealSummaries();
+    const {summariesRaw, refetch} = useDealSummaries();
     const [summaries, setSummaries] = useState(summariesRaw);
+    const [isDragEnded, setIsDragEnded] = useState(true);
     useEffect(() => {
         setSummaries(summariesRaw);
     }, [summariesRaw]);
-    const onDragEnd = async (result: DropResult, provided: ResponderProvided) => {
+
+    const onDelete = (dealId: number) => {
+        const summary = summaries.find(summary => summary.id == dealId);
+        if (!summary) return;
+        modals.openConfirmModal({
+            title: "Удаление сделки",
+            children:
+                <Flex>
+                    Вы действительно хотите удалить сделку {summary.name}?
+                </Flex>,
+            onConfirm: () => {
+                DealService.deleteDeal({requestBody: {dealId: dealId}})
+                    .then(async ({ok, message}) => {
+                        notifications.guess(ok, {message});
+                        if (!ok) return;
+                        await refetch();
+                    })
+            },
+            labels: {
+                confirm: "Удалить",
+                cancel: "Отмена"
+            }
+        });
+    }
+    const onDragEnd = async (result: DropResult) => {
+        setIsDragEnded(true);
+        if (!result.destination || result.destination == result.source) return;
         const dealId = parseInt(result.draggableId);
-        
-        const request: DealSummaryReorderRequest = {}
+        if (isNaN(dealId)) return;
+
+        const droppableId = result.destination.droppableId;
+        if (droppableId === 'DELETE') {
+            onDelete(dealId);
+            return;
+        }
+
+        const request: Partial<DealSummaryReorderRequest> = {
+            dealId: dealId,
+            index: result.destination.index,
+            status: getDealStatusByName(droppableId)
+        }
         modals.openContextModal({
             modal: 'enterDeadline',
             title: "Необходимо указать дедлайн",
             innerProps: {
-                onSubmit: (event) => console.log(event)
+                onSubmit: (event) => DealService.reorderDealSummaries({requestBody: event})
+                    .then(async response => {
+                        setSummaries(response.summaries);
+                        await refetch();
+                    }),
+                request: request
             }
         });
 
@@ -34,43 +80,89 @@ export const LeadsPage: FC = () => {
         <>
             <DealPageContextProvider>
 
-                <PageBlock>
+                <PageBlock fullHeight>
                     <div className={styles['container']}>
-                        <div className={styles['boards']}>
-                            <DragDropContext onDragEnd={onDragEnd}>
+                        <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.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'}
                                 />
-                            </DragDropContext>
-                        </div>
+                            </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}
+                                            </>
+
+                                        )}
+                                    </Droppable>
+                                </div>
+
+
+                            </Flex>
+                        </DragDropContext>
+
                     </div>
                 </PageBlock>
                 <DealEditDrawer