A small Vue.js app

Breaking up some methods to tidy up

I’ve written a Vue app that can store an array of objects containing text and tags input by the user. I call the objects “tiddlers”, in an analogy with TiddlyWiki, but they could also be notes or to-do items. Each tiddler is represented by a button in the UI, and when a tiddler’s button is clicked, its text and tags properties are displayed.

If an existing tiddler is selected, clicking “Submit” creates a new tiddler with a new timestamp, rather than applying any changes to the original tiddler.

Goal

The current submitTiddler() method (a) adds timestamp properties to the currentTiddler object and pushes it onto the tiddlers array, then (b) clears the properties of currentTiddler to reset the interface for entering a new tiddler.

That takes care of adding new tiddlers. I also want to add the capability to submit changes to an existing tiddler.

Rather than trying to stuff all that into submitTiddler(), I’m going to take a step back and make the code a bit more modular. For readability, and potential reusability, of the code, I’ll break these jobs into four methods:

• The functionality in (a) will move to a method called addTiddler().
• (b) will be done by a method called resetTiddler().
• A new method (updateTiddler()) will be added to handle the case where we want to edit an existing tiddler, and
• The new version of submitTiddler() will call addTiddler() or updateTiddler() as appropriate, followed by resetTiddler().

The updateTiddler() method will be referenced by submitTiddler(), but won’t exist until after the next installment.

Breakdown

1. Split the current functionality of submitTiddler() into two methods: addTiddler() and resetTiddler()
2. Rewrite submitTiddler() to invoke either addTiddler() or updateTiddler(), as appropriate, followed by resetTiddler()

1. Break out the addTiddler() functionality from submitTiddler()

The code that adds a new tiddler moves into a new method called addTiddler(). This method is what submitTiddler() used to be, minus clearing currentTiddler:

addTiddler() {
  this.currentTiddler.created = moment().utc().format('YYYYMMDDHHmmssSSS') // In TW, times are stored in UTC
  this.currentTiddler.utcOffset = moment().utcOffset()
  this.tiddlers.push(this.currentTiddler)
},

The code that empties currentTiddler goes into a new resetTiddler() method:

resetTiddler() {
  this.currentTiddler = JSON.parse(JSON.stringify(this.emptyTiddler))
},

2. Rewrite submitTiddler() to oversee everything

In preparation, I’ll declare a property, called editFlag, that can be used to indicate whether the tiddler displayed in the "tiddler-area" <div> is a new one or an existing one. It’s initialized to false and will be set to true when the selectTiddler() method is invoked.

data: {
  //...
  editFlag: false
  //...  
},

Tell selectTiddler() to set editFlag to true when invoked:

selectTiddler(tiddler) {
  this.currentTiddler = JSON.parse(JSON.stringify(tiddler))
  this.currentCreated = tiddler.created
  this.editFlag = true
},

Before I forget, since I’m setting currentCreated and editFlag with this, the resetTiddler() method needs to reset these along with currentTiddler:

resetTiddler() {
  this.currentTiddler = this.emptyTiddler
  this.currentCreated = undefined
  this.editFlag = false
},

With the prep out of the way, it’s time to redo submitTiddler() to call the other methods as appropriate:

submitTiddler(tiddler) {
  if (this.editFlag == true) {
    this.updateTiddler()
  } else {
    this.addTiddler()
  }
  this.resetTiddler()
},

Incidentally, I’ve now written the method that that unused “Clear” button needed, so I’ll add the event listener to the button to hook them up:

<button id="clear-tiddler" @click="resetTiddler">Clear</button>

Clicking “Clear” and then “Submit” adds a tiddler that consists of its created time and its utcOffset, with no text and no tags, which seems weird, but that’s not to say there’s no conceivable use for it.

The app is now a bit broken, because there’s no updateTiddler() method yet.

Here’s the current code: minapp_v11.js