diff --git a/BEST_PRACTICE.md b/BEST_PRACTICE.md index 4adc75d..683fb25 100644 --- a/BEST_PRACTICE.md +++ b/BEST_PRACTICE.md @@ -61,3 +61,33 @@ ### Import Path // Dari columns.ts ke file satu folder import DataTableActions from './data-table-actions.vue'; ``` + +### Pola CRUD (Create/Edit) +Gunakan **modal** untuk CRUD yang sederhana (sedikit field, tidak ada nested data complex), dan **page terpisah** untuk CRUD yang kompleks. + +- **Modal** — form sederhana, biasanya 1-3 field, tidak memerlukan layout khusus: + ``` + pages/admin/master/categories/ + Index.vue + form/ + CategoryFormModal.vue ← modal form + table/ + columns.ts + data-table-actions.vue + ``` + Contoh: categories (1 field), suppliers (3 field), customers (3 field) + +- **Page terpisah** — form kompleks, banyak field, nested data, file upload, atau memerlukan layout khusus: + ``` + pages/admin/master/raw-materials/ + Index.vue + Create.vue ← halaman tambah + Edit.vue ← halaman ubah + form/ + RawMaterialForm.vue ← form component + table/ + RawMaterialGroupedTable.vue + data-table-actions.vue + raw-material-status-toggle.vue + ``` + Contoh: raw-materials (nested prices, multi-image upload, dynamic variant rows)