public/mailtrain
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

DataTables-based dropdown

Browse source
This commit is contained in:
Tomas Bures 2017-07-10 17:37:56 +02:00
parent 0c860456a6
commit 38cf3e49c0
7 changed files with 332 additions and 105 deletions
Download patch file Download diff file Expand all files Collapse all files

66
client/src/lib/form.js
View file

@ -10,6 +10,7 @@ import { withPageHelpers } from './page'
import { withErrorHandling, withAsyncErrorHandler } from './error-handling';
import { TreeTable, TreeSelectMode } from './tree';
import { Table, TableSelectMode } from './table';
import { Button as ActionButton } from "./bootstrap-components";
import brace from 'brace';
import AceEditor from 'react-ace';
@ -385,14 +386,25 @@ class TreeTableSelect extends Component {
}
}
@translate()
class TableSelect extends Component {
constructor(props) {
super(props);
this.state = {
selectedLabel: '',
open: false
};
}
static propTypes = {
dataUrl: PropTypes.string,
data: PropTypes.array,
columns: PropTypes.array,
selectionKeyIndex: PropTypes.number,
selectionLabelIndex: PropTypes.number,
selectMode: PropTypes.number,
withHeader: PropTypes.bool,
dropdown: PropTypes.bool,
id: PropTypes.string.isRequired,
label: PropTypes.string.isRequired,
@ -400,27 +412,69 @@ class TableSelect extends Component {
}
static defaultProps = {
selectMode: TableSelectMode.SINGLE
selectMode: TableSelectMode.SINGLE,
selectionLabelIndex: 0
}
static contextTypes = {
formStateOwner: PropTypes.object.isRequired
}
async onSelectionChangedAsync(sel) {
async onSelectionChangedAsync(sel, data) {
if (this.props.selectMode === TableSelectMode.SINGLE && this.props.dropdown) {
this.setState({
open: false
});
}
const owner = this.context.formStateOwner;
owner.updateFormValue(this.props.id, sel);
}
async onSelectionDataAsync(sel, data) {
if (this.props.selectMode === TableSelectMode.SINGLE && this.props.dropdown) {
this.setState({
selectedLabel: data ? data[this.props.selectionLabelIndex] : ''
});
}
}
async toggleOpen() {
this.setState({
open: !this.state.open
});
}
render() {
const props = this.props;
const owner = this.context.formStateOwner;
const id = this.props.id;
const htmlId = 'form_' + id;
const t = props.t;
return wrapInput(id, htmlId, owner, props.label, props.help,
<Table data={props.data} dataUrl={props.dataUrl} columns={props.columns} selectMode={props.selectMode} withHeader={props.withHeader} selection={owner.getFormValue(id)} onSelectionChangedAsync={::this.onSelectionChangedAsync}/>
);
if (props.dropdown) {
return wrapInput(id, htmlId, owner, props.label, props.help,
<div>
<div className="input-group mt-tableselect-dropdown">
<input type="text" className="form-control" value={this.state.selectedLabel} readOnly onClick={::this.toggleOpen}/>
<span className="input-group-btn">
<ActionButton label={t('Select')} className="btn-default" onClickAsync={::this.toggleOpen}/>
</span>
</div>
<div className={'mt-tableselect-table' + (this.state.open ? '' : ' mt-tableselect-table-hidden')}>
<Table dataUrl={props.dataUrl} columns={props.columns} selectMode={props.selectMode} withHeader={props.withHeader} selection={owner.getFormValue(id)} onSelectionDataAsync={::this.onSelectionDataAsync} onSelectionChangedAsync={::this.onSelectionChangedAsync}/>
</div>
</div>
);
} else {
return wrapInput(id, htmlId, owner, props.label, props.help,
<div>
<div>
<Table dataUrl={props.dataUrl} columns={props.columns} selectMode={props.selectMode} withHeader={props.withHeader} selection={owner.getFormValue(id)} onSelectionChangedAsync={::this.onSelectionChangedAsync}/>
</div>
</div>
);
}
}
}