Initial commit

app/components/modal/DealerProductSetting.vue

@@ -0,0 +1,98 @@
+<template>
+  <div class="has-text-centered">
+    <p class="">
+      Bạn có chắc chắn muốn chuyển sản phẩm này sang trạng thái<br />
+      <strong :class="newStatus === 2 ? 'has-text-success' : 'has-text-danger'">
+        {{ newStatus === 2 ? 'ĐANG BÁN' : 'KHÓA' }}
+      </strong>
+      không?
+    </p>
+
+    <hr class="my-3" />
+
+    <div class="field is-grouped is-grouped-centered">
+      <div class="control">
+        <button class="button " :class="newStatus === 2 ? 'is-success' : 'is-danger'" :disabled="isSaving"
+          @click="confirmChange">
+          <span v-if="isSaving">Đang xử lý...</span>
+          <span v-else>Đồng ý</span>
+        </button>
+      </div>
+
+      <div class="control">
+        <button class="button is-dark " :disabled="isSaving" @click="close">
+          Hủy bỏ
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+import { useNuxtApp } from '#app'
+
+const emit = defineEmits(['close', 'modalevent'])
+
+const props = defineProps({
+  product: {
+    type: Object,
+    required: true
+  }
+})
+
+const { $patchapi, $snackbar } = useNuxtApp()
+
+const isSaving = ref(false)
+
+const currentStatus = computed(() => Number(props.product?.status) || null)
+const newStatus = computed(() => (currentStatus.value === 15 ? 2 : 15))
+
+async function confirmChange() {
+  if (!props.product?.id || newStatus.value === currentStatus.value) {
+    close()
+    return
+  }
+
+  isSaving.value = true
+
+  try {
+    const result = await $patchapi(
+      'product',
+      {
+        id: props.product.id,
+        status: newStatus.value
+      },
+      {},
+      false
+    )
+
+    if (result === 'error' || !result) {
+      $snackbar('Cập nhật thất bại', 'Lỗi', 'Error')
+      return
+    }
+
+    $snackbar('Cập nhật trạng thái thành công', 'Thành công', 'Success')
+
+    // Phát sự kiện để component cha (hoặc bảng) cập nhật lại dữ liệu
+    emit('modalevent', {
+      name: 'update',
+      data: {
+        id: props.product.id,
+        status: newStatus.value
+      }
+    })
+
+    close()
+  } catch (error) {
+    console.error('Lỗi đổi trạng thái:', error)
+    $snackbar('Có lỗi xảy ra', 'Lỗi', 'Error')
+  } finally {
+    isSaving.value = false
+  }
+}
+
+function close() {
+  emit('close')
+}
+</script>