simple-kanban-guide.md

Simple Kanban Guide

Step 1

Let's go over what we're starting with.

• ready to go HTML template with Bootstrap 4
• ready to go Vue object with an already defined data method

The best thing to work on first is your data model. Let's break down the data method's return object.

• lastName will be bound to an input box representing a new lane's name
• lanes is an array of lane objects, each of which contain name of the lane, and the cards that form the lane, and some unique key
• each card has a name, desc, an editing flag, and some unique key

Step 2

How can you repeat (i.e. loop)? How do you bind text?

1. Let's wire up the lanes to each bootstrap .col that forms a lane.
2. Each lane has a set of cards, so let's wire up each lane to have a list of cards bound to the .card.
3. Finally, we need to bind text directly into the template. Add the card's name and description to the h4+p.

Step 3

How can you add events?

1. Let's add a value binding for laneName to a text input.
2. Add a click event listener to a button for adding a new lane.
3. Create a method for adding lanes
   • the created lane should have a unique key, a name, and a empty array of cards
   • the name should be the laneName
   • you can easily add elements to an array with array.push(element) or [...array, element]
4. Bind the h3 lane title to the name of the lane
5. (bonus) Give the lanes a sensible default name if no laneName is specified like (Lane 2, Lane 3, etc)

Code solution

    addLane() {
      let name = this.laneName !== '' ? this.laneName : `Lane ${this.lanes.length+1}`;
      const lane = {
        key: util.getKey(),
        name: name,
        cards: []
      };
      this.lanes = [...this.lanes, lane];
      this.laneName = '';
    },

Step 4

Adding new cards to lanes

1. Add a click event listener to the + button below the lane name
2. Add a method that adds new cards to the lane's cards list
   • the card should have a unique key, an empty name, and empty desc and a false editing flag
3. In the h4 card binding, add a default fallback to show "no name"

Code solution

    addBlankCard(currentLane) {
      const card = {
        key: util.getKey(),
        name: '',
        desc: '',
        editing: false
      };
      currentLane.cards.push(card);
    }, 

Making cards editable

1. If you see a style="display: none" in the edit mode section, remove that now
2. Add a click event listener to the h4 card name that sets card.editing to true
3. Bind the card name and card description inputs to card.name and card.desc respectively
4. Add a click event listener to the Save button that sets card.editing to false

Step 5

Let's work on getting cards to move through the lanes.

To move a card to another lane, you will need to know:

• the current cardIndex
• the current lane
• the current laneIndex
• the direction (left or right; represented by -1 or 1)
• the size of the lanes array (for bounds checking)

With that, you might figure you will need a method like moveCard(cardIndex, lane, laneIndex, leftOrRight).

That method might, for example, work like this:

1. Find the destination lane based on laneIndex + leftOrRight
2. Remove the current cardIndex from the current lane
3. Add the removed card to the destination lane
4. (bonus) Add bounds checking

Code solution

    moveCard(cardIndex, lane, laneIndex, lr) {
      const destinationIndex = laneIndex + lr;
      if (destinationIndex < 0 || destinationIndex >= this.lanes.length) { return; }
      const removedCard = lane.cards.splice(cardIndex, 1);
      const destinationLane = this.lanes[destinationIndex];
      destinationLane.cards.push(removedCard[0]);
    },

Bind the two .swap-button buttons to method calls of moveCard for their direction.

Step 6 (bonus)

This is a bonus step. Try enabling the Delete button in the card edit mode.