semantic-kanban

A simple Kanban component built with Semantic-UI + Vue.js.

Features

• Drag and drop tasks cards on the kanban board.
• Organize tasks by Owner (Team view)
• Customizable API
• Beautiful

Install

$ npm install --save semantic-kanban

Usage

 
<template>
    <semantic-kanban
        :tasks="tasks"
        :members="members"
        :options="options"
        @updateTask="updateTask"
        @deleteTask="deleteTask"
        @updateMember="updateMember">
    </semantic-kanban>	
</template>
 
<script type="text/javascript">
 
    import SemanticKanban from 'semantic-kanban'
 
    export default {
        components: {
            SemanticKanban
        },
        data () {
            return {
                tasks: [{
                    id: 1,
                    subject: 'Brace yourselves',
                    description: 'Winter is coming...',
                    status: 'doing',
                    dueDate: '2017-09-09 07:00',
                    owner: 1
                }],
                    members: [{
                    id: 1,
                    name: 'Danilo',
                    avatar: 'img/avatar.png'
                }],
                options: {
                    defaultTaskDialog: true,
                    defaultConfirmDialog: true,
                    defaultMemberDialog: true
                }
            }
        },
        methods: {
            updateTask (task) {
                console.log(task)
            },
            deleteTask (task) {
                console.log(task)
            },
            updateMember (member) {
                console.log(member)
            }
        }
    }
</script>
 

Customize your tasks

Standard tasks have the following fields: id, subject, description, status, dueDate, owner. You can add custom fields, and override some contents of the task card. Ex: add type field ('feature'|'bug'), and cutomize the extra content of the task card:

 
<template>
    <semantic-kanban
        :tasks="tasks"
        :members="members"
        :options="options"
        @updateTask="updateTask"
        @deleteTask="deleteTask"
        @updateMember="updateMember">
    </semantic-kanban>	
</template>
 
<script type="text/javascript">
 
    import SemanticKanban from 'semantic-kanban'
 
    export default {
        components: {
            SemanticKanban
        },
        data () {
            return {
                tasks: [{
                    id: 1,
                    subject: 'Brace yourselves',
                    description: 'Winter is coming...',
                    status: 'doing',
                    dueDate: '2017-09-09 07:00',
                    owner: 1,
                    type: 'feature'
                },
                {
                    id: 3,
                    subject: 'Kill Cersei',
                    description: 'Shame!',
                    status: 'blocked',
                    dueDate: '2017-08-20 18:00',
                    owner: 1,
                    type: 'bug'
                }],
                members: [{
                    id: 1,
                    name: 'Danilo',
                    avatar: 'img/avatar.png'
                }],
                options: {
                    defaultTaskDialog: true,
                    defaultConfirmDialog: true,
                    defaultMemberDialog: true,
                    taskExtraContent () {
                        return function() {
                            const dueDate = this.task.dueDate;
                            const remain = 10;
                            const icon = this.task.type == 'feature' ? 'blue cubes icon' : 
                                            this.task.type == 'bug' ? 'red bug icon' : '';
                            return `
                                <div class="right floated meta">
                          			<span>Rem. ${remain}h</span>
                          			<i class="${icon}"></i>
                          		</div>
                            	${dueDate}
                            `;
                        }
                    }
                }
            }
        },
        methods: {
            updateTask (task) {
                console.log(task);
            },
            deleteTask (task) {
                console.log(task)
            },
            updateMember (member) {
                console.log(member)
            }
        }
    }
</script>
 

Results:

Props

tasks: array of tasks

Task object:

id

Type: number

subject

Type: string

Short title of the task.

description

Type: string

Description of the task.

status

Type: string ('backlog' | 'doing' | 'blocked' | 'done' | 'archived'`)

Status of the task:

'backlog': left column of kanban, containing not started tasks.

'doing': first column of board, containing in progress tasks.

'blocked': second column of board, containing blocked/stoped tasks.

'done': right column of board, containing in done tasks.

'archived' represents a finished task that it's not viewed on the board.

dueDate

Type: date

Due date of the tasks. Format: 'YYYY-MM-DD hh:mm'

owner

Type: number

Member Id from members list.

tags

Type: Array

Tags of the task.

Ex: ['critical', 'help-wanted'].

Ex2: [{value: 'critical', color: 'red'}].

members: array of members

Member object:

id

Type: number

name

Type: string

avatar

Type: string

href of <img>

options: JSON object

defaultTaskDialog

Type: boolean

Open default dialog for editing task. Set it to false to use a custom dialog.

defaultConfirmDialog

Type: boolean

Open default dialog for delete task. Set it to false to use a custom dialog.

columnLabels

Type: array

Default: ['Backlog','Team','Doing','Blocked','Done']

newTaskHint

Type: string

Default: New Task

newMemberHint

Type: string

Default: New Member

backlogTopContent

Type: function

Default return:

 
    <div class="right floated meta">
        <i class="${semafor}"><i>
    </div>
    ${formattedSubject}
 

backlogExtraContent

Type: function

Default return:

 
    <div class="right floated meta">
        <span>${ownerName}</span>
    </div>
    ${dueDate}
 

taskTopContent

Type: function

Default return:

 
    <div class="right floated meta">
        <i class="${semafor}"></i>
    </div>
    ${formattedSubject}
 

taskExtraContent

Type: function

Default return:

 
    <div class="right floated meta">
        <span>Rem. ${remain}h</span>
    </div>
    ${dueDate}
 

Events

@openTask

Emitted when the task card is clicked.

Params : task

@newTask

Emitted when the New Task button is clicked.

@updateTask

Emitted when the task is updated by drag and drop between the status columns, or when the save button is clicked on the task dialog.

Params : task

@confirmDeleteTask

Emitted when the close button is clicked.

Params : task

@deleteTask

Emitted when the confirm button is clicked.

Params : task

@addTag

Emitted when a new tag is added in the task dialog.

Params : task, tag

@deleteTag

Emitted when a tag is deleted in the task dialog.

Params : task, tag

@updateMember

Emitted when the save button is clicked in the member dialog.

License

MIT © Danilo Sampaio