julien/vaquant
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

✨ (Account Card) Design Card

Browse Source
This commit is contained in:
Julien Calixte
2019-09-19 19:28:00 +02:00
parent b9e871e6e6
commit 6b1719987a
5 changed files with 169 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

83
src/views/transactions/TransactionItem.vue
View File

@@ -5,11 +5,21 @@
<ul>
<li>
<router-link
:to="{ name: 'account', params: { id: account._id }, hash: `#${transaction._id}` }"
>{{ account.name }}</router-link>
:to="{
name: 'account',
params: { id: account._id },
hash: `#${transaction._id}`
}"
>{{ account.name }}</router-link
>
</li>
<li class="is-active" v-if="transaction.tag && transaction.tag !== noTag">
<a href="#" @click.prevent>{{ transactionTagLabel[transaction.tag].label }}</a>
<li
class="is-active"
v-if="transaction.tag && transaction.tag !== noTag"
>
<a href="#" @click.prevent>{{
transactionTagLabel[transaction.tag].label
}}</a>
</li>
<li class="is-active">
<a href="#" @click.prevent>{{ transaction.name }}</a>
@@ -23,25 +33,32 @@
<span v-if="payForLabel.length > 1">{{ payForLabel.join(', ') }}</span>
<span v-else>{{ payForLabel[0] }}</span>
d'une somme de
<span
class="numeric"
>{{ transaction.amount | money(transaction.mainCurrency) }}</span>.
<span class="numeric">{{
transaction.amount | money(transaction.mainCurrency)
}}</span
>.
</div>
<div v-if="transaction.exchange" class="exchange">
<div v-if="currencies.length">
<hr />
<h2 class="subtitle is-2">Taux d'échange à date</h2>
<h2 class="subtitle is-2">Taux d'échange aujourd'hui</h2>
<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>
<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>
<td class="numeric">
{{
(transaction.amount *
transaction.exchange.rates[currency.code])
| moneypad(currency)
}}
</td>
</tr>
</tbody>
</table>
@@ -49,26 +66,40 @@
<div class="column">
<table class="table is-fullwidth is-striped is-bordered">
<caption>
<span class="numeric">{{ 1 | money(transaction.mainCurrency) }}</span>
<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>
<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>
<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>
<td class="numeric">
{{
(1 / transaction.exchange.rates[currency.code])
| moneypad(transaction.mainCurrency)
}}
</td>
</tr>
</tbody>
</table>
@@ -77,7 +108,8 @@
</div>
</div>
<div v-else>
<online-view @online="retrieveExchange" />Le taux d'échange n'a pas pu être récupéré.
<online-view @online="retrieveExchange" />Le taux d'échange n'a pas pu
être récupéré.
</div>
<div class="buttons is-centered" v-if="!account.archive">
<router-link
@@ -85,8 +117,11 @@
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>