Exercise 6: Final Adjustments

Here come the final adjustments (prove what you have learned).

You have learned about data-binding, conditionals & loops, components, routing, & the vuex store. Now you are ready to take the final adjustment for getting an awesome working kanban board in Vue.

Now have fun with this tutorial! 😏🖳

Setup: Keep up & running

# download branch (make sure you are one level above vueTut)
git clone -b origin/exercise/05_knowledge_transfer https://github.com/na018/vue_basics_tut.git vueTut/05_knowledge_transfer && cd vueTut/05_knowledge_transfer


#prerequisite: node.js is installed
node -v                                      #returns for example v8.2.1

# install dependencies
npm i

#start the json mock server (if it's not running already)
node server.js

# run the application (should open a browser window automatically)
npm start

---

ToDo

in src/store/modules/kanbancards.js:

1. |KB-9| define status type (e.g. status: ['inProgress', 'done'...])

   used in 'src/components/kanBanComponents/KanBanColumn.vue' defining the columns,

   in 'src/components/kanBanComponents/KanBanCard.vue' defining the card view & in 'src/store/modules/kanbancards.js' receiveAllCards() for Ordering the cards by status

2. |KB-9| implement getStatus getter returning the status possibilities of the kanban column & card status types (e.g. inProgress, done)

In src/components/pages/KanBanBoard.vue:

3. |KB-9| create 'm-kan-ban-column' for each status defined in the vuex store 'src/store/modules/kanbancards.js

---

Result (finshed application 🎉)

---

Project Architecture

---

Team

Nadin-Katrin Apel, Alex Schübl, David Bochan

Professor: Prof. Dr. Fridtjof Toenniessen

Further Suggestions

(Awesome that you kept reading til down here)

If you made it till here, you hopefully have a working kanban board now. 😏🎉 -

Prove your result here Finished KanBan Board