Commit 90bf5fbd authored by Matija Obreza's avatar Matija Obreza
Browse files

Added Descriptor Lists routes and pages

- DescriptorListEditPage displays the edit form
- DescriptorListPage
parent 597d737f
...@@ -6,6 +6,7 @@ import {bindActionCreators} from 'redux'; ...@@ -6,6 +6,7 @@ import {bindActionCreators} from 'redux';
import {createDatasetRequest, listMyDatasets} from 'actions/dataset'; import {createDatasetRequest, listMyDatasets} from 'actions/dataset';
import {listMyDescriptors} from 'actions/descriptors'; import {listMyDescriptors} from 'actions/descriptors';
import {createDescriptorList} from 'actions/descriptorList';
import {IDatasetFilter, IDescriptorFilter} from 'model/filter.model'; import {IDatasetFilter, IDescriptorFilter} from 'model/filter.model';
import {Page} from 'model/common.model'; import {Page} from 'model/common.model';
import {Dataset} from 'model/dataset.model'; import {Dataset} from 'model/dataset.model';
...@@ -27,6 +28,7 @@ interface IAdministrationDashboardProps extends React.ClassAttributes<any> { ...@@ -27,6 +28,7 @@ interface IAdministrationDashboardProps extends React.ClassAttributes<any> {
datasetPage: Page<Dataset>; datasetPage: Page<Dataset>;
listMyDescriptors: (page?: number, results?: number, sortBy?: string, filter?: IDescriptorFilter, order?: string) => void; listMyDescriptors: (page?: number, results?: number, sortBy?: string, filter?: IDescriptorFilter, order?: string) => void;
descriptorPage: Page<Descriptor>; descriptorPage: Page<Descriptor>;
createDescriptorList: any;
appMounted: boolean; appMounted: boolean;
} }
...@@ -77,7 +79,7 @@ class AdministrationDashboard extends BaseMyDataPage { ...@@ -77,7 +79,7 @@ class AdministrationDashboard extends BaseMyDataPage {
public render() { public render() {
const {classes, tab, datasetPage, descriptorPage, pageSort} = this.props; const {classes, tab, datasetPage, descriptorPage, pageSort, createDescriptorList} = this.props;
const paged = 'descriptors' === this.state.tab ? descriptorPage : datasetPage; const paged = 'descriptors' === this.state.tab ? descriptorPage : datasetPage;
...@@ -86,13 +88,16 @@ class AdministrationDashboard extends BaseMyDataPage { ...@@ -86,13 +88,16 @@ class AdministrationDashboard extends BaseMyDataPage {
<ContentHeaderWithButton title="What do you want to do?"/> <ContentHeaderWithButton title="What do you want to do?"/>
<div className={ classes.content }> <div className={ classes.content }>
<Grid container spacing={ 0 }> <Grid container spacing={ 0 }>
<Grid item xs={ 12 } md={ 4 }> <Grid item xs={ 6 } lg={ 4 }>
<DashboardButton title="CREATE DATASET" onClickFunction={ this.goToNewDataset }/> <DashboardButton title="CREATE DATASET" onClickFunction={ this.goToNewDataset }/>
</Grid> </Grid>
<Grid item xs={ 12 } md={ 4 }> <Grid item xs={ 6 } lg={ 4 }>
<DashboardButton title="CREATE DESCRIPTOR" onClickFunction={ this.goToNewDescriptorForm }/> <DashboardButton title="CREATE DESCRIPTOR" onClickFunction={ this.goToNewDescriptorForm }/>
</Grid> </Grid>
<Grid item xs={ 12 } md={ 4 }> <Grid item xs={ 6 } lg={ 4 }>
<DashboardButton title="CREATE DESCRIPTOR LIST" onClickFunction={ createDescriptorList }/>
</Grid>
<Grid item xs={ 6 } lg={ 4 }>
<DashboardButton title="MANAGE PARTNERS" onClickFunction={ this.goToPartners }/> <DashboardButton title="MANAGE PARTNERS" onClickFunction={ this.goToPartners }/>
</Grid> </Grid>
</Grid> </Grid>
...@@ -130,6 +135,7 @@ const mapStateToProps = (state, ownProps) => ({ ...@@ -130,6 +135,7 @@ const mapStateToProps = (state, ownProps) => ({
const mapDispatchToProps = (dispatch) => ({ const mapDispatchToProps = (dispatch) => ({
listDatasets: (page?: number, results?: number, sortBy?: string, filter?: IDatasetFilter, order?: string): void => dispatch(listMyDatasets(page, results, sortBy, filter, order)), listDatasets: (page?: number, results?: number, sortBy?: string, filter?: IDatasetFilter, order?: string): void => dispatch(listMyDatasets(page, results, sortBy, filter, order)),
listDescriptors: (page?: number, results?: number, sortBy?: string, filter?: IDescriptorFilter, order?: string): void => dispatch(listMyDescriptors(page, results, sortBy, filter, order)), listDescriptors: (page?: number, results?: number, sortBy?: string, filter?: IDescriptorFilter, order?: string): void => dispatch(listMyDescriptors(page, results, sortBy, filter, order)),
createDescriptorList: (): void => dispatch(createDescriptorList()),
}); });
export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(AdministrationDashboard)); export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(AdministrationDashboard));
import * as React from 'react'; import * as React from 'react';
const connect = require('react-redux').connect; import {connect} from 'react-redux';
import {withStyles} from 'material-ui/styles'; import {withStyles} from 'material-ui/styles';
import {loadDescriptor, createDescriptor, updateDescriptor, publishDescriptor} from 'actions/descriptors'; import {loadDescriptor, createDescriptor, updateDescriptor, publishDescriptor} from 'actions/descriptors';
import {loadPartners} from 'actions/partner'; import {loadPartners} from 'actions/partner';
......
import * as React from 'react';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import {loadDescriptorList, publishDescriptorList} from 'actions/descriptorList';
import {DescriptorList, Descriptor} from 'model/descriptors.model';
import Markdown from 'ui/common/markdown';
interface IDescriptorListPageProps extends React.ClassAttributes<any> {
uuid?: string;
descriptorList?: DescriptorList;
loadDescriptorList: any;
publishDescriptorList: any;
}
// Page to edit a descriptor list
class DescriptorListPage extends React.Component<IDescriptorListPageProps, any> {
protected static needs = [
({ params: { uuid } } ) => loadDescriptorList(uuid),
];
public componentWillMount() {
const {uuid, descriptorList, loadDescriptorList} = this.props;
/*console.log(`componentWillMount... ${tab}`, this.props);*/
if (uuid && ! descriptorList) {
loadDescriptorList(uuid);
}
}
public onUnPublish = (e) => {
const {descriptorList, publishDescriptorList} = this.props;
console.log('Un-publishing descriptor list', descriptorList);
publishDescriptorList(descriptorList, false);
}
public render() {
const {descriptorList} = this.props;
if (! descriptorList) {
return null;
}
// console.log('Showing descriptor list', descriptorList);
return (
<div>
{ ! descriptorList.published && <h2>This descriptor list is not yet published!</h2> }
<h1>{ descriptorList.title } <small>{ descriptorList.versionTag }</small></h1>
<div>Record version: <b>{ descriptorList.version }</b> UUID: <b>{ descriptorList.uuid }</b></div>
{ descriptorList.description && <Markdown source={ descriptorList.description } /> }
{ descriptorList.publisher && <div>Publisher: { descriptorList.publisher }</div> }
{ descriptorList.bibliographicCitation && <div>Bibliographic citation: { descriptorList.bibliographicCitation }</div> }
</div>
);
}
}
const mapStateToProps = (state, ownProps) => ({
uuid: ownProps.params.uuid,
descriptorList: state.descriptorList.currentDescriptorList,
});
const mapDispatchToProps = (dispatch) => bindActionCreators({
loadDescriptorList, publishDescriptorList,
}, dispatch);
export default connect(mapStateToProps, mapDispatchToProps)(DescriptorListPage);
import * as React from 'react';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import {loadDescriptorList, saveDescriptorList, publishDescriptorList} from 'actions/descriptorList';
import {DescriptorList, Descriptor} from 'model/descriptors.model';
import DescriptorListForm from './c/DescriptorListForm';
interface IDescriptorListEditPageProps extends React.ClassAttributes<any> {
uuid?: string;
descriptorList?: DescriptorList;
loadDescriptorList: any;
saveDescriptorList: any;
publishDescriptorList: any;
}
// Page to edit a descriptor list
class DescriptorListEditPage extends React.Component<IDescriptorListEditPageProps, any> {
protected static needs = [
({ params: { uuid } } ) => loadDescriptorList(uuid),
];
public componentWillMount() {
const {uuid, descriptorList, loadDescriptorList} = this.props;
/*console.log(`componentWillMount... ${tab}`, this.props);*/
if (uuid && ! descriptorList) {
loadDescriptorList(uuid);
}
}
public onSave = (descriptorList) => {
const {saveDescriptorList} = this.props;
// console.log('Saving descriptor list', descriptorList);
saveDescriptorList(descriptorList);
}
public onPublish = (e) => {
const {descriptorList, publishDescriptorList} = this.props;
// console.log('Publishing descriptor list', descriptorList);
publishDescriptorList(descriptorList);
}
public render() {
const {descriptorList} = this.props;
// console.log('Editing descriptor list', descriptorList);
return (
<div>
<DescriptorListForm initialValues={ descriptorList } onPublish={ this.onPublish } onSubmit={ this.onSave }/>
</div>
);
}
}
const mapStateToProps = (state, ownProps) => ({
uuid: ownProps.params.uuid,
descriptorList: state.descriptorList.currentDescriptorList,
});
const mapDispatchToProps = (dispatch) => bindActionCreators({
loadDescriptorList, saveDescriptorList, publishDescriptorList,
}, dispatch);
export default connect(mapStateToProps, mapDispatchToProps)(DescriptorListEditPage);
import * as React from 'react';
import {Field, reduxForm} from 'redux-form';
import Button from 'material-ui/Button';
import Radio, { RadioGroup} from 'material-ui/Radio';
import {FormLabel, FormControl, FormControlLabel} from 'material-ui/Form';
import { DESCRIPTORLIST_FORM } from 'constants/descriptors';
import { TextField } from 'ui/common/text-field';
import { MarkdownField } from 'ui/common/markdown';
import Heading from 'ui/common/heading';
const DescriptorListForm = ({error, handleSubmit, initialValues, onPublish}) => {
return (
<form onSubmit={ handleSubmit }>
{ initialValues && initialValues.version && <div>Version: { initialValues.version }</div> }
<Field name="crop" label="Crop code" placeholder="maize" component={ TextField } />
<Field required name="title" label="Descriptor list title" placeholder="My descriptor" component={ TextField } />
<Field name="description" label="Description" placeholder="Full description of the descriptor list" component={ MarkdownField } />
<Field required name="versionTag" label="Version tag" placeholder="1.0" component={ TextField } />
<Field required name="publisher" label="Publisher" placeholder="" component={ TextField } />
<Field required name="bibliographicCitation" label="Bibliographic citation" placeholder="" component={ TextField } multiline />
<div>{ error && <strong>{ error }</strong> }</div>
<Button raised type="submit" >Save changes</Button>
{ initialValues && initialValues.id > 0 && ! initialValues.published && <Button type="button" onClick={ onPublish }>Approve and Publish</Button> }
</form>
);
};
export default reduxForm({
enableReinitialize: true, // https://redux-form.com/7.1.0/examples/initializefromstate/
form: DESCRIPTORLIST_FORM,
})(DescriptorListForm);
...@@ -25,12 +25,14 @@ import DashboardPage from './pages/dashboard/DashboardPage'; ...@@ -25,12 +25,14 @@ import DashboardPage from './pages/dashboard/DashboardPage';
import DashboardWrapper from './pages/dashboard/DashboardWrapper'; import DashboardWrapper from './pages/dashboard/DashboardWrapper';
import MyDataPage from './pages/dashboard/MyDataPage'; import MyDataPage from './pages/dashboard/MyDataPage';
import DescriptorListDisplayPage from './pages/descriptorlist/DisplayPage';
import DescriptorListEditPage from './pages/descriptorlist/EditPage';
import guiTestingRoutes from './pages/ui-design'; import guiTestingRoutes from './pages/ui-design';
export default( export default(
<Route name="app" component={ App } path="/"> <Route name="app" component={ App } path="/">
<IndexRoute component={ WelcomePage }/> <IndexRoute component={ WelcomePage }/>
<Route path="/descriptors/list/:id" component={ DescriptorListsPage }/>
<Route path="/descriptors" component={ DescriptorListsPage }/> <Route path="/descriptors" component={ DescriptorListsPage }/>
<Route path="/descriptors/create" component={ CreateDescriptorPage }/> <Route path="/descriptors/create" component={ CreateDescriptorPage }/>
<Route path="/descriptors/:uuid/edit" component={ DescriptorEditPage }/> <Route path="/descriptors/:uuid/edit" component={ DescriptorEditPage }/>
...@@ -38,6 +40,11 @@ export default( ...@@ -38,6 +40,11 @@ export default(
<Route path="/partners" component={ PartnersPage }/> <Route path="/partners" component={ PartnersPage }/>
<Route path="/datasets" component={ Datasets } /> <Route path="/datasets" component={ Datasets } />
<Route path="/datasets/:uuid" component={ DatasetDetail } /> <Route path="/datasets/:uuid" component={ DatasetDetail } />
<Route path="/descriptorlist">
<Route path="edit" exact component={ DescriptorListEditPage } />
<Route path=":uuid/edit" component={ DescriptorListEditPage } />
<Route path=":uuid" component={ DescriptorListDisplayPage } />
</Route>
{ /* Example how to hide/show route for anonymous and users */ } { /* Example how to hide/show route for anonymous and users */ }
<Route component={ AuthorizedRouteComponent } authorities={ [ROLE_USER, ROLE_ADMINISTRATOR] }> <Route component={ AuthorizedRouteComponent } authorities={ [ROLE_USER, ROLE_ADMINISTRATOR] }>
<Route path="/profile" component={ NotFound }/> <Route path="/profile" component={ NotFound }/>
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment