Skip to main content
Version: 1.0.1

Aggregation Popover

Aggregation Popover, Ops Table bileşeninde kullanıcıların belirli sütunlarda toplama işlemlerini yapılandırmasını sağlar. Kullanıcılar toplam, ortalama, minimum, maksimum gibi toplama türleri ekleyebilir.

Ne İşe Yarar?​

Aggregation Popover:

  • Kullanıcıların sütun bazlı toplama işlemleri eklemesine olanak tanır.
  • Birden fazla toplama türünü aynı anda uygulamayı destekler.
  • Uygulanan toplamaları dinamik olarak tabloda görüntüler.

İş Mantığı​

  1. Toplama Ekleme:
    • Kullanıcı "Add Aggregation" butonuna tıkladığında varsayılan bir toplama eklenir.
    • aggregations state'i güncellenerek yeni bir toplama işlemi tabloya eklenir.
  2. Toplama Değerlerini Güncelleme:
    • Kullanıcı, toplama sütunu veya türünü değiştirdiğinde handleAggregationChange fonksiyonu çağrılır.
    • Yeni değer aggregations state'ine yansıtılır.
  3. Toplama Silme:
    • Kullanıcı bir toplamanın yanındaki "delete" ikonuna tıkladığında, ilgili toplama işlemi aggregations state'inden kaldırılır.
  4. Toplamaları Uygulama:
    • "Apply" butonuna tıklandığında, opsService.handleAggregation ile toplama işlemleri backend'e iletilir.
  5. Varsayılan Toplamalara Dönme:
    • Kullanıcı "Reset" butonuna tıkladığında tüm toplama işlemleri sıfırlanır ve varsayılan duruma döner.

Alt Bileşenler ve Fonksiyonlar​

1. handleAggregationChange​

  • Kullanıcının sütun veya toplama türü seçimlerini yönetir.
  • Seçilen sütun ve tür, ilgili toplama işlemine uygulanır ve aggregations state'i güncellenir.

2. handleAddAggregation​

  • Yeni bir toplama işlemi eklemek için kullanılır.
  • Varsayılan bir toplama işlemi (AggeretionsDefaultItem) aggregations listesine eklenir.

3. handleRemoveAggregation​

  • Kullanıcının bir toplama işlemini kaldırmasına olanak tanır.
  • İlgili toplama işlemi aggregations listesinden kaldırılır.

4. handleSubmitAggregations​

  • Tüm toplama işlemlerini uygulamak için çağrılır.
  • opsService.handleAggregation ile toplama işlemleri backend'e gönderilir.

5. handleResetAggregations​

  • Tüm toplama işlemlerini sıfırlamak için kullanılır.
  • aggregations state'i temizlenir ve popover kapatılır.

Aldığı Propslar​

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

PropTipiAçıklama
tableTable<unknown>Tablonun genel durumunu ve modellerini içerir.
opsServiceIOpsTableService<any>Tablonun veri işlemlerini yöneten servis sınıfı.
handlePopoverClose() => voidPopover kapatma olayını yönetmek için bir callback fonksiyonu.

Yönetilen Olaylar​

  1. Toplama Ekleme:
    • Kullanıcı "Add Aggregation" butonuna tıkladığında handleAddAggregation çağrılır ve varsayılan bir toplama eklenir.
  2. Toplama Değiştirme:
    • Kullanıcı sütun veya toplama türünü değiştirdiğinde, handleAggregationChange ile seçimler güncellenir.
  3. Toplama Silme:
    • "Delete" ikonuna tıklandığında handleRemoveAggregation çağrılır ve ilgili toplama kaldırılır.
  4. Toplamaları Uygulama:
    • "Apply" butonuna tıklandığında handleSubmitAggregations çalışır ve toplamalar backend'e gönderilir.
  5. Toplamaları Sıfırlama:
    • Kullanıcı "Reset" butonuna tıkladığında handleResetAggregations çağrılır ve tüm toplamalar varsayılan duruma döner.

İlgili Bileşenler​

  • OpsTablePopovers: AggregationPopover bileşenini tetikleyen ana popover.
  • OpsTable: Toplama sonuçlarının gösterildiği ana tablo bileşeni.

Burada Yapılan Ana İşlemler​

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

  • Toplama Ekleme ve Silme: Kullanıcıların yeni toplama işlemleri eklemesi veya mevcutları kaldırması handleAddAggregation ve handleRemoveAggregation ile yönetilir.
  • Toplama Türü ve Sütun Yönetimi: Kullanıcı seçimleri handleAggregationChange ile işlenir ve toplama işlemleri güncellenir.
  • Uygulama ve Sıfırlama: "Apply" ve "Reset" butonları ile toplamalar backend'e senkronize edilir veya sıfırlanır.

Örnek Kullanım​

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

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