How to programmatically inject content in bootstrap-vue modal body and footer?

Question

I want to implement this functionality in vuejs app using bootstrap vue modal component:

When the user clicks on the Delete button on the page UI :

It shows the modal with a dynamic content in its body: "Are you sure you want to delete customer: customer_name_here"
If the user clicks on the 'Cancel' button: The modal goes away.
If the user clicks on the 'OK' button:
It changes the modal body content to: 'Deleting customer 'customer_name_here' ... , it disables the Cancel and OK buttons and it calls the API to delete the customer.

When successful response is received from the API:

It changes the modal body content to: 'Successfully deleted customer 'customer_name_here'
Display only the OK button in the modal footer, which if clicked modal goes away.

This the code so far:

 Delete

    
        Are you sure, you want to delete customer:
        {{customer.name}}

Vue JS code:

deleteCustomer(evt) {

      evt.preventDefault()
      this.$refs.modal.hide()

      CustomerApi.deleteCustomer(this.customer.id).then(response => {
          // successful response
        })

user_5665870 · Answer

If I understand correctly, you'd like to display the Modal content based on different state combinations.

As your descriptions, there should be 2 state:

deletingState: it indicates whether begin deleting
loadingState: it indicates whether is waiting the response from the server

Check Bootstrap Vue Modal Guide, then search keyword= Disabling built-in buttons, you will see we can use cancel-disabled and ok-disabled props to control the disable state of default Cancel and OK buttons (or you can use the slot=modal-footer, or modal-ok, modal-cancel.).

Other props you may use: ok-only, cancel-only, busy.

Finally bind v-if and props with the state combinations to show the content.

Like below demo:

Vue.config.productionTip = false
new Vue({
  el: '#app',
  data() {
    return {
      customer: {name: 'demo'},
      deletingState: false, // init=false, if pop up modal, change it to true
      loadingState: false // when waiting for server respond, it will be true, otherwise, false
    }
  },
  methods: {
    deleteCustomer: function() {
     this.deletingState = false
      this.loadingState = false
      this.$refs.myModalRef.show()
    },
    proceedReq: function (bvEvt) {
     if(!this.deletingState) {
        bvEvt.preventDefault() //if deletingState is false, doesn't close the modal
        this.deletingState = true
        this.loadingState = true
        setTimeout(()=>{
          console.log('simulate to wait for server respond...')
          this.loadingState = false
          this.deletingState = true
        }, 1500)
      } else {
       console.log('confirm to delete...')
      }
    },
    cancelReq: function () {
     console.log('cancelled')
    }
  }
})

.customer-name {
  background-color:green;
  font-weight:bold;
}











  Delete

  
    
      Are you sure, you want to delete customer:{{customer.name}}
    
    
      
        Deleting customer {{customer.name}}
      
      
        Successfully deleted customer {{customer.name}}

user_4716245 · Answer

You might prefer to use separate modals, the logic becomes a bit clearer and you can easily add more pathways, for example retry on API error.

console.clear()
const CustomerApi = {
  deleteCustomer: (id) => {
    return new Promise((resolve,reject) => {
      setTimeout(() => { 
        if (id !== 1) {
          reject(new Error('Delete has failed'))
        } else {
          resolve('Deleted')
        }
      }, 3000);
    });
  }
}
  
new Vue({
  el: '#app',
  data() {
    return {
      customer: {id: 1, name: 'myCustomer'},
      id: 1,
      error: null
    }
  },
  methods: {
    deleteCustomer(e) {
      e.preventDefault()

      this.$refs.modalDeleting.show()
      this.$refs.modalDelete.hide()

      CustomerApi.deleteCustomer(this.id)
        .then(response => {
          this.$refs.modalDeleting.hide()
          this.$refs.modalDeleted.show()
        })
        .catch(error => {
          this.error = error.message
          this.id = 1  // For demo, api success 2nd try
          this.$refs.modalError.show()
        })
    }
  }
})









Delete


Enter 2 to make it fail


  Are you sure, you want to delete customer: {{customer.name}}



  Deleting customer: {{customer.name}}



  Customer '{{customer.name}}' has been deleted


 
  An error occured deleting customer: {{customer.name}}
  Error message: {{error}}

user_5665870 · Answer

As we discussed in the comments, another solution is something like Quasar Stepper.

Design one component as the step (the name is b-step-modal in below demo),
then uses one modal-stepper (the name is b-stepper-modal in below demo) as the parent.
Then you just need to list out your all steps as the children of modal-stepper. If you'd like to disable the button or skip one step etc, you can use the step-hook (below demo provides step-begin and step-end) to implement the goal.

Like below rough demo:

Vue.config.productionTip = false

let bModal = Vue.component('BModal')

Vue.component('b-stepper-modal', {
  provide () {
    return {
      _stepper: this
    }
    },
    extends: bModal,
    render(h) {
    let _self = this
    return h(bModal, {props: _self.$props, ref: '_innerModal', on: {
        ok: function (bvEvt) {
        _self.currentStep++
        if(_self.currentStep < _self.steps.length) {
            bvEvt.preventDefault()
        }
      }
    }}, _self.$slots.default)
  },
  data() {
    return {
        steps: [],
      currentStep: 0
    }
  },
  methods: {
    _registerStep(step) {
        this.steps.push(step)
    },
    show () {
        this.$refs._innerModal.show()
    }
  }
})

Vue.component('b-step-modal', {
    inject: {
    _stepper: {
      default () {
        console.error('step must be child of stepper')
      }
        }
  },
  props: ['stepBegin', 'stepEnd'],
  data () {
    return {
        isActive: false,
      stepSeq: 0
    }
  },
  render(h) {
    return this.isActive ?  h('p', {}, this.$slots.default) : null
  },
  created () {
    this.$watch('_stepper.currentStep', function (newVal, oldVal) {
        if(oldVal) {
        if(typeof this.stepEnd === 'function') this.stepEnd()
      } else {
        if(typeof this.stepBegin === 'function') this.stepBegin()
      }
      this.isActive = (newVal === this.stepSeq)
    })
  },
  mounted () {
    this.stepSeq = this._stepper.steps.length
    this._stepper._registerStep(this)
    this.isActive = this._stepper.currentStep === this.stepSeq
  }
})

new Vue({
  el: '#app',
  data() {
    return {
      customer: {
        name: 'demo'
      },
      deletingState: false, // init=false, if pop up modal, change it to true
      loadingState: false // when waiting for server respond, it will be true, otherwise, false
    }
  },
  methods: {
    deleteCustomer: function() {
      this.deletingState = false
      this.loadingState = false
      this.$refs.myModalRef.show()
    },
    proceedReq: function(bvEvt) {
      if (!this.deletingState) {
        bvEvt.preventDefault() //if deletingState is false, doesn't close the modal
        this.deletingState = true
        this.loadingState = true
        setTimeout(() => {
          console.log('simulate to wait for server respond...')
          this.loadingState = false
          this.deletingState = true
        }, 1500)
      } else {
        console.log('confirm to delete...')
      }
    },
    cancelReq: function() {
      console.log('cancelled')
    },
    testStepBeginHandler: function () {
      this.deletingState = true
      this.loadingState = true
      setTimeout(() => {
        console.log('simulate to wait for server respond...')
        this.loadingState = false
        this.deletingState = true
      }, 1500)
    },
    testStepEndHandler: function () {
            console.log('step from show to hide')
    }
  }
})











  Delete

  
  
    
      Are you sure, you want to delete customer:{{customer.name}}
    
    
     
    
      
        Deleting customer {{customer.name}}
      
      
        Successfully deleted customer {{customer.name}}

user_4716245 · Answer

Here is a generic wrapper component for Bootstrap-vue modal that takes an array of states and navigates according to the nextState property. It makes use of computed properties to respond to the state changes.

In the parent, the array of states is also defined in a computed property so that we can add customer (or photo) properties to the messages.

Edit

Added content slots which allow the parent component to define the exact markup inside the modal content.

console.clear()

// Mock CustomerApi
const CustomerApi = {
  deleteCustomer: (id) => {
    console.log('id', id)
    return new Promise((resolve,reject) => {
      setTimeout(() => { 
        if (id !== 1) {
          reject(new Error('Delete has failed'))
        } else {
          resolve('Deleted')
        }
      }, 3000);
    });
  }
}

// Wrapper component to handle state changes
Vue.component('state-based-modal', {
  template: `
    
      

        
        
          
          {{message}}
        

      
    `,
  props: ['states', 'open'],  
  data: function () {
    return {
      current: 0,
      error: null
    }
  },
  methods: {
    handleOk(evt) {
      evt.preventDefault();
      // save currentState so we can switch display immediately
      const state = {...this.currentState}; 
      this.displayNextState(true);
      if (state.okButtonHandler) {
        state.okButtonHandler()
          .then(response => {
            this.error = null;
            this.displayNextState(true);
          })
          .catch(error => {
            this.error = error.message;
            this.displayNextState(false);
          })
      }
    },
    displayNextState(success) {
      const nextState = this.getNextState(success);
      if (nextState == -1) {
        this.$refs.innerModal.hide();
        this.hidden();
      } else {
        this.current = nextState;
      }
    },
    getNextState(success) {
      // nextState can be 
      //  - a string = always go to this state
      //  - an object with success or fail pathways
      const nextState = typeof this.currentState.nextState === 'string'
        ? this.currentState.nextState
        : success && this.currentState.nextState.onSuccess
          ? this.currentState.nextState.onSuccess
          : !success && this.currentState.nextState.onError
            ? this.currentState.nextState.onError
            : undefined;
      return this.states.findIndex(state => state.id === nextState);
    },
    hidden() {
      this.current = 0;     // Reset to initial state
      this.$emit('hidden'); // Inform parent component
    }
  },
  computed: {
    currentState() {
      const currentState = this.current;
      return this.states[currentState];
    },
    title() { 
      return this.currentState.title; 
    },
    message() {
      return this.currentState.message; 
    },
    okDisabled() {
      return !!this.currentState.okDisabled;
    },
    cancelDisabled() {
      return !!this.currentState.cancelDisabled;
    },
    busy() {
      return !!this.currentState.busy;
    },
    okTitle() {
      return this.currentState.okTitle;
    },
    otherAttributes() {
      const otherAttributes = this.currentState.otherAttributes || [];
      return otherAttributes
        .reduce((obj, v) => { obj[v] = null; return obj; }, {})
    },
  },
  watch: {
    open: function(value) {
      if (value) {
        this.$refs.innerModal.show();
      } 
    }
  }
})

// Parent component
new Vue({
  el: '#app',
  data() {
    return {
      customer: {id: 1, name: 'myCustomer'},
      idToDelete: 1,
      openModal: false
    }
  },
  methods: {
    deleteCustomer(id) {
      // Return the Promise and let wrapper component handle result/error
      return CustomerApi.deleteCustomer(id)  
    },
    modalIsHidden(event) {
      this.openModal = false;  // Reset to start condition
    }
  },
  computed: {
    avatar() {
      return `https://robohash.org/${this.customer.name}?set=set4`
    },
    modalStates() {
      return [
        { 
          id: 'delete', 
          title: 'Delete Customer', 
          message: `delete customer: ${this.customer.name}`,
          okButtonHandler: () => this.deleteCustomer(this.idToDelete),
          nextState: 'deleting',
          otherAttributes: ['centered no-close-on-backdrop close-on-esc']
        },
        { 
          id: 'deleting', 
          title: 'Deleting Customer',
          message: `Deleting customer: ${this.customer.name}`,
          okDisabled: true,
          cancelDisabled: true,
          nextState: { onSuccess: 'deleted', onError: 'error' },
          otherAttributes: ['no-close-on-esc'],
          contentHeight: '250px'
        },
        { 
          id: 'deleted', 
          title: 'Customer Deleted', 
          message: `Deleting customer: ${this.customer.name}`,
          cancelDisabled: true,
          nextState: '',
          otherAttributes: ['close-on-esc']
        },
        { 
          id: 'error', 
          title: 'Error Deleting Customer', 
          message: `Error deleting customer: ${this.customer.name}`,
          okTitle: 'Retry',
          okButtonHandler: () => this.deleteCustomer(1),
          nextState: 'deleting',
          otherAttributes: ['close-on-esc']
        },
      ];
    }
  }
})









Delete


Enter 2 to make it fail

How to programmatically inject content in bootstrap-vue modal body and footer?

4 Answers