OpsGridFormGenerator

OpsGridFormGenerator, dinamik form oluşturmak için kullanılan güçlü bir bileşendir. Sağlanan schema özelliğiyle farklı alanları otomatik olarak oluşturabilir ve API ile entegre çalışabilir. Bu döküman, bileşenin genel yapısını, mantığını ve desteklediği alanların detaylarını içerir.

---

Genel Yapı ve Mantık

Şema (Schema) İşleme

• Şema Tanımı: Form alanları, schema özelliği üzerinden tanımlanır. Her alan, bir name, label, type, ve opsiyonel özellikler (placeholder, registerOptions vb.) ile yapılandırılır.
• Alan Türleri: Şemadaki her alan, belirli bir type ile eşleştirilir ve bu type, alanın nasıl render edileceğini belirler (örneğin TEXT, NUMBER, SWITCH).

---

Grid Yapısı

OpsGridFormGenerator, MUI Grid sistemini kullanarak form öğelerini düzenler. Grid sistemi, her bir öğenin ekranda ne kadar yer kaplayacağını kontrol eder.

Varsayılan Grid Yapısı

Varsayılan olarak her bir form öğesi, gridSize değeri { xs: 12, sm: 12, md: 6, lg: 4, xl: 4 } olacak şekilde genişlikte render edilir. Bu, her öğenin yatayda bir satırı tamamen kaplamasını sağlar. Kullanıcılar, bu yapıyı gridSize özelliğiyle özelleştirebilir.

Grid Nasıl Çalışır?

• gridSize: MUI Grid yapılandırmasıdır ve her bir form öğesinin ekran boyutuna göre farklı genişliklerde görünmesini sağlar.
• Örneğin, { xs: 12, sm: 6 } ayarı küçük ekranlarda tam genişlikte, orta ekranlarda ise yarı genişlikte render edilir.

Örnek:

const schema = [
  {
    name: "Image",
    type: "image",
    label: "Ürün Görseli",
    gridSize: { xs: 12, sm: 6, md: 4 },
  },
  {
    name: "Description",
    type: "text",
    label: "Açıklama",
    gridSize: { xs: 12, sm: 12, md: 8 },
  },
];

Bu yapı, görselin orta ve büyük ekranlarda daha az yer kaplamasını sağlarken, açıklamanın geniş bir alan kaplamasını sağlar.

---

Alanların Dinamik Olarak Render Edilmesi

Render Yöntemleri

1. renderGridItem: Tek bir öğe veya birden fazla alan içeren grid öğelerini oluşturur.
2. renderMultiGridItem: Birden fazla alt grup içeren grid öğelerini render eder.
3. renderComponent: Özel bileşenleri veya statik içerikleri render etmek için kullanılır.

Örnek Kullanımlar

// Tek Grid Elemanı
const schema = [
  {
    name: "Product Details",
    schema: [
      { name: "name", type: "text", label: "Ürün Adı" },
      { name: "brand", type: "text", label: "Marka" },
    ],
  },
];

// Çoklu Alt Gruplar
const schema = [
  {
    multiSchema: [
      {
        name: "Fiyat Bilgileri",
        schema: [
          { name: "price", type: "number", label: "Fiyat" },
          { name: "tax", type: "number", label: "Vergi" },
        ],
      },
      {
        name: "Multi 12",
        schema: [
          {
            name: "Multi16",
            visibility: FormItemVisibilityEnum.Both,
            type: FormItemTypeEnum.NUMBER,
            label: "Matrah",
          },
          {
            name: "Multi26",
            visibility: FormItemVisibilityEnum.Both,
            type: FormItemTypeEnum.NUMBER,
            label: "Tax",
          },
        ],
      },
    ],
  },
];

// Özel Bileşen Render
const schema = [
  {
    name: "Özel Bilgi",
    renderComponent: (apiData) => (
      <CustomComponent title="Bilgi" value={apiData.info} />
    ),
  },
];

---

Validasyon ve Form Yönetimi

Validasyon Kuralları

• react-hook-form: Bu kütüphane, formun değerlerini ve validasyonunu yönetmek için kullanılır.
• registerOptions: Her alan için doğrulama kuralları tanımlanabilir. Örnek olarak:

  registerOptions: {
    required: "Bu alan zorunludur",
    minLength: {
      value: 3,
      message: "Minimum 3 karakter olmalıdır",
    },
  }

---

Gönderim ve API İşlemleri

Form gönderim işlemi onSubmit özelliği ile tanımlanır. Gönderim sırasında form verileri API'ye gönderilir.

Örnek:

const handleSubmit = (data) => {
  console.log("Gönderilen Veri:", data);
};

<OpsGridFormGenerator
  schema={formSchema}
  onSubmit={handleSubmit}
  title="Form Başlığı"
/>;

---

Buton Kontrolleri

submitButtonVisible ve deleteButtonVisible özellikleri, formda gönderim ve silme butonlarının görünürlüğünü kontrol eder.

• Gönderim Butonu:

  <OpsGridFormGenerator submitButtonVisible={true} />
• Silme Butonu:

  <OpsGridFormGenerator deleteButtonVisible={true} />

---

Desteklenen Input Türleri

Tüm Türler ve Enum Değerleri

• Text Field (text)
• Number Field (number)
• Email (email)
• Telephone (tel)
• Checkbox (checkbox)
• Switch (switch)
• Select (select)
• AutoComplete (autocomplete)
• Date Picker (date)
• DateTime Picker (datetime-local)
• Time Input (time)
• Image Upload (image)
• File Input (file)
• Radio Button (Radio)
• Multi-Language Text Field (languageText)
• Rich Text Editor (editor)

---

Ortak Props

Prop	Tip	Açıklama
name	string	Form öğesinin benzersiz adı.
label	string	Form öğesinin etiketi.
placeholder	string	Yer tutucu metin.
defaultValue	any	Varsayılan değer.
visibility	FormItemVisibilityEnum	Görünürlük durumu.
registerOptions	RegisterOptions	Validasyon kuralları.

---

Türlere Göre Props

1. Text Field (Metin Girişi)

Prop	Tip	Açıklama
multiLine	boolean	Çok satırlı giriş alanı.
rows	number	Satır sayısı.

2. Number Field (Sayı Girişi)

Prop	Tip	Açıklama
min	number	Minimum değer.
max	number	Maksimum değer.

3. Switch (Açma/Kapama Anahtarı)

Prop	Tip	Açıklama
options	{ value, label }[]	Açık/Kapalı etiket ve değerler.

4. Date Picker (Tarih Seçici)

Prop	Tip	Açıklama
minDate	string	Minimum tarih.
maxDate	string	Maksimum tarih.

5. AutoComplete

Prop	Tip	Açıklama
getOptions	function	Dinamik seçenek listesi sağlayıcı.
lookUpParams	object	API'den filtreleme parametreleri.
isMultiple	boolean	Çoklu seçim desteği.

---

Örnek Kullanım

Basit Bir Form Örneği

Aşağıda, temel bir form oluşturma örneği verilmiştir:

import OpsGridFormGenerator from "./OpsGridFormGenerator";

const formSchema = [
  { name: "username", label: "Kullanıcı Adı", type: "TEXT", gridSize: 6 },
  { name: "email", label: "E-posta", type: "EMAIL", gridSize: 6 },
  { name: "birthdate", label: "Doğum Tarihi", type: "DATE", gridSize: 6 },
];

export default function MyForm() {
  const handleSubmit = (data) => {
    console.log(data);
  };

  return (
    <OpsGridFormGenerator
      schema={formSchema}
      onSubmit={handleSubmit}
      title="Yeni Form"
      submitButtonVisible={true}
    />
  );
}