Vue.js and Airtable’s Study Guide Template Pt 2

Fully Update Study Cards

In part 1 of this project I walked you through using Vue to work with an Airtable template – Study Guide.

If you haven’t gone through part 1, you should. I will avoid repeating myself here as much as possible, so it’s recommended you check it out for the full picture of what’s going on here.

One of the challenges from part 1 was to figure out a way to update the study card’s name and note content, and here’s what I came up with…

What You’ll Learn

I’ll show you how to use a single form for both creating new study cards and editing existing cards.

When I first started with Vue, I really wasn’t sure how to do this well, but I’m satisfied with what I came up with here.

Resources

Getting Started

  1. Download / clone / fork the repo, run NPM install.
  2. Change env.example.js to env.js and fill in your Airtable API key. Instructions on how to get your API key are in part 1.
  3. Open main.js and begin reading. Detail explanations below.

Updates from Part 1

  • steps to clear the form moved to their own function – clearForm(). It’s repeated code and fairly simple, so I preferred to have it abstracted out.
  • resetting the this.studyCards array moved to its own function. I find using a set… function like this helpful to keep track of how an important property is being changed.
  • PUT request has been changed to a PATCH request because I’ve been reading about the difference, and while I’m still confused a bit, I think PATCH is correct… maybe. More reading here.
  • editCard request has been moved to its own function since updating a card now has two paths – updating Memorized status only and updating Name and Notes properties.
  • shortened up the syntax used in my .filter()-ing of this.studyCards array.

Step 5-7 Updating Card Contents

This whole process begins with the user clicking the “EDIT” button in the view.

The goal here is to set the card’s contents into the form so we can edit the data.

Initializing the Form Values

Thanks to Vue’s reactivity, this is as easy as taking the properties from the selected card and resetting our data properties, this.name and this.note.

You also have to save the selected card’s id somewhere because we’ll need this in our PATCH request.

You have now set values for all necessary properties to update the card:

  • card ID
  • card name
  • card note

isEditing Flag

I used this flag to help trigger some UI updates like changing the Save button to a Save Changes button using v-show directive.

PATCHing the Card

Once we’re in ‘editing mode,’ the user has the opportunity to cancel the save and clear all the saved data, or update.

Step 8 Cancel the Edit

To cancel the edit you just have to reset the flag, clear all input values and then update the Material Design input field classes.

Using set…() to Track State Change

I’m not sure if this is common or not, but a convention I really like is to use a ‘setSomeProperty()’ function whenever I’m changing an important property regularly.

Professionally, I work on a very complex application using Angular. A lot of our older code has some very large and hard-to-follow controllers with state change happening all over the place. In an attempt to make the code more understandable, I started getting in the habit of setting important properties via a function. I find it easier to scan a file for ‘setSometProperty(data)’ instead of ‘ctrl.someProp =…’.

Further, some IDEs (like PhpStorm) will let you know if you’re passing in an incorrect data type. If my function doc block says that my param should be an {object} and I pass in an Array, I get a nice error letting me know of the mistake.

Perhaps that can help you, too.

Challenge

Using a single form for creating and editing study cards isn’t ideal.

I am fortunate enough to work with some really great UX people, and our experience has shown that it’s preferable to allow the user to click directly on a piece of text and edit it inline.

On a large screen, moving your mouse from the list to the form to make a change doesn’t look like a big deal, but this distance is UX killer on a mobile device.

So in part 3, I’m going to share my take on how we can allow a user to edit these inline.