kanban-view-lib

KanbanViewLib

This library was generated with Angular CLI version 15.2.0.

Setup

Create an Angular Application

You can use Angular CLI to set up your Angular applications. To install the Angular CLI, use the following command:

npm install -g @angular/cli

Create a new Angular application using the following Angular CLI command:

ng new my-app
cd my-app

Adding KanbanViewLib Package

To install the KanbanViewLib package, use the following command:

npm install kanban-view-lib

Importing the Library

In your app.module.ts, import the KanbanViewLibModule to enable the Kanban component in your app:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { KanbanViewLibModule } from 'kanban-view-lib';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    KanbanViewLibModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Add Kanban Component

In src/app/app.component.ts, use the selector to render the Kanban component:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `<lib-kanban-view [items]="items"></lib-kanban-view>`
})
export class AppComponent {
  public items = [
    {
      name: 'To Do',
      tasks: [
        { id: '29004', title: 'Fix the issues reported in the IE browser.', tags: ['Bug', 'Customer'], assignee: 'CS' },
        { id: '29015', title: 'Fix the filtering issues reported in Safari.', tags: ['Bug', 'Breaking Issue'], assignee: 'MH' },
        { id: '29050', title: 'Update UI components to match new design system.', tags: ['Feature', 'UI'], assignee: 'JS' }
      ]
    },
    {
      name: 'In Progress',
      tasks: [
        { id: '29002', title: 'Add responsive support to application.', tags: ['Story', 'Kanban'], assignee: 'CS' },
        { id: '29032', title: 'Arrange web meeting with customer to get login page requirement.', tags: ['Feature'], assignee: 'MH' },
        { id: '29051', title: 'Refactor authentication module for better performance.', tags: ['Refactor', 'Security'], assignee: 'LK' }
      ]
    },
    {
      name: 'In Review',
      tasks: [
        { id: '29016', title: 'Fix the issues reported in IE browser.', tags: ['Bug', 'Customer'], assignee: 'CS' },
        { id: '29036', title: 'Check Login page validation.', tags: ['Bug', 'Customer'], assignee: 'MH' },
        { id: '29052', title: 'Optimize database queries for better performance.', tags: ['Performance', 'Backend'], assignee: 'RD' }
      ]
    },
    {
      name: 'Done',
      tasks: [
        { id: '29018', title: 'Arrange web meeting with customer to get login page requirement.', tags: ['Feature'], assignee: 'CS' },
        { id: '29010', title: "Fix cannot open user's default database SQL error.", tags: ['Bug', 'Internal'], assignee: 'MH' },
        { id: '29053', title: 'Write unit tests for user authentication module.', tags: ['Testing', 'Security'], assignee: 'JS' }
      ]
    },
    {
      name: 'Blocked',
      tasks: [
        { id: '29054', title: 'Resolve API timeout issue on high load.', tags: ['Bug', 'Critical'], assignee: 'LK' },
        { id: '29055', title: 'Check and update third-party dependencies.', tags: ['Maintenance'], assignee: 'RD' }
      ]
    },
    {
      name: 'Deployed',
      tasks: [
        { id: '29056', title: 'Deploy new version to production.', tags: ['Deployment'], assignee: 'JS' },
        { id: '29057', title: 'Monitor application logs after deployment.', tags: ['Monitoring'], assignee: 'LK' }
      ]
    },
    {
      name: 'Backlog',
      tasks: [
        { id: '29058', title: 'Implement dark mode support.', tags: ['Feature', 'UI'], assignee: 'CS' },
        { id: '29059', title: 'Research and plan migration to microservices.', tags: ['Architecture', 'Planning'], assignee: 'RD' }
      ]
    }
  ];
}