Creating my side-project in 2 weeks

Third day: improving cards

Here is the third day of this series, let's begin now!

Auto-updating cards
When a card is moved or his title is changed, we need to send a request through the API to update it in the database. But how to know when I need to update the card ? Here are the points for the moment:

• When the card title is edited
• When the card content is edited
• After the card was moved

So let's jump to it. I first added a update data to the Card.vue, and set it to false by default. Then for the input of the title and the textarea of the content, I choose to use the event @blur which is activated when the user leave the field, to then set the update value to true. And which event choose when I move the card ? I used the @mouseup which is rather explicit.

With this, the request is always not sent, but I now know when I need to update the card. So in the mounted method, I added a setInterval which run every 0.5s to check if we need to send the request:

mounted() {
    setInterval(() => {

        if(this.update) {

            this.update = false; // Set back 'update' value to false

            // ... Perform the request
        }
    }, 500); // Run the task every 0.5 seconds
}

And with this, when I edit the title/content/move the card, I can see that a request is sent...

...and the update data goes back to false:

Now I just need to update the card's data in the controller, and return back a JSON with the key success, which can be true or false.

Icon pack
I choose to switch from FontAwesome to Simple Line Icons which - I think - looks really better, simply because it's simpler and thiner - even if there are not as many icons as FontAwesome has. Here is the result on the dashboard sidebar:

Dev environment
I also setup a dev environment where you can test the - very basic - card sustem. Here ares the credentials for the test account:

• Email: test@gmail.com
• Password: testtest

You can login here if you want to test it.

Infortunnately I don’t got the time to create the custom right-click menu, so it will be for tomorrow, with I think the options to create/delete cards and even change the color. Hope you liked this episode, see you tomorrow!