From 438a4554682b49d019375b65066f01c419ba2fa5 Mon Sep 17 00:00:00 2001
From: Julien Calixte <julienc@bam.tech>
Date: Sat, 14 Mar 2020 11:31:20 +0100
Subject: [PATCH] :sparkles: (transaction) save location in transaction

---
 .env                                       |   3 +-
 src/components/TagList.vue                 |   2 +-
 src/components/TransactionCreate.vue       |   3 +-
 src/services/MapService.ts                 |   4 +-
 src/views/transactions/TransactionItem.vue | 198 ++++++++++++---------
 5 files changed, 116 insertions(+), 94 deletions(-)

diff --git a/.env b/.env
index ed064e5..bf7df5c 100644
--- a/.env
+++ b/.env
@@ -1 +1,2 @@
-VUE_APP_COUCHDB=https://couch.li212.fr
\ No newline at end of file
+VUE_APP_COUCHDB=https://couch.li212.fr
+VUE_APP_MAP_KEY=AnLDo_m_IGvMsQPLuBak9igWj3gNYvqBodj0esZZ7VfI1OkqVWvg04eTZ4U9R0Y2 
\ No newline at end of file
diff --git a/src/components/TagList.vue b/src/components/TagList.vue
index 96fc9ab..ca8bd2f 100644
--- a/src/components/TagList.vue
+++ b/src/components/TagList.vue
@@ -46,7 +46,7 @@
       <div
         v-for="(category, k) in filteredCategories"
         :key="k"
-        class="category-list-container column is-half"
+        class="category-list-container column is-one-third"
       >
         <div class="columns category-list">
           <div class="column is-2 tag-element account-color">
diff --git a/src/components/TransactionCreate.vue b/src/components/TransactionCreate.vue
index a0ff026..ed668cf 100644
--- a/src/components/TransactionCreate.vue
+++ b/src/components/TransactionCreate.vue
@@ -126,7 +126,7 @@
         </div>
         <transaction-tag-update v-model="tag" />
       </div>
-      <div class="column">
+      <div class="column" v-if="account.users.length > 1">
         <div class="field is-horizontal">
           <div class="field-label is-normal">
             <label class="label">Payé par</label>
@@ -290,6 +290,7 @@ export default class TransactionCreate extends Vue {
       mainCurrency: this.currency,
       currencies: this.account.currencies,
       transactionType: TransactionType.normal,
+      location: this.transaction.location,
       exchange: await exchangeService.get(this.currency.code, date, currencies)
     }
     const response: PouchDB.Core.Response = hasId
diff --git a/src/services/MapService.ts b/src/services/MapService.ts
index 7d4698e..6eeb9c6 100644
--- a/src/services/MapService.ts
+++ b/src/services/MapService.ts
@@ -23,9 +23,7 @@ class MapService {
   }
 
   private url(latitude: number, longitude: number) {
-    return `https://dev.virtualearth.net/REST/v1/Locations/${latitude},${longitude}?key=${
-      this.key
-    }`
+    return `https://dev.virtualearth.net/REST/v1/Locations/${latitude},${longitude}?key=${this.key}`
   }
 }
 
diff --git a/src/views/transactions/TransactionItem.vue b/src/views/transactions/TransactionItem.vue
index a1cb3b9..7197eaa 100644
--- a/src/views/transactions/TransactionItem.vue
+++ b/src/views/transactions/TransactionItem.vue
@@ -25,92 +25,96 @@
         </li>
       </ul>
     </nav>
-    <h3 class="subtitle is-3">{{ transaction.date | fulldate }}</h3>
-    <div class="resume">
-      Dépense payée par
-      <span class="pay-by">{{ transaction.payBy }}</span>
-      pour
-      <span>{{ payForLabel.join(', ') }}</span>
-      d'une somme de
-      <span class="numeric">{{
-        transaction.amount | money(transaction.mainCurrency)
-      }}</span
-      >.
-    </div>
-    <div v-if="transaction.exchange" class="exchange">
-      <div v-if="currencies.length">
-        <hr />
-        <h3 class="subtitle is-3">
-          Taux d'échange le {{ transaction.date | fulldate }}
-        </h3>
-        <div class="columns is-centered">
-          <div class="column">
-            <table class="table is-fullwidth is-striped is-bordered">
-              <caption>
-                <span class="numeric">{{
-                  transaction.amount | money(transaction.mainCurrency)
-                }}</span>
-              </caption>
-              <tbody>
-                <tr v-for="(currency, k) in currencies" :key="k">
-                  <td class="numeric">
-                    {{
-                      (transaction.amount *
-                        transaction.exchange.rates[currency.code])
-                        | moneypad(currency)
-                    }}
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-          </div>
-          <div class="column">
-            <table class="table is-fullwidth is-striped is-bordered">
-              <caption>
-                <span class="numeric">{{
-                  1 | money(transaction.mainCurrency)
-                }}</span>
-              </caption>
-              <tbody>
-                <tr v-for="(currency, k) in currencies" :key="k">
-                  <td class="numeric">
-                    {{
-                      transaction.exchange.rates[currency.code]
-                        | moneypad(currency)
-                    }}
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-          </div>
-          <div class="column">
-            <table
-              class="table is-hoverable is-fullwidth is-striped is-bordered"
-            >
-              <caption>
-                {{
-                  $tc('transaction.money', currencies.length)
-                }}
-              </caption>
-              <tbody>
-                <tr v-for="(currency, k) in currencies" :key="k">
-                  <td>{{ 1 | money(currency) }}</td>
-                  <td class="numeric">
-                    {{
-                      (1 / transaction.exchange.rates[currency.code])
-                        | moneypad(transaction.mainCurrency)
-                    }}
-                  </td>
-                </tr>
-              </tbody>
-            </table>
+    <div class="columns is-centered">
+      <div class="column is-half">
+        <h3 class="subtitle is-3">{{ transaction.date | fulldate }}</h3>
+        <div class="resume">
+          Dépense payée par
+          <span class="pay-by">{{ transaction.payBy }}</span>
+          <span v-if="!uniqueUser">
+            pour
+            <span class="pay-for">{{ payForLabel.join(', ') }}</span>
+          </span>
+          <span v-if="transaction.location">
+            à {{ transaction.location.place }}
+          </span>
+          d'une somme de
+          <span class="numeric">{{
+            transaction.amount | money(transaction.mainCurrency)
+          }}</span>
+          .
+        </div>
+      </div>
+      <div v-if="transaction.exchange">
+        <div v-if="currencies.length" class="exchange column is-half">
+          <h3 class="subtitle is-3">
+            Taux d'échange
+          </h3>
+          <div class="columns is-centered">
+            <div class="column">
+              <table class="table is-fullwidth is-striped is-bordered">
+                <caption>
+                  <span class="numeric">{{
+                    transaction.amount | money(transaction.mainCurrency)
+                  }}</span>
+                </caption>
+                <tbody>
+                  <tr v-for="(currency, k) in currencies" :key="k">
+                    <td class="numeric">
+                      {{
+                        (transaction && transaction.amount) ||
+                          (1 * getRate(currency.code)) | moneypad(currency)
+                      }}
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+            <div class="column">
+              <table class="table is-fullwidth is-striped is-bordered">
+                <caption>
+                  <span class="numeric">{{
+                    1 | money(transaction.mainCurrency)
+                  }}</span>
+                </caption>
+                <tbody>
+                  <tr v-for="(currency, k) in currencies" :key="k">
+                    <td class="numeric">
+                      {{ getRate(currency.code) | moneypad(currency) }}
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+            <div class="column">
+              <table
+                class="table is-hoverable is-fullwidth is-striped is-bordered"
+              >
+                <caption>
+                  {{
+                    $tc('transaction.money', currencies.length)
+                  }}
+                </caption>
+                <tbody>
+                  <tr v-for="(currency, k) in currencies" :key="k">
+                    <td>{{ 1 | money(currency) }}</td>
+                    <td class="numeric">
+                      {{
+                        (1 / getRate(currency.code))
+                          | moneypad(transaction && transaction.mainCurrency)
+                      }}
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
           </div>
         </div>
       </div>
-    </div>
-    <div v-else>
-      <online-view @online="retrieveExchange" />Le taux d'échange n'a pas pu
-      être récupéré.
+      <div v-else class="column is-half">
+        <online-view @online="retrieveExchange" />
+        Le taux d'échange n'a pas pu être récupéré.
+      </div>
     </div>
     <div class="buttons is-centered" v-if="account && !account.archive">
       <router-link
@@ -118,11 +122,12 @@
         tag="button"
         class="button"
         :to="{ name: 'transaction-update', params: { id } }"
-        >modifier</router-link
-      >
-      <confirm-button class="is-danger" @confirm="removeTransaction"
-        >supprimer</confirm-button
       >
+        modifier
+      </router-link>
+      <confirm-button class="is-danger" @confirm="removeTransaction">
+        supprimer
+      </confirm-button>
     </div>
   </div>
 </template>
@@ -227,6 +232,22 @@ export default class TransactionItem extends Vue {
     }
   }
 
+  public getRate(code: string) {
+    return (
+      (this.transaction &&
+        this.transaction.exchange &&
+        this.transaction.exchange.rates[code]) ||
+      1
+    )
+  }
+
+  public uniqueUser() {
+    if (!this.transaction) {
+      return false
+    }
+    return this.transaction.payBy === this.payForLabel.join(',')
+  }
+
   public get accountId(): string {
     return (this.transaction && this.transaction.accountId) || ''
   }
@@ -303,7 +324,8 @@ table.table {
 .buttons {
   margin-top: 15px;
 }
-.pay-by {
+.pay-by,
+.pay-for {
   font-weight: bold;
 }
 .numeric {