From ba54fdf04410d607bb6d60f07246b9b1c4e34593 Mon Sep 17 00:00:00 2001
From: ysandler <ysandler@tzed.io>
Date: Fri, 17 Jul 2020 23:31:08 -0500
Subject: [PATCH] feat: table select

---
 src/Collections/Tables.js             | 10 ++--------
 src/views/CreateNodule/TableSelect.js | 21 ++++++++++++++++-----
 2 files changed, 18 insertions(+), 13 deletions(-)

diff --git a/src/Collections/Tables.js b/src/Collections/Tables.js
index 9e06bfc..c33945c 100644
--- a/src/Collections/Tables.js
+++ b/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())
diff --git a/src/views/CreateNodule/TableSelect.js b/src/views/CreateNodule/TableSelect.js
index d03a633..ced8155 100644
--- a/src/views/CreateNodule/TableSelect.js
+++ b/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>