Merge pull request #228 from genny-project/feature-pcs-181

updated form to check for missing bes for asks, input autocomplete lo…
genny-project · Dec 19, 2018 · ebbdbf7 · ebbdbf7
2 parents 42d6ea3 + 47b1bf5
commit ebbdbf7
Show file tree

Hide file tree

Showing 3 changed files with 103 additions and 15 deletions.
diff --git a/src/views/components/form/Form.js b/src/views/components/form/Form.js
@@ -5,6 +5,7 @@ import { Formik } from 'formik';
 import { connect } from 'react-redux';
 import capitalize from 'lodash.capitalize';
 import lowercase from 'lodash.lowercase';
+import dlv from 'dlv';
 import { isArray, isObject, isString } from '../../../utils';
 import { Bridge } from '../../../utils/vertx';
 import shallowCompare from '../../../utils/shallow-compare';
@@ -59,6 +60,7 @@ class Form extends Component {
     initialValues: {},
     questionGroups: [],
     formStatus: null,
+    missingBaseEntities: [],
   }
 
   componentDidMount() {
@@ -85,7 +87,7 @@ class Form extends Component {
 
       if ( newGroups.length > 0 ) {
         // eslint-disable-next-line react/no-did-update-set-state
-        this.setState({ questionGroups: newGroups }, () => {
+        this.setState({ questionGroups: newGroups, missingBaseEntities: [] }, () => {
           if ( checkIfSetNeeded ) {
             this.setInitialValues();
             this.setValidationList();
@@ -102,7 +104,7 @@ class Form extends Component {
 
       if ( newGroups.length > 0 ) {
         // eslint-disable-next-line react/no-did-update-set-state
-        this.setState({ questionGroups: newGroups }, () => {
+        this.setState({ questionGroups: newGroups, missingBaseEntities: [] }, () => {
           if ( checkIfSetNeeded ) {
             this.setInitialValues();
             this.setValidationList();
@@ -120,14 +122,43 @@ class Form extends Component {
 
       if ( newGroups.length !== prevGroups.length ) {
         // eslint-disable-next-line react/no-did-update-set-state
-        this.setState({ questionGroups: newGroups }, () => {
+        this.setState({ questionGroups: newGroups, missingBaseEntities: [] }, () => {
           if ( checkIfSetNeeded ) {
             this.setInitialValues();
             this.setValidationList();
           }
         });
       }
     }
+
+    else if (
+      isArray( this.state.missingBaseEntities, { ofMinLength: 1 })
+    ) {
+      if (
+        this.checkIfNewBaseEntities( this.props )
+      ) {
+        this.setInitialValues();
+        this.setValidationList();
+      }
+    }
+
+    // else if (
+    //   isArray( questionGroupCode ) &&
+    //   questionGroupCode.length !== questionGroups.length
+    // ) {
+    //   const newGroups = this.getQuestionGroups();
+    //   const prevGroups = this.getQuestionGroups( prevProps );
+
+    //   if ( newGroups.length !== prevGroups.length ) {
+    //     // eslint-disable-next-line react/no-did-update-set-state
+    //     this.setState({ questionGroups: newGroups }, () => {
+    //       if ( checkIfSetNeeded ) {
+    //         this.setInitialValues();
+    //         this.setValidationList();
+    //       }
+    //     });
+    //   }
+    // }
   }
 
   setInitialValues = () => {
@@ -138,6 +169,21 @@ class Form extends Component {
       return;
     }
 
+    const checkForBE = ( code ) => {
+      if ( dlv( attributes, `${code}` ) == null ) {
+        this.setState( state => ({
+          missingBaseEntities: state.missingBaseEntities.includes( code )
+            ? [...state.missingBaseEntities]
+            : [...state.missingBaseEntities, code],
+        }));
+      }
+      else if ( this.state.missingBaseEntities.includes( code )) {
+        this.setState( state => ({
+          missingBaseEntities: state.missingBaseEntities.filter( beCode => beCode !== code ),
+        }));
+      }
+    };
+
     const initialValues = {};
 
     questionGroups.forEach( questionGroup => {
@@ -147,19 +193,19 @@ class Form extends Component {
       questionGroup.childAsks.forEach( ask => {
         if ( isArray( ask.childAsks, { ofMinLength: 1 })) {
           ask.childAsks.forEach( childAsk => {
-            const value = (
-              attributes[childAsk.targetCode] &&
-              attributes[childAsk.targetCode][childAsk.attributeCode] &&
-              attributes[childAsk.targetCode][childAsk.attributeCode].value
-            );
+            checkForBE( childAsk.targetCode );
+            const value = dlv( attributes, `${childAsk.targetCode}.${childAsk.attributeCode}.value` );
 
             /* TODO: better handle `false` value */
-            if ( value || childAsk.mandatory )
+            if ( value || childAsk.mandatory ) {
               initialValues[childAsk.questionCode] = value || null;
+            }
           });
         }
 
         else {
+          checkForBE( ask.targetCode );
+
           const value = (
             attributes[ask.targetCode] &&
             attributes[ask.targetCode][ask.attributeCode] &&
@@ -238,6 +284,12 @@ class Form extends Component {
     return [];
   }
 
+  checkIfNewBaseEntities = ( newProps ) => {
+    const { missingBaseEntities } = this.state;
+
+    return missingBaseEntities.some( beCode => dlv( newProps, `baseEntities.data.${beCode}` ));
+  }
+
   doValidate = values => {
     if ( !values )
       return {};

diff --git a/src/views/components/input/autocomplete/InputAutocomplete.web.js b/src/views/components/input/autocomplete/InputAutocomplete.web.js
@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import { func, string, number, oneOfType, array, bool } from 'prop-types';
 import Downshift from 'downshift';
 import { Text, Box, Input, Touchable } from '../../index';
+import { isString } from '../../../../utils';
 
 class InputAutocomplete extends Component {
   static defaultProps = {
@@ -31,6 +32,24 @@ class InputAutocomplete extends Component {
     testID: string,
   }
 
+  state = {
+    filterValue: '',
+  };
+
+  componentDidUpdate( prevProps ) {
+    if (
+      this.state.filterValue === '' &&
+      isString( this.props.value ) &&
+      this.props.value !== prevProps.value
+    ) {
+      this.setFilterValue( this.props.value );
+    }
+  }
+
+  setFilterValue = ( value ) => {
+    this.setState({ filterValue: value });
+  }
+
   handleFilter = inputValue => dropdownItem => {
     const { itemStringKey } = this.props;
 
@@ -59,11 +78,22 @@ class InputAutocomplete extends Component {
   }
 
   handleChange = item => {
+    this.setState({
+      filterValue: item.description,
+    });
     if ( this.props.onChange )
       this.props.onChange( item );
 
-    if ( this.props.onChangeValue )
-      this.props.onChangeValue( item );
+    // if ( this.props.onChangeValue )
+    //   this.props.onChangeValue( item );
+  }
+
+  handleType = ( item ) => {
+    this.setState({
+      filterValue: item,
+    });
+    if ( this.props.onType )
+      this.props.onType( item );
   }
 
   render() {
@@ -72,13 +102,14 @@ class InputAutocomplete extends Component {
       items,
       itemStringKey,
       borderBetweenItems,
-      onType,
       onBlur,
       value, // eslint-disable-line no-unused-vars
       testID,
       ...restProps
     } = this.props;
 
+    // console.log( 'autocompprops', this.props && this.props.value );
+
     return (
       <Downshift
         defaultInputValue={(
@@ -102,6 +133,8 @@ class InputAutocomplete extends Component {
           highlightedIndex,
           selectItem,
         }) => {
+          // console.log( inputValue, this.state.filterValue );
+
           return (
             <Box
               {...getRootProps( undefined, { suppressRefError: true })}
@@ -112,10 +145,11 @@ class InputAutocomplete extends Component {
                 {...getInputProps( restProps )}
                 type={inputType}
                 clearButtonMode="while-editing"
-                onChangeValue={onType}
+                onChangeValue={this.handleType}
                 onBlur={onBlur}
                 width="100%"
                 testID={`${testID}`}
+                value={this.state.filterValue}
               />
 
               {isOpen && (

diff --git a/src/views/components/vertx/reducers/layouts.reducer.js b/src/views/components/vertx/reducers/layouts.reducer.js
@@ -34,8 +34,10 @@ const injectLayoutIntoState = ({ uri, data, state, isDevLayout, isPublic = false
 
       /* If it's already in the reducer and it's a dev layout, no not overwrite it. */
       if (
-        state[layoutGroup][newUri] &&
-        state[layoutGroup][newUri].isDevLayout
+        state[layoutGroup][newUri] && (
+          state[layoutGroup][newUri].isDevLayout ||
+          state[layoutGroup][newUri].isPublic
+        )
       ) {
         return true;
       }