Ops Table Toolbar

Ops Table Toolbar, Ops Table bileşeninin üst kısmında bulunan ve filtreler, aksiyonlar ve diğer kontroller için özelleştirilebilir bir araç çubuğu sunar.

Ne İşe Yarar?

Ops Table Toolbar:

• Kullanıcıların tabloya filtre eklemesine veya mevcut filtreleri düzenlemesine olanak tanır.
• Seçilen satırlara toplu işlem yapılmasını sağlar.
• Tablonun genel görünümünü ve işlevselliğini özelleştirmek için araçlar içerir.

İş Mantığı

1. Filtre Görüntüleme ve Yönetimi:
   • Aktif filtreler, araç çubuğunda etiket olarak görüntülenir.
   • Kullanıcı bir etiketi kaldırdığında handleFilterDelete fonksiyonu çağrılır ve ilgili filtre silinir.
2. Toplu İşlem Yönetimi:
   • Kullanıcılar, seçilen satırlara toplu işlem uygulamak için toolBarButtons üzerinden tanımlanmış butonları kullanabilir.
3. Popover Tetikleme:
   • Kullanıcı, popover tetikleme butonlarına tıkladığında (örneğin, filtreleme veya kolon görünürlüğü), ilgili popover açılır ve ayar yapılmasına olanak tanır.

Aldığı Propslar

ITableToolbarProps 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ı.
toolBarButtons	IToolBarButtonProps[]	Araç çubuğuna eklenmiş özel butonlar.
tableVisibility	ITableVisibilityProps	Tablonun görünürlük ayarlarını yapılandırır.

Yönetilen Olaylar

1. Filtre Silme:

   • Kullanıcı Etkileşimi: Kullanıcı, filtre etiketinin üzerindeki çarpı ikonuna tıkladığında handleFilterDelete fonksiyonu çalışır.
   • İşleyiş:
     • filters state'i güncellenir ve ilgili filtre listeden kaldırılır.
     • Filtrelerin güncellenmesi sonrası opsService.handleFilter çağrılarak tablo yeniden yüklenir.
     • Bu işlem, kullanıcının tablo görünümünü filtrelerden arındırmasını sağlar.

2. Toplu İşlemler:

   • Kullanıcı Etkileşimi: Kullanıcı toplu işlem butonlarından birine tıkladığında handleButtonClick çalışır.
   • İşleyiş:
     • Seçilen satırlar table.getSelectedRowModel().rows üzerinden alınır.
     • toolBarButtons içerisindeki ilgili butonun onClick fonksiyonu tetiklenir ve seçilen satırlar argüman olarak bu fonksiyona iletilir.
     • Örnek: Seçilen satırlarla bir toplu silme işlemi yapılabilir.

3. Popover Tetikleme:

   • Kullanıcı Etkileşimi: Kullanıcı araç çubuğundaki popover tetikleme butonlarından birine tıkladığında ilgili popover aktif hale gelir.
   • İşleyiş:
     • OpsTablePopovers bileşeni çağrılır ve tetiklenen popover tipi (ToolBarEnums.Filters, ToolBarEnums.Density, vb.) gösterilir.
     • Kullanıcı, burada gerekli ayarları yaparak tabloyu özelleştirebilir.

Değişkenler ve Fonksiyonlar

1. filters

   • Tanım: Mevcut tablo filtrelerini temsil eder.
   • Kullanım: Araç çubuğunda etiket olarak görüntülenir ve kullanıcı tarafından düzenlenebilir.

2. handleFilterDelete

   • Tanım: Kullanıcının bir filtreyi silmesini sağlayan fonksiyon.
   • İşleyiş:
     • Filtre, filters listesinden kaldırılır.
     • Tablonun yeni filtrelerle yeniden yüklenmesini sağlar.

3. toolBarButtons

   • Tanım: Kullanıcının toplu işlem yapmasını sağlayan butonların listesidir.
   • Kullanım: Her buton label, onClick, startIcon, endIcon gibi özelliklerle özelleştirilebilir.

4. handleButtonClick

   • Tanım: Kullanıcının toplu işlem butonuna tıklamasını işleyen fonksiyon.
   • İşleyiş:
     • Seçilen satırları table.getSelectedRowModel().rows üzerinden alır.
     • İlgili butonun onClick fonksiyonunu tetikleyerek işlemi gerçekleştirir.

5. OpsTablePopovers

   • Tanım: Popover bileşenlerini yöneten yardımcı bir bileşen.
   • İşleyiş:
     • Kullanıcının seçimine göre (Columns, Filters, Export, vb.) ilgili popover içeriğini gösterir.

6. tableVisibility

   • Tanım: Tablo sütunlarının ve diğer görünürlük ayarlarının kontrolünü sağlayan prop.
   • Kullanım: Kullanıcı, belirli sütunların görünürlük durumunu bu ayar üzerinden değiştirebilir.

7. Filtre Silme:

   • Kullanıcı bir filtreyi kaldırmak için etiket üzerindeki çarpı ikonuna tıkladığında handleFilterDelete çalışır.
   • İlgili filtre filters state'inden kaldırılır ve tablo yeniden yüklenir.

8. Toplu İşlemler:

   • Kullanıcı toplu işlem butonuna tıkladığında, handleButtonClick çalışır.
   • Bu işlem, seçilen satırları argüman olarak alır ve toolBarButtons içerisindeki fonksiyonu tetikler.

9. Popover Tetikleme:

   • Kullanıcı bir popover tetikleme butonuna tıkladığında, OpsTablePopovers bileşeni uygun ayarları gösterir.

İlgili Bileşenler

• OpsTablePopovers: Araç çubuğundaki popover tetikleyicilerini yönetir.
• OpsTable: Araç çubuğunun bağlı olduğu ana tablo bileşeni.

Burada Yapılan Ana İşlemler

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

• Filtre Yönetimi: Aktif filtreler araç çubuğunda etiket olarak görüntülenir ve handleFilterDelete ile yönetilir.
• Toplu İşlem Yönetimi: Kullanıcıların toplu işlem yapmasına olanak tanır. İşlemler toolBarButtons üzerinden özelleştirilebilir.
• Popover Kontrolü: OpsTablePopovers bileşeni aracılığıyla filtreleme, yoğunluk ayarları gibi işlevler yönetilir.

Örnek Kullanım

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

export default function ExampleToolbar({
  table,
  opsService,
  toolBarButtons,
  tableVisibility,
}) {
  return (
    <OpsTableToolbar
      table={table}
      opsService={opsService}
      toolBarButtons={toolBarButtons}
      tableVisibility={tableVisibility}
    />
  );
}