Skip to content

feat: create generic kanban board component (issue #545)#546

Merged
ideav merged 4 commits intomainfrom
issue-545-72d919589699
Feb 20, 2026
Merged

feat: create generic kanban board component (issue #545)#546
ideav merged 4 commits intomainfrom
issue-545-72d919589699

Conversation

@konard
Copy link
Copy Markdown
Collaborator

@konard konard commented Feb 20, 2026

Summary

  • Created a reusable KanbanBoard JavaScript component in kanban/kanban.html
  • Supports configurable data sources, field mappings, and status mappings
  • Implements drag-and-drop status changes with API integration

Implementation Details

Extensible Configuration Format

var kanban = new KanbanBoard('kanban-container', {
    dataSource: {
        type: 'report',  // 'report' or 'object'
        endpoint: 'report/Мой%20канбан?JSON',
        tableId: '291'   // Required for object type
    },
    statuses: {
        endpoint: 'report/Статусы?JSON_KV'
    },
    fieldMapping: {
        title: 'Карточка',      // or 'Проект', 'Клиент', 'Лид'
        description: 'Описание',
        contact: 'Контакт',
        status: 'Статус',
        statusId: 'СтатусID',
        date: 'Дата',
        phone: 'Телефон',
        email: 'Email',
        amount: 'Сумма',
        activity: 'Activity',
        cardId: 'ID'
    },
    statusMapping: {
        name: 'Статус',
        id: 'СтатусID',
        color: 'Цвет'
    }
});

Features

  • Two Data Source Types: Support for both report (report/{name}?JSON) and object (object/{id}?JSON_OBJ with metadata/{id})
  • Field Mapping: Configurable mapping of kanban card parameters to data source field names
  • Status Loading: Loads statuses from configurable endpoint with ID, name, and color support
  • Drag-and-Drop: Cards can be dragged between columns to change status
  • API Integration: Status changes call _m_set/{cardId}?JSON with t{statusFieldId}={newStatusId} and t{activityFieldId}={timestamp}
  • Contact Icons: Phone and email icons with click-to-copy functionality
  • Card Sorting: Cards sorted by Activity field (descending) within columns
  • Sum Calculation: Total sum displayed in column headers
  • Full Height: Kanban fills parent container height

Test Plan

  • Verify kanban loads data from report endpoint
  • Verify kanban loads data from object endpoint with metadata
  • Test drag-and-drop status changes
  • Verify API call format for status updates
  • Test phone/email copy-to-clipboard functionality
  • Verify card sorting by Activity field
  • Check column sum calculation

Fixes #545

🤖 Generated with Claude Code

Adding CLAUDE.md with task information for AI processing.
This file will be removed when the task is complete.

Issue: #545
@konard konard self-assigned this Feb 20, 2026
- Create reusable KanbanBoard JavaScript component with configurable options
- Support both 'report' and 'object' data source types
- Add extensible field mapping for card parameters (title, description, contact, status, date, phone, email, amount, activity)
- Add status mapping configuration (name, id, color)
- Implement drag-and-drop functionality for status changes via _m_set API
- Include copy-to-clipboard for phone and email fields
- Sort cards by Activity field (descending) within columns
- Calculate and display total sum per status column
- Support dynamic status colors from API response
- Make kanban height fill its parent container

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
@konard konard changed the title [WIP] Создай канбан kanban/kanban.html feat: create generic kanban board component (issue #545) Feb 20, 2026
@konard konard marked this pull request as ready for review February 20, 2026 10:09
@konard
Copy link
Copy Markdown
Collaborator Author

konard commented Feb 20, 2026

🤖 Solution Draft Log

This log file contains the complete execution trace of the AI solution draft process.

💰 Cost estimation:

  • Public pricing estimate: $3.454653
  • Calculated by Anthropic: $2.214180 USD
  • Difference: $-1.240473 (-35.91%)
    📎 Log file uploaded as Gist (708KB)
    🔗 View complete solution draft log

Now working session is ended, feel free to review and add any feedback on the solution draft.

@konard
Copy link
Copy Markdown
Collaborator Author

konard commented Feb 20, 2026

🔄 Auto-restart 1/3

Detected uncommitted changes from previous run. Starting new session to review and commit them.

Uncommitted files:

?? examples/kanban-data.json
?? examples/metadata.json
?? examples/object-data.json
?? examples/statuses.json

Auto-restart will stop after changes are committed or after 2 more iterations. Please wait until working session will end and give your feedback.

Add example API response files demonstrating different data formats:
- kanban-data.json: report format response example
- statuses.json: status list with IDs and colors
- metadata.json: table metadata for object data source type
- object-data.json: object format response example

These files help document the expected API formats and can be used
for testing the kanban component.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
@konard
Copy link
Copy Markdown
Collaborator Author

konard commented Feb 20, 2026

🔄 Auto-restart 1/3 Log

This log file contains the complete execution trace of the AI solution draft process.

💰 Cost estimation:

  • Public pricing estimate: $1.274217
  • Calculated by Anthropic: $0.605336 USD
  • Difference: $-0.668881 (-52.49%)
    📎 Log file uploaded as Gist (922KB)
    🔗 View complete solution draft log

Now working session is ended, feel free to review and add any feedback on the solution draft.

@ideav ideav merged commit 55bcb26 into main Feb 20, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Создай канбан kanban/kanban.html

2 participants