53 lines
1.5 KiB
JavaScript
53 lines
1.5 KiB
JavaScript
import React, { Component } from 'react'
|
|
import { Card, Button, Icon } from 'semantic-ui-react'
|
|
import CreateTableForm from '../CreateTable/CreateTableForm'
|
|
import TableListItem from './TableListItem'
|
|
import './TableList.css'
|
|
|
|
import Tables from '../../Models/Tables'
|
|
import TableListController from '../../Controllers/TableListController'
|
|
|
|
class TableList extends Component {
|
|
constructor () {
|
|
super()
|
|
|
|
this.tables = new Tables()
|
|
this.controller = new TableListController()
|
|
this.state = {
|
|
adding: false,
|
|
tables: this.tables.getCollectionProps()
|
|
}
|
|
|
|
document.addEventListener('updateTables', this.updateTableList)
|
|
}
|
|
|
|
toggleAddingTable = () => { this.setState({ adding: !this.state.adding }) }
|
|
|
|
updateTableList = () => {
|
|
this.setState({tables: this.tables.getCollectionProps()})
|
|
}
|
|
|
|
renderTableListElements = () => {
|
|
const { tables } = this.state
|
|
const tableListElements = tables.map(t => <TableListItem key={t.id} table={t} /> )
|
|
return tableListElements
|
|
}
|
|
|
|
render = () => {
|
|
return (
|
|
<div className='TableList'>
|
|
<Card.Group>
|
|
<Button animated primary style={{ width: '100%', display: 'block' }} onClick={this.toggleAddingTable}>
|
|
<Button.Content visible>Add Table</Button.Content>
|
|
<Button.Content hidden><Icon name='add' /></Button.Content>
|
|
</Button>
|
|
{this.state.adding ? <CreateTableForm /> : ''}
|
|
{ this.renderTableListElements() }
|
|
</Card.Group>
|
|
</div>
|
|
)
|
|
}
|
|
}
|
|
|
|
export default TableList
|