Merge pull request #168 from partio-scout/feature/row-numbering

Add row numbering to participant list
partio-scout · Jul 21, 2016 · cad0ea9 · cad0ea9
2 parents 20b3e85 + bb829b3
commit cad0ea9
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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;