feat: add datagrid module template and configuration documentation
This commit is contained in:
Ümit Tunç
@@ -35,22 +35,66 @@ $relationDatas = [
|
|||||||
'allowEditing' => true, // Hücre içinde manuel path düzenleme
|
'allowEditing' => true, // Hücre içinde manuel path düzenleme
|
||||||
],
|
],
|
||||||
'rt_result' => [
|
'rt_result' => [
|
||||||
'type' => 'select', // Açılır menü
|
'type' => 'select', // Sabit seçenekli açılır menü
|
||||||
'dataSource' => [ // Select için veri kaynağı (Opsiyonel: array veya URL olabilir)
|
'dataSource' => [
|
||||||
['id' => 'ACCEPTED', 'name' => 'ACCEPTED'],
|
['id' => 'ACCEPTED', 'name' => 'ACCEPTED'],
|
||||||
['id' => 'REJECTED', 'name' => 'REJECTED'],
|
['id' => 'REJECTED', 'name' => 'REJECTED'],
|
||||||
['id' => 'REPAIR', 'name' => 'REPAIR'],
|
['id' => 'REPAIR', 'name' => 'REPAIR'],
|
||||||
],
|
],
|
||||||
],
|
],
|
||||||
'welding_date' => [
|
'welding_date' => [
|
||||||
'type' => 'date', // Tarih seçici
|
'type' => 'date', // Tarih seçici (YYYY-MM-DD)
|
||||||
|
],
|
||||||
|
'created_at' => [
|
||||||
|
'type' => 'datetime', // Tarih ve Saat seçici
|
||||||
|
],
|
||||||
|
'shift_time' => [
|
||||||
|
'type' => 'time', // Saat seçici
|
||||||
],
|
],
|
||||||
'rt_scope' => [
|
'rt_scope' => [
|
||||||
'type' => 'integer', // Sayısal giriş
|
'type' => 'integer', // Tam sayı girişi
|
||||||
],
|
],
|
||||||
'other' => [
|
'large_val' => [
|
||||||
|
'type' => 'bigint', // Büyük tam sayı girişi
|
||||||
|
],
|
||||||
|
'price' => [
|
||||||
|
'type' => 'decimal', // Ondalıklı sayı girişi (Hassas)
|
||||||
|
],
|
||||||
|
'ratio' => [
|
||||||
|
'type' => 'float', // Ondalıklı sayı girişi
|
||||||
|
],
|
||||||
|
'description' => [
|
||||||
'type' => 'long-text', // Çok satırlı metin (TextArea)
|
'type' => 'long-text', // Çok satırlı metin (TextArea)
|
||||||
]
|
],
|
||||||
|
'tags' => [
|
||||||
|
'type' => 'multiple-choice', // Çoklu seçim (Etiket mantığı)
|
||||||
|
'dataSource' => [
|
||||||
|
['id' => 'tag1', 'name' => 'Tag 1'],
|
||||||
|
['id' => 'tag2', 'name' => 'Tag 2'],
|
||||||
|
],
|
||||||
|
],
|
||||||
|
'category' => [
|
||||||
|
'type' => 'select-dropdown', // Arama yapılabilir açılır menü
|
||||||
|
'dataSource' => 'api/categories', // URL'den veri çekebilir
|
||||||
|
],
|
||||||
|
'username' => [
|
||||||
|
'type' => 'auto-complete', // Otomatik tamamlama (Yazarken öneri)
|
||||||
|
],
|
||||||
|
'search_query' => [
|
||||||
|
'type' => 'fuzzy-autocomplete', // Esnek aramalı otomatik tamamlama
|
||||||
|
],
|
||||||
|
'metadata' => [
|
||||||
|
'type' => 'json', // JSON veri tipi (Görsel düzenleyici)
|
||||||
|
],
|
||||||
|
'raw_config' => [
|
||||||
|
'type' => 'input-json', // Ham JSON girişi
|
||||||
|
],
|
||||||
|
'status_text' => [
|
||||||
|
'type' => 'string', // Standart kısa metin girişi
|
||||||
|
],
|
||||||
|
'custom_field' => [
|
||||||
|
'type' => 'text', // Standart metin girişi (string ile benzer)
|
||||||
|
],
|
||||||
];
|
];
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|||||||
@@ -0,0 +1,135 @@
|
|||||||
|
# Citrus CMS - Datagrid Modül Hazırlama Rehberi
|
||||||
|
|
||||||
|
Bu rehber, Citrus CMS içerisinde DevExtreme DataGrid bileşenini kullanarak nasıl hızlı ve dinamik modüller oluşturulacağını anlatır.
|
||||||
|
|
||||||
|
## 1. Temel Yapı
|
||||||
|
|
||||||
|
Bir modül dosyası (örneğin: `resources/views/admin/type/your-module.blade.php`), PHP bloğu içerisinde tanımlanan yapılandırma değişkenlerinden ve Blade bileşenlerinden oluşur.
|
||||||
|
|
||||||
|
### Temel Değişkenler
|
||||||
|
|
||||||
|
| Değişken | Açıklama |
|
||||||
|
| :--- | :--- |
|
||||||
|
| `$title` | Sayfanın en üstünde ve sekmelerde görünecek başlık. |
|
||||||
|
| `$tableName` | CRUD işlemlerinin yapılacağı veritabanı tablosunun adı. |
|
||||||
|
| `$tableWidth` | Tablonun UI genişliği (genellikle "100%"). |
|
||||||
|
|
||||||
|
```php
|
||||||
|
$title = "Radiographic Test";
|
||||||
|
$tableName = "radiographic_tests";
|
||||||
|
$tableWidth = "100%";
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 2. Relation Datas (Sütun Yapılandırması)
|
||||||
|
|
||||||
|
`$relationDatas` dizisi, tablodaki sütunların hangi bileşenlerle (input, select, date vb.) temsil edileceğini belirler.
|
||||||
|
|
||||||
|
### Desteklenen Veri Tipleri ve Örnekler
|
||||||
|
|
||||||
|
```php
|
||||||
|
$relationDatas = [
|
||||||
|
// Standart Metin Alanları
|
||||||
|
'status_text' => ['type' => 'string'],
|
||||||
|
'custom_field' => ['type' => 'text'],
|
||||||
|
|
||||||
|
// Sayısal Alanlar
|
||||||
|
'rt_scope' => ['type' => 'integer'],
|
||||||
|
'large_val' => ['type' => 'bigint'],
|
||||||
|
'price' => ['type' => 'decimal'],
|
||||||
|
'ratio' => ['type' => 'float'],
|
||||||
|
|
||||||
|
// Tarih ve Saat Alanları
|
||||||
|
'welding_date' => ['type' => 'date'], // YYYY-MM-DD
|
||||||
|
'created_at' => ['type' => 'datetime'], // YYYY-MM-DD HH:mm:ss
|
||||||
|
'shift_time' => ['type' => 'time'], // HH:mm
|
||||||
|
|
||||||
|
// Seçim Alanları
|
||||||
|
'rt_result' => [
|
||||||
|
'type' => 'select',
|
||||||
|
'dataSource' => [
|
||||||
|
['id' => 'ACCEPTED', 'name' => 'ACCEPTED'],
|
||||||
|
['id' => 'REJECTED', 'name' => 'REJECTED'],
|
||||||
|
],
|
||||||
|
],
|
||||||
|
'category' => [
|
||||||
|
'type' => 'select-dropdown', // Arama yapılabilir
|
||||||
|
'dataSource' => 'api/categories', // URL üzerinden dinamik veri
|
||||||
|
],
|
||||||
|
'tags' => [
|
||||||
|
'type' => 'multiple-choice', // Çoklu seçim
|
||||||
|
'dataSource' => [...],
|
||||||
|
],
|
||||||
|
|
||||||
|
// Özel Bileşenler
|
||||||
|
'report_file' => [
|
||||||
|
'type' => 'link-search', // PDF/Dosya önizleme
|
||||||
|
'html' => '<i class="fa fa-pdf"></i>',
|
||||||
|
'caption' => 'PDF Report',
|
||||||
|
'allowEditing' => true,
|
||||||
|
],
|
||||||
|
'username' => ['type' => 'auto-complete'],
|
||||||
|
'metadata' => ['type' => 'json'], // Görsel JSON düzenleyici
|
||||||
|
];
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 3. Block Groups (Sütun Gruplandırma)
|
||||||
|
|
||||||
|
Sütunları mantıksal gruplara ayırarak kullanıcı deneyimini artırabilirsiniz. Bu yapı DataGrid üzerinde "Banded Columns" oluşturur.
|
||||||
|
|
||||||
|
```php
|
||||||
|
$blockGroup = [
|
||||||
|
'Genel Bilgiler' => [
|
||||||
|
'report_file',
|
||||||
|
'contractor',
|
||||||
|
'project',
|
||||||
|
],
|
||||||
|
'Teknik Detaylar' => [
|
||||||
|
'design_area',
|
||||||
|
'line_specification',
|
||||||
|
'rt_scope',
|
||||||
|
],
|
||||||
|
];
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 4. Dosya Yükleme (Upload)
|
||||||
|
|
||||||
|
Modülün üst kısmında toplu dosya yükleme paneli eklemek için aşağıdaki değişkenleri kullanın:
|
||||||
|
|
||||||
|
```php
|
||||||
|
$firstUploadFolder = '004_QA/0001_RT/'; // Storage altındaki hedef klasör
|
||||||
|
$firstUploadTitle = 'PDF Raporlarını Yükle'; // Buton metni
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 5. Görünüm ve Bileşenlerin Dahil Edilmesi
|
||||||
|
|
||||||
|
Dosyanın sonunda gerekli Blade bileşenlerini @include ile çağırın:
|
||||||
|
|
||||||
|
```html
|
||||||
|
<div class="content">
|
||||||
|
<div class="row">
|
||||||
|
<!-- Dosya Yükleme Paneli (Opsiyonel) -->
|
||||||
|
@include("admin.type.document.upload")
|
||||||
|
|
||||||
|
<!-- Ana Datagrid Bloğu (Zorunlu) -->
|
||||||
|
@include("components.blocks.module-block")
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 6. Gelişmiş Ayarlar
|
||||||
|
|
||||||
|
| Ayar | Açıklama |
|
||||||
|
| :--- | :--- |
|
||||||
|
| `$excepts` | Listelenmesini/Düzenlenmesini istemediğiniz sütun dizisi. |
|
||||||
|
| `$requiredFields` | Formda zorunlu tutulacak sütun dizisi. |
|
||||||
|
| `$noRemoteOperations` | True ise tüm işlemler sunucuya gitmeden tarayıcıda yapılır. |
|
||||||
Reference in New Issue
Block a user