From 0870d96f73798c889a3fbbb394b37e2fd38559ff Mon Sep 17 00:00:00 2001
From: Alexandro Uc Santos <alexandro.us@icloud.com>
Date: Mon, 29 Jul 2024 13:39:57 -0600
Subject: [PATCH] fixes: vehicles & offers

---
 src/components/AttachmentsModal.vue |  1 -
 src/components/CardLoad.vue         |  7 +--
 src/components/CardProposal.vue     | 26 +++++++---
 src/components/CardVehicle.vue      | 11 +++--
 src/composables/useCalendar.js      |  5 +-
 src/helpers/status.js               | 13 ++---
 src/services/company.js             |  4 +-
 src/views/CalendarView.vue          | 76 +++++++++++++++++++----------
 src/views/TrucksPublishedView.vue   |  9 ++++
 9 files changed, 101 insertions(+), 51 deletions(-)

diff --git a/src/components/AttachmentsModal.vue b/src/components/AttachmentsModal.vue
index a44d867..3dd62cb 100644
--- a/src/components/AttachmentsModal.vue
+++ b/src/components/AttachmentsModal.vue
@@ -9,7 +9,6 @@
     const { getAttachmentLoad, loading, attachments } = useAttachments();
 
     onMounted(() => {
-        console.log('se ejcyta attach');
         getAttachmentLoad();
     })
     const { t } = useI18n();
diff --git a/src/components/CardLoad.vue b/src/components/CardLoad.vue
index 7d4aeeb..945c1ad 100644
--- a/src/components/CardLoad.vue
+++ b/src/components/CardLoad.vue
@@ -120,8 +120,8 @@
                 
             </div>
             <div class="col-lg-6 col-sm-12" v-if="authStore.user?.permissions === 'role_shipper'">
-                <p><span>{{t('loads.postStatus')}}:</span> <span>{{ getStatusPublished(load) }}</span></p>
-                <p :style="{color: getStatusLoad(load).color}"><span>{{t('loads.loadStatus')}}:</span> <span>{{ getStatusLoad(load).status }}</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> <spa class="simple">{{ getStatusLoad(load).status }}</spa></p>
             </div>
         </div>
         <div class="divider"></div>
@@ -231,7 +231,7 @@
         height: 33px;
     }
 
-    p {
+    p .simple {
         font-size: 1rem;
         font-weight: 400;
         color: #323032;
@@ -242,6 +242,7 @@
         font-weight: 700;
     }
 
+    
     .btn-row {
         margin-top: 2rem;
         display: flex;
diff --git a/src/components/CardProposal.vue b/src/components/CardProposal.vue
index b09a5e0..dc2d2d9 100644
--- a/src/components/CardProposal.vue
+++ b/src/components/CardProposal.vue
@@ -4,6 +4,7 @@
     import { getStatusLoad } from '../helpers/status';
     import { useCompanyStore } from '../stores/company';
     import { useAuthStore } from '../stores/auth';
+    import { useLoadsStore } from '../stores/loads';
     import { useI18n } from 'vue-i18n';
     
     const props = defineProps({
@@ -17,6 +18,7 @@
 
     const companyStore = useCompanyStore();
     const authStore = useAuthStore();
+    const loadsStore = useLoadsStore();
     const { t, locale } = useI18n();
 
     const handleWithdrawnProposal = async() => {
@@ -72,6 +74,11 @@
     }
 
     defineEmits(['set-proposal']);
+
+    const openAttachmentsModal = () => {
+        loadsStore.currentLoad = props.proposal.load;
+        loadsStore.openAttachmentsModal = true;
+    }
 </script>
 
 <template>
@@ -86,26 +93,33 @@
                 <p v-if="proposal.vehicle"><span>{{ t('labels.dateAvailable') }}:</span> {{ getDateMonthDay(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"><span>{{ t('loads.destination') }}:</span> {{proposal.vehicle.destino}}</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>
-                <p v-if="proposal.vehicle" :style="{color: getStatusLoad(proposal.load, locale).color}"><span>{{  t('loads.loadStatus') }}:</span> {{ getStatusLoad(proposal.load, locale).status}}</p>
             </div>
              
             <div class="">
-                <p v-if="proposal.load"> {{ t('loads.loadCode') }}: 
+                <p v-if="proposal.load"> <span>{{ t('loads.loadCode') }}: </span>
                     <span 
                         class="code-enruta"
                         @click="$emit('set-proposal', {proposal: proposal, modal: 'detail'})"
                         data-toggle="modal" data-target="#loadDetailModal"
                     >{{proposal.load.shipment_code}}</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._driver">{{ t('labels.operator') }}: {{proposal._driver}}</p>
+
             </div>
         </div>
         <div class="btn-row">
-            <!-- <button
-                class="btn-primary-sm"
-                data-toggle="modal" data-target="#editcompanymodal"
-            ><i class="fa-solid fa-ban"></i> Retirar</button> -->
+            <button
+                type="button" 
+                 data-toggle="modal" data-target="#attachmentModal" 
+                class="btn-primary-sm" 
+                @click="openAttachmentsModal"
+            >
+                <i class="fa-solid fa-image"></i>
+                {{ t('evidence.evidence') }}
+            </button>
             <div v-if="proposal.is_withdrawn" class="indicator-cancel">
                 <i class="fa-solid fa-ban"></i>
                 {{ t('proposals.retired') }}
diff --git a/src/components/CardVehicle.vue b/src/components/CardVehicle.vue
index b242dcd..9215f3d 100644
--- a/src/components/CardVehicle.vue
+++ b/src/components/CardVehicle.vue
@@ -4,6 +4,7 @@
     import { useVehiclesStore } from '../stores/vehicles';
     import { useAuthStore } from '../stores/auth';
     import { useI18n } from 'vue-i18n';
+    import { getStatusLoad } from '../helpers/status';
 
     const props = defineProps({
         vehicle: {
@@ -14,7 +15,7 @@
     console.log(props.vehicle);
     defineEmits(['set-vehicle']);
 
-    const { t } = useI18n()
+    const { t, locale } = useI18n()
 
     const vehicleStore = useVehiclesStore();
     const authStore = useAuthStore();
@@ -81,13 +82,13 @@
                         </i>
                     </span>
                 </p>
-                <p v-if="vehicle.is_available">{{ t('vehicles.availableIn') }}: <span>{{ vehicle.destino }}</span></p>
-            </div>
-            <div class="col-lg-6">
                 <p>{{ t('vehicles.truckPlates') }}: <span>{{ vehicle.circulation_serial_number }}</span></p>
                 <p>{{ t('vehicles.trailerPlates') }} 1: <span>{{ vehicle.trailer_plate_1 }}</span></p>
+            </div>
+            <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.is_available">{{ t('vehicles.availableIn') }}: <span>{{ vehicle.destino }}</span></p>
                 <p>Status: 
                     <span>{{ vehicle.is_available ? t('vehicles.available') : t('vehicles.reserved')}} 
                         <i 
@@ -99,6 +100,8 @@
                     </span>
                 </p>
                 <p v-if="vehicle.is_available">{{ t('vehicles.availableDate') }}: <span>{{ getDateMonthDayEs(vehicle.available_date, false) }}</span></p>
+                <p v-if="vehicle.active_load">{{ t('loads.loadCode') }}: <span>{{ vehicle.active_load.shipment_code}}</span></p>
+                <p v-if="vehicle.active_load">{{ t('loads.loadStatus') }}: <span>{{ getStatusLoad(vehicle.active_load, locale).status}}</span></p>
             </div>
         </div>
         <p v-if="vehicle.notes">{{ t('vehicles.additionalInfoVehicle') }}:</p>
diff --git a/src/composables/useCalendar.js b/src/composables/useCalendar.js
index c79a379..9f3b563 100644
--- a/src/composables/useCalendar.js
+++ b/src/composables/useCalendar.js
@@ -5,9 +5,10 @@ export default function useCalendar() {
     const loads = ref([]);
     const loading = ref(false);
 
-    const getCalendarDate = async(startDate, endDate) => {
+    const getCalendarDate = async(startDate, endDate, filter) => {
+        console.log(filter);
         loading.value = true;
-        const resp = await getCalendar(startDate, endDate);
+        const resp = await getCalendar(startDate, endDate, filter);
         if(resp === null) {
             loading.value = false;
             loads.value = [];
diff --git a/src/helpers/status.js b/src/helpers/status.js
index 80ee465..ee045ed 100644
--- a/src/helpers/status.js
+++ b/src/helpers/status.js
@@ -21,7 +21,7 @@ export const getStatusLoad = (load, locale = 'es') => {
             break;
         case 'Delivered':
             statusTemp = "Entregado";
-            color = "#000000";
+            color = "#1B70AF";
             break;
         default:
             statusTemp = 'Sin publicar';
@@ -41,23 +41,24 @@ export const eventStatusLoad = (loadStatus) => {
     switch (loadStatus) {
         case 'Published':
             status = "Publicado";
-            color = "yellow";
+            color = "#A9B0B2";
+            // color = "#4CC8EA";
             break;
         case 'Loading':
-            color = "green";
+            color = "#F44336";
             status = "Cargando";
             break;
         case 'Transit':
             status = "En Transito";
-            color = "red"
+            color = "#ffd22b"
             break;
         case 'Downloading':
             status = "Descargando";
-            color = "blue"
+            color = "#428502"
             break;
         case 'Delivered':
             color = "blue";
-            status = "Entregado";
+            status = "#1B70AF";
             break;
         default:
             color = "yellow";
diff --git a/src/services/company.js b/src/services/company.js
index f6fc8d1..f9770c9 100644
--- a/src/services/company.js
+++ b/src/services/company.js
@@ -175,9 +175,9 @@ export const deleteLocation = async(id) => {
     }
 }
 
-export const getCalendar = async(startDate, endDate) => {
+export const getCalendar = async(startDate, endDate, global) => {
     try {
-        const endpoint = `/v1/loads/calendar?$sort[createdAt]=-1&date[lte]=${endDate}&date[gte]=${startDate}&elements=1000`;
+        const endpoint = `/v1/loads/calendar?$sort[createdAt]=-1&date[lte]=${endDate}&date[gte]=${startDate}&global=${global}&elements=1000`;
         console.log(endpoint);
         const {data} = await api.get(endpoint);
         return {
diff --git a/src/views/CalendarView.vue b/src/views/CalendarView.vue
index 1f708b9..77d6fb6 100644
--- a/src/views/CalendarView.vue
+++ b/src/views/CalendarView.vue
@@ -7,14 +7,16 @@
     import { useI18n } from 'vue-i18n';
     import useCalendar from '../composables/useCalendar';
     import CustomPopup from '../components/CustomPopup.vue';
-import { watch } from 'vue';
+    import { watch } from 'vue';
 
     const events = ref([]);
     const router = useRouter();
 
     const { t, locale } = useI18n()
     const { getCalendarDate, loading, loads } = useCalendar()
-    const filter = ref({value: 'general', label: t('calendar.general')})
+    const filter = ref({value: 'my', label: t('calendar.my')})
+    const startDate = ref('');
+    const endDate = ref('');
     const optionsFilter = ref([])
     const openPopup = ref(false);
 
@@ -33,13 +35,25 @@ import { watch } from 'vue';
       style: {
         fontFamily: 'Nunito',
         colorSchemes: {
-            meetings: {
+            published: {
               color: "#fff",
-              backgroundColor: "#131313",
+              backgroundColor: "#A9B0B2",
             },
-            sports: {
+            loading: {
               color: "#fff",
-              backgroundColor: "#ff4081",
+              backgroundColor: "#F44336",
+            },
+            transit: {
+              color: "#ffd22b",
+              backgroundColor: "#ffd22b",
+            },
+            downloading: {
+              color: "#fff",
+              backgroundColor: "#428502",
+            },
+            delivered: {
+              color: "#fff",
+              backgroundColor: "#1B70AF",
             },
         },
       },
@@ -56,10 +70,12 @@ import { watch } from 'vue';
         const year = currentDate.getFullYear();
         const month = currentDate.getMonth();
 
-        const startDate = new Date(year, month, 1);
-        const endDate = new Date(year, month + 1, 0);
-        await getCalendarDate(formatOnlyDate(startDate), formatOnlyDate(endDate));
-        // console.log(loads.value)
+        const startDateTemp = new Date(year, month, 1);
+        const endDateTemp = new Date(year, month + 1, 0);
+        startDate.value = formatOnlyDate(startDateTemp);
+        endDate.value = formatOnlyDate(endDateTemp);
+        await getCalendarDate(startDate.value, endDate.value, 0);
+        console.log(loads.value)
         optionsFilter.value = [
             {value: 'general',label: t('calendar.general')},
             {value: 'my',label: t('calendar.my')},
@@ -79,20 +95,18 @@ import { watch } from 'vue';
     })
 
     const handleUpdateMode = (ev) => {
-        console.log(ev)
-        console.log('clic en el calendario');
     }
 
     const handleClickDate = (ev) => {
-        console.log(ev);
-        console.log('clic en la fecha');
     }
 
     const handleUpdatedPeriod = async(ev) => {
-        console.log(ev);
-        const start = formatOnlyDate(ev.start)
-        const end = formatOnlyDate(ev.end)
-        await getCalendarDate(start, end);
+        // console.log(ev);
+        const global = filter.value.value === 'general' ? 1 : 0;
+        startDate.value = formatOnlyDate(ev.start)
+        endDate.value = formatOnlyDate(ev.end)
+        console.log(startDate.value, endDate.value);
+        await getCalendarDate(startDate.value, endDate.value, global);
         console.log('LOADS: ', loads.value)
         mapLoadsToEvents()
     }
@@ -101,21 +115,26 @@ import { watch } from 'vue';
         events.value = [];
         loads.value.forEach((e) => {
             const indicator = eventStatusLoad(e.load_status);
-            const dateStart = getDateTime(e.load_status_updated, 0);
-            const dateEnd = getDateTime(e.load_status_updated, 1);
+            const dateStart = getDateTime(e.est_loading_date, 0);
+            const dateEnd = getDateTime(e.est_loading_date, 1);
             // console.log('dateStart', dateStart)
             // console.log('dateEnd', dateEnd)
             events.value.push({
                 id: e._id,
                 title: e.shipment_code,
                 with: indicator.status,
+                start: e.est_loading_date,
+                end: e.est_unloading_date,
                 description: indicator.load_status,
+                colorScheme: e.load_status.toLowerCase(),
                 color: indicator.color,
                 time: {
                     start: dateStart,
                     end: dateEnd
-                }
+                },
             })
+
+            console.log(events.value);
         });
 
     }
@@ -124,9 +143,12 @@ import { watch } from 'vue';
         openPopup.value = false
     }
 
-    const selectedFilter = (type) => {
+    const selectedFilter = async (type) => {
         filter.value = type
+        const global = type.value === 'general' ? 1 : 0;
         openPopup.value = false
+        await getCalendarDate(startDate.value, endDate.value, global);
+        mapLoadsToEvents()
     }
 
 </script>
@@ -149,11 +171,11 @@ import { watch } from 'vue';
             <h2>{{ t('calendar.helpText') }}</h2>
             <div class="header">
                 <div class="indicators">
-                    <span><i class="fa-solid fa-circle" style="color: yellow"></i> {{ t('global.published') }}</span>
-                    <span><i class="fa-solid fa-circle" style="color: green"></i> {{ t('global.loading') }}</span>
-                    <span><i class="fa-solid fa-circle" style="color: red"></i> {{ t('global.transit') }}</span>
-                    <span><i class="fa-solid fa-circle" style="color: blue"></i> {{ t('global.downloading') }}</span>
-                    <span><i class="fa-solid fa-circle" style="color: blue"></i> {{ t('global.delivered') }}</span>
+                    <span><i class="fa-solid fa-circle" style="color: #A9B0B2"></i> {{ t('global.published') }}</span>
+                    <span><i class="fa-solid fa-circle" style="color: #F44336"></i> {{ t('global.loading') }}</span>
+                    <span><i class="fa-solid fa-circle" style="color: #ffd22b"></i> {{ t('global.transit') }}</span>
+                    <span><i class="fa-solid fa-circle" style="color: #428502"></i> {{ t('global.downloading') }}</span>
+                    <span><i class="fa-solid fa-circle" style="color: #1B70AF"></i> {{ t('global.delivered') }}</span>
                 </div>
                 <div class="box-filter"
                     @click="openPopup = true"
diff --git a/src/views/TrucksPublishedView.vue b/src/views/TrucksPublishedView.vue
index f787fab..578bfe2 100644
--- a/src/views/TrucksPublishedView.vue
+++ b/src/views/TrucksPublishedView.vue
@@ -1,14 +1,19 @@
 <script setup>
     import { onMounted, ref } from 'vue';
     import { useCompanyStore } from '../stores/company';
+    import { useAuthStore } from '../stores/auth';
+    import { useLoadsStore } from '../stores/loads';
     import Spiner from '../components/ui/Spiner.vue';
     import CardProposal from '../components/CardProposal.vue';
     import LoadDetailModal from '../components/LoadDetailModal.vue';
     import MakeProposalModal from '../components/MakeProposalModal.vue';
     import Pagination from '../components/Pagination.vue';
+    import AttachmentsModal from '../components/AttachmentsModal.vue';
     import { useI18n } from 'vue-i18n';
 
     const companyStore = useCompanyStore();
+    const authStore = useAuthStore();
+    const loadStore = useLoadsStore();
     const loading = ref(false);
     const proposalCurrent = ref(null);
     const openModal = ref(false);
@@ -51,9 +56,13 @@
         proposalCurrent.value = null;
         // console.log('clear proposal');
     }
+
 </script>
 
 <template>
+    <AttachmentsModal
+        v-if="loadStore.openAttachmentsModal"
+    />
     <LoadDetailModal 
         v-if="openModal"
         :proposal="proposalCurrent"