akfatimeline 1.0.6 → 1.2.0

package/dist/components/Timeline/AutocompleteSelect.js

@@ -0,0 +1,150 @@
+import React, { useState, useRef, useEffect } from "react";
+import "./Timeline.css";
+
+const AutocompleteSelect = ({
+  options = [],
+  value = null,
+  onChange = () => {},
+  placeholder = "Seçiniz...",
+  getOptionLabel = (option) => option?.label || option?.name || String(option),
+  getOptionValue = (option) => option?.value || option?.id || option,
+  filterOptions = (options, inputValue) => {
+    if (!inputValue) return options;
+    const lowerInput = inputValue.toLowerCase();
+    return options.filter((option) => {
+      const label = getOptionLabel(option).toLowerCase();
+      return label.includes(lowerInput);
+    });
+  },
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [inputValue, setInputValue] = useState("");
+  const [filteredOptions, setFilteredOptions] = useState(options);
+  const containerRef = useRef(null);
+  const inputRef = useRef(null);
+
+  // Seçili değerin label'ını bul
+  const selectedOption = options.find(
+    (opt) => getOptionValue(opt) === value
+  );
+  const displayValue = selectedOption
+    ? getOptionLabel(selectedOption)
+    : inputValue || placeholder;
+
+  // Input değiştiğinde filtrele
+  useEffect(() => {
+    if (isOpen) {
+      const filtered = filterOptions(options, inputValue);
+      setFilteredOptions(filtered);
+    } else {
+      setFilteredOptions(options);
+    }
+  }, [inputValue, isOpen, options, filterOptions]);
+
+  // Dışarı tıklandığında kapat
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (containerRef.current && !containerRef.current.contains(event.target)) {
+        setIsOpen(false);
+        setInputValue("");
+      }
+    };
+
+    if (isOpen) {
+      document.addEventListener("mousedown", handleClickOutside);
+      return () => {
+        document.removeEventListener("mousedown", handleClickOutside);
+      };
+    }
+  }, [isOpen]);
+
+  const handleInputChange = (e) => {
+    const newValue = e.target.value;
+    setInputValue(newValue);
+    setIsOpen(true);
+  };
+
+  const handleSelect = (option) => {
+    const optionValue = getOptionValue(option);
+    onChange(optionValue, option);
+    setInputValue("");
+    setIsOpen(false);
+  };
+
+  const handleFocus = () => {
+    setIsOpen(true);
+    if (selectedOption) {
+      setInputValue(getOptionLabel(selectedOption));
+    }
+  };
+
+  const handleBlur = () => {
+    // Input blur olduğunda hemen kapatma, click outside ile kapatılacak
+    setTimeout(() => {
+      if (!containerRef.current?.contains(document.activeElement)) {
+        setIsOpen(false);
+        if (selectedOption) {
+          setInputValue("");
+        }
+      }
+    }, 200);
+  };
+
+  return (
+    <div className="autocomplete-select-container" ref={containerRef}>
+      <div
+        className={`autocomplete-select-input ${isOpen ? "open" : ""}`}
+        onClick={() => {
+          setIsOpen(!isOpen);
+          inputRef.current?.focus();
+        }}
+      >
+        <input
+          ref={inputRef}
+          type="text"
+          value={isOpen ? inputValue : displayValue}
+          onChange={handleInputChange}
+          onFocus={handleFocus}
+          onBlur={handleBlur}
+          placeholder={placeholder}
+          className="autocomplete-select-input-field"
+        />
+        <span className="autocomplete-select-arrow">
+          {isOpen ? "▲" : "▼"}
+        </span>
+      </div>
+
+      {isOpen && (
+        <div className="autocomplete-select-dropdown">
+          {filteredOptions.length > 0 ? (
+            filteredOptions.map((option, index) => {
+              const optionValue = getOptionValue(option);
+              const optionLabel = getOptionLabel(option);
+              const isSelected = optionValue === value;
+
+              return (
+                <div
+                  key={index}
+                  className={`autocomplete-select-option ${
+                    isSelected ? "selected" : ""
+                  }`}
+                  onClick={() => handleSelect(option)}
+                  onMouseDown={(e) => e.preventDefault()} // Blur'u engelle
+                >
+                  {optionLabel}
+                </div>
+              );
+            })
+          ) : (
+            <div className="autocomplete-select-no-results">
+              Sonuç bulunamadı
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default AutocompleteSelect;
+

package/dist/components/Timeline/ContextMenu.js

@@ -0,0 +1,149 @@
+import React, { useEffect, useRef, useState } from 'react';
+import './Timeline.css';
+
+/**
+ * Context Menu Component
+ * Sağ tık menüsü için özelleştirilebilir menü bileşeni
+ */
+const ContextMenu = ({ 
+  isOpen, 
+  position, 
+  onClose, 
+  menuItems = [],
+  resource = null,
+  date = null,
+}) => {
+  const menuRef = useRef(null);
+  const [adjustedPosition, setAdjustedPosition] = useState(position);
+
+  // Menü pozisyonunu mouse'a yakın tut ve ekran sınırları içinde tut
+  useEffect(() => {
+    if (!menuRef.current || !position || !isOpen) {
+      setAdjustedPosition(position);
+      return;
+    }
+
+    // Menü render edildikten sonra pozisyonu ayarla
+    const updatePosition = () => {
+      const menuRect = menuRef.current.getBoundingClientRect();
+      const viewportWidth = window.innerWidth;
+      const viewportHeight = window.innerHeight;
+
+      let adjustedX = position.x;
+      let adjustedY = position.y;
+
+      // Sağa taşma kontrolü
+      if (position.x + menuRect.width > viewportWidth) {
+        adjustedX = position.x - menuRect.width;
+      }
+
+      // Aşağıya taşma kontrolü
+      if (position.y + menuRect.height > viewportHeight) {
+        adjustedY = position.y - menuRect.height;
+      }
+
+      // Sola taşma kontrolü
+      if (adjustedX < 10) {
+        adjustedX = 10;
+      }
+
+      // Yukarıya taşma kontrolü
+      if (adjustedY < 10) {
+        adjustedY = 10;
+      }
+
+      setAdjustedPosition({ x: adjustedX, y: adjustedY });
+    };
+
+    // Menü render edildikten sonra pozisyonu güncelle
+    setTimeout(updatePosition, 0);
+  }, [position, isOpen]);
+
+  // Menü dışına tıklanınca kapat
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (menuRef.current && !menuRef.current.contains(event.target)) {
+        onClose();
+      }
+    };
+
+    const handleEscape = (event) => {
+      if (event.key === 'Escape') {
+        onClose();
+      }
+    };
+
+    if (isOpen) {
+      document.addEventListener('mousedown', handleClickOutside);
+      document.addEventListener('keydown', handleEscape);
+      // Scroll olduğunda menüyü kapat
+      document.addEventListener('scroll', onClose, true);
+    }
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+      document.removeEventListener('keydown', handleEscape);
+      document.removeEventListener('scroll', onClose, true);
+    };
+  }, [isOpen, onClose]);
+
+  if (!isOpen || !position) return null;
+
+  const handleItemClick = (item) => {
+    if (item.onClick) {
+      item.onClick(resource, date);
+    }
+    if (item.closeOnClick !== false) {
+      onClose();
+    }
+  };
+
+  return (
+    <div
+      ref={menuRef}
+      className="context-menu"
+      style={{
+        position: 'fixed',
+        left: `${(adjustedPosition?.x ?? position.x) - 150}px`,
+        top: `${(adjustedPosition?.y ?? position.y) - 150}px`,
+        zIndex: 10005,
+      }}
+    >
+      <div className="context-menu-content">
+        {menuItems.length === 0 ? (
+          <div className="context-menu-item context-menu-item-disabled">
+            Menü öğesi yok
+          </div>
+        ) : (
+          menuItems.map((item, index) => {
+            if (item.separator) {
+              return <div key={`separator-${index}`} className="context-menu-separator" />;
+            }
+
+            if (item.hidden) {
+              return null;
+            }
+
+            return (
+              <div
+                key={item.id || index}
+                className={`context-menu-item ${item.disabled ? 'context-menu-item-disabled' : ''} ${item.danger ? 'context-menu-item-danger' : ''}`}
+                onClick={() => !item.disabled && handleItemClick(item)}
+                title={item.tooltip || item.label}
+              >
+                {item.icon && <span className="context-menu-item-icon">{item.icon}</span>}
+                <span className="context-menu-item-label">{item.label}</span>
+                {item.shortcut && (
+                  <span className="context-menu-item-shortcut">{item.shortcut}</span>
+                )}
+              </div>
+            );
+          })
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default ContextMenu;
+

package/dist/components/Timeline/DailyView.js

@@ -0,0 +1,255 @@
+import React, { useState, useRef, useEffect, useCallback } from 'react';
+import './Timeline.css';
+
+/**
+ * Daily View Component
+ * Seçili resource ve tarih için günlük saat bazlı timeline görünümü
+ */
+const DailyView = ({
+  isOpen,
+  onClose,
+  resource,
+  date,
+  events = [],
+  onEventCreate,
+  onEventUpdate,
+  onEventDelete,
+  themeType = 'light',
+}) => {
+  const [isCreating, setIsCreating] = useState(false);
+  const [tempEvent, setTempEvent] = useState(null);
+  const containerRef = useRef(null);
+  const timelineRef = useRef(null);
+
+  // Saatleri oluştur (0-23)
+  const hours = Array.from({ length: 24 }, (_, i) => i);
+
+  // O güne ait event'leri filtrele
+  const dayEvents = events.filter(event => {
+    if (!event.startDate || !date) return false;
+    const eventDate = new Date(event.startDate);
+    const selectedDate = new Date(date.fullDate || date);
+    return (
+      eventDate.getFullYear() === selectedDate.getFullYear() &&
+      eventDate.getMonth() === selectedDate.getMonth() &&
+      eventDate.getDate() === selectedDate.getDate() &&
+      event.resourceId === resource?.id
+    );
+  });
+
+  // Saat bazlı event pozisyonu hesapla
+  const getEventPosition = (event) => {
+    const startDate = new Date(event.startDate);
+    const endDate = new Date(event.endDate);
+    const startHour = startDate.getHours() + startDate.getMinutes() / 60;
+    const endHour = endDate.getHours() + endDate.getMinutes() / 60;
+    const duration = endHour - startHour;
+
+    return {
+      top: `${(startHour / 24) * 100}%`,
+      height: `${(duration / 24) * 100}%`,
+    };
+  };
+
+  // Timeline'a tıklandığında
+  const handleTimelineClick = (e) => {
+    if (!onEventCreate || !timelineRef.current) return;
+    
+    const rect = timelineRef.current.getBoundingClientRect();
+    const clickedY = e.clientY - rect.top;
+    const timelineHeight = rect.height;
+    const totalMinutes = Math.max(0, Math.min((clickedY / timelineHeight) * (24 * 60), 24 * 60));
+    
+    const startHour = Math.floor(totalMinutes / 60);
+    const startMinutes = Math.floor(totalMinutes % 60);
+    
+    const startDate = new Date(date.fullDate || date);
+    startDate.setHours(startHour, startMinutes, 0, 0);
+    
+    const endDate = new Date(startDate);
+    endDate.setTime(startDate.getTime() + 30 * 60 * 1000); // Varsayılan 30 dakika
+    
+    setIsCreating(true);
+    setTempEvent({
+      startDate,
+      endDate,
+    });
+  };
+
+  // Mouse hareketi ile event oluşturma
+  const handleMouseMove = useCallback((e) => {
+    if (!isCreating || !tempEvent || !timelineRef.current) return;
+    
+    const rect = timelineRef.current.getBoundingClientRect();
+    const mouseY = e.clientY - rect.top;
+    const timelineHeight = rect.height;
+    const totalMinutes = Math.max(0, Math.min((mouseY / timelineHeight) * (24 * 60), 24 * 60));
+    
+    const endHour = Math.floor(totalMinutes / 60);
+    const endMinutes = Math.floor(totalMinutes % 60);
+    
+    const newEndDate = new Date(tempEvent.startDate);
+    newEndDate.setHours(endHour, endMinutes, 0, 0);
+    
+    // Bitiş saati başlangıçtan önce olamaz
+    if (newEndDate <= tempEvent.startDate) {
+      newEndDate.setTime(tempEvent.startDate.getTime() + 15 * 60 * 1000); // En az 15 dakika
+    }
+    
+    setTempEvent(prev => ({
+      ...prev,
+      endDate: newEndDate,
+    }));
+  }, [isCreating, tempEvent]);
+
+  // Mouse bırakıldığında event oluştur
+  const handleMouseUp = useCallback(() => {
+    if (!isCreating || !tempEvent || !onEventCreate) return;
+    
+    // Minimum süre kontrolü (en az 15 dakika)
+    const duration = tempEvent.endDate.getTime() - tempEvent.startDate.getTime();
+    if (duration < 15 * 60 * 1000) {
+      setIsCreating(false);
+      setTempEvent(null);
+      return; // Çok kısa, event oluşturma
+    }
+    
+    const newEvent = {
+      id: `daily-${Date.now()}`,
+      title: 'Yeni Randevu',
+      startDate: tempEvent.startDate,
+      endDate: tempEvent.endDate,
+      resourceId: resource?.id,
+      isHourly: true, // Saatlik rezervasyon flag'i
+    };
+    
+    onEventCreate(newEvent);
+    setIsCreating(false);
+    setTempEvent(null);
+  }, [isCreating, tempEvent, onEventCreate, resource]);
+
+  // Global mouse event listener'ları
+  useEffect(() => {
+    if (!isCreating) return;
+    
+    document.addEventListener('mousemove', handleMouseMove);
+    document.addEventListener('mouseup', handleMouseUp);
+    
+    return () => {
+      document.removeEventListener('mousemove', handleMouseMove);
+      document.removeEventListener('mouseup', handleMouseUp);
+    };
+  }, [isCreating, handleMouseMove, handleMouseUp]);
+
+  // Tarih formatı
+  const formatDate = (dateObj) => {
+    if (!dateObj) return '';
+    const d = new Date(dateObj.fullDate || dateObj);
+    return d.toLocaleDateString('tr-TR', {
+      weekday: 'long',
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric',
+    });
+  };
+
+  // Saat formatı
+  const formatHour = (hour) => {
+    return `${hour.toString().padStart(2, '0')}:00`;
+  };
+
+  if (!isOpen || !resource || !date) return null;
+
+  return (
+    <div 
+      className={`daily-view-overlay ${themeType === 'dark' ? 'dark-mode' : ''}`}
+      onClick={onClose}
+    >
+      <div 
+        ref={containerRef}
+        className="daily-view-container"
+        onClick={(e) => e.stopPropagation()}
+      >
+        {/* Header */}
+        <div className="daily-view-header">
+          <div className="daily-view-header-content">
+            <h2 className="daily-view-title">{resource.name || resource.id}</h2>
+            <p className="daily-view-date">{formatDate(date)}</p>
+          </div>
+          <button className="daily-view-close" onClick={onClose}>
+            ✕
+          </button>
+        </div>
+
+        {/* Timeline Body */}
+        <div className="daily-view-body">
+          {/* Saatler (Sol Taraf) */}
+          <div className="daily-view-hours">
+            {hours.map(hour => (
+              <div key={hour} className="daily-view-hour-label">
+                {formatHour(hour)}
+              </div>
+            ))}
+          </div>
+
+          {/* Timeline Content */}
+          <div 
+            ref={timelineRef}
+            className="daily-view-timeline"
+            onClick={handleTimelineClick}
+          >
+            {/* Saat hücreleri */}
+            {hours.map(hour => (
+              <div
+                key={hour}
+                className="daily-view-hour-cell"
+              />
+            ))}
+            
+            {/* Event'ler (timeline üzerinde absolute position) */}
+            {dayEvents.map(event => {
+              const position = getEventPosition(event);
+              return (
+                <div
+                  key={event.id}
+                  className="daily-view-event"
+                  style={position}
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    // Event detayları göster
+                  }}
+                >
+                  <span className="daily-view-event-title">{event.title}</span>
+                  <span className="daily-view-event-time">
+                    {new Date(event.startDate).toLocaleTimeString('tr-TR', { 
+                      hour: '2-digit', 
+                      minute: '2-digit' 
+                    })} - {new Date(event.endDate).toLocaleTimeString('tr-TR', { 
+                      hour: '2-digit', 
+                      minute: '2-digit' 
+                    })}
+                  </span>
+                </div>
+              );
+            })}
+            
+            {/* Geçici event (oluşturuluyor) */}
+            {isCreating && tempEvent && (
+              <div
+                className="daily-view-temp-event"
+                style={getEventPosition({
+                  startDate: tempEvent.startDate,
+                  endDate: tempEvent.endDate,
+                })}
+              >
+                Yeni Randevu
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default DailyView;

package/dist/components/Timeline/DatePickerComponent.js

@@ -0,0 +1,13 @@
+import React from "react";
+
+const DatePickerComponent = ({ onDateSelect }) => {
+  return (
+    <input
+      type="date"
+      onChange={(e) => onDateSelect(new Date(e.target.value))}
+      className="master-header-date-picker"
+    />
+  );
+};
+
+export default DatePickerComponent;

package/{public/dist/dist → dist}/components/Timeline/DragAndDropHandler.js

@@ -1,35 +1,35 @@
-/**
- * "dd/mm/yyyy" formatındaki bir tarih string'ini Date objesine dönüştürür.
- * Eğer dateInput bir string değilse, direkt Date objesini döndürür.
- * @param {string | Object | Date} dateInput - "dd/mm/yyyy" formatında tarih stringi veya {fullDate: Date, display: string} objesi veya Date objesi.
- * @returns {Date} - Date objesi.
- */
-export const parseDate = (dateInput) => {
-  if (dateInput instanceof Date) {
-    return dateInput;
-  }
- if (typeof dateInput === 'string') {
-        const [day, month, year] = dateInput.split("/").map(Number);
-      return new Date(year, month - 1, day);
-    } else if (typeof dateInput === 'object' && dateInput.fullDate instanceof Date) {
-        return new Date(dateInput.fullDate);
-    }
-      else {
-      console.error("parseDate received invalid input:", dateInput);
-      return new Date(); // veya hata fırlat
-    }
-  };
-  
-  /**
-   * Bir tarihin belirli bir aralık içinde olup olmadığını kontrol eder.
-   * @param {string | Object | Date} date - "dd/mm/yyyy" formatında tarih stringi, {fullDate: Date, display: string} objesi veya Date objesi.
-   * @param {string | Object | Date} startDate - "dd/mm/yyyy" formatında başlangıç tarihi stringi, {fullDate: Date, display: string} objesi veya Date objesi.
-   * @param {string | Object | Date} endDate - "dd/mm/yyyy" formatında bitiş tarihi stringi, {fullDate: Date, display: string} objesi veya Date objesi.
-   * @returns {boolean} - Tarih aralık içinde ise true, değilse false.
-   */
-  export const isDateInRange = (date, startDate, endDate) => {
-    const d = parseDate(date);
-    const start = parseDate(startDate);
-    const end = parseDate(endDate);
-    return d >= start && d <= end;
+/**
+ * "dd/mm/yyyy" formatındaki bir tarih string'ini Date objesine dönüştürür.
+ * Eğer dateInput bir string değilse, direkt Date objesini döndürür.
+ * @param {string | Object | Date} dateInput - "dd/mm/yyyy" formatında tarih stringi veya {fullDate: Date, display: string} objesi veya Date objesi.
+ * @returns {Date} - Date objesi.
+ */
+export const parseDate = (dateInput) => {
+  if (dateInput instanceof Date) {
+    return dateInput;
+  }
+ if (typeof dateInput === 'string') {
+        const [day, month, year] = dateInput.split("/").map(Number);
+      return new Date(year, month - 1, day);
+    } else if (typeof dateInput === 'object' && dateInput.fullDate instanceof Date) {
+        return new Date(dateInput.fullDate);
+    }
+      else {
+      console.error("parseDate received invalid input:", dateInput);
+      return new Date(); // veya hata fırlat
+    }
+  };
+  
+  /**
+   * Bir tarihin belirli bir aralık içinde olup olmadığını kontrol eder.
+   * @param {string | Object | Date} date - "dd/mm/yyyy" formatında tarih stringi, {fullDate: Date, display: string} objesi veya Date objesi.
+   * @param {string | Object | Date} startDate - "dd/mm/yyyy" formatında başlangıç tarihi stringi, {fullDate: Date, display: string} objesi veya Date objesi.
+   * @param {string | Object | Date} endDate - "dd/mm/yyyy" formatında bitiş tarihi stringi, {fullDate: Date, display: string} objesi veya Date objesi.
+   * @returns {boolean} - Tarih aralık içinde ise true, değilse false.
+   */
+  export const isDateInRange = (date, startDate, endDate) => {
+    const d = parseDate(date);
+    const start = parseDate(startDate);
+    const end = parseDate(endDate);
+    return d >= start && d <= end;
   };

package/dist/components/Timeline/EventBadge.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import './Timeline.css';
+
+/**
+ * Event Badge Component
+ * Önemli event'ler için badge gösterir
+ */
+const EventBadge = ({ 
+  text, 
+  type = 'default', // 'default', 'important', 'urgent', 'new', 'custom'
+  position = 'top-right', // 'top-right', 'top-left', 'bottom-right', 'bottom-left'
+  className = '',
+  style = {}
+}) => {
+  return (
+    <span 
+      className={`event-badge event-badge-${type} event-badge-${position} ${className}`}
+      style={style}
+    >
+      {text}
+    </span>
+  );
+};
+
+export default EventBadge;
+