KanbanView

The KanbanView component represents a kanban board that includes columns and cards (items) that can be added, modified, and dragged between columns. This component can be used for task organization, similar to Trello.

Properties

• board (Board) - Information about the current board, including access rights.
• columns (Column[]) - An array of columns that will be displayed on the kanban board.
• items (PropsItem[]) - An array of items (cards) that will be displayed in the columns.
• tags (Tag[]) - Tags that can be assigned to items.
• members (Member[]) - A list of members who can be assigned to items.
• deadzone (number) - The dead zone for starting drag-and-drop (default is 0).
• canEdit (boolean) - Indicates whether items on the board can be edited.
• showTagTitles (boolean) - Whether to show tag labels on items.
• showItemTitles (boolean) - Whether to show item titles on cards.
• fixedColumns (boolean) - Indicates whether the set of columns is fixed (no new columns can be added).
• createColumnTitle (string) - Title for the button to add a column.
• createCardTitle (string) - Title for the button to add a card.
• itemChildren (JSXElement | Function) - Child elements or a function for rendering cards.

Events

• onColumnChange - Handler for column changes.
• onItemChange - Handler for item changes.
• onAddColumnClick - Handler for clicking the button to add a column.
• onEditColumnClick - Handler for clicking the button to edit a column.
• onAddItemClick - Handler for clicking the button to add an item.
• onEditItemClick - Handler for clicking the button to edit an item.

Key Features

• Adding and editing columns and cards
  You can add new columns and items, as well as edit existing ones.

• Dragging items and columns
  The ability to drag both cards within and between columns, as well as the columns themselves, is implemented.

• Sorting items by position
  Items and columns are sorted by position for correct display on the board.

Data Models:

• Column and Item - The main entities of the kanban board.
• Tag and Member - Tags and members that can be associated with cards.
• Event handling - For example, onColumnChange and onItemChange are used to pass changes to parent components.
• Support for read-only mode - If board.isPublic or canEdit prohibits editing, kanban items will be available for viewing only.