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 needs 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 the component (i.e. 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 needed, however, you may purchase a DlhSoft product license with support.