OpsGridForm

OpsGridForm, dinamik form oluşturma ve API entegrasyonu işlemleri için kullanılan bir bileşendir. Bu bileşen, CRUD işlemlerini destekler ve özelleştirilebilir bir yapı sunar.

---

Genel Özellikler

• Dinamik Form: schema özelliği ile form alanları kolayca tanımlanabilir.
• CRUD İşlemleri: OpsGridForm, hem ekleme (POST) hem de güncelleme (PUT) işlemlerini destekler.
• Özelleştirilebilir Gönderim: customSubmit fonksiyonu ile formun gönderim işlemi özelleştirilebilir.
• Yetkilendirme Kontrolleri: Formun düzenlenebilir veya silinebilir olması kullanıcı yetkilerine bağlıdır.

---

Props

Prop	Tip	Açıklama
url	string	API endpoint adresi.
opsService	any	Formun güncel işlemleri tetiklemek için kullanılan servis.
schema	IOpsGridFormItem[]	Form alanlarının tanımlandığı yapı.
title	string	Form başlığı (Ekleme modunda).
editTitle	string	Form başlığı (Düzenleme modunda).
customSubmit	(formData: any, setSubmitLoading: (loading: boolean) => void) => void	Özelleştirilmiş gönderim fonksiyonu.
succesCallback	() => void	Gönderim işlemi başarılı olduğunda tetiklenecek geri çağırım fonksiyonu.
deletePropertyName	string	Silme işleminde gönderilecek parametre adı. Varsayılan olarak "id".
deleteModalProps	{ title?: string; info?: string }	Silme modalı için başlık ve bilgi metni özelleştirme.

---

İşlevler

Form Gönderim İşlemi (handleSubmit)

• Varsayılan İşleyiş:
  • Yeni bir kayıt eklemek için POST, mevcut bir kaydı düzenlemek için PUT metodu kullanılır.
  • Veriler diffFormObject fonksiyonu ile önceki durum ile karşılaştırılır.

Silme İşlemi (handleDelete)

• Silme işlemi, silinecek öğenin id değerini kullanarak DELETE isteği gönderir.
• Silme işlemi sırasında kullanıcıdan onay almak için bir modal görüntülenir.
• deletePropertyName özelliğiyle API'ye gönderilecek parametre adı özelleştirilebilir.

Şema Filtreleme (filteredSchema)

• filteredSchema fonksiyonu, formun düzenleme veya ekleme moduna göre şemayı filtreler:
  • Ekleme Modu: visibility: Add veya Both olan alanlar gösterilir.
  • Düzenleme Modu: visibility: Edit veya Both olan alanlar gösterilir.

Yetkilendirme Kontrolleri

• Form, kullanıcının düzenleme veya silme yetkisi olup olmadığını kontrol eder:
  • Düzenleme Yetkisi: pageInfo.hasEdit ve pageInfo.userCanEdit.
  • Silme Yetkisi: pageInfo.hasDelete ve pageInfo.userCanDelete.
• Bu kontroller, form üzerinde gönderim ve silme butonlarının görünürlüğünü belirler.

filterOpsGridSchema Yardımcı Fonksiyonu

• filterOpsGridSchema fonksiyonu, form şemasını düzenleme veya ekleme moduna göre filtreler:
  • Girdi Parametreleri:
    • schema: Form alanlarının tanımlandığı şema.
    • isEdit: Formun düzenleme modunda olup olmadığını belirten boolean değer.
  • İşleyiş:
    • Şema öğeleri, görünürlük kurallarına (visibility) göre filtrelenir.
    • Görünürlük Kuralları:
      • Ekleme Modu: visibility: Add veya Both olan alanlar gösterilir.
      • Düzenleme Modu: visibility: Edit veya Both olan alanlar gösterilir.
    • Çoklu şema (multiSchema) içeren alanlarda, her bir alt şema öğesi de aynı şekilde filtrelenir.
    • Eğer bir öğe özel bir bileşen (renderComponent) içeriyorsa, bu bileşen görünürlük kurallarına uygun şekilde işlenir.
  • Dönen Değer:
    • Filtrelenmiş şema, sadece ilgili modda görüntülenmesi gereken alanları içerir.

---

Kullanım Örnekleri

Basit Bir Kullanım

import OpsGridForm from "@/components/OpsGridForm";
import { FormItemTypeEnum } from "@/enums/IFormItemTypeEnum";
import { FormItemVisibilityEnum } from "@/enums/FormItemVisibilityEnum";

const schema = [
  {
    name: "Ürün Bilgileri",
    schema: [
      {
        name: "productName",
        type: FormItemTypeEnum.TEXT,
        label: "Ürün Adı",
        visibility: FormItemVisibilityEnum.Both,
      },
      {
        name: "price",
        type: FormItemTypeEnum.NUMBER,
        label: "Fiyat",
        visibility: FormItemVisibilityEnum.Both,
      },
    ],
  },
];

export default function ProductForm() {
  return (
    <OpsGridForm
      url="/api/products"
      schema={schema}
      title="Yeni Ürün Ekle"
      editTitle="Ürün Düzenle"
      succesCallback={() => alert("İşlem başarılı!")}
    />
  );
}

Custom Submit Kullanımı

const customSubmit = (formData, setSubmitLoading) => {
  setSubmitLoading(true);
  console.log("Özelleştirilmiş veri gönderimi: ", formData);
  setTimeout(() => {
    alert("Başarılı şekilde gönderildi!");
    setSubmitLoading(false);
  }, 1000);
};

<OpsGridForm
  url="/api/products"
  schema={schema}
  title="Yeni Ürün Ekle"
  customSubmit={customSubmit}
/>;

---

Silme Modalı

• Silme işlemi sırasında kullanıcıdan onay almak için bir modal görüntülenir.
• Modalın başlık ve açıklama metni, deleteModalProps özelliğiyle özelleştirilebilir:
  • deleteModalProps.title: Modal başlığı. Varsayılan olarak "Silmek istediğinize emin misiniz?".
  • deleteModalProps.info: Modal açıklaması. Varsayılan olarak "Bu işlem geri alınamaz.".

---

İpuçları

1. Hata Yönetimi:

   • Gönderim sırasında hata oluşursa, işlem durdurulur ve kullanıcı bilgilendirilir.

2. Loading Durumu:

   • submitLoading durumu, gönderim sırasında kullanıcıya işlem yapıldığını göstermek için kullanılır.

3. Yetkilendirme Kontrolleri:

   • Kullanıcının düzenleme veya silme yetkilerini kontrol etmek için usePageInformation hook'u kullanılır.

Bu doküman, OpsGridForm bileşenini anlamak ve verimli bir şekilde kullanmak için kapsamlı bir rehber sunar. Daha fazla özelleştirme veya sorun giderme konusunda desteğe ihtiyacınız varsa, lütfen bize ulaşın.