94 lines
2.8 KiB
Markdown
94 lines
2.8 KiB
Markdown
# Best Practices
|
|
|
|
## PHP
|
|
|
|
### Traits
|
|
- Gabungkan multiple `use` trait menjadi satu baris dengan koma.
|
|
- **Hindari:**
|
|
```php
|
|
use FlashesEntityMessage;
|
|
use ParsesDataTableQuery;
|
|
```
|
|
- **Gunakan:**
|
|
```php
|
|
use FlashesEntityMessage, ParsesDataTableQuery;
|
|
```
|
|
|
|
## JavaScript / Vue
|
|
|
|
### Struktur Folder Page-Specific Components
|
|
Komponen yang hanya digunakan oleh satu page tertentu (misalnya modal form, kolom tabel, action button) **harus ditempatkan di folder page-nya langsung** di dalam subfolder sesuai fungsinya, bukan di `resources/js/components/`.
|
|
|
|
Folder `resources/js/components/` hanya untuk komponen yang **reusable** lintas page (seperti UI primitives, DataTable, ConfirmDialog, dll).
|
|
|
|
Subfolder di dalam page folder dikelompokkan berdasarkan fungsi:
|
|
- `form/` — modal form, form fields
|
|
- `table/` — columns definition, data-table-actions, cell renderers
|
|
|
|
- **Hindari:**
|
|
```
|
|
resources/js/components/admin/master/categories/
|
|
CategoryFormModal.vue
|
|
columns.ts
|
|
data-table-actions.vue
|
|
resources/js/pages/admin/master/categories/
|
|
Index.vue
|
|
```
|
|
- **Gunakan:**
|
|
```
|
|
resources/js/pages/admin/master/categories/
|
|
Index.vue
|
|
form/
|
|
CategoryFormModal.vue
|
|
table/
|
|
columns.ts
|
|
data-table-actions.vue
|
|
```
|
|
|
|
### Import Path
|
|
Gunakan relative import (`./`) untuk file yang berada di folder/subfolder yang sama, bukan absolute path `@/...`.
|
|
|
|
- **Hindari:**
|
|
```ts
|
|
import CategoryFormModal from '@/components/admin/master/categories/CategoryFormModal.vue';
|
|
```
|
|
- **Gunakan:**
|
|
```ts
|
|
// Dari Index.vue ke subfolder
|
|
import CategoryFormModal from './form/CategoryFormModal.vue';
|
|
import { createColumns } from './table/columns';
|
|
|
|
// 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)
|