From bbdf291885926be1c2a7f796ce72f1e8fed08fd0 Mon Sep 17 00:00:00 2001
From: ritvje <jenna.ritvanen@gmail.com>
Date: Sun, 24 Jul 2016 11:50:16 +0300
Subject: [PATCH 1/2] Implement changing participant presence in
 ParticipantDetailsPage

---
 src/client/actions/ParticipantActions.js      | 21 +++++++++--
 .../ParticipantDetailsPage.jsx                | 35 ++++++++++++++++++-
 src/client/stores/ParticipantStore.js         |  5 +++
 3 files changed, 58 insertions(+), 3 deletions(-)

diff --git a/src/client/actions/ParticipantActions.js b/src/client/actions/ParticipantActions.js
index a0573628..1c44ca6e 100644
--- a/src/client/actions/ParticipantActions.js
+++ b/src/client/actions/ParticipantActions.js
@@ -74,8 +74,12 @@ export function getParticipantActions(alt, participantResource, errorActions) {
         dispatch();
         participantResource.raw('post', 'massAssign', {
           body: { ids: participantId, fieldName: property, newValue: value } })
-          .then(participants => this.participantPropertyUpdated(property, participants),
-                err => errorActions.error(err, 'Osallistujan tallennus epäonnistui'));
+          .then(participants => {
+            if (property === 'presence') {
+              this.fetchParticipantByIdWithPresenceHistory(participants.result[0].participantId);
+            }
+            this.participantPropertyUpdated(property, participants);
+          }, err => errorActions.error(err, 'Osallistujan tallennus epäonnistui'));
       };
     }
 
@@ -85,6 +89,19 @@ export function getParticipantActions(alt, participantResource, errorActions) {
         newValue: participants.result[0][property],
       };
     }
+
+    fetchParticipantByIdWithPresenceHistory(participantId) {
+      return dispatch => {
+        dispatch();
+        participantResource.findById(participantId, `filter=${JSON.stringify({ include: { presenceHistory: 'author' } })}`)
+        .then(participant => this.participantPresenceHistoryUpdated(participant),
+              err => errorActions.error(err, 'Osallistujan tietojen lataaminen epäonnistui.'));
+      };
+    }
+
+    participantPresenceHistoryUpdated(participant) {
+      return participant;
+    }
   }
 
   return alt.createActions(ParticipantActions);
diff --git a/src/client/components/ParticipantDetailsPage/ParticipantDetailsPage.jsx b/src/client/components/ParticipantDetailsPage/ParticipantDetailsPage.jsx
index 29cf1697..1c2f9315 100644
--- a/src/client/components/ParticipantDetailsPage/ParticipantDetailsPage.jsx
+++ b/src/client/components/ParticipantDetailsPage/ParticipantDetailsPage.jsx
@@ -2,12 +2,13 @@ import React from 'react';
 import _ from 'lodash';
 import moment from 'moment';
 import Spinner from 'react-spinner';
-import { Row, Col, Panel } from 'react-bootstrap';
+import { Row, Col, Panel, Input } from 'react-bootstrap';
 import { Presence } from '../../components';
 import { ParticipantDates } from './ParticipantDates';
 import { PresenceHistory } from '../../components';
 import { PropertyTextArea } from '../../components';
 import { LoadingButton } from '../../components';
+import { getPresenceLabel } from '../../components';
 
 export function getParticipantDetailsPage(participantStore, participantActions) {
 
@@ -17,12 +18,16 @@ export function getParticipantDetailsPage(participantStore, participantActions)
       const state = participantStore.getState();
       state.campOfficeNotesSaving = false;
       state.editableInfoSaving = false;
+      state.presenceSaving = false;
+      state.selectedPresence = null;
       this.state = state;
 
       this.onStoreChanged = this.onStoreChanged.bind(this);
       this.handleChange = this.handleChange.bind(this);
+      this.onPresenceChange = this.onPresenceChange.bind(this);
       this.saveCampOfficeNotes = this.saveCampOfficeNotes.bind(this);
       this.saveEditableInfo = this.saveEditableInfo.bind(this);
+      this.savePresence = this.savePresence.bind(this);
       this.save = this.save.bind(this);
     }
 
@@ -42,6 +47,13 @@ export function getParticipantDetailsPage(participantStore, participantActions)
       const newState = state;
       state.campOfficeNotesSaving = false;
       state.editableInfoSaving = false;
+      state.presenceSaving = false;
+      this.setState(newState);
+    }
+
+    onPresenceChange(event) {
+      const newState = this.state;
+      newState.selectedPresence = event.target.value;
       this.setState(newState);
     }
 
@@ -65,6 +77,12 @@ export function getParticipantDetailsPage(participantStore, participantActions)
       this.save('editableInfo');
     }
 
+    savePresence() {
+      if (this.state.selectedPresence) {
+        participantActions.updateProperty(this.state.participantDetails.participantId, 'presence', this.state.selectedPresence);
+      }
+    }
+
     save(property) {
       participantActions.updateProperty(
         this.state.participantDetails.participantId,
@@ -126,6 +144,10 @@ export function getParticipantDetailsPage(participantStore, participantActions)
           return <dl className="margin-top-0"><dt>{ _.head(selection).groupName }</dt>{ rows }</dl>;
         });
 
+        const presenceLabel = getPresenceLabel(1);
+        const tmpOutCampLabel = getPresenceLabel(2);
+        const outCampLabel = getPresenceLabel(3);
+
         return (
           <div>
             <Row>
@@ -205,6 +227,17 @@ export function getParticipantDetailsPage(participantStore, participantActions)
               <Col md={ 9 }>
                 <Panel header="Läsnäolo">
                  <Presence value={ presence } />
+                 <div>
+                 <form className="form-inline">
+                   <Input type="select" label="Muuta tilaa" defaultValue="null" onChange={ this.onPresenceChange }>
+                     <option value="null"></option>
+                     <option value="1">{ presenceLabel }</option>
+                     <option value="2">{ tmpOutCampLabel }</option>
+                     <option value="3">{ outCampLabel }</option>
+                   </Input>
+                   <LoadingButton loading={ this.state.presenceSaving } onClick={ this.savePresence } bsStyle="primary" label="Tallenna" labelWhileLoading="Tallennetaan…"/>
+                 </form>
+                 </div>
                  <PresenceHistory value={ presenceHistory } />
                 </Panel>
                 <Panel header="Ilmoittautumispäivät">
diff --git a/src/client/stores/ParticipantStore.js b/src/client/stores/ParticipantStore.js
index 31277e5f..d16ad805 100644
--- a/src/client/stores/ParticipantStore.js
+++ b/src/client/stores/ParticipantStore.js
@@ -9,6 +9,7 @@ export function getParticipantStore(alt, ParticipantActions, RegistryUserActions
         handleLoadParticipantList: ParticipantActions.LOAD_PARTICIPANT_LIST,
         handleParticipantListUpdated: ParticipantActions.PARTICIPANT_LIST_UPDATED,
         handleParticipantPropertyUpdated: ParticipantActions.PARTICIPANT_PROPERTY_UPDATED,
+        handleParticipantPresenceHistoryUpdated: ParticipantActions.PARTICIPANT_PRESENCE_HISTORY_UPDATED,
         resetAllData: RegistryUserActions.RESET_ALL_DATA,
       });
     }
@@ -44,6 +45,10 @@ export function getParticipantStore(alt, ParticipantActions, RegistryUserActions
       this.participantDetails[property] = newValue;
     }
 
+    handleParticipantPresenceHistoryUpdated(participant) {
+      this.participantDetails.presenceHistory = participant.presenceHistory;
+    }
+
     resetAllData() {
       this.participants = undefined;
       this.participantDetails = undefined;

From 24799be6b1b1874105f321a6d0c39e503c2b4028 Mon Sep 17 00:00:00 2001
From: ritvje <jenna.ritvanen@gmail.com>
Date: Sun, 24 Jul 2016 12:17:38 +0300
Subject: [PATCH 2/2] Extract presence select in its own component

---
 .../ParticipantDetailsPage.jsx                | 17 +++----------
 .../ParticipantListPage.jsx                   | 12 ++--------
 .../containers/PresenceFilterContainer.jsx    | 14 ++---------
 .../components/Util/PresenceSelector.jsx      | 24 +++++++++++++++++++
 src/client/components/index.js                |  1 +
 5 files changed, 32 insertions(+), 36 deletions(-)
 create mode 100644 src/client/components/Util/PresenceSelector.jsx

diff --git a/src/client/components/ParticipantDetailsPage/ParticipantDetailsPage.jsx b/src/client/components/ParticipantDetailsPage/ParticipantDetailsPage.jsx
index 1c2f9315..a04f2479 100644
--- a/src/client/components/ParticipantDetailsPage/ParticipantDetailsPage.jsx
+++ b/src/client/components/ParticipantDetailsPage/ParticipantDetailsPage.jsx
@@ -2,13 +2,13 @@ import React from 'react';
 import _ from 'lodash';
 import moment from 'moment';
 import Spinner from 'react-spinner';
-import { Row, Col, Panel, Input } from 'react-bootstrap';
+import { Row, Col, Panel } from 'react-bootstrap';
 import { Presence } from '../../components';
 import { ParticipantDates } from './ParticipantDates';
 import { PresenceHistory } from '../../components';
 import { PropertyTextArea } from '../../components';
 import { LoadingButton } from '../../components';
-import { getPresenceLabel } from '../../components';
+import { PresenceSelector } from '../../components';
 
 export function getParticipantDetailsPage(participantStore, participantActions) {
 
@@ -144,10 +144,6 @@ export function getParticipantDetailsPage(participantStore, participantActions)
           return <dl className="margin-top-0"><dt>{ _.head(selection).groupName }</dt>{ rows }</dl>;
         });
 
-        const presenceLabel = getPresenceLabel(1);
-        const tmpOutCampLabel = getPresenceLabel(2);
-        const outCampLabel = getPresenceLabel(3);
-
         return (
           <div>
             <Row>
@@ -227,17 +223,10 @@ export function getParticipantDetailsPage(participantStore, participantActions)
               <Col md={ 9 }>
                 <Panel header="Läsnäolo">
                  <Presence value={ presence } />
-                 <div>
                  <form className="form-inline">
-                   <Input type="select" label="Muuta tilaa" defaultValue="null" onChange={ this.onPresenceChange }>
-                     <option value="null"></option>
-                     <option value="1">{ presenceLabel }</option>
-                     <option value="2">{ tmpOutCampLabel }</option>
-                     <option value="3">{ outCampLabel }</option>
-                   </Input>
+                   <PresenceSelector onChange={ this.onPresenceChange } label="Muuta tilaa" />
                    <LoadingButton loading={ this.state.presenceSaving } onClick={ this.savePresence } bsStyle="primary" label="Tallenna" labelWhileLoading="Tallennetaan…"/>
                  </form>
-                 </div>
                  <PresenceHistory value={ presenceHistory } />
                 </Panel>
                 <Panel header="Ilmoittautumispäivät">
diff --git a/src/client/components/ParticipantListPage/ParticipantListPage.jsx b/src/client/components/ParticipantListPage/ParticipantListPage.jsx
index d4eefbd4..3f007131 100644
--- a/src/client/components/ParticipantListPage/ParticipantListPage.jsx
+++ b/src/client/components/ParticipantListPage/ParticipantListPage.jsx
@@ -7,8 +7,8 @@ import { getListOffsetSelectorContainer } from './containers/ListOffsetSelectorC
 import { getParticipantRowsContainer } from './containers/ParticipantRowsContainer';
 import { getQuickFilterContainer } from './containers/QuickFilterContainer';
 import { getParticipantCount } from './containers/ParticipantCount';
-import { getPresenceLabel } from '../../components';
 import { LoadingButton } from '../../components';
+import { PresenceSelector } from '../../components';
 
 function getOrder(query) {
   try {
@@ -72,18 +72,10 @@ export function getMassEdit(participantStore) {
     }
 
     render() {
-      const presenceLabel = getPresenceLabel(1);
-      const tmpOutCampLabel = getPresenceLabel(2);
-      const outCampLabel = getPresenceLabel(3);
       return (
         <form className="form-inline" onSubmit={ this.onSubmit }>
           <p>{ this.props.count } { (this.props.count == 1 ? 'henkilö' : 'henkilöä') } valittu</p>
-          <Input type="select" label="Tila" defaultValue="null" onChange={ this.onChange }>
-            <option value="null">---</option>
-            <option value="1">{ presenceLabel }</option>
-            <option value="2">{ tmpOutCampLabel }</option>
-            <option value="3">{ outCampLabel }</option>
-          </Input>
+          <PresenceSelector label="Tila" onChange={ this.onChange }/>
           <LoadingButton loading={ this.state.loading } bsStyle="primary" label="Tallenna" labelWhileLoading="Tallennetaan…"/>
         </form>
       );
diff --git a/src/client/components/ParticipantListPage/containers/PresenceFilterContainer.jsx b/src/client/components/ParticipantListPage/containers/PresenceFilterContainer.jsx
index 949f836c..f915fb21 100644
--- a/src/client/components/ParticipantListPage/containers/PresenceFilterContainer.jsx
+++ b/src/client/components/ParticipantListPage/containers/PresenceFilterContainer.jsx
@@ -1,6 +1,5 @@
 import React from 'react';
-import { Input } from 'react-bootstrap';
-import { getPresenceLabel } from '../../../components';
+import { PresenceSelector } from '../../../components';
 
 export function getPresenceFilterContainer() {
   const property = 'presence';
@@ -17,17 +16,8 @@ export function getPresenceFilterContainer() {
     }
 
     render() {
-      const presenceLabel = getPresenceLabel(1);
-      const tmpOutCampLabel = getPresenceLabel(2);
-      const outCampLabel = getPresenceLabel(3);
-
       return (
-        <Input type="select" label="Tila" value={ this.props.currentSelection[property] } onChange={ this.onChange }>
-          <option value=""></option>
-          <option value="1">{ presenceLabel }</option>
-          <option value="2">{ tmpOutCampLabel }</option>
-          <option value="3">{ outCampLabel }</option>
-        </Input>
+        <PresenceSelector label="Tila" onChange={ this.onChange } value={ this.props.currentSelection[property] }/>
       );
     }
   }
diff --git a/src/client/components/Util/PresenceSelector.jsx b/src/client/components/Util/PresenceSelector.jsx
new file mode 100644
index 00000000..a5b4cfd1
--- /dev/null
+++ b/src/client/components/Util/PresenceSelector.jsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import { Input } from 'react-bootstrap';
+import { getPresenceLabel } from '../../components';
+
+export function PresenceSelector({ onChange, label, value }) {
+  const presenceLabel = getPresenceLabel(1);
+  const tmpOutCampLabel = getPresenceLabel(2);
+  const outCampLabel = getPresenceLabel(3);
+
+  return (
+    <Input type="select" label={ label } defaultValue="null" onChange={ onChange } value={ value }>
+      <option value="null"></option>
+      <option value="1">{ presenceLabel }</option>
+      <option value="2">{ tmpOutCampLabel }</option>
+      <option value="3">{ outCampLabel }</option>
+    </Input>
+  );
+}
+
+PresenceSelector.propTypes = {
+  onChange: React.PropTypes.function,
+  label: React.PropTypes.string,
+  value: React.PropTypes.object,
+};
diff --git a/src/client/components/index.js b/src/client/components/index.js
index c99165a9..ee985348 100644
--- a/src/client/components/index.js
+++ b/src/client/components/index.js
@@ -28,3 +28,4 @@ export { getLogin } from './OfflineLogin';
 export { PropertyTextArea } from './PropertyTextArea';
 export { LoadingButton } from './Util/LoadingButton';
 export { TdWithTitle } from './Util/TdWithTitle';
+export { PresenceSelector } from './Util/PresenceSelector';