Implement changing participant presence in ParticipantDetailsPage

partio-scout · Jul 24, 2016 · bbdf291 · bbdf291
1 parent debfa74
commit bbdf291
Show file tree

Hide file tree

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