27. Modales

modals.md

Add to views/pages/things/available-things.ejs:

<% /* "Delete thing" modal */ %>
<modal v-if="confirmDeleteThingModalOpen && selectedThing" v-cloak key="delete" @close="closeDeleteThingModal()">
  <div class="modal-header">
    <h5 class="modal-title">Remove this item?</h5>
    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
      <span>&times;</span>
    </button>
  </div>
  <ajax-form action="destroyOneThing" :syncing.sync="syncing" :cloud-error.sync="cloudError" :handle-parsing="handleParsingDeleteThingForm" @submitted="submittedDeleteThingForm()">
    <div class="modal-body">
      <p>Are you sure you want to remove this {{selectedThing.label || 'item'}}?</p>
      <p>This item will no longer be available to share with friends.</p>
      <p class="text-danger" v-if="cloudError"><small>An error occured while processing your request. Please check your information and try again, or <a href="/contact">contact support</a> if the error persists.</small></p>
    </div>
    <div class="modal-footer">
      <button data-dismiss="modal" class="btn btn-outline-secondary mr-1">Nevermind</button>
      <ajax-button type="submit" :syncing="syncing" class="btn btn-danger ml-1">Remove</ajax-button>
    </div>
  </ajax-form>
</modal>

Add to assets/js/pages/things/available-things.page.js:

In data:

// For tracking client-side validation errors in our form.
// > Has property set to `true` for each invalid property in `formData`.
formErrors: { /* … */ },

// Syncing / loading state
syncing: false,

// Server error state
cloudError: '',

selectedThing: undefined,

In methods:

clickDeleteThing: function(thingId) {
  this.selectedThing = _.find(this.things, {id: thingId});

  // Open the modal.
  this.confirmDeleteThingModalOpen = true;
},

closeDeleteThingModal: function() {
  this.selectedThing = undefined;
  this.confirmDeleteThingModalOpen = false;
  this.cloudError = '';
},

handleParsingDeleteThingForm: function() {
  return {
    id: this.selectedThing.id
  };
},

submittedDeleteThingForm: function() {

  // Remove the thing from the list
  _.remove(this.things, {id: this.selectedThing.id});

  // Close the modal.
  this.selectedThing = undefined;
  this.confirmDeleteThingModalOpen = false;
},