ngx-taskboard
ngx-taskboard is an implemention of my on taskboard, because all other taskboards are not that what I need. Feel free to contribute or leave some important feedback! Head over to the issues when you have questions or found a bug or leave a PR if you have som additions. Styling is made with Bootstrap, so it's 100% compatible.
Description
Dependencies
| Version | Angular | Bootstrap | Status |
|---|---|---|---|
| 1.x.x | 7.x.x | 4.x.x. | unmaintained |
| 2.x.x | 8.x.x | 4.x.x. | unmaintained |
| 3.x.x | 9.x.x | 4.x.x. | unmaintained |
| 4.x.x | 10.x.x | 4.x.x. | unmaintained |
| 5.x.x | 11.x.x | 4.x.x. | latest |
Installation
npm install @disane/ngx-taskboard
Basic usage
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { NgxTaskboardModule } from '@disane/ngx-taskboard';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule, NgxTaskboardModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }app.component.html
<ngx-taskboard class="w-100 h-100" [items]="items" [hGroupKeys]="hGroupKeys" [vGroupKeys]="vGroupKeys"
[vGroupKey]="vGroupKey" [hGroupKey]="hGroupKey" [sortBy]="sortBy" [invertGroupDirection]="false">
</ngx-taskboard>app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
public items = [
{ id: 1, name: 'Evaluate', color: '#fb3064', status: 'open', user: 'Marco', priority: 1 },
{ id: 2, name: 'Call customer', color: '#71dd8f', status: 'working', user: 'Jamie', priority: 1 },
{ id: 3, name: 'Fix bugs', color: '#29aa82', status: 'open', user: 'Malian', priority: 1 },
{ id: 3, name: 'Create SCSS', color: '#e14a2f', status: 'open', user: 'Marco', priority: 1 },
{ id: 4, name: 'Boil water', color: '#209ab7', status: 'working', user: 'Marco', priority: 2 },
{ id: 4, name: 'Walking the doggo', color: '#b3f7dd', status: 'done', user: 'Thorsten', priority: 3 },
{ id: 4, name: 'Prepare for xmas', color: '#ea6562', status: '', user: '' },
{ id: 4, name: 'Birthday preps', color: '#b4ade5', status: 'test', user: '', priority: 5 }
];
public vGroupKeys = ['open', 'working', 'test', 'done'];
public hGroupKeys = ['Marco', 'Jamie', 'Malian', 'Natalie', 'Thorsten'];
public vGroupKey = 'status';
public hGroupKey = 'user';
public sortBy = 'priority';
}Configuration
Properties
| Name | Default value | Description | Type |
|---|---|---|---|
| actionsTemplate | null | Template for actions, add and collapse buttons (see examples) | TemplateRef<any> |
| backlogName | 'Backlog' | Name of the backlog row | |
| backlogWidth | ${this.columnWidth}px |
Width of the backlog row, when activated. You can use all valid css units. Default is columnWidth | |
| boardName | '' | Board name to show between row and column header | |
| cellAddNewItems | true | Show add buttons in the cells for columns and rows | |
| cellClass | 'card-header' | Default css class for cell header | |
| columnWidth | 200 | Column width (in px) which is applied to the columns when the content is scollable | |
| dragoverPlaceholderTemplate | null | Template for the placeholder element which will be generated when an item is draged over a cell | TemplateRef<any> |
| filter | '' | Predefined filter for the searchbar. If set, the items are filtered by the term on init. | |
| filterOnProperties | [] | Specify the properties which will be searched for the given termin filter. If not properties are given, all will be searched | string[] |
| filterRowPlaceholder | 'Search for items' | Placeholder for the input with the filter row | |
| hAddNewItems | true | Show add buttons on the column headings | |
| hCollapsed | false | Columns are collapsed or not on init | |
| hGroupKey | '' | Key to group data for columns | |
| hGroupKeys | [] | Grouping keys for columns (if not passed, the keys will be determined out of the items)Caution: If you don't pass any headings manually, only the columns are shown, which have data.If you want to show emtpy rows, please set them | (string | GroupHeading)[] |
| hHeaderClass | 'card-header card-header-bg' | Default css class for column header | |
| hHeaderTemplate | null | Template for column headers. Current groupName will be passed (see examples) | TemplateRef<any> |
| initialCollapseState | [] | The collapse state which is applied when set initially | CollapseState[] |
| invertGroupDirection | false | Invert rows and columns | |
| items | [] | ||
| itemTemplate | null | Template for items to render. "item" object ist passed (see examples) | TemplateRef<any> |
| noElementsTemplate | null | Template for collapsed rows to render. "count" object ist passed (see examples) | TemplateRef<any> |
| showBacklog | true | Shows the blacklog on onit | |
| showFilterRow | true | Shows the filter row to search items by filter in filterOnProperties array | |
| showUngroupedInBacklog | true | All items which can't be grouped into rows and columns are stored into the backlog | |
| smallText | false | Decrease overall font size | |
| sortBy | '' | Sort items by property | |
| stickyHorizontalHeaderKeys | true | If set to true, the horizontal group keys are fixed positioned to the top and remain at the top while scrolling. Only applied when scrollable is true | |
| stickyVerticalHeaderKeys | false | If set to true, the vertical group keys are fixed positioned to the top and remain at the top while scrolling. Only applied when scrollable is true | |
| vAddNewItems | true | Show add buttons on the row headings | |
| vCollapsable | true | Allow to collapse the rows | |
| vCollapsed | false | Rows are collapsed or not on init | |
| vGroupKey | '' | Key to group data for rows | |
| vGroupKeys | [] | Grouping keys for rows (if not passed, the keys will be determined out of the items)Caution: If you don't pass any headings manually, only the rows are shown, which have data.If you want to show emtpy rows, please set them | (string | GroupHeading)[] |
| vHeaderClass | 'card-header' | Default css class for row header | |
| vHeaderTemplate | null | Template for row headers. Current groupName will be passed (see examples) | TemplateRef<any> |
Events
| Name | Default value | Description | Type |
|---|---|---|---|
| dragStarted | new EventEmitter<object>() | Fired when the user drags an item. Current item is passed | EventEmitter |
| dropped | new EventEmitter<DropEvent>() | Fired when an item is dropped. Current item is passed | EventEmitter |
| elementCreateClick | new EventEmitter<ClickEvent>() | Fired when an add action is click. Current ClickEvent is passed | EventEmitter |
| headingCollapsed | new EventEmitter<CollapseEvent>() | Fired when a heading is collapsed. CollapseEvent is emitted | EventEmitter |
| isScrolling | new EventEmitter() | EventEmitter | |
| scrolledToEnd | new EventEmitter() | EventEmitter | |
| scrollEnded | new EventEmitter() | EventEmitter |
Interfaces
| Name | Type | Description |
|---|---|---|
| CardItem | interface | Item to render |
| ClickEvent | interface | Datatype which is emitted when an item should be added |
| CollapseEvent | interface | Object for the headings in which you can set color etc. |
| CollapseState | interface | All the collapse stated of every group item (horizontal / vertical) |
| DropEvent | interface | Event which is fired when an item is dropped |
| GroupHeading | interface | Object for the headings in which you can set color etc. |
| GroupKeys | interface | Group keys to determine the correct groups internally |
| Scrollable | interface | Object to determine the scrollability |
| ScrollEvent | interface | Scroll event |
| ScrollState | interface | Scroll state |
Examples
Basic examples
Contributing
Installation the project
git clone https://github.com/Disane87/ngx-taskboard.git .Installing deps:
npm installIf you use Visual Studio Code, just use the included ngx-taskboard.code-workspace, install recommended extensions and hit F5 to debug.
And now, have some fun!
Examples
Basic examples
Contributing
Installation the project
git clone https://github.com/Disane87/ngx-taskboard.git .Installing deps:
npm installIf you use Visual Studio Code, just use the included ngx-taskboard.code-workspace, install recommended extensions and hit F5 to debug.
And now, have some fun!