@disane/ngx-taskboard
TypeScript icon, indicating that this package has built-in type declarations

4.0.0 • Public • Published

ngx-taskboard

badge codecov badge npm bundle size (scoped) Build Status Commitizen friendly

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

Taskboard

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

https://stackblitz.com/edit/disane-ngx-taskboard?embed=1&file=src/app/app.component.html&hideExplorer=1&hideNavigation=1&view=preview

Contributing

Installation the project

git clone https://github.com/Disane87/ngx-taskboard.git .

Installing deps:

npm install

If 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! 😊 n 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 | |

Examples

Basic examples

https://stackblitz.com/edit/disane-ngx-taskboard?embed=1&file=src/app/app.component.html&hideExplorer=1&hideNavigation=1&view=preview

Contributing

Installation the project

git clone https://github.com/Disane87/ngx-taskboard.git .

Installing deps:

npm install

If 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! 😊

Package Sidebar

Install

npm i @disane/ngx-taskboard

Weekly Downloads

4

Version

4.0.0

License

MIT

Unpacked Size

1.35 MB

Total Files

26

Last publish

Collaborators

  • disane