Card per product

openfoodfacts · Dec 18, 2023 · 2dd9534 · 2dd9534
1 parent 80e8519
commit 2dd9534
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 11 deletions.
diff --git a/src/services/api.js b/src/services/api.js
@@ -91,8 +91,9 @@ export default {
     .then((response) => response.json())
   },
 
-  getPrices() {
-    return fetch(`${import.meta.env.VITE_OPEN_PRICES_API_URL}/prices`, {
+  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',

diff --git a/src/views/PriceList.vue b/src/views/PriceList.vue
@@ -1,13 +1,29 @@
 <template>
   <h1 class="mb-1">Last prices</h1>
 
-  <div class="d-flex flex-wrap ga-3">
-    <v-card v-for="p in prices" :key="p" elevation="1">
-      <v-card-title>{{ p.product_code }}</v-card-title>
-      <v-card-subtitle>{{ p.date }}</v-card-subtitle>
-      <v-card-text>{{ p.price }} {{ p.currency }}</v-card-text>
-    </v-card>
-  </div>
+  <v-row>
+    <v-col cols="12" sm="6" md="4" v-for="p in prices" :key="p">
+      <v-card elevation="1">
+        <v-card-item>
+          <template v-slot:prepend>
+            <v-avatar v-if="p.product" :image="p.product.image_url || defaultAvatar"></v-avatar>
+            <v-avatar v-if="!p.product" :image="defaultAvatar"></v-avatar>
+          </template>
+          <v-card-title v-if="p.product">{{ p.product.product_name }}</v-card-title>
+          <v-card-title v-if="!p.product">{{ p.product_code }}</v-card-title>
+          <v-card-subtitle v-if="p.product">{{ p.product.product_quantity }} · {{ p.product.brands }}</v-card-subtitle>
+        </v-card-item>
+        <v-card-text>
+          <span>{{ p.price }} {{ p.currency }}</span>
+          <span> · </span>
+          <span v-if="p.location">{{ p.location.osm_name }}, {{ p.location.osm_address_city }}</span>
+          <span v-if="!p.location">{{ p.location_id }}</span>
+          <span> · </span>
+          <span>{{ p.date }}</span>
+        </v-card-text>
+      </v-card>
+    </v-col>
+  </v-row>
 </template>
 
 <script>
@@ -16,15 +32,16 @@ import api from '../services/api'
 export default {
   data() {
     return {
-      prices: []
+      prices: [],
+      defaultAvatar: 'https://world.openfoodfacts.org/images/icons/dist/packaging.svg'
     }
   },
   mounted() {
     this.getPrices()
   },
   methods: {
     getPrices() {
-      return api.getPrices()
+      return api.getPrices({ order_by: '-date' })
         .then((data) => {
           this.prices = data.items
         })