State management, modal dialog and simple spinner in VUE

This blog post is about how to use state management, spinner with conditions, and modal dialogs when saving data in VUE. How these works, we will explore along an implementation in the #BlueCloudMirror project. Maybe this can save you some time, if you plan to do the same.

Let’s start with my motivation, we want to improve our #BlueCloudMirror game UI. If you saved your scores data in the previous version, you were routed back to start game page. You received no information, if storing your data was successful in the highscores list.

In the new UI you can see the saving progress and you get confirmation when your data is saved, as you can see in the gif below.

To understand how this works in VUE, we need to touch the following topics:

• How to use state management
• How to use a modal dialog
• How to use conditions

We will use the Results.vue and State.ts source code files from the #BlueCloudMirror github project, to see how it works in the #BlueCloudMirror  game.

Now we go ahead, let’s understand what the implementation needs to do, for saving scores data.

• Pressing the save-scores button
• Showing the spinner during the saving progress
• Saving the data in the scores-service
• Hiding the spinner when the saving is done
• Showing a modal dialog for confirmation

In the following sequence diagram, we get a high-level overview: how the code works for these steps.

How to use state management

We need state management to show the spinner, when the saving in process. VUEX provides state management, for details examine the VUEX state guide.

The relevant files in the #BlueCloudMirror project are:

• Store.ts file, which does the state management
• Results.vue, which consumes the states to display the spinner.

To handle the states we use mutations in VUE. The behaviour of mutations are likely events, for more information please take a look into the VUE school.

The gif shows the state in the mutation.
Note: If you want to know how to configure VUE debug, just take a look into the cookbook debugging in vscode.

The starting point for using states is always setting an initialization. We put our initialization for the saving state into mounted of the Results.vue file, because during the instantiation of the results page, the code inside mounted will be executed. For more details about mounted please take a look into the Lifecycle-Diagram for VUE.

Inside the mutation the saving status is set to the value false using the commit(“setSavingStatus”, false) method of the VUE store.  Next you will see, the relevant code and a small sequence diagram of the initialization.

Here is the code from the Results.vue file,

mounted() {
    var gameResult = this.getDurationWithPenalties();
    this.$store.commit("setTotalTime", gameResult);
    this.$store commit("setSavingStatus", false);

and here is the sequence diagram.

Now we take a look into the code of the mutation implementation and the state definition inside the Store.ts  file.

mutations:{ setSavingStatus(state, payload) {
        state.saving.status = payload;
     }
     ...
state:{
     saving:{status:false}
     ...

With this code we can easily change the state inside the v-button event method and set the right value for the saving status in our VUE store. The simplified sequence diagram shows how this works inside the code. Remember the gif  you have seen before.

Inside the event method onSaveScore of the Results.vue file, we change the saving status to the correct value when it is needed.

methods:
...
onSaveScore () {
...
this.$store.commit("setSavingStatus", true);

axiosService
.post(this.$store.state.apis.scores.url, {
firstName: firstName,
lastName: lastName,
gameDate: this.$store.state.currentGame.id,
score: this.$store.state.currentGame.totalTimeWithPenalties
})
.then(function(response) {

that.$store.commit("setSavingStatus", false);

that.message = "Hello "+ firstName + ", your scores data is stored. Take a look in the highscore list.";
that.showModal();
})
.catch(function(error) {
console.log("error save scores",error);
...

How to use conditions in the VUE template

Now we know the saving state, it is time to display the spinner depending on the state. To do this, we need a  v-if condition which uses a computed property. The following code shows the definition of computed property in the Results.vue file.

Computed:
isSavingStatus: function(){
return this.$store.state.saving.status;
},

To control  the display of the spinner we use a v-if condition inside the template. Here you can see the relevant code in the Results.vue file, during the saving progress.

<template>
...
 v-if="isSavingStatus == true" 
 class="loader">
...
</template>

How to use a modal dialog

To show the confirmation for successfully saved data, we use a modal dialog in the Results.vue file. The layout of the dialog is defined in the template. To activate the dialog we are using methods.  For more details please take a look into modals of the VUE bootstrap documentation.
Here you can see the relevant code for the show and hide methods with the reference ID ‘modalDialog’ of our code in the template.

methods:{

...

showModal() {

this.$refs['modalDialog'].show();

},

hideModal() {

this.$refs['modalDialog'].hide();

},

...

<b-modal ref="modalDialog" hide-footer title="Information">

<div>

{{message}}
</div>

<b-btnclass="mt-3" @click="hideModal">Close</b-btn>
</b-modal>

methods:
...
onSaveScore () {
...
this.$store.commit("setSavingStatus", true);

axiosService
.post(this.$store.state.apis.scores.url, {
firstName: firstName,
lastName: lastName,
gameDate: this.$store.state.currentGame.id,
score: this.$store.state.currentGame.totalTimeWithPenalties
})
.then(function(response) {

that.$store.commit("setSavingStatus", false);

that.message = "Hello "+ firstName + ", your scores data is stored. Take a look in the highscore list.";
that.showModal();
})
.catch(function(error) {
console.log("error save scores",error);
...

This was all about usage of state management, spinner with condition, and modal dialog when saving data in VUE.

I hope this was useful for you and let’s see what’s next?

PS: By the way, you can use the IBM Cloud for free, if you simply create an IBM Lite account. Here you only need an e-mail address.