add: delete vehicle

src/components/CardVehicle.vue

@@ -1,5 +1,7 @@
 <script setup>
+    import Swal from 'sweetalert2';
     import { getDateMonthDayEs } from '../helpers/date_formats';
+    import { useVehiclesStore } from '../stores/vehicles';
 
     const props = defineProps({
         vehicle: {
@@ -10,6 +12,48 @@
 
     defineEmits(['set-vehicle']);
 
+    const vehicleStore = useVehiclesStore();
+
+    const handleDeleteVehicle = async() => {
+        Swal.fire({
+            title: `Eliminar vehiculo "${props.vehicle.vehicle_code}""`,
+            text: '¿Estás seguro de eliminar este vehiculo?',
+            icon: 'warning',
+            showCancelButton: true,
+            cancelButtonColor: "#d33",
+            confirmButtonText: 'Eliminar',
+            cancelButtonText: 'Cancelar',
+        }).then(async(result) => {
+            if(result.isConfirmed) {
+                Swal.fire({
+                    title: 'Por favor espere!',
+                    html: 'Eliminando vehiculo...',// add html attribute if you want or remove
+                    allowOutsideClick: false,
+                    didOpen: () => {
+                        Swal.showLoading()
+                    },
+                });
+                const resp = await vehicleStore.deleteVehicleCompany(props.vehicle._id);
+                Swal.close();
+                
+                if(resp != null) {
+                    Swal.fire({
+                        title: "vehiculo eliminado!",
+                        text: "Tu vehiculo ha sido eliminado exitosamente.",
+                        icon: "success"
+                    });
+                } else {
+                    Swal.fire({
+                        title: "Error!",
+                        text: "Tu vehiculo no se pudo eliminar, intente más tarde.",
+                        icon: "error"
+                    });
+                }
+            }
+        });
+    }
+
+
 </script>
 
 <template>
@@ -19,7 +63,7 @@
                 <p>Código: <span>{{ vehicle.vehicle_code }}</span></p>
                 <p>Tipo de transporte: <span>{{ vehicle.truck_type }}</span></p>
                 <p>Número de Serie: <span>{{ vehicle.vehicle_number }}</span></p>
-                <p>Segmento: <span>{{ vehicle._categories }}</span></p>
+                <p>Segmento: <span>{{vehicle.categories?.map((e) => e.name).join(', ')}}</span></p>
                 <p>Conductor: 
                     <span>
                         <span v-if="vehicle?.driver">{{ vehicle?.driver?.first_name }} {{ vehicle?.driver?.last_name }} </span> 
@@ -59,6 +103,7 @@
         <div class="card-footer">
             <button 
                 class="btn btn-dark radius-sm"
+                @click="handleDeleteVehicle"
             >
                 <i class="fa-solid fa-trash" /> <span class="clear-xsm">Eliminar</span>
             </button>