merch delete method

src/views/DetailsView.vue

@@ -1,6 +1,10 @@
 <script setup>
 import { apiClient } from '@/services/apiClient.js'
+import { useMerchApi } from '@/api/merch.js'
 import { onMounted, ref } from 'vue'
+import router from '@/router/index.js'
+
+const { deleteMerch } = useMerchApi()
 
 const props = defineProps({
   merch_uuid: {
@@ -16,8 +20,10 @@ const error = ref(null)
 const fetchMerch = async () => {
   try {
     const response = await apiClient.get(`/merch/${props.merch_uuid}`)
-    if (!response.ok) throw new Error('Network response was not ok')
+    if (!response.status === 200) throw new Error('Network response was not ok')
     merchDetails.value = response.data
+
+    if (!response.status === 400) router.push({ name: "collection" })
   } catch (err) {
     error.value = err.message
   } finally {
@@ -28,6 +34,24 @@ const fetchMerch = async () => {
 onMounted(() => {
   fetchMerch()
 })
+
+const showModal = ref(false)
+const onDelete = () => {
+  showModal.value = true
+}
+
+const confirmDelete = async () => {
+  try {
+    const response = await deleteMerch(props.merch_uuid)
+    if (!response.status === 200) throw new Error('Network response was not ok')
+    if (!response.status === 400) router.push({ name: "collection" })
+      } catch (error) {
+    console.log(error)
+  }
+  showModal.value = false
+  router.push({ name: "collection" })
+}
+
 </script>
 
 <template>
@@ -46,9 +70,23 @@ onMounted(() => {
     <p><strong>Link</strong> {{ merchDetails.origin_mandarake.link }}</p>
   </n-card>
   <div v-else>Not found</div>
+
+  <div class="center-button-container">
+    <n-button type="error" class="center-button" @click="onDelete">Delete</n-button>
+  </div>
+
+  <n-modal v-model:show="showModal" preset="dialog" title="Confirmation">
+    <template #default>
+      <p>Confirm delete</p>
+    </template>
+    <template #action>
+      <n-button @click="confirmDelete" type="error">Ok</n-button>
+      <n-button @click="showModal = false">Cancel</n-button>
+    </template>
+  </n-modal>
+
 </template>
 
 <style scoped>
-/* Добавь стили по желанию */
-</style>
 
+</style>