feat: create filter nodule form

src/Collections/Nodules.js

@@ -25,6 +25,20 @@ class Nodules {
     }
   }
 
+  addNewJoinNodule = props => {
+    try {
+      const newJoinNodule = new JoinNodule({
+        id: props.id || uuid(),
+        label: props.label,
+        tables: props.tables,
+        joinBy: props.joinBy
+      })
+      this.collection.push(newJoinNodule)
+    } catch (err) {
+      console.error(err)
+    }
+  }
+
   removeById = id => {
     const indexToRemove = this.collection.findIndex(n => n.id === id)
     if (indexToRemove > -1) this.collection.splice(indexToRemove, 1)

src/Controllers/CreateNoduleController.js

@@ -23,6 +23,23 @@ class CreateNoduleController {
     document.dispatchEvent(this.updatedNodulesEvent)
   }
 
+  addNewJoinNodule = props => {
+    const { label, tablesToImportByLabel, baseTableLabel, joinParams } = props
+    const tables = tablesToImportByLabel.map(label => {
+      return this.tables.getTableByLabel(label)
+    })
+
+    this.nodules.addNewJoinNodule({
+      label,
+      tables,
+      joinBy: {
+        baseTableLabel,
+        joinParams
+      }
+    })
+    document.dispatchEvent(this.updatedNodulesEvent)
+  }
+
   deleteNodule = id => {
     this.nodules.removeById(id)
     document.dispatchEvent(this.updatedNodulesEvent)

src/views/CreateNodule/CreateJoinNoduleForm.js

@@ -0,0 +1,94 @@
+import React, { Component } from 'react'
+import { Input, Dropdown, Button, Icon, List } from 'semantic-ui-react'
+import './CreateNodule.css'
+
+import Tables from '../../Collections/Tables'
+
+class CreateJoinNoduleForm extends Component {
+  constructor () {
+    super()
+    this.tables = new Tables()
+
+    this.state = {
+      bastTableLabel: '',
+      joinParams: [],
+      tables: this.tables.getCollectionProps()
+    }
+
+    this.foreignTableInput = React.createRef()
+    this.primaryTableKeyInput = React.createRef()
+    this.matchingKeyInput = React.createRef()
+    document.addEventListener('updateTables', this.updateTableList)
+  }
+
+  addJoinParam = () => {
+    let joinParams = this.state.joinParams || []
+
+    const foreignTable = this.foreignTableInput.current.inputRef.current.value
+    const primaryTableKey = this.primaryTableKeyInput.current.inputRef.current.value
+    const matchingKey = this.matchingKeyInput.current.inputRef.current.value
+
+    if (foreignTable && matchingKey && primaryTableKey)
+      joinParams.push({ foreignTable, primaryTableKey, matchingKey })
+
+    this.setState({ joinParams: joinParams })
+  }
+
+  handleChange = (e, value) => {
+    this.setState({ bastTableLabel: value.value })
+  }
+
+  getBaseTableDropDownOptions = () => {
+    const { tables } = this.state
+
+    const options = tables.map(t => {
+      return { key: t.label, text: t.label, value: t.label }
+    })
+
+    return options
+  }
+
+  updateTableList = () => {
+    this.setState({tables: this.tables.getCollectionProps()})
+  }
+
+  renderJoinParams = () => {
+    const { joinParams, bastTableLabel } = this.state
+
+    const joinParamsElements = joinParams.map(p => {
+      return <List.Item>{`${bastTableLabel}::${p.primaryTableKey} = ${p.foreignTable}::${p.matchingKey}`}</List.Item>
+    })
+    return joinParamsElements
+  }
+
+  render = () => {
+    return (
+      <div className='CreateFiltrerNoduleForm'>
+        <Dropdown
+          placeholder='Select a Base Table'
+          fluid
+          selection
+          options={this.getBaseTableDropDownOptions()}
+          onChange={this.handleChange}
+        />
+
+        <List celled>
+          { this.renderJoinParams() }
+        </List>
+
+        <Input label='Primary Table Key' placeholder='Key' ref={this.primaryTableKeyInput} style={{ width: '160px' }} />
+        <Input label='Foreign Table Key' placeholder='Key' ref={this.foreignTableInput} style={{ width: '163px' }} />
+        <Input label='Matching Key' placeholder='Key' ref={this.matchingKeyInput} style={{ width: '296px' }} />
+        <br />
+
+        <Button animated='vertical' onClick={this.addJoinParam} >
+          <Button.Content hidden><Icon name='add' /></Button.Content>
+          <Button.Content visible>Add</Button.Content>
+        </Button>
+      </div>
+    )
+  }
+}
+
+export default CreateJoinNoduleForm
+

src/views/CreateNodule/CreateNodule.js

@@ -6,6 +6,7 @@ import './CreateNodule.css'
 import Tables from '../../Collections/Tables'
 import CreateNoduleController from '../../Controllers/CreateNoduleController'
 import TableSelect from './TableSelect'
+import CreateJoinNoduleForm from './CreateJoinNoduleForm'
 
 class CreateNodule extends Component {
   constructor () {
@@ -20,6 +21,7 @@ class CreateNodule extends Component {
     this.controller = new CreateNoduleController()
 
     this.filterNoduleForm = React.createRef()
+    this.joinNoduleForm = React.createRef()
     this.tableSelect = React.createRef()
     this.noduleLabelInput = React.createRef()
 
@@ -31,11 +33,12 @@ class CreateNodule extends Component {
   }
 
   handleSubmit = () => {
+    const { noduleType } = this.state
 
     const noduleLabel = this.noduleLabelInput.current.inputRef.current.value
     const selectedTableLabels = this.tableSelect.current.getSelectedTableLabels()
 
-    if (this.state.noduleType === 'filter') {
+    if (noduleType === 'filter') {
       const filterProperties = this.filterNoduleForm.current.getFilterProperties()
       this.controller.addNewFilterNodule({
         label: noduleLabel,
@@ -51,7 +54,10 @@ class CreateNodule extends Component {
   }
 
   renderNoduleForm = () => {
-    if (this.state.noduleType === 'filter') return <CreateFilterNoduleForm ref={this.filterNoduleForm} />
+    const { noduleType, tablesToImportByLabel } = this.state
+
+    if (noduleType === 'filter') return <CreateFilterNoduleForm ref={this.filterNoduleForm} />
+    else if (noduleType === 'join') return <CreateJoinNoduleForm ref={this.joinNoduleForm} tables={tablesToImportByLabel || []}/>
     else return ''
   }