view vehicles

src/components/CardVehicle.vue

@@ -0,0 +1,141 @@
+<script setup>
+    import { onMounted, ref } from 'vue';
+    import CustomRadioInput from './ui/CustomRadioInput.vue';
+
+    const props = defineProps({
+        vehicle: {
+            type: Object,
+            required: true
+        },
+        drivers: {
+            type: Array,
+            requited: true
+        }
+    })
+
+    const driver = ref(null);
+    const status = ref(null);
+    const loading = ref(false);
+
+    onMounted(() => {
+        status.value = props.vehicle.is_available === true ? 'Availiable' : 'Booked'
+        if(props.vehicle?.driver) {
+            const index = props.drivers.findIndex((d) => d._id === props.vehicle?.driver?._id);
+            driver.value = props.drivers[index];
+        }
+    })
+
+    const setDriver = () => {
+        console.log('Driver selected: ', driver.value.name)
+    }
+</script>
+
+<template>
+    <div class="card-fixed card-vehicle">
+        <div class="row my-2">
+            <div class="col-lg-6">
+                <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>
+            </div>
+            <div class="col-lg-6">
+                <p>Placas Tracto Camión: <span>{{ vehicle.circulation_serial_number }}</span></p>
+                <p>Placas Remolque 1: <span>{{ vehicle.trailer_plate_1 }}</span></p>
+                <p>Placas Remolque 2: <span>{{ vehicle.trailer_plate_2 }}</span></p>
+                <p>Base de carga: <span>{{ vehicle.city }}, {{ vehicle.state }}</span></p>
+            </div>
+        </div>
+        <p v-if="vehicle.notes">Información Adicional del Transporte:</p>
+        <div v-if="vehicle.notes" class="box-note mb-4">
+            {{ vehicle.notes }}
+        </div>
+        <div class="divider"></div>
+        <div class="row my-2">
+            <div class="col-lg-6">
+                <div class="custom-selected-field">
+                    <label class="custom-label" for="driver">Conductor asignado:</label>
+                    <select 
+                        class="custom-input-light"
+                        name="driver" 
+                        id="driver" 
+                        v-model="driver"
+                        @change="setDriver()"
+                    >
+                        <option disabled value="">-- Seleccionar conductor --</option>
+                        <option v-for="driver in drivers" :value="driver">{{driver.name}}</option>
+                    </select>
+                </div>
+            </div>
+            <div class="col-lg-6">
+                <h4 class="custom-label mt-2">Status del vehiculo</h4>
+               <div class="d-flex">
+                    <CustomRadioInput
+                        value="Booked" 
+                        label="Reservado"
+                        :name="'status-vehicle' + vehicle._id"
+                        v-model:typeselected="status"
+                    />
+                    <CustomRadioInput
+                        value="Availiable" 
+                        label="Disponible"
+                        :name="'status-vehicle' + vehicle._id"
+                        v-model:typeselected="status"
+                    />
+               </div>
+            </div>
+        </div>
+        <div class="card-footer">
+            <button 
+                class="btn btn-dark radius-sm"
+                @click="handleDeleteLocation"
+            >
+                <i class="fa-solid fa-trash" /> <span class="clear-xsm">Eliminar</span>
+            </button>
+            <button 
+                class="btn-primary-sm radius-sm"
+                @click="$emit('set-location')"
+                data-toggle="modal" data-target="#locationFormModal"
+            >
+                <i class="fa-solid fa-pen-to-square" /> <span class="clear-xsm">Editar</span>
+            </button>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+     .card-vehicle {
+        flex-direction: column;
+        width: 100% !important;
+    }
+
+    .card-footer {
+        display: flex;
+        justify-content: end;
+        gap: 1rem;
+    }
+
+    .custom-selected-field {
+        display: flex;
+        flex-direction: column;
+        margin-bottom: 16px;
+    }
+
+    p {
+        font-size: 1rem;
+        font-weight: 400;
+        color: #323032;
+        font-weight: 700;
+    }
+    
+    p span {
+        color: #323032;
+        font-weight: normal;
+    }
+
+    .box-note {
+        padding: 12px 16px;
+        background-color: aqua;
+        border-radius: 13px;
+    }
+</style>