refactor: pass share url as a prameter to share component

src/fragments/forms/map-form/components/isochrones/components/isochrones-details/IsochronesDetails.vue

@@ -2,7 +2,7 @@
   <box background="white" no-shadow>
     <div slot="header">
       <download :download-formats-supported="['json', 'geojson']" :map-view-data="localMapViewData"></download>
-      <share></share>
+      <share :url="shareUrl"></share>
       <print :map-view-data="localMapViewData"></print>
       <h3>{{$t('isochrones.isochrones')}}</h3>
     </div>

src/fragments/forms/map-form/components/isochrones/components/isochrones-details/isochrones-details.js

@@ -20,6 +20,11 @@ export default {
     Download,
     Print
   },
+  computed: {
+    shareUrl () {
+      return location.href
+    }
+  },
   created() {
     this.localMapViewData = this.mapViewData.clone()
   },

src/fragments/forms/map-form/components/place-and-directions/components/place-details/PlaceDetails.vue

@@ -1,7 +1,7 @@
 <template>
   <box background="white" no-shadow>
     <div slot="header">
-      <share></share>
+      <share :url="shareUrl"></share>
       <print :map-view-data="mapViewData"></print>
       <h3>{{$t('placeDetails.placeDetails')}}</h3>
     </div>

src/fragments/forms/map-form/components/place-and-directions/components/place-details/place-details.js

@@ -54,6 +54,9 @@ export default {
     }
   },
   computed: {
+    shareUrl () {
+      return location.href
+    },
     imagePath () {
       if (this.placeLayer) {
         const zoom = geoUtils.zoomLevelByLayer(this.placeLayer)

src/fragments/forms/map-form/components/place-and-directions/components/route-details/RouteDetails.vue

@@ -3,7 +3,7 @@
   <box background="white" v-if="hasRoutes" custom-class="expansion-box" no-shadow>
     <div slot="header">
       <download :map-view-data="mapViewData" ></download>
-      <share></share>
+      <share :url="shareUrl"></share>
       <print :map-view-data="mapViewData"></print>
       <h3>{{$t('routeDetails.routeDetails')}}</h3>
     </div>

src/fragments/forms/map-form/components/place-and-directions/components/route-details/route-details.js

@@ -28,7 +28,7 @@ export default {
      * the map builder is reset and the
      * map data is reloaded
      */
-     'mapViewData.routes': {
+    'mapViewData.routes': {
       handler: function () {
         // When the mapViewData prop changes, we copy its value to a
         // local instance so that we can modify it when necessary
@@ -41,6 +41,9 @@ export default {
     hasRoutes () {
       return this.localMapViewData.isRouteData
     },
+    shareUrl () {
+      return location.href
+    },
     startedPanelExtended () {
       return this.localMapViewData.routes.length === 1 ? 0 : null
     },

src/fragments/forms/map-form/components/share/Share.vue

@@ -1,8 +1,8 @@
 <template>
-  <div>
-    <v-btn style="float:right; margin-top:0" small icon :title="$t('share.share')" @click="openShare()"><v-icon>share</v-icon></v-btn>
+  <div class="share-container">
+    <v-btn class="open-share-btn" style="float:right; margin-top:0" small icon :title="$t('share.share')" @click="openShare()"><v-icon>share</v-icon></v-btn>
     <v-dialog v-model="isShareModalOpen" max-width="600" :persistent="true" attach="body">
-      <box v-model="isShareModalOpen" background="white" closable @closed="closeShare()">
+      <box customClass="share-modal" v-model="isShareModalOpen" background="white" closable @closed="closeShare()">
         <h3 slot="header">{{$t('share.shareLink')}}</h3>
         <v-layout row wrap>
           <v-flex xs12 sm10 d-flex>
@@ -14,7 +14,7 @@
             </v-text-field>
           </v-flex>
           <v-flex xs12 sm2 d-flex>
-            <v-btn style="margin-top:11px" color="primary" :title="shortBtnTitle" @click="toggleShortUrl()">{{shortBtnTitle}}</v-btn>
+            <v-btn style="margin-top:11px" class="toggle-short-url" color="primary" :title="shortBtnTitle" @click="toggleShortUrl()">{{shortBtnTitle}}</v-btn>
           </v-flex>
         </v-layout>
         <v-alert :value="true" type="info" > {{$t('share.copyUrlInfo')}}</v-alert>

src/fragments/forms/map-form/components/share/share.js

@@ -8,12 +8,18 @@ export default {
     shareUrl: null,
     isShortened: false
   }),
+  props: {
+    url: {
+      required: false,
+      default: null
+    }
+  },
   computed: {
     currentUrl () {
-      return location.href
+      return this.url || location.href
     },
     embedCode () {
-      let code = `<iframe style='border:none' width='100%' height='100%'  src="${this.currentUrl}/embed/${this.$store.getters.mapSettings.locale}"></iframe>`
+      let code = `<iframe style='border:none' width='100%' height='100%'  src="${this.shareUrl}/embed/${this.$store.getters.mapSettings.locale}"></iframe>`
       return code
     },
     shortBtnTitle () {
@@ -29,7 +35,14 @@ export default {
       if (this.isShortened) {
         this.shareUrl = this.currentUrl
       } else {
-        this.short()
+        let context = this
+        this.short().then((shortUrl => {
+          context.shareUrl = shortUrl
+          context.isShortened = true
+          context.showSuccess(context.$t('share.urlShortened'), { timeout: 2000 })
+        })).catch(() => {
+          context.showError(context.$t('share.shorteningNotPossible'), { timeout: 2000 })
+        })
       }
       this.isShortened = !this.isShortened
     },
@@ -97,19 +110,19 @@ export default {
 
       // Run the request and get the short url
       let httpClient = new HttpClient({getVueInstance: () => { return this }})
-      let context = this
-      httpClient.http.get(shortenerRequestUrl).then((response) => {
-        if (response.data.status_code === 200) {
-          context.shareUrl = response.data.data.url
-          context.isShortened = true
-          context.showSuccess(context.$t('share.urlShortened'), { timeout: 2000 })
-        } else {
-          this.showError(context.$t('share.shorteningNotPossible'), { timeout: 2000 })
-          console.log(response)
-        }
-      }).catch((error) => {
-        context.showError(context.$t('share.shorteningNotPossible'), { timeout: 2000 })
-        console.log(error)
+
+      return new Promise((resolve, reject) => {
+        httpClient.http.get(shortenerRequestUrl).then((response) => {
+          if (response.data.status_code === 200) {
+            resolve(response.data.data.url)
+          } else {
+            console.log(response)
+            reject(response)
+          }
+        }).catch((error) => {
+          console.log(error)
+          reject(error)
+        })
       })
     }
   }