ConfirmModal.vue 1.18 KB
Newer Older
Anton's avatar
Anton committed
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50
<template lang="pug">
  q-modal(v-model="showModal", minimized)
    .bg-dark.q-pa-md.text-center
      | {{ msg }}
      .q-mt-md
        q-btn(color="red", @click="confirm") {{ label }}
        q-btn(color="faded", @click="cancel") {{ $t('buttons.cancel') }}
</template>

<script>
  export default {
    data () {
      return {
        showModal: false,
        message: undefined,
        confirmLabel: undefined
      }
    },
    methods: {
      show (message, payload = undefined, confirmLabel = undefined) {
        this.message = message
        this.payload = payload
        this.confirmLabel = confirmLabel
        this.showModal = true
      },
      clear () {
        this.showModal = false
        this.message = undefined
        this.confirmLabel = undefined
        this.payload = undefined
      },
      cancel () {
        this.$emit('cancel')
        this.clear()
      },
      confirm () {
        this.$emit('confirm', this.payload)
        this.clear()
      }
    },
    computed: {
      msg () {
        return this.$t(this.message)
      },
      label () {
        return this.confirmLabel ? this.$t(this.confirmLabel) : this.$t('buttons.confirm')
      }
    }
  }
</script>