gradido/admin/src/components/CreationTransactionList.vue

<template>
  <div class="component-creation-transaction-list">
    <div class="h3">{{ $t('transactionlist.title') }}</div>
    <b-table striped hover :fields="fields" :items="items"></b-table>
    <div>
      <b-button v-b-toggle.collapse-1 variant="light" size="sm">Hilfe</b-button>
      <b-collapse id="collapse-1" class="mt-2">
        <div>{{ $t('transactionlist.submitted') }} {{ $t('math.equals') }} {{ $t('help.transactionlist.submitted') }}</div>
        <div>{{ $t('transactionlist.confirmed') }} {{ $t('math.equals') }} {{ $t('help.transactionlist.confirmed') }}</div>
      </b-collapse>
    </div>
  </div>
</template>
<script>
import { creationTransactionList } from '../graphql/creationTransactionList'
export default {
  name: 'CreationTransactionList',
  props: {
    userId: { type: Number, required: true },
  },
  data() {
    return {
      fields: [
        {
          key: 'creationDate',
          label: this.$t('transactionlist.submitted'),
          formatter: (value, key, item) => {
            return this.$d(new Date(value))
          },
        },
        {
          key: 'balanceDate',
          label: this.$t('transactionlist.confirmed'),
          formatter: (value, key, item) => {
            return this.$d(new Date(value))
          },
        },
        {
          key: 'amount',
          label: this.$t('transactionlist.amount'),
          formatter: (value, key, item) => {
            return `${value} GDD`
          },
        },
        {
          key: 'linkedUser',
          label: this.$t('transactionlist.community'),
          formatter: (value, key, item) => {
            return `${value.firstName} ${value.lastName}`
          },
        },
        { key: 'memo', label: this.$t('transactionlist.memo') },
      ],
      items: [],
    }
  },
  methods: {
    getTransactions() {
      this.$apollo
        .query({
          query: creationTransactionList,
          variables: {
            currentPage: 1,
            pageSize: 25,
            order: 'DESC',
            userId: parseInt(this.userId),
          },
        })
        .then((result) => {
          this.items = result.data.creationTransactionList
        })
        .catch((error) => {
          this.toastError(error.message)
        })
    },
  },
  created() {
    this.getTransactions()
  },
}
</script>