Nasal Pathway Melodrama

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

    Install

    npm i @disane/ngx-taskboard

    DownloadsWeekly Downloads

    0

    Version

    4.0.0

    License

    MIT

    Unpacked Size

    1.35 MB

    Total Files

    26

    Last publish

    Collaborators

    • disane