akfatimeline 1.0.0

package/src/components/Timeline/Timeline.js

@@ -0,0 +1,277 @@
+import React, { useState, useEffect } from "react";
+import MasterHeader from "./MasterHeader";
+import ResourcesHeader from "./ResourcesHeader";
+import Resources from "./Resources";
+import TimelineHeader from "./TimelineHeader";
+import TimelineContent from "./TimelineContent";
+import "./Timeline.css";
+import EventTooltip from "./EventTooltip";
+import { generateTimelineData } from "../../utils/timelineUtils";
+
+const Timeline = ({
+  resources,
+  programDate = null,
+  events = [],
+  resourceSettings = {
+    showIdAsName: false,
+    isGrouped: true,
+    isCollapsible: true,
+  },
+  indicatorOn = false,
+  dropInfo,
+  setDropInfo,
+
+  masterHeaderView = true,          
+  resourceHeaderContent = "Akfa Timeline",
+    eventsDragOn = true,
+  eventsExtendOn = true,
+  createNewEventOn = true,
+  onDragInfo,
+  onExtendInfo,
+  onCreateEventInfo,
+  // İsteğe bağlı event tıklama callback'leri
+  onEventClick,
+  onEventRightClick,
+
+  // Yatay scroll özelliği aç/kapa
+  horizontalScrollOn = false, // Varsayılan false
+}) => {
+  // ---------------------------------------------------------
+  // 1) timelineData oluştur (dates, monthHeaders vs.)
+  // ---------------------------------------------------------
+  const timelineData = generateTimelineData(2020, 2030); // 10 yıllık veri
+  const { dates, monthHeaders } = timelineData;
+
+  // ---------------------------------------------------------
+  // 2) local state
+  // ---------------------------------------------------------
+  const [collapsedGroups, setCollapsedGroups] = useState({});
+  const [selectedDate, setSelectedDate] = useState(() => {
+    const date = programDate ? new Date(programDate) : new Date();
+    date.setDate(date.getDate() - 3);
+    return date;
+  });
+  const [localEvents, setLocalEvents] = useState(events);
+
+  const [selectedEvent, setSelectedEvent] = useState(null);
+  const [tooltipPosition, setTooltipPosition] = useState({ top: 0, left: 0 });
+
+  // dayRange = ekranda göstermeyi istediğimiz gün/hücre sayısı (ör. 30 gün)
+  const [dayRange, setDayRange] = useState(30);
+
+  const [isDarkMode, setIsDarkMode] = useState(false);
+
+  // ---------------------------------------------------------
+  // 3) Sabit hücre genişliği (örneğin 56.95 px)
+  //    Container genişliği = dayRange * cellWidth
+  // ---------------------------------------------------------
+  const cellWidth = 56.95; // her gün/hücre ~57 piksel
+  const containerWidth = dayRange * cellWidth;
+  // örneğin dayRange=30 => containerWidth=30*56.95=1708.5 px
+
+  // ---------------------------------------------------------
+  // 4) Event Tooltip logic
+  // ---------------------------------------------------------
+  const handleEventClick = (event, e) => {
+    // Harici onEventClick callback'i varsa, önce onu tetikleyelim
+    if (onEventClick) {
+      onEventClick(event, e);
+    }
+    // Ardından tooltip göstermek istiyorsak:
+    const eventElement = e.currentTarget;
+    if (eventElement) {
+      const rect = eventElement.getBoundingClientRect();
+      setTooltipPosition({
+        top: rect.top + window.scrollY,
+        left: rect.left + rect.width / 2 + window.scrollX,
+      });
+      setSelectedEvent(event);
+    }
+  };
+
+  const handleCloseTooltip = () => {
+    setSelectedEvent(null);
+  };
+
+  // ---------------------------------------------------------
+  // 5) Tarih filtreleme => filteredDates
+  // ---------------------------------------------------------
+  const startIndex = dates.findIndex((d) => d.fullDate >= selectedDate);
+  const endIndex = startIndex + dayRange;
+  const filteredDates =
+    startIndex !== -1 ? dates.slice(startIndex, Math.min(endIndex, dates.length)) : [];
+
+  const today = programDate ? new Date(programDate) : new Date();
+  const todayIndex = filteredDates.findIndex(
+    (d) => new Date(d.fullDate).toDateString() === today.toDateString()
+  );
+  const totalDays = filteredDates.length;
+
+  // ---------------------------------------------------------
+  // 6) Grupları aç/kapa
+  // ---------------------------------------------------------
+  const toggleGroupCollapse = (groupName) => {
+    setCollapsedGroups((prev) => ({
+      ...prev,
+      [groupName]: !prev[groupName],
+    }));
+  };
+
+  // ---------------------------------------------------------
+  // 7) Navigation fonksiyonları
+  // ---------------------------------------------------------
+  const handleToday = () => {
+    const date = programDate ? new Date(programDate) : new Date();
+    date.setDate(date.getDate() - 3);
+    setSelectedDate(date);
+  };
+
+  const handleAdvance = () =>
+    setSelectedDate((prev) => new Date(prev.getTime() + 5 * 24 * 60 * 60 * 1000));
+
+  const handleRetreat = () =>
+    setSelectedDate((prev) => new Date(prev.getTime() - 5 * 24 * 60 * 60 * 1000));
+
+  const handleMonthRetreat = () =>
+    setSelectedDate((prev) => {
+      const newDate = new Date(prev);
+      newDate.setMonth(newDate.getMonth() - 1);
+      return newDate;
+    });
+
+  const handleMonthAdvance = () =>
+    setSelectedDate((prev) => {
+      const newDate = new Date(prev);
+      newDate.setMonth(newDate.getMonth() + 1);
+      return newDate;
+    });
+
+  // ---------------------------------------------------------
+  // 8) Dark Mode
+  // ---------------------------------------------------------
+  const toggleDarkMode = () => {
+    setIsDarkMode((prevMode) => !prevMode);
+  };
+
+  useEffect(() => {
+    document.body.classList.toggle("dark-mode", isDarkMode);
+  }, [isDarkMode]);
+
+  // ---------------------------------------------------------
+  // 9) Ay başlıklarını filtrele
+  // ---------------------------------------------------------
+  const filteredMonthHeaders = monthHeaders
+    .map((header) => {
+      const adjustedStartIndex = Math.max(header.startIndex, startIndex);
+      const adjustedEndIndex = Math.min(header.endIndex, endIndex - 1);
+      return {
+        ...header,
+        startIndex: adjustedStartIndex,
+        endIndex: adjustedEndIndex,
+      };
+    })
+    .filter((header) => header.startIndex <= header.endIndex);
+
+  // ---------------------------------------------------------
+  // 10) Return
+  // ---------------------------------------------------------
+  return (
+    <div className={`timeline-container ${isDarkMode ? "dark-mode" : ""}`}>
+      {/* Üst kısım: MasterHeader */}
+      {masterHeaderView && (
+      <div className="timeline-master-header">
+        <MasterHeader
+          onToday={handleToday}
+          onAdvance={handleAdvance}
+          onRetreat={handleRetreat}
+          onMonthAdvance={handleMonthAdvance}
+          onMonthRetreat={handleMonthRetreat}
+          dayRange={dayRange}
+          setDayRange={setDayRange}  // dayRange'ı burada user değiştirebilir
+          isDarkMode={isDarkMode}
+          toggleDarkMode={toggleDarkMode}
+        />
+      </div>
+)}
+      {/* Body: Sol kısım => Resources, Sağ kısım => timeline */}
+      <div className="timeline-body">
+        <div className="timeline-resources-container">
+        <ResourcesHeader content={resourceHeaderContent} />
+        <Resources
+            groupedResources={resources}
+            toggleGroupCollapse={toggleGroupCollapse}
+            collapsedGroups={collapsedGroups}
+            resourceSettings={resourceSettings}
+          />
+        </div>
+
+        {/* 
+          Dış kap => .timeline-scrollable-container
+          horizontalScrollOn => overflow-x auto/hidden 
+        */}
+        <div
+          className="timeline-scrollable-container"
+          style={{
+            overflowX: horizontalScrollOn ? "auto" : "hidden",
+          }}
+        >
+          {/*
+            İç kap => .timeline-header-content-wrapper
+            Genişlik => dayRange * cellWidth px (eğer horizontalScrollOn=true)
+            Yoksa 100% (scroll devre dışı)
+          */}
+          <div
+            className="timeline-header-content-wrapper"
+            style={{
+              width: horizontalScrollOn ? `${containerWidth}px` : "100%",
+            }}
+          >
+            <TimelineHeader
+              dates={filteredDates}
+              monthHeaders={filteredMonthHeaders}
+            />
+
+            <TimelineContent
+              // Props
+              groupedResources={resources}
+              dates={filteredDates}
+              collapsedGroups={collapsedGroups}
+              events={localEvents}
+              setEvents={setLocalEvents}
+              onEventClick={handleEventClick}
+              todayIndex={todayIndex}
+              totalDays={totalDays}
+              indicatorOn={indicatorOn}
+              resourceSettings={resourceSettings}
+              toggleGroupCollapse={toggleGroupCollapse}
+              setDropInfo={setDropInfo}
+
+              // Yeni prop'lar
+              eventsDragOn={eventsDragOn}
+              eventsExtendOn={eventsExtendOn}
+              createNewEventOn={createNewEventOn}
+              onDragInfo={onDragInfo}
+              onExtendInfo={onExtendInfo}
+              onCreateEventInfo={onCreateEventInfo}
+              onEventRightClick={onEventRightClick}
+            />
+
+            {/* Tooltip */}
+            {selectedEvent && (
+              <EventTooltip
+                event={selectedEvent}
+                position={tooltipPosition}
+                onClose={handleCloseTooltip}
+                onDelete={(eventId) =>
+                  setLocalEvents((prev) => prev.filter((e) => e.id !== eventId))
+                }
+              />
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Timeline;

package/src/components/Timeline/TimelineCell.js

@@ -0,0 +1,8 @@
+// src/components/Timeline/TimelineCell.js
+import React from "react";
+
+const TimelineCell = () => {
+  return <div style={{ width: "100%", height: "100%" }}></div>;
+};
+
+export default TimelineCell;

package/src/components/Timeline/TimelineContent copy.js

@@ -0,0 +1,421 @@
+import React, { useState, useRef, useEffect } from "react";
+import { parseDate } from "../../utils/dateUtils";
+import useDragAndDrop from "../../hooks/useDragAndDrop";
+import useEventDragDrop from "../../hooks/useEventDragDrop";
+import EventTooltip from "./EventTooltip";
+import Indicator from "./Indicator";
+
+const TimelineContent = ({ groupedResources, dates, collapsedGroups, events, setEvents,   onEventClick, todayIndex,   indicatorOn,   resourceSettings, 
+
+}) => {
+    
+    const containerRef = useRef(null);
+    const { isDragging, dragStart, dragEnd } = useDragAndDrop(events, setEvents);
+    const totalDays = dates.length; // Toplam gün sayısı hesaplandı
+    const { handleDragStart, handleDragOver, handleDrop, handleDragEnd } = useEventDragDrop(events, setEvents);
+
+    console.log("events content:", events);
+    console.log("Event Resource ID:", events.resourceId);
+console.log("Current Resource ID:", groupedResources);
+
+    // Tooltip için state
+    const [selectedEvent, setSelectedEvent] = useState(null);
+    const [tooltipPosition, setTooltipPosition] = useState({ top: 0, left: 0 });
+// Yeni Event oluşturma durumu ve geçici event
+const [isCreating, setIsCreating] = useState(false);
+const [tempEvent, setTempEvent] = useState(null);
+
+
+const handleEventClick = (event, e) => {
+    e.stopPropagation();
+    const eventElement = e.currentTarget;
+    if (eventElement) {
+      const rect = eventElement.getBoundingClientRect();
+      setTooltipPosition({
+        top: rect.top + window.scrollY,
+        left: rect.left + rect.width / 2 + window.scrollX,
+      });
+      setSelectedEvent(event); // Seçilen event'i state'e kaydediyoruz
+    }
+  };
+  
+
+// Mouse hareketiyle geçici event'in bitiş tarihini güncelle
+const handleMouseMove = (e) => {
+    if (isCreating && tempEvent) {
+        const cell = document.elementFromPoint(e.clientX, e.clientY);
+
+        // Hücre genişliğini dinamik olarak hesapla
+        const cellWidth = cell?.offsetWidth || 30;
+
+        const startX = tempEvent.startX || e.clientX; // İlk tıklamanın X pozisyonu
+        const deltaX = e.clientX - startX; // Hareket edilen mesafe
+        const daysToAdd = Math.max(1, Math.floor(deltaX / cellWidth)); // Gün hesaplama (en az 1 gün)
+
+        // EndDate'i güncelle
+        const newEndDate = new Date(tempEvent.startDate.getTime());
+        newEndDate.setDate(newEndDate.getDate() + daysToAdd);
+
+        // TempEvent'i güncelle ve yeni başlığı ayarla
+        setTempEvent({
+            ...tempEvent,
+            endDate: newEndDate,
+            startX: startX,
+            title: `${daysToAdd} Gece`, // Gün sayısını ve "Gece" kelimesini başlığa ekle
+        });
+
+        console.log("Mouse X Delta:", deltaX);
+        console.log("Days to Add:", daysToAdd);
+        console.log("New End Date:", newEndDate);
+        console.log("Cell Width:", cellWidth);
+    }
+};
+
+
+
+
+
+// Mouse bırakıldığında geçici event'i kaydet
+const handleMouseUp = () => {
+    if (isCreating && tempEvent) {
+        setEvents([...events, tempEvent]); // Geçici event kalıcı hale gelir
+        setTempEvent(null);               // Geçici eventi sıfırla
+        setIsCreating(false);             // Event oluşturmayı kapat
+    }
+};
+
+    // Yeni event oluşturma fonksiyonu
+
+const handleCellClick = (resourceId, date) => {
+    const startDate = parseDate(date.fullDate);
+    const newEvent = {
+        id: Date.now(),
+        title: "1 Gece",
+        startDate,
+        endDate: new Date(startDate.getTime() + 24 * 60 * 60 * 1000),
+        resourceId,
+        color: "#ff5722",
+    };
+    setTempEvent(newEvent); // Geçici event state'e ekle
+    setIsCreating(true);    // Yeni bir event oluşturuldu
+};
+
+    // Event silme fonksiyonu
+    const handleDeleteEvent = (eventId) => {
+        setEvents(events.filter((event) => event.id !== eventId));
+    };
+
+
+    useEffect(() => {
+        if (isCreating) {
+            window.addEventListener("mousemove", handleMouseMove);
+            window.addEventListener("mouseup", handleMouseUp);
+
+            return () => {
+                window.removeEventListener("mousemove", handleMouseMove);
+                window.removeEventListener("mouseup", handleMouseUp);
+            };
+        }
+    }, );
+    
+
+    // Sürükleme sırasında seçilen hücreleri vurgulamak için fonksiyon
+    const isCellSelected = (resourceId, date) => {
+        if (!dragStart || !dragEnd) return false;
+        if (resourceId !== dragStart.resourceId) return false;
+
+        const startIndex = dates.findIndex(
+            (d) => parseDate(d.fullDate).getTime() === parseDate(dragStart.date).getTime()
+        );
+        const endIndex = dates.findIndex(
+            (d) => parseDate(d.fullDate).getTime() === parseDate(dragEnd.date).getTime()
+        );
+        const currentIndex = dates.findIndex(
+            (d) => parseDate(d.fullDate).getTime() === parseDate(date.fullDate).getTime()
+        );
+
+        if (startIndex === -1 || endIndex === -1 || currentIndex === -1) return false;
+
+        return (
+            currentIndex >= Math.min(startIndex, endIndex) &&
+            currentIndex <= Math.max(startIndex, endIndex)
+        );
+    };
+
+    const calculatePosition = (event, dates) => {
+        const startDate = parseDate(event.startDate);
+        const endDate = parseDate(event.endDate);
+    
+        const startIndex = dates.findIndex(
+            (d) => parseDate(d.fullDate).toDateString() === startDate.toDateString()
+        );
+        const endIndex = dates.findIndex(
+            (d) => parseDate(d.fullDate).toDateString() === endDate.toDateString()
+        );
+    
+        const totalDays = dates.length;
+    
+        console.log("Total Days:", totalDays);
+        // Eğer başlangıç ve bitiş timeline'ın tamamen dışında ise, görünmez olarak işaretle
+        if (startIndex < 0 && endIndex < 0) {
+            // Eğer hem başlangıç hem de bitiş timeline'ın sol tarafında ise, tamamen görünmez
+            console.log("Event completely out of bounds on the left:", event.title);
+            return {
+                isVisible: false,
+                left: 0,
+                width: 0,
+                isPartialStart: false,
+                isPartialEnd: false,
+            };
+        }
+        
+        if (startIndex >= totalDays && endIndex >= totalDays) {
+            // Eğer hem başlangıç hem de bitiş timeline'ın sağ tarafında ise, tamamen görünmez
+            console.log("Event completely out of bounds on the right:", event.title);
+            return {
+                isVisible: false,
+                left: 0,
+                width: 0,
+                isPartialStart: false,
+                isPartialEnd: false,
+            };
+        }
+        
+    
+        // Etkin Başlangıç ve Bitiş İndeksleri
+        const effectiveStartIndex = Math.max(startIndex, 0); // Başlangıç en az 0 olmalı
+        const effectiveEndIndex = Math.min(endIndex, totalDays - 1); // Bitiş en fazla toplam gün sayısı - 1 olmalı
+    
+        // Kesik başlangıç veya bitiş kontrolü
+        const isPartialStart = startIndex < 0; // Başlangıç timeline dışında mı?
+        const isPartialEnd = endIndex >= totalDays; // Bitiş timeline dışında mı?
+    
+        // Sol tarafın ekran dışında kalması durumu
+        if (isPartialStart) {
+            console.log("Event partially visible on the left:", event.title);
+        }
+    
+        // Sağ tarafın ekran dışında kalması durumu
+        if (isPartialEnd) {
+            console.log("Event partially visible on the right:", event.title);
+        }
+    
+        // Başlangıç ve bitiş pozisyonlarını ayrı ayrı hesapla
+        const leftPercentage = ((effectiveStartIndex + (isPartialStart ? 0 : 0.5)) / totalDays) * 100;
+        const rightPercentage = ((effectiveEndIndex + (isPartialEnd ? 1 : 0.5)) / totalDays) * 100;
+    
+        // Genişlik hesaplama
+        const widthPercentage = rightPercentage - leftPercentage;
+    
+        // Sonuçları döndür
+        return {
+            isVisible: true,
+            left: `${leftPercentage}%`,
+            width: `${widthPercentage}%`,
+            isPartialStart,
+            isPartialEnd,
+        };
+    };
+    
+    
+    
+    
+    
+    
+    
+
+    useEffect(() => {
+        if (isCreating) {
+            window.addEventListener("mousemove", handleMouseMove);
+            window.addEventListener("mouseup", handleMouseUp);
+    
+            return () => {
+                window.removeEventListener("mousemove", handleMouseMove);
+                window.removeEventListener("mouseup", handleMouseUp);
+            };
+        }
+    }, );
+    
+
+
+
+    const handleCloseTooltip = () => {
+        setSelectedEvent(null);
+    };
+
+    const handleDelete = (eventId) => {
+        handleDeleteEvent(eventId);
+        handleCloseTooltip();
+    };
+
+    return (
+        <div
+            ref={containerRef}
+            style={{
+                display: "flex",
+                flexDirection: "column",
+                width: "100%",
+                userSelect: isDragging ? "none" : "auto",
+                position: "relative",
+            }}
+        >
+
+{indicatorOn && <Indicator todayIndex={todayIndex} totalDays={totalDays} />}
+
+
+{groupedResources.map((group, groupIndex) => (
+  <div key={groupIndex} style={{ marginBottom: "0px" }}>
+    {/* Grup Başlığı */}
+    {resourceSettings.isGrouped && (
+      <div style={{ display: "flex", marginTop: "-0.08rem" }}>
+        {dates.map((dateObj, colIndex) => (
+          <div
+            key={`group-header-${groupIndex}-${colIndex}`}
+            style={{
+              flex: 1,
+              height: "2.58rem",
+              backgroundColor: "#4b5563",
+              border: "1px solid #ccc",
+              boxSizing: "border-box",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+            }}
+          ></div>
+        ))}
+      </div>
+    )}
+
+    {/* Kaynaklar */}
+    {!collapsedGroups[group.groupName] &&
+      group.resources.map((resource, rowIndex) => {
+        const resourceEvents = events.filter(
+          (event) => event.resourceId === resource.id
+        );
+
+        return (
+          <div
+            key={resource.id}
+            style={{
+              display: "flex",
+              boxSizing: "border-box",
+              position: "relative",
+              height: "40px",
+              border: "1px solid #ccc",
+            }}
+          >
+            {/* Event'leri Render Et */}
+            {resourceEvents.map((event) => {
+              const { isVisible, left, width, isPartialStart, isPartialEnd } =
+                calculatePosition(event, dates);
+
+              if (!isVisible) return null;
+
+              return (
+                <div
+                  key={event.id}
+                  draggable
+                  onDragStart={(e) => handleDragStart(e, event.id)} // Sürükleme başlat
+                  onDragEnd={() => handleDragEnd()} // Sürükleme bitir
+                  onClick={(e) => handleEventClick(event, e)} // Tıklama olayını burada tetikliyoruz
+                  style={{
+                    position: "absolute",
+                    top: "5px",
+                    left: left,
+                    width: width,
+                    height: "80%",
+                    backgroundColor: event.color || "#ff7f50",
+                    color: "#fff",
+                    fontSize: "14px",
+                    padding: "5px",
+                    borderTopLeftRadius: isPartialStart ? "0px" : "20px",
+                    borderBottomLeftRadius: isPartialStart ? "0px" : "20px",
+                    borderTopRightRadius: isPartialEnd ? "0px" : "20px",
+                    borderBottomRightRadius: isPartialEnd ? "0px" : "20px",
+                    textAlign: "left",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    boxSizing: "border-box",
+                    zIndex: 10,
+                    overflow: "hidden",
+                    textOverflow: "ellipsis",
+                    whiteSpace: "nowrap",
+                    border: "1px solid #fff",
+                    cursor: "grab", // Sürükleme ikonu
+                  }}
+                >
+                  {event.title}
+                </div>
+              );
+            })}
+
+{tempEvent && tempEvent.resourceId === resource.id && (
+              <div
+                style={{
+                  position: "absolute",
+                  ...calculatePosition(tempEvent, dates),
+                  top: "5px",
+                  height: "80%",
+                  backgroundColor: tempEvent.color,
+                  opacity: 0.7,
+                  borderRadius: "20px",
+                  zIndex: 9,
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  color: "#fff",
+                  fontSize: "14px",
+                }}
+              >
+                {tempEvent.title}
+              </div>
+            )}
+            
+            {/* Tarih Hücreleri */}
+            {dates.map((dateObj, colIndex) => (
+              <div
+                key={`cell-${groupIndex}-${rowIndex}-${colIndex}`}
+                data-date={JSON.stringify(dateObj)}
+                data-resource-id={resource.id}
+                onMouseDown={() => handleCellClick(resource.id, dateObj)}
+                onDragOver={(e) => handleDragOver(e)} // Hücre üzerine sürükleme
+                onDrop={(e) =>
+                  handleDrop(e, resource.id, parseDate(dateObj.fullDate)) // `dateObj.fullDate`'yi doğru şekilde geçiyoruz
+                } // Bırakma olayı
+                style={{
+                  flex: 1,
+                  height: "100%",
+                  position: "relative",
+                  borderLeft: colIndex === 0 ? "1px solid #ccc" : "none",
+                  borderRight: "1px solid #ccc",
+                  backgroundColor: isCellSelected(resource.id, dateObj)
+                    ? "rgba(59, 130, 246, 0.3)"
+                    : "transparent",
+                  cursor: "pointer",
+                }}
+              ></div>
+            ))}
+          </div>
+        );
+      })}
+  </div>
+))}
+
+
+
+
+
+            {selectedEvent && (
+                <EventTooltip
+                    event={selectedEvent}
+                    position={tooltipPosition}
+                    onClose={handleCloseTooltip}
+                    onDelete={() => handleDelete(selectedEvent.id)}
+                />
+            )}
+        </div>
+    );
+};
+
+export default TimelineContent;