Filters Popover

Filters Popover, Ops Table bileşeninde kullanıcıların filtreleri dinamik olarak yönetmesini sağlayan bir açılır menüdür. Kullanıcılar, sütunlara filtre eklemek, düzenlemek veya kaldırmak için bu bileşeni kullanabilir.

Ne İşe Yarar?

Filters Popover:

• Kullanıcıların tabloya dinamik filtreler eklemesine olanak tanır.
• Filtre türüne göre uygun bir arayüz sunar (metin, sayısal, tarihsel vb.).
• Mevcut filtreleri düzenlemek veya kaldırmak için araçlar sağlar.

İş Mantığı

1. Filtre Eklemek:
   • Kullanıcı "Add Filter" butonuna tıkladığında varsayılan bir filtre eklenir.
   • filters state'i güncellenerek tabloya yeni bir filtre eklenir.
2. Filtre Değerlerini Güncellemek:
   • handleFilterChange fonksiyonu ile filtre türü, sütunu veya değerleri dinamik olarak değiştirilir.
3. Filtre Kaldırmak:
   • Kullanıcı bir filtrenin yanındaki "delete" ikonuna tıkladığında, filters state'inden o filtre kaldırılır.
4. Filtreleri Uygulamak:
   • "Apply" butonuna tıklandığında, tüm filtreler opsService.handleFilter ile backend'e iletilir.
5. Varsayılan Filtrelere Dönmek:
   • Kullanıcı "Reset" butonuna tıkladığında tüm filtreler sıfırlanır.

Alt Bileşenler ve Fonksiyonlar

1. ColumnSelect

• Kullanıcı bir filtrenin uygulanacağı sütunu seçmek için kullanır.
• table.getAllLeafColumns kullanılarak tüm uygun sütunlar listelenir.

2. OperatorSelect

• Kullanıcı bir filtrenin operatörünü seçmek için kullanır (eşittir, içerir, başlar vb.).
• supportedFilterTypes ile seçilen sütunun desteklediği filtre türleri belirlenir.

3. BetweenValueComponent

• "Between" operatörü için iki değer alır ve handleFilterChange ile bu değerleri günceller.

4. StandartValueComponent

• Tek bir değer gerektiren filtreler için kullanılır (örneğin, metin veya sayı).
• Değeri dinamik olarak handleFilterChange ile günceller.

5. handleFilterChange

• Filtre değerlerini, operatörünü veya sütununu değiştirmek için kullanılır.
• Tüm değişiklikler filters state'ine yansıtılır ve tabloya uygulanır.

Aldığı Propslar

IFiltersPopoverProps arayüzünden alınan propslar şunlardır:

Prop	Tipi	Açıklama
table	Table<unknown>	Tablonun genel durumunu ve modellerini içerir.
opsService	IOpsTableService<any>	Tablonun veri işlemlerini yöneten servis sınıfı.
handlePopoverClose	() => void	Popover kapatma olayını yönetmek için bir callback fonksiyonu.

Yönetilen Olaylar

1. Filtre Ekleme:
   • Kullanıcı "Add Filter" butonuna tıkladığında, varsayılan bir filtre eklenir ve filters state'i güncellenir.
2. Filtre Değiştirme:
   • handleFilterChange ile sütun, operatör veya değer gibi filtre özellikleri güncellenir.
3. Filtre Silme:
   • Kullanıcı "delete" ikonuna tıkladığında, ilgili filtre filters state'inden kaldırılır.
4. Filtreleri Uygulama:
   • "Apply" butonuna tıklandığında, opsService.handleFilter ile filtreler backend'e iletilir.
5. Filtreleri Sıfırlama:
   • "Reset" butonuna tıklandığında, tüm filtreler sıfırlanır ve varsayılan duruma döner.

İlgili Bileşenler

• OpsTablePopovers: FiltersPopover bileşenini tetikleyen ana popover.
• ColumnSelect: Kullanıcıların filtre sütununu seçmesini sağlar.
• OperatorSelect: Kullanıcıların filtre operatörünü belirlemesini sağlar.
• BetweenValueComponent: İki değer gerektiren filtreleri yönetir.
• StandartValueComponent: Tek bir değer gerektiren filtreler için kullanılır.

Burada Yapılan Ana İşlemler

Filters Popover bileşeninde aşağıdaki işlemler anahtar rol oynar ve bu olaylara müdahale etmek için ilgili bölümlere odaklanabilirsiniz:

• Filtre Değer Yönetimi: Kullanıcıların sütun, operatör ve değer seçimleri handleFilterChange ile işlenir.
• Filtre Listeleme ve Silme: Mevcut filtreler filters state üzerinden kontrol edilir ve düzenlenir.
• Alt Bileşen Entegrasyonu: ColumnSelect, OperatorSelect, BetweenValueComponent gibi alt bileşenler ile filtre yönetimi sağlanır.
• Uygulama ve Sıfırlama: "Apply" ve "Reset" işlemleri ile filtreler backend'e senkronize edilir veya sıfırlanır.

Örnek Kullanım

import React from "react";
import FiltersPopover from "./FiltersPopover";

export default function ExampleFiltersPopover({
  table,
  opsService,
  handlePopoverClose,
}) {
  return (
    <FiltersPopover
      table={table}
      opsService={opsService}
      handlePopoverClose={handlePopoverClose}
    />
  );
}