50 lines
1.4 KiB
Markdown
50 lines
1.4 KiB
Markdown
# Component PriceDisplay
|
|
|
|
**Tanggal:** 2026-07-24
|
|
**Status:** Selesai
|
|
|
|
## Tujuan
|
|
Membuat component reusable untuk menampilkan dan menginput format harga Rupiah.
|
|
|
|
## Yang Dikerjakan
|
|
|
|
### 1. Component PriceDisplay
|
|
- Menggunakan `InputGroup` dengan prefix `Rp`
|
|
- Support 2 mode: display (readonly) dan input (editable)
|
|
- Format angka dengan pemisah titik (1.000.000)
|
|
- Input type `text` dengan `inputmode="numeric"` agar format titik berfungsi
|
|
|
|
### 2. Integrasi
|
|
- Tabel plans: menampilkan harga dengan format Rp 50.000
|
|
- Form plans: input harga dengan format Rp
|
|
|
|
## File yang Diubah
|
|
|
|
| File | Aksi | Detail |
|
|
|------|------|--------|
|
|
| `web2/app/components/PriceDisplay.vue` | Dibuat | Component PriceDisplay |
|
|
| `web2/app/pages/admin/plans/columns.ts` | Diubah | Format harga di tabel |
|
|
| `web2/app/pages/admin/plans/index.vue` | Diubah | Input harga pakai PriceDisplay |
|
|
|
|
## Props
|
|
|
|
| Prop | Tipe | Default | Deskripsi |
|
|
|------|------|---------|-----------|
|
|
| `value` | `number` | - | Nilai harga (display mode) |
|
|
| `modelValue` | `string` | - | v-model (input mode) |
|
|
| `placeholder` | `string` | `'0'` | Placeholder input |
|
|
| `readonly` | `boolean` | `false` | Readonly mode |
|
|
| `disabled` | `boolean` | `false` | Disabled mode |
|
|
|
|
## Contoh Penggunaan
|
|
|
|
```vue
|
|
<!-- Display -->
|
|
<PriceDisplay :value="50000" :readonly="true" />
|
|
<!-- Output: [Rp] [50.000] -->
|
|
|
|
<!-- Input -->
|
|
<PriceDisplay v-model="form.price" />
|
|
<!-- Output: [Rp] [0 (editable)] -->
|
|
```
|