From bb829b3cbc733e9c4114c9dcc666c3bee455cab4 Mon Sep 17 00:00:00 2001
From: ritvje <jenna.ritvanen@gmail.com>
Date: Thu, 21 Jul 2016 20:54:51 +0300
Subject: [PATCH] Add row numbering to participant list

---
 .../components/ParticipantListPage/ParticipantListPage.jsx     | 3 ++-
 src/client/components/ParticipantListPage/ParticipantRow.jsx   | 3 +++
 .../containers/ParticipantRowsContainer.jsx                    | 3 ++-
 3 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/client/components/ParticipantListPage/ParticipantListPage.jsx b/src/client/components/ParticipantListPage/ParticipantListPage.jsx
index 3a3943ad..43c633b2 100644
--- a/src/client/components/ParticipantListPage/ParticipantListPage.jsx
+++ b/src/client/components/ParticipantListPage/ParticipantListPage.jsx
@@ -300,6 +300,7 @@ export function getParticipantListPage(participantStore, participantActions, sea
               <Table striped responsive condensed>
                 <thead>
                   <tr>
+                    <th></th>
                     <th><SelectAll checked={ this.state.allChecked } onChange={ this.checkAll } /></th>
                     {
                       Object.keys(columnPropertyToLabelMapping).map(property => (
@@ -315,7 +316,7 @@ export function getParticipantListPage(participantStore, participantActions, sea
                     <th colSpan={ this.state.availableDates.length }>Ilmoittautumispäivät</th>
                   </tr>
                 </thead>
-                <ParticipantRowsContainer isChecked={ this.isChecked } checkboxCallback={ this.handleCheckboxChange } columnCount={ Object.keys(columnPropertyToLabelMapping).length } availableDates={ this.state.availableDates } />
+                <ParticipantRowsContainer isChecked={ this.isChecked } checkboxCallback={ this.handleCheckboxChange } columnCount={ Object.keys(columnPropertyToLabelMapping).length } availableDates={ this.state.availableDates } offset={ offset }/>
                 <tbody className="tfooter">
                   <tr>
                     <td><SelectAll checked={ this.state.allChecked } onChange={ this.checkAll } /></td>
diff --git a/src/client/components/ParticipantListPage/ParticipantRow.jsx b/src/client/components/ParticipantListPage/ParticipantRow.jsx
index 54d029fc..6ddbbded 100644
--- a/src/client/components/ParticipantListPage/ParticipantRow.jsx
+++ b/src/client/components/ParticipantListPage/ParticipantRow.jsx
@@ -101,6 +101,7 @@ export class ParticipantRow extends React.Component {
 
     return (
       <tr>
+        <td><small style={ { color: 'grey' } }>{ 1 + this.props.index + this.props.offset }</small></td>
         <td><Input type="checkbox" onChange={ onChange } checked={ checked }  /></td>
         <td><Presence value={ presence } /></td>
         <LinkCell href={ href } title={ firstName }>{ firstName }</LinkCell>
@@ -133,6 +134,8 @@ export class ParticipantRow extends React.Component {
 
 ParticipantRow.propTypes = {
   participant: React.PropTypes.object.isRequired,
+  index: React.PropTypes.number,
+  offset: React.PropTypes.number,
   isChecked: React.PropTypes.func,
   checkboxCallback: React.PropTypes.func,
   availableDates: React.PropTypes.array.isRequired,
diff --git a/src/client/components/ParticipantListPage/containers/ParticipantRowsContainer.jsx b/src/client/components/ParticipantListPage/containers/ParticipantRowsContainer.jsx
index 9420a8a8..fb6eac61 100644
--- a/src/client/components/ParticipantListPage/containers/ParticipantRowsContainer.jsx
+++ b/src/client/components/ParticipantListPage/containers/ParticipantRowsContainer.jsx
@@ -50,7 +50,7 @@ export function getParticipantRowsContainer(participantStore) {
         availableDates,
       } = this.props;
 
-      const rowCreator = element => <ParticipantRow key={ element.participantId } isChecked={ isChecked } checkboxCallback={ checkboxCallback } availableDates={ availableDates } participant={ element } />;
+      const rowCreator = (element, index) => <ParticipantRow key={ element.participantId } isChecked={ isChecked } checkboxCallback={ checkboxCallback } availableDates={ availableDates } participant={ element } index={ index } offset={ this.props.offset }/>;
 
       return this.state.loading
         ? (
@@ -72,6 +72,7 @@ export function getParticipantRowsContainer(participantStore) {
     checkboxCallback: React.PropTypes.func,
     availableDates: React.PropTypes.array.isRequired,
     columnCount: React.PropTypes.number,
+    offset: React.PropTypes.number,
   };
 
   return ParticipantRowsContainer;