# KanbanViewLib

This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 15.2.0.

![Kanban Example](assets/images/kanban-view.png)

## 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:

```bash
npm install -g @angular/cli

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

```bash
ng new my-app
cd my-app
```

### Adding KanbanViewLib Package
To install the KanbanViewLib package, use the following command:

```bash
npm install kanban-view-lib
```

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

```bash
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 <lib-kanban-view> selector to render the Kanban component:

```bash
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: 'PL',
        },
        {
          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.',
          tags: ['Feature'],
          assignee: 'PL',
        },
        {
          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: '29053 ',
          title: 'Write unit tests for user authentication module.',
          tags: ['Testing', 'Security'],
          assignee: 'JS',
        },
        {
          id: '29036',
          title: 'Check Login page validation.',
          tags: ['Bug', 'Customer'],
          assignee: 'PL',
        },
        {
          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.',
          tags: ['Feature'],
          assignee: 'CS',
        },
        {
          id: '29010',
          title: "Fix cannot open user's default database SQL error.",
          tags: ['Bug', 'Internal'],
          assignee: 'PL',
        },
        {
          id: '29053',
          title: 'Write unit tests for user authentication module.',
          tags: ['Testing', 'Security'],
          assignee: 'JS',
        },
      ],
    },
  ];
}

```