无法将方框拖到周历中的特定时间段

Question

我可以拖放盒子，但是它会首先在任何空的时间段上放下，而不是拖放到实际的时间段，例如，如果我将盒子拖到第 26 个 t1 到第 27 个 t2，那么它会将盒子拖到 t1 第 27 个而不是 t2，现在让我们说我下降到第 29 个 t6，它将下降到第 29 个 t3，因为 t1 和 t2 已满，t3 为空，因此不会下降到正确的时间段，而是下降到任何时间段（如果该日期首先为空），一旦我再次加载网站，所有拖动框我都会下降移动后又回到之前的状态。我使用的数据也只是订单号，所以它可以是任何诸如 190、182 等以及拖动框中的郊区名称 这也是一个新功能，所以如果我需要时间段或其他东西，我在数据库中没有与日历相关的任何内容？我只有包含所有数据的 orderData 表

import React, { useState, useRef } from "react";
import { startOfWeek, endOfWeek, format, addDays, subDays, set } from "date-fns";
import "../assets/css/RunSheetPDF.css";

const DraggableBox = ({
day,
name: initialName,
suburb: initialSuburb,
calendarData,
setCalendarData,
changeName,
setChangeName,
changeSuburb,
setChangeSuburb,
setChangeDay,
setChangeData,
orderData,
setOrderData,
timeSlotIndex // Add the time slot index as a prop
}) => {
const [showTooltip, setShowTooltip] = useState(false);
const boxRef = useRef(null);

const filteredOrders = orderData.order.filter((order) => {
  const orderDate = new Date(order.RequiredDateAndTime).getDate();
  return orderDate === 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();
};




  
console.log("Filtered Orders:", filteredOrders);

return (
<div
className="drag-box"
ref={boxRef}
draggable
onDragStart={handleDragStart}
onDragEnd={handleDragEnd}
onDragOver={handleDragOver}
onMouseEnter={() => setShowTooltip(true)}
onMouseLeave={() => setShowTooltip(false)}
style={{
width: "70px",
height: "80px",
textAlign: "center",
backgroundColor: "#F5F5F5",
color: "#333333",
marginTop: "5px",
position: "relative",
cursor: "move", // Set cursor to move when hovering over the box
}}
data-day={day} // Set the day as a dataset attribute
data-name={initialName} // Set the name as a dataset attribute
>
<div style={{ margin: 0, lineHeight: "40px" }}>
{/* Render order details based on time slot index */}
{filteredOrders[timeSlotIndex] && (
<div key={timeSlotIndex}>
{/* Render DelCity */}
<p style={{ margin: 0 }}>{filteredOrders[timeSlotIndex].Id}</p>
{/* Render DelPostalCode */}
<p style={{ margin: 0 }}>{filteredOrders[timeSlotIndex].DelCity}</p>
</div>
)}
</div>
</div>
);
};




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 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();
  
  // Parse the date and update the order data
  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');
  const currentMonth = e.target.getAttribute('data-month');
  console.log("Current Year:", currentYear);
  console.log("Current Month:", currentMonth);
  
  let day = Number(number);
  console.log("Day:", day);
  
  d.setDate(day);
  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, day, 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 = `t${timeSlotIndex + 1}`;
  console.log("Time Slot:", timeSlot);

  // Push the updated dragged item to the new position
  newOrderData.push({ ...changeData, timeSlot });
 
  // Update the order data state
  //orderData.order = newOrderData; // Update the order data
   setCalendarData(newOrderData);
//   setChangeData(newOrderData[timeSlotIndex]);
  
console.log("Updated order data:", 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);




//console.log("Calendar Data:", calendarData);
//console.log("formatDate Data:", formatDate);
//console.log("filteredOrders Data:", filteredOrders);
//console.log("dateStrings Data:", dateStrings);
//console.log("Order Data:", orderData);
 


const generateCalendar = (timeSlotIndex ) => {
  const startDate = startOfWeek(selectedDate, { weekStartsOn: 0 });
  const endDate = endOfWeek(selectedDate, { weekStartsOn: 0 });

  const rows = [];
  let day = startDate;

  while (day <= endDate) {
const formattedDate = formatDate(day);
    const dateObject = new Date(formattedDate);
const year = dateObject.getFullYear(); // Extract year (e.g., 2024)
const month = dateObject.getMonth() + 1;    
    console.log("Month:", month);
    console.log("Year:", year);
    const dayName = format(day, "EEEE");
    const dayOfMonth = format(day, "d");
console.log("dayofmonth", dayOfMonth);
  
console.log("format date",formattedDate);
    const isTargetDate = dateStrings.includes(formattedDate);

    const ordersForDay = orderData.order.filter(order => {
      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 = (
        <tr key={day}>
          <td className="calendar-cell">
            <div className="day-name">{dayName}</div>
            <div className="day-number">{dayOfMonth}</div>
      
          </td>
          {[...Array(10)].map((_, index) => (
            <td key={index} className={`grid-cell`} data-has-data={ordersForDay[index] ? "true" : "false"} >
              {/* Render DraggableBox only if there is an order for this column */}
              {ordersForDay[index] && (
                <DraggableBox
                  day={parseInt(dayOfMonth)}
                  initialName={ordersForDay[index].DelCity}
                  initialSuburb={ordersForDay[index].DelPostalCode}
                  calendarData={calendarData}
                  setCalendarData={setCalendarData}
                  changeName={changeName}
                  setOrderData={setOrderData} // Pass the setOrderData function
                  setChangeName={setChangeName}
                  changeDay={changeDay}
                  setChangeDay={setChangeDay}
                  changeSuburb={changeSuburb}
                  setChangeSuburb={setChangeSuburb}
                  setChangeData={setChangeData}
                  orderData={orderData}
                  timeSlotIndex={index} 
                />
              )}
              {!ordersForDay[index] && (
                <p
                  style={{
                    height: "90px",
                    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}
                  ></p>
                  )}
                </td>
              ))}
            </tr>
          );
      
          rows.push(row);
      
          day = addDays(day, 1);
        }
      
        return rows;
      };
      
      
      
      const handleNextWeek = () => {
      setSelectedDate(addDays(selectedDate, 7));
      };
      const handlePreviousWeek = () => {
        setSelectedDate(subDays(selectedDate, 7));
};
return (
<div style={{ width: "100%", display: "flex", flexDirection: "column", alignItems: "center", marginTop: "20px" }}>
<div style={{ display: "flex", alignItems: "center", justifyContent: "center", marginBottom: "0px" }}>
<h2 style={{ color: "#333333", margin: 0 }}>{format(startOfWeek(selectedDate), "MMMM d")} - {format(endOfWeek(selectedDate), "MMMM d, yyyy")}</h2>
</div>
<div className="calendar-container">
<table className="calendar-table">
<thead>
<tr>
<th>{/* Empty header cell for labels */}</th>

{[...Array(10)].map((_, index) => (
<th key={index}>t{index + 1}</th>
))}

</tr>
</thead>
<tbody>
{generateCalendar()}
</tbody>
</table>
</div>
</div>
);
};

export default RunSheetPreview;

Answer 1

以下是如何修改代码以确保盒子被投放到投放的特定时间段：

将时隙索引传递给

handleDrop

:

• 在

  DraggableBox

  组件中，不要使用

  index

  函数中的

  map

  ，而是将实际的

  timeSlotIndex

  属性传递给

  onDrop

  事件处理程序。

<p
  // ... other props
  onDrop={(e) => handleDrop(e, timeSlotIndex, parseInt(dayOfMonth), year, month)}
></p>

更新

handleDrop

功能：

• 更新

  handleDrop

  中的

  RunSheetPreview

  函数以使用接收到的

  timeSlotIndex

  而不是查找第一个可用插槽。

const handleDrop = (e, timeSlotIndex, dayOfMonth, year, month) => {
  // ... existing code
  changeData.OrderDate = newDate.toISOString();
  changeData.RequiredDateAndTime = newDate.toISOString();
  const timeSlot = `t${timeSlotIndex + 1}`; // Use received timeSlotIndex

  // ... rest of the code
}

通过这些更改，当您将盒子放入特定时间段时，

handleDrop

功能将使用提供的

timeSlotIndex

来更新订单数据，确保盒子放置在预期的时间段中。这应该为您的每周日历提供所需的拖放功能。