Ocelot-Social/webapp/components/ReleaseModal/ReleaseModal.vue

<template>
  <ds-modal :title="title" :is-open="isOpen" @cancel="cancel">
    <!-- eslint-disable-next-line vue/no-v-html -->
    <p v-html="message" />

    <template slot="footer">
      <ds-button class="cancel" @click="cancel">{{ $t('release.cancel') }}</ds-button>

      <ds-button danger class="confirm" icon="exclamation-circle" @click="confirm">
        {{ $t('release.submit') }}
      </ds-button>
    </template>
  </ds-modal>
</template>

<script>
import gql from 'graphql-tag'

export default {
  props: {
    name: { type: String, default: '' },
    type: { type: String, required: true },
    id: { type: String, required: true },
  },
  data() {
    return {
      isOpen: true,
      success: false,
      loading: false,
    }
  },
  computed: {
    title() {
      return this.$t(`release.${this.type}.title`)
    },
    message() {
      const name = this.$filters.truncate(this.name, 30)
      return this.$t(`release.${this.type}.message`, { name })
    },
  },
  methods: {
    cancel() {
      this.isOpen = false
      setTimeout(() => {
        this.$emit('close')
      }, 1000)
    },
    async confirm() {
      try {
        await this.$apollo.mutate({
          mutation: gql`
            mutation($id: ID!) {
              enable(id: $id)
            }
          `,
          variables: { id: this.id },
        })
        this.$toast.success(this.$t('release.success'))
        this.isOpen = false
        /*
        setTimeout(() => {
          location.reload()
        }, 1500)
        */
        setTimeout(() => {
          this.$emit('close')
        }, 1000)
        setTimeout(() => {
          location.reload()
        }, 250)
      } catch (err) {
        this.$toast.error(err.message)
      }
    },
  },
}
</script>