Merge branch 'prakashbalaji-lane_sort'

README.md

@@ -66,6 +66,8 @@ Each lane in the board is modeled after this component
 | rightHeader | node     | Element to be rendered on the top-right corner |
 | cards       | array    | List of Card components as a json array. Each json element should contain `id`,`key`,`title` and optional`description` |
 | onScroll    | function | Pagination callback function called when lane scrolled to bottom `onScroll(requestedPageNumber, laneId)` |
+| onCardClick    | function |  Callback function called when card is clicked `onCardClick(cardMetadata)` |
+| sortFunction| function | The lane will be sorted by the sort function provided `sort(cardMetadata1, cardMetadata2)` |
 | children    | nodes    | Pass Card component(s) as children if not passed as `cards` prop |
 
 ###  Card
@@ -77,6 +79,7 @@ Each lane in the board is modeled after this component
 | rightHeader | node     | Element to be rendered on the top-right corner |
 | description | node     | Secondary label for the card             |
 | onClick     | function | Callback function when the card is clicked |
+| metadata    | object   | Additional business context object that is used to store application attributes. This metadata object is passed to sort and onclick functions |
 
 Refer to tests for more detailed info about the components
 

components/lib/Lane.js

@@ -32,20 +32,32 @@ export default class Lane extends Component {
     }
   };
 
+  sortedCards(cards, sortFunction) {
+      if(!cards) return [];
+      if(!sortFunction) return cards;
+      return cards.sort(function(card1, card2){
+        return sortFunction(card1.metadata, card2.metadata)
+      })
+  }
+
+  createCard(card, onCardClick){
+    if(!onCardClick){
+    return <Card key={card.key} title={card.title} rightHeader={card.rightHeader} description={card.description}/>
+    }
+    return <Card key={card.key} title={card.title} rightHeader={card.rightHeader} description={card.description} onClick={() => onCardClick(card.metadata)}/>
+  }
+
   render() {
     const {loading} = this.state
-    const {title, rightHeader, cards, onScroll, ...otherProps} = this.props
+    const {title, rightHeader, cards, onScroll, sortFunction, onCardClick, ...otherProps} = this.props
     return <Section {...otherProps} innerRef={this.laneDidMount}>
       <Header>
         <Title>{title}</Title>
         <RightContent>{rightHeader}</RightContent>
       </Header>
       <DraggableList>
-        {this.state.cards && this.state.cards.map((card) => (
-          <Card key={card.key}
-                title={card.title}
-                rightHeader={card.rightHeader}
-                description={card.description}/>
+        {this.sortedCards(this.state.cards, sortFunction).map((card) => (
+          this.createCard(card, onCardClick)
         ))
         }
         {this.props.children}

stories/InteractionsFromLane.story.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import {storiesOf} from '@kadira/storybook';
+
+import {Board, Lane, Card} from '../components';
+
+const lane = require('./data-sort.json');
+
+storiesOf('react-trello', module)
+
+  .addWithInfo('Event Handling Through Lane',
+    'Adding event handlers to each card through lane card click method',
+    () => (
+        <Board>
+        <Lane id={lane.key} title={lane.description} cards={lane.cards} onCardClick={(m) => alert(JSON.stringify(m))}>
+        </Lane>
+        </Board>
+        ))
+

stories/Sort.story.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import {storiesOf} from '@kadira/storybook';
+
+import {Board, Lane, Card} from '../components';
+
+const lane = require('./data-sort.json');
+
+storiesOf('react-trello', module)
+
+.addWithInfo('Sorted Lane',
+    'A lane sorted by completed at ascending',
+    () => (
+      <Board>
+        <Lane id={lane.key} title={lane.description} cards={lane.cards} sortFunction={(o1,o2) => new Date(o1.completedAt) - new Date(o2.completedAt)}>
+        </Lane>
+      </Board>
+    ))
+
+  .addWithInfo('Reverse Sorted Lane',
+    'A lane sorted by completed at descending',
+    () => (
+        <Board>
+        <Lane id={lane.key} title={lane.description} cards={lane.cards} sortFunction={(o1,o2) => new Date(o2.completedAt) - new Date(o1.completedAt)}>
+        </Lane>
+        </Board>
+    ));

stories/data-sort.json

@@ -0,0 +1,44 @@
+{
+  "key": "SORTED_LANE",
+  "description": "Sorted Lane",
+  "overdueCount": 20,
+  "totalCount": 70,
+  "cards": [
+    {
+      "title": "Buy milk",
+      "sla": "15 mins",
+      "description": "2 Gallons of milk at the Deli store -  2017-12-01",
+      "metadata":{
+        "completedAt":"2017-12-01T10:00:00Z",
+        "shortCode": "abc"
+      }
+    },
+    {
+      "title": "Dispose Garbage",
+      "sla": "10 mins",
+      "description": "Sort out recyclable and waste as needed - 2017-11-01",
+      "metadata":{
+        "completedAt":"2017-11-01T10:00:00Z",
+        "shortCode": "aaa"
+      }
+    },
+    {
+      "title": "Write Blog",
+      "sla": "30 mins",
+      "description": "Can AI make memes? - 2017-10-01",
+      "metadata":{
+        "completedAt":"2017-10-01T10:00:00Z",
+        "shortCode": "fa1"
+      }
+    },
+    {
+      "title": "Pay Rent",
+      "sla": "5 mins",
+      "description": "Transfer to bank account - 2017-09-01",
+      "metadata":{
+        "completedAt":"2017-09-01T10:00:00Z",
+        "shortCode": "ga2"
+      }
+    }
+  ]
+}

stories/index.js

@@ -1,3 +1,5 @@
 import './Base.story'
+import './Sort.story'
 import './Interactions.story'
+import './InteractionsFromLane.story.js'
 import './Pagination.story'