# Kanban

![Status](https://img.shields.io/badge/status-stable-brightgreen)

Componente de quadro Kanban com suporte a arrastar e soltar colunas e itens. Permite seleção via checkboxes, templates customizáveis para cabeçalho, corpo e rodapé dos cards, e emite eventos de movimentação e seleção.

## Quando usar

- Gerenciamento de tarefas e projetos com workflows visuais (Scrum, Kanban)
- Visualização e organização de itens distribuídos em estágios ou categorias
- Interfaces onde o usuário precisa mover itens entre colunas por arrastar e soltar

## Quando não usar

- Listas simples sem necessidade de colunas múltiplas — use uma lista ou tabela
- Quando os itens não podem ser movidos entre categorias — use abas ou filtros

## Instalação

```typescript
import { KanbanModule } from '@seniorsistemas/angular-components/kanban';

@NgModule({
    imports: [KanbanModule],
})
export class MeuModule {}
```

## Uso básico

```html
<s-kanban [data]="dadosKanban" (itemsMoved)="onItemMovido($event)"></s-kanban>
```

## API

### Inputs

| Propriedade | Tipo | Padrão | Obrigatório | Descrição |
|-------------|------|--------|:-----------:|-----------|
| `data` | `KanbanData` | — | Sim | Dados do quadro Kanban com colunas e itens. |
| `showItemCheckboxes` | `boolean` | `true` | Não | Exibe checkboxes de seleção em cada item Kanban. |
| `showColumnCheckboxes` | `boolean` | `true` | Não | Exibe checkboxes de seleção no cabeçalho de cada coluna. |

### Outputs

| Evento | Tipo | Descrição |
|--------|------|-----------|
| `itemsMoved` | `EventEmitter<KanbanItemMovedData>` | Emitido quando o usuário move um item entre colunas ou posições. |
| `dataUpdated` | `EventEmitter<KanbanData>` | Emitido quando os dados do quadro são atualizados após movimentação. |
| `itemsSelected` | `EventEmitter<KanbanItem[]>` | Emitido quando a seleção de itens muda, com a lista de itens selecionados. |

### Tipos

```typescript
interface KanbanData {
    columns: KanbanColumn[];
}

interface KanbanColumn {
    id?: string;
    title: string;
    items: KanbanItem[];
    options?: KanbanColumnOption[];  // Menu de opções no cabeçalho da coluna
}

interface KanbanItem {
    data: any;                       // Dados do item (livre)
    options?: KanbanItemOption[];    // Menu de opções no card
    disabled?: boolean;              // Bloqueia movimentação e seleção
    frozen?: boolean;                // Bloqueia movimentação mas permite seleção
}

interface KanbanItemMovedData {
    items: KanbanItem[];             // Itens movidos (inclui selecionados)
    previousColumn: KanbanColumn;   // Coluna de origem
    targetColumn: KanbanColumn;     // Coluna de destino
}

interface KanbanColumnOption {
    label: string;
    iconClass?: string;
    command: (column: KanbanColumn) => void;
}

interface KanbanItemOption {
    label: string;
    iconClass?: string;
    command: (item: KanbanItem) => void;
}
```

## Exemplos

### Kanban básico com templates

```typescript
dadosKanban: KanbanData = {
    columns: [
        {
            id: 'todo',
            title: 'A Fazer',
            items: [
                { data: { id: 1, title: 'Implementar login', assignee: 'João' } },
                { data: { id: 2, title: 'Configurar banco de dados', assignee: 'Maria' } },
            ],
        },
        { id: 'doing', title: 'Em Progresso', items: [] },
        { id: 'done', title: 'Concluído', items: [] },
    ],
};
```

```html
<s-kanban [data]="dadosKanban" (itemsMoved)="onItemMovido($event)">
    <ng-template sTemplate="item-header" let-item>
        <h4>{{ item.data.title }}</h4>
    </ng-template>
    <ng-template sTemplate="item-body" let-item>
        <p>{{ item.data.assignee }}</p>
    </ng-template>
    <ng-template sTemplate="item-footer" let-item>
        <span>#{{ item.data.id }}</span>
    </ng-template>
</s-kanban>
```

### Com itens desabilitados e congelados

```typescript
dadosKanban: KanbanData = {
    columns: [{
        id: 'col1',
        title: 'Coluna',
        items: [
            { data: { title: 'Normal' } },
            { data: { title: 'Bloqueado' }, disabled: true },
            { data: { title: 'Congelado' }, frozen: true },
        ],
    }],
};
```

### Com menus de opções

```typescript
dadosKanban: KanbanData = {
    columns: [{
        id: 'backlog',
        title: 'Backlog',
        items: [{
            data: { id: 1, title: 'Feature A' },
            options: [
                { label: 'Editar', iconClass: 'far fa-edit', command: (item) => this.editar(item) },
                { label: 'Excluir', iconClass: 'far fa-trash', command: (item) => this.excluir(item) },
            ],
        }],
        options: [
            { label: 'Adicionar Tarefa', iconClass: 'far fa-plus', command: (col) => this.adicionar(col) },
        ],
    }],
};
```

### Templates customizáveis

| Valor do `sTemplate` | Descrição |
|----------------------|-----------|
| `item-header` | Cabeçalho do card |
| `item-body` | Corpo do card |
| `item-footer` | Rodapé do card |
| `column-header` | Cabeçalho da coluna |
| `column-empty-message` | Mensagem exibida quando a coluna está vazia |

## Acessibilidade

- Use Ctrl+Clique para selecionar múltiplos itens antes de arrastar
- Itens com `disabled: true` não podem ser movidos ou selecionados
- Itens com `frozen: true` não podem ser movidos mas podem ser selecionados
- Os checkboxes de seleção de coluna selecionam todos os itens habilitados da coluna

## Componentes relacionados

- [`GridMenu`](../grid-menu/README.md) — menu em grade para navegação e seleção simples