feat(City detail): new basic City detail page (#771)

src/components/CountryCard.vue

@@ -1,7 +1,13 @@
 <template>
-  <v-card :title="country" prepend-icon="mdi-map-marker-outline" data-name="country-card">
+  <v-card :title="getTitle" prepend-icon="mdi-map-marker-outline" data-name="country-card">
     <v-card-text>
       <LocationCountChip :count="locationCount" :withLabel="true" />
+      <v-chip
+        v-if="city"
+        label size="small" density="comfortable" class="mr-1" @click="$router.push(countryUrl)"
+      >
+        {{ country }}
+      </v-chip>
     </v-card-text>
   </v-card>
 </template>
@@ -18,10 +24,22 @@ export default {
       type: String,
       default: null
     },
+    city: {
+      type: String,
+      default: null
+    },
     locationCount: {
       type: Number,
       default: 0
     }
+  },
+  computed: {
+    getTitle() {
+      return this.city ? `${this.city}, ${this.country}` : this.country
+    },
+    countryUrl() {
+      return `/countries/${this.country}`
+    }
   }
 }
 </script>

src/components/UserRecentProofsDialog.vue

@@ -16,7 +16,7 @@
         <v-row v-if="userProofList.length < userProofTotal" class="mb-2">
           <v-col align="center">
             <v-btn size="small" :loading="loading" @click="getUserProofs">
-              {{ $t('ProofDetail.LoadMore') }}
+              {{ $t('Common.LoadMore') }}
             </v-btn>
           </v-col>
         </v-row>

src/router.js

@@ -20,7 +20,8 @@ const routes = [
   { path: '/products/:id', name: 'product-detail', component: () => import('./views/ProductDetail.vue'), meta: { title: 'Product detail' }},
   { path: '/locations', name: 'locations', component: () => import('./views/LocationList.vue'), meta: { title: 'TopLocations', icon: 'mdi-map-marker-star-outline', drawerMenu: true }},
   { path: '/locations/:id', name: 'location-detail', component: () => import('./views/LocationDetail.vue'), meta: { title: 'Location detail' }},
-  { path: '/countries/:id', name: 'country-detail', component: () => import('./views/CountryDetail.vue'), meta: { title: 'Country detail' }},
+  { path: '/countries/:country', name: 'country-detail', component: () => import('./views/CountryDetail.vue'), meta: { title: 'Country detail' }},
+  { path: '/countries/:country/cities/:city', name: 'country-city-detail', component: () => import('./views/CountryCityDetail.vue'), meta: { title: 'City detail' }},
   { path: '/brands/:id', name: 'brand-detail', component: () => import('./views/BrandDetail.vue'), meta: { title: 'Brand detail' }},
   { path: '/dates/:date', name: 'date-detail', component: () => import('./views/DateDetail.vue'), meta: { title: 'Date detail' }},
   { path: '/categories/:id', name: 'category-detail', component: () => import('./views/CategoryDetail.vue'), meta: { title: 'Category detail' }},

src/views/BrandDetail.vue

@@ -26,7 +26,7 @@
   <v-row v-if="brandProductList.length < brandProductTotal" class="mb-2">
     <v-col align="center">
       <v-btn size="small" :loading="loading" @click="getBrandProducts">
-        {{ $t('BrandDetail.LoadMore') }}
+        {{ $t('Common.LoadMore') }}
       </v-btn>
     </v-col>
   </v-row>

src/views/CategoryDetail.vue

@@ -26,7 +26,7 @@
   <v-row v-if="categoryProductList.length < categoryProductTotal" class="mb-2">
     <v-col align="center">
       <v-btn size="small" :loading="loading" @click="getCategoryProducts">
-        {{ $t('CategoryDetail.LoadMore') }}
+        {{ $t('Common.LoadMore') }}
       </v-btn>
     </v-col>
   </v-row>

src/views/CountryCityDetail.vue

@@ -0,0 +1,93 @@
+<template>
+  <v-row>
+    <v-col cols="12" sm="6">
+      <CountryCard :country="country" :city="countryCity" :locationCount="countryCityLocationTotal" />
+    </v-col>
+  </v-row>
+
+  <v-row>
+    <v-col>
+      <h2 class="text-h6 d-inline mr-1">
+        {{ $t('Common.TopLocations') }}
+      </h2>
+      <v-progress-circular v-if="loading" indeterminate :size="30" />
+      <LoadedCountChip v-if="!loading" :loadedCount="countryCityLocationList.length" :totalCount="countryCityLocationTotal" />
+    </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" height="100%" />
+    </v-col>
+  </v-row>
+
+  <v-row v-if="countryCityLocationList.length < countryCityLocationTotal" class="mb-2">
+    <v-col align="center">
+      <v-btn size="small" :loading="loading" @click="getCountryLocations">
+        {{ $t('Common.LoadMore') }}
+      </v-btn>
+    </v-col>
+  </v-row>
+</template>
+
+<script>
+import { defineAsyncComponent } from 'vue'
+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'))
+  },
+  data() {
+    return {
+      // filter & order
+      currentOrder: '-price_count',
+      // data
+      country: null,  // see init
+      countryCity: null,  // see init
+      countryCityLocationList: [],
+      countryCityLocationTotal: null,
+      countryCityLocationPage: 0,
+      loading: false,
+    }
+  },
+  computed: {
+    getLocationsParams() {
+      let defaultParams = { osm_address_country__like: this.country, osm_address_city__like: this.countryCity, order_by: `${this.currentOrder}`, page: this.countryCityLocationPage }
+      return defaultParams
+    },
+  },
+  watch: {
+    $route (newCountryCity, oldCountryCity) {
+      if (oldCountryCity && newCountryCity && newCountryCity.name == 'country-city-detail' && oldCountryCity.fullPath != newCountryCity.fullPath) {
+        this.initCountryCity()
+      }
+    }
+  },
+  mounted() {
+    this.initCountryCity()
+  },
+  methods: {
+    initCountryCity() {
+      this.country = this.$route.params.country
+      this.countryCity = this.$route.params.city
+      this.countryCityLocationList = []
+      this.countryCityLocationTotal = null
+      this.countryCityLocationPage = 0
+      this.getCountryCityLocations()
+    },
+    getCountryCityLocations() {
+      this.loading = true
+      this.countryCityLocationPage += 1
+      return api.getLocations(this.getLocationsParams)
+        .then((data) => {
+          this.countryCityLocationList.push(...data.items)
+          this.countryCityLocationTotal = data.total
+          this.loading = false
+        })
+    },
+  }
+}
+</script>

src/views/CountryDetail.vue

@@ -24,7 +24,7 @@
   <v-row v-if="countryLocationList.length < countryLocationTotal" class="mb-2">
     <v-col align="center">
       <v-btn size="small" :loading="loading" @click="getCountryLocations">
-        {{ $t('CountryDetail.LoadMore') }}
+        {{ $t('Common.LoadMore') }}
       </v-btn>
     </v-col>
   </v-row>
@@ -70,7 +70,7 @@ export default {
   },
   methods: {
     initCountry() {
-      this.country = this.$route.params.id
+      this.country = this.$route.params.country
       this.countryLocationList = []
       this.countryLocationTotal = null
       this.countryLocationPage = 0

src/views/LocationDetail.vue

@@ -34,7 +34,7 @@
   <v-row v-if="locationPriceList.length < locationPriceTotal" class="mb-2">
     <v-col align="center">
       <v-btn size="small" :loading="loading" @click="getLocationPrices">
-        {{ $t('LocationDetail.LoadMore') }}
+        {{ $t('Common.LoadMore') }}
       </v-btn>
     </v-col>
   </v-row>

src/views/LocationList.vue

@@ -21,7 +21,7 @@
   <v-row v-if="locationList.length < locationTotal" class="mb-2">
     <v-col align="center">
       <v-btn size="small" :loading="loading" @click="getLocations">
-        {{ $t('LocationList.LoadMore') }}
+        {{ $t('Common.LoadMore') }}
       </v-btn>
     </v-col>
   </v-row>

src/views/PriceList.vue

@@ -13,7 +13,7 @@
   <v-row v-if="priceList.length < priceTotal" class="mb-2">
     <v-col align="center">
       <v-btn size="small" :loading="loading" @click="getPrices">
-        {{ $t('PriceList.LoadMore') }}
+        {{ $t('Common.LoadMore') }}
       </v-btn>
     </v-col>
   </v-row>

src/views/ProductDetail.vue

@@ -57,7 +57,7 @@
   <v-row v-if="productPriceList.length < productPriceTotal" class="mb-2">
     <v-col align="center">
       <v-btn size="small" :loading="loading" @click="getProductPrices">
-        {{ $t('ProductDetail.LoadMore') }}
+        {{ $t('Common.LoadMore') }}
       </v-btn>
     </v-col>
   </v-row>

src/views/ProductList.vue

@@ -23,7 +23,7 @@
   <v-row v-if="productList.length < productTotal" class="mb-2">
     <v-col align="center">
       <v-btn size="small" :loading="loading" @click="getProducts">
-        {{ $t('ProductList.LoadMore') }}
+        {{ $t('Common.LoadMore') }}
       </v-btn>
     </v-col>
   </v-row>

src/views/ProofDetail.vue

@@ -27,7 +27,7 @@
   <v-row v-if="proof && (proofPriceList.length < proofPriceTotal)" class="mb-2">
     <v-col align="center">
       <v-btn size="small" :loading="loading" @click="getProofPrices">
-        {{ $t('ProofDetail.LoadMore') }}
+        {{ $t('Common.LoadMore') }}
       </v-btn>
     </v-col>
   </v-row>

src/views/UserDashboardPriceList.vue

@@ -34,7 +34,7 @@
   <v-row v-if="userPriceList.length < userPriceTotal" class="mb-2">
     <v-col align="center">
       <v-btn size="small" :loading="loading" @click="getUserPrices">
-        {{ $t('UserDashboard.LoadMore') }}
+        {{ $t('Common.LoadMore') }}
       </v-btn>
     </v-col>
   </v-row>

src/views/UserDashboardProofList.vue

@@ -35,7 +35,7 @@
   <v-row v-if="userProofList.length < userProofTotal" class="mb-2">
     <v-col align="center">
       <v-btn size="small" :loading="loading" @click="getUserProofs">
-        {{ $t('UserDashboard.LoadMore') }}
+        {{ $t('Common.LoadMore') }}
       </v-btn>
     </v-col>
   </v-row>

src/views/UserDetail.vue

@@ -26,7 +26,7 @@
   <v-row v-if="userPriceList.length < userPriceTotal" class="mb-2">
     <v-col align="center">
       <v-btn size="small" :loading="loading" @click="getUserPrices">
-        {{ $t('UserDetail.LoadMore') }}
+        {{ $t('Common.LoadMore') }}
       </v-btn>
     </v-col>
   </v-row>

src/views/UserList.vue

@@ -21,7 +21,7 @@
   <v-row v-if="userList.length < userTotal" class="mb-2">
     <v-col align="center">
       <v-btn size="small" :loading="loading" @click="getUsers">
-        {{ $t('UserList.LoadMore') }}
+        {{ $t('Common.LoadMore') }}
       </v-btn>
     </v-col>
   </v-row>