30. Putting it all together

putting-it-all-together.md

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

Add click event to header button:

<button class="btn btn-outline-primary" @click="clickAddButton()">Add an item</button>

Add modal:

<% /* "Upload thing" modal */ %>
<modal v-if="uploadThingModalOpen" v-cloak key="new" @close="closeUploadThingModal()">
  <div class="modal-header">
    <h5 class="modal-title">Upload a new thing</h5>
    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
      <span>&times;</span>
    </button>
  </div>
  <ajax-form action="uploadThing" :syncing.sync="syncing" :cloud-error.sync="cloudError" :handle-parsing="handleParsingUploadThingForm" @submitted="submittedUploadThingForm($event)">
    <div class="modal-body">
      <div class="form-group">
        <label>Add a photo:</label>
        <div class="photo-uploader">
          <div class="photo-upload-field row d-flex align-items-center">
            <div class="col d-flex-column justify-content-center">
              <input type="file" :disabled="syncing" accept="image/*" class="file-input">
              <p class="image-advice text-muted" v-if="!formErrors.photo"><strong>Tip</strong>: Make sure the item is front and center in the photo, so people know exactly what you're offering to share.</p>
              <p class="image-advice text-danger" v-if="formErrors.photo">A photo is required in order to add a new item.</p>
            </div>
          </div>
        </div>
      </div>
      <div class="form-group" v-if="uploadFormData.photo">
        <label>What is it?</label>
        <input class="form-control" type="text" v-model="uploadFormData.label" placeholder="Waffle Iron">
      </div>
      <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="/support">contact support</a> if the error persists.</small></p>
    </div>
    <div class="modal-footer">
      <button data-dismiss="modal" class="btn btn-outline-primary mr-1">Cancel</button>
      <ajax-button type="submit" :syncing="syncing" class="btn btn-primary ml-1">Share item</ajax-button>
    </div>
  </ajax-form>
</modal>

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

In data:

uploadThingModalOpen: false,
uploadFormData: {
  label: ''
},
formErrors: {},

In methods:

clickAddButton: function() {
  this.uploadThingModalOpen = true;
},

_clearUploadThingModal: function() {
  // Close modal
  this.uploadThingModalOpen = false;
  // Reset form data
  this.uploadFormData = {
    label: ''
  };
  // Clear error states
  this.formErrors = {};
  this.cloudError = '';
},

closeUploadThingModal: function() {
  this._clearUploadThingModal();
},

handleParsingUploadThingForm: function() {
  // Clear out any pre-existing error messages.
  this.formErrors = {};

  var argins = this.uploadFormData;

  // TODO: validations

  // If there were any issues, they've already now been communicated to the user,
  // so simply return undefined.  (This signifies that the submission should be
  // cancelled.)
  if (Object.keys(this.formErrors).length > 0) {
    return;
  }

  return argins;
},

submittedUploadThingForm: function(result) {
  // TODO

  // Close the modal.
  this._clearUploadThingModal();
},