gradido/frontend/src/pages/Community.vue

<template>
  <div class="community-page">
    <div>
      <b-tabs v-model="tabIndex" content-class="mt-3" align="center">
        <b-tab :title="$t('community.writing')" active>
          <contribution-form @set-contribution="setContribution" v-bind="form" />
        </b-tab>
        <b-tab :title="$t('community.myContributions')">
          <contribution-list
            :items="items"
            @update-list-contributions="updateListContributions"
            @update-contribution="updateContribution"
            :contributionCount="contributionCount"
            :showPagination="true"
            :pageSize="pageSize"
          />
        </b-tab>
        <b-tab :title="$t('navigation.community')"></b-tab>
      </b-tabs>
    </div>
  </div>
</template>
<script>
import ContributionForm from '@/components/Contributions/ContributionForm.vue'
import ContributionList from '@/components/Contributions/ContributionList.vue'
import { createContribution } from '@/graphql/mutations'
import { listContributions, verifyLogin } from '@/graphql/queries'

export default {
  name: 'Community',
  components: {
    ContributionForm,
    ContributionList,
  },
  data() {
    return {
      tabIndex: 0,
      items: [],
      currentPage: 1,
      pageSize: 25,
      contributionCount: 0,
      form: {
        id: null,
        date: '',
        memo: '',
        amount: '',
      },
    }
  },
  methods: {
    setContribution(data) {
      // console.log('setContribution', data)
      this.$apollo
        .mutate({
          fetchPolicy: 'no-cache',
          mutation: createContribution,
          variables: {
            creationDate: data.date,
            memo: data.memo,
            amount: data.amount,
          },
        })
        .then((result) => {
          // console.log('result', result.data)
          this.toastSuccess(result.data)
          this.updateListContributions({
            currentPage: this.currentPage,
            pageSize: this.pageSize,
          })
          this.verifyLogin()
        })
        .catch((err) => {
          this.toastError(err.message)
        })
    },
    updateListContributions(pagination) {
      this.$apollo
        .query({
          fetchPolicy: 'no-cache',
          query: listContributions,
          variables: {
            currentPage: pagination.currentPage,
            pageSize: pagination.pageSize,
          },
        })
        .then((result) => {
          // console.log('result', result.data)
          const {
            data: { listContributions },
          } = result
          this.contributionCount = listContributions.length
          this.items = result.data.listContributions
          // this.toastSuccess(result.data)
        })
        .catch((err) => {
          this.toastError(err.message)
        })
    },
    verifyLogin() {
      this.$apollo
        .query({
          query: verifyLogin,
          fetchPolicy: 'network-only',
        })
        .then((result) => {
          const {
            data: { verifyLogin },
          } = result
          this.$store.dispatch('login', verifyLogin)
        })
        .catch(() => {
          this.$emit('logout')
        })
    },
    updateContribution(item) {
      this.tabIndex = 0
      this.form.date = item.createdAt
      this.form.memo = item.memo
      this.form.amount = item.amount
    },
    updateTransactions(pagination) {
      this.$emit('update-transactions', pagination)
    },
  },
  created() {
    this.updateListContributions({
      currentPage: this.currentPage,
      pageSize: this.pageSize,
    })
    this.updateTransactions(0)
  },
}
</script>