[#792] Current Entry values alongside form questions.

New submissions and entry review form now displays a current value for each question, if one exists.
okfn · Oct 28, 2016 · 6ee2ae4 · 6ee2ae4
1 parent 710bb2d
commit 6ee2ae4
Show file tree

Hide file tree

Showing 6 changed files with 70 additions and 24 deletions.
diff --git a/census/controllers/census.js b/census/controllers/census.js
@@ -40,6 +40,7 @@ var submitGet = function(req, res, data) {
   }
   Promise.join(qsSchemaPromise, questionsPromise, (qsSchema, questions) => {
     if (qsSchema === undefined) qsSchema = [];
+    let currentAnswers = _.get(data.currentState.match, 'answers');
     questions = _.map(questions, question => {
       return {
         id: question.id,
@@ -49,7 +50,8 @@ var submitGet = function(req, res, data) {
         description: nunjucks.renderString(question.description,
                                            {datasetContext: datasetContext}),
         placeholder: question.placeholder,
-        config: question.config
+        config: question.config,
+        currentValue: _.get(_.find(currentAnswers, {id: question.id}), 'value', '')
       };
     });
     // We might have form data to prefill the EntryForm with.
@@ -207,7 +209,8 @@ var submit = function(req, res) {
   });
   modelUtils.getData(dataOptions)
   .then(data => {
-    data.currentState = utils.getCurrentState(data, req);
+    let match = _.merge(req.query, req.body);
+    data.currentState = utils.getCurrentState(data, match, req.params.year);
     if (req.method === 'POST') {
       submitPost(req, res, data);
     } else {
@@ -258,6 +261,9 @@ var pending = function(req, res) {
 
     Promise.join(qsSchemaPromise, questionsPromise, (qsSchema, questions) => {
       if (qsSchema === undefined) qsSchema = [];
+      let match = {place: place.id, dataset: dataset.id};
+      data.currentState = utils.getCurrentState(data, match, req.params.year);
+      let currentAnswers = _.get(data.currentState.match, 'answers');
       questions = _.map(questions, question => {
         return {
           id: question.id,
@@ -267,7 +273,9 @@ var pending = function(req, res) {
           description: nunjucks.renderString(question.description,
                                              {datasetContext: datasetContext}),
           placeholder: question.placeholder,
-          config: question.config
+          config: question.config,
+          currentValue: _.get(_.find(currentAnswers, {id: question.id}),
+                              'value', '')
         };
       });
       // Prefill the EntryForm with entry data.

diff --git a/census/controllers/utils.js b/census/controllers/utils.js
@@ -283,10 +283,19 @@ var getFormQuestions = function(req, questions) {
   return _.sortByOrder(questions, 'order', 'asc');
 };
 
-var getCurrentState = function(data, req) {
-  var match = _.merge(req.query, req.body);
-  var pending;
-  var matches;
+var getCurrentState = function(data, match, year) {
+  /*
+    Return an object containing the state of submissions for a given
+    place/dataset/year.
+
+    Returned object has `match` and `pending` properties:
+    `match`: the entry that isCurrent for the given place/dataset in the
+    `match` param obj.
+    `pending`: a boolean to detemine whether there's a pending entry for the
+    place/dataset/year.
+  */
+  let pending;
+  let matches;
 
   if (!match.place || !match.dataset) {
     match = {};
@@ -298,7 +307,7 @@ var getCurrentState = function(data, req) {
     });
     pending = _.any(data.pending, {
       isCurrent: false,
-      year: req.params.year,
+      year: year,
       place: match.place,
       dataset: match.dataset
     });

diff --git a/census/ui_app/EntryForm.jsx b/census/ui_app/EntryForm.jsx
@@ -173,7 +173,7 @@ const EntryForm = React.createClass({
           <h2>Any other comments?</h2>
         </div>
         <div>
-          <div className="current"></div>
+          <helpers.CurrentEntry />
           <div className="answer-wrapper">
             <div className="answer">
               <textarea name="details" rows="5"
@@ -198,7 +198,7 @@ const EntryForm = React.createClass({
           <h2>Would you prefer your submission to remain anonymous?</h2>
         </div>
         <div>
-          <div className="current"></div>
+          <helpers.CurrentEntry />
           <div className="answer-wrapper">
             <div className="answer">
               <input type="radio" name="anonymous"

diff --git a/census/ui_app/HelperFields.jsx b/census/ui_app/HelperFields.jsx
@@ -1,5 +1,21 @@
+import _ from 'lodash';
 import React from 'react';
 
+const CurrentEntry = props => {
+  if (props.currentValue && props.currentValue.length) {
+    let currentValue = (_.isArray(props.currentValue)) ?
+      props.currentValue : [props.currentValue];
+    let dds = _.map(currentValue, (cv, i) => <dd key={i}>{cv}</dd>);
+    return (<div className="current">
+      <dl>
+        <dt>Current entry</dt>
+        {dds}
+      </dl>
+    </div>);
+  }
+  return <div className="current" />;
+};
+
 const SubmitActions = props => {
   if (props.isReview) {
     return (<div>
@@ -10,8 +26,7 @@ const SubmitActions = props => {
           <h2>Please add a short comment as to why you are accepting or rejecting this submission. <strong>Note that your message will be publically visible</strong></h2>
         </div>
         <div>
-          <div className="current">
-          </div>
+          <CurrentEntry />
           <div className="answer-wrapper">
             <div className="answer">
               <textarea name="reviewComments" rows="5" defaultValue={props.reviewComments}></textarea>
@@ -35,8 +50,7 @@ const SubmitActions = props => {
           </p>
         </div>
         <div>
-          <div className="current">
-          </div>
+          <CurrentEntry />
           <div className="answer-wrapper">
             <div className="answer">
               <form method="post" acceptCharset="utf-8" onSubmit={props.onSubmitHandler}>
@@ -60,8 +74,7 @@ const SubmitActions = props => {
           <p><small>By submitting material to the index you agreeing to <a href="http://okfn.org/terms-of-use/">terms of use</a> and also to license your contribution (to the extent there are any rights in it!) under the <a href="http://opendatacommons.org/licenses/pddl/1.0/">Open Data Commons Public Domain Dedication and License</a>.</small></p>
         </div>
         <div>
-          <div className="current">
-          </div>
+          <CurrentEntry />
           <div className="answer-wrapper">
             <div className="answer">
               <form method="post" acceptCharset="utf-8" onSubmit={props.onSubmitHandler}>
@@ -129,5 +142,6 @@ export {
   QuestionInstructions,
   QuestionComments,
   QuestionHeader,
-  SubmitActions
+  SubmitActions,
+  CurrentEntry
 };
diff --git a/census/ui_app/QuestionFields.jsx b/census/ui_app/QuestionFields.jsx
@@ -48,7 +48,7 @@ let QuestionFieldText = React.createClass({
           </helpers.QuestionHeader>
         </div>
         <div>
-          <div className="current"></div>
+          <helpers.CurrentEntry currentValue={this.props.currentValue} />
           <div className="answer-wrapper">
             <div className="answer">
               <input type="text"
@@ -86,7 +86,7 @@ let QuestionFieldYesNo = React.createClass({
           </helpers.QuestionHeader>
         </div>
         <div>
-          <div className="current"></div>
+          <helpers.CurrentEntry currentValue={this.props.currentValue} />
           <div className="answer-wrapper">
             <div className="answer">
               <input type="radio"
@@ -166,7 +166,7 @@ let QuestionFieldLikert = React.createClass({
           </helpers.QuestionHeader>
         </div>
         <div>
-          <div className="current"></div>
+          <helpers.CurrentEntry currentValue={this.props.currentValue} />
           <div className="answer-wrapper">
             <div className="answer">
               {scaleOptionNodes}
@@ -226,6 +226,15 @@ let QuestionFieldSource = React.createClass({
     return sourceValues;
   },
 
+  componentWillMount() {
+    // Split the current value object up into a list for display by
+    // helpers.CurrentEntry.
+    this.currentValue = _.filter(this.props.currentValue, val =>
+      (val.urlValue || val.descValue));
+    this.currentValue = _.map(this.currentValue, (val, i) =>
+      <ul key={i}><li>{val.urlValue}</li><li>{val.descValue}</li></ul>);
+  },
+
   render() {
     let sourceLines = [];
     let sourceValues = this._getSourceValues();
@@ -250,7 +259,7 @@ let QuestionFieldSource = React.createClass({
           </helpers.QuestionHeader>
         </div>
         <div>
-          <div className="current"></div>
+          <helpers.CurrentEntry currentValue={this.currentValue} />
           <div className="answer-wrapper">
             <div className="answer">
               {sourceLines}
@@ -339,10 +348,11 @@ let QuestionFieldMultipleChoice = React.createClass({
     // Merge the defaultOptions with those from the value in props to
     // get the value store we'll use for the render.
     this.optionValues = _.assign(defaultOptions, this.props.value);
+    this.orderOptions = _.get(this.props.config, 'orderOptions', false);
   },
 
   render() {
-    if (_.get(this.props.config, 'orderOptions', false)) {
+    if (this.orderOptions) {
       this.optionValues = _.sortBy(this.optionValues, 'description');
     }
     let choices = _.map(this.optionValues, (option, i) => {
@@ -357,6 +367,9 @@ let QuestionFieldMultipleChoice = React.createClass({
                 {option.description}
               </QuestionFieldMultipleChoiceOption>;
     });
+    let currentValue = _.filter(this.props.currentValue, option => option.checked);
+    currentValue = _.map(currentValue, option => option.description);
+    if (this.orderOptions) currentValue = _.sortBy(currentValue);
     return (<div className={'multiple question ' + this.props.getClassValues()}>
       <div className="main">
         <div>
@@ -367,7 +380,7 @@ let QuestionFieldMultipleChoice = React.createClass({
           </helpers.QuestionHeader>
         </div>
         <div>
-          <div className="current"></div>
+          <helpers.CurrentEntry currentValue={currentValue} />
           <div className="answer-wrapper">
             <div className={this._getAnswerClassNames()}>
               <ul>

diff --git a/census/ui_app/QuestionForm.jsx b/census/ui_app/QuestionForm.jsx
@@ -17,7 +17,8 @@ const QuestionForm = React.createClass({
       return {
         id: q.id,
         value: _.get(answer, 'value', ''),
-        commentValue: _.get(answer, 'commentValue', '')
+        commentValue: _.get(answer, 'commentValue', ''),
+        currentValue: _.get(q, 'currentValue', '')
       };
     });
     return {
@@ -162,6 +163,7 @@ const QuestionForm = React.createClass({
                         visibleProps={this.getVisiblePropsForId(q.id)}
                         value={q.value}
                         commentValue={q.commentValue}
+                        currentValue={q.currentValue}
                         onChange={this.onFieldChange}
                         onCommentChange={this.onCommentChange}
                         label={this.getLabelForId(q.id)}