`下面更新的代码`无法拖动日历每周列中的框

问题描述 投票：0回答：1

UPDATED CODE BELOW

目前我有一个每周日历，其中 t1 到 t10 作为时间段，左侧显示日期和日期。我有一个拖动框，其中包含一些随机硬编码数据和硬编码天数，例如 5、25、27 等。

我的问题是：

  1. 当我尝试将可拖动框从 2024 年 25 日星期一 t2 拖放到 25 日星期一 t7 或任何其他日期或任何其他 tx 时，我无法移动它，所以有什么方法可以将框移动到任何一列或我想要的行？
  2. 目前默认显示 t2 的框，但默认情况下应该显示在 t1
  3. 我下面有这个代码

const dayStrings = FilteredOrders.map((listItem, index) => { const date = new Date(listItem.RequiredDateAndTime); const day = String(date.getDate()).padStart(2, "0"); 返回日； });

console.log("dayString", dayStrings); // 当前显示 31/08/2023

当前显示 31/08/2023，但将来可能会在我的数据库中包含更多日期，具体取决于输入数据的时间。所以我希望它使用这个日期并在 2023 年 8 月 31 日或将来任何其他日期显示可拖动框，例如可能有 2024 年 3 月 14 日，那么它也应该为该日期显示可拖动框而不是硬编码数据我目前有约会。

    import React, { useState, useRef } from "react";
    import { startOfWeek, endOfWeek, format, addDays, subDays, isSameMonth } from "date-fns";
    import "../assets/css/RunSheetPDF.css";
    
    const DraggableBox = ({ day, name: initialName, suburb: initialSuburb, calendarData, setCalendarData, 
      changeName, setChangeName, changeSuburb, setChangeSuburb, setChangeDay }) => {
    
      //eslint-disable-next-line
      const [editable, setEditable] = useState(false);
      const [name, setName] = useState(initialName);
      const [suburb, setSuburb] = useState(initialSuburb);
      const [showTooltip, setShowTooltip] = useState(false);
      const boxRef = useRef(null);
    
      const handleDoubleClick = () => {
        setEditable(true);
      };
    //eslint-disable-next-line
      const handleChangeName = (e) => {
        setName(e.target.value);
      };
    //eslint-disable-next-line
      const handleChangeSuburb = (e) => {
        setSuburb(e.target.value);
      };
    //eslint-disable-next-line
      const handleBlur = () => {
        setEditable(false);
      };
    
      const handleDragStart = () => {
        setShowTooltip(false);
        setChangeName(initialName);
        setChangeSuburb(initialSuburb)
        setChangeDay(day)
        boxRef.current.classList.add('dragging');
      };
    
      const handleDragEnd = () => {
        boxRef.current.classList.remove('dragging');
      };
    
      const handleDragOver = (e) => {
        e.preventDefault();
      };
    
      const handleDrop = (e) => {
        e.preventDefault();
        e.stopPropagation();
        if(Number(changeDay) !== Number(e.target.innerText)){
          const newData = {
            day: Number(e.target.innerText),
            name: changeName,
            suburb: changeSuburb,
          }
          const newCalData = [...calendarData];
          const calData = newCalData.filter((f) => Number(f.day) !== Number(e.target.innerText) && Number(f.day) !== Number(changeDay) );
          calData.push(newData);
          calData.sort((a,b) => Number(a.day) - Number(b.day))
          setCalendarData(calData)
          setChangeDay(null);
          setChangeName(null);
          setChangeSuburb(null);
        }
      };
    
      return (
        <div
          className="drag-box"
          ref={boxRef}
          draggable
          onDragStart={handleDragStart}
          onDragEnd={handleDragEnd}
          onDoubleClick={handleDoubleClick}
          onDragOver={handleDragOver}
          onDrop={handleDrop}
          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
          }}
        >
          <p style={{ margin: 0, lineHeight: "80px" }}>{day}</p>
          {showTooltip && (
            <div className="tooltip">
              <p>Name: {initialName}</p>
              <p>Suburb: {initialSuburb}</p>
            </div>
          )}
        </div>   
      );
    };
    
    const RunSheetPreview = ({ selectedDate, orderData }) => {
    
      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}`;
      };
    
      let filteredOrders = [];
    
      if (selectedDate) {
        filteredOrders = orderData.order.filter(
          (order) =>
            order.RequiredDateAndTime.substring(0, 10) ===
            formatDate(selectedDate)
        );
      }
          
      const dateStrings = filteredOrders.map((listItem, index) => {
        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 dayStrings = filteredOrders.map((listItem, index) => {
        const date = new Date(listItem.RequiredDateAndTime);
        const day = String(date.getDate()).padStart(2, "0");
        return day;
      });         
    
      console.log("dayString", dayStrings); // curently this has in database only one date 31/08/2023 
      
      const [setSelectedDate] = useState(new Date());
      const [calendarData, setCalendarData] = useState([
        { day: 5, name: "John", suburb: "Suburb 1" },
        { day: 15, name: "Alice", suburb: "Suburb 2" },
        { day: 25, name: "Bob", suburb: "Suburb 3" },
        { day: 27, name: "Eva", suburb: "Suburb 4" }
      ]);
      const boxRef = useRef(null);
      const [changeName, setChangeName] = useState("");
      const [changeDay, setChangeDay] = useState(null);
      const [changeSuburb, setChangeSuburb] = useState(null);
    
      const handleDragStart = () => {
        setShowTooltip(false);
        setChangeName(initialName);
        setChangeSuburb(initialSuburb)
        setChangeDay(day)
        boxRef.current.classList.add('dragging');
      };
    
      const handleDragOver = (e) => {
        e.preventDefault();
      };
    
      const handleDrop = (e) => {
        e.preventDefault();
        e.stopPropagation();
        if(Number(changeDay) !== Number(e.target.innerText)){
          const newData = {
            day: Number(e.target.innerText),
            name: changeName,
            suburb: changeSuburb,
          }
          const newCalData = [...calendarData];
          const calData = newCalData.filter((f) => Number(f.day) !== Number(e.target.innerText) && Number(f.day) !== Number(changeDay) );
          calData.push(newData);
          calData.sort((a,b) => Number(a.day) - Number(b.day))
          setCalendarData(calData)
          setChangeDay(null);
          setChangeName(null);
          setChangeSuburb(null);
        }
      };
    
      const generateCalendar = () => {
      const startDate = startOfWeek(selectedDate, { weekStartsOn: 0 });
      const endDate = endOfWeek(selectedDate, { weekStartsOn: 0 });
    
      const rows = [];
    
      let day = startDate;
      while (day <= endDate) {
        const dayName = format(day, 'EEEE'); // Get the full day name (e.g., "Sunday")
        const dayOfMonth = format(day, "d");
        const dayOfWeek = format(day, "i"); // Get the day of the week index (0 for Sunday, 1 for Monday, etc.)
        const draggableBoxDay = calendarData.find(item => item.day === parseInt(dayOfMonth)); // Find draggable box data for the current day
    
        const row = (
          <tr key={day}>
            <td className="calendar-cell">
              <div className="day-name">{dayName}</div>
              <div className="day-number">{dayOfMonth}</div>
            </td>
            {/* Render the draggable box in the appropriate column */}
            {[...Array(10)].map((_, index) => (
              <td key={index} className={`grid-cell ${index === parseInt(dayOfWeek) ? 'active-day' : ''}`}>
                {draggableBoxDay && index === 1 ? ( // Check if draggable box data exists and the current column is t1
                  <DraggableBox
                    day={draggableBoxDay.day}
                    name={draggableBoxDay.name}
                    suburb={draggableBoxDay.suburb}
                    calendarData={calendarData}
                    setCalendarData={setCalendarData}
                    changeName={changeName}
                    setChangeName={setChangeName}
                    changeSuburb={changeSuburb}
                    setChangeSuburb={setChangeSuburb}
                    setChangeDay={setChangeDay}
                  />
                ) : null}
              </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></th> {/* Empty header cell for labels */}
          <th>t1</th>
          <th>t2</th>
          <th>t3</th>
          <th>t4</th>
          <th>t5</th>
          <th>t6</th>
          <th>t7</th>
          <th>t8</th>
          <th>t9</th>
          <th>t10</th>
        </tr>
      </thead>
      <tbody>
        {generateCalendar()}
      </tbody>
    </table>
    
          </div>
        </div>
      );
    };
    
    export default RunSheetPreview;

更新代码：

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

const DraggableBox = ({ day, name: initialName, suburb: initialSuburb, calendarData, setCalendarData, 
  changeName, setChangeName, changeSuburb, setChangeSuburb, setChangeDay }) => {


  const [editable, setEditable] = useState(false);
  const [name, setName] = useState(initialName);
  const [suburb, setSuburb] = useState(initialSuburb);
  const [showTooltip, setShowTooltip] = useState(false);
  const boxRef = useRef(null);

  const handleDoubleClick = () => {
    setEditable(true);
  };

  const handleDragStart = () => {
    setShowTooltip(false);
    setChangeName(initialName);
    setChangeSuburb(initialSuburb)
    setChangeDay(day)
  boxRef.current.classList.add('dragging');
  };

  const handleDragEnd = () => {
    boxRef.current.classList.remove('dragging');
  };

  const handleDragOver = (e) => {
    e.preventDefault();
  };

  const handleDrop = (e) => {
    e.preventDefault();
    e.stopPropagation();
    const newDay = e.target.dataset.day; // Get the day from the dataset attribute

    const newData = {
      day: newDay,
      name: changeName,
      suburb: changeSuburb,
    };
 const newCalData = [...calendarData];
    const calData = newCalData.filter((f) => f.day !== newData.day); // Remove existing data for the dropped day
    calData.push(newData);
    calData.sort((a, b) => Number(a.day) - Number(b.day));
    setCalendarData(calData);
    setChangeDay(null);
    setChangeName(null);
    setChangeSuburb(null);
  };

  return (
    <div
      className="drag-box"
      ref={boxRef}
      draggable
      onDragStart={handleDragStart}
      onDragEnd={handleDragEnd}
      onDoubleClick={handleDoubleClick}
      onDragOver={handleDragOver}
      onDrop={handleDrop}
      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
    >
      <p style={{ margin: 0, lineHeight: "80px" }}>{day}</p>
      {showTooltip && (
        <div className="tooltip">
          <p>Name: {initialName}</p>
          <p>Suburb: {initialSuburb}</p>
        </div>
      )}
    </div>   
  );
};

const RunSheetPreview = ({ selectedDate, orderData, initialName, initialSuburb, day, setShowTooltip }) => {
console.log("Order Data:", orderData);
  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}`;
  };

  let filteredOrders = [];

  if (selectedDate) {
    filteredOrders = orderData.order.filter(
      (order) =>
        order.RequiredDateAndTime.substring(0, 10) ===
        formatDate(selectedDate)
    );
  }
  const dateStrings = filteredOrders.map((listItem, index) => {
    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 dayStrings = filteredOrders.map((listItem, index) => {
    const date = new Date(listItem.RequiredDateAndTime);
    const day = String(date.getDate()).padStart(2, "0");
    return day;
  });
    

  //const dayStrings = ["31"];

  const [setSelectedDate] = useState(new Date());
  
  const [calendarData, setCalendarData] = useState([
    { day: 31 }
 ]);
console.log("Calendar Data:", calendarData);
console.log("formatDate Data:", formatDate);
  console.log("filteredOrders Data:", filteredOrders);
  console.log("dayStrings Data:", dayStrings);
  console.log("dateStrings Data:", dateStrings);
  console.log("Order Data:", orderData);  


  const boxRef = useRef(null);
  const [changeName, setChangeName] = useState("");
  const [changeDay, setChangeDay] = useState(null);
  const [changeSuburb, setChangeSuburb] = useState(null);
  

  const handleDragStart = () => {
    setShowTooltip(false);
    setChangeName(initialName);
    setChangeSuburb(initialSuburb)
    setChangeDay(day)
    boxRef.current.classList.add('dragging');
  };

  const handleDragOver = (e) => {
    e.preventDefault();
  };
  
 // Inside generateCalendar function
const generateCalendar = () => {
  const startDate = startOfWeek(selectedDate, { weekStartsOn: 0 });
  const endDate = endOfWeek(selectedDate, { weekStartsOn: 0 });

  const rows = [];

  let day = startDate;
  while (day <= endDate) {
  const dayName = format(day, 'EEEE');
    const dayOfMonth = format(day, "d");
    const dayOfWeek = format(day, "i");

    const draggableData = calendarData.find(item => item.day === parseInt(dayOfMonth));
    const draggableBoxExists = draggableData !== undefined;
    const formattedDate = format(day, "yyyy-MM-dd");
    console.log("Formatted Date:", formattedDate);
    
    console.log("Contents of dateStrings:", dateStrings);    
    // Check if the current date is included in the dateStrings array
     const isTargetDate = dateStrings.includes(format(selectedDate, "yyyy-MM-dd"));
    console.log("selected Date:", format(selectedDate, "yyyy-MM-dd"));
            console.log("isTargetDate:", isTargetDate);
    
    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 ${index === parseInt(dayOfWeek) ? 'active-day' : ''}`}>

            {isTargetDate && (
              <div>
                {console.log("Index value:", index)}
                {draggableBoxExists && (
                  <DraggableBox
                    day={parseInt(dayOfMonth)}
                    calendarData={calendarData}
                    setCalendarData={setCalendarData}
                    changeName={changeName}
                    setChangeName={setChangeName}
                    changeSuburb={changeSuburb}
                    setChangeSuburb={setChangeSuburb}
                    setChangeDay={setChangeDay}
                  />
                )}
              </div>
            )}
 </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></th> {/* Empty header cell for labels */}
                      <th>t1</th>
                      <th>t2</th>
                      <th>t3</th>
                      <th>t4</th>
                      <th>t5</th>
                      <th>t6</th>
  <th>t7</th>
                      <th>t8</th>
                      <th>t9</th>
                      <th>t10</th>
                    </tr>
                  </thead>
                  <tbody>
                    {generateCalendar()}
                  </tbody>
                </table>
              </div>
            </div>
          );
        };

        export default RunSheetPreview;

为了解决我的问题 3，我没有使用硬编码的日期（例如 5），而是在更新的代码中使用数据库中的内容

 // code 1:  
 const [calendarData, setCalendarData] = useState([
    { day: 31 }
    
  ]);

// code 2:
const [calendarData, setCalendarData] = useState(
    dayStrings.map((day) => {
      const parsedDay = parseInt(day);
      console.log("Parsed Day:", parsedDay); //returns 31

      return {
        day: parsedDay,
       };
    })
  );

当我使用代码 1 时，我可以看到 2023 年 8 月 31 日的拖动框，就像数据库中的那样，但仅当我分配 31 硬编码值时才有效，但是在代码 2 中，我所做的与使用 parseDay 作为日期值相同，它返回 31 但是这个即使第 1 天和第 2 天的值相同，也不显示拖动框。任何帮助表示赞赏。另外，我意识到，如果我在日历上选择的日期与 requiredDateAndTime 中的日期匹配，则它只能在 dayString 中获取日期，但是我想将拖动框放在 orderData 在 requiredDateAndTime 中的所有日期上，该日期在下面提供的数据中是多个

下面所有 console.log 值

Order Data: {order: Array(26), loading: false, error: null}error: nullloading: falseorder: Array(26)0: {Id: 138, CustomerID: 162, OrderOf: 1, OrderDate: '2023-08-08T00:00:00.000Z', purchaseOrderNumber: null, …}1: {Id: 139, CustomerID: 158, OrderOf: 1, OrderDate: '2023-08-10T00:00:00.000Z', purchaseOrderNumber: null, …}2: {Id: 140, CustomerID: 164, OrderOf: 1, OrderDate: '2023-08-10T00:00:00.000Z', purchaseOrderNumber: null, …}3: {Id: 141, CustomerID: 164, OrderOf: 1, OrderDate: '2023-08-26T00:00:00.000Z', purchaseOrderNumber: null, …}4: {Id: 142, CustomerID: 171, OrderOf: 1, OrderDate: '2023-08-31T00:00:00.000Z', purchaseOrderNumber: null, …}5: {Id: 143, CustomerID: 172, OrderOf: 1, OrderDate: '2023-08-22T00:00:00.000Z', purchaseOrderNumber: null, …}6: {Id: 144, CustomerID: 167, OrderOf: 1, OrderDate: '2023-08-10T00:00:00.000Z', purchaseOrderNumber: null, …}7: {Id: 145, CustomerID: 171, OrderOf: 1, OrderDate: '2023-08-11T00:00:00.000Z', purchaseOrderNumber: null, …}8: {Id: 146, CustomerID: 160, OrderOf: 1, OrderDate: '2023-08-11T00:00:00.000Z', purchaseOrderNumber: null, …}9: {Id: 147, CustomerID: 158, OrderOf: 1, OrderDate: '2023-08-09T00:00:00.000Z', purchaseOrderNumber: null, …}10: {Id: 148, CustomerID: 157, OrderOf: 1, OrderDate: '2023-08-21T00:00:00.000Z', purchaseOrderNumber: null, …}11: {Id: 149, CustomerID: 162, OrderOf: 1, OrderDate: '2023-08-08T00:00:00.000Z', purchaseOrderNumber: null, …}12: {Id: 150, CustomerID: 162, OrderOf: 1, OrderDate: '2023-08-08T00:00:00.000Z', purchaseOrderNumber: null, …}13: {Id: 159, CustomerID: 158, OrderOf: 1, OrderDate: '2023-05-09T00:00:00.000Z', purchaseOrderNumber: null, …}14: {Id: 161, CustomerID: 157, OrderOf: 1, OrderDate: '2023-08-01T00:00:00.000Z', purchaseOrderNumber: null, …}15: {Id: 163, CustomerID: 157, OrderOf: 1, OrderDate: '2023-08-03T00:00:00.000Z', purchaseOrderNumber: null, …}16: {Id: 164, CustomerID: 157, OrderOf: 1, OrderDate: '2023-08-01T00:00:00.000Z', purchaseOrderNumber: null, …}17: {Id: 165, CustomerID: 2, OrderOf: 1, OrderDate: '2023-01-08T00:00:00.000Z', purchaseOrderNumber: null, …}18: {Id: 166, CustomerID: 177, OrderOf: 1, OrderDate: '2023-01-08T00:00:00.000Z', purchaseOrderNumber: null, …}19: {Id: 167, CustomerID: 156, OrderOf: 1, OrderDate: '2023-08-02T00:00:00.000Z', purchaseOrderNumber: null, …}20: {Id: 168, CustomerID: 166, OrderOf: 1, OrderDate: '2023-08-03T00:00:00.000Z', purchaseOrderNumber: null, …}21: {Id: 169, CustomerID: 207, OrderOf: 1, OrderDate: '2023-08-03T00:00:00.000Z', purchaseOrderNumber: null, …}22: {Id: 170, CustomerID: 175, OrderOf: 1, OrderDate: '2023-08-01T00:00:00.000Z', purchaseOrderNumber: null, …}23: {Id: 171, CustomerID: 177, OrderOf: 1, OrderDate: '2023-08-05T00:00:00.000Z', purchaseOrderNumber: null, …}24: {Id: 172, CustomerID: 159, OrderOf: 1, OrderDate: '2023-08-01T00:00:00.000Z', purchaseOrderNumber: null, …}25: {Id: 182, CustomerID: 163, OrderOf: 1, OrderDate: '2023-10-02T00:00:00.000Z', purchaseOrderNumber: null, …}length: 26[[Prototype]]: Array(0)[[Prototype]]: Object
runsheetpreview.js:132 Parsed Day: 31
runsheetpreview.js:139 Calendar Data: []
runsheetpreview.js:140 formatDate Data: ƒ (e){var t=new Date(e),n=t.getFullYear(),r=String(t.getMonth()+1).padStart(2,"0"),o=String(t.getDate()).padStart(2,"0");return"".concat(n,"-").concat(r,"-").concat(o)}
runsheetpreview.js:141 filteredOrders Data: [{…}]
runsheetpreview.js:142 dayStrings Data: ['31']
runsheetpreview.js:143 dateStrings Data: ['2023-08-31']
runsheetpreview.js:144 Order Data: {order: Array(26), loading: false, error: null}
runsheetpreview.js:184 Formatted Date: 2023-08-27
runsheetpreview.js:186 Contents of dateStrings: ['2023-08-31']
runsheetpreview.js:189 selected Date: 2023-08-31
runsheetpreview.js:190 isTargetDate: true
javascript reactjs calendar drag-and-drop draggable
1个回答
0
投票

代码如聊天室中所述。

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

const DraggableBox = ({
  day,
  initialName,
  initialSuburb,
  setChangeData,
  orderData,
  timeSlotIndex, // Add the time slot index as a prop
}) => {
  const [showTooltip, setShowTooltip] = useState(false);
  const boxRef = useRef(null);

  const handleDragStart = (e) => {
    setShowTooltip(false);
    setChangeData(filteredOrders[timeSlotIndex]);
    boxRef.current.classList.add("dragging");
  };

  const handleDragEnd = () => {
    boxRef.current.classList.remove("dragging");
  };

  const filteredOrders = orderData.order.filter((order) => {
    const orderDate = new Date(order.RequiredDateAndTime).getDate();
    return orderDate === parseInt(day);
  });

  return (
    <div
      className="drag-box"
      ref={boxRef}
      draggable
      onDragStart={handleDragStart}
      onDragEnd={handleDragEnd}
      onMouseEnter={() => setShowTooltip(true)}
      onMouseLeave={() => setShowTooltip(false)}
      style={{
        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" }}>
        {filteredOrders[timeSlotIndex] && (
          <div key={timeSlotIndex}>
            <p style={{ margin: 0 }} className="el">
              {filteredOrders[timeSlotIndex].DelCity}
            </p>
            <p style={{ margin: 0 }}>
              {filteredOrders[timeSlotIndex].DelPostalCode}
            </p>
          </div>
        )}
      </div>

      {showTooltip && (
        <div className="tooltip">
          <p style={{ margin: 0 }}>{initialName}</p>
          <p style={{ margin: 0 }}>{initialSuburb}</p>
        </div>
      )}
    </div>
  );
};

const RunSheetPreview = ({ selectedDate = "2023-08-27", orderData }) => {
  const boxRef = useRef(null);
  const [changeData, setChangeData] = useState(null);
  const [selectedDateState, setSelectedDateState] = 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 formatDate1 = (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 initialCalendarData = orderData.order.map((order) => ({
    day: 31, // Assuming day 31 is default for all orders, you can change this if needed
    date: order.RequiredDateAndTime,
    name: order.DelCity,
    suburb: order.DelPostalCode,
  }));

  // console.log(initialCalendarData);

  const [calendarData, setCalendarData] = useState(initialCalendarData);

  let filteredOrders = [];

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

  while (startDate <= endDate) {
    let fO = [];
    fO = orderData.order.filter(myF);
    startDate = addDays(startDate, 1);
  }
  function myF(order) {
    if (order.RequiredDateAndTime.substring(0, 10) === formatDate(startDate)) {
      filteredOrders.push(order);
    }
  }

  const dateStrings = filteredOrders.map((listItem, index) => {
    const date = new Date(listItem.RequiredDateAndTime);
    const day = String(date.getDate()).padStart(2, "0");
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, "0");
    return `${year}-${month}-${day}`;
  });

  const dayStrings = filteredOrders.map((listItem, index) => {
    const date = new Date(listItem.RequiredDateAndTime);
    const day = String(date.getDate()).padStart(2, "0");
    return day;
  });

  // dayStrings.map((day) => {
  //   const parsedDay = parseInt(day);
  //   console.log("Parsed Day:", parsedDay); //returns 31
  // });

  // console.log("Calendar Data:", calendarData);
  // console.log("formatDate Data:", formatDate);
  // console.log("filteredOrders Data:", filteredOrders);
  // console.log("dayStrings Data:", dayStrings);
  // console.log("dateStrings Data:", dateStrings);
  // console.log("Order Data:", orderData);
  const generateCalendar = () => {
    const startDate = startOfWeek(selectedDate, { weekStartsOn: 0 });
    const endDate = endOfWeek(selectedDate, { weekStartsOn: 0 });

    const rows = [];
    let day = startDate;

    while (day <= endDate) {
      const cellDate = formatDate1(day);
      const dayName = format(day, "EEEE");
      const dayOfMonth = format(day, "d");

      const formattedDate = formatDate(day);

      const isTargetDate = dateStrings.includes(formattedDate);

      const ordersForDay = filteredOrders.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 handleDragOver = (e) => {
        e.preventDefault();
      };

      const handleDrop = (e) => {
        e.preventDefault();
        e.stopPropagation();

        let d = { ...changeData };
        d = new Date(d.OrderDate);

        const number = e.target.tabIndex.toString();

        let year = Number(number.substring(0, 4));

        let month = number.substring(4).substring(0, 2);
        month =
          Number(month.substring(0, 1)) === 0
            ? Number(month.substring(1)) - 1
            : Number(month) - 1;

        let day = number.substring(6);
        day =
          Number(day.substring(0, 1)) === 0
            ? Number(day.substring(1))
            : Number(day);

        d.setDate(day);
        d.setMonth(month);
        d.setFullYear(year);
        d = d.toISOString();

        let fi = { ...changeData };
        fi.OrderDate = d;
        fi.RequiredDateAndTime = d;

        let newOrderData = orderData.order.filter(myFilter);
        function myFilter(item) {
          if (item === changeData) {
            return;
          }
          return item;
        }
        newOrderData.push(fi);
        // console.log(orderData.order);
        orderData.order = newOrderData;
        // console.log(orderData.order);
      };

      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}
                  setChangeData={setChangeData}
                  orderData={orderData}
                  timeSlotIndex={index} // Pass the index of the time slot
                />
              ) : (
                <p
                  style={{
                    height: "90px",
                    display: "flex",
                    alignItems: "center",
                    justifyContent: "center",
                  }}
                  onDragOver={handleDragOver}
                  onDrop={handleDrop}
                  tabIndex={cellDate}
                ></p>
              )}
            </td>
          ))}
        </tr>
      );

      rows.push(row);

      day = addDays(day, 1);
    }

    return rows;
  };

  const handleNextWeek = () => {
    setSelectedDateState(addDays(selectedDate, 7));
  };
  const handlePreviousWeek = () => {
    setSelectedDateState(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></th> {/* Empty header cell for labels */}
              {[...Array(10)].map((_, index) => (
                <th key={index}>t{index + 1}</th>
              ))}
            </tr>
          </thead>
          <tbody>{generateCalendar()}</tbody>
        </table>
      </div>
    </div>
  );
};

export default RunSheetPreview;
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.