Creating my side-project in 2 weeks - day 4

Creating my side-project in 2 weeks

Fourth day: working on board

Custom right-click menu
I first added a custom right-click menu, which looks like this for the moment:

As you can see I've only implemented one action, creating cards. But first, let's see how I manage to create this right-click menu - and you will see, it's very easy.

First, I added a data property to the Board.vue component:

data() {
    return {
        menu: false,
        top: 0,
        left: 0,
    }
},

where menu is a boolean which depends if the user want to display the context menu or not. top and left are here to open the right-click menu at the position of the user's cursor.

Then I added these two events on the main Board.vue component:

[e-mail]="menu = true" @click.left.prevent="menu = false"...

As you can see, very basic stuff. And for top and left, just a simple @mousemove event which call a move method:

move(event) {
    if(!this.menu) {
        this.top = event.clientY;
        this.left = event.clientX;
    }
},

Then we just need to create the menu itself - a simple div hidden by default with the v-if property:

<div v-if="menu" class="menu" :style="'position: absolute; top: ' + this.top + 'px; left: ' + this.left + 'px;'">
    <p @click="addCard" class="menu-link"><i class="icon-plus"></i> Add a card</p>
    <p class="menu-link"><i class="icon-directions"></i> Another action</p>
    <p class="menu-link"><i class="icon-trophy"></i> Another action</p>
</div>

Handling the creation of a card
When a user click on the Add a card button, we need to create a new card which show at the location of the user's cursor. For this, I created a mutation in the store of Vuex, to simply push a card object to the array of cards. By doing this, this store is updating and because I fetch the cards list in a computed method, VueJS re-render all the cards with this updated list and voilà, adding a card is now finished!

...until I remember that I forgot to update the CardController to handle the requests when the new card is edited. So here is the logic:

$card = Card::where('id', request('id'))->first();

if($card) {
    // Updating the card
} else {
    // Creating a new card      
}

I fetch the card with the id of the request. If the card exist, I update it with the request's content - else I create the card. And here it is!