✨ (account) add a new tab with all locations in a map

src/components/EarthMap.vue

@@ -6,26 +6,49 @@
 import { Component, Prop, Vue } from 'vue-property-decorator'
 import mapboxgl from 'mapbox-gl/dist/mapbox-gl'
 
+interface Location {
+  name?: string
+  lat: number
+  lon: number
+}
+
 @Component
 export default class EarthMap extends Vue {
-  @Prop({ type: Number, required: true })
+  @Prop({ type: Array, default: () => [] })
-  private lat!: number
+  private locations!: Location[]
-  @Prop({ type: Number, required: true })
-  private lon!: number
 
   private mounted() {
-    const center = [this.lon, this.lat]
     mapboxgl.accessToken = process.env.VUE_APP_MAPBOX_KEY
 
+    const markers = this.locations.map((location) => [
+      location.lon,
+      location.lat
+    ])
+    const latitudes = this.locations.map((location: Location) => location.lat)
+    const longitudes = this.locations.map((location: Location) => location.lon)
+    const minLat = Math.min(...latitudes)
+    const maxLat = Math.min(...latitudes)
+    const minLon = Math.min(...longitudes)
+    const maxLon = Math.min(...longitudes)
+
     const earth = new mapboxgl.Map({
       container: 'earth',
       style: 'mapbox://styles/mapbox/streets-v11',
-      center,
+      bounds: [
-      zoom: 12
+        [minLon, minLat],
+        [maxLon, maxLat]
+      ],
+      fitBoundsOptions: {
+        padding: 15,
+        maxZoom: 12
+      }
     })
 
     earth.addControl(new mapboxgl.NavigationControl())
-    new mapboxgl.Marker().setLngLat(center).addTo(earth)
+
+    markers.forEach((marker) => {
+      new mapboxgl.Marker().setLngLat(marker).addTo(earth)
+    })
   }
 }
 </script>
@@ -35,5 +58,6 @@ export default class EarthMap extends Vue {
 
 .earth-container {
   min-height: 50vh;
+  height: 100%;
 }
 </style>

src/utils/icons.ts

@@ -15,9 +15,10 @@ import {
   faGift,
   faDollarSign,
   faEuroSign,
-  faExchangeAlt,
   faInbox,
+  faExchangeAlt,
   faEquals,
+  faGlobeEurope,
   faMinus,
   faInfinity,
   faHandHoldingUsd,
@@ -54,8 +55,9 @@ library.add(
   faDollarSign,
   faEuroSign,
   faExchangeAlt,
-  faInbox,
   faEquals,
+  faGlobeEurope,
+  faInbox,
   faMinus,
   faInfinity,
   faHandHoldingUsd,

src/views/accounts/AccountItem.vue

@@ -58,6 +58,15 @@
               <awe-icon icon="dollar-sign" />
             </a>
           </li>
+          <li v-if="locations.length">
+            <a
+              :style="colorStyle(activeTab === 'location')"
+              href="#"
+              @click.prevent="toggleTab('location')"
+            >
+              <awe-icon icon="globe-europe" />
+            </a>
+          </li>
           <li v-if="tagCount > 1">
             <a
               :style="colorStyle(activeTab === 'tag')"
@@ -97,6 +106,13 @@
           :transactions="transactions"
         />
       </div>
+      <div
+        key="location"
+        class="location-panel tab-content is-centered"
+        v-if="locations.length && activeTab === 'location'"
+      >
+        <earth-map :locations="locations" />
+      </div>
       <div
         key="tag"
         class="tag-panel tab-content is-centered"
@@ -175,6 +191,7 @@ import { primary, main, findContrastColor, findDarkValue } from '@/utils'
     'account-share': () => import('@/components/AccountShare.vue'),
     'account-transaction-list': () =>
       import('@/components/AccountTransactionList.vue'),
+    'earth-map': () => import('@/components/EarthMap.vue'),
     'tag-list': () => import('@/components/TagList.vue'),
     'chart-balance': () => import('@/components/ChartBalance.vue'),
     'online-view': () => import('@/components/OnlineView.vue'),
@@ -359,6 +376,12 @@ export default class AccountItem extends BaseAccount {
     })
   }
 
+  public get locations() {
+    return this.transactions
+      .filter((transaction) => transaction.location)
+      .map((transaction) => transaction.location)
+  }
+
   public get myTotalCost(): number {
     if (!this.account) {
       return 0

src/views/transactions/TransactionItem.vue

@@ -129,11 +129,7 @@
         Le taux d'échange n'a pas pu être récupéré.
       </div>
     </div>
-    <earth-map
+    <earth-map v-if="transaction.location" :locations="transaction.location" />
-      v-if="transaction.location"
-      :lat="transaction.location.lat"
-      :lon="transaction.location.lon"
-    />
   </div>
 </template>