Feature/presence change in participant details page

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);

src/client/components/ParticipantDetailsPage/ParticipantDetailsPage.jsx

@@ -8,6 +8,7 @@ import { ParticipantDates } from './ParticipantDates';
 import { PresenceHistory } from '../../components';
 import { PropertyTextArea } from '../../components';
 import { LoadingButton } from '../../components';
+import { PresenceSelector } 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,
@@ -205,6 +223,10 @@ export function getParticipantDetailsPage(participantStore, participantActions)
               <Col md={ 9 }>
                 <Panel header="Läsnäolo">
                  <Presence value={ presence } />
+                 <form className="form-inline">
+                   <PresenceSelector onChange={ this.onPresenceChange } label="Muuta tilaa" />
+                   <LoadingButton loading={ this.state.presenceSaving } onClick={ this.savePresence } bsStyle="primary" label="Tallenna" labelWhileLoading="Tallennetaan…"/>
+                 </form>
                  <PresenceHistory value={ presenceHistory } />
                 </Panel>
                 <Panel header="Ilmoittautumispäivät">

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>
       );

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] }/>
       );
     }
   }

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,
+};

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';

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;