Merge pull request #883 from appirio-tech/feature/features_change_no_reflected_without_save

Feature/features change no reflected without save

Author: vikasrohit

src/projects/detail/components/EditProjectForm.jsx

@@ -8,6 +8,36 @@ import FeaturePicker from './FeatureSelector/FeaturePicker'
 import { Formsy, Icons } from 'appirio-tech-react-components'
 
 import SpecSection from './SpecSection'
+import { HOC as hoc } from 'formsy-react'
+
+const FeaturePickerModal = ({ project, isEdittable, showFeaturesDialog, hideFeaturesDialog, saveFeatures, setValue }) => {
+  const setFormValue = (features, featureSeeAttached=false) => {
+    const featureObj = {
+      value: features,
+      seeAttached: featureSeeAttached
+    }
+    setValue(featureObj)
+    saveFeatures(features, featureSeeAttached)
+  }
+  return (
+    <Modal
+      isOpen={ showFeaturesDialog }
+      className="feature-selection-dialog"
+      overlayClassName="feature-selection-dialog-overlay"
+      onRequestClose={ hideFeaturesDialog }
+    >
+      <FeaturePicker
+        features={ _.get(project, 'details.appDefinition.features.value', []) }
+        isEdittable={isEdittable} onSave={ setFormValue }
+      />
+      <div onClick={ hideFeaturesDialog } className="feature-selection-dialog-close">
+        Save and close <Icons.XMarkIcon />
+      </div>
+    </Modal>
+  )
+}
+
+const FeaturePickerFormField = hoc(FeaturePickerModal)
 
 class EditProjectForm extends Component {
 
@@ -135,10 +165,9 @@ 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
-    }
+    // if (this.state.isFeaturesDirty) {
+    //   model.details.appDefinition.features = this.state.project.details.appDefinition.features
+    // }
     this.setState({isSaving: true })
     this.props.submitHandler(model)
   }
@@ -192,21 +221,17 @@ class EditProjectForm extends Component {
           onChange={ this.handleChange }
         >
           {sections.map(renderSection)}
-        </Formsy.Form>
-        <Modal
-          isOpen={ this.state.showFeaturesDialog }
-          className="feature-selection-dialog"
-          overlayClassName="feature-selection-dialog-overlay"
-          onRequestClose={ this.hideFeaturesDialog }
-        >
-          <FeaturePicker
-            features={ _.get(project, 'details.appDefinition.features.value', []) }
-            isEdittable={isEdittable} onSave={ this.saveFeatures }
+          <FeaturePickerFormField
+            name='details.appDefinition.features'
+            project={ project }
+            isEdittable={ isEdittable }
+            showFeaturesDialog={ this.state.showFeaturesDialog }
+            hideFeaturesDialog={ this.hideFeaturesDialog }
+            saveFeatures={ this.saveFeatures }
+            value={ _.get(project, 'details.appDefinition.features', {})}
           />
-          <div onClick={ this.hideFeaturesDialog } className="feature-selection-dialog-close">
-            Save and close <Icons.XMarkIcon />
-          </div>
-        </Modal>
+        </Formsy.Form>
+        
       </div>
     )
   }

src/projects/reducers/project.js

@@ -197,7 +197,7 @@ export const projectState = function (state=initialState, action) {
       project: _.mergeWith({}, state.project, action.payload, { isDirty : true},
         // customizer to override screens array with changed values
         (objValue, srcValue, key) => {
-          if (key === 'screens') {
+          if (key === 'screens' || key === 'features') {
             return srcValue// srcValue contains the changed values from action payload
           }
         }