feat: Agregar funcion al boton de ubicacion

config/dev.env.js

@@ -20,6 +20,7 @@ module.exports = merge(prodEnv, {
 	DEFAULT_AVATAR: `'${process.env.DEFAULT_AVATAR}'`,
 	FORM_BACKGROUND: `'${process.env.FORM_BACKGROUND}'`,
 	PRODUCTS_URL: `'${process.env.PRODUCTS_URL}'`,
+	API_GOOGLE_MAPS: `'${process.env.API_GOOGLE_MAPS}'`,
 	REDIRECT_URI: `'${process.env.REDIRECT_URI}'`,
 	ROLE_CODE: `'${process.env.ROLE_CODE}'`,
 	S3_IMAGES_URL: "'//apprunn.s3.amazonaws.com'",

config/prod.env.js

@@ -18,6 +18,7 @@ module.exports = {
 	DEFAULT_AVATAR: `'${process.env.DEFAULT_AVATAR}'`,
 	FORM_BACKGROUND: `'${process.env.FORM_BACKGROUND}'`,
 	PRODUCTS_URL: `'${process.env.PRODUCTS_URL}'`,
+	API_GOOGLE_MAPS: `'${process.env.API_GOOGLE_MAPS}'`,
 	REDIRECT_URI: `'${process.env.REDIRECT_URI}'`,
 	ROLE_CODE: `'${process.env.ROLE_CODE}'`,
 	S3_IMAGES_URL: "'//apprunn.s3.amazonaws.com'",

src/axios.js

@@ -19,6 +19,10 @@ const salesInstance = axios.create({
 	baseURL: process.env.SALES_URL,
 });
 
+const httpsMaps = axios.create({
+	baseURL: process.env.API_GOOGLE_MAPS,
+});
+
 const updateTransactionIntance = axios.create({
 	baseURL: process.env.SALES_URL,
 });
@@ -79,4 +83,5 @@ export default function (Vue) {
 	Vue.prototype.$httpSalesReadPublic = saleReadReportPublic;
 	Vue.prototype.$httpProductsRead = productsReadReport;
 	Vue.prototype.$httpSalesRead = saleReadReport;
+	Vue.prototype.$httpMaps = httpsMaps;
 }

src/components/order/new-address.vue

@@ -115,6 +115,7 @@
 				]"
 				:location="{ lat: newAddress.latitude, lng: newAddress.longitude }"
 				:center="{ lat: newAddress.latitude, lng: newAddress.longitude }"
+				@update-address="updateAddressLine1"	
 			/>
 		</div>
 	</form>
@@ -194,6 +195,7 @@ function googleSearch() {
 function selectDepartment(provinceId) {
 	this.newAddress.province = null;
 	this.newAddress.district = null;
+	this.newAddress.addressLine1 = null;
 	this.$store.commit('SET_PROVINCES', []);
 	this.$store.commit('SET_DISTRICTS', []);
 	// this.calculateShippingCost({ provinceId });
@@ -203,6 +205,7 @@ function selectDepartment(provinceId) {
 
 function selectProvince(cityId) {
 	this.newAddress.districts = null;
+	this.newAddress.addressLine1 = null;
 	this.$store.commit('SET_DISTRICTS', []);
 	// this.calculateShippingCost({
 	// 	provinceId: this.newAddress.department,
@@ -213,6 +216,7 @@ function selectProvince(cityId) {
 }
 
 function selectDistrict(parishId) {
+	this.newAddress.addressLine1 = null;
 	this.calculateShippingCost({
 		provinceId: this.newAddress.department,
 		cityId: this.newAddress.province,
@@ -351,6 +355,9 @@ export default {
 		setCustomerAddress,
 		googleSearch,
 		getMap,
+		updateAddressLine1(address) {
+			this.newAddress.addressLine1 = address;
+		},
 	},
 	validations,
 	watch: {

src/components/shared/map/map-component.vue

@@ -5,16 +5,16 @@
 		style="width:100%;height:400px;"
 		@click="setCoords"
 	>
-	<GmapMarker
-		:key="index"
-		v-for="(m, index) in markers"
-		:position="m.location"
-		:clickable="true"
-		:draggable="true"
-		@dragend="updateCoordinates($event.latLng)"
-		@click="selectedMarker(m)"
-	/>
-	</GmapMap>	
+		<GmapMarker
+			:key="index"
+			v-for="(m, index) in markers"
+			:position="m.location"
+			:clickable="true"
+			:draggable="true"
+			@dragend="updateCoordinates($event.latLng)"
+			@click="selectedMarker(m)"
+		/>
+	</GmapMap>
 </template>
 <script>
 
@@ -27,17 +27,43 @@ function updateCoordinates(location) {
 		lat: location.lat(),
 		lng: location.lng(),
 	};
+	this.getAddress(coordinates);
 	this.$store.commit('UPDATE_LOCATION', coordinates);
 }
 
 function setCoords() {}
 
 export default {
 	name: 'map-component',
+	data() {
+		return {
+			addressLine: '',
+		};
+	},
 	methods: {
 		setCoords,
 		selectedMarker,
 		updateCoordinates,
+		async getAddress(coor) {
+			const url = '/maps/api/geocode/json';
+			const { lat, lng } = coor;
+			const params = {
+				latlng: `${lat},${lng}`,
+				key: process.env.GOOGLE_MAP_API_KEY,
+				language: 'es',
+			};
+			try {
+				const response = await this.$httpMaps.get(url, { params });
+				this.addressLine = response.data.results[0].formatted_address;
+			} catch (error) {
+				this.showGenericError();
+			}
+		},
+	},
+	watch: {
+		addressLine(address) {
+			this.$emit('update-address', address);
+		},
 	},
 	props: {
 		center: {