feat: transaction framework

components/TransactionListItem.vue

@@ -0,0 +1,37 @@
+<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}} &middot; {{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>