So, let’s start by adding Bulma and cleaning the code up a little.
That improves things quite a bit. Next, let’s add font awesome, a
sortBy variable, a
sortOrder variable, and the ability to toggle sorting by clicking on a table heading.
So, there are two issues now. It doesn’t make a lot of sense to sort by the street address and you can’t sort by the property type because it is actually three values (not just a singular string). So, let’s clean things up a bit.
That is probably enough for one week, so let’s update the test branch of the app on github. We have previously added Bulma / Beufy to Vue CLI app but haven’t added Font Awesome to one, yet. I might drill down on the topic in the future but until then, I would recommend the article “How to use Font Awesome 5 on VueJS Project” for further details. To see exactly what I did, you can check out the commits to the test branch but I ended up needing to tweak the template before Font Awesome was finally willing to behave.
Here is what the final result ended up looking like …
So, the test instance of the app now looks like this …
I think that the next step is to surface more information through park profile pages (something that I know that I promised at the end of last week’s post).
Have any questions, comments, etc? Feel free to drop a comment, below.