set shipper_branch to load & map loads in warehouse view

src/components/FormLoadModal.vue

@@ -75,16 +75,11 @@
 
     onMounted(() => {
         window.addEventListener('resize', handleResize);
-        // mapRef.value = this.$refs.myMap;
         if(window.innerWidth <= 1024) {
             zoom.value = 4;
             heightMap.value = 420;
         }
-        // if(companyStore.locationsLoads.length <= 0) {
-        //     getLocations();
-        // }
         formLoad.owner = auth.user?.first_name + ' ' + auth.user?.last_name;
-        //origin_formatted_address
         if(loadStore.currentLoad){
             const dateStart = getDateTime(loadStore.currentLoad.est_loading_date, 0);
             const dateEnd = getDateTime(loadStore.currentLoad.est_unloading_date, 0);
@@ -100,10 +95,7 @@
             formLoad.weight = loadStore.currentLoad.weight;
             formLoad.dateLoad = dateStart.substring(0, 10);
             formLoad.dateDownload = dateEnd.substring(0, 10);
-            // formLoad.dateLoad = loadStore.currentLoad.est_loading_date?.substring(0, 10);
-            // formLoad.dateDownload = loadStore.currentLoad.est_unloading_date?.substring(0, 10);
             formLoad.truckType = loadStore.currentLoad.truck_type ? {meta_value: loadStore.currentLoad.truck_type} : null;
-
             origin.locationName =  loadStore.currentLoad.origin.company_name;
             origin.address =  loadStore.currentLoad.origin.street_address1;
             origin.state =  loadStore.currentLoad.origin?.state ? { state_name: loadStore.currentLoad.origin.state } : null;
@@ -119,6 +111,7 @@
             destination.country = loadStore.currentLoad.destination.country;
             destination.postalCode = loadStore.currentLoad.destination.zipcode;
             destinationRef.value = loadStore.currentLoad.destination.landmark;
+            locationLoadSelected.value = loadStore.currentLoad?.shipper_warehouse || null; /// Selected warehouse
             getCoordsMap();
 		}
 
@@ -197,6 +190,7 @@
     });
 
     const origin = reactive({
+        id: null,
         locationName: '',
         address: '',
         state: '',
@@ -254,10 +248,10 @@
 			},
 			company: auth.user.company,
             posted_by: auth.user._id,
-            posted_by_name: formLoad.owner
+            posted_by_name: formLoad.owner,
+            shipper_warehouse: locationLoadSelected.value?._id || null,
 		};
 
-
         return loadData;
     }
 
@@ -269,7 +263,8 @@
             const dataLocal = {
                 company: auth.user.company,
                 categories: formLoad.segment || null,
-                product: formLoad.terms?.length <= 0 ? null :  formLoad.terms
+                product: formLoad.terms?.length <= 0 ? null :  formLoad.terms,
+                shipper_warehouse: locationLoadSelected.value,
             };
             if(resp) {
                 const index = loadStore.loads.findIndex((load) => load._id === resp._id);
@@ -289,7 +284,8 @@
                 const load = {
                     ...resp,
                     ...loadData,
-                    categories: [loadData.categories]
+                    categories: [loadData.categories],
+                    shipper_warehouse: locationLoadSelected.value,
                 }
 
                 loadStore.loads.unshift(load);

src/helpers/status.js

@@ -35,7 +35,7 @@ export const getStatusLoad = (load, locale = 'es') => {
     };
 }
 
-export const eventStatusLoad = (loadStatus) => {
+export const eventStatusLoad = (loadStatus, locale = 'es') => {
     let color;
     let status;
     switch (loadStatus) {
@@ -58,13 +58,15 @@ export const eventStatusLoad = (loadStatus) => {
             break;
         case 'Delivered':
             color = "blue";
-            status = "#1B70AF";
+            status = "Entregado";
             break;
         default:
             color = "yellow";
             status = 'Sin publicar';
             break;
     }
+
+    status = (locale === 'es') ? status : loadStatus;
     return {
         color, 
         status

src/views/store/StoreView.vue

@@ -2,26 +2,47 @@
     import { ref } from 'vue';
     import { getDateTime } from '../../helpers/date_formats';
     import { onMounted } from 'vue';
-    import loads from '../../data/store-dumies.json';
+    // import loads from '../../data/store-dumies.json';
     import { useI18n } from 'vue-i18n';
     import LoadStoreCard from './components/LoadStoreCard.vue';
+    import { useLoadsStore } from '../../stores/loads';
+    import { useAuthStore } from '../../stores/auth';
+import Spiner from '../../components/ui/Spiner.vue';
+    
+    const authStore = useAuthStore();
+    const loadStore = useLoadsStore();
+    const { t } = useI18n()
 
     const query = ref('');
     const date = ref('');
-    const loadsFilters = ref(loads);
+    const loadsFilters = ref([]);
-    const { t } = useI18n()
+    const filterQuery = ref([]);
+    const loading = ref(false);
 
-    onMounted(() => {
+    onMounted(async() => {
         date.value = getDateTime(new Date(), 0).substring(0, 10);
+        await getDataLoads(false);
     })
 
+    const getDataLoads = async (reload) => {
+        filterQuery.value.limit = 'elements=' + 1000;
+        // filterQuery.value.branch = 'branch=' + authStore.user.branch;
+        // filterQuery.value.status = "status[$ne]="+"Closed";
+        loading.value = true;
+        console.log(filterQuery.value);
+        await loadStore.getCompanyLoads(filterQuery.value, reload);
+        console.log(loadStore.loads);
+        loadsFilters.value = loadStore.loads;
+        loading.value = false;
+    }
+
     /// methods:
     const search = () => {
         if(query.value == "") {
-            loadsFilters.value = loads;
+            loadsFilters.value = loadStore.loads;
         }
         if(query.value.length >= 1){
-            loadsFilters.value = loads.filter(
+            loadsFilters.value = loadStore.loads.filter(
                 load => load.shipment_code.toLowerCase().includes(query.value.toLowerCase()) 
                     || load.company.toLowerCase().includes(query.value.toLowerCase())
                     || load.product.toLowerCase().includes(query.value.toLowerCase())
@@ -30,10 +51,19 @@
                     || load['truck_type'].toLowerCase().includes(query.value.toLowerCase())
             );
         } else {
-            loadsFilters.value = loads;
+            loadsFilters.value = loadStore.loads;
         } 
     }
 
+    const handleDate = async () => {
+        console.log(date.value);
+        filterQuery.value.startDate = 'date[gte]=' + date.value.replaceAll('-', '/') + 'T00:00:00';
+        filterQuery.value.endDate = 'date[lte]=' + date.value.replaceAll('-', '/') + 'T23:59:59';
+        console.log(filterQuery)
+        await getDataLoads(true);
+    }
+    
+
 </script>
 
 <template>
@@ -56,11 +86,16 @@
                 type="date"
                 class="custom-input-fill"
                 v-model="date"
+                @change="handleDate($event)"
             />
         </div>
     </div>
     <div class="row">
+        <div v-if="loading" class="d-flex justify-content-center">
+            <Spiner />
+        </div>
         <LoadStoreCard
+            v-else
             v-for="load in loadsFilters" 
             :key="load.shipment_code" 
             :load="load"

src/views/store/components/LoadStoreCard.vue

@@ -10,9 +10,9 @@
         }
     })
 
-    const { t } = useI18n()
+    const { t, locale } = useI18n()
 
-    const status = eventStatusLoad(props.load.status);
+    const status = eventStatusLoad(props.load.load_status, locale.value);
 </script>
 
 <template>
@@ -23,21 +23,27 @@
             <div class="d-flex justify-content-between bg-white">
                 <div class="flex-direction-column">
                     <h2>{{ load.shipment_code }}</h2>
-                    <p><span class="font-bold">{{ t('labels.date') }}: </span> {{ getDateTime(load.date, 0) }}</p>
+                    <p><span class="font-bold">{{ t('labels.date') }}: </span> {{ getDateTime(load.est_loading_date, 0) }}</p>
-                    <p><span class="font-bold" >{{ t('global.company') }}: </span> {{ load.company }}</p>
+                    <p><span class="font-bold" >{{ t('global.company') }}: </span> {{ load?.carrier?.company_name ?? 'No definido' }}</p>
-                    <p><span class="font-bold" >{{ t('loads.product') }}: </span> {{ load.product }}</p>
+                    <p><span class="font-bold" >{{ t('loads.product') }}: </span> {{ load.product?.name }}</p>
-                    <p><span class="font-bold" >{{ t('loads.weight') }}: </span> {{ load['weigth_load'] }} kg</p>
+                    <p><span class="font-bold" >{{ t('loads.weight') }}: </span> {{ load.weight }}kg</p>
                 </div>
                 <div class="flex-direction-column">
                     <p> <div class="indicator" :style="{backgroundColor: status.color}"></div> <strong :style="{color: status.color}">{{ status.status }}</strong></p>
-                    <p> <span class="font-bold">{{ t('directory.typeTruck') }}: </span> {{ load['truck_type'] }}</p>
+                    <p> <span class="font-bold">{{ t('directory.typeTruck') }}: </span> {{ load?.vehicle?.truck_typ ?? 'No definido' }}</p>
-                    <p> <span class="font-bold">{{ t('vehicles.truckPlates') }}: </span> {{ load['truck_plates'] }}</p>
+                    <p> <span class="font-bold">{{ t('vehicles.truckPlates') }}: </span> {{ load?.vehicle?.circulation_serial_number ?? 'No definido' }}</p>
-                    <p> <span class="font-bold">{{ t('labels.driver') }}: </span> {{ load['driver_name'] }}</p>
+                    <p v-if="load?.vehicle?.trailer_plate_1"> 
+                        <span class="font-bold">{{ t('vehicles.trailerPlates') }} 1: </span> {{ load?.vehicle?.trailer_plate_1 }}
+                    </p>
+                    <p v-if="load?.vehicle?.trailer_plate_2"> 
+                        <span class="font-bold">{{ t('vehicles.trailerPlates') }} 2: </span> {{ load?.vehicle?.trailer_plate_2 }}
+                    </p>
+                    <p> <span class="font-bold">{{ t('labels.driver') }}: </span> {{ load?.vehicle?.driver ?? 'No asignado' }}</p>
                 </div>
             </div>
-            <div class="box-note" v-if="load.note">
+            <div class="box-note" v-if="load.notes">
                 <span class="label"><i class="fa-solid fa-clipboard" style="color: #FBBA33; font-size: 1.1rem;"></i> Nota:</span>
-                <span>{{ load.note }}</span>
+                <span>{{ load.notes }}</span>
             </div>
         </div>
     </div>