refactor(Date detail): new DateCard component (#714)

openfoodfacts · Aug 17, 2024 · 48c83f6 · 48c83f6
1 parent ddef561
commit 48c83f6
Show file tree

Hide file tree

Showing 5 changed files with 94 additions and 49 deletions.
diff --git a/src/components/DateCard.vue b/src/components/DateCard.vue
@@ -0,0 +1,56 @@
+<template>
+  <v-card :title="date" prepend-icon="mdi-calendar-today" data-name="date-card">
+    <v-card-text>
+      <PriceCountChip :count="priceCount" :withLabel="true" />
+      <v-chip
+        v-for="dp in dateParentList"
+        :key="dp.name"
+        label size="small" density="comfortable" class="mr-1" @click="$router.push(dp.path)"
+      >
+        {{ dp.name }}
+      </v-chip>
+    </v-card-text>
+  </v-card>
+</template>
+
+<script>
+import { defineAsyncComponent } from 'vue'
+import constants from '../constants'
+import utils from '../utils.js'
+
+export default {
+  components: {
+    PriceCountChip: defineAsyncComponent(() => import('../components/PriceCountChip.vue')),
+  },
+  props: {
+    date: {
+      type: String,
+      default: null
+    },
+    priceCount: {
+      type: Number,
+      default: 0
+    }
+  },
+  computed: {
+    dateType() {
+      return utils.dateType(this.date)
+    },
+    dateParentList() {
+      let dateParentList = []
+      if (this.dateType === 'DAY') {
+        const matches = this.date.match(constants.DATE_FULL_REGEX_MATCH)
+        const year = matches[1]
+        const month = `${year}-${matches[2]}`
+        dateParentList.push({ name: month, path: `/dates/${month}` })
+        dateParentList.push({ name: year, path: `/dates/${year}` })
+      } else if (this.dateType === 'MONTH') {
+        const matches = this.date.match(constants.DATE_YEAR_MONTH_REGEX_MATCH)
+        const year = matches[1]
+        dateParentList.push({ name: year, path: `/dates/${year}` })
+      }
+      return dateParentList
+    },
+  }
+}
+</script>
diff --git a/src/components/PriceCountChip.vue b/src/components/PriceCountChip.vue
@@ -1,7 +1,7 @@
 <template>
   <v-chip label size="small" density="comfortable" :color="getColor()" class="mr-1">
     <v-icon start icon="mdi-tag-outline" />
-    <span v-if="withLabel">{{ $t('PriceCountChip.PriceCount', { count: count }) }}</span>
+    <span v-if="withLabel" id="price-count">{{ $t('PriceCountChip.PriceCount', { count: count }) }}</span>
     <span v-else id="price-count">{{ count }}</span>
   </v-chip>
 </template>

diff --git a/src/utils.js b/src/utils.js
@@ -1,5 +1,6 @@
 import CategoryTags from './data/category-tags.json'
 import CountriesWithEmoji from './data/countries-with-emoji.json'
+import constants from './constants'
 
 
 function isNumber(value) {
@@ -119,6 +120,26 @@ function prettyRelativeDateTime(dateTimeString, size=null) {
   diff < 60 && "just now" || diff < 120 && "1 minute ago" || diff < 3600 && Math.floor(diff / 60) + " minutes ago" || diff < 7200 && "1 hour ago" || diff < 86400 && Math.floor(diff / 3600) + " hours ago") || day_diff == 1 && "Yesterday" || day_diff < 10 && day_diff + " days ago" || Math.ceil(day_diff / 7) + " weeks ago";
 }
 
+function dateType(dateString) {
+  if (dateString) {
+    if (dateString.match(constants.DATE_FULL_REGEX_MATCH)) {
+      return 'DAY'
+    } else {
+      // YYYY-MM
+      const matches = dateString.match(constants.DATE_YEAR_MONTH_REGEX_MATCH)
+      if (matches) {
+        return 'MONTH'
+      // YYYY
+      } else if (dateString.match(constants.DATE_YEAR_REGEX_MATCH)) {
+        return 'YEAR'
+      } else {
+        return null
+      }
+    }
+  }
+  return null
+}
+
 function getCategoryName(categoryId) {
   let category = CategoryTags.find(ct => ct.id === categoryId)
   return category ? category.name : categoryId
@@ -317,6 +338,7 @@ export default {
   prettyDate,
   prettyDateTime,
   prettyRelativeDateTime,
+  dateType,
   getCategoryName,
   getLocaleCategoryTags,
   getLocaleCategoryTag,

diff --git a/src/views/DateDetail.vue b/src/views/DateDetail.vue
@@ -1,21 +1,7 @@
 <template>
   <v-row>
     <v-col cols="12" sm="6">
-      <v-card
-        :title="date"
-        prepend-icon="mdi-calendar-today"
-      >
-        <v-card-text>
-          <PriceCountChip :count="datePriceTotal" :withLabel="true" />
-          <v-chip
-            v-for="dp in dateParentList"
-            :key="dp.name"
-            label size="small" density="comfortable" class="mr-1" @click="$router.push(dp.path)"
-          >
-            {{ dp.name }}
-          </v-chip>
-        </v-card-text>
-      </v-card>
+      <DateCard :date="date" :priceCount="datePriceTotal" />
     </v-col>
   </v-row>
 
@@ -56,10 +42,11 @@
 import { defineAsyncComponent } from 'vue'
 import api from '../services/api'
 import constants from '../constants'
+import utils from '../utils.js'
 
 export default {
   components: {
-    PriceCountChip: defineAsyncComponent(() => import('../components/PriceCountChip.vue')),
+    DateCard: defineAsyncComponent(() => import('../components/DateCard.vue')),
     OrderMenu: defineAsyncComponent(() => import('../components/OrderMenu.vue')),
     PriceCard: defineAsyncComponent(() => import('../components/PriceCard.vue')),
     ShareLink: defineAsyncComponent(() => import('../components/ShareLink.vue'))
@@ -78,38 +65,7 @@ export default {
   },
   computed: {
     dateType() {
-      if (this.date) {
-        if (this.date.match(constants.DATE_FULL_REGEX_MATCH)) {
-          return 'DAY'
-        } else {
-          // YYYY-MM
-          const matches = this.date.match(constants.DATE_YEAR_MONTH_REGEX_MATCH)
-          if (matches) {
-            return 'MONTH'
-          // YYYY
-          } else if (this.date.match(constants.DATE_YEAR_REGEX_MATCH)) {
-            return 'YEAR'
-          } else {
-            return null
-          }
-        }
-      }
-      return null
-    },
-    dateParentList() {
-      let dateParentList = []
-      if (this.dateType === 'DAY') {
-        const matches = this.date.match(constants.DATE_FULL_REGEX_MATCH)
-        const year = matches[1]
-        const month = `${year}-${matches[2]}`
-        dateParentList.push({ name: month, path: `/dates/${month}` })
-        dateParentList.push({ name: year, path: `/dates/${year}` })
-      } else if (this.dateType === 'MONTH') {
-        const matches = this.date.match(constants.DATE_YEAR_MONTH_REGEX_MATCH)
-        const year = matches[1]
-        dateParentList.push({ name: year, path: `/dates/${year}` })
-      }
-      return dateParentList
+      return utils.dateType(this.date)
     },
     getPricesParams() {
       let defaultParams = { order_by: this.currentOrder, page: this.datePricePage }

diff --git a/tests/e2e/spec.cy.js b/tests/e2e/spec.cy.js
@@ -11,6 +11,7 @@ describe('Basic tests', () => {
     cy.intercept('GET', 'http://127.0.0.1:8000/api/v1/prices?app_name=Open+Prices+Web+App&page=1&size=10&order_by=-date&product_code=3011360030498', { fixture: 'product_3011360030498_prices.json' })
     cy.intercept('GET', 'http://127.0.0.1:8000/api/v1/prices?app_name=Open+Prices+Web+App&page=1&size=10&order_by=-date&category_tag=en%3Apitted-apricot', { fixture: 'pitted_apricot_prices.json' })
     cy.intercept('GET', 'http://127.0.0.1:8000/api/v1/prices?app_name=Open+Prices+Web+App&page=1&size=10&order_by=-date&category_tag=en%3Aaaaaaaaaaaaa', { body: {"items":[],"total":0,"page":1,"size":10,"pages":0} })
+    cy.intercept('GET', 'http://127.0.0.1:8000/api/v1/prices?app_name=Open+Prices+Web+App&page=1&size=10&order_by=-date&date=2024-01-31', { body: {"items":[],"total":0,"page":1,"size":10,"pages":0} })
   })
 
   it('loads the home page', () => {
@@ -109,6 +110,16 @@ describe('Basic tests', () => {
     cy.contains('Load more').should('not.exist')
   })
 
+  it('displays a date page', () => {
+    cy.visit('/dates/2024-01-31')
+    cy.contains('Welcome to Open Prices!').should('not.exist')
+    cy.get('[data-name="date-card"]').should('have.length', 1)
+    cy.get('#price-count').contains('0')
+    cy.contains('Latest prices')
+    cy.get('[data-name="price-card"]').should('have.length', 0)
+    cy.contains('Load more').should('not.exist')
+  })
+
   it('displays the search page', () => {
     cy.visit('/search?q=3011360030498')
     cy.contains('Welcome to Open Prices!').should('not.exist')