DynamicList Bileşeni ile Listeleme

DynamicList Bileşeni ile Listeleme

Bu sayfa, src/pages/surveys/List.tsx dosyasındaki kullanım örneği üzerinden DynamicList bileşeninin nasıl yapılandırıldığını açıklar.

Dosya Konumu

• Yol: src/pages/surveys/List.tsx

Genel Kullanım

DynamicList, API üzerinden veri çekerek bu verileri liste halinde gösteren, tekrar kullanılabilir bir bileşendir. Props'lar ile yapılandırılır: title, path, isSearch, actions, item.

Props

Örnek Kullanım

return (
  <DynamicList
    title="Anketler"
    path="surveys"
    isSearch={true}
    actions={
      <button className="bg-white px-4 py-2 rounded-md border border-gray-300 text-sm font-medium text-gray-700 hover:bg-gray-50">
        Yeni Anket Oluştur
      </button>
    }
    item={renderItem}
  />
);

Props Açıklamaları

• title Sayfa başlığını tanımlar. Örneğin "Anketler".
• path Verilerin alınacağı API endpoint'ini belirtir. Örneğin: 'surveys'.
• isSearch Arama kutusunun gösterilip gösterilmeyeceğini belirler (true | false).
• actions Üst alana yerleştirilecek buton, bağlantı gibi özel aksiyonları tanımlar.
• item Her bir API verisinin nasıl render edileceğini belirten fonksiyondur.

renderItem Fonksiyonu

survey nesnesini alarak her bir anketi detaylı şekilde render eder. Görsel, durum rozetleri, tür, oluşturulma tarihi, işlem tipi, sayfalama tipi ve aksiyon butonları dahil detaylı bir kart döner.

const renderItem = (survey: any) => {
  return (
    <div key={survey.id} className="bg-white rounded-lg border border-gray-200 hover:shadow-md transition-shadow">
      <div className="flex items-center p-4">
        {/* Admin Avatar */}
        <div className="flex-shrink-0 mr-4">
          <div className="w-8 h-8 bg-blue-500 rounded-full flex items-center justify-center">
            <span className="text-white text-sm font-medium">A</span>
          </div>
          <div className="text-xs text-gray-600 mt-1">Admin</div>
        </div>

        {/* Anket Başlığı ve Açıklaması */}
        <div className="flex-1 min-w-0 mr-8">
          <h3 className="text-lg font-medium text-gray-900 truncate">{survey.title}</h3>
          <p className="text-sm text-gray-600 mt-1 truncate">{survey.description}</p>
          <div className="flex items-center space-x-4 mt-2">
            {getStatusBadge(survey.isActive)}
            {getTypeDisplay(survey.type)}
            <span className="text-xs text-gray-500">
              Oluşturulma: {formatDate(survey.createdAt)}
            </span>
          </div>
        </div>

        {/* İstatistikler */}
        <div className="flex items-center space-x-6 text-center">
          <div>
            <div className="text-sm font-medium text-gray-900 mb-1">İşlem Tipi</div>
            {getProcessTypeDisplay(survey.processType)}
          </div>
          <div>
            <div className="text-sm font-medium text-gray-900 mb-1">Sayfalama</div>
            {getPaginationDisplay(survey.pagination)}
          </div>
          <div>
            <div className="text-lg font-semibold text-blue-600">{survey.languages.length}</div>
            <div className="text-xs text-gray-600">Dil</div>
          </div>
        </div>

        {/* Aksiyon Butonları */}
        <div className="flex items-center space-x-2 ml-8">
          <button className="px-4 py-2 bg-blue-50 text-blue-600 rounded-md text-sm font-medium hover:bg-blue-100">Paylaş</button>
          <button className="px-4 py-2 bg-gray-50 text-gray-600 rounded-md text-sm font-medium hover:bg-gray-100">Test</button>
          <button className="px-4 py-2 bg-gray-50 text-gray-600 rounded-md text-sm font-medium hover:bg-gray-100">Sonuçları Görün</button>
          <button className="p-2 text-gray-400 hover:text-gray-600">
            <MoreHorizontal className="h-4 w-4" />
          </button>
        </div>
      </div>
    </div>
  );
};

Yardımcı Fonksiyonlar

Liste öğesinin parçası olan rozetler, ikonlar ve formatlamalar için özel fonksiyonlar tanımlanmıştır:

• formatDate(date: string) → Tarihi kısa formatta döner
• getStatusBadge(isActive: boolean) → Aktif/Pasif rozetleri
• getTypeDisplay(type: string) → Tür bilgisi (Anket, Değerlendirme, Canlı, Özel)
• getPaginationDisplay(pagination: string) → Sayfalama tipi
• getProcessTypeDisplay(processType: string) → İşlem tipi (Yüzde, Sayı)

Görsel

Özet

• DynamicList, çok yönlü ve özelleştirilebilir bir liste bileşenidir.
• Veriler API üzerinden path ile alınır, arama opsiyoneldir.
• Her veri öğesi item fonksiyonu ile özelleştirilir.
• Detaylı gösterim, stil ve işlevsellik renderItem ile tanımlanabilir.