Ops Table Provider

Ops Table Provider, Ops Table ekosistemindeki tüm bileşenlerin yapılandırılmasını ve başlatılmasını yöneten ana bileşendir. Bu bileşen, tablo durumunu yönetmek, servis çağrılarını düzenlemek ve tablo özelliklerini uyarlamak için tasarlanmıştır.

Ne İşe Yarar?

Ops Table Provider:

• Tabloyu başlatmak için gerekli tüm ayarları yükler.
• Redux aracılığıyla tablo durumunu yönetir.
• API'den alınan metadata'ları işleyerek tablo sütunlarını dinamik olarak oluşturur.
• Tabloda kullanılan diğer bileşenlere gerekli props ve verileri aktarır.

İş Mantığı

1. Durum Yönetimi:
   • resetTableState: Redux'taki tablo durumunu sıfırlamak için kullanılır.
   • tableResponse ve diğer durumlar Redux Store üzerinden yönetilir.
2. Servis Entegrasyonu:
   • opsService.generateColumns: API'den alınan metadata'lar kullanılarak tablo sütunları oluşturulur.
   • Yükleme durumları loading state ile yönetilir.
3. Bileşen Etkileşimleri:
   • OpsTable bileşenini render eder ve gerekli tüm özellikleri aktarır.
   • Yükleme sırasında OpsTableContainerSkeleton bileşenini gösterir.
4. Varsayılan Özelliklerin Uyarlanması:
   • tableDefaultPropsWithInfo objesi oluşturularak pageInfo gibi bilgiler tablo özelliklerine entegre edilir. Bu sayede her kullanıcı, detay ve silme izinleri gibi tabloyla ilişkili dinamik bilgileri kullanabilir.
5. API'den Gelen Verilerin Aktarımı:
   • tableResponse içindeki data, alt bileşenlere (OpsTable gibi) props olarak iletilir. Böylece tüm veri akışı merkezi bir şekilde kontrol edilir.
6. Yan Etkiler (useEffect):
   • useEffect ile bileşen unmounted olduğunda tablo durumu sıfırlanır. Bu, bileşenin temiz bir başlangıç yapmasını sağlar.

Aldığı Propslar

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

Prop	Tipi	Açıklama
opsService	IOpsTableService<any>	Tablonun verilerini yöneten servis sınıfı.
actionIcons	Array<(row) => ReactNode>	Her satır için aksiyon ikonları eklemek için kullanılan bir dizi.
tableVisibility	ITableVisibilityProps	Tablonun görünürlük ayarlarını yapılandırır.
toolBarButtons	IToolBarButtonProps[]	Tablonun araç çubuğuna özel butonlar eklemek için kullanılan bir dizi.
tableProps	ITableProps	Tablonun özelliklerini özelleştirmek için kullanılır.
customAppBar	ReactNode	Özelleştirilmiş araç çubuğu bileşeni.
onRowClick	(row) => void	Satıra tıklama olayını yönetmek için bir callback fonksiyonu.

Yönetilen Olaylar

1. Metadata İşleme:
   • opsService.generateColumns ile metadata işlenir ve tablo sütunları oluşturulur.
2. Tablo Durumu Yönetimi:
   • Redux üzerinden tablo durumunun sıfırlanması ve yönetilmesi sağlanır.
3. Yükleme Durumu:
   • loading state kontrol edilerek skeleton bileşeni gösterilir veya gerçek tablo bileşeni render edilir.
4. Dinamik Özellik Uyarlaması:
   • tableDefaultPropsWithInfo ile pageInfo gibi bilgiler tablo özelliklerine dahil edilir. Örneğin, showEditIcon ve showDeleteIcon gibi dinamik özellikler buradan ayarlanır.
5. Satır Tıklama:
   • onRowClick callback'i sayesinde, tablo satırlarına tıklama olayları özelleştirilebilir.

İlgili Bileşenler

• OpsTable: Tabloyu temsil eden ana bileşen.
• OpsTableContainerSkeleton: Yükleme sırasında gösterilen iskelet bileşeni.
• OpsTableToolbar: Tablo araç çubuğu.

Burada Yapılan Ana İşlemler

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

• Redux Durum Yönetimi: Tablo durumu, resetTableState ve tableResponse gibi Redux eylemleriyle kontrol edilir.
• Metadata İşleme: opsService.generateColumns fonksiyonu, API'den alınan metadata'ları sütun yapılandırmasına dönüştürür.
• Varsayılan Özellikler: tableDefaultPropsWithInfo üzerinden pageInfo gibi dinamik değerler tabloya entegre edilir.
• Yükleme Durumu: loading durumuna göre OpsTableContainerSkeleton veya OpsTable bileşeni render edilir.
• Satır Etkileşimleri: onRowClick callback'i, tablo satırlarına tıklama işlemlerini özelleştirmek için kullanılır.

Örnek Kullanım

import React from "react";
import OpsTableProvider from "./OpsTableProvider";
import MyCustomOpsService from "../services/MyCustomOpsService";

export default function MyTablePage() {
  return (
    <OpsTableProvider
      opsService={new MyCustomOpsService()}
      actionIcons={[
        (row) => <button onClick={() => alert(`Edit ${row.id}`)}>Edit</button>,
      ]}
      tableVisibility={{ columnsVisibility: true, filtersVisibility: true }}
      toolBarButtons={[
        {
          label: "Export",
          color: "primary",
          onClick: () => console.log("Export clicked"),
        },
      ]}
      tableProps={{ showEditIcon: true, showDeleteIcon: true }}
      onRowClick={(row) => console.log("Row clicked:", row)}
    />
  );
}