Build a track changes app in minutes

Goal

The goal of this app is to keep track of changes made by users to data in a table. In a list next to the table, we are going to show the previous value, updated value, and cell location of the data that was changed.

You can read along or code along with this post by creating Quasar project. All code used in the video will be at the bottom of this post. Let’s get right to it!

Implementation

This is a simple app consisting of one page (Index.vue) and two UI components (Table.vue and Trail.vue).

When you look at the Code section of this post, you will see 3 files with code. Here’s how it works:

The Index.vue page is mostly just displaying the two components and sharing data.

  • It has a listener on the Table component to listen for changes to the table.
  • Those changes are then stored in state using the “storeValues” method to push new items to the “values” list variable.
  • Since we are sharing data between components we need a mechanism for doing that. The most straight forward way for this app is to use “props”. So we pass the “values” list to the Trail.vue component using the “props” method. In a more complex app you may consider using Vuex to manage stores of data.

The Table.vue file is where most of the work is done.

  • This file contains a table which users can edit by clicking cells. I explained how to create this table in a previous post so feel free to check it out if you’re interested.
  • The key to tracking changes on this table is getting the previous and current value of the cell. We do that by using a template slot provided by Quasar which comes with all the information we need (code starts in row 15 of the file).
  • We also get the row number and column name from the “props” passed into the template for the body-cell. Quasar also provides the “props” data out-of-the-box.
  • Passing the data to the parent component is pretty easy now that we have all the information we need. We are creating an object with keys and values, then using a “storeInput” function which accepts the object and uses the “$emit” method to send that data to the parent (Index.vue).

In the Trail.vue file

  • We loop through the list and do a quick transformation on each value so we show numbers in a number format
  • Display each item on the browser

Code

Thank you for reading this post, hopefully it contained some useful ideas, code, or concepts for you to apply in your next projects. Give this post a clap and follow me for more useful information. Peace!

--

--

--

Hi! I am a CPA and self-taught developer who loves data, automation, and web development. Follow me for awesome information!

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

JavaScript

Your first ReasonML PR into an existing React Native Codebase

When to avoid and when to choose React native for mobile app development?

Making Your Own Musical Instruments with P5.js, Arduino, and WebMIDI

Rendering elements in React JS

Python Simple Weather Application With Modern GUI of Electron Js

pdftoppm : this underrated Linux tool

What is the WebAssembly (WASM)?

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
TheAccountemist

TheAccountemist

Hi! I am a CPA and self-taught developer who loves data, automation, and web development. Follow me for awesome information!

More from Medium

Build Landing Page With Tailwind CSS v3.0 Part 3 (Last Part) — Mobile

React NextJS Instagram stories UI with TailWind CSS Part 6

How to add React to a project with Tailwind CSS

Grid system | Bootstrap 3 & 4