feat: simple list of last added prices (#26)

* Basic list with last prices

* Create PriceCard

* compute price per kg

src/components/PriceCard.vue

@@ -0,0 +1,50 @@
+<template>
+  <v-card>
+    <v-card-item>
+      <template v-slot:prepend>
+        <v-avatar rounded="0">
+          <v-img v-if="price.product && price.product.image_url" :src="price.product.image_url"></v-img>
+          <v-img v-if="!price.product || !price.product.image_url" :src="defaultAvatar" style="filter:invert(.9);"></v-img>
+        </v-avatar>
+      </template>
+
+      <v-card-title v-if="price.product && price.product.product_name">{{ price.product.product_name }}</v-card-title>
+      <v-card-title v-if="!price.product || !price.product.product_name">{{ price.product_code }}</v-card-title>
+
+      <v-card-subtitle v-if="price.product">
+        <span v-if="price.product.brands">{{ price.product.brands }}</span>
+        <span v-if="price.product.brands && price.product.product_quantity"> · </span>
+        <span v-if="price.product.product_quantity">{{ price.product.product_quantity }} g</span>
+      </v-card-subtitle>
+      <v-card-subtitle v-if="!price.product"></v-card-subtitle>
+    </v-card-item>
+
+    <v-card-text>
+      <span>{{ price.price }} €</span>
+      <span v-if="price.price && price.product && price.product.product_quantity"> ({{  getPricePerKilo(price) }})</span>
+      <span> · </span>
+      <span v-if="price.location">{{ price.location.osm_name }}, {{ price.location.osm_address_city }}</span>
+      <span v-if="!price.location">{{ price.location_id }}</span>
+      <span> · </span>
+      <span>{{ price.date }}</span>
+    </v-card-text>
+  </v-card>
+</template>
+
+<script>
+export default {
+  props: ['price'],
+  data() {
+    return {
+      defaultAvatar: 'https://world.openfoodfacts.org/images/icons/dist/packaging.svg'
+    }
+  },
+  methods: {
+    getPricePerKilo(price) {
+      let pricePerKilo = (price.price / price.product.product_quantity) * 1000
+      let pricePerKiloRounded = Math.round(pricePerKilo * 100) / 100
+      return `${pricePerKiloRounded} € / kg`
+    }
+  }
+}
+</script>

src/routes.js

@@ -2,6 +2,7 @@ import Home from './views/Home.vue'
 import SignIn from './views/SignIn.vue'
 import AddPriceHome from './views/AddPriceHome.vue'
 import AddPriceSingle from './views/AddPriceSingle.vue'
+import PriceList from './views/PriceList.vue'
 import NotFound from './views/NotFound.vue'
 
 /** @type {import('vue-router').RouterOptions['routes']} */
@@ -10,5 +11,6 @@ export let routes = [
   { path: '/sign-in', name: 'sign-in', component: SignIn, meta: { title: 'Sign in', icon: 'mdi-login', drawerMenu: true, requiresAuth: false } },
   { path: '/add', name: 'add-price', component: AddPriceHome, meta: { title: 'Add a price', icon: 'mdi-plus', drawerMenu: true, requiresAuth: true }},
   { path: '/add/single', name: 'add-price-single', component: AddPriceSingle, meta: { title: 'Add a single price', requiresAuth: true }},
+  { path: '/prices', name: 'prices', component: PriceList, meta: { title: 'Last prices', icon: 'mdi-tag-multiple-outline', drawerMenu: true }},
   { path: '/:path(.*)', component: NotFound },
 ]

src/services/api.js

@@ -91,6 +91,18 @@ export default {
     .then((response) => response.json())
   },
 
+  getPrices(params = {}) {
+    const url = `${import.meta.env.VITE_OPEN_PRICES_API_URL}/prices?${new URLSearchParams(params)}`
+    return fetch(url, {
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/json',
+        'Authorization': `Bearer ${this.getToken()}`
+      },
+    })
+    .then((response) => response.json())
+  },
+
   openstreetmapNominatimSearch(q) {
     return fetch(`https://nominatim.openstreetmap.org/search?q=${q}&format=json&limit=5`, {
       method: 'GET',

src/views/PriceList.vue

@@ -0,0 +1,36 @@
+<template>
+  <h1 class="mb-1">Last prices</h1>
+
+  <v-row>
+    <v-col cols="12" sm="6" md="4" v-for="price in prices" :key="price">
+      <PriceCard :price="price" elevation="1" height="100%"></PriceCard>
+    </v-col>
+  </v-row>
+</template>
+
+<script>
+import api from '../services/api'
+import PriceCard from '../components/PriceCard.vue'
+
+export default {
+  components: {
+    PriceCard,
+  },
+  data() {
+    return {
+      prices: [],
+    }
+  },
+  mounted() {
+    this.getPrices()
+  },
+  methods: {
+    getPrices() {
+      return api.getPrices({ order_by: '-date' })
+        .then((data) => {
+          this.prices = data.items
+        })
+    }
+  }
+}
+</script>