Merge pull request #248 from jwillia/RESCOI_123_6

RESCOI-123: add edit functionality to travel log, fixed issues with d…
kuali · Nov 5, 2015 · 4249ab9 · 4249ab9
2 parents c59d6fc + 827a94f
commit 4249ab9
Show file tree

Hide file tree

Showing 5 changed files with 348 additions and 14 deletions.
diff --git a/client/scripts/actions/TravelLogActions.js b/client/scripts/actions/TravelLogActions.js
@@ -43,5 +43,13 @@ class _TravelLogActions {
   deleteEntry(relationshipId) { this.dispatch(relationshipId); }
 
   archiveEntry(relationshipId) { this.dispatch(relationshipId); }
+
+  editEntry(relationshipId) { this.dispatch(relationshipId); }
+
+  saveEntry(relationshipId) { this.dispatch(relationshipId); }
+
+  cancelEntry(relationshipId) { this.dispatch(relationshipId); }
+
+  updateEntry(field, value, relationshipId) { this.dispatch({field: field, value: value, relationshipId: relationshipId}); }
 }
 export let TravelLogActions = alt.createActions(_TravelLogActions);
diff --git a/client/scripts/components/User/TravelLog/Entry.jsx b/client/scripts/components/User/TravelLog/Entry.jsx
@@ -21,13 +21,22 @@ import {ProminentButton} from '../../ProminentButton';
 import {formatDate} from '../../../formatDate';
 import {COIConstants} from '../../../../../COIConstants';
 import {TravelLogActions} from '../../../actions/TravelLogActions';
+import TextField from '../TextField';
+import CurrencyField from '../CurrencyField';
+import DateRangeField from '../DateRangeField';
 
 export class Entry extends React.Component {
   constructor() {
     super();
 
     this.deleteEntry = this.deleteEntry.bind(this);
     this.archiveEntry = this.archiveEntry.bind(this);
+    this.editEntry = this.editEntry.bind(this);
+    this.saveEntry = this.saveEntry.bind(this);
+    this.cancelEntry = this.cancelEntry.bind(this);
+    this.updateField = this.updateField.bind(this);
+    this.updateStartDate = this.updateStartDate.bind(this);
+    this.updateEndDate = this.updateEndDate.bind(this);
   }
 
   deleteEntry() {
@@ -38,6 +47,30 @@ export class Entry extends React.Component {
     TravelLogActions.archiveEntry(this.props.travelLog.relationshipId);
   }
 
+  editEntry() {
+    TravelLogActions.editEntry(this.props.travelLog.relationshipId);
+  }
+
+  saveEntry() {
+    TravelLogActions.saveEntry(this.props.travelLog.relationshipId);
+  }
+
+  cancelEntry() {
+    TravelLogActions.cancelEntry(this.props.travelLog.relationshipId);
+  }
+
+  updateField(evt) {
+    TravelLogActions.updateEntry(evt.target.id, evt.target.value, this.props.travelLog.relationshipId);
+  }
+
+  updateStartDate(newValue) {
+    TravelLogActions.updateEntry('startDate', newValue, this.props.travelLog.relationshipId);
+  }
+
+  updateEndDate(newValue) {
+    TravelLogActions.updateEntry('endDate', newValue, this.props.travelLog.relationshipId);
+  }
+
   render() {
     let styles = {
       container: {
@@ -92,6 +125,24 @@ export class Entry extends React.Component {
       },
       middle: {
         marginTop: 10
+      },
+      textField: {
+        container: {
+          display: 'inline-block',
+          width: '33%'
+        },
+        input: {
+          padding: '2px 8px',
+          fontSize: 16,
+          borderRadius: 5,
+          border: '1px solid #ccc',
+          height: 30,
+          width: '95%'
+        },
+        label: {
+          marginBottom: 5,
+          fontWeight: '500'
+        }
       }
     };
 
@@ -115,7 +166,14 @@ export class Entry extends React.Component {
       );
     }
 
-    if (this.props.travelLog.status === COIConstants.RELATIONSHIP_STATUS.DISCLOSED) {
+    if (this.props.editing === true) {
+      actionButtons = (
+        <div style={styles.buttons}>
+          <ProminentButton name="Save" data-for={this.props.travelLog.entityName} onClick={this.saveEntry} style={styles.button}>Save</ProminentButton>
+          <ProminentButton name="Cancel" data-for={this.props.travelLog.entityName} onClick={this.cancelEntry} style={styles.button}>Cancel</ProminentButton>
+        </div>
+      );
+    } else if (this.props.travelLog.status === COIConstants.RELATIONSHIP_STATUS.DISCLOSED) {
       actionButtons = (
         <div style={styles.buttons}>
           {disclosedDate}
@@ -125,14 +183,62 @@ export class Entry extends React.Component {
     } else {
       actionButtons = (
         <div style={styles.buttons}>
-          <ProminentButton name="Edit" data-for={this.props.travelLog.entityName} style={styles.button}>Edit</ProminentButton>
+          <ProminentButton name="Edit" data-for={this.props.travelLog.entityName} onClick={this.editEntry} style={styles.button}>Edit</ProminentButton>
           <ProminentButton name="Delete" data-for={this.props.travelLog.entityName} onClick={this.deleteEntry} style={styles.button}>Delete</ProminentButton>
         </div>
       );
     }
 
-    return (
-      <div style={styles.container}>
+    let jsx;
+    if (this.props.editing) {
+      jsx = (
+        <div>
+          <TextField
+          id='entityName'
+          label='ENTITY NAME'
+          onChange={this.updateField}
+          name="Entity Name"
+          styles={styles.textField}
+          value={this.props.travelLog.entityName}
+          />
+          <CurrencyField
+          id='amount'
+          label='AMOUNT'
+          onChange={this.updateField}
+          name="Amount"
+          styles={styles.textField}
+          value={this.props.travelLog.amount}
+          />
+          <TextField
+          id='destination'
+          label='DESTINATION'
+          onChange={this.updateField}
+          name="Destinantion"
+          styles={styles.textField}
+          value={this.props.travelLog.destination}
+          />
+          <DateRangeField
+          id='dateRange'
+          label='DATE RANGE'
+          onStartDateChange={this.updateStartDate}
+          onEndDateChange={this.updateEndDate}
+          styles={styles.textField}
+          startDate={this.props.travelLog.startDate}
+          endDate={this.props.travelLog.endDate}
+          />
+          <TextField
+          id='reason'
+          label='REASON'
+          onChange={this.updateField}
+          name="Reason"
+          styles={styles.textField}
+          value={this.props.travelLog.reason}
+          />
+          {actionButtons}
+        </div>
+      );
+    } else {
+      jsx = (
         <div>
           <div style={styles.left}>
             <div>
@@ -162,6 +268,12 @@ export class Entry extends React.Component {
           </div>
           {actionButtons}
         </div>
+      );
+    }
+
+    return (
+      <div style={styles.container}>
+        {jsx}
       </div>
     );
   }

diff --git a/client/scripts/components/User/TravelLog/TravelLog.jsx b/client/scripts/components/User/TravelLog/TravelLog.jsx
@@ -36,7 +36,8 @@ export class TravelLog extends React.Component {
     this.state = {
       entries: storeState.entries,
       potentialEntry: storeState.potentialEntry,
-      validating: storeState.validating
+      validating: storeState.validating,
+      entryStates: storeState.entryStates
     };
 
     this.onChange = this.onChange.bind(this);
@@ -56,7 +57,8 @@ export class TravelLog extends React.Component {
     this.setState({
       entries: storeState.entries,
       potentialEntry: storeState.potentialEntry,
-      validating: storeState.validating
+      validating: storeState.validating,
+      entryStates: storeState.entryStates
     });
   }
 
@@ -94,7 +96,10 @@ export class TravelLog extends React.Component {
     if (this.state.entries.length > 0) {
       travelLogs = this.state.entries.map(travelLog => {
         return (
-          <Entry travelLog={travelLog}/>
+          <Entry
+            travelLog={travelLog}
+            editing={this.state.entryStates[travelLog.relationshipId] ? this.state.entryStates[travelLog.relationshipId].editing : false}
+          />
         );
       });
     }

diff --git a/client/scripts/stores/TravelLogStore.js b/client/scripts/stores/TravelLogStore.js
@@ -21,6 +21,10 @@ import {TravelLogActions} from '../actions/TravelLogActions.js';
 import alt from '../alt';
 import {processResponse, createRequest} from '../HttpUtils';
 
+let cloneObject = original => {
+  return JSON.parse(JSON.stringify(original));
+};
+
 class _TravelLogStore extends AutoBindingStore {
   constructor() {
     super(TravelLogActions);
@@ -36,6 +40,7 @@ class _TravelLogStore extends AutoBindingStore {
     this.sortDirection = 'ASCENDING';
     this.filter = 'all';
     this.validating = false;
+    this.entryStates = {};
   }
 
   refreshTravelLogEntries() {
@@ -88,6 +93,54 @@ class _TravelLogStore extends AutoBindingStore {
       }));
   }
 
+  getEntry(relationshipId) {
+    return this.entries.find(entry => {
+      return entry.relationshipId === relationshipId;
+    });
+  }
+
+  editEntry(relationshipId) {
+    if (!this.entryStates[relationshipId]) {
+      this.entryStates[relationshipId] = {};
+    }
+    this.entryStates[relationshipId].editing = true;
+    this.entryStates[relationshipId].snapshot = cloneObject(this.getEntry(relationshipId));
+  }
+
+  saveEntry(relationshipId) {
+    let entryToSave = this.entries.find(entry => {
+      return entry.relationshipId === relationshipId;
+    });
+
+    this.entryStates[relationshipId].editing = false;
+    this.entryStates[relationshipId].snapshot = undefined;
+
+    createRequest().put('/api/coi/travel-log-entries/' + relationshipId)
+    .send(entryToSave)
+    .end(processResponse(() => {}));
+  }
+
+  cancelEntry(relationshipId) {
+    let index = this.entries.findIndex(entry => {
+      return entry.relationshipId === relationshipId;
+    });
+
+    if (index >= 0) {
+      this.entries[index] = this.entryStates[relationshipId].snapshot;
+    }
+
+    this.entryStates[relationshipId].editing = false;
+    this.entryStates[relationshipId].snapshot = undefined;
+  }
+
+  updateEntry(data) {
+    let entryToSave = this.entries.find(entry => {
+      return entry.relationshipId === data.relationshipId;
+    });
+
+    entryToSave[data.field] = data.value;
+  }
+
   turnOnValidations() {
     this.validating = true;
   }