add: search vehicles view & fixes: bugs state

src/components/AttachmentsModal.vue

@@ -83,17 +83,24 @@
     }
 
     .attachment p {
-    font-size: 1rem;
+        font-size: 1rem;
-    font-weight: 900;
+        font-weight: 900;
-    color: black;
+        color: black;
     }
 
     .attachment img {
-        width: 50%;
+        width: 33%;
         justify-content: center;
         align-items: center;
         margin: 0 auto;
         align-content: center;
     }
 
+    @media (max-width: 568px) {
+        .attachment img {
+            width: 50%;
+        }
+        
+    }
+
 </style>

src/components/CardLoad.vue

@@ -19,13 +19,17 @@
             type: Boolean,
             required: false,
             default: false
+        },
+        tracking: {
+            type: Boolean,
+            required: false,
+            default: true
         }
     });
 
     const { t } = useI18n()
     defineEmits(['set-load'])
 
-
     const openAttachmentsModal = () => {
         loadsStore.currentLoad = props.load;
         loadsStore.openAttachmentsModal = true;
@@ -94,32 +98,32 @@
             <div class="col-lg-6 col-sm-12">
                 <p>
                     <span>{{t('loads.origin')}}: </span> 
-                    <template v-if="load.origin.company_name"> {{ load.origin.company_name }}, </template> 
+                    <template v-if="load.origin?.company_name"> {{ load.origin?.company_name }}, </template> 
-                    <template v-if="load.origin.street_address1">{{ load.origin.street_address1 }}, </template>
+                    <template v-if="load.origin?.street_address1">{{ load.origin?.street_address1 }}, </template>
-                    <template v-if="load.origin.city">{{ load.origin.city }}, </template>
+                    <template v-if="load.origin?.city">{{ load.origin?.city }}, </template>
-                    <template v-if="load.origin.state">{{ load.origin.state }}, </template>
+                    <template v-if="load.origin?.state">{{ load.origin?.state }}, </template>
-                    <template v-if="load.origin.country">{{ load.origin.country }}, </template>
+                    <template v-if="load.origin?.country">{{ load.origin?.country }}, </template>
-                    <template v-if="load.origin.zipcode">{{ load.origin.zipcode }} </template>
+                    <template v-if="load.origin?.zipcode">{{ load.origin?.zipcode }} </template>
                 </p>
                 <p>
                     <span>{{t('loads.destination')}}: </span> 
-                    <template v-if="load.destination.company_name"> {{ load.destination.company_name }}, </template> 
+                    <template v-if="load.destination?.company_name"> {{ load.destination?.company_name }}, </template> 
-                    <template v-if="load.destination.street_address1">{{ load.destination.street_address1 }}, </template>
+                    <template v-if="load.destination?.street_address1">{{ load.destination?.street_address1 }}, </template>
-                    <template v-if="load.destination.city">{{ load.destination.city }}, </template>
+                    <template v-if="load.destination?.city">{{ load.destination?.city }}, </template>
-                    <template v-if="load.destination.state">{{ load.destination.state }}, </template>
+                    <template v-if="load.destination?.state">{{ load.destination?.state }}, </template>
-                    <template v-if="load.destination.country">{{ load.destination.country }}, </template>
+                    <template v-if="load.destination?.country">{{ load.destination?.country }}, </template>
-                    <template v-if="load.destination.zipcode">{{ load.destination.zipcode }} </template>
+                    <template v-if="load.destination?.zipcode">{{ load.destination?.zipcode }} </template>
                 </p>
             </div>
-            <div class="col-lg-6 col-sm-12" v-if="readOnly">
+            <div class="col-lg-6 col-sm-12">
-                <p>
+                <p v-if="readOnly">
                     <span>{{t('loads.company')}}: </span> 
-                    {{ load.company.company_name }} 
+                    {{ load.company?.company_name }} 
                 </p>
-            </div>
+                <div v-if="!readOnly">
-            <div class="col-lg-6 col-sm-12" v-if="authStore.user?.permissions === 'role_shipper'">
+                    <p><span>{{t('loads.postStatus')}}:</span> <span class="simple">{{ getStatusPublished(load) }}</span></p>
-                <p><span>{{t('loads.postStatus')}}:</span> <span class="simple">{{ getStatusPublished(load) }}</span></p>
+                    <p :style="{color: getStatusLoad(load).color}"><span>{{t('loads.loadStatus')}}:</span> <span class="simple">{{ getStatusLoad(load).status }}</span></p>
-                <p :style="{color: getStatusLoad(load).color}"><span>{{t('loads.loadStatus')}}:</span> <span class="simple">{{ getStatusLoad(load).status }}</span></p>
+                </div>
             </div>
         </div>
         <div class="divider"></div>
@@ -139,7 +143,7 @@
                 <p><span>{{t('global.segment')}}: </span> {{ load.categories?.map((e) => e.name).join(', ') }}</p>
                 <p><span>{{t('loads.loadCode')}}: </span> {{ load.shipment_code?.toUpperCase() }}
                     <span 
-                        v-if="load.load_status !== 'Draft' && !readOnly" 
+                        v-if="load.status !== 'Draft' && tracking" 
                         class="tracking-icon" 
                         @click="handleTracking" 
                         data-target="_blank"
@@ -156,7 +160,7 @@
         <div v-if="load.notes" class="box-note">
             {{ load.notes }}
         </div>
-        <div class="btn-row" v-if="!readOnly && authStore.user?.permissions === 'role_shipper'">
+        <div class="btn-row" v-if="load?.company?._id === authStore?.user?.company._id">
             <button
                 v-if="(authStore.user?.job_role === 'owner' || authStore.user?.job_role === 'manager') || authStore.user._id === props.load.posted_by"
                 class="btn-primary-sm bg-danger"
@@ -185,7 +189,7 @@
                 data-target="#proposalsModal"
             >#{{ load.no_of_proposals }} {{t('loads.offers')}}</button>
         </div>
-        <div class="btn-row" v-if="!readOnly && authStore.user?.permissions === 'role_carrier'">
+        <div class="btn-row" v-if="readOnly && authStore.user?.permissions === 'role_carrier'">
             <button
                 class="btn-primary-sm bg-dark"
                 data-toggle="modal" 

src/components/CardProposal.vue

@@ -1,6 +1,6 @@
 <script setup>
     import Swal from 'sweetalert2';
-    import { getDateMonthDay } from '../helpers/date_formats';
+    import { getDateOnly } from '../helpers/date_formats';
     import { getStatusLoad } from '../helpers/status';
     import { useCompanyStore } from '../stores/company';
     import { useAuthStore } from '../stores/auth';
@@ -87,10 +87,10 @@
                 <p v-if="proposal.vehicle"><span>{{ t('labels.codeId') }}:</span> {{proposal.vehicle.vehicle_code?.toUpperCase()}}</p>
                 <p v-if="proposal.vehicle"><span>{{ t('global.segment') }}:</span> {{proposal.load.categories?.map((e) => e.name).join(', ')}}</p>
                 <p v-if="proposal.vehicle"><span>{{ t('directory.typeTruck') }}:</span> {{proposal.vehicle.truck_type}}</p>
-                <p v-if="proposal.vehicle"><span>{{ t('labels.datePublished') }}:</span> {{ getDateMonthDay(proposal.vehicle.published_date) }}</p>
+                <p v-if="proposal.vehicle?.published_date"><span>{{ t('labels.datePublished') }}:</span> {{ getDateOnly(proposal.vehicle.published_date) }}</p>
-                <p v-if="proposal.vehicle"><span>{{ t('labels.dateAvailable') }}:</span> {{ getDateMonthDay(proposal.vehicle.available_date) }}</p>
+                <p v-if="proposal.vehicle?.is_available"><span>{{ t('labels.dateAvailable') }}:</span> {{ getDateOnly(proposal.vehicle.available_date) }}</p>
-                <p v-if="proposal.vehicle"><span>{{ t('vehicles.availableIn') }}:</span> {{proposal.vehicle.city}}<template v-if="proposal.vehicle.state">, {{proposal.vehicle.state}}</template></p>
+                <p v-if="proposal.vehicle?.is_available"><span>{{ t('vehicles.availableIn') }}:</span> {{proposal.vehicle.city}}<template v-if="proposal.vehicle.state">, {{proposal.vehicle.state}}</template></p>
-                <p v-if="proposal.vehicle"><span>{{ t('loads.destination') }}:</span> {{proposal.vehicle.destino}}</p>
+                <p v-if="proposal.vehicle"><span>{{ t('loads.destination') }}:</span> {{proposal.vehicle?.destino.replace(';', ', ')}}</p>
                 <p><span>{{ t('vehicles.truckPlates') }}:</span> {{ proposal.vehicle.circulation_serial_number }}</p>
                 <p v-if="proposal.vehicle"><span>{{ t('vehicles.trailerPlates') }} 1:</span> {{proposal.vehicle.trailer_plate_1}}</p>
                 <p v-if="proposal.vehicle"><span>{{ t('vehicles.trailerPlates') }} 2:</span> {{proposal.vehicle.trailer_plate_2}}</p>
@@ -103,7 +103,7 @@
                         @click="$emit('set-proposal', {proposal: proposal, modal: 'detail'})"
                         data-toggle="modal" data-target="#loadDetailModal"
                     >{{proposal.load.shipment_code.toUpperCase()}}</span></p>
-                <p v-if="proposal.vehicle" :style="{color: getStatusLoad(proposal.load, locale).color}"><span>{{  t('loads.loadStatus') }}:</span> {{ getStatusLoad(proposal.load, locale).status}}</p>
+                <p v-if="proposal.vehicle" :style="{color: getStatusLoad(proposal.load, locale).color, fontWeight: 'bold'}"><span>{{  t('loads.loadStatus') }}:</span> {{ getStatusLoad(proposal.load, locale).status}}</p>
                 <p v-if="proposal._driver">{{ t('labels.operator') }}: {{proposal._driver}}</p>
 
             </div>
@@ -222,4 +222,5 @@
             gap: 0.2rem;
         }
     }
+    
 </style>

src/components/CardVehicle.vue

@@ -1,6 +1,6 @@
 <script setup>
     import Swal from 'sweetalert2';
-    import { getDateMonthDayEs } from '../helpers/date_formats';
+    import { getDateOnly } from '../helpers/date_formats';
     import { useVehiclesStore } from '../stores/vehicles';
     import { useAuthStore } from '../stores/auth';
     import { useI18n } from 'vue-i18n';
@@ -10,6 +10,11 @@
         vehicle: {
             type: Object,
             required: true
+        },
+        readOnly: {
+            type: Boolean,
+            required: false,
+            default: false
         }
     })
     defineEmits(['set-vehicle']);
@@ -70,15 +75,17 @@
     <div class="card-fixed card-vehicle">
         <div class="row my-2">
             <div class="col-lg-6">
+                <p v-if="vehicle.company !== authStore?.user?.company._id">{{ t('global.company') }}: <span>{{ vehicle?.company_name }}</span></p>
                 <p>{{ t('labels.codeId') }}: <span>{{ vehicle?.vehicle_code.toUpperCase() }}</span></p>
                 <p>{{ t('directory.typeTruck') }}: <span>{{ vehicle.truck_type }}</span></p>
-                <p>{{ t('vehicles.serialNumber') }}: <span>{{ vehicle.vehicle_number }}</span></p>
+                <p v-if="!readOnly">{{ t('vehicles.serialNumber') }}: <span>{{ vehicle.vehicle_number }}</span></p>
                 <p>{{ t('global.segment') }}: <span>{{vehicle.categories?.map((e) => e.name).join(', ')}}</span></p>
                 <p>{{ t('labels.driver') }}: 
                     <span>
                         <span v-if="vehicle?.driver">{{ vehicle?.driver?.first_name }} {{ vehicle?.driver?.last_name }} </span> 
                         <span v-else>{{ t('vehicles.noDriver') }} </span> 
                         <i 
+                        v-if="!readOnly"
                         class="fa-solid fa-pen-to-square icon-btn" 
                         data-toggle="modal"
                         data-target="#editDriverVehicle"
@@ -92,11 +99,12 @@
             <div class="col-lg-6">
                 <p>{{ t('vehicles.trailerPlates') }} 2: <span>{{ vehicle.trailer_plate_2 }}</span></p>
                 <p>{{ t('vehicles.chargingBase') }}: <span>{{ vehicle.city }}, {{ vehicle.state }}</span></p>
-                <p v-if="vehicle.destino">{{ t('loads.destination') }}: <span>{{ vehicle.destino.replace(';', ', ') }}</span></p>
                 <p v-if="vehicle.available_in">{{ t('vehicles.availableIn') }}: <span>{{ vehicle.available_in.replace(';', ', ') }}</span></p>
+                <p v-if="vehicle.destino">{{ t('loads.destination') }}: <span>{{ vehicle.destino.replace(';', ', ') }}</span></p>
                 <p>Status: 
                     <span>{{ vehicle.is_available ? t('vehicles.available') : t('vehicles.reserved')}} 
                         <i 
+                            v-if="!readOnly"
                             class="fa-solid fa-pen-to-square icon-btn" 
                             data-toggle="modal"
                             data-target="#editStatusVehicle"
@@ -104,23 +112,26 @@
                         </i>
                     </span>
                 </p>
-                <p v-if="vehicle.is_available">{{ t('vehicles.availableDate') }}: <span>{{ getDateMonthDayEs(vehicle.available_date, false) }}</span></p>
+                <p v-if="vehicle.is_available">{{ t('vehicles.availableDate') }}: <span>{{ getDateOnly(vehicle.available_date) }}</span></p>
-                <p v-if="vehicle.active_load">
+                <p v-if="vehicle.active_load && !readOnly">
                     {{ t('loads.loadCode') }}: 
                     <span
-                        class="code-enruta"
+                        class="code-enruta font-bold"
                         @click="handleTracking" 
                         data-target="_blank"
                     >{{ vehicle.active_load.shipment_code?.toUpperCase() }}</span>
                 </p>
-                <p v-if="vehicle.active_load">{{ t('loads.loadStatus') }}: <span>{{ getStatusLoad(vehicle.active_load, locale).status}}</span></p>
+                <p v-if="vehicle.active_load && !readOnly">
+                    {{ t('loads.loadStatus') }}: 
+                    <span :style="{color: getStatusLoad(vehicle.active_load).color, fontWeight: 'bold'}">{{ getStatusLoad(vehicle.active_load, locale).status}}</span>
+                </p>
             </div>
         </div>
         <p v-if="vehicle.notes">{{ t('vehicles.additionalInfoVehicle') }}:</p>
         <div v-if="vehicle.notes" class="box-note mb-4">
             {{ vehicle.notes }}
         </div>
-        <div class="card-footer">
+        <div class="card-footer" v-if="vehicle.company === authStore?.user?.company._id">
             <button 
                 v-if="(authStore.user?.job_role === 'owner' || authStore.user?.job_role === 'manager') || authStore.user._id === props.vehicle.posted_by"
                 class="btn btn-dark radius-sm"
@@ -182,4 +193,7 @@
         cursor: pointer;
         color: rgb(107, 107, 227);
     }
+    .font-bold {
+        font-weight: 700;
+    }
 </style>

src/components/CreateVehicleModal.vue

@@ -53,9 +53,8 @@
 
     onMounted(() => {
         
-        const [destinoCityName = '', destinoStateName = ''] = props.vehicle.destino?.split(';') || [];
-
         if(props.vehicle) {
+            const [destinoCityName = '', destinoStateName = ''] = props.vehicle.destino?.split(';') || [];
             vehicleForm.truck_type = {
                 meta_value: props.vehicle.truck_type
             };
@@ -162,15 +161,15 @@
                 </div>
                 <div class="modal-body form-content">
                     <form @submit.prevent="handleSaveVehicle" autocomplete="off" class="vehicle-form">
-                        <div class="row mt-4">
+                        <div class="row">
-                            <div class="col-lg-6 col-12">
+                            <div class="col-lg-6 col-12 mt-4">
                                 <label class="custom-label">{{ t('directory.typeTruck') }}*</label>
                                 <TruckTypes
                                     v-model="vehicleForm.truck_type" 
                                 />
                                 <span class="error-msg" v-if="errors.truck_type">{{ errors.truck_type }}</span>
                             </div>
-                            <div class="col-lg-6 col-12">
+                            <div class="col-lg-6 col-12 mt-4">
                                 <label class="custom-label">{{ t('vehicles.segments') }}*</label>
                                 <Segments
                                     v-model="vehicleForm.categories" 

src/components/FormLoadModal.vue

@@ -86,11 +86,8 @@
         formLoad.owner = auth.user?.first_name + ' ' + auth.user?.last_name;
         //origin_formatted_address
         if(loadStore.currentLoad){
-            // console.log(loadStore.currentLoad)
             const dateStart = getDateTime(loadStore.currentLoad.est_loading_date, 0);
             const dateEnd = getDateTime(loadStore.currentLoad.est_unloading_date, 0);
-            console.log(dateStart)
-            console.log(dateEnd)
             formLoad.price = loadStore.currentLoad.actual_cost;
 			formLoad.segment = loadStore.currentLoad.categories?.length <= 0 ? [] : loadStore.currentLoad.categories.map(m =>{
 				return m;
@@ -275,13 +272,18 @@
         if(loadStore.currentLoad){
             const resp = await loadStore.updateLoad(loadStore.currentLoad._id, loadData);
             isLoading.value = false;
+            const dataLocal = {
+                company: auth.user.company,
+                categories: formLoad.segment || null,
+                product: formLoad.terms?.length <= 0 ? null :  formLoad.terms
+            };
             if(resp) {
                 const index = loadStore.loads.findIndex((load) => load._id === resp._id);
                 loadStore.loads[index] = {
                     ...loadStore.loads[index],
-                    ...resp
+                    ...resp,
+                    ...dataLocal,
                 };
-                
                 return 'success';
             } else {
                 return 'error';
@@ -295,6 +297,7 @@
                     ...loadData,
                     categories: [loadData.categories]
                 }
+
                 loadStore.loads.unshift(load);
                 return 'success';
             } else {

src/components/NavBar.vue

@@ -23,6 +23,10 @@
                     <i class="fas fa-align-left"></i>
                 </button>
                 <div class="nav-options">
+                    <RouterLink 
+                        v-if="auth.user?.permissions === 'role_shipper'"
+                        active-class="router-link-active"
+                        class="nav-link" :to="{name: 'search-vehicles'}"> <i class="fa-solid fa-truck-ramp-box me-1"></i> <span class="clear-xsm">{{ t('global.vehicles') }}</span></RouterLink>
                     <RouterLink 
                         v-if="auth.user?.permissions === 'role_shipper'"
                         active-class="router-link-active"

src/components/ProposalsModal.vue

@@ -44,10 +44,16 @@
         isLoadingActions.value = true;
         let load = await loadsStore.updateLoad(load_id, loadData);
         if(load != null) {
+            const dataLocal = {
+                company: authStore.user.company,
+                categories: loadsStore?.currentLoad?.categories,
+                product: loadsStore?.currentLoad?.product
+            };
             const index = loadsStore.loads.findIndex((load) => load._id === load_id);
             loadsStore.loads[index] = {
                 ...loadsStore.loads[index],
-                ...load
+                ...load,
+                ...dataLocal
             };
             const proposal_id = proposal._id;
     
@@ -109,10 +115,16 @@
             isLoadingActions.value = true;
             let load = await loadsStore.updateLoad(load_id, loadData);
             if(load) {
+                const dataLocal = {
+                    company: authStore.user.company,
+                    categories: loadsStore?.currentLoad?.categories,
+                    product: loadsStore?.currentLoad?.product
+                };
                 const index = loadsStore.loads.findIndex((load) => load._id === load_id);
                 loadsStore.loads[index] = {
                     ...loadsStore.loads[index],
-                    ...load
+                    ...load,
+                    ...dataLocal
                 };
                 let formData = {
                     accepted_by : null,

src/components/StatusVehicleModal.vue

@@ -7,8 +7,10 @@
     import States from './ui/States.vue';
     import Cities from './ui/Cities.vue';
     import Swal from 'sweetalert2';
+    import { getDateTime } from '../helpers/date_formats';
     import { useI18n } from 'vue-i18n';
 
+
     const props = defineProps({
         vehicle: {
             type: Object
@@ -24,12 +26,12 @@
         
         const [destinoCityName = '', destinoStateName = ''] = props.vehicle.destino?.split(';') || [];
         const [availableCityName = '', availableStateName = ''] = props.vehicle.available_in?.split(';') || [];
-        
+        const date = getDateTime( props.vehicle?.available_date || new Date(), 0);
         formAvailiable.destinoCity = destinoCityName ? { city_name: destinoCityName } : '';
         formAvailiable.destinoState = destinoStateName ? { state_name: destinoStateName } : '';
         formAvailiable.availableCity = availableCityName ? { city_name: availableCityName } : '';
         formAvailiable.availableState = availableStateName ?  { state_name: availableStateName } : '';
-        formAvailiable.available_date = props.vehicle.available_date?.substring(0, 10);
+        formAvailiable.available_date = date.substring(0, 10);
     });
 
     defineEmits(['reset-vehicle']);
@@ -53,18 +55,19 @@
 
     const handleSetStatusVehicle = async() => {
         let vehicleData;
-        // console.log(statusSelected.value);
+        const currentDate = new Date();
+        const hours = currentDate.getHours().toString().padStart(2, '0');
+        const minutes = currentDate.getMinutes().toString().padStart(2, '0');
+        const seconds = currentDate.getSeconds().toString().padStart(2, '0');
         if(statusSelected.value === 'Availiable') {
-            // console.log('check validations');
             validations();
             if(errors.value.availableCity || errors.value.availableState || errors.value.destinoCity || errors.value.destinoState ) return;
             vehicleData = {
-				available_date : formAvailiable.available_date,
+				available_date : new Date(`${formAvailiable.available_date}T${hours}:${minutes}:${seconds}`).toISOString(),
                 destino: formAvailiable.destinoCity.city_name + ';' + formAvailiable.destinoState.state_name,
                 available_in: formAvailiable.availableCity.city_name + ';' + formAvailiable.availableState.state_name,
                 is_available : true
 			}
-            console.log(vehicleData);
         } else {
             vehicleData = {
 				available_date : null,
@@ -73,7 +76,8 @@
         }
         let localData = {
             driver: props.vehicle.driver,
-            categories: props.vehicle.categories
+            categories: props.vehicle.categories,
+            active_load: props.vehicle.active_load,
         }
         loading.value = true;
         const result = await vehicleStore.updateVehicleCompany(props.vehicle._id, vehicleData, localData);

src/composables/useSearchVehicles.js

@@ -0,0 +1,37 @@
+import { ref } from "vue";
+import api from "../lib/axios";
+
+export default function useSearchVehicles() {
+    const vehicles = ref([]);
+    const loading = ref(false);
+    const total = ref(0);
+    const currentPage = ref(0);
+
+    const getVehiclesPublished = async(filterQuery) => {
+        loading.value = true;
+        let filterArr = Object.values(filterQuery);
+        let cleanfilterArr =  filterArr.filter(n=>n);
+        var filterStr = "";
+        if(cleanfilterArr.length >0){
+            filterStr = "?"+cleanfilterArr.join("&");
+        }
+        try {
+            const endpoint = `/v1/vehicles/global/find${filterStr}&$sort[createdAt]=-1`;
+            const {data} = await api.get(endpoint);
+            total.value = data.total;
+            vehicles.value = data.data;
+        } catch (error) {
+            vehicles.value = [];
+            total.value = 0;
+        }
+        loading.value = false;
+    }
+
+    return {
+        getVehiclesPublished,
+        loading,
+        vehicles, 
+        total,
+        currentPage,
+    }
+}

src/composables/userSearchLoads.js

@@ -17,7 +17,7 @@ export default function useSearchLoads() {
         }
         try {
             const endpoint = `/v1/loads/find${filterStr}&$sort[createdAt]=-1`;
-            console.log(endpoint);
+            // console.log(endpoint);
             const {data} = await api.get(endpoint);
             total.value = data.total;
             loads.value = data.data;

src/helpers/date_formats.js

@@ -89,7 +89,7 @@ export const getDateTime = (value, hour) => {
 export const getDateOnly = (value) => {
 
   const date = new Date(value);
-  date.setHours(date.getHours());
+  date.setHours(date.getHours(), 0);
 
   // Obtener los componentes de la fecha
   const year = date.getFullYear();

src/i18n/en.js

@@ -336,7 +336,7 @@ const en = {
         loadingRetired: 'Withdrawing offer',
         msgTitleRetire: 'Offer withdrawn!',
 
-        title: 'My offers accepted',
+        title: 'Offers',
         retired: 'Retired',
         withdraw: 'Withdraw',
 

src/i18n/es.js

@@ -170,7 +170,7 @@ const es = {
         shippers: 'Embarcadores',
         vehicles: 'Vehiculos',
         loads: 'Cargas',
-        acceptedOffers: 'Ofertas aceptadas',
+        acceptedOffers: 'Ofertas',
         calculator: 'Calculadora',
         cities: 'Ciudades',
         states: 'Estados',

src/router/index.js

@@ -148,6 +148,11 @@ const router = createRouter({
           name: 'search-loads',
           component: () => import('../views/SearchLoadsView.vue'),
         },
+        {
+          path: 'buscar-vehiclulos',
+          name: 'search-vehicles',
+          component: () => import('../views/SearchVehiclesView.vue'),
+        },
       ]
     }
   ]

src/services/company.js

@@ -132,7 +132,7 @@ export const deleteBudget = async(id) => {
 
 export const getLocations = async(filter) => {
     try {
-        const endpoint = `/v1/branches/find${filter}&$sort%5BcreatedAt%5D=-1`;
+        const endpoint = `/v1/branches/find${filter}&$sort[createdAt]=1`;
         console.log(endpoint);
         const {data} = await api.get(endpoint);
         return data;

src/stores/company.js

@@ -318,14 +318,14 @@ export const useCompanyStore = defineStore('company', () => {
 
     const createLocationCompany = async(formData, localData) => {
         const data = await createLocation(formData);
-        if(data) {
+        if(data?.data) {
             locations.value.unshift({
-                ...data,
+                ...data?.data,
                 ...localData
             });
             locationsTotal.value++;
             locationsLoads.value.unshift({
-                ...data,
+                ...data?.data,
                 ...localData
             })
             return 'success';

src/stores/loads.js

@@ -53,6 +53,7 @@ export const useLoadsStore = defineStore('load', () => {
         if(loads.value.length <= 0 || reload) {
             try {
                 const endpoint = `/v1/loads/find?company=${companyid}&${filterStr}&$sort%5BcreatedAt%5D=-1`;
+                console.log(endpoint);
                 const {data} = await api.get(endpoint);
                 loads.value = data.data;
                 loadsTotal.value = data.total;

src/stores/vehicles.js

@@ -19,7 +19,7 @@ export const useVehiclesStore = defineStore('vehicles', () => {
         }
         if(vehicles.value.length <= 0 || reload === true) {
             const resp = await getVehicles(filterStr + '&$sort%5BcreatedAt%5D=-1');
-            console.log(resp);
+            // console.log(resp);
             if(resp !== null) {
                 vehiclesTotal.value = resp.total;
                 vehicles.value = resp.data;

src/views/CompleteRegisterView.vue

@@ -33,7 +33,7 @@
 
     const company = reactive({
         name: '',
-        rfc: 'USAL950402D96',
+        rfc: '',
         segments: [],
         states: [],
         cities: [],

src/views/LoadsPublishedView.vue

@@ -133,7 +133,7 @@
                     :key="load._id"
                     :load="load" 
                 />
-                <CardEmpty v-else :text="t('loads.empty')"/>
+                <CardEmpty v-else :text="t('loads.empty')" class="mt-5"/>
                 <Pagination
                     :limit="limit"
                     :total="loadStore.loadsTotal"

src/views/SearchLoadsView.vue

@@ -204,7 +204,7 @@
             v-if="loads.length > 0" 
             v-for="load in loads"
             :load="load"
-            :read-only="false"
+            :read-only="true"
             @set-load="handleSetCurrentLoad(load)"
         />
         <CardEmpty 

src/views/SearchVehiclesView.vue

@@ -0,0 +1,226 @@
+<script setup>
+    import { onMounted, ref, watch } from 'vue';
+    import useSearchVehicles from '../composables/useSearchVehicles';
+    import Spiner from '../components/ui/Spiner.vue';
+    import CardVehicle from '../components/CardVehicle.vue';
+    import CardEmpty from '../components/CardEmpty.vue'
+    import TruckTypes from '../components/ui/TruckTypes.vue';
+    import Segments from '../components/ui/Segments.vue';
+    import States from '../components/ui/States.vue';
+    import Cities from '../components/ui/Cities.vue';
+    import Pagination from '../components/Pagination.vue';
+    import { useI18n } from 'vue-i18n';
+
+    const filterQuery = ref([]);
+    const query = ref('');
+    const selectedTruckType = ref([]);
+    const selectedCategory = ref([]);
+    const selectedState = ref([]);
+    const selectedCities = ref([]);
+    const limit = 10;
+    const isSearch = ref(false);
+    const { getVehiclesPublished, vehicles, loading, currentPage, total } = useSearchVehicles();
+
+    onMounted(() => {
+        getInitData();
+    });
+
+    const { t } = useI18n()
+
+    watch(query, () => {
+        isSearch.value = true;
+        setFilterUnlimited();
+        if(query.value.length === 0){
+            if(selectedCategory.value?.length === 0  && selectedTruckType.value?.length === 0 && selectedCities.value?.length === 0 && selectedState.value?.length === 0 ) {
+                clearRequest();
+                isSearch.value = false;
+            }
+            filterQuery.value.search = "";
+            getVehiclesPublished(filterQuery.value);
+        }
+    });
+
+    watch(selectedState, () => {
+        if(selectedState.value != null){
+            setFilterUnlimited()
+            filterQuery.value.state = "state[$in][]="+ selectedState.value.state_name;
+            getVehiclesPublished(filterQuery.value);
+        } 
+    });
+
+    watch(selectedCities, () => {
+        if(selectedCities.value != null){
+            setFilterUnlimited()
+            filterQuery.value.city = "city[$regex]="+ selectedCities.value.city_name;
+            getVehiclesPublished(filterQuery.value);
+        } 
+    });
+
+    watch(selectedCategory, () => {
+        if(selectedCategory.value != null){
+            setFilterUnlimited()
+            filterQuery.value.category = "categories[$in][]=" + selectedCategory.value._id;
+            getVehiclesPublished(filterQuery.value);
+        } 
+    });
+
+    watch(selectedTruckType, () => {
+        if(selectedTruckType.value != null){
+            setFilterUnlimited()
+            filterQuery.value.truck_type = "truck_type[$in][]="+ selectedTruckType.value.meta_value;
+            getVehiclesPublished(filterQuery.value);
+        } 
+    });
+
+    const search = () => {
+        if(query.value.length >= 2){
+            // filterQuery.value.search = "company_name[$regex]=" + query.value + "&company_name[$options]=i";
+            filterQuery.value.search = `company_name[$regex]=${query.value}&company_name[$options]=i`;
+            getVehiclesPublished(filterQuery.value);
+        } 
+    
+    }
+
+    const clearFilter = () => {
+        clearRequest();
+        isSearch.value = false;
+        selectedCities.value = null;
+        selectedCategory.value = null;
+        selectedState.value = null;
+        selectedTruckType.value = null;
+
+        filterQuery.value.truck_type = "";
+        filterQuery.value.category = "";
+        filterQuery.value.city = "";
+        filterQuery.value.state = "";
+
+        filterQuery.value.status = "is_available=true";
+
+        if(query.value == ''){
+            getVehiclesPublished(filterQuery.value);
+        } else {
+            query.value = '';
+        }
+    }
+
+    const clearState = () => {
+        filterQuery.value.state = "";
+        getVehiclesPublished(filterQuery.value);
+    }
+
+    const clearCity = () => {
+        filterQuery.value.city = "";
+        getVehiclesPublished(filterQuery.value);
+    }
+
+    const clearTruckType = () => {
+        filterQuery.value.truck_type = "";
+        getVehiclesPublished(filterQuery.value);
+    }
+
+    const clearCategory = () => {
+        filterQuery.value.category = "";
+        getVehiclesPublished(filterQuery.value);
+    }
+
+    const getInitData = async() => {
+        filterQuery.value.limit = 'elements=' + limit;
+        filterQuery.value.page = "page=0";
+        filterQuery.value.company = "";
+
+        filterQuery.value.status = "is_available=true";
+        await getVehiclesPublished(filterQuery.value);
+    }
+
+    const getLoadsByPage = (data) => {
+        filterQuery.value.page = "page="+ data.page;
+        currentPage.value = data.page
+        getVehiclesPublished(filterQuery.value);
+    }
+
+    const clearRequest = () => {
+        filterQuery.value.page = "page="+ 0;
+        filterQuery.value.limit = "elements="+ limit;
+        currentPage.value = 0;
+    }
+
+    const setFilterUnlimited = () => {
+        filterQuery.value.page = "page="+ 0;
+        filterQuery.value.limit = "elements="+ 100;
+    }
+
+</script>
+
+<template>
+    <h2 class="title mb-5">{{ t('vehicles.search') }}</h2>
+
+    <div class="card-filters">
+        <div class="d-flex mb-2">
+            <input class="form-control me-2" type="search" name="" :placeholder="t('carriers.searchByCarrier')" id="" @:input="search()" v-model="query" aria-label="Search">
+            <button class="btn btn-outline-dark me-2" type="button" @click="search">{{ t('buttons.search') }}</button>
+            <button 
+                class="btn btn-danger" type="button" @click="clearFilter">
+                <i class="fa-solid fa-arrow-rotate-right"></i>
+            </button>
+        </div>
+        <div class="row">
+            <div class="col-xs-12 col-sm-6 px-2 py-2">
+                <TruckTypes v-model="selectedTruckType" @clear-option="clearTruckType"/>
+            </div>
+            <div class=" col-xs-12 col-sm-6 px-2 py-2">
+                <Segments v-model="selectedCategory" @clear-option="clearCategory"/>
+            </div>
+        </div>
+        <div class="row">
+            <div class="col-xs-12 col-sm-6 px-2 py-2">
+                <States v-model="selectedState" @clear-option="clearState"/>
+            </div>
+            <div class="col-xs-12 col-sm-6 px-2 py-2">
+                <Cities v-model="selectedCities" @clear-option="clearCity"/>
+            </div>
+        </div>
+    </div>
+    <Spiner class="mt-4" v-if="loading"/>
+    <div v-else>
+        <CardVehicle
+            v-if="vehicles.length > 0"
+            v-for="vehicle in vehicles"
+            :vehicle="vehicle"
+            :key="vehicle._id"
+            :read-only="true"
+        />
+        <CardEmpty 
+            v-else
+            text="No hay vehiculos publicadas"
+        />
+        <Pagination
+            v-if="!isSearch"
+            :limit="limit"
+            :total="total"
+            :current-page="currentPage"
+            @get-elements="getLoadsByPage"
+        />
+    </div>
+</template>
+
+<style scoped>
+    .card-filters {
+        display: flex;
+        margin: 0 auto;
+        background-color: #FFF;
+        border-radius: 13px;
+        /* background-color: red; */
+        flex-direction: column;
+        /* align-items: center; */
+        justify-content: center;
+        width: 100%;
+        padding: 20px 10%;
+        margin-bottom: 24px;
+    }
+
+    @media (max-width: 768px) {
+        .card-filters {
+            padding: 20px 16px;
+        }
+    }
+</style>

src/views/TrackingLoadView.vue

@@ -94,7 +94,7 @@
     <Spiner v-if="loading"/>
     <div v-else>
         <div v-if="load">
-            <CardLoad :load="load" :read-only="true"/>
+            <CardLoad :load="load" :read-only="true" :tracking="false"/>
             <br/>
             <GoogleMap
                     :api-key="mapKey"