Merge branch 'migrate-alex' into 'master'

add: selected popup directory type

See merge request jcruzbaasworkspace/enruta/webeta!13

src/components/CustomPopup.vue

@@ -0,0 +1,93 @@
+<script setup>
+    const props = defineProps({
+        options: {
+            type: Array,
+            required: true
+        },
+        value: {
+            type: Object,
+            required: true
+        },
+        style: {
+            type: Object,
+            required: false
+        },
+        selectedColor: {
+            type: String,
+            required: false
+        }
+    })
+
+
+    defineEmits(['change-value', 'close-popup'])
+</script>
+
+<template>
+        <div 
+            class="background-popup"
+            @click="$emit('close-popup')"
+        >
+        </div>
+        <div 
+            class="content-popup"
+            :style="style"
+        >
+            <div 
+                v-for="option in options"
+                class="box-btn" 
+                :style="{
+                    backgroundColor: (value.value === option.value) ? (selectedColor) ? selectedColor : 'primary' : ''
+                }"
+                @click="$emit('change-value', option)"
+            >{{ option.label }}</div>
+        </div>
+</template>
+
+
+<style scoped>
+    .background-popup {
+        position: fixed;
+        z-index: 1000;
+        width: 100wv;
+        right: 0px;
+        top: 0px;
+        left: 0px;
+        cursor: pointer;
+        bottom: 0px;
+        background-color: #c6b9b9;
+        opacity: 0.2;
+    }
+
+    .content-popup {
+        position: fixed;
+        right: 180px;
+        top: 180px;
+        z-index: 2000;
+        width: 200px;
+        background-color: #FFF;
+        opacity: 1;
+        border-radius: 13px;
+        padding: 20px 32px;
+        display: flex;
+        flex-direction: column;
+        /* flex-wrap: nowrap; */
+        /* overflow: hidden; */
+        filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.10));
+    }
+
+    .box-btn {
+        padding: 8px 16px;
+        margin-bottom: 8px;
+        background-color: rgb(234, 241, 241);
+        border-radius: 5px;
+        font-size: 0.8rem;
+        font-weight: 700;
+    }
+
+    @media (max-width: 568px) {
+        .content-popup {
+            top: 200px;
+            right: 20px;
+        }
+    }
+</style>

src/components/FormLoadModal.vue

@@ -79,7 +79,6 @@
         formLoad.owner = auth.user?.first_name + ' ' + auth.user?.last_name;
         //origin_formatted_address
         if(loadStore.currentLoad){
-            console.log(loadStore.currentLoad);
             formLoad.price = loadStore.currentLoad.actual_cost;
 			formLoad.segment = loadStore.currentLoad.categories?.length <= 0 ? [] : loadStore.currentLoad.categories.map(m =>{
 				return m;
@@ -131,7 +130,6 @@
 
         watch([originCoords, destinationCoords], async() => {
             if(originCoords.value && destinationCoords.value) {
-                // console.log('Se llama api direcciones ')
                 polylines.value = await getDirections(originCoords.value, destinationCoords.value);
             }
         })
@@ -406,7 +404,7 @@
                                 v-model:field="formLoad.dateDownload"
                             />
                             <Custominput
-                                label="Peso de la carga*"
+                                label="Peso de la carga en Kg*"
                                 type="number"
                                 :filled="false"
                                 name="weight"
@@ -423,7 +421,7 @@
                                 />
                             </div>
                             <Custominput
-                                label="Precio"
+                                label="Precio en MXN"
                                 type="Number"
                                 :filled="false"
                                 name="price"
@@ -451,8 +449,8 @@
                             <h2>Dirección de origen</h2>
 
                             <div class="form-check my-4" v-if="loadingLocations === false">
-                                <input class="form-check-input chekmark" type="checkbox" id="flexCheckDefault" v-model="checkLocationLoad">
+                                <input class="form-check-input chekmark" type="checkbox" id="directoryOrigin" v-model="checkLocationLoad">
-                                <label class="form-check-label custom-label" for="flexCheckDefault">
+                                <label class="form-check-label custom-label" for="directoryOrigin">
                                     Usar locaciones registradas 
                                 </label>
                             </div>
@@ -521,8 +519,8 @@
                         <div class="form-section">
                             <h2>Dirección de destino</h2>
                             <div class="form-check my-4" v-if="loadingLocations === false">
-                                <input class="form-check-input chekmark" type="checkbox" id="flexCheckDefault" v-model="checkLocationDownload">
+                                <input class="form-check-input chekmark" type="checkbox" id="directoryDestination" v-model="checkLocationDownload">
-                                <label class="form-check-label custom-label" for="flexCheckDefault">
+                                <label class="form-check-label custom-label" for="directoryDestination">
                                     Usar locaciones registradas 
                                 </label>
                             </div>

src/composables/useDirectionRender.js

@@ -7,31 +7,39 @@ export default function useDirectionsRender() {
 
     const originCoords = ref(null);
     const destinationCoords = ref(null);
-    // const polylines = ref([]);
+
+    // const geocodeAddress = async (address) => {
+    //   try {
+    //       const response = await fetch(
+    //         `https://maps.googleapis.com/maps/api/geocode/json?address=${encodeURIComponent(
+    //           address
+    //         )}&key=${mapKey}`
+    //       );
+    //       const data = await response.json();
+    //       const location = data.results[0].geometry.location;
+    //       return location;
+    //   } catch (error) {
+    //     return null;
+    //   }
+    // };
+
     const geocodeAddress = async (address) => {
-      // Utiliza la API de geocodificación de Google Maps para obtener las coordenadas
-      // const apiKey = 'AIzaSyAJtfvrAKy7vnUSv2nzk4dYQkOs3OP4MMs'; // Reemplaza con tu clave de API
       try {
-          const response = await fetch(
+        const geocoder = new google.maps.Geocoder();
-            `https://maps.googleapis.com/maps/api/geocode/json?address=${encodeURIComponent(
+        console.log(address)
-              address
+        const data = await geocoder.geocode({ address: address });
-            )}&key=${mapKey}`
+        const latitude = data.results[0].geometry.location.lat();
-          );
+        const longitude = data.results[0].geometry.location.lng();
-          const data = await response.json();
+        return {lng: longitude, lat: latitude};
-          const location = data.results[0].geometry.location;
-          return location;
       } catch (error) {
+        console.log('Error location', error);
         return null;
       }
     };
 
     const getDirections = async (originCoords, destinationCoords) => {
-      // const originLatLng = `${originCoords.lat},${originCoords.lng}`;
-      // const destinationLatLng = `${destinationCoords.lat},${destinationCoords.lng}`;
       try {
         const directionsService = new google.maps.DirectionsService();
-        // const origin = google.maps.LatLng(originCoords.lat, originCoords.lng)
-        // const destination = google.maps.LatLng(destinationCoords.lat, destinationCoords.lng)
         const request = {
             origin: {lat: Number.parseFloat(originCoords.lat), lng: Number.parseFloat(originCoords.lng)},
             destination:  {lat: Number.parseFloat(destinationCoords.lat), lng: Number.parseFloat(destinationCoords.lng)},

src/services/auth.js

@@ -9,7 +9,6 @@ export const login = async(body) => {
         console.log('auth: ', data);
         if(data.accessToken !== null){
             if(data.user.job_role !== 'driver'){
-                //TODO: Guardar token y datos del usuario
                 return {
                     msg: 'success',
                     data

src/views/LocationsView.vue

@@ -6,6 +6,7 @@
     import CreateLocationModal from '../components/CreateLocationModal.vue';
     import CardLocation from '../components/CardLocation.vue';
     import Pagination from '../components/Pagination.vue';
+import CustomPopup from '../components/CustomPopup.vue';
 
     const companyStore = useCompanyStore();
 
@@ -14,6 +15,9 @@
     const query = ref('');
     const locationCurrent = ref(null);
     const openModal = ref(false);
+    // const typeDirection = ref(null)
+    const typeDirection = ref({value: 'both', label: 'Ambas'})
+    const openPopup = ref(false);
 
     onMounted(() => {
         getInitData();
@@ -94,9 +98,36 @@
         locationCurrent.value = null;
     }
 
+    const selectedType = (type) => {
+        console.log(type)
+        typeDirection.value = type
+        openPopup.value = false
+    }
+
+    const optionsFilter = [
+        {value: 'both',label: 'Ambas'},
+        {value: 'load',label: 'Carga'},
+        {value: 'download',label: 'Descarga'}
+    ]
+
+    const closePopup = () => {
+        openPopup.value = false
+    }
+
 </script>
 
 <template>
+    <div
+        v-if="openPopup"
+    >
+        <CustomPopup 
+            :options="optionsFilter" 
+            :value="typeDirection" 
+            @change-value="selectedType"
+            @close-popup="closePopup"
+            selected-color="#e3a11e"
+        />
+    </div>
     <div>
         <CreateLocationModal 
             v-if="openModal === true"
@@ -108,6 +139,13 @@
             <div class="box-search">
                 <input class="form-control custom-search" type="search" name="" placeholder="Buscar por nombre de locación" id="" @:input="search()" v-model="query" aria-label="Search">
             </div>
+            <div class="box-directory"
+                @click="openPopup = true"
+            >
+                <span class="clear-sm" v-if="typeDirection === null">Directorio</span>
+                <span class="clear-sm" v-else>{{typeDirection.label}}</span>
+                <i class="fa-solid fa-filter"></i>
+            </div>
             <button 
                 class="btn btn-danger bg-dark" type="button" @click="clearFilter">
                 <i class="fa-solid fa-arrow-rotate-right"></i>
@@ -149,21 +187,41 @@
         gap: 1rem;
         margin: 1.5rem 0px;
     }
+    .box-filter-location {
+        background-color: white;
+    }
 
-    // .spiner-box {
+    .section-h4 {
-    //     display: flex;
+        font-size: 1rem;
-    //     justify-content: center;
+    }
-    //     height: calc(100vh - 400px)
+
-    // }
+    .box-custom {
+        background-color: red!important;
+        width: 100px;
+    }
+
+    .box-directory {
+        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;
+    }
 
     .box-search {
-        width: 60%;
+        // width: 50%;
+        flex: 1;
     }
     .custom-search {
         width: 100%;
         padding: 12px 20px;
     }
 
+
     @media (max-width: 1024px) {
         .box-search {
             width: 60%;

src/views/TrackingLoadView.vue

@@ -55,7 +55,7 @@
             }
 
 
-            console.log(load.value.load_status);
+            console.log(load.value);
             switch (load.value.load_status) {
                 case 'Loading':
                     isLoadActive.value = true;