Untitled
plain_text
2 months ago
15 kB
1
Indexable
Never
import React, { useState } from "react"; import { DndProvider, useDrag, useDrop } from "react-dnd"; import { HTML5Backend } from "react-dnd-html5-backend"; import './Table.css'; const ItemType = "ITEM"; type Period = { weekType: string; weekDay: string; time: string; period: number; note: string; classId: number | null; subjectId: string | null; customSubjectName: string | null; }; type DraggableCellProps = { data: Period; rowIndex: number; cellIndex: number; onMove: (fromData: Period, toData: Period, fromRowIndex: number, fromCellIndex: number, toRowIndex: number, toCellIndex: number) => void; }; const DraggableCell: React.FC<DraggableCellProps> = ({ data, onMove, rowIndex, cellIndex }) => { // ... previous logic const [, ref] = useDrag({ type: ItemType, item: { data, rowIndex, cellIndex } }); const [, drop] = useDrop({ accept: ItemType, drop: (item: any) => { onMove(item.data, data, item.rowIndex, item.cellIndex, rowIndex, cellIndex); } }); return ( <td ref={(node) => ref(drop(node))}> {data.subjectId} {/* You can display more data properties here */} </td> ); }; function transpose<T>(matrix: T[][]): T[][] { return matrix[0].map((_, colIndex) => matrix.map(row => row[colIndex])); } const Table: React.FC = () => { const fetchedData = JSON.parse("{\"MONDAY\":[{\"weekType\":\"A\",\"weekDay\":\"MONDAY\",\"time\":\"07:10\",\"period\":0,\"note\":\"\",\"classId\":7801,\"subjectId\":\"8\",\"customSubjectName\":null},{\"weekType\":\"A\",\"weekDay\":\"MONDAY\",\"time\":\"08:00\",\"period\":1,\"note\":\"\",\"classId\":null,\"subjectId\":null,\"customSubjectName\":null},{\"weekType\":\"A\",\"weekDay\":\"MONDAY\",\"time\":\"08:50\",\"period\":2,\"note\":\"\",\"classId\":null,\"subjectId\":null,\"customSubjectName\":null},{\"weekType\":\"A\",\"weekDay\":\"MONDAY\",\"time\":\"09:45\",\"period\":3,\"note\":\"\",\"classId\":null,\"subjectId\":null,\"customSubjectName\":null},{\"weekType\":\"A\",\"weekDay\":\"MONDAY\",\"time\":\"10:40\",\"period\":4,\"note\":\"\",\"classId\":null,\"subjectId\":null,\"customSubjectName\":null},{\"weekType\":\"A\",\"weekDay\":\"MONDAY\",\"time\":\"11:30\",\"period\":5,\"note\":\"\",\"classId\":null,\"subjectId\":null,\"customSubjectName\":null},{\"weekType\":\"A\",\"weekDay\":\"MONDAY\",\"time\":\"12:20\",\"period\":6,\"note\":\"\",\"classId\":null,\"subjectId\":null,\"customSubjectName\":null},{\"weekType\":\"A\",\"weekDay\":\"MONDAY\",\"time\":\"13:10\",\"period\":7,\"note\":\"\",\"classId\":null,\"subjectId\":null,\"customSubjectName\":null},{\"weekType\":\"A\",\"weekDay\":\"MONDAY\",\"time\":\"14:00\",\"period\":8,\"note\":\"\",\"classId\":null,\"subjectId\":null,\"customSubjectName\":null},{\"weekType\":\"A\",\"weekDay\":\"MONDAY\",\"time\":\"14:50\",\"period\":9,\"note\":\"\",\"classId\":null,\"subjectId\":null,\"customSubjectName\":null},{\"weekType\":\"A\",\"weekDay\":\"MONDAY\",\"time\":\"15:45\",\"period\":10,\"note\":\"\",\"classId\":null,\"subjectId\":null,\"customSubjectName\":null},{\"weekType\":\"A\",\"weekDay\":\"MONDAY\",\"time\":\"16:40\",\"period\":11,\"note\":\"\",\"classId\":null,\"subjectId\":null,\"customSubjectName\":null},{\"weekType\":\"A\",\"weekDay\":\"MONDAY\",\"time\":\"17:30\",\"period\":12,\"note\":\"\",\"classId\":null,\"subjectId\":null,\"customSubjectName\":null},{\"weekType\":\"A\",\"weekDay\":\"MONDAY\",\"time\":\"18:20\",\"period\":13,\"note\":\"\",\"classId\":null,\"subjectId\":null,\"customSubjectName\":null},{\"weekType\":\"A\",\"weekDay\":\"MONDAY\",\"time\":\"19:10\",\"period\":14,\"note\":\"\",\"classId\":null,\"subjectId\":null,\"customSubjectName\":null}],\"TUESDAY\":[{\"weekType\":\"A\",\"weekDay\":\"TUESDAY\",\"time\":\"07:10\",\"period\":0,\"note\":\"\",\"classId\":420420,\"subjectId\":\"10\",\"customSubjectName\":null},{\"weekType\":\"A\",\"weekDay\":\"TUESDAY\",\"time\":\"08:00\",\"period\":1,\"note\":\"\",\"classId\":null,\"subjectId\":null,\"customSubjectName\":null},{\"weekType\":\"A\",\"weekDay\":\"TUESDAY\",\"time\":\"08:50\",\"period\":2,\"note\":\"\",\"classId\":null,\"subjectId\":null,\"customSubjectName\":null},{\"weekType\":\"A\",\"weekDay\":\"TUESDAY\",\"time\":\"09:45\",\"period\":3,\"note\":\"\",\"classId\":null,\"subjectId\":null,\"customSubjectName\":null},{\"weekType\":\"A\",\"weekDay\":\"TUESDAY\",\"time\":\"10:40\",\"period\":4,\"note\":\"\",\"classId\":null,\"subjectId\":null,\"customSubjectName\":null},{\"weekType\":\"A\",\"weekDay\":\"TUESDAY\",\"time\":\"11:30\",\"period\":5,\"note\":\"\",\"classId\":null,\"subjectId\":null,\"customSubjectName\":null},{\"weekType\":\"A\",\"weekDay\":\"TUESDAY\",\"time\":\"12:20\",\"period\":6,\"note\":\"\",\"classId\":null,\"subjectId\":null,\"customSubjectName\":null},{\"weekType\":\"A\",\"weekDay\":\"TUESDAY\",\"time\":\"13:10\",\"period\":7,\"note\":\"\",\"classId\":null,\"subjectId\":null,\"customSubjectName\":null},{\"weekType\":\"A\",\"weekDay\":\"TUESDAY\",\"time\":\"14:00\",\"period\":8,\"note\":\"\",\"classId\":null,\"subjectId\":null,\"customSubjectName\":null},{\"weekType\":\"A\",\"weekDay\":\"TUESDAY\",\"time\":\"14:50\",\"period\":9,\"note\":\"\",\"classId\":null,\"subjectId\":null,\"customSubjectName\":null},{\"weekType\":\"A\",\"weekDay\":\"TUESDAY\",\"time\":\"15:45\",\"period\":10,\"note\":\"\",\"classId\":null,\"subjectId\":null,\"customSubjectName\":null},{\"weekType\":\"A\",\"weekDay\":\"TUESDAY\",\"time\":\"16:40\",\"period\":11,\"note\":\"\",\"classId\":null,\"subjectId\":null,\"customSubjectName\":null},{\"weekType\":\"A\",\"weekDay\":\"TUESDAY\",\"time\":\"17:30\",\"period\":12,\"note\":\"\",\"classId\":null,\"subjectId\":null,\"customSubjectName\":null},{\"weekType\":\"A\",\"weekDay\":\"TUESDAY\",\"time\":\"18:20\",\"period\":13,\"note\":\"\",\"classId\":null,\"subjectId\":null,\"customSubjectName\":null},{\"weekType\":\"A\",\"weekDay\":\"TUESDAY\",\"time\":\"19:10\",\"period\":14,\"note\":\"\",\"classId\":null,\"subjectId\":null,\"customSubjectName\":null}],\"WEDNESDAY\":[{\"weekType\":\"A\",\"weekDay\":\"WEDNESDAY\",\"time\":\"07:10\",\"period\":0,\"note\":\"\",\"classId\":null,\"subjectId\":null,\"customSubjectName\":null},{\"weekType\":\"A\",\"weekDay\":\"WEDNESDAY\",\"time\":\"08:00\",\"period\":1,\"note\":\"\",\"classId\":null,\"subjectId\":null,\"customSubjectName\":null},{\"weekType\":\"A\",\"weekDay\":\"WEDNESDAY\",\"time\":\"08:50\",\"period\":2,\"note\":\"\",\"classId\":null,\"subjectId\":null,\"customSubjectName\":null},{\"weekType\":\"A\",\"weekDay\":\"WEDNESDAY\",\"time\":\"09:45\",\"period\":3,\"note\":\"\",\"classId\":null,\"subjectId\":null,\"customSubjectName\":null},{\"weekType\":\"A\",\"weekDay\":\"WEDNESDAY\",\"time\":\"10:40\",\"period\":4,\"note\":\"\",\"classId\":null,\"subjectId\":null,\"customSubjectName\":null},{\"weekType\":\"A\",\"weekDay\":\"WEDNESDAY\",\"time\":\"11:30\",\"period\":5,\"note\":\"\",\"classId\":null,\"subjectId\":null,\"customSubjectName\":null},{\"weekType\":\"A\",\"weekDay\":\"WEDNESDAY\",\"time\":\"12:20\",\"period\":6,\"note\":\"\",\"classId\":null,\"subjectId\":null,\"customSubjectName\":null},{\"weekType\":\"A\",\"weekDay\":\"WEDNESDAY\",\"time\":\"13:10\",\"period\":7,\"note\":\"\",\"classId\":null,\"subjectId\":null,\"customSubjectName\":null},{\"weekType\":\"A\",\"weekDay\":\"WEDNESDAY\",\"time\":\"14:00\",\"period\":8,\"note\":\"\",\"classId\":null,\"subjectId\":null,\"customSubjectName\":null},{\"weekType\":\"A\",\"weekDay\":\"WEDNESDAY\",\"time\":\"14:50\",\"period\":9,\"note\":\"\",\"classId\":null,\"subjectId\":null,\"customSubjectName\":null},{\"weekType\":\"A\",\"weekDay\":\"WEDNESDAY\",\"time\":\"15:45\",\"period\":10,\"note\":\"\",\"classId\":null,\"subjectId\":null,\"customSubjectName\":null},{\"weekType\":\"A\",\"weekDay\":\"WEDNESDAY\",\"time\":\"16:40\",\"period\":11,\"note\":\"\",\"classId\":null,\"subjectId\":null,\"customSubjectName\":null},{\"weekType\":\"A\",\"weekDay\":\"WEDNESDAY\",\"time\":\"17:30\",\"period\":12,\"note\":\"\",\"classId\":null,\"subjectId\":null,\"customSubjectName\":null},{\"weekType\":\"A\",\"weekDay\":\"WEDNESDAY\",\"time\":\"18:20\",\"period\":13,\"note\":\"\",\"classId\":null,\"subjectId\":null,\"customSubjectName\":null},{\"weekType\":\"A\",\"weekDay\":\"WEDNESDAY\",\"time\":\"19:10\",\"period\":14,\"note\":\"\",\"classId\":null,\"subjectId\":null,\"customSubjectName\":null}],\"THURSDAY\":[{\"weekType\":\"A\",\"weekDay\":\"THURSDAY\",\"time\":\"07:10\",\"period\":0,\"note\":\"\",\"classId\":null,\"subjectId\":null,\"customSubjectName\":null},{\"weekType\":\"A\",\"weekDay\":\"THURSDAY\",\"time\":\"08:00\",\"period\":1,\"note\":\"\",\"classId\":null,\"subjectId\":null,\"customSubjectName\":null},{\"weekType\":\"A\",\"weekDay\":\"THURSDAY\",\"time\":\"08:50\",\"period\":2,\"note\":\"\",\"classId\":null,\"subjectId\":null,\"customSubjectName\":null},{\"weekType\":\"A\",\"weekDay\":\"THURSDAY\",\"time\":\"09:45\",\"period\":3,\"note\":\"\",\"classId\":null,\"subjectId\":null,\"customSubjectName\":null},{\"weekType\":\"A\",\"weekDay\":\"THURSDAY\",\"time\":\"10:40\",\"period\":4,\"note\":\"\",\"classId\":null,\"subjectId\":null,\"customSubjectName\":null},{\"weekType\":\"A\",\"weekDay\":\"THURSDAY\",\"time\":\"11:30\",\"period\":5,\"note\":\"\",\"classId\":null,\"subjectId\":null,\"customSubjectName\":null},{\"weekType\":\"A\",\"weekDay\":\"THURSDAY\",\"time\":\"12:20\",\"period\":6,\"note\":\"\",\"classId\":null,\"subjectId\":null,\"customSubjectName\":null},{\"weekType\":\"A\",\"weekDay\":\"THURSDAY\",\"time\":\"13:10\",\"period\":7,\"note\":\"\",\"classId\":null,\"subjectId\":null,\"customSubjectName\":null},{\"weekType\":\"A\",\"weekDay\":\"THURSDAY\",\"time\":\"14:00\",\"period\":8,\"note\":\"\",\"classId\":null,\"subjectId\":null,\"customSubjectName\":null},{\"weekType\":\"A\",\"weekDay\":\"THURSDAY\",\"time\":\"14:50\",\"period\":9,\"note\":\"\",\"classId\":null,\"subjectId\":null,\"customSubjectName\":null},{\"weekType\":\"A\",\"weekDay\":\"THURSDAY\",\"time\":\"15:45\",\"period\":10,\"note\":\"\",\"classId\":null,\"subjectId\":null,\"customSubjectName\":null},{\"weekType\":\"A\",\"weekDay\":\"THURSDAY\",\"time\":\"16:40\",\"period\":11,\"note\":\"\",\"classId\":null,\"subjectId\":null,\"customSubjectName\":null},{\"weekType\":\"A\",\"weekDay\":\"THURSDAY\",\"time\":\"17:30\",\"period\":12,\"note\":\"\",\"classId\":null,\"subjectId\":null,\"customSubjectName\":null},{\"weekType\":\"A\",\"weekDay\":\"THURSDAY\",\"time\":\"18:20\",\"period\":13,\"note\":\"\",\"classId\":null,\"subjectId\":null,\"customSubjectName\":null},{\"weekType\":\"A\",\"weekDay\":\"THURSDAY\",\"time\":\"19:10\",\"period\":14,\"note\":\"\",\"classId\":null,\"subjectId\":null,\"customSubjectName\":null}],\"FRIDAY\":[{\"weekType\":\"A\",\"weekDay\":\"FRIDAY\",\"time\":\"07:10\",\"period\":0,\"note\":\"\",\"classId\":null,\"subjectId\":null,\"customSubjectName\":null},{\"weekType\":\"A\",\"weekDay\":\"FRIDAY\",\"time\":\"08:00\",\"period\":1,\"note\":\"\",\"classId\":null,\"subjectId\":null,\"customSubjectName\":null},{\"weekType\":\"A\",\"weekDay\":\"FRIDAY\",\"time\":\"08:50\",\"period\":2,\"note\":\"\",\"classId\":null,\"subjectId\":null,\"customSubjectName\":null},{\"weekType\":\"A\",\"weekDay\":\"FRIDAY\",\"time\":\"09:45\",\"period\":3,\"note\":\"\",\"classId\":null,\"subjectId\":null,\"customSubjectName\":null},{\"weekType\":\"A\",\"weekDay\":\"FRIDAY\",\"time\":\"10:40\",\"period\":4,\"note\":\"\",\"classId\":null,\"subjectId\":null,\"customSubjectName\":null},{\"weekType\":\"A\",\"weekDay\":\"FRIDAY\",\"time\":\"11:30\",\"period\":5,\"note\":\"\",\"classId\":null,\"subjectId\":null,\"customSubjectName\":null},{\"weekType\":\"A\",\"weekDay\":\"FRIDAY\",\"time\":\"12:20\",\"period\":6,\"note\":\"\",\"classId\":null,\"subjectId\":null,\"customSubjectName\":null},{\"weekType\":\"A\",\"weekDay\":\"FRIDAY\",\"time\":\"13:10\",\"period\":7,\"note\":\"\",\"classId\":null,\"subjectId\":null,\"customSubjectName\":null},{\"weekType\":\"A\",\"weekDay\":\"FRIDAY\",\"time\":\"14:00\",\"period\":8,\"note\":\"\",\"classId\":null,\"subjectId\":null,\"customSubjectName\":null},{\"weekType\":\"A\",\"weekDay\":\"FRIDAY\",\"time\":\"14:50\",\"period\":9,\"note\":\"\",\"classId\":null,\"subjectId\":null,\"customSubjectName\":null},{\"weekType\":\"A\",\"weekDay\":\"FRIDAY\",\"time\":\"15:45\",\"period\":10,\"note\":\"\",\"classId\":null,\"subjectId\":null,\"customSubjectName\":null},{\"weekType\":\"A\",\"weekDay\":\"FRIDAY\",\"time\":\"16:40\",\"period\":11,\"note\":\"\",\"classId\":null,\"subjectId\":null,\"customSubjectName\":null},{\"weekType\":\"A\",\"weekDay\":\"FRIDAY\",\"time\":\"17:30\",\"period\":12,\"note\":\"\",\"classId\":null,\"subjectId\":null,\"customSubjectName\":null},{\"weekType\":\"A\",\"weekDay\":\"FRIDAY\",\"time\":\"18:20\",\"period\":13,\"note\":\"\",\"classId\":null,\"subjectId\":null,\"customSubjectName\":null},{\"weekType\":\"A\",\"weekDay\":\"FRIDAY\",\"time\":\"19:10\",\"period\":14,\"note\":\"\",\"classId\":null,\"subjectId\":null,\"customSubjectName\":null}]}") const daysOrder = ["MONDAY", "TUESDAY", "WEDNESDAY", "THURSDAY", "FRIDAY"]; let matrix = daysOrder.map(day => fetchedData[day]); matrix = transpose(matrix) const [schedule, setSchedule] = useState(matrix) const handleMove = ( fromData: Period, toData: Period, fromRowIndex: number, fromCellIndex: number, toRowIndex: number, toCellIndex: number ) => { let newMatrix = [...schedule] const tempData = { subjectId: newMatrix[fromRowIndex][fromCellIndex].subjectId, classId: newMatrix[fromRowIndex][fromCellIndex].classId, customSubjectName: newMatrix[fromRowIndex][fromCellIndex].customSubjectName, note: newMatrix[fromRowIndex][fromCellIndex].note }; newMatrix[fromRowIndex][fromCellIndex].subjectId = newMatrix[toRowIndex][toCellIndex].subjectId; newMatrix[fromRowIndex][fromCellIndex].classId = newMatrix[toRowIndex][toCellIndex].classId; newMatrix[fromRowIndex][fromCellIndex].customSubjectName = newMatrix[toRowIndex][toCellIndex].customSubjectName; newMatrix[fromRowIndex][fromCellIndex].note = newMatrix[toRowIndex][toCellIndex].note; newMatrix[toRowIndex][toCellIndex].subjectId = tempData.subjectId; newMatrix[toRowIndex][toCellIndex].classId = tempData.classId; newMatrix[toRowIndex][toCellIndex].customSubjectName = tempData.customSubjectName; newMatrix[toRowIndex][toCellIndex].note = tempData.note; console.log(transpose([...newMatrix])); setSchedule(newMatrix) return newMatrix; }; return ( <DndProvider backend={HTML5Backend}> <table> <thead> <tr> {schedule[0].map((period: Period, index: number) => ( <th key={index}>{period.weekDay}</th> ))} </tr> </thead> <tbody> {schedule.map((row: Period[], rowIndex: number) => ( <tr key={rowIndex}> {row.map((cellData: Period, cellIndex: number) => ( <DraggableCell key={cellData.weekDay + rowIndex + cellIndex} data={cellData} onMove={handleMove} rowIndex={rowIndex} cellIndex={cellIndex} /> ))} </tr> ))} </tbody> </table> </DndProvider> ); }; export default Table