108 lines
2.6 KiB
Vue
108 lines
2.6 KiB
Vue
<template>
|
|
<div
|
|
class="account-card box"
|
|
:style="getColor(account.color)"
|
|
@click="goToAccount(account._id || '')"
|
|
>
|
|
<router-link
|
|
class="account-name"
|
|
:class="{ 'is-primary': !account.color, 'is-white': account.color }"
|
|
:style="`color: ${findDarkValue(account.color || '')}`"
|
|
:to="{ name: 'account', params: { id: account._id } }"
|
|
>{{ account.name }}</router-link>
|
|
<span v-if="account.isPublic">
|
|
|
|
<awe-icon icon="users" />
|
|
</span>
|
|
<div class="numeric">{{ totalCost | moneypad(account.mainCurrency, false) }}</div>
|
|
<div class="account-users">{{ account.users && account.users.map((u) => u.alias).join(', ') }}</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { Component, Prop, Vue } from 'vue-property-decorator'
|
|
import { findDarkValue, findLightValue } 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'
|
|
|
|
const GRADIENT = false
|
|
|
|
@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 findDarkValue(color: string): string | null {
|
|
return findDarkValue(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 {
|
|
background: GRADIENT
|
|
? `linear-gradient(135deg, ${color}, ${findLightValue(color)})`
|
|
: color,
|
|
color: findDarkValue(color)
|
|
}
|
|
}
|
|
|
|
private get totalCost(): number {
|
|
return transactionService.getTotalCost(
|
|
this.transactions,
|
|
this.account.mainCurrency.code
|
|
)
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@import '../styles/variables';
|
|
|
|
.account-name {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.box,
|
|
.box:not(:last-child) {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
border-radius: 8px;
|
|
word-wrap: break-word;
|
|
hyphens: auto;
|
|
margin-bottom: 0;
|
|
|
|
a {
|
|
font-size: 1.2rem;
|
|
color: $main;
|
|
}
|
|
&:hover {
|
|
cursor: pointer;
|
|
}
|
|
.account-users {
|
|
text-overflow: ellipsis;
|
|
}
|
|
}
|
|
</style>
|