feat: join nodule header key dropdoen

src/views/CreateNodule/CreateFilterNoduleForm.js

@@ -1,15 +1,19 @@
 import React, { Component } from 'react'
 import { Input, Dropdown, Grid, Button, Icon, List } from 'semantic-ui-react'
+import Tables from '../../Models/Tables'
 import './CreateNodule.css'
 
 class CreateFilterNoduleForm extends Component {
-  constructor () {
-    super()
+  constructor (props) {
+    super(props)
     this.state = {
       filterType: '',
-      filterParams: {}
+      filterParams: {},
+      tables: props.tables
     }
 
+    this.tables = new Tables()
+
     this.keyInput = React.createRef()
     this.valueInput = React.createRef()
     document.addEventListener('updateTables', this.updateTableList)
@@ -18,21 +22,45 @@ class CreateFilterNoduleForm extends Component {
   addKeyValueInput = () => {
     let filterParams = this.state.filterParams || {}
 
-    if (this.keyInput.current.inputRef.current.value)
-      filterParams[this.keyInput.current.inputRef.current.value] = this.valueInput.current.inputRef.current.value
+    if (this.state.keyValue)
+      filterParams[this.state.keyValue] = this.valueInput.current.inputRef.current.value
 
     this.setState({ filterParams: filterParams })
   }
 
-  handleChange = (e, value) => {
+  componentWillReceiveProps = nextProps => {
+    console.log(nextProps.tables)
+    this.setState({tables: nextProps.tables})
+  }
+
+  handleComparisonChange = (e, value) => {
     this.setState({ filterType: value.value })
   }
 
+  handleKeyChange = (e, value) => {
+    this.setState({ keyValue: value.value })
+  }
+
   getFilterProperties = () => {
     const { filterType, filterParams } = this.state
     return { filterType, filterParams }
   }
 
+  getHeadersDropDownOptions = () => {
+    const { tables } = this.state
+    if (!tables || tables.length === 0) return []
+
+    const headers = tables.map(t => {
+      const table = this.tables.getTableByLabel(t)
+      return table.headers
+    }).flat()
+
+    const dropdownOptions = headers.map(h => {
+      return { key: h, text: h, value: h }
+    })
+    return dropdownOptions
+  }
+
   renderFilterParams = () => {
     const { filterParams } = this.state
 
@@ -61,7 +89,7 @@ class CreateFilterNoduleForm extends Component {
             {key: 'LESSER', text: 'LESSER THAN', value: 'LESSER'},
             {key: 'LESSEREQUAL', text: 'LESSER THEN EQUAL TO', value: 'LESSEREQUAL'}
           ]}
-          onChange={this.handleChange}
+          onChange={this.handleComparisonChange}
         />
 
         <Grid columns={2} stackable>
@@ -69,7 +97,18 @@ class CreateFilterNoduleForm extends Component {
             <List celled>
               { filterParamElements.filterKeyElements }
             </List>
-            <Input placeholder='Key' ref={this.keyInput} fluid />
+
+            <Dropdown
+              clearable
+              search
+              header='Headers'
+              placeholder='Header Key'
+              fluid
+              selection
+              options={this.getHeadersDropDownOptions()}
+              onChange={this.handleKeyChange}
+            />
+
           </Grid.Column>
           <Grid.Column>
             <List celled>

src/views/CreateNodule/CreateNodule.js

@@ -15,7 +15,8 @@ class CreateNodule extends Component {
 
     this.state = {
       noduleType: '',
-      tablesToImportByLabel: []
+      tablesToImportByLabel: [],
+      selectedTablesLabels: []
     }
 
     this.tables = new Tables()
@@ -35,10 +36,14 @@ class CreateNodule extends Component {
     this.tableSelect.current.clearTablesSelected()
   }
 
-  handleChange = (e, value) => {
+  handleNoduleTypeChange = (e, value) => {
     this.setState({ noduleType: value.value })
   }
 
+  handleSelectedTablesChange = labels => {
+    this.setState({ selectedTablesLabels: labels })
+  }
+
   handleSubmit = () => {
     const { noduleType } = this.state
 
@@ -79,11 +84,12 @@ class CreateNodule extends Component {
   }
 
   renderNoduleForm = () => {
-    const { noduleType, tablesToImportByLabel } = this.state
+    const { noduleType, selectedTablesLabels } = this.state
+    console.log(selectedTablesLabels)
 
-    if (noduleType === 'filter') return <CreateFilterNoduleForm ref={this.filterNoduleForm} />
-    else if (noduleType === 'join') return <CreateJoinNoduleForm ref={this.joinNoduleForm} tables={tablesToImportByLabel || []}/>
-    else if (noduleType === 'transform') return <CreateTransformNoduleForm ref={this.transformNoduleForm} tables={tablesToImportByLabel || []}/>
+    if (noduleType === 'filter') return <CreateFilterNoduleForm ref={this.filterNoduleForm} tables={selectedTablesLabels} />
+    else if (noduleType === 'join') return <CreateJoinNoduleForm ref={this.joinNoduleForm} tables={selectedTablesLabels} />
+    else if (noduleType === 'transform') return <CreateTransformNoduleForm ref={this.transformNoduleForm} tables={selectedTablesLabels} />
     else return ''
   }
 
@@ -99,7 +105,7 @@ class CreateNodule extends Component {
           fluid
         />
 
-        <TableSelect ref={this.tableSelect} />
+        <TableSelect ref={this.tableSelect} onChange={this.handleSelectedTablesChange} />
 
         <Dropdown
           value ={this.state.noduleType}
@@ -111,7 +117,7 @@ class CreateNodule extends Component {
           ]}
           fluid
           selection
-          onChange={this.handleChange}
+          onChange={this.handleNoduleTypeChange}
         />
 
         { this.renderNoduleForm() }

src/views/CreateNodule/TableSelect.js

@@ -23,6 +23,7 @@ class TableSelect extends Component {
 
   toggleSelect = (event, element) => {
     this.setState({ selectedTablesLabels: element.value })
+    this.props.onChange(element.value)
   }
 
   updateTableList = () => {