Initial commit

app/components/accounting/ConfirmDeleteEntry.vue

@@ -0,0 +1,143 @@
+<!-- components/dialog/ConfirmDeleteEntry.vue -->
+<template>
+  <div class="has-text-centered">
+
+    <div class=" mb-3 p-3">
+      <p class="is-size-5 has-text-weight-semibold mb-4">
+        Bạn có chắc chắn muốn xóa bút toán này?
+      </p>
+
+      <p class="mt-3 has-text-danger  has-text-weight-semibold">
+        Hành động này <strong>không thể hoàn tác</strong>.<br>
+        Dữ liệu liên quan (nếu có) sẽ bị xóa vĩnh viễn.
+      </p>
+    </div>
+
+    <div class="field is-grouped is-justify-content-center">
+      <!-- Captcha addon group - shown only when captcha is not confirmed -->
+      <p class="control" v-if="!isConfirmed">
+        <div class="field has-addons">
+          <p class="control">
+            <input 
+              class="input" 
+              type="text" 
+              placeholder="Nhập mã xác nhận" 
+              v-model="userInputCaptcha"
+              @keyup.enter="isConfirmed && confirmDelete()"
+            >
+          </p>
+          <p class="control">
+            <a class="button is-static has-text-weight-bold has-background-grey-lighter"
+              style="font-family: 'Courier New', monospace; letter-spacing: 2px;">
+              {{ captchaCode }}
+            </a>
+          </p>
+          <p class="control">
+            <button class="button" @click="generateCaptcha" title="Tạo mã mới">
+              <span class="icon">
+                <SvgIcon name="refresh.svg" type="primary" :size="23" />
+              </span>
+            </button>
+          </p>
+        </div>
+      </p>
+
+      <!-- Action buttons -->
+      <!-- Confirm button - shown only when captcha IS confirmed -->
+      <p class="control" v-if="isConfirmed">
+        <button
+          class="button is-danger"
+          :class="{ 'is-loading': isDeleting }"
+          :disabled="isDeleting"
+          @click="confirmDelete"
+        >
+          Xác nhận xóa
+        </button>
+      </p>
+      <!-- Cancel button - always shown -->
+      <p class="control">
+        <button
+          class="button"
+          :disabled="isDeleting"
+          @click="cancel"
+        >
+          Hủy
+        </button>
+      </p>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+import { useNuxtApp } from '#app'
+
+const props = defineProps({
+  entryId: {
+    type: [String, Number],
+    required: true
+  }
+})
+
+const emit = defineEmits(['close', 'deleted'])
+
+const { $snackbar ,$insertapi} = useNuxtApp()
+const isDeleting = ref(false)
+const captchaCode = ref('')
+const userInputCaptcha = ref('')
+
+const isConfirmed = computed(() => {
+  return userInputCaptcha.value.toLowerCase() === captchaCode.value.toLowerCase() && userInputCaptcha.value !== ''
+})
+
+const generateCaptcha = () => {
+  captchaCode.value = Math.random().toString(36).substring(2, 7).toUpperCase()
+  userInputCaptcha.value = ''
+}
+
+// Initial generation
+generateCaptcha()
+
+const confirmDelete = async () => {
+  if (isDeleting.value || !isConfirmed.value) return
+  isDeleting.value = true
+
+  try {
+    // Gọi API xóa theo đúng endpoint delete-entry/{id}
+    const result = await $insertapi('deleteentry', {id: props.entryId})
+
+    if (result === 'error' || !result) {
+      throw new Error('API xóa trả về lỗi')
+    }
+
+    $snackbar(
+      `Đã xóa bút toán ID ${props.entryId} thành công`,
+      'Thành công',
+      'Success'
+    )
+
+    emit('deleted', props.entryId)
+    emit('close')
+
+  } catch (err) {
+    console.error('Xóa bút toán thất bại:', err)
+
+    let errorMsg = 'Không thể xóa bút toán. Vui lòng thử lại.'
+    
+    // Nếu backend trả về thông báo cụ thể
+    if (err?.response?.data?.detail) {
+      errorMsg = err.response.data.detail
+    } else if (err?.response?.data?.non_field_errors) {
+      errorMsg = err.response.data.non_field_errors.join(' ')
+    }
+
+    $snackbar(errorMsg, 'Lỗi', 'Danger')
+  } finally {
+    isDeleting.value = false
+  }
+}
+
+const cancel = () => {
+  emit('close')
+}
+</script>