domBudg/front/src/components/pages/Home.vue

<script setup lang="ts">
import { useAsyncState } from '@vueuse/core';
import ChangeRecordMenu from '../support/ChangeRecordManager.vue';
import { ChangeRecordService } from '../../core/services/change-record-service';
import { inject } from 'vue';
import { ChangeRecordViewModel } from '../../core/api/data-contracts';

const changeRecordService = inject(ChangeRecordService.name) as ChangeRecordService;

const { state, isReady } = useAsyncState(() => changeRecordService.getList(), []);
const columns = [
    {
        title: 'Дата',
        dataIndex: 'changedAt',
        key: 'changedAt',
    },
    {
        title: 'Сумма',
        dataIndex: 'sum',
        key: 'sum',
    },
    {
        title: 'Группа расходов',
        dataIndex: 'spendingGroupName',
        key: 'spendingGroupName',
    }
]

const refreshData = () => {
    changeRecordService.getList().then(data => {
        state.value = data;
        isReady.value = true;
    });
}
</script>

<template>
    <ChangeRecordMenu :refreshData="refreshData" />
    <a-table :dataSource="state" :columns="columns" v-if="isReady" />
    <div v-else>
        <a-spin size="large" />
    </div>
</template>

<style scoped>

</style>