64 lines
1.8 KiB
Markdown
64 lines
1.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';
|
|
```
|