49 lines
1.4 KiB
Vue
49 lines
1.4 KiB
Vue
<script setup lang="ts">
|
|
import dataLayout from '@/layouts/dataLayout.vue';
|
|
import { useAccountStore } from '@/stores/account.store';
|
|
import { useFeedbackStore } from '@/stores/feedback.store';
|
|
import paymentEditDialog from '@/components/organisms/paymentEditDialog.vue';
|
|
|
|
const accountStore = useAccountStore()
|
|
const feedbackStore = useFeedbackStore()
|
|
|
|
const headers = [
|
|
{ title: feedbackStore.i18n.t('account.userData.bankName'), value: "bankName" },
|
|
{ title: feedbackStore.i18n.t('account.userData.iban'), value: "iban" },
|
|
{ title: feedbackStore.i18n.t('account.userData.actions'), value: "actions", width: 130 }
|
|
]
|
|
|
|
accountStore.refreshAccount()
|
|
</script>
|
|
|
|
<template>
|
|
<data-layout
|
|
:add-button-string="$t('misc.actions.add')"
|
|
:fetch-in-progress="accountStore.fetchInProgress"
|
|
:on-add-click="() => { accountStore.newPayment() }"
|
|
>
|
|
<v-data-table
|
|
:headers="headers"
|
|
:items="accountStore.userAccount.payments"
|
|
:loading="accountStore.fetchInProgress"
|
|
>
|
|
<template #item.actions="{ item }">
|
|
<v-btn
|
|
icon="mdi-pencil"
|
|
variant="plain"
|
|
color="orange"
|
|
@click="accountStore.editPayment(item)"
|
|
/>
|
|
|
|
<v-btn
|
|
icon="mdi-delete"
|
|
variant="plain"
|
|
color="red"
|
|
@click="accountStore.removePayment(item)"
|
|
/>
|
|
</template>
|
|
</v-data-table>
|
|
</data-layout>
|
|
|
|
<payment-edit-dialog />
|
|
</template> |