From eb8f595541f4f1e8be68236ed729b42da34fea90 Mon Sep 17 00:00:00 2001
From: James Cole <james@firefly-iii.org>
Date: Sun, 17 Jul 2022 08:51:53 +0200
Subject: [PATCH] Fix transaction lists.

---
 app/Transformers/V2/AccountTransformer.php    |   8 ++
 app/Transformers/V2/PreferenceTransformer.php |   8 ++
 .../V2/TransactionGroupTransformer.php        |   8 +-
 .../components/dashboard/TransactionList.vue  | 107 +++++++++++++-----
 4 files changed, 98 insertions(+), 33 deletions(-)

diff --git a/app/Transformers/V2/AccountTransformer.php b/app/Transformers/V2/AccountTransformer.php
index a9d017f143..39423fc264 100644
--- a/app/Transformers/V2/AccountTransformer.php
+++ b/app/Transformers/V2/AccountTransformer.php
@@ -23,6 +23,7 @@ declare(strict_types=1);
 namespace FireflyIII\Transformers\V2;
 
 use FireflyIII\Models\Account;
+use Illuminate\Support\Collection;
 
 /**
  * Class AccountTransformer
@@ -83,4 +84,11 @@ class AccountTransformer extends AbstractTransformer
         ];
     }
 
+    /**
+     * @inheritDoc
+     */
+    public function collectMetaData(Collection $objects): void
+    {
+        // TODO: Implement collectMetaData() method.
+    }
 }
diff --git a/app/Transformers/V2/PreferenceTransformer.php b/app/Transformers/V2/PreferenceTransformer.php
index 4a2fae8dfa..b9898bcd9c 100644
--- a/app/Transformers/V2/PreferenceTransformer.php
+++ b/app/Transformers/V2/PreferenceTransformer.php
@@ -24,6 +24,7 @@ declare(strict_types=1);
 namespace FireflyIII\Transformers\V2;
 
 use FireflyIII\Models\Preference;
+use Illuminate\Support\Collection;
 
 /**
  * Class PreferenceTransformer
@@ -49,4 +50,11 @@ class PreferenceTransformer extends AbstractTransformer
 
     }
 
+    /**
+     * @inheritDoc
+     */
+    public function collectMetaData(Collection $objects): void
+    {
+        // TODO: Implement collectMetaData() method.
+    }
 }
diff --git a/app/Transformers/V2/TransactionGroupTransformer.php b/app/Transformers/V2/TransactionGroupTransformer.php
index b2e3334d8a..90a91aef9a 100644
--- a/app/Transformers/V2/TransactionGroupTransformer.php
+++ b/app/Transformers/V2/TransactionGroupTransformer.php
@@ -89,13 +89,13 @@ class TransactionGroupTransformer extends AbstractTransformer
         $type                = $this->stringFromArray($transaction, 'transaction_type_type', TransactionType::WITHDRAWAL);
         $amount              = app('steam')->positive((string) ($transaction['amount'] ?? '0'));
         $foreignAmount       = null;
-        $foreignNativeAmount = null;
+        $nativeForeignAmount = null;
         if (null !== $transaction['foreign_amount']) {
             $foreignAmount       = app('steam')->positive($transaction['foreign_amount']);
-            $foreignNativeAmount = $foreignAmount;
+            $nativeForeignAmount = $foreignAmount;
             if ($transaction['foreign_currency_id'] !== $this->default->id) {
                 $rate                = $this->getRate($this->currencies[$transaction['foreign_currency_id']], $this->default, $transaction['date']);
-                $foreignNativeAmount = bcmul($foreignAmount, $rate);
+                $nativeForeignAmount = bcmul($foreignAmount, $rate);
             }
         }
 
@@ -137,7 +137,7 @@ class TransactionGroupTransformer extends AbstractTransformer
             'amount'                => $amount,
             'native_amount'         => $nativeAmount,
             'foreign_amount'        => $foreignAmount,
-            'foreign_native_amount' => $foreignNativeAmount,
+            'native_foreign_amount' => $nativeForeignAmount,
             'description'           => $transaction['description'],
             'source_id'             => (string) $transaction['source_account_id'],
             'source_name'           => $transaction['source_account_name'],
diff --git a/frontend/src/components/dashboard/TransactionList.vue b/frontend/src/components/dashboard/TransactionList.vue
index cdf077f6ed..c3c7de7552 100644
--- a/frontend/src/components/dashboard/TransactionList.vue
+++ b/frontend/src/components/dashboard/TransactionList.vue
@@ -27,37 +27,70 @@
         </q-item-section>
       </q-item>
       <q-separator/>
-          <q-markup-table>
-            <thead>
-            <tr>
-              <th class="text-left">Description</th>
-              <th class="text-right">Opposing account</th>
-              <th class="text-right">Amount</th>
-            </tr>
-            </thead>
-            <tbody>
-            <tr v-for="transaction in transactions">
-              <td class="text-left">
-                <router-link :to="{ name: 'transactions.show', params: {id: transaction.transactionGroupId} }">
-                <strong v-if="transaction.transactions.length > 1">
-                  {{ transaction.transactionGroupTitle }}<br />
-                </strong>
-                </router-link>
-                <span v-for="tr in transaction.transactions">
+      <q-markup-table>
+        <thead>
+        <tr>
+          <th class="text-left">Description</th>
+          <th class="text-right">Opposing account</th>
+          <th class="text-right">Amount</th>
+        </tr>
+        </thead>
+        <tbody>
+        <tr v-for="transaction in transactions">
+          <td class="text-left">
+            <router-link :to="{ name: 'transactions.show', params: {id: transaction.transactionGroupId} }">
+              <strong v-if="transaction.transactions.length > 1">
+                {{ transaction.transactionGroupTitle }}<br/>
+              </strong>
+            </router-link>
+            <span v-for="tr in transaction.transactions">
                   <span v-if="transaction.transactions.length > 1">
-                    {{tr.description}}
-                  <br />
+                    {{ tr.description }}
+                  <br/>
                   </span>
-                  <router-link :to="{ name: 'transactions.show', params: {id: transaction.transactionGroupId} }" v-if="transaction.transactions.length === 1">
-                    {{tr.description}}
+                  <router-link :to="{ name: 'transactions.show', params: {id: transaction.transactionGroupId} }"
+                               v-if="transaction.transactions.length === 1">
+                    {{ tr.description }}
                   </router-link>
                 </span>
-              </td>
-              <td class="text-right">159</td>
-              <td class="text-right">6</td>
-            </tr>
-            </tbody>
-          </q-markup-table>
+          </td>
+          <td class="text-right">
+            <!-- withdrawal -->
+            <!-- deposit -->
+            <!-- transfer -->
+            <!-- other -->
+            <span v-if="transaction.transactions.length > 1"><br></span>
+            <span v-for="tr in transaction.transactions">
+
+                      <router-link :to="{ name: 'accounts.show', params: {id: tr.destination_id} }">
+                      {{ tr.destination_name }}
+                    </router-link>
+              <br v-if="transaction.transactions.length > 1"/>
+                </span>
+          </td>
+          <td class="text-right">
+            <span v-if="transaction.transactions.length > 1"><br></span>
+            <!-- per transaction -->
+            <span v-for="tr in transaction.transactions">
+              <!-- simply show the amount -->
+              <span v-if="false === tr.native_currency_converted">{{ formatAmount(tr.currency_code, tr.amount) }}</span>
+
+              <!-- show amount with original in the title -->
+              <span v-if="true === tr.native_currency_converted" :title="formatAmount(tr.currency_code, tr.amount)">{{
+                  formatAmount(tr.native_currency_code, tr.native_amount)
+                }}</span>
+
+              <!-- show foreign amount if present and not converted (may lead to double amounts) -->
+              <span v-if="null !== tr.foreign_amount">
+                    <span v-if="false === tr.foreign_currency_converted"> ({{ formatAmount(tr.foreign_currency_code, tr.foreign_amount) }})</span>
+                    <span v-if="true === tr.foreign_currency_converted" :title="formatAmount(tr.foreign_currency_code, tr.foreign_amount)"> ({{ formatAmount(tr.native_currency_code, tr.native_foreign_amount) }})</span>
+              </span>
+            <br v-if="transaction.transactions.length > 1"/>
+            </span>
+          </td>
+        </tr>
+        </tbody>
+      </q-markup-table>
     </q-card>
   </div>
 </template>
@@ -118,6 +151,10 @@ export default {
           }).then((response) => this.parseTransactions(response.data));
       }
     },
+    // TODO this method is recycled a lot.
+    formatAmount: function (currencyCode, amount) {
+      return Intl.NumberFormat(this.store.getLocale, {style: 'currency', currency: currencyCode}).format(amount);
+    },
     parseTransactions: function (data) {
       for (let i in data.data) {
         if (data.data.hasOwnProperty(i)) {
@@ -133,11 +170,23 @@ export default {
               let iic = {
                 journalId: transaction.transaction_journal_id,
                 description: transaction.description,
-                amount: transaction.amount,
-                currency_code: transaction.currency_code,
                 destination_name: transaction.destination_name,
                 destination_id: transaction.destination_id,
                 type: transaction.type,
+
+                amount: transaction.amount,
+                native_amount: transaction.native_amount,
+
+                foreign_amount: transaction.foreign_amount,
+                native_foreign_amount: transaction.native_foreign_amount,
+
+                currency_code: transaction.currency_code,
+                native_currency_code: transaction.native_currency_code,
+
+                foreign_currency_code: transaction.foreign_currency_code,
+
+                native_currency_converted: transaction.native_currency_converted,
+                foreign_currency_converted: transaction.foreign_currency_converted,
               };
               ic.transactions.push(iic);
             }