@disane/ngx-taskboard

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
• Installation
• Basic usage
  • Configuration
    • Properties
    • Events
  • Interfaces
  • Examples
• Limitations
• Contributing
  • Installation the project

Description

Dependencies

• Angular 7
• Bootstrap 4

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	string
boardName	''	Board name to show between row and column header	string
cellAddNewItems	true	Show add buttons in the cells for columns and rows	boolean
cellClass	'card-header'	Default css class for cell header	string
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.	string
filterOnProperties	[]	Specify the properties which will be searched for the given term in filter. If not properties are given, all will be searched	Array<string>
filterRowPlaceholder	'Search for items'	SPlaceholde rfor the input with the filter row	string
hAddNewItems	true	Show add buttons on the column headings	boolean
hCollapsed	false	Columns are collapsed or not on init	boolean
hGroupKey	''	Key to group data for columns	string
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	Array<string>
hHeaderClass	'card-header'	Default css class for column header	string
hHeaderTemplate	null	Template for column headers. Current groupName will be passed (see examples)	TemplateRef<any>
invertGroupDirection	false	Invert rows and columns	boolean
items	[]	Items to display	Array<CardItem> | Array
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>
scrollable	false	If set to true, the rows and columns are scrollable and will be out of the viewport.If not set, all rows and column will only use 100% of the parent element (aligned by flex/flex-fill)	boolean
showBacklog	true	Shows the blacklog on onit	boolean
showFilterRow	true	Shows the filter row to search items by filter in filterOnProperties array	boolean
showUngroupedInBacklog	true	All items which can't be grouped into rows and columns are stored into the backlog	boolean
smallText	false	Decrease overall font size	boolean
sortBy	''	Sort items by property	string
vAddNewItems	true	Show add buttons on the row headings	boolean
vCollapsable	true	Allow to collapse the rows	boolean
vCollapsed	false	Rows are collapsed or not on init	boolean
vGroupKey	''	Key to group data for rows	string
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	Array<string>
vHeaderClass	'card-header'	Default css class for row header	string
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<object>()	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

Interfaces

Name	Type	Description
CardItem	interface	Item to render
ClickEvent	interface	Datatype which is emitted when an item should be added
CollapseState	interface	All the collapse stated of every group item (horizontal / vertical)
GroupKeys	interface	Group keys to determine the correct groups internally

Examples

Following soon

Limitations

• Scrolling actually not possible

Contributing

Installation the project

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

Since this is a Angular library, you have can't start it as standalone, like a normal Angular application. Instead, you have to build it with ng build . --watch and link it with npm link. The link process creates a symlink to your global npm which you can access from other projects.

In your test or real project, you have to add the package, but only with another command npm link @disane/ngx-taskboard --save. This means, you are not obtaining the package from npm, instead you are symlinking it to you global npm which has a reference to the above created link in your project.

This is a bit odd, but you can read more about it here.

If you have an existing Angular library project with a tets application, you can work here with submoduling in git, instead of a git clone:

git submodule add https://github.com/Disane87/ngx-taskboard.git`

And now, have some fun! 😊

Changelog

v1.1.6

21 August 2019

• Changed auto release process e3c547f
• 🚀 Release 1.1.6 d9e3d9c
• Release process: Changelog c68723d
• Tag changes 05e4841
• Changelog generation 175c05e
• Changes package.json 5667ae7
• Meh. 😒 39b7f24
• 🚀 Release 1.1.7 51c8fc1
• 🚀 Release 1.1.6 48bc317
• Changes releae-it config 3258a64
• Tested release process 0ead0c2
• 🚀 Release 1.1.6 933be43
• Version downgrade 6d00e2a
• 🚀 Release 1.1.6 24dbe10
• Package.json 3b2f0b2
• 🚀 Release 1.1.6 db06e47
• Version downgrade ae4c35e
• 🙌🙌 0971c84
• 🚀 Release 1.1.6 019dfbd
• 🚀 Release 1.1.6 ce99b88