Step 3 - board list screen
1 min czytania
Standard board screen
Build the board list screen at kanban. Show the active workspace's boards (isDeleted == false) as a grid of tiles: board name, column count, and relative "updated ..." time. Actions: create board (inline name input, navigates into the new board), rename, and soft delete with a confirm. Add a collapsible "Trash" drawer listing soft-deleted boards, most recently deleted first, each with a Restore button. Clicking a tile navigates to /kanban/:projectId. Show a friendly empty state with a "Create your first board" call to action. Everything re-queries when the active workspace changes.
Board screen with columns
Build the board screen at /kanban/:projectId. Subscribe to the board doc and its tasks (the two streams from KanbanService) and render the columns left to right from the embedded columns array. Header: back link to /kanban, inline-editable board title, and a placeholder toolbar area.
Column features: add column (appends to the array), rename (inline edit on the column header), and delete with a confirm dialog that states how many cards it contains - deleting a column soft-deletes all its cards in a single writeBatch. Reorder columns by dragging the column header with a dedicated drag handle, using Angular CDK drag-drop; persist the new array order on drop. IMPORTANT gotcha: while a column is being dragged, disable and mark inert the nested per-column task drop lists, otherwise empty columns cannot be reordered. Each column header shows its title and card count. Handle loading and "board not found / deleted" states distinctly (a missing-document message, not an infinite spinner), and if the board's workspaceId does not match the active workspace, navigate back to /kanban.
Dyskusja
Komentarze: 0Brak komentarzy. Rozpocznij dyskusję.