assistant-todo/src/ui/task/drag/DroppableTable.tsx

125 lines
6.2 KiB
TypeScript
Raw Normal View History

2025-03-19 06:59:45 -04:00
'use client'
2025-06-26 06:59:31 -04:00
import React, {CSSProperties} from "react";
2025-03-19 06:59:45 -04:00
import {Draggable, Droppable} from "react-beautiful-dnd";
2025-06-26 06:59:31 -04:00
import {ConfigProvider, Tooltip} from "antd";
2025-03-19 06:59:45 -04:00
import {DataType} from "@/lib/definitions";
import './index.modules.css'
2025-06-26 06:59:31 -04:00
import dayjs from "dayjs";
import {getTaskState, taskPriorityList} from "@/lib/task/project/data";
import 'react-virtualized/styles.css';
import RightOption from "@/ui/task/RightOption";
2025-03-19 06:59:45 -04:00
2025-06-26 06:59:31 -04:00
interface DroppableTableProps {
tableCode: string,
2025-07-10 07:03:22 -04:00
taskList: DataType[],
refreshDate?: () => void,
2025-03-19 06:59:45 -04:00
}
2025-06-26 06:59:31 -04:00
export const DroppableTable = React.memo((props: DroppableTableProps) => {
const stateName = React.useMemo(() => {
switch (props.tableCode) {
case '0':
return '不紧急不重要';
case '1':
return '紧急不重要';
case '2':
return '不紧急重要';
case '3':
return '紧急重要';
default:
return '';
2025-03-19 06:59:45 -04:00
}
2025-06-26 06:59:31 -04:00
}, [props.tableCode]);
const getItemStyle = React.useCallback((isDragging: boolean, draggableStyle: any): CSSProperties => ({
2025-03-19 06:59:45 -04:00
userSelect: "none",
2025-06-26 06:59:31 -04:00
background: isDragging ? "lightgreen" : "white",
position: 'relative',
zIndex: isDragging ? 2147483647 : 'auto',
2025-03-19 06:59:45 -04:00
...draggableStyle,
2025-06-26 06:59:31 -04:00
borderBottom: '1px solid #f0f0f0',
boxSizing: 'border-box',
verticalAlign: 'middle',
textAlign: 'center',
borderColor:taskPriorityList.find((item) => item.code === props.tableCode)?.color
2025-06-26 06:59:31 -04:00
}), []);
2025-03-19 06:59:45 -04:00
2025-06-26 06:59:31 -04:00
const getListStyle = React.useCallback((isDraggingOver: boolean) => ({
background: isDraggingOver ? "lightblue" : "white",
height: 'calc((100vh - 42px)/2)',
width: '50vw'
}), []);
2025-03-19 06:59:45 -04:00
2025-06-26 06:59:31 -04:00
const headerStyle = React.useMemo(() => ({
backgroundColor: taskPriorityList.find((item) => item.code === props.tableCode)?.color,
height: '55px',
// borderBottom: '1px solid #f0f0f0',
2025-06-26 06:59:31 -04:00
fontWeight: 'bold'
}), [props.tableCode]);
2025-03-19 06:59:45 -04:00
return (
2025-06-26 06:59:31 -04:00
<Droppable droppableId={props.tableCode} key={props.tableCode}>
{(provided, snapshot) => (
<div
ref={provided.innerRef}
{...provided.droppableProps}
style={getListStyle(snapshot.isDraggingOver)}
className="droppable-table scrollHidden"
2025-03-19 06:59:45 -04:00
>
2025-06-26 06:59:31 -04:00
<ConfigProvider>
{/* 表头 */}
<div style={headerStyle} className='displayFlexRow'>
<div style={{width: '20%'}} className='displayFlexRow'>{stateName}</div>
<div style={{width: '45%'}} className='displayFlexRow'></div>
2025-06-26 06:59:31 -04:00
<div style={{width: '15%'}} className='displayFlexRow'></div>
<div style={{width: '20%'}} className='displayFlexRow'></div>
</div>
{/* 虚拟列表主体 */}
<div style={{height: 'calc(50vh - 76px)',overflow: 'auto'}}>
{props.taskList.map((record, index) => {
return <Draggable key={record.id} draggableId={record.id} index={index}>
{(provided, snapshot) => (
2025-07-10 07:03:22 -04:00
<RightOption refreshDate={props.refreshDate} itemId={record.id}
itemName={record.name} pid={record.pid}
pPid={record.pPid} children={<div
ref={provided.innerRef}
{...provided.draggableProps}
{...provided.dragHandleProps}
style={getItemStyle(snapshot.isDragging, {...provided.draggableProps.style})}
className="virtualized-row displayFlexRow"
>
<div style={{width: '20%'}} className='displayFlexRow'>
<Tooltip placement="topLeft" title={record.name}
className='displayFlexRow'>
<div className='displayFlexRow'>{record.name}</div>
</Tooltip>
</div>
<div style={{width: '45%', boxSizing: 'border-box', minWidth: 0}}
className='displayFlexRow'>
<Tooltip placement="topLeft" title={record.description}>
2025-07-11 07:00:06 -04:00
<div className='displayFlexRow text-ellipsis'>{record.description}</div>
</Tooltip>
</div>
<div style={{
width: '10%',
}}
className='displayFlexRow'>{getTaskState(record.state) ? getTaskState(record.state).name : ""}</div>
<div style={{width: '25%'}} className='displayFlexColumn'>
<div>: {record.expectedStartTime ? dayjs(record.expectedStartTime).format("YYYY-MM-DD HH:mm") : ""}</div>
<div>: {record.expectedEndTime ? dayjs(record.expectedEndTime).format("YYYY-MM-DD HH:mm") : ""}</div>
</div>
</div>}>
</RightOption>
)}
</Draggable>
})}
2025-06-26 06:59:31 -04:00
</div>
2025-06-23 06:49:52 -04:00
</ConfigProvider>
2025-03-19 06:59:45 -04:00
{provided.placeholder}
</div>
)}
</Droppable>
)
2025-06-26 06:59:31 -04:00
});