feat: transaction framework

pages/desktop/transaction.vue

@@ -1,17 +1,96 @@
 <template>
-  <div>
+  <div style="min-height: 100%;">
     <NuxtLayout name="desktop">
       <template #app-bar-container>
         <v-app-bar-title>Transactions</v-app-bar-title>
       </template>
-      <v-card>
-        <transaction-list></transaction-list>
-      </v-card>
+      <v-row align="start">
+        <v-col md="8" lg="8" xl="8" xxl="8">
+          <v-sheet rounded="lg">
+            <v-list rounded="lg" lines="two">
+              <template v-for="grp in transactionList.transactionGroups">
+                <v-list-subheader>{{ grp.group_title }}</v-list-subheader>
+                <TransactionListItem v-for="v in grp.transactions" :transaction-item="v" />
+              </template>
+            </v-list>
+          </v-sheet>
+        </v-col>
+        <v-col>
+          <v-sheet rounded="lg">
+            <v-container>
+              <v-form>
+                <v-text-field v-model="name" label="Name" variant="outlined"></v-text-field>
+              </v-form>
+            </v-container>
+          </v-sheet>
+        </v-col>
+      </v-row>
     </NuxtLayout>
   </div>
 </template>
 <script setup lang="ts">
-definePageMeta({
+import { ref } from 'vue';
+import { Transaction, TransactionGroup } from '@/models/transaction';
 
+interface TransactionPageData {
+  transactionGroups: TransactionGroup[],
+}
+const transactionList = ref(
+  {
+    transactionGroups: [],
+    // filters
+  }
+)
+let transactionGrp: TransactionGroup = { transactions: [], group_title: "aabbccdd" };
+transactionGrp.transactions.push({
+  "id": "20842",
+  "description": "aaa",
+  "category": {
+    "id": "10087241",
+    "name": "Category1",
+  },
+  "amount": {
+    "val": "135.33",
+    "currency": "CNY",
+  },
+  "time": "1738564519",
+  "tags": [
+    {
+      "id": "1742004",
+      "name": "t1",
+    },
+    {
+      "id": "1742932",
+      "name": "t3",
+    },
+  ],
 })
+transactionList.value.transactionGroups.push(transactionGrp)
+
+let transactionGrp2: TransactionGroup = { transactions: [], group_title: "eeffgghh" };
+transactionGrp2.transactions.push({
+  "id": "898539",
+  "description": "bbb",
+  "category": {
+    "id": "10087241",
+    "name": "Category2",
+  },
+  "amount": {
+    "val": "67.00",
+    "currency": "CNY",
+  },
+  "time": "1738561205",
+  "tags": [
+    {
+      "id": "1742004",
+      "name": "t1",
+    },
+    {
+      "id": "1742932",
+      "name": "t3",
+    },
+  ],
+})
+transactionList.value.transactionGroups.push(transactionGrp2)
+
 </script>