Github issue#802, can add more screen

-- Utilized the on the fly update of other form sections on every form change event. Updated SpecQuestion component to use dirty project value for numberOfScreens question

Author: Vikas Agarwal

src/projects/detail/components/EditProjectForm.jsx

@@ -2,6 +2,7 @@ import React, { Component, PropTypes } from 'react'
 import { withRouter } from 'react-router'
 import Modal from 'react-modal'
 import _ from 'lodash'
+import { unflatten } from 'flat'
 import update from 'react-addons-update'
 import FeaturePicker from './FeatureSelector/FeaturePicker'
 import { Formsy, Icons } from 'appirio-tech-react-components'
@@ -34,8 +35,15 @@ class EditProjectForm extends Component {
   }
 
   componentWillReceiveProps(nextProps) {
-    // we receipt property updates from PROJECT_DIRTY REDUX state
-    if (nextProps.project.isDirty) return
+    // we received property updates from PROJECT_DIRTY REDUX state
+    if (nextProps.project.isDirty) {
+      this.setState({
+        // sets a new state variable with dirty project
+        // any component who wants to listen for unsaved changes in project form can listen to this state variable
+        dirtyProject : Object.assign({}, nextProps.project)
+      })
+      return
+    }
     let updatedProject = Object.assign({}, nextProps.project)
     if (this.state.isFeaturesDirty && !this.state.isSaving) {
       updatedProject = update(updatedProject, {
@@ -137,21 +145,22 @@ class EditProjectForm extends Component {
 
   handleChange(change, isChanged) {
     if (isChanged) {
-      this.props.fireProjectDirty(change)
+      this.props.fireProjectDirty(unflatten(change))
     }
   }
 
 
   render() {
     const { isEdittable, sections } = this.props
-    const { project } = this.state
+    const { project, dirtyProject } = this.state
     const renderSection = (section, idx) => {
       const anySectionInvalid = _.some(this.props.sections, (s) => s.isInvalid)
       return (
         <div key={idx}>
           <SpecSection
             {...section}
             project={project}
+            dirtyProject={dirtyProject}
             sectionNumber={idx + 1}
             resetFeatures={this.onFeaturesSaveAttachedClick}
             showFeaturesDialog={this.showFeaturesDialog}

src/projects/detail/components/SpecQuestions.jsx

@@ -26,7 +26,7 @@ const getIcon = icon => {
   }
 }
 
-const SpecQuestions = ({questions, project, resetFeatures, showFeaturesDialog, isRequired}) => {
+const SpecQuestions = ({questions, project, dirtyProject, resetFeatures, showFeaturesDialog, isRequired}) => {
 
   const renderQ = (q, index) => {
     // let child = null
@@ -36,9 +36,9 @@ const SpecQuestions = ({questions, project, resetFeatures, showFeaturesDialog, i
       label: q.label,
       value: _.get(project, q.fieldName, '')
     }
-
     if (q.fieldName === 'details.appDefinition.numberScreens') {
-      const screens = _.get(project, 'details.appScreens.screens', [])
+      const p = dirtyProject ? dirtyProject : project
+      const screens = _.get(p, 'details.appScreens.screens', [])
       const definedScreens = screens.length
       _.each(q.options, (option) => {
         let maxValue = 0
@@ -145,9 +145,26 @@ const SpecQuestions = ({questions, project, resetFeatures, showFeaturesDialog, i
 }
 
 SpecQuestions.propTypes = {
+  /**
+   * Original project object for which questions are to be rendered
+   */
   project: PropTypes.object.isRequired,
+  /**
+   * Dirty project with all unsaved changes
+   */
+  dirtyProject: PropTypes.object,
+  /**
+   * Callback to be called when user clicks on Add/Edit Features button in feature picker component
+   */
   showFeaturesDialog: PropTypes.func.isRequired,
+  /**
+   * Call back to be called when user resets features from feature picker.
+   * NOTE: It seems it is not used as of now by feature picker component
+   */
   resetFeatures: PropTypes.func.isRequired,
+  /**
+   * Array of questions to be rendered. This comes from the spec template for the product
+   */
   questions: PropTypes.arrayOf(PropTypes.object).isRequired
 }
 

src/projects/detail/components/SpecSection.jsx

@@ -10,6 +10,7 @@ import { PROJECT_STATUS_DRAFT, PROJECT_NAME_MAX_LENGTH, PROJECT_REF_CODE_MAX_LEN
 const SpecSection = props => {
   const {
     project,
+    dirtyProject,
     resetFeatures,
     showFeaturesDialog,
     id,
@@ -61,6 +62,7 @@ const SpecSection = props => {
           resetFeatures={resetFeatures}
           questions={props.questions}
           project={project}
+          dirtyProject={dirtyProject}
           isRequired={props.required}
         />
       )

src/projects/reducers/project.js

@@ -1,4 +1,3 @@
-import { unflatten } from 'flat'
 import {
   LOAD_PROJECT_PENDING, LOAD_PROJECT_SUCCESS, LOAD_PROJECT_FAILURE, LOAD_DIRECT_PROJECT_SUCCESS,
   CREATE_PROJECT_PENDING, CREATE_PROJECT_SUCCESS, CREATE_PROJECT_FAILURE, CLEAR_LOADED_PROJECT,
@@ -169,9 +168,16 @@ export const projectState = function (state=initialState, action) {
     })
   }
 
-  case PROJECT_DIRTY: {
+  case PROJECT_DIRTY: {// payload contains only changed values from the project form
     return Object.assign({}, state, {
-      project: _.merge({}, state.project, unflatten(action.payload), { isDirty : true})
+      project: _.mergeWith({}, state.project, action.payload, { isDirty : true},
+        // customizer to override screens array with changed values
+        (objValue, srcValue, key) => {
+          if (key === 'screens') {
+            return srcValue// srcValue contains the changed values from action payload
+          }
+        }
+      )
     })
   }