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:
...@click.right.prevent="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!
Top comments (0)