Okul.com.tr — Eğitim Ekosistemi

CRM URL Tabanlı Filtreleme

2 dakika okuma süresi

Proje: Okul.com.tr CRM · Hub: Okul.com.tr CRM — Conventions

CRM URL Tabanlı Filtreleme

Neden URL Tabanlı

  • Filtreler, arama, sayfa, sıralama URL’e yazılır
  • Paylaşılabilir/bookmarkable link’ler
  • Browser geri/ileri navigasyonu çalışır

useUrlFilters Hook

useListFilters’ın alt katmanı. Doğrudan kullanmak yerine useListFilters tercih edilir.

URL Parametreleri

  • search → arama metni
  • page → mevcut sayfa
  • per_page → sayfa boyutu
  • sort_col + sort_dir → sıralama
  • filter[<name>] → her filtre için ayrı parametre

Metotlar

updateSearch(value: string)
updatePage(page: number)
updatePageCount(count: number)
updateSort({ column, direction })
updateFilters(filters: Record<string, string>)
clearFilters()
initializeFiltersFromUrl(initialFilters) → GenericFilter[]

buildApiParams Dönüşümü

URL’deki filter[school-type] → API’ye filter[school-type]: value olarak gönderilir.

dateRange tipi filtreler özel işlenir:

  • URL değeri: "2024-01-01,2024-12-31" (virgülle ayrılmış min,max)
  • API’ye: filter[date][min] ve filter[date][max] olarak iki ayrı parametre

ISO format tarihler otomatik YYYY-MM-DD’ye dönüştürülür.

filterKeyMappings Kullanım Amacı

UI’da kullanıcı dostu isimler ile API’nin beklediği parametre adları farklı olabilir:

// Okullar sayfasındaki örnek
const FILTER_KEY_MAPPINGS = {
    'city':         'location-1',   // Şehir → location level 1
    'district':     'location-2',   // İlçe → location level 2
    'neighborhood': 'location-3',   // Mahalle → location level 3
    'school_name':  'school-name'   // underscore → kebab-case
};

displayFilters (Aktif Filtre Badge’leri)

UI’da gösterilen aktif filtreler için:

interface DisplayFilter {
    id: string;        // filter key
    filterLabel: string; // human-readable label (örn: "Şehir")
    value: string;     // raw value
    label: string;     // display value (select'lerde option.label kullanılır)
}

user-search, admin-search, school-search tipi filtreler için filter.displayValue kullanılır (ID değil isim gösterilir).

Sync Mantığı

URL değiştiğinde (back/forward), useEffect ile setFilters tekrar çağrılır. Sonsuz döngü önlemek için prevUrlFiltersRef ve prevInitialFiltersRef ref’leri kullanılır.

Grafik Görünümü

Backlinkler