feat: transaction framework

components/DesktopSideBar.vue

@@ -1,17 +1,16 @@
 <template>
-    <v-navigation-drawer expand-on-hover rail>
-        <v-list>
-            <v-list-item prepend-avatar="https://randomuser.me/api/portraits/women/85.jpg"
-                subtitle="sandra_a88@gmailcom" title="Sandra Adams"></v-list-item>
-        </v-list>
+  <v-navigation-drawer  class="pt-4" rail>
+    <v-list>
+      <v-list-item prepend-avatar="https://randomuser.me/api/portraits/women/85.jpg" subtitle="sandra_a88@gmailcom"
+        title="Sandra Adams"></v-list-item>
+    </v-list>
 
-        <v-divider></v-divider>
+    <v-divider></v-divider>
 
-        <v-list density="compact" nav>
-            <v-list-item prepend-icon="mdi-folder" title="My Files" value="myfiles"></v-list-item>
-            <v-list-item prepend-icon="mdi-account-multiple" title="Shared with me" value="shared"></v-list-item>
-            <v-list-item prepend-icon="mdi-star" title="Starred" value="starred"></v-list-item>
-        </v-list>
-    </v-navigation-drawer>
-
-</template>
+    <v-list density="compact" nav>
+      <v-list-item prepend-icon="mdi-folder" title="My Files" value="myfiles"></v-list-item>
+      <v-list-item prepend-icon="mdi-account-multiple" title="Shared with me" value="shared"></v-list-item>
+      <v-list-item prepend-icon="mdi-star" title="Starred" value="starred"></v-list-item>
+    </v-list>
+  </v-navigation-drawer>
+</template>

components/TransactionList.vue

@@ -1,7 +1,57 @@
 <template>
-  <v-list :items="items"></v-list>
+  <v-list rounded="lg" lines="two">
+    <TransactionListItem v-for="v in transactions" :transaction-item="v"/>
+  </v-list>
 </template>
 <script lang="ts" setup>
+let transactions = [
+{
+    "id": "20842",
+    "description": "aaa",
+    "category": {
+      "id": "10087241",
+      "name": "Category1",
+    },
+    "amount": {
+      "value": "135.33",
+      "currency": "CNY",
+    },
+    "time": "1738564519",
+    "tags": [
+      {
+        "id": "1742004",
+        "name": "t1",
+      },
+      {
+        "id": "1742932",
+        "name": "t3",
+      },
+    ],
+  },
+  {
+    "id": "20845",
+    "description": "bbb",
+    "category": {
+      "id": "10088823",
+      "name": "Category2",
+    },
+    "amount": {
+      "value": "77.99",
+      "currency": "CNY",
+    },
+    "time": "1738564519",
+    "tags": [
+      {
+        "id": "1742004",
+        "name": "t1",
+      },
+      {
+        "id": "1742932",
+        "name": "t3",
+      },
+    ],
+  }
+]
 let items = [
         { type: 'subheader', title: 'Group #1' },
         {

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>