feat: nodule create and delete

src/Collections/Nodules.js

@@ -27,14 +27,12 @@ class Nodules {
 
   removeById = id => {
     const indexToRemove = this.collection.findIndex(n => n.id === id)
-    if (this.collection.length === 1 && indexToRemove > -1) {
-      this.collection = []
-    }
-    else {
-      const modifiedCollection = this.collection.splice(indexToRemove, 1)
-      this.collection = modifiedCollection
-    }
+    if (indexToRemove > -1) this.collection.splice(indexToRemove, 1)
   }
+
+  getCollectionProps = () => this.collection.map(nodule => nodule.getProperties())
+
+  getTableByLabel = label => this.collection.find(n => label === n.label)
 }
 
 export default Nodules

src/Controllers/CreateNoduleController.js

@@ -20,12 +20,11 @@ class CreateNoduleController {
       filterParams,
       tables
     })
-    console.log(this.nodules)
     document.dispatchEvent(this.updatedNodulesEvent)
   }
 
   deleteNodule = id => {
-    this.nodules.removeTableById(id)
+    this.nodules.removeById(id)
     document.dispatchEvent(this.updatedNodulesEvent)
   }
 }

src/Controllers/NoduleListController.js

@@ -0,0 +1,15 @@
+import Nodules from '../Collections/Nodules'
+
+class NoduleistController {
+  constructor() {
+    this.nodules = new Nodules()
+    this.updatedNodulesEvent = new Event('updateNodules')
+  }
+
+  deleteTable = id => {
+    this.nodules.removeById(id)
+    document.dispatchEvent(this.updatedNodulesEvent)
+  }
+}
+
+export default NoduleistController

src/Controllers/TableListController.js

@@ -7,7 +7,7 @@ class TableListController {
   }
 
   deleteTable = id => {
-    this.tables.removeTableById(id)
+    this.tables.removeById(id)
     document.dispatchEvent(this.updatedTablesEvent)
   }
 }

src/index.js

@@ -4,9 +4,7 @@ import App from './views/App'
 import * as serviceWorker from './serviceWorker'
 
 ReactDOM.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
+    <App />,
   document.getElementById('root')
 )
 

src/views/App.js

@@ -4,6 +4,7 @@ import 'semantic-ui-css/semantic.min.css'
 import CreateTableForm from './CreateTable/CreateTableForm'
 import TableList from './TableList/TableList'
 import CreateNodule from './CreateNodule/CreateNodule'
+import NoduleList from './NoduleList/NoduleList'
 
 class App extends Component {
   render = () => {
@@ -12,6 +13,7 @@ class App extends Component {
         <CreateTableForm />
         <CreateNodule />
         <TableList />
+        <NoduleList />
       </div>
     )
   }

src/views/CreateNodule/CreateFilterNoduleForm.js

@@ -1,44 +1,48 @@
 import React, { Component } from 'react'
-import { Input, Dropdown, Grid } from 'semantic-ui-react'
+import { Input, Dropdown, Grid, Button, Icon, List } from 'semantic-ui-react'
 import './CreateNodule.css'
 
 class CreateFilterNoduleForm extends Component {
   constructor () {
     super()
-    this.state = { filterType: '' }
+    this.state = {
+      filterType: '',
+      filterParams: {}
+    }
 
-    this.keyInput1 = React.createRef()
-    this.keyInput2 = React.createRef()
-    this.keyInput3 = React.createRef()
-    this.valueInput1 = React.createRef()
-    this.valueInput2 = React.createRef()
-    this.valueInput3 = React.createRef()
+    this.keyInput = React.createRef()
+    this.valueInput = React.createRef()
     document.addEventListener('updateTables', this.updateTableList)
   }
 
+  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
+
+    this.setState({ filterParams: filterParams })
+  }
+
   handleChange = (e, value) => {
     this.setState({ filterType: value.value })
   }
 
-  getFilterProperties = () => {
-    let filterParams = {}
+  renderFilterParams = () => {
+    const { filterParams } = this.state
 
-    if (this.keyInput1.current.inputRef.current.value)
-      filterParams[this.keyInput1.current.inputRef.current.value] = this.valueInput1.current.inputRef.current.value
-    
-    if (this.keyInput2.current.inputRef.current.value)
-      filterParams[this.keyInput2.current.inputRef.current.value] = this.valueInput2.current.inputRef.current.value
-    
-    if (this.keyInput3.current.inputRef.current.value)
-      filterParams[this.keyInput3.current.inputRef.current.value] = this.valueInput3.current.inputRef.current.value
-
-    return {
-      filterType: this.state.filterType,
-      filterParams
+    let filterKeyElements = []
+    let filterValueElements = []
+    for (let key in filterParams) {
+      filterKeyElements.push(<List.Item>{key}</List.Item>)
+      filterValueElements.push(<List.Item>{filterParams[key]}</List.Item>)
     }
+
+    return { filterKeyElements, filterValueElements }
   }
 
   render = () => {
+    const filterParamElements = this.renderFilterParams()
     return (
       <div className='CreateFiltrerNoduleForm'>
         <Dropdown
@@ -57,14 +61,20 @@ class CreateFilterNoduleForm extends Component {
 
         <Grid columns={2} relaxed='very' stackable>
           <Grid.Column>
-            <Input placeholder='Key' ref={this.keyInput1} style={{ width: '115px' }} />
-            <Input placeholder='Key' ref={this.keyInput2} style={{ width: '115px' }} />
-            <Input placeholder='Key' ref={this.keyInput3} style={{ width: '115px' }} />
+            <List celled>
+              { filterParamElements.filterKeyElements }
+            </List>
+            <Input placeholder='Key' ref={this.keyInput} style={{ width: '115px' }} />
           </Grid.Column>
           <Grid.Column>
-            <Input placeholder='Value' ref={this.valueInput1} style={{ width: '115px' }} />
-            <Input placeholder='Value' ref={this.valueInput2} style={{ width: '115px' }} />
-            <Input placeholder='Value' ref={this.valueInput3} style={{ width: '115px' }} />
+            <List celled>
+              { filterParamElements.filterValueElements }
+            </List>
+            <Input placeholder='Key' ref={this.valueInput} style={{ width: '115px' }} />
+            <Button animated='vertical' onClick={this.addKeyValueInput}>
+              <Button.Content hidden><Icon name='add' /></Button.Content>
+              <Button.Content visible>Add</Button.Content>
+            </Button>
           </Grid.Column>
         </Grid>
       </div>

src/views/CreateNodule/CreateNodule.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react'
-import { Button, Input, Header, Dropdown, Table } from 'semantic-ui-react'
+import { Button, Input, Header, Dropdown } from 'semantic-ui-react'
 import CreateFilterNoduleForm from './CreateFilterNoduleForm'
 import './CreateNodule.css'
 
@@ -20,6 +20,8 @@ class CreateNodule extends Component {
     this.controller = new CreateNoduleController()
 
     this.filterNoduleForm = React.createRef()
+    this.tableSelect = React.createRef()
+    this.noduleLabelInput = React.createRef()
 
     document.addEventListener('updateTables', this.updateTableList)
   }
@@ -29,8 +31,19 @@ class CreateNodule extends Component {
   }
 
   handleSubmit = () => {
-    if (this.state.noduleType === 'filter')
-      console.log(this.filterNoduleForm.current.getFilterProperties())
+
+    const noduleLabel = this.noduleLabelInput.current.inputRef.current.value
+    const selectedTableLabels = this.tableSelect.current.getSelectedTableLabels()
+
+    if (this.state.noduleType === 'filter') {
+      const filterProperties = this.filterNoduleForm.current.getFilterProperties()
+      this.controller.addNewFilterNodule({
+        label: noduleLabel,
+        tablesToImportByLabel: selectedTableLabels,
+        filterType: filterProperties.filterType,
+        filterParams: filterProperties.filterParams
+      })
+    }
   }
 
   updateTableList = () => {
@@ -49,7 +62,7 @@ class CreateNodule extends Component {
 
         <Input
             placeholder='Nodule Label'
-            ref={this.tableLabelInput}
+            ref={this.noduleLabelInput}
             icon='tags'
             style={{ width: '300px' }}
           />
@@ -68,7 +81,7 @@ class CreateNodule extends Component {
           onChange={this.handleChange}
         />
 
-        <TableSelect />
+        <TableSelect ref={this.tableSelect} />
 
         { this.renderNoduleForm() }
 

src/views/NoduleList/NoduleList.js

@@ -0,0 +1,54 @@
+import React, { Component } from 'react'
+import { Card, Icon, CardContent } from 'semantic-ui-react'
+import './NoduleList.css'
+
+import Nodule from '../../Collections/Nodules'
+import NoduleListController from '../../Controllers/NoduleListController'
+
+class NoduleList extends Component {
+  constructor () {
+    super()
+
+    this.nodules = new Nodule()
+    this.controller = new NoduleListController()
+    this.state = { nodules: this.nodules.getCollectionProps() }
+
+    document.addEventListener('updateNodules', this.updateNoduleList)
+  }
+
+  updateNoduleList = () => {
+    this.setState({nodules: this.nodules.getCollectionProps()})
+  }
+
+  renderTableListElements = () => {
+    const { nodules } = this.state
+    const noduleListElements = nodules.map(n => 
+      <Card key={n.id} id={n.id}>
+        <Card.Content>
+          <Card.Header>{ n.label }</Card.Header>
+          <Card.Meta>{`${n.tables.length} tables`}</Card.Meta>
+        </Card.Content>
+        <CardContent
+          extra
+          onClick={() => { this.controller.deleteNodule(n.id) }}
+          style={{ cursor: 'pointer' }} 
+        >
+          Delete <Icon name='trash' />
+        </CardContent>
+      </Card>
+    )
+    return noduleListElements
+  }
+
+  render = () => {
+    return (
+      <div className='TableList'>
+        <Card.Group>
+          { this.renderTableListElements() }
+        </Card.Group>
+      </div>
+    )
+  }
+}
+
+export default NoduleList