helios-web-vue/pages/desktop/transaction.vue

<template>
  <div style="min-height: 100%;">
    <NuxtLayout name="desktop">
      <template #app-bar-container>
        <v-app-bar-title>Transactions</v-app-bar-title>
      </template>
      <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">
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>