95 lines
2.8 KiB
JavaScript
95 lines
2.8 KiB
JavaScript
import React, { Component } from 'react'
|
|
import { Input, Dropdown, Button, Icon, List } from 'semantic-ui-react'
|
|
import './CreateNodule.css'
|
|
|
|
import Tables from '../../Collections/Tables'
|
|
|
|
class CreateJoinNoduleForm extends Component {
|
|
constructor () {
|
|
super()
|
|
this.tables = new Tables()
|
|
|
|
this.state = {
|
|
bastTableLabel: '',
|
|
joinParams: [],
|
|
tables: this.tables.getCollectionProps()
|
|
}
|
|
|
|
this.foreignTableInput = React.createRef()
|
|
this.primaryTableKeyInput = React.createRef()
|
|
this.matchingKeyInput = React.createRef()
|
|
document.addEventListener('updateTables', this.updateTableList)
|
|
}
|
|
|
|
addJoinParam = () => {
|
|
let joinParams = this.state.joinParams || []
|
|
|
|
const foreignTable = this.foreignTableInput.current.inputRef.current.value
|
|
const primaryTableKey = this.primaryTableKeyInput.current.inputRef.current.value
|
|
const matchingKey = this.matchingKeyInput.current.inputRef.current.value
|
|
|
|
if (foreignTable && matchingKey && primaryTableKey)
|
|
joinParams.push({ foreignTable, primaryTableKey, matchingKey })
|
|
|
|
this.setState({ joinParams: joinParams })
|
|
}
|
|
|
|
handleChange = (e, value) => {
|
|
this.setState({ bastTableLabel: value.value })
|
|
}
|
|
|
|
getBaseTableDropDownOptions = () => {
|
|
const { tables } = this.state
|
|
|
|
const options = tables.map(t => {
|
|
return { key: t.label, text: t.label, value: t.label }
|
|
})
|
|
|
|
return options
|
|
}
|
|
|
|
updateTableList = () => {
|
|
this.setState({tables: this.tables.getCollectionProps()})
|
|
}
|
|
|
|
renderJoinParams = () => {
|
|
const { joinParams, bastTableLabel } = this.state
|
|
|
|
const joinParamsElements = joinParams.map(p => {
|
|
return <List.Item>{`${bastTableLabel}::${p.primaryTableKey} = ${p.foreignTable}::${p.matchingKey}`}</List.Item>
|
|
})
|
|
return joinParamsElements
|
|
}
|
|
|
|
render = () => {
|
|
return (
|
|
<div className='CreateFiltrerNoduleForm'>
|
|
<Dropdown
|
|
placeholder='Select a Base Table'
|
|
fluid
|
|
selection
|
|
options={this.getBaseTableDropDownOptions()}
|
|
onChange={this.handleChange}
|
|
/>
|
|
|
|
<List celled>
|
|
{ this.renderJoinParams() }
|
|
</List>
|
|
|
|
<Input label='Primary Table Key' placeholder='Key' ref={this.primaryTableKeyInput} style={{ width: '160px' }} />
|
|
<Input label='Foreign Table Key' placeholder='Key' ref={this.foreignTableInput} style={{ width: '163px' }} />
|
|
<Input label='Matching Key' placeholder='Key' ref={this.matchingKeyInput} style={{ width: '296px' }} />
|
|
<br />
|
|
|
|
<Button animated='vertical' onClick={this.addJoinParam} >
|
|
<Button.Content hidden><Icon name='add' /></Button.Content>
|
|
<Button.Content visible>Add</Button.Content>
|
|
</Button>
|
|
</div>
|
|
)
|
|
}
|
|
}
|
|
|
|
export default CreateJoinNoduleForm
|
|
|