diff --git a/src/controllers/BoardContainer.js b/src/controllers/BoardContainer.js index 2e80cd737..c3e344f8e 100644 --- a/src/controllers/BoardContainer.js +++ b/src/controllers/BoardContainer.js @@ -49,7 +49,12 @@ class BoardContainer extends Component { handleLaneDragEnd(removedIndex, addedIndex, payload) } } - getCardDetails = (laneId, cardIndex) => { + getCardDetails = (laneId, cardIndex, sortLaneFunction) => { + if (sortLaneFunction) { + const toBeSorted = this.props.reducerData.lanes.find(lane => lane.id === laneId).cards; + toBeSorted.sort(sortLaneFunction); + return toBeSorted[cardIndex]; + } return this.props.reducerData.lanes.find(lane => lane.id === laneId).cards[cardIndex] } getLaneDetails = index => { diff --git a/src/controllers/Lane.js b/src/controllers/Lane.js index 45bf08aa7..25d3d184c 100644 --- a/src/controllers/Lane.js +++ b/src/controllers/Lane.js @@ -117,7 +117,7 @@ class Lane extends Component { return `TrelloBoard${boardId}Lane` } - onDragEnd = (laneId, result) => { + onDragEnd = (laneId, result, laneSortFunction) => { const {handleDragEnd} = this.props const {addedIndex, payload} = result @@ -133,7 +133,8 @@ class Lane extends Component { fromLaneId: payload.laneId, toLaneId: laneId, cardId: payload.id, - index: addedIndex + index: addedIndex, + laneSortFunction }) this.props.onCardMoveAcrossLanes(payload.laneId, laneId, payload.id, addedIndex) } @@ -191,11 +192,11 @@ class Lane extends Component { dragClass={cardDragClass} dropClass={cardDropClass} onDragStart={this.onDragStart} - onDrop={e => this.onDragEnd(id, e)} + onDrop={e => this.onDragEnd(id, e, laneSortFunction)} onDragEnter={() => this.setState({isDraggingOver: true})} onDragLeave={() => this.setState({isDraggingOver: false})} shouldAcceptDrop={this.shouldAcceptDrop} - getChildPayload={index => this.props.getCardDetails(id, index)}> + getChildPayload={index => this.props.getCardDetails(id, index, laneSortFunction)}> {cardList} {editable && !addCardMode && } @@ -217,7 +218,7 @@ class Lane extends Component { this.props.onLaneUpdate(this.props.id, {title: value}) } - renderHeader = (pickedProps) => { + renderHeader = pickedProps => { const {components} = this.props return ( { + appendCardsToLane: (state, {laneId, newCards, index}, laneSortFunction) => { const lane = state.lanes.find(lane => lane.id === laneId) newCards = newCards .map(c => update(c, {laneId: {$set: laneId}})) .filter(c => lane.cards.find(card => card.id === c.id) == null) + return state.lanes.map(lane => { if (lane.id === laneId) { if (index !== undefined) { - return update(lane, {cards: {$splice: [[index, 0, ...newCards]]}}) + let cardsToUpdate = [...lane.cards, ...newCards] + + if (laneSortFunction) { + cardsToUpdate.sort(laneSortFunction) + } + + return update(lane, {cards: {$set: cardsToUpdate}}) } else { const cardsToUpdate = [...lane.cards, ...newCards] return update(lane, {cards: {$set: cardsToUpdate}}) @@ -36,8 +43,8 @@ const LaneHelper = { }) }, - appendCardToLane: (state, {laneId, card, index}) => { - const newLanes = LaneHelper.appendCardsToLane(state, {laneId: laneId, newCards: [card], index}) + appendCardToLane: (state, {laneId, card, index}, laneSortFunction) => { + const newLanes = LaneHelper.appendCardsToLane(state, {laneId: laneId, newCards: [card], index}, laneSortFunction) return update(state, {lanes: {$set: newLanes}}) }, @@ -48,8 +55,8 @@ const LaneHelper = { updateLane: (state, updatedLane) => { const newLanes = state.lanes.map(lane => { - if (updatedLane.id == lane.id ) { - return { ...lane, ...updatedLane } + if (updatedLane.id == lane.id) { + return {...lane, ...updatedLane} } else { return lane } @@ -91,7 +98,7 @@ const LaneHelper = { }) }, - moveCardAcrossLanes: (state, {fromLaneId, toLaneId, cardId, index}) => { + moveCardAcrossLanes: (state, {fromLaneId, toLaneId, cardId, index, laneSortFunction}) => { let cardToMove = null const interimLanes = state.lanes.map(lane => { if (lane.id === fromLaneId) { @@ -103,7 +110,11 @@ const LaneHelper = { } }) const updatedState = update(state, {lanes: {$set: interimLanes}}) - return LaneHelper.appendCardToLane(updatedState, {laneId: toLaneId, card: cardToMove, index: index}) + return LaneHelper.appendCardToLane( + updatedState, + {laneId: toLaneId, card: cardToMove, index: index}, + laneSortFunction + ) }, updateCardsForLane: (state, {laneId, cards}) => { @@ -123,7 +134,7 @@ const LaneHelper = { moveLane: (state, {oldIndex, newIndex}) => { const laneToMove = state.lanes[oldIndex] - const tempState = update(state, {lanes: {$splice: [[oldIndex, 1]]}}); + const tempState = update(state, {lanes: {$splice: [[oldIndex, 1]]}}) return update(tempState, {lanes: {$splice: [[newIndex, 0, laneToMove]]}}) }, diff --git a/stories/Sort.story.js b/stories/Sort.story.js index dcd3e0d42..b06b96d83 100644 --- a/stories/Sort.story.js +++ b/stories/Sort.story.js @@ -5,14 +5,28 @@ import Board from '../src' const data = require('./data/data-sort.json') +function compare(a, b) { + if (a.title > b.title) { + return 1 + } + if (a.title < b.title) { + return -1 + } + + return 0 +} + storiesOf('Basic Functions', module) - .add( - 'Sorted Lane', - () => new Date(card1.metadata.completedAt) - new Date(card2.metadata.completedAt)} />, - {info: 'A lane sorted by completed at ascending'} - ) + .add('Sorted Lane', () => , { + info: 'A lane sorted by completed at ascending' + }) .add( 'Reverse Sorted Lane', - () => new Date(card2.metadata.completedAt) - new Date(card1.metadata.completedAt)} />, + () => ( + new Date(card2.metadata.completedAt) - new Date(card1.metadata.completedAt)} + /> + ), {info: 'A lane sorted by completed at descending'} ) diff --git a/stories/data/data-sort.json b/stories/data/data-sort.json index babe22cfe..dbe0fb850 100644 --- a/stories/data/data-sort.json +++ b/stories/data/data-sort.json @@ -47,6 +47,20 @@ } } ] + }, + { + "id": "WIP", + "title": "Work In Progress", + "label": "10/20", + "style": {"width": 280}, + "cards": [ + { + "id": "Wip1", + "title": "Clean House", + "label": "30 mins", + "description": "Soap wash and polish floor. Polish windows and doors. Scrap all broken glasses" + } + ] } ] } diff --git a/tests/__snapshots__/Storyshots.test.js.snap b/tests/__snapshots__/Storyshots.test.js.snap index 73f75604b..ff425a160 100644 --- a/tests/__snapshots__/Storyshots.test.js.snap +++ b/tests/__snapshots__/Storyshots.test.js.snap @@ -10335,6 +10335,24 @@ exports[`Storyshots Basic Functions Reverse Sorted Lane 1`] = ` "label": "20/70", "title": "Sorted Lane", }, + Object { + "cards": Array [ + Object { + "description": "Soap wash and polish floor. Polish windows and doors. Scrap all broken glasses", + "id": "Wip1", + "label": "30 mins", + "laneId": "WIP", + "title": "Clean House", + }, + ], + "currentPage": 1, + "id": "WIP", + "label": "10/20", + "style": Object { + "width": 280, + }, + "title": "Work In Progress", + }, ], } } @@ -10545,6 +10563,87 @@ exports[`Storyshots Basic Functions Reverse Sorted Lane 1`] = ` +
+
+ + Work In Progress + + + + 10/20 + + +
+
+
+
+
+
+ + Clean House + + + 30 mins + +
+ +
+
+
+ Soap wash and polish floor. Polish windows and doors. Scrap all broken glasses +
+
+
+
+
+
@@ -10866,6 +10965,115 @@ exports[`Storyshots Basic Functions Reverse Sorted Lane 1`] = ` } + , + + + { + + +
+ + + + + id + + + : + + 'WIP' + + , + + +
+ + + + + title + + + : + + 'Work In Progress' + + , + + +
+ + + + + label + + + : + + '10/20' + + , + + +
+ + + + … + + +
+ + + } + + ] } @@ -11189,6 +11397,24 @@ exports[`Storyshots Basic Functions Sorted Lane 1`] = ` "label": "20/70", "title": "Sorted Lane", }, + Object { + "cards": Array [ + Object { + "description": "Soap wash and polish floor. Polish windows and doors. Scrap all broken glasses", + "id": "Wip1", + "label": "30 mins", + "laneId": "WIP", + "title": "Clean House", + }, + ], + "currentPage": 1, + "id": "WIP", + "label": "10/20", + "style": Object { + "width": 280, + }, + "title": "Work In Progress", + }, ], } } @@ -11237,7 +11463,7 @@ exports[`Storyshots Basic Functions Sorted Lane 1`] = ` >
@@ -11248,12 +11474,12 @@ exports[`Storyshots Basic Functions Sorted Lane 1`] = ` className="c9" draggable={true} > - Pay Rent + Buy milk - 2017-09-01 + 2017-12-01
- Transfer to bank account + 2 Gallons of milk at the Deli store
@@ -11278,7 +11504,7 @@ exports[`Storyshots Basic Functions Sorted Lane 1`] = ` >
@@ -11289,12 +11515,12 @@ exports[`Storyshots Basic Functions Sorted Lane 1`] = ` className="c9" draggable={true} > - Write Blog + Dispose Garbage - 2017-10-01 + 2017-11-01
- Can AI make memes? + Sort out recyclable and waste as needed
@@ -11319,7 +11545,7 @@ exports[`Storyshots Basic Functions Sorted Lane 1`] = ` >
@@ -11330,12 +11556,12 @@ exports[`Storyshots Basic Functions Sorted Lane 1`] = ` className="c9" draggable={true} > - Dispose Garbage + Pay Rent - 2017-11-01 + 2017-09-01
- Sort out recyclable and waste as needed + Transfer to bank account
@@ -11360,7 +11586,7 @@ exports[`Storyshots Basic Functions Sorted Lane 1`] = ` >
@@ -11371,12 +11597,12 @@ exports[`Storyshots Basic Functions Sorted Lane 1`] = ` className="c9" draggable={true} > - Buy milk + Write Blog - 2017-12-01 + 2017-10-01
- 2 Gallons of milk at the Deli store + Can AI make memes? +
+
+ + + + +
+
+ + Work In Progress + + + + 10/20 + + +
+
+
+
+
+
+ + Clean House + + + 30 mins + +
+ +
+
+
+ Soap wash and polish floor. Polish windows and doors. Scrap all broken glasses
@@ -11720,6 +12027,115 @@ exports[`Storyshots Basic Functions Sorted Lane 1`] = ` } + , + + + { + + +
+ + + + + id + + + : + + 'WIP' + + , + + +
+ + + + + title + + + : + + 'Work In Progress' + + , + + +
+ + + + + label + + + : + + '10/20' + + , + + +
+ + + + … + + +
+ + + } + + ] } @@ -11748,7 +12164,7 @@ exports[`Storyshots Basic Functions Sorted Lane 1`] = ` } } > - laneSortFunction + compare } @@ -21973,6 +22389,24 @@ exports[`Storyshots Custom Components NewLaneForm 1`] = ` "label": "20/70", "title": "Sorted Lane", }, + Object { + "cards": Array [ + Object { + "description": "Soap wash and polish floor. Polish windows and doors. Scrap all broken glasses", + "id": "Wip1", + "label": "30 mins", + "laneId": "WIP", + "title": "Clean House", + }, + ], + "currentPage": 1, + "id": "WIP", + "label": "10/20", + "style": Object { + "width": 280, + }, + "title": "Work In Progress", + }, ], } } @@ -22236,43 +22670,177 @@ exports[`Storyshots Custom Components NewLaneForm 1`] = `
- - -
-
- -
-
- - - + +
+
+ + Lane actions + +
+ +
+
+
+
+ Delete lane +
+
+
+ + +
+
+
+
+
+ + Clean House + + + 30 mins + +
+ +
+
+
+ Soap wash and polish floor. Polish windows and doors. Scrap all broken glasses +
+
+
+
+ + Click to add card + +
+ + + +
+
+ +
+
+ + +
+ , + + + { + + +
+ + + + + id + + + : + + 'WIP' + + , + + +
+ + + + + title + + + : + + 'Work In Progress' + + , + + +
+ + + + + label + + + : + + '10/20' + + , + + +
+ + + + … + + +
+ + + } + + ] } @@ -23115,6 +23792,24 @@ exports[`Storyshots Custom Components NewLaneSection 1`] = ` "label": "20/70", "title": "Sorted Lane", }, + Object { + "cards": Array [ + Object { + "description": "Soap wash and polish floor. Polish windows and doors. Scrap all broken glasses", + "id": "Wip1", + "label": "30 mins", + "laneId": "WIP", + "title": "Clean House", + }, + ], + "currentPage": 1, + "id": "WIP", + "label": "10/20", + "style": Object { + "width": 280, + }, + "title": "Work In Progress", + }, ], } } @@ -23333,7 +24028,141 @@ exports[`Storyshots Custom Components NewLaneSection 1`] = ` >
+
+ + Pay Rent + + + 2017-09-01 + +
+ +
+
+
+ Transfer to bank account +
+
+
+ + + Click to add card + + + +
+
+ + Work In Progress + + + + 10/20 + + +
+ + + +
+
+ + Lane actions + +
+ +
+
+
+
+ Delete lane +
+
+
+
+
+
+
+
+
@@ -23344,12 +24173,12 @@ exports[`Storyshots Custom Components NewLaneSection 1`] = ` className="c19" draggable={true} > - Pay Rent + Clean House - 2017-09-01 + 30 mins
- Transfer to bank account + Soap wash and polish floor. Polish windows and doors. Scrap all broken glasses
@@ -23763,6 +24592,115 @@ exports[`Storyshots Custom Components NewLaneSection 1`] = ` } + , + + + { + + +
+ + + + + id + + + : + + 'WIP' + + , + + +
+ + + + + title + + + : + + 'Work In Progress' + + , + + +
+ + + + + label + + + : + + '10/20' + + , + + +
+ + + + … + + +
+ + + } + + ] } @@ -32531,6 +33469,24 @@ exports[`Storyshots Editable Board Add New Lane 1`] = ` "label": "20/70", "title": "Sorted Lane", }, + Object { + "cards": Array [ + Object { + "description": "Soap wash and polish floor. Polish windows and doors. Scrap all broken glasses", + "id": "Wip1", + "label": "30 mins", + "laneId": "WIP", + "title": "Clean House", + }, + ], + "currentPage": 1, + "id": "WIP", + "label": "10/20", + "style": Object { + "width": 280, + }, + "title": "Work In Progress", + }, ], } } @@ -32704,52 +33660,186 @@ exports[`Storyshots Editable Board Add New Lane 1`] = `
+
+
+ + Write Blog + + + 2017-10-01 + +
+ +
+
+
+ Can AI make memes? +
+
+
+
+
+
+ + Pay Rent + + + 2017-09-01 + +
+ +
+
+
+ Transfer to bank account +
+
+
+
+ + Click to add card + + +
+
+
+ + Work In Progress + + + + 10/20 + + +
+ + + +
-
-
- - Write Blog - - - 2017-10-01 - -
+
+ -
-
+ ✖ + +
+
+
- Can AI make memes? + Delete lane
- +
+ +
+
+
@@ -32760,12 +33850,12 @@ exports[`Storyshots Editable Board Add New Lane 1`] = ` className="c19" draggable={true} > - Pay Rent + Clean House - 2017-09-01 + 30 mins
- Transfer to bank account + Soap wash and polish floor. Polish windows and doors. Scrap all broken glasses
@@ -33130,6 +34220,115 @@ exports[`Storyshots Editable Board Add New Lane 1`] = ` } + , + + + { + + +
+ + + + + id + + + : + + 'WIP' + + , + + +
+ + + + + title + + + : + + 'Work In Progress' + + , + + +
+ + + + + label + + + : + + '10/20' + + , + + +
+ + + + … + + +
+ + + } + + ] } @@ -37577,6 +38776,24 @@ exports[`Storyshots Editable Board Inline Edit Lane Title 1`] = ` "label": "20/70", "title": "Sorted Lane", }, + Object { + "cards": Array [ + Object { + "description": "Soap wash and polish floor. Polish windows and doors. Scrap all broken glasses", + "id": "Wip1", + "label": "30 mins", + "laneId": "WIP", + "title": "Clean House", + }, + ], + "currentPage": 1, + "id": "WIP", + "label": "10/20", + "style": Object { + "width": 280, + }, + "title": "Work In Progress", + }, ], } } @@ -37686,7 +38903,48 @@ exports[`Storyshots Editable Board Inline Edit Lane Title 1`] = ` >
+
+ + Buy milk + + + 2017-12-01 + +
+ +
+
+
+ 2 Gallons of milk at the Deli store +
+
+
+
+
@@ -37697,12 +38955,12 @@ exports[`Storyshots Editable Board Inline Edit Lane Title 1`] = ` className="c20" draggable={true} > - Buy milk + Dispose Garbage - 2017-12-01 + 2017-11-01
- 2 Gallons of milk at the Deli store + Sort out recyclable and waste as needed
@@ -37727,7 +38985,7 @@ exports[`Storyshots Editable Board Inline Edit Lane Title 1`] = ` >
@@ -37738,12 +38996,12 @@ exports[`Storyshots Editable Board Inline Edit Lane Title 1`] = ` className="c20" draggable={true} > - Dispose Garbage + Write Blog - 2017-11-01 + 2017-10-01
- Sort out recyclable and waste as needed + Can AI make memes?
@@ -37768,7 +39026,7 @@ exports[`Storyshots Editable Board Inline Edit Lane Title 1`] = ` >
@@ -37779,12 +39037,12 @@ exports[`Storyshots Editable Board Inline Edit Lane Title 1`] = ` className="c20" draggable={true} > - Write Blog + Pay Rent - 2017-10-01 + 2017-09-01
- Can AI make memes? + Transfer to bank account
+ + + Click to add card + + +
+
+
+ +