feat: create transform nodule

src/Collections/Nodules.js

@@ -39,6 +39,20 @@ class Nodules {
     }
   }
 
+  addNewTransformNodule = props => {
+    try {
+      const newJoinNodule = new TransformNodule({
+        id: props.id || uuid(),
+        label: props.label,
+        tables: props.tables,
+        structure: props.structure
+      })
+      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

@@ -35,6 +35,20 @@ class CreateNoduleController {
       joinBy
     })
 
+    document.dispatchEvent(this.updatedNodulesEvent)
+  }
+
+  addNewTransformNodule = props => {
+    const { label, tablesToImportByLabel, structure} = props
+    const tables = tablesToImportByLabel.map(label => {
+      return this.tables.getTableByLabel(label)
+    })
+
+    this.nodules.addNewTransformNodule({
+      label,
+      tables,
+      structure
+    })
     console.log(this.nodules)
     document.dispatchEvent(this.updatedNodulesEvent)
   }

src/Controllers/NoduleListController.js

@@ -6,7 +6,7 @@ class NoduleistController {
     this.updatedNodulesEvent = new Event('updateNodules')
   }
 
-  deleteTable = id => {
+  deleteNodule = id => {
     this.nodules.removeById(id)
     document.dispatchEvent(this.updatedNodulesEvent)
   }

src/views/CreateNodule/CreateFilterNoduleForm.js

@@ -28,6 +28,11 @@ class CreateFilterNoduleForm extends Component {
     this.setState({ filterType: value.value })
   }
 
+  getFilterProperties = () => {
+    const { filterType, filterParams } = this.state
+    return { filterType, filterParams }
+  }
+
   renderFilterParams = () => {
     const { filterParams } = this.state
 

src/views/CreateNodule/CreateNodule.js

@@ -23,6 +23,7 @@ class CreateNodule extends Component {
 
     this.filterNoduleForm = React.createRef()
     this.joinNoduleForm = React.createRef()
+    this.transformNoduleForm = React.createRef()
     this.tableSelect = React.createRef()
     this.noduleLabelInput = React.createRef()
 
@@ -56,6 +57,14 @@ class CreateNodule extends Component {
         joinBy: joinProperties
       })
     }
+    else if (noduleType === 'transform') {
+      const structureProperties = this.transformNoduleForm.current.getStructureProperties()
+      this.controller.addNewJoinNodule({
+        label: noduleLabel,
+        tablesToImportByLabel: selectedTableLabels,
+        structure: structureProperties
+      })
+    }
   }
 
   updateTableList = () => {
@@ -67,7 +76,7 @@ class CreateNodule extends Component {
 
     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.joinNoduleForm} tables={tablesToImportByLabel || []}/>
+    else if (noduleType === 'transform') return <CreateTransformNoduleForm ref={this.transformNoduleForm} tables={tablesToImportByLabel || []}/>
     else return ''
   }
 

src/views/CreateNodule/CreateTransformNoduleForm.js

@@ -0,0 +1,73 @@
+import React, { Component } from 'react'
+import { Input, Grid, Button, Icon, List } from 'semantic-ui-react'
+import './CreateNodule.css'
+
+class CreateTransformNoduleForm extends Component {
+  constructor () {
+    super()
+    this.state = {
+      structure: {}
+    }
+
+    this.initialKeyInput = React.createRef()
+    this.newKeyInput = React.createRef()
+    document.addEventListener('updateTables', this.updateTableList)
+  }
+
+  addStructureInput = () => {
+    let structure = this.state.structure || {}
+
+    const initialKey = this.initialKeyInput.current.inputRef.current.value
+    const newKey = this.newKeyInput.current.inputRef.current.value
+
+    if (initialKey && newKey) structure[initialKey] = newKey
+
+    this.setState({ structure: structure })
+  }
+
+  getStructureProperties = () => {
+    return this.state.structure
+  }
+
+  renderStructure = () => {
+    const { structure } = this.state
+
+    let initialKeyElements = []
+    let newKeyElements = []
+    for (let key in structure) {
+      initialKeyElements.push(<List.Item>{key}</List.Item>)
+      newKeyElements.push(<List.Item>{structure[key]}</List.Item>)
+    }
+
+    return { initialKeyElements, newKeyElements }
+  }
+
+  render = () => {
+    const structureElements = this.renderStructure()
+    return (
+      <div className='CreateFiltrerNoduleForm'>
+        <Grid columns={2} relaxed='very' stackable>
+          <Grid.Column>
+            <List celled>
+              { structureElements.initialKeyElements }
+            </List>
+            <Input placeholder='Initial Key' ref={this.initialKeyInput} style={{ width: '115px' }} />
+          </Grid.Column>
+          <Grid.Column>
+            <List celled>
+              { structureElements.newKeyElements }
+            </List>
+            <Input placeholder='New Key' ref={this.newKeyInput} style={{ width: '115px' }} />
+            <Button animated='vertical' onClick={this.addStructureInput}>
+              <Button.Content hidden><Icon name='add' /></Button.Content>
+              <Button.Content visible>Add</Button.Content>
+            </Button>
+          </Grid.Column>
+        </Grid>
+      </div>
+    )
+  }
+}
+
+export default CreateTransformNoduleForm
+