From 2dd9534ca2a0fee09042274ab13bda524d1067b6 Mon Sep 17 00:00:00 2001
From: Raphael Odini <raphodn@users.noreply.github.com>
Date: Mon, 18 Dec 2023 16:13:55 +0100
Subject: [PATCH] Card per product

---
 src/services/api.js     |  5 +++--
 src/views/PriceList.vue | 35 ++++++++++++++++++++++++++---------
 2 files changed, 29 insertions(+), 11 deletions(-)

diff --git a/src/services/api.js b/src/services/api.js
index 3b890096436..98af504d1e8 100644
--- 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
index e1e4d8a51fe..7e11ce2b772 100644
--- 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,7 +32,8 @@ import api from '../services/api'
 export default {
   data() {
     return {
-      prices: []
+      prices: [],
+      defaultAvatar: 'https://world.openfoodfacts.org/images/icons/dist/packaging.svg'
     }
   },
   mounted() {
@@ -24,7 +41,7 @@ export default {
   },
   methods: {
     getPrices() {
-      return api.getPrices()
+      return api.getPrices({ order_by: '-date' })
         .then((data) => {
           this.prices = data.items
         })