Add UI for import/export data

This commit is contained in:
2017-02-18 15:40:33 +00:00
parent ac5fb8c987
commit 274d5a3629
3 changed files with 49 additions and 5 deletions

View File

@@ -73,3 +73,11 @@ td {
.showSortIcon {
display: inline-block;
}
.importForm {
display: none;
}
.importFormVisible {
display: block;
}

View File

@@ -48,6 +48,11 @@ class AdminPeople extends React.Component {
this.setState({ personFormVisible: !this.state.personFormVisible });
}
openImportForm = (event) => {
event.preventDefault();
this.setState({ openImportForm: true });
}
render() {
return (
<div className={s.root}>
@@ -176,7 +181,7 @@ class AdminPeople extends React.Component {
</table>
}
<h2>
<a href="#sortcolumn" onClick={this.togglePersonForm}>
<a href="#openpersonform" onClick={this.togglePersonForm}>
<span>{this.state.personFormVisible ? '-' : '+'}</span> Add Person
</a>
</h2>
@@ -251,6 +256,36 @@ class AdminPeople extends React.Component {
</Button>
</div>
</form>
<div>
<a href="#openimportform" onClick={this.openImportForm}>Import data</a>
{!this.state.openImportForm ? ' / ' : null}
{!this.state.openImportForm ? <a href="/admin/people/export">Export data</a> : null}
</div>
<form
method="post"
action="/admin/people/import"
className={[
s.importForm,
this.state.openImportForm ? s.importFormVisible : null,
].join(' ')}
>
<div className={s.formGroup}>
<label className={s.label} htmlFor="importdata">
Enter JSON:
</label>
<textarea
className={s.input}
id="importdata"
type="text"
name="importdata"
/>
</div>
<div className={s.formGroup}>
<Button type="submit">
Save
</Button>
</div>
</form>
</div>
</div>
);