feat(prices): move owner & created info to a new History section

src/components/HistoryCard.vue

@@ -0,0 +1,35 @@
+<template>
+  <v-card :title="$t('Common.History')" data-name="history-card">
+    <v-card-text>
+      {{ getDateTimeFormatted(price.created) }} ({{ getRelativeDateTimeFormatted(price.created) }})
+      <span>- </span>
+      <a :href="getUserDetailUrl">{{ price.owner }}</a>
+    </v-card-text>
+  </v-card>
+</template>
+
+<script>
+import utils from '../utils.js'
+
+export default {
+  props: {
+    price: {
+      type: Object,
+      required: true
+    }
+  },
+  computed: {
+    getUserDetailUrl() {
+      return `/users/${this.price.owner}`
+    }
+  },
+  methods: {
+    getDateTimeFormatted(dateTimeString) {
+      return utils.offDateTime(dateTimeString)
+    },
+    getRelativeDateTimeFormatted(dateTimeString) {
+      return utils.prettyRelativeDateTime(dateTimeString, 'short')
+    },
+  }
+}
+</script>

src/components/PriceFooterRow.vue

@@ -2,10 +2,8 @@
   <v-row style="margin-top:0;">
     <v-col cols="11">
       <LocationChip v-if="!hidePriceLocation" class="mr-1" :location="price.location" :locationId="price.location_id" :readonly="readonly" />
-      <UserChip class="mr-1" :username="price.owner" :readonly="readonly" />
       <DateChip class="mr-1" :date="price.date" :readonly="readonly" />
       <ProofChip v-if="price.proof && !hidePriceProof" class="mr-1" :proof="price.proof" />
-      <RelativeDateTimeChip :dateTime="price.created" />
     </v-col>
   </v-row>
 
@@ -18,10 +16,8 @@ import { defineAsyncComponent } from 'vue'
 export default {
   components: {
     LocationChip: defineAsyncComponent(() => import('../components/LocationChip.vue')),
-    UserChip: defineAsyncComponent(() => import('../components/UserChip.vue')),
     DateChip: defineAsyncComponent(() => import('../components/DateChip.vue')),
     ProofChip: defineAsyncComponent(() => import('../components/ProofChip.vue')),
-    RelativeDateTimeChip: defineAsyncComponent(() => import('../components/RelativeDateTimeChip.vue')),
     PriceActionMenuButton: defineAsyncComponent(() => import('../components/PriceActionMenuButton.vue')),
   },
   props: {

src/i18n/locales/en.json

@@ -153,6 +153,7 @@
 		"FilterLocationWithPriceCountHide": "Hide locations with prices",
 		"FilterUserWithPriceCountHide": "Hide contributors with prices",
 		"Help": "Help",
+		"History": "History",
 		"Image": "Image",
 		"LinkCopySuccess": "Link copied",
 		"LocationCount": "{count} locations",

src/utils.js

@@ -110,6 +110,15 @@ function prettyDateTime(dateTimeString) {
   return new Intl.DateTimeFormat(navigator.language, {dateStyle: 'short', timeStyle: 'short'}).format(date)
 }
 
+/**
+ * input: '2023-12-25T17:08:19.021410+01:00'
+ * output: 'December 25, 2023, 8:19:02 CEST'
+ */
+function offDateTime(dateTimeString) {
+  const date = new Date(dateTimeString)
+  return new Intl.DateTimeFormat(navigator.language, {dateStyle: 'long', timeStyle: 'medium'}).format(date)
+}
+
 /**
  * https://johnresig.com/blog/javascript-pretty-date/
  * input: '2023-12-25T17:08:19.021410+01:00'
@@ -360,6 +369,7 @@ export default {
   currentDate,
   prettyDate,
   prettyDateTime,
+  offDateTime,
   prettyRelativeDateTime,
   dateType,
   getCategoryName,

src/views/PriceDetail.vue

@@ -4,6 +4,11 @@
       <PriceCard v-if="price" :price="price" :product="price.product" />
     </v-col>
   </v-row>
+  <v-row v-if="price">
+    <v-col cols="12" sm="6">
+      <HistoryCard :price="price" />
+    </v-col>
+  </v-row>
 </template>
 
 <script>
@@ -12,7 +17,8 @@ import api from '../services/api'
 
 export default {
   components: {
-    PriceCard: defineAsyncComponent(() => import('../components/PriceCard.vue'))
+    PriceCard: defineAsyncComponent(() => import('../components/PriceCard.vue')),
+    HistoryCard: defineAsyncComponent(() => import('../components/HistoryCard.vue')),
   },
   data() {
     return {
@@ -32,7 +38,7 @@ export default {
           this.price = data
           this.loading = false
         })
-    }
+    },
   }
 }
 </script>