From 20e439f31e87b9787341e6debd3689b5072518fe Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Mon, 17 Jun 2024 12:37:52 +0200
Subject: [PATCH] feat: ItemProposal difference column

---
 src/components/ui/VnStockValueDisplay.vue  | 35 ++++++++++++++++++++++
 src/filters/stockValue.js                  |  0
 src/pages/Item/components/ItemProposal.vue | 14 +++++++--
 src/pages/Item/locale/es.yml               |  7 +++--
 4 files changed, 50 insertions(+), 6 deletions(-)
 create mode 100644 src/components/ui/VnStockValueDisplay.vue
 create mode 100644 src/filters/stockValue.js

diff --git a/src/components/ui/VnStockValueDisplay.vue b/src/components/ui/VnStockValueDisplay.vue
new file mode 100644
index 000000000..ac64d4c39
--- /dev/null
+++ b/src/components/ui/VnStockValueDisplay.vue
@@ -0,0 +1,35 @@
+<!-- src/components/StockValueDisplay.vue -->
+<template>
+    <span :class="valueClass">
+        <QIcon :name="iconName" size="sm" class="value-icon" />
+        {{ formattedValue }}
+    </span>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import { useQuasar } from 'quasar';
+
+const props = defineProps({
+    value: {
+        type: Number,
+        required: true,
+    },
+});
+
+const valueClass = computed(() => (props.value > 0 ? 'positive' : 'negative'));
+const iconName = computed(() => (props.value > 0 ? 'arrow_upward' : 'arrow_downward'));
+const formattedValue = computed(() => props.value);
+</script>
+
+<style scoped>
+.positive {
+    color: green;
+}
+.negative {
+    color: red;
+}
+.value-icon {
+    margin-right: 4px;
+}
+</style>
diff --git a/src/filters/stockValue.js b/src/filters/stockValue.js
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/pages/Item/components/ItemProposal.vue b/src/pages/Item/components/ItemProposal.vue
index b220dc5d7..d326a7d98 100644
--- a/src/pages/Item/components/ItemProposal.vue
+++ b/src/pages/Item/components/ItemProposal.vue
@@ -6,6 +6,9 @@ import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
 import FetchedTags from 'components/ui/FetchedTags.vue';
 import { useSession } from 'src/composables/useSession';
 import VnLv from 'src/components/ui/VnLv.vue';
+import { toCurrency } from 'filters/index';
+import VnStockValueDisplay from 'src/components/ui/VnStockValueDisplay.vue';
+
 const MATCH_VALUES = [5, 6, 7, 8];
 const { t } = useI18n();
 const session = useSession();
@@ -70,7 +73,7 @@ const columns = computed(() => [
         ...defaultColumnAttrs,
         label: t('proposal.difference'),
         name: 'difference',
-        field: (item) => 21,
+        field: (item) => (item.id % 2 === 0 ? 10 : -10),
     },
     {
         ...defaultColumnAttrs,
@@ -301,9 +304,14 @@ async function confirm() {
                                         :class="[conditionalValuePrice(value)]"
                                     >
                                         <QTooltip>
-                                            {{ row.price2 }}/{{ currentTicket.price }}
+                                            {{ toCurrency(row.price2) }}
                                         </QTooltip>
-                                        {{ value }}
+                                        {{ toCurrency(row.price2) }}
+                                    </QTd>
+                                </template>
+                                <template #body-cell-difference="{ value }">
+                                    <QTd class="col" align="left">
+                                        <VnStockValueDisplay :value="value" />
                                     </QTd>
                                 </template>
                             </QTable>
diff --git a/src/pages/Item/locale/es.yml b/src/pages/Item/locale/es.yml
index aa09966a5..6e79a10b2 100644
--- a/src/pages/Item/locale/es.yml
+++ b/src/pages/Item/locale/es.yml
@@ -98,11 +98,12 @@ proposal:
     value6: value6
     value7: value7
     value8: value8
-    available: Dispnible
-    minQuantity: minQuantity
-    price2: price2
+    available: Disponible
+    minQuantity: Min. cantidad
+    price2: Precio
     located: Ubicado
     counter: Contador
+    difference: Diferencial
     groupingPrice: Precio Grouping
     itemOldPrice: Precio itemOld
     status: Estado