Мобильная версия[img]https://i.stack. imgur.com/3jLij.png[/img]
Когда я перетаскиваю эти перетаскиваемые поля с одной даты на другую, например, если я перетаскиваю Мороку со вторника 9-го на воскресенье 7-го в столбце 8, он удалит его в 1-й столбец. То же самое происходит и с другими перетаскиваемыми ящиками; если я перенесу их с 9-го места в 1-м столбце на 10-е место в 6-м столбце, они все равно окажутся в столбце 1.
Я ожидаю, что перетаскивание будет перенесено в столбец, где я отпустите его. Поэтому, если я помещу его в столбец 5, он должен остаться в столбце 5. Однако в настоящее время все помещается в столбец 1. Есть ли способ это исправить?
Я попробовал распечатать в моем console.log, когда поле перетаскивания опущено, и кажется, что он определяет правильный столбец и правильно печатает дату и временной интервал. Однако оно по-прежнему не попадает в правильный столбец
import React, { useState, useRef } from "react";
import { startOfWeek, endOfWeek, format, addDays, subDays, set } from "date-fns";
import axios from 'axios';
import { fetchCustomers } from '../../api/customer';
const DraggableBox = ({
day,
name: initialName,
suburb: initialSuburb,
calendarData,
setCalendarData,
changeName,
setChangeName,
changeSuburb,
setChangeSuburb,
setChangeDay,
setChangeData,
orderData,
setOrderData,
timeSlotIndex,
}) => {
const [showTooltip, setShowTooltip] = useState(false);
const boxRef = useRef(null);
const filteredOrders = orderData.order.filter(
(order) => new Date(order.RequiredDateAndTime).getDate() === parseInt(day)
);
const handleDragStart = (e) => {
setShowTooltip(false);
setChangeData(filteredOrders[timeSlotIndex]);
boxRef.current.classList.add("dragging");
};
const handleDragEnd = () => {
boxRef.current.classList.remove("dragging");
};
const handleDragOver = (e) => {
e.preventDefault();
};
return (
className="drag-box"
ref={boxRef}
draggable
onDragStart={handleDragStart}
onDragEnd={handleDragEnd}
onDragOver={handleDragOver}
onMouseEnter={() => setShowTooltip(true)}
onMouseLeave={() => setShowTooltip(false)}
style={{
width: "70px",
height: "70px",
textAlign: "center",
backgroundColor: "#F5F5F5",
color: "#333333",
marginTop: "0px",
position: "relative",
cursor: "move",
fontSize: "10px",
}}
data-day={day}
data-name={initialName}
>
{filteredOrders[timeSlotIndex] && (
{filteredOrders[timeSlotIndex].DelCity}
)}
);
};
const RunSheetPreview = ({
orderData,
setOrderData,
selectedDate,
initialName,
initialSuburb,
setShowTooltip,
}) => {
const boxRef = useRef(null);
const [changeName, setChangeName] = useState("");
const [changeDay, setChangeDay] = useState(null);
const [changeData, setChangeData] = useState(null);
const [changeSuburb, setChangeSuburb] = useState(null);
const [selectedDateState, setSelectedDate] = useState(new Date());
const handleNextWeek = () => {
setSelectedDate(addDays(selectedDateState, 7));
};
const handlePreviousWeek = () => {
setSelectedDate(subDays(selectedDateState, 7));
};
const formatDate = (date) => {
const dateVal = new Date(date);
const year = dateVal.getFullYear();
const month = String(dateVal.getMonth() + 1).padStart(2, "0");
const day = String(dateVal.getDate()).padStart(2, "0");
return `${year}-${month}-${day}`;
};
const handleDragOver = (e) => {
e.preventDefault();
};
const handleDrop = (e, timeSlotIndex, dayOfMonth, year, month) => {
e.preventDefault();
e.stopPropagation();
let d = { ...changeData };
d = new Date(d.OrderDate);
const number = e.target.tabIndex.toString();
console.log("Number:", number);
const currentYear = e.target.getAttribute('data-year');
let currentMonth = e.target.getAttribute('data-month');
// Log the day, month, and year
console.log("Day:", dayOfMonth);
// Format the month with leading zero if it's a single digit
currentMonth = currentMonth.padStart(2, "0");
console.log("Month:", currentMonth);
console.log("Year:", currentYear);
// Format the day with leading zero
const formattedDay = dayOfMonth.toString().padStart(2, "0");
const formattedDate = `${currentYear}-${currentMonth}-${formattedDay}`;
console.log("Formatted Date:", formattedDate);
d.setDate(dayOfMonth);
d.setMonth(currentMonth);
d.setFullYear(currentYear);
d = d.toISOString();
let fi = { ...changeData };
fi.OrderDate = d;
fi.RequiredDateAndTime = d;
let newDate = new Date(changeData.OrderDate);
newDate = new Date(currentYear, currentMonth, dayOfMonth, newDate.getHours(), newDate.getMinutes(), newDate.getSeconds());
// Update the order data
let newOrderData = orderData.order.filter(item => item !== changeData);
// Update the order date for the dragged item to its new position
changeData.OrderDate = newDate.toISOString();
changeData.RequiredDateAndTime = newDate.toISOString();
const timeSlot = `${timeSlotIndex + 1}`;
console.log("Updated changeData:", changeData); // Log the updated changeData
console.log("Time Slot:", timeSlot);
// Push the updated dragged item to the new position
newOrderData.push({ ...changeData, timeSlot });
console.log("Updated newOrderData:", newOrderData);
setCalendarData(newOrderData);
};
// Remove the filter based on selectedDate
const dateStrings = orderData.order.map((listItem) => {
const date = new Date(listItem.RequiredDateAndTime);
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, "0");
const day = String(date.getDate()).padStart(2, "0");
return `${year}-${month}-${day}`;
});
const initialCalendarData = orderData.order.map((order, index) => {
const name = order.DelCity;
const suburb = order.DelPostalCode;
return {
day: dateStrings[index], // Use dateStrings array here
name,
suburb,
initialName: name, // Assign the value to initialName
initialSuburb: suburb, // Assign the value to initialSuburb
};
});
const [calendarData, setCalendarData] = useState(initialCalendarData);
const generateCalendar = () => {
const startDate = startOfWeek(selectedDateState, { weekStartsOn: 0 });
const endDate = endOfWeek(selectedDateState, { weekStartsOn: 0 });
const rows = [];
let day = startDate;
while (day {
const orderDate = new Date(order.RequiredDateAndTime).getDate();
return orderDate === parseInt(dayOfMonth);
});
// Find the first available time slot for the current day
const firstAvailableSlot = ordersForDay.findIndex(
(order) => !order.isAssigned
);
const row = (
{dayName}
{dayOfMonth}
{[...Array(15)].map((_, index) => (
{/* Render DraggableBox only if there is an order for this column */}
{ordersForDay[index] && (
)}
{!ordersForDay[index] && (
style={{
height: "40px",
width: "60px",
display: "flex",
alignItems: "center",
justifyContent: "center",
}}
onDragOver={handleDragOver}
onDrop={(e) =>
handleDrop(
e,
index,
parseInt(dayOfMonth),
year,
month
)
}
tabIndex={dayOfMonth}
data-year={year}
data-month={month}
>
)}
))}
);
rows.push(row);
day = addDays(day, 1);
}
return rows;
};
return (
Delivery Schedule : {format(startOfWeek(selectedDateState), "MMMM d")} -{" "}
{format(endOfWeek(selectedDateState), "MMMM d, yyyy")}
{/* Button for moving to the previous week */}
< Previous Week
{/* Button for moving to the next week */}
Next Week >
{/* Empty header cell for labels */}
{[...Array(15)].map((_, index) => (
{index + 1}
))}
{generateCalendar()}
);
};
export default RunSheetPreview;
Подробнее здесь: https://stackoverflow.com/questions/783 ... ct-columns
