162 lines
4.2 KiB
Vue
162 lines
4.2 KiB
Vue
<template>
|
|
<div class="account-transaction-list" v-if="account">
|
|
<div
|
|
class="field has-addons has-addons-centered is-narrow"
|
|
v-if="showFilter"
|
|
>
|
|
<div class="control" v-if="filteredBy">
|
|
<button type="submit" class="button" @click="filteredBy = ''">
|
|
<awe-icon icon="times" />
|
|
</button>
|
|
</div>
|
|
<div class="control">
|
|
<div class="select is-fullwidth">
|
|
<select v-model="filteredBy">
|
|
<option value>Tous</option>
|
|
<option
|
|
v-for="(user, k) in account.users"
|
|
:key="k"
|
|
:value="user.alias"
|
|
>{{ user.alias }}</option
|
|
>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="table-container">
|
|
<table class="table is-hoverable is-striped">
|
|
<thead v-if="head">
|
|
<tr>
|
|
<th scope="col">
|
|
<awe-icon icon="minus" />
|
|
</th>
|
|
<th scope="col" class="align">
|
|
<awe-icon icon="user" />
|
|
</th>
|
|
<th scope="col" class="align">
|
|
<awe-icon icon="money-bill-wave" />
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr
|
|
v-for="(transaction, k) in filteredTransactions"
|
|
:key="k"
|
|
:data-index="k"
|
|
:id="transaction._id"
|
|
>
|
|
<td class="multiline">
|
|
<router-link
|
|
:to="{ name: 'transaction', params: { id: transaction._id } }"
|
|
>{{ transaction.name }}</router-link
|
|
>
|
|
<br />
|
|
<span class="date">{{ transaction.date | date }}</span>
|
|
</td>
|
|
<td class="pay-by">{{ transaction.payBy }}</td>
|
|
<td class="numeric">
|
|
{{
|
|
transaction.amount
|
|
| moneypad(transaction.mainCurrency, hasMultipleCurrencies)
|
|
}}
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
<tfoot v-if="foot">
|
|
<tr
|
|
class="is-selected"
|
|
:style="{
|
|
'background-color': account.color,
|
|
color: findContrastColor(account.color)
|
|
}"
|
|
>
|
|
<td colspan="2" class="total">total</td>
|
|
<td class="numeric">
|
|
{{ total | moneypad(account.mainCurrency) }}
|
|
</td>
|
|
</tr>
|
|
</tfoot>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { Component, Prop, Vue } from 'vue-property-decorator'
|
|
import IAccount from '@/models/IAccount'
|
|
import ITransaction from '@/models/ITransaction'
|
|
import { findContrastColor } from '@/utils'
|
|
|
|
@Component
|
|
export default class AccountTransactionList extends Vue {
|
|
@Prop({ type: Object, default: () => null })
|
|
public account!: IAccount | null
|
|
@Prop({ type: Array, required: true })
|
|
public transactions!: ITransaction[]
|
|
@Prop({ type: Boolean, default: true })
|
|
public filter!: boolean
|
|
@Prop({ type: Boolean, default: true })
|
|
public head!: boolean
|
|
@Prop({ type: Boolean, default: false })
|
|
public foot!: boolean
|
|
public filteredBy: string = ''
|
|
public findContrastColor = findContrastColor
|
|
|
|
public get total(): number {
|
|
return this.transactions.reduce(
|
|
(a: number, transaction: ITransaction) => a + transaction.amount,
|
|
0
|
|
)
|
|
}
|
|
|
|
public get filteredTransactions(): ITransaction[] {
|
|
if (!this.filteredBy) {
|
|
return this.transactions
|
|
}
|
|
return this.transactions.filter(
|
|
(transaction: ITransaction) => transaction.payBy === this.filteredBy
|
|
)
|
|
}
|
|
|
|
public get isMultiUser(): boolean {
|
|
const payBy = new Set(
|
|
this.transactions.map((transaction: ITransaction) => transaction.payBy)
|
|
)
|
|
return payBy.size > 1
|
|
}
|
|
|
|
public get showFilter(): boolean {
|
|
return this.filter && this.isMultiUser
|
|
}
|
|
|
|
public get hasMultipleCurrencies(): boolean {
|
|
return (this.account && this.account.currencies.length > 1) || false
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.account-transaction-list {
|
|
margin: auto;
|
|
}
|
|
|
|
.table-container {
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.multiline {
|
|
line-height: 15px;
|
|
}
|
|
|
|
.date {
|
|
font-style: italic;
|
|
font-size: 14px;
|
|
}
|
|
|
|
th {
|
|
&.align {
|
|
text-align: center;
|
|
}
|
|
}
|
|
</style>
|