Dialog Migration Guide¶

Objective¶

Replace all native alert() and confirm() calls with branded UI components for consistency.

Migration Patterns¶

Pattern 1: Simple alert() → useNotification¶

Before:

alert("Data berhasil disimpan");
alert("Error: Gagal menyimpan data");

After:

import { useNotification } from '@/composables/useNotification';

const { success, error: showError } = useNotification();

success("Data berhasil disimpan");
showError("Error: Gagal menyimpan data");

Pattern 2: confirm() → AppConfirmDialog (Simple)¶

Before:

if (confirm("Yakin ingin menghapus?")) {
  await deleteItem();
}

After:

<template>
  <AppConfirmDialog
    v-model:show="showDeleteConfirm"
    title="Hapus Data?"
    message="Yakin ingin menghapus data ini?"
    variant="danger"
    :icon="AlertTriangle"
    @confirm="handleDelete"
    @cancel="() => showDeleteConfirm = false"
  />
</template>

<script setup>
import { ref } from 'vue';
import AppConfirmDialog from '@/components/ui/AppConfirmDialog.vue';
import { AlertTriangle } from 'lucide-vue-next';

const showDeleteConfirm = ref(false);

const confirmDelete = () => {
  showDeleteConfirm.value = true;
};

const handleDelete = async () => {
  await deleteItem();
  showDeleteConfirm.value = false;
};
</script>

Pattern 3: confirm() → useConfirmDialog (Composable)¶

Before:

const confirmed = confirm("Yakin ingin melanjutkan?");
if (confirmed) {
  await processData();
}

After:

import { useConfirmDialog } from '@/composables/useConfirmDialog';
import { AlertTriangle } from 'lucide-vue-next';

const { showDialog, dialogConfig, confirm, handleConfirm, handleCancel } = useConfirmDialog();

// In template:
// <AppConfirmDialog
//   v-model:show="showDialog"
//   :title="dialogConfig.title"
//   :message="dialogConfig.message"
//   :confirm-text="dialogConfig.confirmText"
//   :cancel-text="dialogConfig.cancelText"
//   :variant="dialogConfig.variant"
//   :icon="dialogConfig.icon"
//   @confirm="handleConfirm"
//   @cancel="handleCancel"
// />

// In method:
const confirmed = await confirm({
  title: 'Konfirmasi',
  message: 'Yakin ingin melanjutkan?',
  variant: 'warning',
  icon: AlertTriangle
});

if (confirmed) {
  await processData();
}

Migration Checklist¶

[ ] Replace all alert() with useNotification()
[ ] Replace all confirm() with AppConfirmDialog or useConfirmDialog
[ ] Import necessary components and icons
[ ] Add reactive state for dialog visibility
[ ] Test all dialog interactions
[ ] Remove native dialog calls

Files Migrated¶

HR Module ✅¶

[x] LeaveBalance.vue
[x] EmployeeForm.vue
[x] LeaveTypeList.vue

Other Modules (In Progress)¶

[ ] AccountingManagement/*
[ ] LibraryManagement/*
[ ] AnalyticsManagement/*
[ ] AdmissionManagement/*
[ ] AttendanceManagement/*
[ ] SettingsManagement/*
[ ] StudentClassAssignment/*
[ ] ParentViews/*