fixes: vehicles & offers

2024-07-29 13:39:57 -06:00
parent d9a0cd626f
commit 0870d96f73
9 changed files with 101 additions and 51 deletions
--- 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();
--- 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;
--- 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') }}
--- 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>
--- 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 = [];
--- 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";
--- 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 {
--- 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"
--- 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"