Angular-Kanban

Kanban board component for AngularJS.

• Product page: DlhSoft.com/KanbanLibrary

Run demos

• Kanban board
• Gantt Chart integration

Usage

<ds-kanban-board items="items" groups="groups" states="states" assignable-resources="assignableResources"
                 on-adding-new-item="initializeNewItem(item)" on-editing-item="editItem(item)"
                 on-item-state-changed="onItemStateChanged(item, state)">
</ds-kanban-board>

var state1: KanbanState = { name: 'New' }, 
    state2: KanbanState = { name: 'In progress', areNewItemButtonsHidden: true }, 
    state3: KanbanState = { name: 'Done', isCollapsedByDefaultForGroups: true, areNewItemButtonsHidden: true };
var states: KanbanState[] = [state1, state2, state3];
var resource1: KanbanAssignableResource = { name: 'Resource 1', imageUrl: 'Images/Resource1.png' }, 
    resource2: KanbanAssignableResource = { name: 'Resource 2', imageUrl: 'Images/Resource2.png' };
var assignableResources: KanbanAssignableResource[] = [resource1, resource2];
var group1: KanbanGroup = { name: 'Story 1', state: state2, assignedResource: resource1 },
    group2: KanbanGroup = { name: 'Story 2', state: state3, assignedResource: resource2 };
var groups: KanbanGroup[] = [group1, group2];
var items: KanbanItem[] = [
    { name: 'Task 1', group: group1, state: state1, assignedResource: resource1 },
    { name: 'Task 2', group: group1, state: state2, assignedResource: resource1 },
    { name: 'Bug 1', group: group1, state: state2, assignedResource: resource1, itemType: KanbanBoard.defaultItemTypes.bug },
    { name: 'Task 3', group: group1, state: state1, assignedResource: resource2 },
    { name: 'Task 4', group: group1, state: state1, assignedResource: resource1 },
    { name: 'Task 5', group: group2, state: state1, assignedResource: resource2 },
    { name: 'Task 6', group: group2, state: state2, assignedResource: resource2 },
    { name: 'Task 7', group: group2, state: state2, assignedResource: resource1 },
    { name: 'Task 8', group: group2, state: state3, assignedResource: resource2 }
];
$scope.states = states;
$scope.groups = groups;
$scope.items = items;
$scope.assignableResources = assignableResources;
$scope.initializeNewItem = (item: KanbanItem): void => {
    item.assignedResource = resource1;
    console.log('A new item was created.');
};
$scope.editItem = (item: KanbanItem): void => {
    console.log('Editing item ' + item.name);
};
$scope.onItemStateChanged = (item: KanbanItem, state: KanbanState): void => {
    console.log('State of ' + item.name + ' was changed to: ' + state.name);
};

ds-kanban-board directive

• Available as: element, attribute (e.g. on div), or as comment directive.
• Transcludes content: to title displayed in the header area of the board.
• Some accepted arguments
  • items (required): array of items (such as tasks), defined using Item type, having these members:
    • name: string representing the item; may be overriden by the field defined by itemNameField or groupNameField arguments of the directive
    • group: reference to the group (from the groups array) indicating the vertical group area that the item should be displayed within (e.g. the story that the task belongs to)
    • state: reference to the state (from the states array) indicating the horizontal state area that the item should be displayed within (e.g. New, In progress, Done)
    • itemType: reference to the item type (from the itemTypes array) indicating the type of item (e.g. task, bug, story, feature)
    • assignedResource: reference to the resource (from the assignableResources array) indicating the resource that the item is assigned to (e.g. an employee that need to perform work on a task)
    • color: string indicating a color of the item, overriding the color of the item type (displayed as a left header area for the item rectangle)
    • backgroundColor: string indicating the background color of the item, overriding the color of the item type
    • isReadOnly: Boolean value indicating whether or not this item should be read only
  • groups: array of groups (such as stories), defined using Group type; if not set, group headers area is not displayed, and items are all assigned to a default group behind the scenes
  • states: array of states, defined using State type; defaults to a built-in array containing these states: New, Active, Resolved, Closed.
  • assignableResources: Array of available resources for item assignments, defined using AssignableResource type; if not set, resource assignment area is not displayed for items, and for groups it is replaced by a count of child items
  • isReadOnly: Boolean value indicating whether or not all items should be read only
  • onAddingNewItem(item): function called when a new item is created and added to a group and state
  • onEditingItem(item), onEditingGroup(group): functions called when the end user initiate editing for an item or a group
  • onItemStateChanged(item, state, previousState), onItemGroupChanged(item, group, previousGroup): functions called when the end user drags and drops an item to a different state and/or group area.

Demo source code

Kanban.Library/Kanban.Angular.Components

• HTML: index.html
• CSS: app.css
• TypeScript: app-angular.ts
• JavaScript: app-angular.js

Package installation

• NuGet:

  Install-Package DlhSoft.KanbanLibrary
  

• Bower:

  bower install http://DlhSoft.com/Packages/DlhSoft.KanbanLibrary.zip
  

• Node:

  npm install http://DlhSoft.com/Packages/DlhSoft.KanbanLibrary.tar
  

Support

This product is provided for free and "as is", so it doesn't include any official support. If you would like to receive full DlhSoft support for it, you can get it by purchasing a product license.