refactor(Date detail): improve price page for a given month & year

src/constants.js

@@ -53,6 +53,9 @@ export default {
     { key: '-date', value: 'OrderPriceDateDESC', icon: 'mdi-calendar-today' },
     { key: '-created', value: 'OrderPriceCreatedDESC', icon: 'mdi-clock-outline' },
   ],
+  DATE_FULL_REGEX_MATCH: /(\d{4})-(\d{2})-(\d{2})/,
+  DATE_YEAR_MONTH_REGEX_MATCH: /(\d{4})-(\d{2})/,
+  DATE_YEAR_REGEX_MATCH: /(\d{4})/,
   OSM_NAME: 'OpenStreetMap',
   OSM_URL: 'https://www.openstreetmap.org',
   OSM_NOMINATIM_SEARCH_URL: 'https://nominatim.openstreetmap.org/search',

src/views/DateDetail.vue

@@ -50,6 +50,7 @@
 <script>
 import { defineAsyncComponent } from 'vue'
 import api from '../services/api'
+import constants from '../constants'
 
 export default {
   components: {
@@ -66,6 +67,26 @@ export default {
       loading: false,
     }
   },
+  computed: {
+    getPricesParams() {
+      let defaultParams = { page: this.datePricePage }
+      // YYYY-MM-DD
+      if (this.date.match(constants.DATE_FULL_REGEX_MATCH)) {
+        defaultParams['date'] = this.date
+      } else {
+        // YYYY-MM
+        const matches = this.date.match(constants.DATE_YEAR_MONTH_REGEX_MATCH)
+        if (matches) {
+          defaultParams['date__year'] = matches[1]
+          defaultParams['date__month'] = matches[2]
+        // YYYY
+        } else if (this.date.match(constants.DATE_YEAR_REGEX_MATCH)) {
+          defaultParams['date__year'] = this.date
+        }
+      }
+      return defaultParams
+    },
+  },
   watch: {
     $route (newDate, oldDate) {
       if (oldDate && newDate && newDate.name == 'date-detail' && oldDate.fullPath != newDate.fullPath) {
@@ -87,7 +108,7 @@ export default {
     getDatePrices() {
       this.loading = true
       this.datePricePage += 1
-      return api.getPrices({ date: this.date, page: this.datePricePage })
+      return api.getPrices(this.getPricesParams)
         .then((data) => {
           this.datePriceList.push(...data.items)
           this.datePriceTotal = data.total