add: filters locations & offerts

src/components/CardLocation.vue

@@ -65,7 +65,7 @@
     <div class="card-fixed card-location">
         <div>
             <p><span>{{ t('directory.name') }}:</span> {{location.branch_name}}</p>
-            <p><span>{{ t('directory.address') }}:</span> <template v-if="location.address">{{location.address}}, </template><template v-if="location.city">{{location.city}}, </template><template v-if="location.state">{{location.state}}</template></p>
+            <p><span>{{ t('directory.address') }}:</span> <template v-if="location.address">{{location.address}}, </template><template v-if="location.zipcode">CP. {{location.zipcode}}, </template><template v-if="location.city">{{location.city}}, </template><template v-if="location.state">{{location.state}}</template></p>
             <p><span>{{ t('labels.phone') }}:</span> {{location.phone}}</p>
             <p><span>{{ t('directory.typeTruckNeed') }}:</span> {{location.truck_type?.map((e) => e).join(', ')}}</p>
             <p><span>{{ t('global.segments') }}:</span> {{location.categories?.map((e) => e.name).join(', ')}}</p>

src/components/CreateLocationModal.vue

@@ -18,6 +18,8 @@
         }
     });
 
+    console.log(props.location);
+
     defineEmits(['reset-location']);
 
     const authStore = useAuthStore();
@@ -72,7 +74,7 @@
             locationForm.zipcode = props.location.zipcode;
             locationForm.address = props.location.address;
             locationForm.description = props.location.description;
-            locationForm.zipcode = "";
+            locationForm.zipcode = props.location.zipcode;
         } else {
             Object.assign(locationForm, initState);
         }
@@ -84,7 +86,7 @@
 
     const saveLocation = async() => {
         validations();
-        if(errors.value.branch_name || errors.value.address || errors.value.city || errors.value.state || errors.value.zipcode) {
+        if(errors.value.branch_name || errors.value.address || errors.value.city || errors.value.state || errors.value.zipcode || errors.value.location_type) {
             return;
         } else {
 
@@ -194,7 +196,7 @@
                             <span class="error-msg" v-if="errors.city">{{ errors.city }}</span>
                         </div>
                         <div class="d-flex flex-column mb-4">
-                            <label class="custom-label" for="role">{{ t('directory.typeDirectory')}}</label>
+                            <label class="custom-label" for="role">{{ t('directory.typeDirectory') + '*'}}</label>
                             <select 
                                 class="custom-input-light"
                                 name="type" 
@@ -210,9 +212,10 @@
                             <span class="error-msg" v-if="errors.location_type">{{ errors.location_type }}</span>
                         </div>
                         <CustomInput
-                            :label="t('directory.zipCode')"
+                            :label="t('directory.zipCode') +  '*'"
                             name="zipcode"
                             type="number"
+                            :step="1"
                             v-model:field="locationForm.zipcode"
                             :filled="false"
                             :error="errors.zipcode"

src/composables/useAttachments.js

@@ -11,6 +11,7 @@ export default function useAttachments() {
     const getAttachmentLoad = async() => {
         try {
             loading.value = true;
+            // const endpoint = "/v1" + "/public-load-attachments/load/" + loadStore.currentLoad._id;
             const endpoint = "/v1" + "/load-attachments/load/" + loadStore.currentLoad._id;
             const {data} = await api.get(endpoint);
             attachments.value = data;

src/i18n/en.js

@@ -43,7 +43,13 @@ const en = {
         driver: 'Driver',
         filters: 'Filters',
         location: 'Location',
-        both: 'Both',
+        alls: 'All directories',
+        both: 'Load/Download',
+        accepted: 'Offers accepted',
+        notAccepted: 'Offers not accepted',
+        withdraw: 'Offers withdrawn',
+        completed: 'Offers completed',
+        all: 'All offers',
         load: 'Load',
         download: 'Download',
         select: 'Select',
@@ -336,7 +342,7 @@ const en = {
         loadingRetired: 'Withdrawing offer',
         msgTitleRetire: 'Offer withdrawn!',
 
-        title: 'Offers',
+        title: 'My offers',
         retired: 'Retired',
         withdraw: 'Withdraw',
 

src/i18n/es.js

@@ -1,3 +1,4 @@
+import { all } from "axios";
 
 
 const es = {
@@ -45,9 +46,15 @@ const es = {
         driver: 'Conductor',
         filters: 'Filtros',
         location: 'Ubicación',
-        both: 'Ambas',
+        alls: 'Todos los directorios',
+        both: 'Carga/Descarga',
         load: 'Carga',
         download: 'Descarga',
+        accepted: 'Ofertas aceptadas',
+        notAccepted: 'Ofertas no aceptadas',
+        withdraw: 'Ofertas retiradas',
+        completed: 'Ofertas completadas',
+        all: 'Todas las ofertas',
         select: 'Seleccionar',
         additionalInformation: 'Información adicional',
         writeHere: 'Escribe aqui',
@@ -342,7 +349,7 @@ const es = {
         loadingRetired: 'Retirando oferta',
         msgTitleRetire: 'Oferta retirada!',
 
-        title: 'Mis ofertas aceptadas',
+        title: 'Mis ofertas',
         retired: 'Retirado',
         withdraw: 'Retirar',
 

src/stores/company.js

@@ -7,6 +7,7 @@ import { useI18n } from "vue-i18n";
 
 export const useCompanyStore = defineStore('company', () => {
 
+    const { t } = useI18n();
     const company = ref(null)
     const users = ref([]);
     const drivers = ref([]);
@@ -18,12 +19,12 @@ export const useCompanyStore = defineStore('company', () => {
     const locations = ref([]);
     const locationsLoads = ref([]);
     const locationsTotal = ref(0);
+    const locationType = ref({value: '', label: t('labels.alls')})
     const locationsCurrentPage = ref(0);
     const proposals = ref([]);
     const proposalsTotal = ref(0);
     const proposalsCurrentPage = ref(0)
     const loading = ref(false);
-    const { t } = useI18n();
 
     const getCompanyData = async() => {
         const companyId = localStorage.getItem('id');
@@ -400,6 +401,7 @@ export const useCompanyStore = defineStore('company', () => {
        locationsLoads,
        locationsTotal,
        locationsCurrentPage,
+        locationType,
        clear,
        $reset,
        loading,

src/views/LocationsView.vue

@@ -17,24 +17,24 @@
     const locationCurrent = ref(null);
     const openModal = ref(false);
     const { t, locale } = useI18n();
-    const typeDirection = ref({value: 'both', label: t('labels.both')})
     const optionsFilter = ref([]);
     const openPopup = ref(false);
 
 
     onMounted(() => {
-        getInitData();
+        getInitData(false);
     })
 
     const limit = 10;
 
-    const getInitData = async() => {
+    const getInitData = async(reload) => {
         loading.value = true;
         filterQuery.value.company = "company="+ localStorage.getItem('id');
         filterQuery.value.limit = "elements=" + limit;
         filterQuery.value.page = "page=" + 0;
-        await companyStore.getLocationsCompany(filterQuery.value, false)
+        await companyStore.getLocationsCompany(filterQuery.value, reload)
         optionsFilter.value = [
+            {value: '', label: t('labels.alls')},
             {value: 'both',label: t('labels.both')},
             {value: 'loading',label: t('labels.load')},
             {value: 'unloading',label: t('labels.download')}
@@ -88,8 +88,10 @@
 
         filterQuery.value.search = "";
         filterQuery.value.company = "company="+ localStorage.getItem('id');
-        if(query.value == ''){
+        filterQuery.value.type = "";
-            getInitData();
+        companyStore.locationsCurrentPage = 0;
+        if(query.value === '' || companyStore.locationType.value !== 'all'){
+            getInitData(true);
         } else {
             query.value = '';
         }
@@ -98,7 +100,6 @@
     const clearRequest = () => {
         filterQuery.value.page = "page=" + 0;
         filterQuery.value.limit = "elements="+ limit;
-        companyStore.locationsCurrentPage = 0;
     }
 
     const handleSetCurrentLocation = (location) => {
@@ -111,9 +112,15 @@
         locationCurrent.value = null;
     }
 
-    const selectedType = (type) => {
+    const selectedType = async(type) => {
-        typeDirection.value = type
+        companyStore.locationType = type
+        let value = type.value;
         openPopup.value = false
+        filterQuery.value.limit = "elements=" + limit;
+        companyStore.locationsCurrentPage = 0;
+        filterQuery.value.page = "page=" + 0;
+        filterQuery.value.type = "type=" + value;
+        await getLocationsWithFilters(filterQuery.value);
     }
 
     const closePopup = () => {
@@ -128,7 +135,7 @@
     >
         <CustomPopup 
             :options="optionsFilter" 
-            :value="typeDirection" 
+            :value="companyStore.locationType" 
             @change-value="selectedType"
             @close-popup="closePopup"
             selected-color="#e3a11e"
@@ -148,8 +155,8 @@
             <div class="box-directory"
                 @click="openPopup = true"
             >
-                <span class="clear-sm" v-if="typeDirection === null">{{ t('directory.directory') }}</span>
+                <span class="clear-sm" v-if="companyStore.locationType === null">{{ t('directory.directory') }}</span>
-                <span class="clear-sm" v-else>{{typeDirection.label}}</span>
+                <span class="clear-sm" v-else>{{companyStore.locationType.label}}</span>
                 <i class="fa-solid fa-filter"></i>
             </div>
             <button 

src/views/TrackingLoadView.vue

@@ -37,6 +37,7 @@
         const id = route.params['code'];
         await getLoadTracking(id)
         if(load.value !== null) {
+            console.log(load.value);
             const addressOrigin = load.value?.origin_geo?.coordinates;
             const addressDestination = load.value?.destination_geo?.coordinates;
             if(addressOrigin && addressDestination) {
@@ -64,6 +65,9 @@
                 case 'Downloading':
                     isLoadActive.value = true;
                     break;
+                case 'Delivered':
+                    isLoadActive.value = true;
+                    break;
             
                 default:
                     isLoadActive.value = false;
@@ -110,8 +114,9 @@
                 > 
                     <Marker v-if="originCoords" :options="{position: originCoords, label: 'O', title: 'Destino'}" />
                     <Marker v-if="destinationCoords" :options="{position: destinationCoords, label: 'D', title: 'Origen'}" />
+                    <!-- v-if="vehicleLastLocation && load.vehicle.background_tracking && isLoadActive" -->
                     <CustomMarker
-                        v-if="vehicleLastLocation && load.vehicle.background_tracking && isLoadActive"
+                        v-if="vehicleLastLocation && isLoadActive"
                         :options="{position: vehicleLastLocation}"
                         :clickable="false"
                         :draggable="false"

src/views/TrucksPublishedView.vue

@@ -1,5 +1,5 @@
 <script setup>
-    import { onMounted, ref } from 'vue';
+    import { onMounted, ref, watch } from 'vue';
     import { useCompanyStore } from '../stores/company';
     import { useAuthStore } from '../stores/auth';
     import { useLoadsStore } from '../stores/loads';
@@ -10,6 +10,7 @@
     import Pagination from '../components/Pagination.vue';
     import AttachmentsModal from '../components/AttachmentsModal.vue';
     import { useI18n } from 'vue-i18n';
+import CustomPopup from '../components/CustomPopup.vue';
 
     const companyStore = useCompanyStore();
     const authStore = useAuthStore();
@@ -19,17 +20,77 @@
     const openModal = ref(false);
     const openModalProposal = ref(false);
     const limit = 10;
+    const statusFilters = ref([]);
+    const openPopup = ref(false);
+    const filterSelected = ref({})
 
     onMounted(() =>{
         getInitData();
     })
 
-    const { t } = useI18n();
+    const { t, locale } = useI18n();
 
     const getInitData = async() => {
+        filterSelected.value = {value: 'all', label: t('labels.all')}
         loading.value = true;
         const filter = 'elements=' + limit + "&page=0";
         await companyStore.getProposalsCompany(filter, false);
+        statusFilters.value = [
+            {value: 'all',label: t('labels.all')},
+            {value: 'accepted',label: t('labels.accepted')},
+            {value: 'notAccepted',label: t('labels.notAccepted')},
+            {value: 'withdraw',label: t('labels.withdraw')},
+            {value: 'completed',label: t('labels.completed')}
+        ]
+        loading.value = false;
+    }
+
+    watch(locale, () => {
+        statusFilters.value = [
+            {value: 'all',label: t('labels.all')},
+            {value: 'accepted',label: t('labels.accepted')},
+            {value: 'notAccepted',label: t('labels.notAccepted')},
+            {value: 'withdraw',label: t('labels.withdraw')},
+            {value: 'completed',label: t('labels.completed')}
+        ]
+    })
+
+    const closePopup = () => {
+        openPopup.value = false
+    }
+
+    const selectedType = async(type) => {
+        filterSelected.value = type
+        openPopup.value = false
+        loading.value = true;
+        let filter = 'elements=' + limit + "&page=0";
+        const value = type.value;
+        switch (value) {
+            case 'accepted':
+                filter += "&is_accepted=true&is_completed=false";
+                break;
+            case 'notAccepted':
+                filter += "&is_accepted=false";
+                break;
+                break;
+            case 'withdraw':
+                filter += "&is_withdrawn=true";
+                break;
+            case 'completed':
+                filter += "&is_completed=true";
+                break;
+            case 'all':
+                filter = filter;
+                break;
+        
+            default:
+                filter = filter;
+                break;
+        }
+        // console.log(type.value)
+        console.log(filter)
+        await companyStore.getProposalsCompany(filter, true);
+        console.log(companyStore.proposals)
         loading.value = false;
     }
 
@@ -59,6 +120,22 @@
 </script>
 
 <template>
+    <div
+        v-if="openPopup"
+    >
+        <CustomPopup
+            :options="statusFilters" 
+            :value="filterSelected" 
+            @change-value="selectedType"
+            @close-popup="closePopup"
+            selected-color="#e3a11e"
+            :style="{
+                right: '50px',
+                top: '130px',
+                width: '300px',
+            }"
+        />
+    </div>
     <AttachmentsModal
         v-if="loadStore.openAttachmentsModal"
     />
@@ -74,7 +151,16 @@
         @reset-load="handleResetCurrentProposal"
     />
     <div>
-        <h2 class="title mb-5">{{ t('proposals.title') }}</h2>
+        <div class="box-header">
+            <h2 class="title">{{ t('proposals.title') }}</h2>
+            <div class="box-filters"
+                @click="openPopup = true"
+            >
+                <span class="clear-sm" v-if="filterSelected === null">{{ t('directory.directory') }}</span>
+                <span class="clear-sm" v-else>{{filterSelected.label}}</span>
+                <i class="fa-solid fa-filter"></i>
+            </div>
+        </div>
         <Spiner v-if="loading"/>
         <CardProposal 
             v-else
@@ -94,5 +180,23 @@
 </template>
 
 <style scoped>
-
+    .box-header {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        align-content: center;
+        align-items: center;
+        align-self: center;
+    }
+    .box-filters {
+        padding: 12px 8px;
+        background-color: #FFF;
+        border-radius: 5px;
+        display: flex;
+        flex-direction: row;
+        border: 1px rgb(186, 175, 175) solid;
+        gap: 1rem;
+        align-items: center;
+        cursor: pointer;
+    }
 </style>