Actions Cell

Actions Cell, Ops Table bileşeninde satır seviyesindeki düzenleme ve silme gibi işlemleri yönetmek için kullanılan bir hücre bileşenidir. Kullanıcılar, her satırda bulunan aksiyon butonları aracılığıyla işlem yapabilir.

Ne İşe Yarar?

Actions Cell:

• Satır seviyesindeki düzenleme ve silme işlemlerini yönetir.
• Kullanıcıya özel aksiyon butonları ekleme imkanı tanır.

İş Mantığı

1. Düzenleme İşlemi:

   • Kullanıcı düzenleme ikonuna tıkladığında handleEditIconClick fonksiyonu çağrılır.
   • Eğer tableProps.handleEditIconClick tanımlıysa bu fonksiyon çalıştırılır, aksi takdirde varsayılan handleEditIconClick işlevi çağrılır.

2. Silme İşlemi:

   • Kullanıcı silme ikonuna tıkladığında handleDeleteIconClick fonksiyonu çağrılır.
   • Eğer tableProps.handleDeleteIconClick tanımlıysa bu fonksiyon çalıştırılır, aksi takdirde varsayılan handleDeleteIconClick işlevi çağrılır.

3. Özel Aksiyonlar:

   • actionIcons dizisi üzerinden her satır için özelleştirilmiş aksiyonlar eklenebilir.

Aldığı Propslar

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

Prop	Tipi	Açıklama
row	Row<unknown>	Aksiyonların uygulanacağı satırın verisini içerir.
actionIcons	Array<(row) => ReactNode>	Her satır için özel aksiyon ikonları eklemek için kullanılan bir dizi.
handleDeleteIconClick	() => void	Silme ikonuna tıklama olayını yönetmek için kullanılan bir fonksiyon.
handleEditIconClick	(row: Row<unknown>) => void	Düzenleme ikonuna tıklama olayını yönetmek için kullanılan bir fonksiyon.
tableProps	ITableProps	Tablonun genel özelliklerini içerir.

Yönetilen Olaylar

1. Düzenleme:

   • Kullanıcı Etkileşimi: Kullanıcı düzenleme ikonuna tıkladığında handleEditIconClick çalışır.
   • İşleyiş:
     • Eğer tableProps.handleEditIconClick tanımlıysa bu fonksiyon çalıştırılır. Bu, özel bir düzenleme işlevi tanımlanmasını sağlar.
     • Varsayılan işlev olarak opsService.handleEdit kullanılabilir. Bu, ilgili satırın düzenleme formunu açabilir veya başka bir API çağrısı yapabilir.
     • row parametresi, düzenleme işleminde kullanılacak tüm satır verilerini içerir.

2. Silme:

   • Kullanıcı Etkileşimi: Kullanıcı silme ikonuna tıkladığında handleDeleteIconClick çalışır.
   • İşleyiş:
     • Eğer tableProps.handleDeleteIconClick tanımlıysa bu fonksiyon çalıştırılır. Bu, özel bir silme işlevi tanımlanmasını sağlar.
     • Varsayılan işlev olarak opsService.handleDelete kullanılabilir. Bu, ilgili satırın silinmesini sağlayan bir API çağrısı yapabilir.
     • Silme işleminden sonra, tablo durumu güncellenebilir veya bir geri bildirim mesajı gösterilebilir.

3. Özel Aksiyonlar:

   • Kullanıcı Etkileşimi: actionIcons dizisi üzerinden eklenen aksiyon ikonlarına tıklanarak kullanıcı tanımlı işlemler gerçekleştirilir.
   • İşleyiş:
     • actionIcons içerisindeki her bir ikon, bir fonksiyon döner. Bu fonksiyon, row parametresiyle çalışır ve ilgili satır verilerini kullanır.
     • Örneğin, "Görüntüle" veya "Paylaş" gibi özel aksiyonlar burada tanımlanabilir.

Değişkenler ve Fonksiyonlar

1. row

   • Tanım: Aksiyon hücresinin bağlı olduğu satırın tüm verilerini içerir.
   • Kullanım: Tüm aksiyon işlemlerinde, ilgili satırın verilerine erişmek için kullanılır.

2. actionIcons

   • Tanım: Her satır için eklenebilen özel aksiyon ikonlarını içerir.
   • Kullanım: Her ikon, bir ReactNode döner ve kullanıcı etkileşimiyle çalışır.
   • Örnek:

     actionIcons = [
       (row) => <button onClick={() => console.log(row)}>Custom Action</button>,
     ];

3. handleEditIconClick

   • Tanım: Düzenleme ikonuna tıklama olayını yöneten fonksiyon.
   • Kullanım: Düzenleme işlemine özel bir işlev tanımlamak veya varsayılan düzenleme davranışını çalıştırmak için kullanılır.

4. handleDeleteIconClick

   • Tanım: Silme ikonuna tıklama olayını yöneten fonksiyon.
   • Kullanım: Silme işlemine özel bir işlev tanımlamak veya varsayılan silme davranışını çalıştırmak için kullanılır.

5. tableProps

   • Tanım: Tablo özelliklerini içerir ve düzenleme/silme işlemleri için özel işlevler tanımlanmasına olanak tanır.
   • Kullanım: showEditIcon veya showDeleteIcon gibi özellikleri kontrol etmek için kullanılır.

6. opsService.handleEdit (Varsayılan)

   • Tanım: Satır düzenleme işlemini gerçekleştiren varsayılan bir servis fonksiyonu.
   • Kullanım: Kullanıcının tıkladığı satırın düzenleme işlemini başlatır.

7. opsService.handleDelete (Varsayılan)

   • Tanım: Satır silme işlemini gerçekleştiren varsayılan bir servis fonksiyonu.
   • Kullanım: Kullanıcının tıkladığı satırı veritabanından siler ve tabloyu günceller.

8. Düzenleme:

   • Kullanıcı Etkileşimi: Kullanıcı düzenleme ikonuna tıkladığında handleEditIconClick çalışır.
   • İşleyiş:
     • Eğer tableProps.handleEditIconClick tanımlıysa bu fonksiyon çağrılır.
     • Varsayılan işlev olarak opsService.handleEdit kullanılabilir.

9. Silme:

   • Kullanıcı Etkileşimi: Kullanıcı silme ikonuna tıkladığında handleDeleteIconClick çalışır.
   • İşleyiş:
     • Eğer tableProps.handleDeleteIconClick tanımlıysa bu fonksiyon çağrılır.
     • Varsayılan işlev olarak opsService.handleDelete kullanılabilir.

10. Özel Aksiyonlar:

    • actionIcons dizisi, her satır için özelleştirilmiş aksiyonlar eklemek için kullanılır.
    • Kullanıcı tanımlı bu aksiyonlar, her bir satırda bağımsız olarak çalışır.

İlgili Bileşenler

• OpsTable: Aksiyon hücresinin bulunduğu ana tablo bileşeni.
• OpsTableProvider: Tablonun genel yapılandırmasının sağlandığı üst bileşen.

Burada Yapılan Ana İşlemler

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

• Düzenleme ve Silme Yönetimi: Satır seviyesinde düzenleme ve silme işlemleri handleEditIconClick ve handleDeleteIconClick ile yönetilir.
• Özel Aksiyonlar: Kullanıcıların ihtiyaçlarına göre aksiyon ikonları actionIcons ile özelleştirilebilir.

Örnek Kullanım

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

export default function ExampleActionsCell({ row, actionIcons, tableProps }) {
  return (
    <ActionsCell
      row={row}
      actionIcons={actionIcons}
      handleEditIconClick={(row) => console.log("Edit clicked", row)}
      handleDeleteIconClick={() => console.log("Delete clicked")}
      tableProps={tableProps}
    />
  );
}