Munawwirul Jamal
138 lines
3.9 KiB
Markdown
138 lines
3.9 KiB
Markdown
# Confirmation Modal Components
|
|
|
|
Sistem confirmation modal yang modular dan dapat digunakan kembali di seluruh aplikasi.
|
|
|
|
## Components
|
|
|
|
### 1. `confirmation.vue` - Base Confirmation Modal
|
|
|
|
Komponen dasar untuk modal konfirmasi yang dapat dikustomisasi.
|
|
|
|
**Props:**
|
|
- `open?: boolean` - Status modal (terbuka/tertutup)
|
|
- `title?: string` - Judul modal (default: "Konfirmasi")
|
|
- `message?: string` - Pesan konfirmasi (default: "Apakah Anda yakin ingin melanjutkan?")
|
|
- `confirmText?: string` - Text tombol konfirmasi (default: "Ya")
|
|
- `cancelText?: string` - Text tombol batal (default: "Batal")
|
|
- `variant?: 'default' | 'destructive' | 'warning'` - Varian tampilan (default: "default")
|
|
- `size?: 'sm' | 'md' | 'lg' | 'xl'` - Ukuran modal (default: "md")
|
|
|
|
**Events:**
|
|
- `@confirm` - Dipanggil saat tombol konfirmasi diklik
|
|
- `@cancel` - Dipanggil saat tombol batal diklik
|
|
- `@update:open` - Dipanggil saat status modal berubah
|
|
|
|
**Contoh penggunaan:**
|
|
```vue
|
|
<template>
|
|
<Confirmation
|
|
v-model:open="isConfirmOpen"
|
|
title="Hapus Data"
|
|
message="Apakah Anda yakin ingin menghapus data ini?"
|
|
confirm-text="Hapus"
|
|
variant="destructive"
|
|
@confirm="handleConfirm"
|
|
@cancel="handleCancel"
|
|
/>
|
|
</template>
|
|
```
|
|
|
|
### 2. `record-confirmation.vue` - Record-specific Confirmation
|
|
|
|
Komponen khusus untuk konfirmasi operasi pada record/data tertentu.
|
|
|
|
**Props:**
|
|
- `open?: boolean` - Status modal
|
|
- `action?: 'delete' | 'deactivate' | 'activate' | 'archive' | 'restore'` - Jenis aksi (default: "delete")
|
|
- `record?: RecordData | null` - Data record yang akan diproses
|
|
- `customTitle?: string` - Custom judul (opsional)
|
|
- `customMessage?: string` - Custom pesan (opsional)
|
|
- `customConfirmText?: string` - Custom text tombol konfirmasi (opsional)
|
|
- `customCancelText?: string` - Custom text tombol batal (opsional)
|
|
|
|
**Events:**
|
|
- `@confirm` - Dipanggil dengan parameter `(record, action)`
|
|
- `@cancel` - Dipanggil saat batal
|
|
- `@update:open` - Update status modal
|
|
|
|
**Contoh penggunaan:**
|
|
```vue
|
|
<template>
|
|
<RecordConfirmation
|
|
v-model:open="isRecordConfirmOpen"
|
|
action="delete"
|
|
:record="selectedRecord"
|
|
@confirm="handleDeleteRecord"
|
|
@cancel="handleCancel"
|
|
>
|
|
<template #default="{ record }">
|
|
<div class="text-sm">
|
|
<p><strong>ID:</strong> {{ record?.id }}</p>
|
|
<p><strong>Nama:</strong> {{ record?.name }}</p>
|
|
</div>
|
|
</template>
|
|
</RecordConfirmation>
|
|
</template>
|
|
```
|
|
|
|
## Action Types
|
|
|
|
Record confirmation mendukung beberapa jenis aksi dengan konfigurasi default:
|
|
|
|
- **delete**: Hapus data (variant: destructive, warna merah)
|
|
- **deactivate**: Nonaktifkan data (variant: warning, warna kuning)
|
|
- **activate**: Aktifkan data (variant: default, warna biru)
|
|
- **archive**: Arsipkan data (variant: warning, warna kuning)
|
|
- **restore**: Pulihkan data (variant: default, warna biru)
|
|
|
|
## Integration Example
|
|
|
|
Contoh implementasi di komponen list:
|
|
|
|
```vue
|
|
<script setup>
|
|
// State management
|
|
const isRecordConfirmationOpen = ref(false)
|
|
const selectedRecord = ref(null)
|
|
const confirmAction = ref('delete')
|
|
|
|
// Handle action dari table
|
|
function handleRowAction(action, record) {
|
|
selectedRecord.value = record
|
|
confirmAction.value = action
|
|
isRecordConfirmationOpen.value = true
|
|
}
|
|
|
|
// Handle konfirmasi
|
|
async function handleConfirmAction(record, action) {
|
|
try {
|
|
// API call berdasarkan action
|
|
await performAction(action, record.id)
|
|
// Refresh data
|
|
await refreshData()
|
|
} catch (error) {
|
|
// Handle error
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<!-- Your list component -->
|
|
<DataTable @action="handleRowAction" />
|
|
|
|
<!-- Confirmation modal -->
|
|
<RecordConfirmation
|
|
v-model:open="isRecordConfirmationOpen"
|
|
:action="confirmAction"
|
|
:record="selectedRecord"
|
|
@confirm="handleConfirmAction"
|
|
/>
|
|
</template>
|
|
```
|
|
|
|
## Styling
|
|
|
|
Komponen menggunakan Tailwind CSS dan shadcn/ui components. Pastikan dependencies berikut tersedia:
|
|
- `~/components/pub/my-ui/modal/dialog.vue`
|
|
- `~/components/pub/ui/button`
|