feat: table select

src/Collections/Tables.js

@@ -23,15 +23,9 @@ class Tables {
     }
   }
 
-  removeTableById = id => {
+  removeById = id => {
     const indexToRemove = this.collection.findIndex(t => t.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(table => table.getProperties())

src/views/CreateNodule/TableSelect.js

@@ -9,14 +9,25 @@ class TableSelect extends Component {
     super()
     this.tables = new Tables()
     this.state = {
-      selectedTables: [],
+      selectedTablesLabels: [],
       tables: this.tables.getCollectionProps()
     }
     document.addEventListener('updateTables', this.updateTableList)
   }
 
+  getSelectedTableLabels = () => this.state.selectedTablesLabels
+
   toggleSelect = label => {
-    console.log(label)
+    const { selectedTablesLabels } = this.state
+    let newselectedTablesLabels = selectedTablesLabels
+  
+    const selectedIndex = selectedTablesLabels.findIndex(selected => selected === label)
+
+    if (selectedIndex === -1) newselectedTablesLabels.push(label)
+    else if (selectedIndex === 0 && selectedTablesLabels.length === 1) newselectedTablesLabels = []
+    else newselectedTablesLabels.splice(selectedIndex, 1)
+
+    this.setState({ selectedTablesLabels: newselectedTablesLabels })
   }
 
   updateTableList = () => {
@@ -24,11 +35,11 @@ class TableSelect extends Component {
   }
 
   renderTableLabels = () => {
-    const { selectedTables, tables } = this.state
+    const { selectedTablesLabels, tables } = this.state
     const tableLabelElements = tables.map(t => {
-      const isSelected = label => selectedTables.includes(label)
+      const isSelected = selectedTablesLabels.includes(t.label)
       return (
-        <Label onClick={() => this.toggleSelect(t.label)}>
+        <Label onClick={() => this.toggleSelect(t.label)} color={isSelected ? 'blue' : 'grey'} style={{ cursor: 'pointer' }}>
           {t.label}
           { isSelected ? <Icon name='delete' /> : '' }
         </Label>