delete product functionality

pages/editar/productos/index.vue

@@ -15,10 +15,10 @@
     </BRow>
     <BRow>
       <BCol class="d-flex flex-row-reverse">
-        <button class="btn btn-secondary" @click="desactivateProducts">
+        <button class="btn btn-secondary" :disabled="selectedItemsIndexes.length === 0" @click="desactivateProducts">
           Desactivar
         </button>
-        <button class="btn btn-primary mr-3" @click="activateProducts">
+        <button class="btn btn-primary mr-3" :disabled="selectedItemsIndexes.length === 0" @click="activateProducts">
           Activar
         </button>
         <div v-show="selectedItemsIndexes.length !== 0" class="selected-products mr-3">
@@ -160,9 +160,27 @@ export default {
 
     async deleteItem(item) {
       if (confirm('Confirma que quieres eliminar este producto')) {
-        await this.$api.delete(`/my_products/${item.item.id}`)
+        const config = useRuntimeConfig()
-        const index = this.products.indexOf(item.item)
+        try {
-        this.products.splice(index, 1)
+          await $fetch(`/my_products/${item.item.id}`, {
+            baseURL: config.public.baseURL,
+            method: 'DELETE',
+            headers: {
+              Authorization: `Bearer ${this.auth.access}`,
+            },
+          })
+          const index = this.products.indexOf(item.item)
+          this.products.splice(index, 1)
+          this.selectedItemsIndexes = []
+          this.modalText = 'Los productos han sido eliminados correctamente.'
+          this.modalColor = 'success'
+          this.activeModal = true
+        } catch (error) {
+          console.error(error)
+          this.modalText = 'Ha habido un error'
+          this.modalColor = 'danger'
+          this.activeModal = true
+        }
       }
     },