wikijs/client/js/components/modal-delete-page.vue

<template lang="pug">
  transition(:duration="400")
    .modal(v-show='isShown', v-cloak)
      transition(name='modal-background')
        .modal-background(v-show='isShown')
      .modal-container
        transition(name='modal-content')
          .modal-content(v-show='isShown')
            header.is-red
              span {{ $t('modal.deletepagetitle') }}
              p.modal-notify(v-bind:class='{ "is-active": isLoading }'): i
            section
              span {{ $t('modal.deletepagewarning') }}
            footer
              a.button.is-grey.is-outlined(v-on:click='discard') {{ $t('modal.discard') }}
              a.button.is-red(v-on:click='deletePage') {{ $t('modal.delete') }}

</template>

<script>
export default {
  name: 'modal-delete-page',
  props: ['currentPath'],
  data () {
    return {
      isLoading: false
    }
  },
  computed: {
    isShown () {
      return this.$store.state.modalDeletePage.shown
    }
  },
  methods: {
    discard () {
      this.isLoading = false
      this.$store.dispatch('modalDeletePage/close')
    },
    deletePage () {
      let self = this
      this.isLoading = true
      this.$http.delete(window.location.href).then(resp => {
        return resp.json()
      }).then(resp => {
        if (resp.ok) {
          window.location.assign('/')
        } else {
          self.isLoading = false
          self.$store.dispatch('alert', {
            style: 'red',
            icon: 'ui-2_square-remove-09',
            msg: resp.msg
          })
        }
      }).catch(err => {
        self.isLoading = false
        self.$store.dispatch('alert', {
          style: 'red',
          icon: 'ui-2_square-remove-09',
          msg: 'Error: ' + err.body.msg
        })
      })
    }
  }
}
</script>