calendar done

src/components/CardBudget.vue

@@ -116,6 +116,7 @@
 
     p span {
         font-weight: bold;
+        color: rgb(66, 46, 46);
     }
 
     .card-footer {

src/components/CardLoad.vue

@@ -1,5 +1,5 @@
 <script setup>
-    import { getDateMonthDay } from '../helpers/date_formats';
+    import { getDayMonthYear } from '../helpers/date_formats';
     import { getStatusPublished } from '../helpers/status';
     import { getStatusLoad } from '../helpers/status';
     import { useLoadsStore } from '../stores/loads';
@@ -93,15 +93,6 @@
         // })
     }
 
-    // const makeCall = (phoneNumber) => {
-    //     console.log(phoneNumber)
-    //   // Formatear el número de teléfono eliminando espacios y caracteres especiales
-    // //   const formattedPhoneNumber = phoneNumber.value.replace(/[^0-9]/g, '');
-
-    //   // Abrir la aplicación de llamadas telefónicas con el número especificado
-    //   window.open(`tel:${phoneNumber}`, '_self');
-    // };
-
 </script>
 
 <template>
@@ -139,12 +130,12 @@
             <div class="col-lg-4 col-sm-12">
                 <p><span>{{t('loads.truckType')}}: </span> {{ load.truck_type }}</p>
                 <p><span>{{t('loads.weight')}}: </span> {{ load.weight }} KG</p>
-                <p><span>{{t('loads.dateLoad')}}: </span> {{ getDateMonthDay(load.est_loading_date) }}</p>
+                <p><span>{{t('loads.dateLoad')}}: </span> {{ getDayMonthYear(load.est_loading_date) }}</p>
             </div>
             <div class="col-lg-4 col-sm-12">
                 <p><span>{{t('loads.product')}}: </span> {{ load?.product?.name }}</p>
                 <p><span>{{t('loads.cost')}}: </span> {{ load.actual_cost }}</p>
-                <p><span>{{t('loads.dateDownload')}}: </span> {{getDateMonthDay(load.est_unloading_date)  }}</p>
+                <p><span>{{t('loads.dateDownload')}}: </span> {{getDayMonthYear(load.est_unloading_date)  }}</p>
             </div>
             <div class="col-lg-4 col-sm-12">
                 <p><span>{{t('global.segment')}}: </span> {{ load.categories?.map((e) => e.name).join(', ') }}</p>

src/components/CustomPopup.vue

@@ -67,7 +67,7 @@
         background-color: #FFF;
         opacity: 1;
         border-radius: 13px;
-        padding: 20px 32px;
+        padding: 20px 20px;
         display: flex;
         flex-direction: column;
         /* flex-wrap: nowrap; */

src/composables/useCalendar.js

@@ -0,0 +1,25 @@
+import { ref } from "vue";
+import { getCalendar } from "../services/company";
+
+export default function useCalendar() {
+    const loads = ref([]);
+    const loading = ref(false);
+
+    const getCalendarDate = async(startDate, endDate) => {
+        loading.value = true;
+        const resp = await getCalendar(startDate, endDate);
+        if(resp === null) {
+            loading.value = false;
+            loads.value = [];
+            return;
+        }
+        loads.value = resp.data.data;
+        loading.value = false;
+    }
+
+    return {
+        getCalendarDate,
+        loads,
+        loading
+    }
+}

src/composables/userSearchLoads.js

@@ -16,7 +16,8 @@ export default function useSearchLoads() {
             filterStr = "?"+cleanfilterArr.join("&");
         }
         try {
-            const endpoint = `/v1/loads/find${filterStr}&$sort%5BcreatedAt%5D=-1`;
+            const endpoint = `/v1/loads/find${filterStr}&$sort[createdAt]=-1`;
+            console.log(endpoint);
             const {data} = await api.get(endpoint);
             total.value = data.total;
             loads.value = data.data;

src/helpers/date_formats.js

@@ -28,18 +28,37 @@ const monthsAbr = [
   "Dic"
 ];
 
-export const getDateMonthDay = (value) => {
+export const getDayMonthYear = (value) => {
-    const date = new Date(value)
+  if(value === null) return 'Fecha invalida';
-    return date.toLocaleString(['en-US'], {
+  const year = value.substring(0, 4);
+  const month = value.substring(5, 7);
+  const day = value.substring(8, 10);
+  return `${day}/${month}/${year}`;
+};
 
+export const getDateMonthDay = (value) => {
+  console.log(value)
+  // Crear una fecha a partir del valor proporcionado
+  const date = new Date(value);
+  // Ajustar la fecha a la zona horaria de México manualmente
+  const utcOffset = -6; // Offset de UTC para la hora estándar de México
+  date.setHours(date.getHours() + utcOffset);
+  // Convertir la fecha a la hora de México
+  const options = {
+      timeZone: 'America/Mexico_City',
       month: 'short',
       day: '2-digit',
       year: 'numeric',
+  };
 
-    })
+  // Convertir la fecha a una cadena localizada con la zona horaria de México
-}
+  const dateString = date.toLocaleString('es-ES', options);
+
+  return dateString;
+};
 
 export const getDateMonthDayEs = (value, isFull = false) => {
+  console.log(value);
     const date = new Date(value)
     let month = '';
     if(isFull) {
@@ -67,3 +86,10 @@ export const getDateTime = (value, hour) => {
 
   return dateFormat;
 }
+
+export const formatOnlyDate = (date) => {
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, '0'); // Agregar cero si es necesario
+  const day = String(date.getDate()).padStart(2, '0'); // Agregar cero si es necesario
+  return `${year}/${month}/${day}`;
+}

src/i18n/en.js

@@ -398,7 +398,9 @@ const en = {
     },
     calendar: {
         title: 'Calendar',
-        helpText: 'Load status indicators'
+        helpText: 'Load status indicators',
+        general: 'General calendar',
+        my: 'My calendar'
     }
 };
 

src/i18n/es.js

@@ -405,7 +405,9 @@ const es = {
     },
     calendar: {
         title: 'Calendario',
-        helpText: 'Indicadores de estado de la carga'
+        helpText: 'Indicadores de estado de la carga',
+        general: 'Calendario general',
+        my: 'Mi calendario'
     },
 };
 

src/layouts/AdminLayout.vue

@@ -59,6 +59,7 @@
         }
         .view {
             margin: 24px 0px;
+            padding: 8px 10px;
         }
     }
 </style>

src/services/company.js

@@ -86,9 +86,8 @@ export const deleteUser = async(user_id) => {
 
 export const getBudgets = async(filter) => {
     try {
-        const endpoint = `v1/budgets/${filter}`;
+        const endpoint = `v1/budgets/find${filter}&sort[createdAt]=-1`;
         const {data} = await api.get(endpoint);
-        // console.log(data);
         return data;
     } catch (error) {
         console.log(error);
@@ -99,8 +98,9 @@ export const getBudgets = async(filter) => {
 
 export const updateBudget = async(id, formData) => {
     try {
-        const endpoint = `/budgets/${id}`;
+        const endpoint = `v1/budgets/${id}`;
         const {data} = await api.patch(endpoint, formData);
+        console.log(data);
         return data;
     } catch (error) {
         console.log(error);
@@ -110,7 +110,7 @@ export const updateBudget = async(id, formData) => {
 
 export const createBudget = async(formData) => {
     try {
-        const endpoint = `/budgets`;
+        const endpoint = `v1/budgets/new`;
         const {data} = await api.post(endpoint, formData);
         return data;
     } catch (error) {
@@ -121,7 +121,7 @@ export const createBudget = async(formData) => {
 
 export const deleteBudget = async(id) => {
     try {
-        const endpoint = `/budgets/${id}`;
+        const endpoint = `v1/budgets/${id}`;
         const {data} = await api.delete(endpoint);
         return data;
     } catch (error) {
@@ -146,7 +146,7 @@ export const createLocation = async(formData) => {
     try {
         const endpoint = `/v1/branches/new`;
         const {data} = await api.post(endpoint, formData);
-        return data;
+        return {data};
     } catch (error) {
         console.log(error);
         return null;
@@ -175,6 +175,24 @@ export const deleteLocation = async(id) => {
     }
 }
 
+export const getCalendar = async(startDate, endDate) => {
+    try {
+        const endpoint = `/v1/loads/calendar?$sort[createdAt]=-1&date[lte]=${endDate}&date[gte]=${startDate}&elements=1000`;
+        console.log(endpoint);
+        const {data} = await api.get(endpoint);
+        return {
+            msg: "success",
+            data: data
+        };
+    } catch (error) {
+        console.log(error);
+        return {
+            msg: "Algo salió mal, intente nás tarde",
+            data: null
+        };
+    }
+}
+
 
 // export const editCompany = async(companyId, formData) => {
 //     try {

src/stores/company.js

@@ -211,7 +211,7 @@ export const useCompanyStore = defineStore('company', () => {
         }
     }
 
-    const getBudgetsCompany = async(filterQuery, reload = false) => {
+    const getBudgetsCompany = async(filterQuery, reload = false) => { //here
         let filterArr = Object.values(filterQuery);
 
         let cleanfilterArr =  filterArr.filter(n=>n);
@@ -222,7 +222,7 @@ export const useCompanyStore = defineStore('company', () => {
 
         if(budgets.value.length <= 0 || reload === true) {
             try {
-                const data = await getBudgets(filterStr + '&$sort%5BcreatedAt%5D=-1');
+                const data = await getBudgets(filterStr);
                 console.log(data.total);
                 if(data.total > 0) {
                     budgets.value = data.data;

src/views/CalculatorView.vue

@@ -17,7 +17,7 @@
     const currentBudget = ref(null);
     const openModal = ref(false);
     const printOpen = ref(false);
-    const limit = 2;
+    const limit = 10;
 
     onMounted(() => {
         getInitData();
@@ -25,8 +25,8 @@
 
     const getInitData = async() => {
         loading.value = true;
-        filterQuery.value.limit = '$limit=' + limit;
+        filterQuery.value.limit = "elements=" + limit;
-        filterQuery.value.skip = "$skip=0"
+        filterQuery.value.page = "page=" + 0;
         filterQuery.value.company = "company="+ localStorage.getItem('id');
         await companyStore.getBudgetsCompany(filterQuery.value, false)
         loading.value = false;
@@ -39,8 +39,8 @@
     }
 
     watch(query, () => {
-        filterQuery.value.skip = "$skip="+ 0;
+        filterQuery.value.page = "page=" + 0;
-        filterQuery.value.limit = "$limit="+ 100;
+        filterQuery.value.limit = "elements=" + 100;
         if(query.value.length === 0){
             clearRequest();
             filterQuery.value.search = "";
@@ -59,9 +59,10 @@
 
     const getBudgetsByPage = async(data) => {
         loading.value = true;
-        filterQuery.value.skip = "$skip="+ data.skip;
+        filterQuery.value.page = "page="+ data.page;
         companyStore.budgetsCurrentPage = data.page
         await getBudgetsWithFilters(filterQuery.value)
+        loading.value = false;
     }
 
     const clearFilter = () => {
@@ -77,8 +78,8 @@
     }
 
     const clearRequest = () => {
-        filterQuery.value.skip = "$skip="+ 0;
+        filterQuery.value.page = "page=" + 0;
-        filterQuery.value.limit = "$limit="+ limit;
+        filterQuery.value.limit = "elements="+ limit;
         companyStore.budgetsCurrentPage = 1;
     }
 
@@ -137,8 +138,8 @@
         />
         <Pagination
             :limit="limit"
-            :current-page="companyStore.budgetsCurrentPage"
             :total="companyStore.budgetsTotal"
+            :current-page="companyStore.budgetsCurrentPage"
             @get-elements="getBudgetsByPage"
         />
     </div>

src/views/CalendarView.vue

@@ -1,15 +1,22 @@
 <script setup>
     import { Qalendar } from 'qalendar';
-    import data from '../data/events.json';
     import {eventStatusLoad} from '../helpers/status';
-    import {getDateTime} from '../helpers/date_formats';
+    import {getDateTime, formatOnlyDate} from '../helpers/date_formats';
     import { onMounted, ref } from 'vue';
     import { useRouter } from 'vue-router';
     import { useI18n } from 'vue-i18n';
+    import useCalendar from '../composables/useCalendar';
+    import CustomPopup from '../components/CustomPopup.vue';
+import { watch } from 'vue';
+
     const events = ref([]);
     const router = useRouter();
 
-    const { t } = useI18n()
+    const { t, locale } = useI18n()
+    const { getCalendarDate, loading, loads } = useCalendar()
+    const filter = ref({value: 'general', label: t('calendar.general')})
+    const optionsFilter = ref([])
+    const openPopup = ref(false);
 
     const config = {
       week: {
@@ -44,18 +51,65 @@
     //   showCurrentTime: true, // Display a line indicating the current time 
     }
 
-    onMounted(() => {
+    onMounted( async() => {
-        data.forEach((e, i) => {
+        const currentDate = new Date();
-            const indicator = eventStatusLoad(e.status);
+        const year = currentDate.getFullYear();
-            const dateStart = getDateTime(e.date, 0);
+        const month = currentDate.getMonth();
-            const dateEnd = getDateTime(e.date, 1);
+
+        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)
+        optionsFilter.value = [
+            {value: 'general',label: t('calendar.general')},
+            {value: 'my',label: t('calendar.my')},
+        ]
+        mapLoadsToEvents()
+    });
+
+    const redirectToTracking = (id) => {
+        window.open('/publico/tracking/' + id, '_blank');
+    }
+
+    watch(locale, () => {
+        optionsFilter.value = [
+            {value: 'general',label: t('calendar.general')},
+            {value: 'my',label: t('calendar.my')},
+        ]
+    })
+
+    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('LOADS: ', loads.value)
+        mapLoadsToEvents()
+    }
+
+    const mapLoadsToEvents = () => {
+        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);
+            // console.log('dateStart', dateStart)
+            // console.log('dateEnd', dateEnd)
             events.value.push({
-                id: i,
+                id: e._id,
                 title: e.shipment_code,
-                // isEditable: true,
-                // isCustom: true,
                 with: indicator.status,
-                description: indicator.status,
+                description: indicator.load_status,
                 color: indicator.color,
                 time: {
                     start: dateStart,
@@ -63,28 +117,51 @@
                 }
             })
         });
-    });
 
-    const redirectToTracking = (code) => {
+    }
-        router.push({
+    
-            name: 'tracking-load',
+    const closePopup = () => {
-            params: {code}
+        openPopup.value = false
-        });
+    }
+
+    const selectedFilter = (type) => {
+        filter.value = type
+        openPopup.value = false
     }
 
 </script>
 
 <template>
+    <div
+        v-if="openPopup"
+    >
+        <CustomPopup 
+            :options="optionsFilter" 
+            :value="filter" 
+            @change-value="selectedFilter"
+            @close-popup="closePopup"
+            selected-color="#e3a11e"
+        />
+    </div>
     <div>
         <h2 class="title mb-4">{{ t('calendar.title') }}</h2>
         <div class="box-indicators">
             <h2>{{ t('calendar.helpText') }}</h2>
-            <div class="indicators">
+            <div class="header">
-                <i class="fa-solid fa-circle" style="color: yellow"></i> {{ t('global.published') }}
+                <div class="indicators">
-                <i class="fa-solid fa-circle" style="color: green"></i> {{ t('global.loading') }}
+                    <span><i class="fa-solid fa-circle" style="color: yellow"></i> {{ t('global.published') }}</span>
-                <i class="fa-solid fa-circle" style="color: red"></i> {{ t('global.transit') }}
+                    <span><i class="fa-solid fa-circle" style="color: green"></i> {{ t('global.loading') }}</span>
-                <i class="fa-solid fa-circle" style="color: blue"></i> {{ t('global.downloading') }}
+                    <span><i class="fa-solid fa-circle" style="color: red"></i> {{ t('global.transit') }}</span>
-                <i class="fa-solid fa-circle" style="color: blue"></i> {{ t('global.delivered') }}
+                    <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>
+                </div>
+                <div class="box-filter"
+                    @click="openPopup = true"
+                >
+                    <span class="clear-sm" v-if="filter === null">{{ t('directory.directory') }}</span>
+                    <span class="clear-sm" v-else>{{filter.label}}</span>
+                    <i class="fa-solid fa-filter"></i>
+                </div>
             </div>
         </div>
         <div class="calendar">
@@ -92,6 +169,10 @@
             <Qalendar
                 :events="events"
                 :config="config"
+                @updated-mode="handleUpdateMode"
+                @updated-period="handleUpdatedPeriod"
+                @datetime-was-clicked="handleClickDate"
+                :is-loading="loading"
             >
                 <template #eventDialog="props">
                     <div v-if="props.eventDialogData && props.eventDialogData.title" class="event-modal">
@@ -103,7 +184,7 @@
                             <span 
                                 class="tracking-icon" 
                                 :style="{color: props.eventDialogData.color}"  
-                                @click="redirectToTracking(props.eventDialogData.title)">
+                                @click="redirectToTracking(props.eventDialogData.id)">
                                 <svg xmlns="http://www.w3.org/2000/svg"  fill="currentColor" class="bi bi-geo-alt-fill" viewBox="0 0 16 16">
                                     <path d="M8 16s6-5.686 6-10A6 6 0 0 0 2 6c0 4.314 6 10 6 10zm0-7a3 3 0 1 1 0-6 3 3 0 0 1 0 6z"></path>
                                 </svg>
@@ -175,17 +256,49 @@
     
     .box-indicators h2 {
         display: flex;
-        justify-content: end;
+        justify-content: start;
         font-weight: 600;
         font-size: 1.2rem;
     }
 
+    .header {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        width: 100%;
+        gap: 1rem;
+        align-items: center;
+        // flex-wrap: wrap;
+    }   
+
+    .box-filter {
+        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;
+    }
+
+    .filters {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        // flex-wrap: wrap;
+        flex: 1;
+        justify-content: end;
+    }
+
     .indicators {
         display: flex;
+        // flex: 1;
         justify-content: end;
         flex-direction: row;
         align-items: center;
-        gap: 1rem;
+        gap: 0.7rem;
         flex-wrap: wrap;
     }
 
@@ -193,6 +306,10 @@
         .calendar {
             height: calc(100vh - 280px);
         }
+
+        .header {
+            align-items: start;
+        }   
     }
 
 </style>

src/views/LoadsPublishedView.vue

@@ -57,6 +57,7 @@
     
     const getLoadWithFilters = async(filter) => {
         loading.value = true;
+        console.log(filter);
         await loadStore.getCompanyLoads(filter, true);
         loading.value = false;
     }
@@ -64,7 +65,7 @@
     const search = () => {
         setTimeout(() => {
             if(query.value.length >= 2){
-                // filterQuery.value = "company_name[$regex]=" + query.value + "&company_name[$options]=i";
+                // filterQuery.value.search = "company_name[$regex]=" + query.value + "&company_name[$options]=i";
                 filterQuery.value.search = "posted_by_name[$regex]="+query.value+"&posted_by_name[$options]=i";
                 getLoadWithFilters(filterQuery.value);
             } 

src/views/LocationsView.vue

@@ -116,7 +116,6 @@
     }
 
     const selectedType = (type) => {
-        console.log(type)
         typeDirection.value = type
         openPopup.value = false
     }

src/views/SearchLoadsView.vue

@@ -75,8 +75,8 @@
 
     const search = () => {
         if(query.value.length >= 2){
-            // filterQuery.value = "company_name[$regex]=" + query.value + "&company_name[$options]=i";
+            filterQuery.value.search = "company_name[$regex]=" + query.value + "&company_name[$options]=i";
-            filterQuery.value.search = "company.company_name[$regex]=" + query.value + "&company.company_name[$options]=i";
+            // filterQuery.value.search = "company.company_name[$regex]=" + query.value + "&company.company_name[$options]=i";
             getLoadsPublished(filterQuery.value);
         }