feat: SelectedTable get headers

src/Controllers/TableListController.js

@@ -1,4 +1,5 @@
 import Tables from '../Models/Tables'
+import SelectedTable from '../Models/SelectedTable'
 
 class TableListController {
   constructor() {
@@ -10,6 +11,11 @@ class TableListController {
     this.tables.removeById(id)
     document.dispatchEvent(this.updatedTablesEvent)
   }
+
+  logExportById = id => {
+    const selectedTable = new SelectedTable(this.tables.getById(id))
+    console.log(selectedTable.headers)
+  }
 }
 
 export default TableListController

src/Models/SelectedTable.js

@@ -1,15 +1,29 @@
 class SelectedTable {
-  constructor (props) {
-    this.table = props.table
+  constructor (table) {
+    this.assignTable(table)
   }
 
-  getHeaders = () => {
+  assignTable = table => {
+    if (table.type === "Nodule") {
+      this.table = table.asTable()
+    } else if (table.type === 'Table') {
+      this.table = table
+    } else {
+      this.table = {}
+    }
+  }
+
+  get headers () {
     const rows = this.table.rows
     const length = rows.length
     let lengthToSlice = 49
     if (length < 50) lengthToSlice = length - 1
     const firstSliceOfRows = rows.slice(0, lengthToSlice)
-    console.log(firstSliceOfRows)
-    // const uniqueHeaderSet = new Set(firstSliceOfRows)
+    const headersOfSplicedRows = firstSliceOfRows.map(r => Object.keys(r))
+    const flatenedHeaders = headersOfSplicedRows.flat()
+    const uniqueHeaders = Array.from(new Set(flatenedHeaders))
+    return uniqueHeaders
   }
-}
+}
+
+export default SelectedTable

src/Models/Tables.js

@@ -30,7 +30,7 @@ class Tables {
 
   getCollectionProps = () => this.collection.map(table => table.getProperties())
 
-  getTableByLabel = label => this.collection.find(t => label === t.label)
+  getById = id => this.collection.find(t => id === t.id)
 }
 
 export default Tables

src/views/CreateNodule/TableSelect.js

@@ -39,7 +39,7 @@ class TableSelect extends Component {
     const tableLabelElements = tables.map(t => {
       const isSelected = selectedTablesLabels.includes(t.label)
       return (
-        <Label onClick={() => this.toggleSelect(t.label)} color={isSelected ? 'blue' : 'grey'} style={{ cursor: 'pointer' }}>
+        <Label key={t.label} onClick={() => this.toggleSelect(t.label)} color={isSelected ? 'blue' : 'grey'} style={{ cursor: 'pointer' }}>
           {t.label}
           { isSelected ? <Icon name='delete' /> : '' }
         </Label>

src/views/NoduleList/NoduleList.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react'
-import { Card, Icon, CardContent } from 'semantic-ui-react'
+import { Card } from 'semantic-ui-react'
 import NoduleListItem from './NoduleListItem'
 import './NoduleList.css'
 

src/views/TableList/TableList.js

@@ -23,7 +23,7 @@ class TableList extends Component {
 
   renderTableListElements = () => {
     const { tables } = this.state
-    const tableListElements = tables.map(t => <TableListItem table={t} /> )
+    const tableListElements = tables.map(t => <TableListItem key={t.id} table={t} /> )
     return tableListElements
   }
 

src/views/TableList/TableListItem.js

@@ -18,12 +18,17 @@ class TableListItem extends Component {
           <Card.Header>{ table.label }</Card.Header>
           <Card.Meta>{`${table.rows.length} rows`}</Card.Meta>
         </Card.Content>
-        <Card.Content
-          extra
+        <Card.Content extra>
+          <span 
           onClick={() => { this.controller.deleteTable(table.id) }}
-          style={{ cursor: 'pointer' }} 
-        >
-          Delete <Icon name='trash' />
+          style={{ cursor: 'pointer' }}>
+            Delete <Icon name='trash' />
+          </span>
+          <span 
+          onClick={() => { this.controller.logExportById(table.id) }}
+          style={{ cursor: 'pointer' }}>
+            View <Icon name='table' />
+          </span>
         </Card.Content>
       </Card>
     )