Merge branch 'dev' into feature/features_change_no_reflected_without_save

* dev:
  Github issue#873, Manager does not get manager access immediately after joining the project -- Updated projectNonDirty state as well on every action that can update project
  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'
@@ -64,8 +65,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, {
@@ -157,7 +165,6 @@ class EditProjectForm extends Component {
   }
 
   submit(model) {
-    console.log('submit', this.isChanged())
     // if (this.state.isFeaturesDirty) {
     //   model.details.appDefinition.features = this.state.project.details.appDefinition.features
     // }
@@ -173,20 +180,21 @@ class EditProjectForm extends Component {
    */
   handleChange(change) {
     // removed check for isChanged argument to fire the PROJECT_DIRTY event for every change in the form
-    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,
@@ -21,9 +20,12 @@ const initialState = {
   processingMembers: false,
   processingAttachments: false,
   error: false,
-  project: {}
+  project: {},
+  projectNonDirty: {}
 }
 
+// NOTE: We should always update projectNonDirty state whenever we update the project state
+
 const parseErrorObj = (action) => {
   const data = action.payload.response.data.result
   return {
@@ -40,7 +42,8 @@ export const projectState = function (state=initialState, action) {
   case LOAD_PROJECT_PENDING:
     return Object.assign({}, state, {
       isLoading: true,
-      project: null
+      project: null,
+      projectNonDirty: null
     })
 
   case LOAD_PROJECT_SUCCESS:
@@ -54,7 +57,8 @@ export const projectState = function (state=initialState, action) {
   case CLEAR_LOADED_PROJECT:
   case GET_PROJECTS_SUCCESS:
     return Object.assign({}, state, {
-      project: {}
+      project: {},
+      projectNonDirty: {}
     })
 
   case LOAD_DIRECT_PROJECT_SUCCESS:
@@ -70,6 +74,18 @@ export const projectState = function (state=initialState, action) {
           plannedDuration: action.payload.plannedDuration,
           projectedDuration: action.payload.projectedDuration
         }}
+      },
+      projectNonDirty: {
+        budget: { $set: {
+          actualCost: action.payload.actualCost,
+          projectedCost: action.payload.projectedCost,
+          totalBudget: action.payload.totalBudget
+        }},
+        duration: { $set: {
+          actualDuration: action.payload.actualDuration,
+          plannedDuration: action.payload.plannedDuration,
+          projectedDuration: action.payload.projectedDuration
+        }}
       }
     })
 
@@ -96,7 +112,8 @@ export const projectState = function (state=initialState, action) {
     return Object.assign({}, state, {
       processing: false,
       error: false,
-      project: {}
+      project: {},
+      projectNonDirty: {}
     })
 
   // Project attachments
@@ -110,15 +127,17 @@ export const projectState = function (state=initialState, action) {
   case ADD_PROJECT_ATTACHMENT_SUCCESS:
     return update(state, {
       processingAttachments: { $set : false },
-      project: { attachments: { $push: [action.payload] } }
+      project: { attachments: { $push: [action.payload] } },
+      projectNonDirty: { attachments: { $push: [action.payload] } }
     })
 
   case UPDATE_PROJECT_ATTACHMENT_SUCCESS: {
     // get index
     const idx = _.findIndex(state.project.attachments, a => a.id === action.payload.id)
     return update(state, {
       processingAttachments: { $set : false },
-      project: { attachments: { $splice : [[idx, 1, action.payload]] } }
+      project: { attachments: { $splice : [[idx, 1, action.payload]] } },
+      projectNonDirty: { attachments: { $splice : [[idx, 1, action.payload]] } }
     })
   }
 
@@ -128,7 +147,8 @@ export const projectState = function (state=initialState, action) {
     const idx = _.findIndex(state.project.attachments, a => a.id === action.payload)
     return update(state, {
       processing: { $set : false },
-      project: { attachments: { $splice: [[idx, 1]] } }
+      project: { attachments: { $splice: [[idx, 1]] } },
+      projectNonDirty: { attachments: { $splice: [[idx, 1]] } }
     })
   }
 
@@ -142,7 +162,8 @@ export const projectState = function (state=initialState, action) {
   case ADD_PROJECT_MEMBER_SUCCESS:
     return update (state, {
       processingMembers: { $set : false },
-      project: { members: { $push: [action.payload] } }
+      project: { members: { $push: [action.payload] } },
+      projectNonDirty: { members: { $push: [action.payload] } }
     })
 
   case UPDATE_PROJECT_MEMBER_SUCCESS: {
@@ -156,7 +177,8 @@ export const projectState = function (state=initialState, action) {
     updatedMembers.splice(idx, 1, action.payload)
     return update(state, {
       processingMembers: { $set : false },
-      project: { members: { $set: updatedMembers } }
+      project: { members: { $set: updatedMembers } },
+      projectNonDirty: { members: { $set: updatedMembers } }
     })
   }
 
@@ -165,13 +187,21 @@ export const projectState = function (state=initialState, action) {
     const idx = _.findIndex(state.project.members, a => a.id === action.payload)
     return update(state, {
       processingMembers: { $set : false },
-      project: { members: { $splice: [[idx, 1]] } }
+      project: { members: { $splice: [[idx, 1]] } },
+      projectNonDirty: { members: { $splice: [[idx, 1]] } }
     })
   }
 
-  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' || key === 'features') {
+            return srcValue// srcValue contains the changed values from action payload
+          }
+        }
+      )
     })
   }