Favorite notes

The last toolbar feature is the most complex. We want to reorder the note list with the favorite notes first. To do that, each note has a favorite Boolean property that will be toggled with a button. In addition to that, a star icon will be displayed in the note list to make it obvious which notes are favorite and which ones are not:

1. Start by adding another button to the toolbar before the Remove note ;button:

      <button @click="favoriteNote" title="Favorite note"><i        
      class="material-icons">{{ selectedNote.favorite ? 'star' :               
      'star_border' }}</i></button>

Once again, we use the v-on shorthand to call the favoriteNote method we will create next. We will also display an icon, depending on the value of the favorite property of the selected note--a full star if it is true, or an outlined one if it is not.

The final result will look like this:

On the left, there is a button for when the note is not favorite, and on the right, for when it is, after clicking on it.

1. Let's create a very simple favoriteNote method that only invert the value of the favorite ;Boolean property on the selected note:

      favoriteNote () {
        this.selectedNote.favorite = !this.selectedNote.favorite
      },

We can rewrite this with the XOR operator:

favoriteNote () {
  this.selectedNote.favorite = this.selectedNote.favorite ^ true
},

This can be nicely shortened, as follows:

favoriteNote () {
  this.selectedNote.favorite ^= true
},

Now, you should be able to toggle the favorite button, but it doesn't have any real effect yet.

We need to sort the note list in two ways--first, we sort all the notes by their creation date, then we sort them so that the favorite ones are put at the start. Thankfully, we have a very convenient standard array method for that--sort. It takes one argument, which is a function with two parameters--two items to be compared. The result is a number, as follows:

• 0, if the two items are in an equivalent position
• -1, if the first item should be before the second one
• 1, if the first item should be after the second one

You are not limited to the 1 number, since you can return any arbitrary number, positive or negative. For example, if you return -42, it will be the same as -1.

The first sorting operation will be achieved with this simple subtracting code:

sort((a, b) => a.created - b.created)

Here, we compare two notes on their creation date that we stored as a number of milliseconds, thanks to Date.now(). We just subtract them so that we get a negative number if b was created after a, or a positive number if a was created after b.

The second sort is done with two ternary operations:

sort((a, b) => (a.favorite === b.favorite)? 0 : a.favorite? -1 : 1)

If both notes are favorite, we don't change their position. If a is favorite, we return a negative number to put it before b. In the other case, we return a positive number, so b is put before a in the list.

The best way is to create a computed property called sortedNotes, which will get updated and cached automatically by Vue.

1. Create the new sortedNotes computed property:

      computed: {
        ...
 
        sortedNotes () {
          return this.notes.slice()
            .sort((a, b) => a.created - b.created)
            .sort((a, b) => (a.favorite === b.favorite)? 0
              : a.favorite? -1    
              : 1)
        },
      }

Since sort modifies the source array directly, we should create a copy of it with the slice method. This will prevent unwanted triggers of the notes watcher.

Now, we can simply swap notes with sortedNotes in the v-for directive used to display the list--it will now sort the notes automatically as we expected:

<p v-for="note of sortedNotes">

We can also use the v-if directive we introduced earlier to display a star icon only if the note is favorite:

<i class="icon material-icons" v-if="note.favorite">star</i>

1. Modify the note list with the preceding changes:

      <p class="notes">
        <p class="note" v-for="note of sortedNotes"
        :class="{selected: note === selectedNote}"
        @click="selectNote(note)">
          <i class="icon material-icons" v-if="note.favorite">
          star</i> 
          {{note.title}}
        </p>
      </p>

The app should now look as follows: