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>

src/components/CreateUserModal.vue

@@ -206,9 +206,9 @@ import Swal from 'sweetalert2';
                                 v-model="userForm.job_role"
                             >
                                 <option disabled value="">-- Seleccionar rol --</option>
-                                <option value="Owner">Dueño</option>
+                                <option value="owner">Dueño</option>
-                                <option value="Manager">Gerente</option>
+                                <option value="manager">Gerente</option>
-                                <option value="Driver">Conductor</option>
+                                <option value="driver">Conductor</option>
                             </select>
                         </div>
                         <div class="mb-4 mt-3">

src/components/FormLoadModal.vue

@@ -129,6 +129,23 @@
         })
     })
 
+    watch(locationLoadSelected, () => {
+        console.log(locationLoadSelected);
+        origin.locationName =  locationLoadSelected.value.branch_name;
+        origin.address =  locationLoadSelected.value.address;
+        origin.state =  { state_name: locationLoadSelected.value.state };
+        origin.city =  { city_name: locationLoadSelected.value.city };
+        origin.ref = locationLoadSelected.value.description;
+    });
+
+    watch(locationDownloadSelected, () => {
+        destination.locationName =  locationDownloadSelected.value.branch_name;
+        destination.address =  locationDownloadSelected.value.address;
+        destination.state =  { state_name: locationDownloadSelected.value.state };
+        destination.city =  { city_name: locationDownloadSelected.value.city };
+        destination.ref = locationDownloadSelected.value.description;
+    });
+
     const getLocations = async() => {
         loadingLocations.value = true;
         filterQueryVehicles.value.company = "company="+ localStorage.getItem('id');

src/components/MakeProposalModal.vue

@@ -50,7 +50,9 @@
     
     const initData = async() => {
         isLoading.value = true;
-        await vehiclesStore.fetchVehicles("?company="+ authStore.user.company);
+        let filterQuery = [];
+        filterQuery.company = "company="+ authStore.user.company
+        await vehiclesStore.fetchVehicles(filterQuery);
         originCoords.value = await geocodeAddress(props.load.origin_formatted_address);
         destinationCoords.value = await geocodeAddress(props.load.destination_formatted_address);
         isLoading.value = false;

src/services/vehicles.js

@@ -4,6 +4,7 @@ import api from "../lib/axios";
 export const getVehicles = async(filter) => {
     try {
         const endpoint = `/vehicles/${filter}`;
+        console.log('endpoint: ', endpoint);
         const {data} = await api.get(endpoint);
         return data;
     } catch (error) {

src/stores/vehicles.js

@@ -5,9 +5,17 @@ export const useVehiclesStore = defineStore('vehicles', () => {
     
     const vehicles = ref([]);
 
-    const fetchVehicles = async(filter) => {
+    const fetchVehicles = async(filterQuery, reload = false) => {
-        if(vehicles.value.length <= 0) {
+        let filterArr = Object.values(filterQuery);
-            const resp = await getVehicles(filter);
+
+        let cleanfilterArr =  filterArr.filter(n=>n);
+        var filterStr = "";
+        if(cleanfilterArr.length > 0){
+            filterStr ="?"+cleanfilterArr.join("&");
+        }
+        console.log(filterStr);
+        if(vehicles.value.length <= 0 || reload === true) {
+            const resp = await getVehicles(filterStr);
             console.log(resp.data);
             if(resp !== null) {
                 vehicles.value = resp.data;

src/views/LocationsView.vue

@@ -41,7 +41,7 @@
     const search = () => {
         if(query.value.length >= 2){
             // filterQuery.value = "company_name[$regex]=" + query.value + "&company_name[$options]=i";
-            filterQuery.value.search = "branch_name[$regex]="+ query.value +"&branch_name[$options]=i";;
+            filterQuery.value.search = "branch_name[$regex]="+ query.value +"&branch_name[$options]=i";
             getLocationsWithFilters(filterQuery.value);
         } 
     

src/views/VehiclesView.vue

@@ -1,13 +1,150 @@
 <script setup>
+    import { onMounted, ref, watch } from 'vue';
+    import { useCompanyStore } from '../stores/company';
+    import Spiner from '../components/ui/Spiner.vue';
+    import CreateLocationModal from '../components/CreateLocationModal.vue';
+    import { useVehiclesStore } from '../stores/vehicles';
+    import CardVehicle from '../components/CardVehicle.vue';
+    import CardEmpty from '../components/CardEmpty.vue';
+
+    const companyStore = useCompanyStore();
+    const vehicleStore = useVehiclesStore();
+
+    const loading = ref(false);
+    const filterQuery = ref([]);
+    const drivers = ref([]);
+    const query = ref('');
+    const locationCurrent = ref(null);
+    const openModal = ref(false);
+
+    onMounted(() => {
+        getInitData();
+    })
+
+    const getInitData = async() => {
+        loading.value = true;
+        filterQuery.value.company = "company="+ localStorage.getItem('id');
+        await vehicleStore.fetchVehicles(filterQuery.value, false);
+        await companyStore.getUsersCompany();
+        drivers.value = companyStore.users?.filter((u) => u.job_role == 'driver');
+        loading.value = false;
+    }
+
+    const getVehiclesWithFilters = async(filter) => {
+        loading.value = true;
+        await vehicleStore.fetchVehicles(filter, true);
+        loading.value = false;
+    }
+
+    watch(query, () => {
+        if(query.value.length === 0){
+            filterQuery.value.search = "";
+            getVehiclesWithFilters(filterQuery.value);
+        }
+    });
+
+    const search = () => {
+        if(query.value.length >= 2){
+            // filterQuery.value = "company_name[$regex]=" + query.value + "&company_name[$options]=i";
+            filterQuery.value.search = "truck_type[$regex]=" + query.value +"&truck_type[$options]=i";
+            getVehiclesWithFilters(filterQuery.value);
+        } 
+    
+    }
+
+    const clearFilter = () => {
+        filterQuery.value.search = "";
+        filterQuery.value.company = "company="+ localStorage.getItem('id');
+
+        if(query.value == ''){
+            getInitData();
+        } else {
+            query.value = '';
+        }
+    }
+
+    const handleSetCurrentLocation = (location) => {
+        openModal.value = true;
+        locationCurrent.value = location;
+    }
+
+    const handleResetCurrentBudget = () => {
+        openModal.value = false;
+        locationCurrent.value = null;
+    }
 
 </script>
 
 <template>
     <div>
+        <CreateLocationModal 
+            v-if="openModal === true"
+            :location="locationCurrent"
+            @reset-location="handleResetCurrentBudget"
+        />
         <h2 class="title">Vehiculos</h2>
+        <div class="box-filters">
+            <div class="box-search">
+                <input class="form-control custom-search" type="search" name="" placeholder="Buscar vehicles" id="" @:input="search()" v-model="query" aria-label="Search">
+            </div>
+            <button 
+                class="btn btn-danger bg-dark" type="button" @click="clearFilter">
+                <i class="fa-solid fa-arrow-rotate-right"></i>
+                <span class="clear-sm"> Reset</span><span class="clear-md"> filtros</span>
+            </button>
+            <button
+                class="btn-primary-sm radius-sm"
+                data-toggle="modal" data-target="#locationFormModal"
+                @click="handleSetCurrentLocation(null)"
+            ><i class="fa-solid fa-plus"></i> <span class="clear-sm"> Agregar</span><span class="clear-md"> vehiculo</span></button>
+        </div>
+        <Spiner v-if="loading"/>
+        <div v-else>
+            <CardVehicle
+                v-if="vehicleStore.vehicles.length > 0"
+                v-for="vehicle in vehicleStore.vehicles"
+                :vehicle="vehicle"
+                :key="vehicle._id"
+                :drivers="drivers"
+            />
+            <CardEmpty v-else text="No hay ubicaciones agregadas"/>
+        </div>
     </div>
 </template>
 
 <style scoped>
+    .box-filters {
+        display: flex;
+        flex-direction: row;
+        justify-content: end;
+        gap: 1rem;
+        margin: 1.5rem 0px;
+    }
 
+    .box-search {
+        width: 60%;
+    }
+    .custom-search {
+        width: 100%;
+        padding: 12px 20px;
+    }
+
+    @media (max-width: 1024px) {
+        .box-search {
+            width: 60%;
+        }
+        .box-filters {
+            gap: .4rem;
+        }
+    }
+
+    @media (max-width: 768px) {
+
+        .box-search {
+            width: 100%;
+        }
+        .box-filters {
+            gap: .3rem;
+        }
+    }
 </style>