add: search vehicles view & fixes: bugs state

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"