From 5c2549322b96a59a050eef60c1333adb4bb3dbb8 Mon Sep 17 00:00:00 2001
From: Raphael Odini <raphodn@users.noreply.github.com>
Date: Sun, 31 Mar 2024 21:49:51 +0200
Subject: [PATCH] refactor: new LocationCard component (#490)

---
 src/components/LocationCard.vue | 46 +++++++++++++++++++++++++++++++++
 src/views/LocationDetail.vue    | 19 +++-----------
 src/views/LocationList.vue      | 23 +++--------------
 3 files changed, 52 insertions(+), 36 deletions(-)
 create mode 100644 src/components/LocationCard.vue

diff --git a/src/components/LocationCard.vue b/src/components/LocationCard.vue
new file mode 100644
index 0000000000..36aa7bea13
--- /dev/null
+++ b/src/components/LocationCard.vue
@@ -0,0 +1,46 @@
+<template>
+  <v-card
+    :title="getLocationTitle(location)"
+    :subtitle="location ? location.osm_display_name : ''"
+    :prepend-icon="location ? 'mdi-map-marker-outline' : 'mdi-map-marker-remove-variant'"
+    @click="goToLocation(location)">
+    <v-card-text v-if="location">
+      <PriceCountChip :count="location.price_count" :withLabel="true"></PriceCountChip>
+    </v-card-text>
+  </v-card>
+</template>
+
+<script>
+import { defineAsyncComponent } from 'vue'
+import utils from '../utils.js'
+
+export default {
+  components: {
+    'PriceCountChip': defineAsyncComponent(() => import('../components/PriceCountChip.vue')),
+  },
+  props: {
+    location: {
+      type: Object,
+      required: true
+    },
+    readonly: {
+      type: Boolean,
+      default: false
+    }
+  },
+  methods: {
+    getLocationTitle(location) {
+      if (location) {
+        return utils.getLocationTitle(location, true, false, true, true)
+      }
+      return this.$route.params.id
+    },
+    goToLocation(location) {
+      if (this.readonly) {
+        return
+      }
+      this.$router.push({ path: `/locations/${location.id}` })
+    },
+  }
+}
+</script>
diff --git a/src/views/LocationDetail.vue b/src/views/LocationDetail.vue
index 920b6efc55..a6aa43d6e7 100644
--- a/src/views/LocationDetail.vue
+++ b/src/views/LocationDetail.vue
@@ -1,14 +1,7 @@
 <template>
   <v-row>
     <v-col cols="12" sm="6">
-      <v-card
-        :title="getLocationTitle(location)"
-        :subtitle="location ? location.osm_display_name : ''"
-        :prepend-icon="location ? 'mdi-map-marker-outline' : 'mdi-map-marker-remove-variant'">
-        <v-card-text>
-          <PriceCountChip :count="locationPriceTotal" :withLabel="true"></PriceCountChip>
-        </v-card-text>
-      </v-card>
+      <LocationCard :location="location" readonly></LocationCard>
     </v-col>
   </v-row>
 
@@ -49,14 +42,14 @@
 </template>
 
 <script>
+import { defineAsyncComponent } from 'vue'
 import api from '../services/api'
 import utils from '../utils.js'
-import { defineAsyncComponent } from 'vue'
 import constants from '../constants'
 
 export default {
   components: {
-    'PriceCountChip': defineAsyncComponent(() => import('../components/PriceCountChip.vue')),
+    'LocationCard': defineAsyncComponent(() => import('../components/LocationCard.vue')),
     'FilterMenu': defineAsyncComponent(() => import('../components/FilterMenu.vue')),
     'OrderMenu': defineAsyncComponent(() => import('../components/OrderMenu.vue')),
     'PriceCard': defineAsyncComponent(() => import('../components/PriceCard.vue')),
@@ -123,12 +116,6 @@ export default {
           this.loading = false
         })
     },
-    getLocationTitle(location) {
-      if (location) {
-        return utils.getLocationTitle(location, true, false, true, true)
-      }
-      return this.$route.params.id
-    },
     togglePriceFilter(filterKey) {
       this.currentFilter = this.currentFilter ? '' : filterKey
       this.$router.push({ query: { ...this.$route.query, [constants.FILTER_PARAM]: this.currentFilter } })
diff --git a/src/views/LocationList.vue b/src/views/LocationList.vue
index 899e0ea97e..85b7d2e053 100644
--- a/src/views/LocationList.vue
+++ b/src/views/LocationList.vue
@@ -14,17 +14,7 @@
 
   <v-row class="mt-0">
     <v-col cols="12" sm="6" md="4" v-for="location in locationList" :key="location">
-      <v-card
-        :title="getLocationTitle(location)"
-        :subtitle="location.osm_display_name"
-        prepend-icon="mdi-map-marker-outline"
-        elevation="1"
-        height="100%"
-        @click="goToLocation(location)">
-        <v-card-text>
-          <PriceCountChip :count="location.price_count" :withLabel="true"></PriceCountChip>
-        </v-card-text>
-      </v-card>
+      <LocationCard :location="location" height="100%"></LocationCard>
     </v-col>
   </v-row>
 
@@ -36,13 +26,12 @@
 </template>
 
 <script>
-import api from '../services/api'
-import utils from '../utils.js'
 import { defineAsyncComponent } from 'vue'
+import api from '../services/api'
 
 export default {
   components: {
-    'PriceCountChip': defineAsyncComponent(() => import('../components/PriceCountChip.vue')),
+    'LocationCard': defineAsyncComponent(() => import('../components/LocationCard.vue')),
   },
   data() {
     return {
@@ -73,12 +62,6 @@ export default {
           this.loading = false
         })
     },
-    getLocationTitle(location) {
-      return utils.getLocationTitle(location, true, false, true, true)
-    },
-    goToLocation(location) {
-      this.$router.push({ path: `/locations/${location.id}` })
-    },
   }
 }
 </script>