#

luxiaotao1123

2024-09-27 048426cae242f190ea1f5df310d68af0d738762e

 zy-acs-flow/src/page/mission/MissionListContent.jsx

@@ -1,83 +1,81 @@
import { DragDropContext, OnDragEndResponder } from '@hello-pangea/dnd';
import { DragDropContext } from '@hello-pangea/dnd';
import { Box } from '@mui/material';
import isEqual from 'lodash/isEqual';
import { useEffect, useState } from 'react';
import { DataProvider, useDataProvider, useListContext } from 'react-admin';
import { useDataProvider, useListContext } from 'react-admin';

import { Deal } from '../types';
import { DealColumn } from './MissionColumn';
import { DealsByStage, getDealsByStage } from './stages';
import { useConfigurationContext } from '../root/ConfigurationContext';
import { MissionColumn } from './MissionColumn';

export const MissionListContent = () => {
    const { dealStages } = useConfigurationContext();
    const { data: unorderedDeals, isPending, refetch } = useListContext();
    const { data, isPending, refetch } = useListContext();
    const dataProvider = useDataProvider();

    const [dealsByStage, setDealsByStage] = useState(
        getDealsByStage([], dealStages)
    );
    // const [dealsByStage, setDealsByStage] = useState(
    //     getDealsByStage([], dealStages)
    // );

    useEffect(() => {
        if (unorderedDeals) {
            const newDealsByStage = getDealsByStage(unorderedDeals, dealStages);
            if (!isEqual(newDealsByStage, dealsByStage)) {
                setDealsByStage(newDealsByStage);
            }
        }
        // if (data) {
        //     const newDealsByStage = getDealsByStage(unorderedDeals, dealStages);
        //     if (!isEqual(newDealsByStage, dealsByStage)) {
        //         setDealsByStage(newDealsByStage);
        //     }
        // }
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [unorderedDeals]);
    }, [data]);

    if (isPending) return null;

    const onDragEnd = result => {
        const { destination, source } = result;

        if (!destination) {
            return;
        }
        // if (!destination) {
        //     return;
        // }

        if (
            destination.droppableId === source.droppableId &&
            destination.index === source.index
        ) {
            return;
        }
        // if (
        //     destination.droppableId === source.droppableId &&
        //     destination.index === source.index
        // ) {
        //     return;
        // }

        const sourceStage = source.droppableId;
        const destinationStage = destination.droppableId;
        const sourceDeal = dealsByStage[sourceStage][source.index];
        const destinationDeal = dealsByStage[destinationStage][
            destination.index
        ] ?? {
            stage: destinationStage,
            index: undefined, // undefined if dropped after the last item
        };
        // const sourceStage = source.droppableId;
        // const destinationStage = destination.droppableId;
        // const sourceDeal = dealsByStage[sourceStage][source.index];
        // const destinationDeal = dealsByStage[destinationStage][
        //     destination.index
        // ] ?? {
        //     stage: destinationStage,
        //     index: undefined, // undefined if dropped after the last item
        // };

        // compute local state change synchronously
        setDealsByStage(
            updateDealStageLocal(
                sourceDeal,
                { stage: sourceStage, index: source.index },
                { stage: destinationStage, index: destination.index },
                dealsByStage
            )
        );
        // // compute local state change synchronously
        // setDealsByStage(
        //     updateDealStageLocal(
        //         sourceDeal,
        //         { stage: sourceStage, index: source.index },
        //         { stage: destinationStage, index: destination.index },
        //         dealsByStage
        //     )
        // );

        // persist the changes
        updateDealStage(sourceDeal, destinationDeal, dataProvider).then(() => {
            refetch();
        });
        // // persist the changes
        // updateDealStage(sourceDeal, destinationDeal, dataProvider).then(() => {
        //     refetch();
        // });
    };

    const columns = ['a', 'b']

    return (
        <DragDropContext onDragEnd={onDragEnd}>
            <Box display="flex">
                {dealStages.map(stage => (
                    <DealColumn
                        stage={stage.value}
                        deals={dealsByStage[stage.value]}
                        key={stage.value}
                {columns.map(column => (
                    <MissionColumn
                        stage={column}
                        missions={data}
                        key={column}
                    />
                ))}
            </Box>