akfatimeline 1.0.6 → 1.2.0

package/src/components/Timeline/TimelineEvents.js

@@ -1,114 +1,114 @@
-// src/components/Timeline/TimelineEvents.js
-import React from "react";
-import { isDateInRange, parseDate } from "../../utils/dateUtils";
-
-const TimelineEvents = ({ date, events, resourceId, onDelete }) => {
-  // Gelen tüm props'ları kontrol et
-  console.log("TimelineEvents Props:", { date, events, resourceId, onDelete });
-
-  const dateToCompare = date?.fullDate;
-
-  if (!dateToCompare) {
-    console.error("Hata: date.fullDate değeri tanımlı değil.");
-    return null;
-  }
-
-  if (!Array.isArray(events)) {
-    console.error("Hata: events bir dizi değil.", events);
-    return null;
-  }
-
-  if (!resourceId) {
-    console.error("Hata: resourceId değeri tanımlı değil.");
-    return null;
-  }
-
-  // Event'leri filtrele: Tarih aralığı ve resource eşleşmesi ile
-  const filteredEvents = events.filter((event) => {
-    const isMatch =
-      event.resourceId === resourceId &&
-      isDateInRange(dateToCompare, event.startDate, event.endDate);
-    console.log(
-      "Event Filtering:",
-      {
-        event,
-        dateToCompare,
-        isMatch,
-        resourceId,
-        startDate: event.startDate,
-        endDate: event.endDate,
-      }
-    );
-    return isMatch;
-  });
-
-  console.log("Filtered Events for Resource:", { resourceId, filteredEvents });
-
-  return (
-    <div style={{ position: "relative", height: "100%", width: "100%" }}>
-      {filteredEvents.map((event) => {
-        const eventStartDate = parseDate(event.startDate);
-        const eventEndDate = parseDate(event.endDate);
-
-        if (!eventStartDate || !eventEndDate) {
-          console.error("Hata: Etkinlik başlangıç veya bitiş tarihi hatalı.", {
-            event,
-          });
-          return null;
-        }
-
-        const durationInDays = Math.floor(
-          (eventEndDate - eventStartDate) / (24 * 60 * 60 * 1000) + 1
-        );
-
-        return (
-          <div
-            key={event.id}
-            onClick={(e) => {
-              e.stopPropagation(); // Sürükleme işlemini engelle
-              if (window.confirm(`\"${event.title}\" etkinliğini silmek istiyor musun?`)) {
-                onDelete(event.id);
-              }
-            }}
-            style={{
-              position: "absolute",
-              top: "5px", // Üstten biraz boşluk
-              left: "5px", // Soldan biraz boşluk
-              width: `calc(${durationInDays * 100}% - 10px)`, // Sağdan ve soldan 5px boşluk için 10px çıkarıldı
-              height: `calc(100% - 10px)`, // Alttan ve üstten 5px boşluk için 10px çıkarıldı
-              backgroundColor: event.color,
-              color: "#fff",
-              fontSize: "14px",
-              padding: "5px 10px",
-              borderRadius: "6px",
-              textAlign: "left",
-              display: "flex",
-              alignItems: "center",
-              boxSizing: "border-box",
-              zIndex: 10,
-              overflow: "hidden",
-              textOverflow: "ellipsis",
-              whiteSpace: "nowrap",
-              border: "1px solid #fff",
-              cursor: "pointer",
-              boxShadow: "0 2px 6px rgba(0, 0, 0, 0.15)",
-              transition: "transform 0.2s ease, box-shadow 0.2s ease",
-            }}
-            onMouseOver={(e) => {
-              e.currentTarget.style.transform = "scale(1.02)";
-              e.currentTarget.style.boxShadow = "0 4px 12px rgba(0, 0, 0, 0.3)";
-            }}
-            onMouseOut={(e) => {
-              e.currentTarget.style.transform = "scale(1)";
-              e.currentTarget.style.boxShadow = "0 2px 6px rgba(0, 0, 0, 0.15)";
-            }}
-          >
-            {event.title}
-          </div>
-        );
-      })}
-    </div>
-  );
-};
-
-export default TimelineEvents;
+// src/components/Timeline/TimelineEvents.js
+import React from "react";
+import { isDateInRange, parseDate } from "../../utils/dateUtils";
+
+const TimelineEvents = ({ date, events, resourceId, onDelete }) => {
+  // Gelen tüm props'ları kontrol et
+  console.log("TimelineEvents Props:", { date, events, resourceId, onDelete });
+
+  const dateToCompare = date?.fullDate;
+
+  if (!dateToCompare) {
+    console.error("Hata: date.fullDate değeri tanımlı değil.");
+    return null;
+  }
+
+  if (!Array.isArray(events)) {
+    console.error("Hata: events bir dizi değil.", events);
+    return null;
+  }
+
+  if (!resourceId) {
+    console.error("Hata: resourceId değeri tanımlı değil.");
+    return null;
+  }
+
+  // Event'leri filtrele: Tarih aralığı ve resource eşleşmesi ile
+  const filteredEvents = events.filter((event) => {
+    const isMatch =
+      event.resourceId === resourceId &&
+      isDateInRange(dateToCompare, event.startDate, event.endDate);
+    console.log(
+      "Event Filtering:",
+      {
+        event,
+        dateToCompare,
+        isMatch,
+        resourceId,
+        startDate: event.startDate,
+        endDate: event.endDate,
+      }
+    );
+    return isMatch;
+  });
+
+  console.log("Filtered Events for Resource:", { resourceId, filteredEvents });
+
+  return (
+    <div style={{ position: "relative", height: "100%", width: "100%" }}>
+      {filteredEvents.map((event) => {
+        const eventStartDate = parseDate(event.startDate);
+        const eventEndDate = parseDate(event.endDate);
+
+        if (!eventStartDate || !eventEndDate) {
+          console.error("Hata: Etkinlik başlangıç veya bitiş tarihi hatalı.", {
+            event,
+          });
+          return null;
+        }
+
+        const durationInDays = Math.floor(
+          (eventEndDate - eventStartDate) / (24 * 60 * 60 * 1000) + 1
+        );
+
+        return (
+          <div
+            key={event.id}
+            onClick={(e) => {
+              e.stopPropagation(); // Sürükleme işlemini engelle
+              if (window.confirm(`\"${event.title}\" etkinliğini silmek istiyor musun?`)) {
+                onDelete(event.id);
+              }
+            }}
+            style={{
+              position: "absolute",
+              top: "5px", // Üstten biraz boşluk
+              left: "5px", // Soldan biraz boşluk
+              width: `calc(${durationInDays * 100}% - 10px)`, // Sağdan ve soldan 5px boşluk için 10px çıkarıldı
+              height: `calc(100% - 10px)`, // Alttan ve üstten 5px boşluk için 10px çıkarıldı
+              backgroundColor: event.color,
+              color: "#fff",
+              fontSize: "14px",
+              padding: "5px 10px",
+              borderRadius: "6px",
+              textAlign: "left",
+              display: "flex",
+              alignItems: "center",
+              boxSizing: "border-box",
+              zIndex: 10,
+              overflow: "hidden",
+              textOverflow: "ellipsis",
+              whiteSpace: "nowrap",
+              border: "1px solid #fff",
+              cursor: "pointer",
+              boxShadow: "0 2px 6px rgba(0, 0, 0, 0.15)",
+              transition: "transform 0.2s ease, box-shadow 0.2s ease",
+            }}
+            onMouseOver={(e) => {
+              e.currentTarget.style.transform = "scale(1.02)";
+              e.currentTarget.style.boxShadow = "0 4px 12px rgba(0, 0, 0, 0.3)";
+            }}
+            onMouseOut={(e) => {
+              e.currentTarget.style.transform = "scale(1)";
+              e.currentTarget.style.boxShadow = "0 2px 6px rgba(0, 0, 0, 0.15)";
+            }}
+          >
+            {event.title}
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+
+export default TimelineEvents;

package/src/components/Timeline/TimelineHeader.js

@@ -1,43 +1,54 @@
-import React from "react";
-import "./Timeline.css"; // CSS dosyasını import etmeyi unutma
-
-const TimelineHeader = ({ dates, monthHeaders }) => {
-  return (
-    <div className="timeline-header-container">
-      {/* Ay ve Yıl Başlıkları */}
-      <div className="timeline-header-month-row">
-        {monthHeaders.map((monthHeader, index) => (
-          <div
-            key={index}
-            className="timeline-header-month-cell"
-            style={{
-              flex: monthHeader.endIndex - monthHeader.startIndex + 1,
-              borderRight:
-                index < monthHeaders.length - 1 ? "1px solid var(--border-color)" : "none",
-            }}
-          >
-            {monthHeader.monthName} {monthHeader.year}
-          </div>
-        ))}
-      </div>
-
-      {/* Günlük Hücreler */}
-      <div className="timeline-header-day-row">
-        {dates.map((date, index) => (
-          <div
-            key={index}
-            className="timeline-header-day-cell"
-            style={{
-              flex: 1,
-              borderRight: index < dates.length - 1 ? "1px solid var(--border-color)" : "none",
-            }}
-          >
-            {date.display}
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-};
-
-export default TimelineHeader;
+import React from "react";
+import "./Timeline.css"; // CSS dosyasını import etmeyi unutma
+import { parseDate } from "../../utils/dateUtils";
+
+const TimelineHeader = ({ dates, monthHeaders, highlightWeekends = false }) => {
+  return (
+    <div className="timeline-header-container">
+      {/* Ay ve Yıl Başlıkları */}
+      <div className="timeline-header-month-row">
+        {monthHeaders.map((monthHeader, index) => (
+          <div
+            key={index}
+            className="timeline-header-month-cell"
+            style={{
+              flex: monthHeader.endIndex - monthHeader.startIndex + 1,
+              borderRight:
+                index < monthHeaders.length - 1 ? "1px solid var(--border-color)" : "none",
+            }}
+          >
+            {monthHeader.monthName} {monthHeader.year}
+          </div>
+        ))}
+      </div>
+
+      {/* Günlük Hücreler */}
+      <div className="timeline-header-day-row">
+        {dates.map((date, index) => {
+          // Hafta sonu kontrolü
+          let isWeekend = false;
+          if (highlightWeekends) {
+            const cellDate = parseDate(date.fullDate);
+            const dayOfWeek = cellDate.getDay(); // 0 = Pazar, 6 = Cumartesi
+            isWeekend = dayOfWeek === 0 || dayOfWeek === 6;
+          }
+          
+          return (
+            <div
+              key={index}
+              className={`timeline-header-day-cell ${isWeekend ? "timeline-header-day-weekend" : ""}`}
+              style={{
+                flex: 1,
+                borderRight: index < dates.length - 1 ? "1px solid var(--border-color)" : "none",
+              }}
+            >
+              {date.display}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+
+export default TimelineHeader;

package/src/components/Timeline/TimelineMonthContainer.js

@@ -1,29 +1,29 @@
-import React from "react";
-import TimelineHeader from "./TimelineHeader";
-import TimelineContent from "./TimelineContent";
-
-const TimelineMonthContainer = ({
-  dates,
-  month,
-  groupedResources,
-  collapsedGroups,
-  toggleGroupCollapse,
-}) => {
-  return (
-    <div style={{ display: "flex", flexDirection: "column", width: "100%" }}>
-      {/* Timeline Header */}
-      <TimelineHeader dates={dates} monthHeaders={[{ month, startIndex: 0, endIndex: dates.length - 1 }]} />
-
-      {/* Timeline Content */}
-      <div style={{ display: "flex" }}>
-        <TimelineContent
-          groupedResources={groupedResources}
-          dates={dates}
-          collapsedGroups={collapsedGroups}
-        />
-      </div>
-    </div>
-  );
-};
-
-export default TimelineMonthContainer;
+import React from "react";
+import TimelineHeader from "./TimelineHeader";
+import TimelineContent from "./TimelineContent";
+
+const TimelineMonthContainer = ({
+  dates,
+  month,
+  groupedResources,
+  collapsedGroups,
+  toggleGroupCollapse,
+}) => {
+  return (
+    <div style={{ display: "flex", flexDirection: "column", width: "100%" }}>
+      {/* Timeline Header */}
+      <TimelineHeader dates={dates} monthHeaders={[{ month, startIndex: 0, endIndex: dates.length - 1 }]} />
+
+      {/* Timeline Content */}
+      <div style={{ display: "flex" }}>
+        <TimelineContent
+          groupedResources={groupedResources}
+          dates={dates}
+          collapsedGroups={collapsedGroups}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default TimelineMonthContainer;

package/src/components/Timeline/TimelineResources.js

@@ -1,16 +1,16 @@
-import React from 'react';
-import './Timeline.css';
-
-const TimelineResources = ({ resources }) => {
-  return (
-    <div className="timeline-resources">
-      {resources.map((resource, index) => (
-        <div key={index} className="resource-cell">
-          {resource}
-        </div>
-      ))}
-    </div>
-  );
-};
-
-export default TimelineResources;
+import React from 'react';
+import './Timeline.css';
+
+const TimelineResources = ({ resources }) => {
+  return (
+    <div className="timeline-resources">
+      {resources.map((resource, index) => (
+        <div key={index} className="resource-cell">
+          {resource}
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default TimelineResources;

package/src/demo.css

@@ -0,0 +1,4 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+

package/src/hooks/useDragAndDrop.js

@@ -1,80 +1,80 @@
-// src/hooks/useDragAndDrop.js
-import { useState } from "react";
-import { parseDate } from "../utils/dateUtils"; // Named import
-
-const useDragAndDrop = (initialEvents = []) => {
-    const [isDragging, setIsDragging] = useState(false);
-    const [dragStart, setDragStart] = useState(null);
-    const [dragEnd, setDragEnd] = useState(null);
-    const [events, setEvents] = useState(initialEvents);
-
-    // Sürükleme başlat
-    const startDrag = (resourceId, date) => {
-        setIsDragging(true);
-        setDragStart({ resourceId, date });
-        setDragEnd({ resourceId, date });
-    };
-
-    // Sürükleme hareketi
-    const updateDrag = (resourceId, date) => {
-        if (!isDragging) return;
-        setDragEnd({ resourceId, date });
-    };
-
-    // Sürükleme bitişi
-    const endDrag = (dates) => {
-        if (!isDragging || !dragStart || !dragEnd) return;
-        if (dragStart.resourceId !== dragEnd.resourceId) {
-            resetDrag();
-            return;
-        }
-
-        const startDateIndex = dates.findIndex(
-            (d) => parseDate(d.fullDate).toDateString() === parseDate(dragStart.date.fullDate).toDateString()
-        );
-        const endDateIndex = dates.findIndex(
-            (d) => parseDate(d.fullDate).toDateString() === parseDate(dragEnd.date.fullDate).toDateString()
-        );
-
-        if (startDateIndex === -1 || endDateIndex === -1) {
-            resetDrag();
-            return;
-        }
-
-        const sortedStartIndex = Math.min(startDateIndex, endDateIndex);
-        const sortedEndIndex = Math.max(startDateIndex, endDateIndex);
-        const startDate = dates[sortedStartIndex].fullDate;
-        const endDate = dates[sortedEndIndex].fullDate;
-
-        const newEvent = {
-            id: Date.now(),
-            title: "Yeni Etkinlik",
-            resourceId: dragStart.resourceId,
-            startDate: startDate,
-            endDate: endDate,
-            color: "#ff7f50",
-        };
-
-        setEvents((prev) => [...prev, newEvent]);
-        resetDrag();
-    };
-
-    const resetDrag = () => {
-        setIsDragging(false);
-        setDragStart(null);
-        setDragEnd(null);
-    };
-
-    return {
-        events,
-        isDragging,
-        dragStart,
-        dragEnd,
-        startDrag,
-        updateDrag,
-        endDrag,
-        setEvents,
-    };
-};
-
-export default useDragAndDrop;
+// src/hooks/useDragAndDrop.js
+import { useState } from "react";
+import { parseDate } from "../utils/dateUtils"; // Named import
+
+const useDragAndDrop = (initialEvents = []) => {
+    const [isDragging, setIsDragging] = useState(false);
+    const [dragStart, setDragStart] = useState(null);
+    const [dragEnd, setDragEnd] = useState(null);
+    const [events, setEvents] = useState(initialEvents);
+
+    // Sürükleme başlat
+    const startDrag = (resourceId, date) => {
+        setIsDragging(true);
+        setDragStart({ resourceId, date });
+        setDragEnd({ resourceId, date });
+    };
+
+    // Sürükleme hareketi
+    const updateDrag = (resourceId, date) => {
+        if (!isDragging) return;
+        setDragEnd({ resourceId, date });
+    };
+
+    // Sürükleme bitişi
+    const endDrag = (dates) => {
+        if (!isDragging || !dragStart || !dragEnd) return;
+        if (dragStart.resourceId !== dragEnd.resourceId) {
+            resetDrag();
+            return;
+        }
+
+        const startDateIndex = dates.findIndex(
+            (d) => parseDate(d.fullDate).toDateString() === parseDate(dragStart.date.fullDate).toDateString()
+        );
+        const endDateIndex = dates.findIndex(
+            (d) => parseDate(d.fullDate).toDateString() === parseDate(dragEnd.date.fullDate).toDateString()
+        );
+
+        if (startDateIndex === -1 || endDateIndex === -1) {
+            resetDrag();
+            return;
+        }
+
+        const sortedStartIndex = Math.min(startDateIndex, endDateIndex);
+        const sortedEndIndex = Math.max(startDateIndex, endDateIndex);
+        const startDate = dates[sortedStartIndex].fullDate;
+        const endDate = dates[sortedEndIndex].fullDate;
+
+        const newEvent = {
+            id: Date.now(),
+            title: "Yeni Etkinlik",
+            resourceId: dragStart.resourceId,
+            startDate: startDate,
+            endDate: endDate,
+            color: "#ff7f50",
+        };
+
+        setEvents((prev) => [...prev, newEvent]);
+        resetDrag();
+    };
+
+    const resetDrag = () => {
+        setIsDragging(false);
+        setDragStart(null);
+        setDragEnd(null);
+    };
+
+    return {
+        events,
+        isDragging,
+        dragStart,
+        dragEnd,
+        startDrag,
+        updateDrag,
+        endDrag,
+        setEvents,
+    };
+};
+
+export default useDragAndDrop;