45 lines
1.1 KiB
Vue
45 lines
1.1 KiB
Vue
<script setup lang="ts">
|
|
import { AccountApiClient, type Account } from '@/api/account'
|
|
import { useProfileStore } from '@/stores/profile-store'
|
|
import { onMounted, ref, type Ref } from 'vue'
|
|
|
|
const profileStore = useProfileStore()
|
|
|
|
const accounts: Ref<Account[]> = ref([])
|
|
|
|
onMounted(async () => {
|
|
if (!profileStore.state) {
|
|
console.warn('No profile is selected.')
|
|
return
|
|
}
|
|
|
|
const accountApi = new AccountApiClient(profileStore.state)
|
|
accountApi.getAccounts().then(result => accounts.value = result)
|
|
.catch(err => console.error(err))
|
|
})
|
|
</script>
|
|
<template>
|
|
<div class="app-module">
|
|
<h2>Accounts</h2>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Name</th>
|
|
<th>Currency</th>
|
|
<th>Number</th>
|
|
<th>Type</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-for="account in accounts" :key="account.id">
|
|
<td>{{ account.name }}</td>
|
|
<td>{{ account.currency }}</td>
|
|
<td>...{{ account.numberSuffix }}</td>
|
|
<td>{{ account.type }}</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</template>
|
|
<style lang="css"></style>
|