gradido/admin/src/pages/CreationConfirm.vue

<template>
  <div class="creation-confirm">
    <div v-show="overlay" id="overlay" class="">
      <b-jumbotron class="bg-light p-4">
        <template #header>{{ $t('overlay.confirm.title') }}</template>
        <template #lead>{{ $t('overlay.confirm.text') }}</template>
        <hr class="my-4" />
        <p>{{ $t('overlay.confirm.question') }}</p>
        <b-button size="md" variant="danger" class="m-3" @click="overlay = false">
          {{ $t('overlay.confirm.no') }}
        </b-button>
        <b-button size="md" variant="success" class="m-3 text-right" @click="confirmCreation">
          {{ $t('overlay.confirm.yes') }}
        </b-button>
      </b-jumbotron>
    </div>
    <open-creations-table
      class="mt-4"
      :items="pendingCreations"
      :fields="fields"
      @remove-creation="removeCreation"
      @show-overlay="showOverlay"
    />
  </div>
</template>
<script>
import OpenCreationsTable from '../components/Tables/OpenCreationsTable.vue'
import { getPendingCreations } from '../graphql/getPendingCreations'
import { deletePendingCreation } from '../graphql/deletePendingCreation'
import { confirmPendingCreation } from '../graphql/confirmPendingCreation'

export default {
  name: 'CreationConfirm',
  components: {
    OpenCreationsTable,
  },
  data() {
    return {
      pendingCreations: [],
      overlay: false,
      item: [],
    }
  },
  methods: {
    removeCreation(item) {
      this.$apollo
        .mutate({
          mutation: deletePendingCreation,
          variables: {
            id: item.id,
          },
        })
        .then((result) => {
          this.updatePendingCreations(item.id)
          this.$toasted.success(this.$t('creation_form.toasted_delete'))
        })
        .catch((error) => {
          this.$toasted.error(error.message)
        })
    },
    confirmCreation() {
      this.$apollo
        .mutate({
          mutation: confirmPendingCreation,
          variables: {
            id: this.item.id,
          },
        })
        .then((result) => {
          this.overlay = false
          this.updatePendingCreations(this.item.id)
          this.$toasted.success(this.$t('creation_form.toasted_created'))
        })
        .catch((error) => {
          this.overlay = false
          this.$toasted.error(error.message)
        })
    },
    getPendingCreations() {
      this.$apollo
        .query({
          query: getPendingCreations,
          fetchPolicy: 'network-only',
        })
        .then((result) => {
          this.$store.commit('resetOpenCreations')
          this.pendingCreations = result.data.getPendingCreations
          this.$store.commit('setOpenCreations', result.data.getPendingCreations.length)
        })
        .catch((error) => {
          this.$toasted.error(error.message)
        })
    },
    updatePendingCreations(id) {
      this.pendingCreations = this.pendingCreations.filter((obj) => obj.id !== id)
      this.$store.commit('openCreationsMinus', 1)
    },
    showOverlay(item) {
      this.overlay = true
      this.item = item
    },
  },
  computed: {
    fields() {
      return [
        { key: 'bookmark', label: this.$t('delete') },
        { key: 'email', label: this.$t('e_mail') },
        { key: 'firstName', label: this.$t('firstname') },
        { key: 'lastName', label: this.$t('lastname') },
        {
          key: 'amount',
          label: this.$t('creation'),
          formatter: (value) => {
            return value + ' GDD'
          },
        },
        { key: 'memo', label: this.$t('text') },
        {
          key: 'date',
          label: this.$t('date'),
          formatter: (value) => {
            return this.$d(new Date(value), 'short')
          },
        },
        { key: 'moderator', label: this.$t('moderator') },
        { key: 'edit_creation', label: this.$t('edit') },
        { key: 'confirm', label: this.$t('save') },
      ]
    },
  },
  async created() {
    await this.getPendingCreations()
  },
}
</script>
<style>
#overlay {
  position: fixed;
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding-left: 5%;
  background-color: rgba(12, 11, 11, 0.781);
  z-index: 1000000;
  cursor: pointer;
}
</style>