This challenge requires a strong knowledge of: Javascript, PHP, Vuex and Laravel. It also requires basic knowledge of: Vue, CSS and SCSS.
Estimated completion time is around 4 hours although you may take as long as you need.
We have received feedback from our users on the new Task Management product (TM Tool) we have been working on. The TM Tool aims to provide Project Managers a way to more efficiently manage their team’s daily tasks compared to using Excel or other tracking tools. It is important that our product supports our clients Kanban style of working and we can the product to match functionality available in our competitors’ products, like Jira and Trello.
Our Product Team have identified the most important features that should be worked on, based on user and business needs. They have formulated 6 small user stories with the scrum team, which are to be built next. A Mock-up of the idea is shown here:
As a Project Manager I can see all my team’s Tasks on a Kanban board So that my team knows which tasks need to be done and its status
Acceptance Criteria
- As a Project manager I can view all Tasks that have been created on a Kanban Style board
- There are 3 separate columns on the board, which represent the following Task Statuses: a. To Do b. In Progress c. Done
- Tasks should appear in the correct column based on their Status *(e.g.> , ‘To Do’ Tasks appear in the ‘To Do’ column)
- I can access this board from another machine (after a refresh) to see the up-to-date state of the board.
As a Project Manager I can update the status of a Task by dragging-and-dropping it between status columns. so that I can quickly update the status in a visual way
Acceptance Criteria
- As a Project Manager, I can interact with a Task in any column of the Kanban board and drag-and-drop this into any of the other columns on the Kanban board.
- I can abandon this movement by dropping the Task back to its original position on the Kanban board
As a Project Manager I can edit the description details of a Task so that I can document any new information I have found out for the Task I need to do
Acceptance Criteria
- As a project manager, when viewing a task on the Kanban board, there is a button icon on a Task that indicates that it can be edited.
- If I click on the button icon, the task becomes editable, and I can enter a new text value into the description field.
As a Project Manager I can create a new Task when I am on the Kanban board. So that my team can see these new task items on the Kanban board
Acceptance Criteria
- As a Project Manager, when I am on the Kanban board, there is a way for me to create a new empty task for each status column
As a Project Manager I can drag-and-drop to manually order Tasks within a column So that my team can see the most important items to work on at the top of each column
Acceptance Criteria
- As a project manager, when viewing the Kanban board, I can drag-and-drop Tasks into an order I like within a column
- When I drag and drop a Task above another Task, the item that I have moved should replace its position.
- When I drag a Task below another Task, the Task that I am moving should position below the other task.
As a Project Manager I can delete a Task from the Kanban board So that my team no longer see this Task on the board
Acceptance Criteria
- As a project manager, when viewing the Kanban board, there is an icon button for each task that indicates it can be deleted.
- If I interact with the icon button, the task is removed from the Kanban board, and cannot be seen by any user
This repository provides some existing code to speed up your development process. All of the code provided should be considered a suggestion, feel free to rewrite/optimise anything that has been provided.
- KanbanBoard.vue - Wrapper component for the Kanban board with drag and drop set up on columns/cards.
- KanbanColumn.vue - Basic styling for a column with a title.
- KanbanItem.vue - Basic styling for an editable card.
Note: The drag and drop library used is VueDraggable based on the Sortable.js library. See their documentation for more details.
- index.js - Vuex store set up to use modules.
- modules/kanban.js - Vuex module for handling the kanban board.
See the Laravel 8.x documentation for a full guide on setting up a Laravel project.
For a quick start (if you have Docker avaliable) you can run:
./vendor/bin/sail up
this will set up containers for a webserver, MySql database etc. automatically.
Once that is set up you will need to install the NPM packages with:
npm install
OR
yarn
and run the Vue development server with:
npm run hot
OR
yarn hot
This test is new and may be missing some details. If there is anything you feel could be improved or you have any questions feel free to contact:
- Carl Whittick - Developer