38 lines
1.2 KiB
Vue
38 lines
1.2 KiB
Vue
|
<template>
|
||
|
|
<v-list-item :value="transactionItem.id">
|
||
|
|
<template v-slot:prepend>
|
||
|
|
<v-avatar color="grey-lighten-1">
|
||
|
|
<v-icon color="white">mdi-folder</v-icon>
|
||
|
|
</v-avatar>
|
||
|
|
</template>
|
||
|
|
<v-list-item-title>
|
||
|
|
{{transactionItem.category?.name}}
|
||
|
|
</v-list-item-title>
|
||
|
|
<v-list-item-subtitle>
|
||
|
|
{{formatDateTime}} · {{transactionItem.description}}
|
||
|
|
</v-list-item-subtitle>
|
||
|
|
<template v-slot:append>
|
||
|
|
<v-list-item-action class="flex-column align-end">
|
||
|
|
<span v-html="formatAmountString"></span>
|
||
|
|
</v-list-item-action>
|
||
|
|
</template>
|
||
|
|
</v-list-item>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script lang="ts" setup>
|
||
|
|
import {Transaction} from "@/models/transaction.ts"
|
||
|
|
import {computed } from 'vue'
|
||
|
|
import * as dayjs from 'dayjs'
|
||
|
|
import {CurrencyTypeToSymbol} from "@/utils/currency"
|
||
|
|
const props = defineProps<{
|
||
|
|
transactionItem: Transaction;
|
||
|
|
}>();
|
||
|
|
const formatDateTime = computed(() => {
|
||
|
|
let parsed = dayjs.unix(Number(props.transactionItem.time))
|
||
|
|
return parsed.format("HH:mm")
|
||
|
|
})
|
||
|
|
const formatAmountString = computed(() => {
|
||
|
|
return CurrencyTypeToSymbol(props.transactionItem.amount.currency)+props.transactionItem.amount.val||"0.00"
|
||
|
|
})
|
||
|
|
</script>
|