101 lines
2.4 KiB
Vue
101 lines
2.4 KiB
Vue
<template>
|
|
<div
|
|
class="account-card box"
|
|
:style="getColor(account.color)"
|
|
@click="goToAccount(account._id)"
|
|
>
|
|
<router-link
|
|
:class="{ 'is-primary': !account.color, 'is-white': account.color }"
|
|
:style="`color: ${findContrastColor(account.color)}`"
|
|
:to="{ name: 'account', params: { id: account._id } }"
|
|
>{{ account.name }}</router-link
|
|
>
|
|
<div v-if="account.isPublic">
|
|
<awe-icon icon="users" />
|
|
</div>
|
|
<div class="numeric">
|
|
{{ totalCost | moneypad(account.mainCurrency, false) }}
|
|
</div>
|
|
{{ account.users && account.users.map((u) => u.alias).join(', ') }}
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { Component, Prop, Vue } from 'vue-property-decorator'
|
|
import { findContrastColor, findDarkValue } from '@/utils'
|
|
import bus, { SYNC } from '@/utils/bus-event'
|
|
import accountService from '@/services/AccountService'
|
|
import IAccount from '@/models/IAccount'
|
|
import IColor from '@/models/IColor'
|
|
import FabButton from '@/components/FabButton.vue'
|
|
import ITransaction from '../models/ITransaction'
|
|
import transactionService from '../services/TransactionService'
|
|
import TransactionType from '../enums/TransactionType'
|
|
import colors from '../data/colors'
|
|
|
|
@Component
|
|
export default class AccountCard extends Vue {
|
|
@Prop({ type: Object, required: true })
|
|
public account!: IAccount
|
|
public transactions: ITransaction[] = []
|
|
|
|
public async mounted() {
|
|
this.transactions = await transactionService.getAllByAccountId(
|
|
this.account._id
|
|
)
|
|
}
|
|
|
|
public findContrastColor(color: string): string | null {
|
|
return findContrastColor(color)
|
|
}
|
|
|
|
public goToAccount(id: string): void {
|
|
this.$router.push({ name: 'account', params: { id } })
|
|
}
|
|
|
|
public getColor(color: string | null): any | null {
|
|
if (!color) {
|
|
return null
|
|
}
|
|
return {
|
|
backgroundColor: color,
|
|
color: this.findContrastColor(color)
|
|
}
|
|
}
|
|
|
|
private get totalCost(): number {
|
|
return transactionService.getTotalCost(
|
|
this.transactions,
|
|
this.account.mainCurrency.code
|
|
)
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@import '../styles/variables';
|
|
|
|
.ct-chart {
|
|
.ct-series-a {
|
|
.ct-bar {
|
|
stroke: blue;
|
|
stroke-width: 10px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.box {
|
|
border-radius: 8px;
|
|
word-wrap: break-word;
|
|
hyphens: auto;
|
|
|
|
a {
|
|
font-size: 1.2rem;
|
|
color: $main;
|
|
}
|
|
&:hover {
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
</style>
|