+192

src/sheets/kanban-view.ts

reviewed

··· 1 1 + /** 2 2 + * Kanban View — card-based board grouped by a status/category column. 3 3 + * 4 4 + * Pure logic module: lane construction, card ordering, drag-drop moves. 5 5 + * DOM rendering handled in the sheets UI layer. 6 6 + */ 7 7 + 8 8 + export interface KanbanCard { 9 9 + rowIndex: number; 10 10 + /** Display title (first non-group column value or row number) */ 11 11 + title: string; 12 12 + /** Additional fields to show on the card */ 13 13 + fields: { label: string; value: string }[]; 14 14 + } 15 15 + 16 16 + export interface KanbanLane { 17 17 + id: string; 18 18 + /** Column value that defines this lane */ 19 19 + value: string; 20 20 + cards: KanbanCard[]; 21 21 + } 22 22 + 23 23 + export interface KanbanConfig { 24 24 + /** Column index to group by (the "status" column) */ 25 25 + groupByCol: number; 26 26 + /** Column index to use as card title */ 27 27 + titleCol: number; 28 28 + /** Additional column indices to show on cards */ 29 29 + fieldCols: number[]; 30 30 + } 31 31 + 32 32 + /** 33 33 + * Build kanban lanes from sheet data. 34 34 + */ 35 35 + export function buildKanbanLanes( 36 36 + cellValues: Map<string, unknown>, 37 37 + rowCount: number, 38 38 + config: KanbanConfig, 39 39 + colToLetter: (col: number) => string, 40 40 + colHeaders: string[], 41 41 + ): KanbanLane[] { 42 42 + const lanesMap = new Map<string, KanbanCard[]>(); 43 43 + 44 44 + for (let r = 1; r <= rowCount; r++) { 45 45 + const groupCellId = `${colToLetter(config.groupByCol)}${r}`; 46 46 + const raw = cellValues.get(groupCellId); 47 47 + const laneValue = raw !== null && raw !== undefined && raw !== '' 48 48 + ? String(raw).trim() 49 49 + : '(unassigned)'; 50 50 + 51 51 + // Build card 52 52 + const titleCellId = `${colToLetter(config.titleCol)}${r}`; 53 53 + const titleRaw = cellValues.get(titleCellId); 54 54 + const title = titleRaw ? String(titleRaw).trim() : `Row ${r}`; 55 55 + 56 56 + const fields: KanbanCard['fields'] = []; 57 57 + for (const colIdx of config.fieldCols) { 58 58 + const cellId = `${colToLetter(colIdx)}${r}`; 59 59 + const val = cellValues.get(cellId); 60 60 + fields.push({ 61 61 + label: colHeaders[colIdx] || colToLetter(colIdx), 62 62 + value: val !== null && val !== undefined ? String(val) : '', 63 63 + }); 64 64 + } 65 65 + 66 66 + if (!lanesMap.has(laneValue)) { 67 67 + lanesMap.set(laneValue, []); 68 68 + } 69 69 + lanesMap.get(laneValue)!.push({ rowIndex: r, title, fields }); 70 70 + } 71 71 + 72 72 + const lanes: KanbanLane[] = []; 73 73 + let idCounter = 0; 74 74 + 75 75 + for (const [value, cards] of lanesMap) { 76 76 + lanes.push({ 77 77 + id: `lane-${++idCounter}`, 78 78 + value, 79 79 + cards, 80 80 + }); 81 81 + } 82 82 + 83 83 + // Sort lanes: alphabetical, with (unassigned) last 84 84 + lanes.sort((a, b) => { 85 85 + if (a.value === '(unassigned)') return 1; 86 86 + if (b.value === '(unassigned)') return -1; 87 87 + return a.value.localeCompare(b.value); 88 88 + }); 89 89 + 90 90 + return lanes; 91 91 + } 92 92 + 93 93 + /** 94 94 + * Move a card from one lane to another. 95 95 + * Returns the new lane value to write to the groupBy column. 96 96 + */ 97 97 + export function moveCard( 98 98 + lanes: KanbanLane[], 99 99 + cardRowIndex: number, 100 100 + targetLaneId: string, 101 101 + targetIndex: number, 102 102 + ): { lanes: KanbanLane[]; newValue: string } | null { 103 103 + // Find source lane 104 104 + let sourceLane: KanbanLane | undefined; 105 105 + let cardIndex = -1; 106 106 + 107 107 + for (const lane of lanes) { 108 108 + const idx = lane.cards.findIndex(c => c.rowIndex === cardRowIndex); 109 109 + if (idx !== -1) { 110 110 + sourceLane = lane; 111 111 + cardIndex = idx; 112 112 + break; 113 113 + } 114 114 + } 115 115 + 116 116 + if (!sourceLane || cardIndex === -1) return null; 117 117 + 118 118 + const targetLane = lanes.find(l => l.id === targetLaneId); 119 119 + if (!targetLane) return null; 120 120 + 121 121 + // Remove from source 122 122 + const card = sourceLane.cards[cardIndex]; 123 123 + const newLanes = lanes.map(lane => { 124 124 + if (lane.id === sourceLane!.id) { 125 125 + return { 126 126 + ...lane, 127 127 + cards: lane.cards.filter(c => c.rowIndex !== cardRowIndex), 128 128 + }; 129 129 + } 130 130 + if (lane.id === targetLaneId) { 131 131 + const newCards = [...lane.cards]; 132 132 + const insertAt = Math.min(targetIndex, newCards.length); 133 133 + newCards.splice(insertAt, 0, card); 134 134 + return { ...lane, cards: newCards }; 135 135 + } 136 136 + return lane; 137 137 + }); 138 138 + 139 139 + return { 140 140 + lanes: newLanes, 141 141 + newValue: targetLane.value === '(unassigned)' ? '' : targetLane.value, 142 142 + }; 143 143 + } 144 144 + 145 145 + /** 146 146 + * Reorder a card within the same lane. 147 147 + */ 148 148 + export function reorderCard( 149 149 + lanes: KanbanLane[], 150 150 + laneId: string, 151 151 + fromIndex: number, 152 152 + toIndex: number, 153 153 + ): KanbanLane[] { 154 154 + return lanes.map(lane => { 155 155 + if (lane.id !== laneId) return lane; 156 156 + if (fromIndex < 0 || fromIndex >= lane.cards.length) return lane; 157 157 + 158 158 + const cards = [...lane.cards]; 159 159 + const [moved] = cards.splice(fromIndex, 1); 160 160 + const insertAt = Math.min(toIndex, cards.length); 161 161 + cards.splice(insertAt, 0, moved); 162 162 + return { ...lane, cards }; 163 163 + }); 164 164 + } 165 165 + 166 166 + /** 167 167 + * Get card count per lane. 168 168 + */ 169 169 + export function laneCardCounts(lanes: KanbanLane[]): Map<string, number> { 170 170 + const counts = new Map<string, number>(); 171 171 + for (const lane of lanes) { 172 172 + counts.set(lane.id, lane.cards.length); 173 173 + } 174 174 + return counts; 175 175 + } 176 176 + 177 177 + /** 178 178 + * Find which lane a card is in. 179 179 + */ 180 180 + export function findCardLane( 181 181 + lanes: KanbanLane[], 182 182 + rowIndex: number, 183 183 + ): KanbanLane | null { 184 184 + return lanes.find(l => l.cards.some(c => c.rowIndex === rowIndex)) || null; 185 185 + } 186 186 + 187 187 + /** 188 188 + * Get total card count across all lanes. 189 189 + */ 190 190 + export function totalCardCount(lanes: KanbanLane[]): number { 191 191 + return lanes.reduce((sum, lane) => sum + lane.cards.length, 0); 192 192 + }

+175

tests/kanban-view.test.ts

reviewed

··· 1 1 + import { describe, it, expect } from 'vitest'; 2 2 + import { 3 3 + buildKanbanLanes, 4 4 + moveCard, 5 5 + reorderCard, 6 6 + laneCardCounts, 7 7 + findCardLane, 8 8 + totalCardCount, 9 9 + type KanbanConfig, 10 10 + } from '../src/sheets/kanban-view.js'; 11 11 + 12 12 + function colToLetter(col: number): string { 13 13 + return String.fromCharCode(65 + col); 14 14 + } 15 15 + 16 16 + function makeCells(obj: Record<string, unknown>): Map<string, unknown> { 17 17 + return new Map(Object.entries(obj)); 18 18 + } 19 19 + 20 20 + const HEADERS = ['Status', 'Task', 'Assignee', 'Priority']; 21 21 + 22 22 + const CONFIG: KanbanConfig = { 23 23 + groupByCol: 0, // A = Status 24 24 + titleCol: 1, // B = Task 25 25 + fieldCols: [2, 3], // C = Assignee, D = Priority 26 26 + }; 27 27 + 28 28 + const CELLS = makeCells({ 29 29 + A1: 'Todo', B1: 'Design UI', C1: 'Alice', D1: 'High', 30 30 + A2: 'In Progress', B2: 'Build API', C2: 'Bob', D2: 'High', 31 31 + A3: 'Todo', B3: 'Write Tests', C3: 'Carol', D3: 'Medium', 32 32 + A4: 'Done', B4: 'Setup CI', C4: 'Alice', D4: 'Low', 33 33 + A5: 'In Progress', B5: 'Review PR', C5: 'Bob', D5: 'Medium', 34 34 + }); 35 35 + 36 36 + describe('Kanban View', () => { 37 37 + describe('buildKanbanLanes', () => { 38 38 + it('groups rows into lanes by column value', () => { 39 39 + const lanes = buildKanbanLanes(CELLS, 5, CONFIG, colToLetter, HEADERS); 40 40 + expect(lanes.length).toBe(3); // Done, In Progress, Todo 41 41 + }); 42 42 + 43 43 + it('sorts lanes alphabetically', () => { 44 44 + const lanes = buildKanbanLanes(CELLS, 5, CONFIG, colToLetter, HEADERS); 45 45 + expect(lanes[0].value).toBe('Done'); 46 46 + expect(lanes[1].value).toBe('In Progress'); 47 47 + expect(lanes[2].value).toBe('Todo'); 48 48 + }); 49 49 + 50 50 + it('puts correct cards in each lane', () => { 51 51 + const lanes = buildKanbanLanes(CELLS, 5, CONFIG, colToLetter, HEADERS); 52 52 + const todo = lanes.find(l => l.value === 'Todo')!; 53 53 + expect(todo.cards).toHaveLength(2); 54 54 + expect(todo.cards[0].title).toBe('Design UI'); 55 55 + expect(todo.cards[1].title).toBe('Write Tests'); 56 56 + }); 57 57 + 58 58 + it('includes field data on cards', () => { 59 59 + const lanes = buildKanbanLanes(CELLS, 5, CONFIG, colToLetter, HEADERS); 60 60 + const done = lanes.find(l => l.value === 'Done')!; 61 61 + expect(done.cards[0].fields).toHaveLength(2); 62 62 + expect(done.cards[0].fields[0].label).toBe('Assignee'); 63 63 + expect(done.cards[0].fields[0].value).toBe('Alice'); 64 64 + }); 65 65 + 66 66 + it('handles empty group values as (unassigned)', () => { 67 67 + const cells = makeCells({ A1: '', B1: 'Orphan task' }); 68 68 + const lanes = buildKanbanLanes(cells, 1, CONFIG, colToLetter, HEADERS); 69 69 + expect(lanes[0].value).toBe('(unassigned)'); 70 70 + }); 71 71 + 72 72 + it('puts (unassigned) lane last', () => { 73 73 + const cells = makeCells({ 74 74 + A1: '', B1: 'Orphan', A2: 'Active', B2: 'Normal', 75 75 + }); 76 76 + const lanes = buildKanbanLanes(cells, 2, CONFIG, colToLetter, HEADERS); 77 77 + expect(lanes[lanes.length - 1].value).toBe('(unassigned)'); 78 78 + }); 79 79 + 80 80 + it('handles empty data', () => { 81 81 + const lanes = buildKanbanLanes(new Map(), 0, CONFIG, colToLetter, HEADERS); 82 82 + expect(lanes).toEqual([]); 83 83 + }); 84 84 + }); 85 85 + 86 86 + describe('moveCard', () => { 87 87 + it('moves a card between lanes', () => { 88 88 + const lanes = buildKanbanLanes(CELLS, 5, CONFIG, colToLetter, HEADERS); 89 89 + const todoLane = lanes.find(l => l.value === 'Todo')!; 90 90 + const inProgressLane = lanes.find(l => l.value === 'In Progress')!; 91 91 + 92 92 + const result = moveCard(lanes, 1, inProgressLane.id, 0); 93 93 + expect(result).not.toBeNull(); 94 94 + expect(result!.newValue).toBe('In Progress'); 95 95 + 96 96 + const newTodo = result!.lanes.find(l => l.value === 'Todo')!; 97 97 + const newInProgress = result!.lanes.find(l => l.value === 'In Progress')!; 98 98 + expect(newTodo.cards).toHaveLength(1); 99 99 + expect(newInProgress.cards).toHaveLength(3); 100 100 + }); 101 101 + 102 102 + it('returns null for unknown card', () => { 103 103 + const lanes = buildKanbanLanes(CELLS, 5, CONFIG, colToLetter, HEADERS); 104 104 + expect(moveCard(lanes, 999, lanes[0].id, 0)).toBeNull(); 105 105 + }); 106 106 + 107 107 + it('returns null for unknown target lane', () => { 108 108 + const lanes = buildKanbanLanes(CELLS, 5, CONFIG, colToLetter, HEADERS); 109 109 + expect(moveCard(lanes, 1, 'nonexistent', 0)).toBeNull(); 110 110 + }); 111 111 + 112 112 + it('returns empty string for moves to (unassigned)', () => { 113 113 + const cells = makeCells({ 114 114 + A1: 'Active', B1: 'Task 1', A2: '', B2: 'Task 2', 115 115 + }); 116 116 + const lanes = buildKanbanLanes(cells, 2, CONFIG, colToLetter, HEADERS); 117 117 + const unassigned = lanes.find(l => l.value === '(unassigned)')!; 118 118 + const result = moveCard(lanes, 1, unassigned.id, 0); 119 119 + expect(result!.newValue).toBe(''); 120 120 + }); 121 121 + }); 122 122 + 123 123 + describe('reorderCard', () => { 124 124 + it('reorders cards within a lane', () => { 125 125 + const lanes = buildKanbanLanes(CELLS, 5, CONFIG, colToLetter, HEADERS); 126 126 + const todo = lanes.find(l => l.value === 'Todo')!; 127 127 + const reordered = reorderCard(lanes, todo.id, 0, 1); 128 128 + const newTodo = reordered.find(l => l.value === 'Todo')!; 129 129 + expect(newTodo.cards[0].title).toBe('Write Tests'); 130 130 + expect(newTodo.cards[1].title).toBe('Design UI'); 131 131 + }); 132 132 + 133 133 + it('ignores invalid indices', () => { 134 134 + const lanes = buildKanbanLanes(CELLS, 5, CONFIG, colToLetter, HEADERS); 135 135 + const todo = lanes.find(l => l.value === 'Todo')!; 136 136 + const result = reorderCard(lanes, todo.id, -1, 0); 137 137 + const newTodo = result.find(l => l.value === 'Todo')!; 138 138 + expect(newTodo.cards[0].title).toBe('Design UI'); 139 139 + }); 140 140 + }); 141 141 + 142 142 + describe('laneCardCounts', () => { 143 143 + it('returns card count per lane', () => { 144 144 + const lanes = buildKanbanLanes(CELLS, 5, CONFIG, colToLetter, HEADERS); 145 145 + const counts = laneCardCounts(lanes); 146 146 + expect(counts.get(lanes.find(l => l.value === 'Todo')!.id)).toBe(2); 147 147 + expect(counts.get(lanes.find(l => l.value === 'In Progress')!.id)).toBe(2); 148 148 + expect(counts.get(lanes.find(l => l.value === 'Done')!.id)).toBe(1); 149 149 + }); 150 150 + }); 151 151 + 152 152 + describe('findCardLane', () => { 153 153 + it('finds the lane containing a card', () => { 154 154 + const lanes = buildKanbanLanes(CELLS, 5, CONFIG, colToLetter, HEADERS); 155 155 + const lane = findCardLane(lanes, 4); 156 156 + expect(lane!.value).toBe('Done'); 157 157 + }); 158 158 + 159 159 + it('returns null for unknown row', () => { 160 160 + const lanes = buildKanbanLanes(CELLS, 5, CONFIG, colToLetter, HEADERS); 161 161 + expect(findCardLane(lanes, 99)).toBeNull(); 162 162 + }); 163 163 + }); 164 164 + 165 165 + describe('totalCardCount', () => { 166 166 + it('sums all cards across lanes', () => { 167 167 + const lanes = buildKanbanLanes(CELLS, 5, CONFIG, colToLetter, HEADERS); 168 168 + expect(totalCardCount(lanes)).toBe(5); 169 169 + }); 170 170 + 171 171 + it('returns 0 for empty lanes', () => { 172 172 + expect(totalCardCount([])).toBe(0); 173 173 + }); 174 174 + }); 175 175 + });