From c1113db965b430d5eb54028b797ff81c3085e2c6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rapha=C3=ABl=20Odini?= <raphodn@users.noreply.github.com>
Date: Thu, 22 Aug 2024 11:33:28 +0200
Subject: [PATCH] refactor(City detail): add map display option (#773)

---
 src/constants.js                |  6 ++++-
 src/i18n/locales/en.json        |  2 ++
 src/views/CountryCityDetail.vue | 48 ++++++++++++++++++++++++++-------
 3 files changed, 45 insertions(+), 11 deletions(-)

diff --git a/src/constants.js b/src/constants.js
index 760e8cf1ca3..cdb2e7b030d 100644
--- a/src/constants.js
+++ b/src/constants.js
@@ -67,7 +67,11 @@ export default {
   ],
   DISPLAY_PARAM: 'display',
   PRICE_DISPLAY_LIST: [
-    { key: 'list', value: 'DisplayPriceList', icon: 'mdi-format-list-bulleted' },
+    { key: 'list', value: 'DisplayList', icon: 'mdi-format-list-bulleted' },
+    { key: 'map', value: 'DisplayPriceMap', icon: 'mdi-map-marker' },
+  ],
+  LOCATION_DISPLAY_LIST: [
+    { key: 'list', value: 'DisplayList', icon: 'mdi-format-list-bulleted' },
     { key: 'map', value: 'DisplayPriceMap', icon: 'mdi-map-marker' },
   ],
   DATE_FULL_REGEX_MATCH: /(\d{4})-(\d{2})-(\d{2})/,
diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
index 5f62cf4af14..f8ef2633822 100644
--- a/src/i18n/locales/en.json
+++ b/src/i18n/locales/en.json
@@ -121,7 +121,9 @@
 		"Currency": "Currency",
 		"CurrencyMissing": "Currency missing",
 		"Display": "Display",
+		"DisplayList": "List",
 		"DisplayPriceList": "List",
+		"DisplayMap": "Map",
 		"DisplayPriceMap": "Map",
 		"Language": "Languages",
 		"LatestPrices": "Latest prices",
diff --git a/src/views/CountryCityDetail.vue b/src/views/CountryCityDetail.vue
index 46834af075c..6e637171340 100644
--- a/src/views/CountryCityDetail.vue
+++ b/src/views/CountryCityDetail.vue
@@ -12,14 +12,26 @@
       </h2>
       <v-progress-circular v-if="loading" indeterminate :size="30" />
       <LoadedCountChip v-if="!loading" :loadedCount="countryCityLocationList.length" :totalCount="countryCityLocationTotal" />
+      <DisplayMenu kind="price" :currentDisplay="currentDisplay" @update:currentDisplay="selectPriceDisplay($event)" />
     </v-col>
   </v-row>
 
-  <v-row class="mt-0">
-    <v-col v-for="location in countryCityLocationList" :key="location" cols="12" sm="6" md="4">
-      <LocationCard :location="location" :hideLocationOSMID="true" :hideCountryCity="true" height="100%" />
-    </v-col>
-  </v-row>
+  <v-window v-model="currentDisplay">
+    <v-window-item value="list">
+      <v-row class="mt-0 mb-1">
+        <v-col v-for="location in countryCityLocationList" :key="location" cols="12" sm="6" md="4">
+          <LocationCard :location="location" :hideLocationOSMID="true" :hideCountryCity="true" height="100%" />
+        </v-col>
+      </v-row>
+    </v-window-item>
+    <v-window-item value="map">
+      <v-row class="mt-0 mb-1">
+        <v-col style="height:400px">
+          <LeafletMap :locations="countryCityLocationList" />
+        </v-col>
+      </v-row>
+    </v-window-item>
+  </v-window>
 
   <v-row v-if="countryCityLocationList.length < countryCityLocationTotal" class="mb-2">
     <v-col align="center">
@@ -32,18 +44,22 @@
 
 <script>
 import { defineAsyncComponent } from 'vue'
+import constants from '../constants'
 import api from '../services/api'
 
 export default {
   components: {
     CountryCard: defineAsyncComponent(() => import('../components/CountryCard.vue')),
     LoadedCountChip: defineAsyncComponent(() => import('../components/LoadedCountChip.vue')),
-    LocationCard: defineAsyncComponent(() => import('../components/LocationCard.vue'))
+    DisplayMenu: defineAsyncComponent(() => import('../components/DisplayMenu.vue')),
+    LocationCard: defineAsyncComponent(() => import('../components/LocationCard.vue')),
+    LeafletMap: defineAsyncComponent(() => import('../components/LeafletMap.vue')),
   },
   data() {
     return {
-      // filter & order
+      // order & display
       currentOrder: '-price_count',
+      currentDisplay: constants.LOCATION_DISPLAY_LIST[0].key,
       // data
       country: null,  // see init
       countryCity: null,  // see init
@@ -60,13 +76,20 @@ export default {
     },
   },
   watch: {
-    $route (newCountryCity, oldCountryCity) {
-      if (oldCountryCity && newCountryCity && newCountryCity.name == 'country-city-detail' && oldCountryCity.fullPath != newCountryCity.fullPath) {
-        this.initCountryCity()
+    $route (newRoute, oldRoute) {
+      // only called when query changes to avoid having an API call when the path changes
+      // but ignore 'display' changes
+      if (oldRoute.path === newRoute.path) {
+        const oldRouteQueryFiltered = Object.fromEntries(Object.entries(oldRoute.query).filter(([key, value]) => key !== constants.DISPLAY_PARAM))  // eslint-disable-line no-unused-vars
+        const newRouteQueryFiltered = Object.fromEntries(Object.entries(newRoute.query).filter(([key, value]) => key !== constants.DISPLAY_PARAM))  // eslint-disable-line no-unused-vars
+        if (JSON.stringify(oldRouteQueryFiltered) !== JSON.stringify(newRouteQueryFiltered)) {
+          this.initCountryCity()
+        }
       }
     }
   },
   mounted() {
+    this.currentDisplay = this.$route.query[constants.DISPLAY_PARAM] || this.currentDisplay
     this.initCountryCity()
   },
   methods: {
@@ -88,6 +111,11 @@ export default {
           this.loading = false
         })
     },
+    selectPriceDisplay(displayKey) {
+      this.currentDisplay = displayKey
+      this.$router.push({ query: { ...this.$route.query, [constants.DISPLAY_PARAM]: this.currentDisplay } })
+      // this.initCountryCity() will NOT be called in watch $route
+    },
   }
 }
 </script>