Added Descriptor Lists routes and pages

- DescriptorListEditPage displays the edit form
- DescriptorListPage

src/ui/pages/dashboard/DashboardPage.tsx

@@ -6,6 +6,7 @@ import {bindActionCreators} from 'redux';
 
 import {createDatasetRequest, listMyDatasets} from 'actions/dataset';
 import {listMyDescriptors} from 'actions/descriptors';
+import {createDescriptorList} from 'actions/descriptorList';
 import {IDatasetFilter, IDescriptorFilter} from 'model/filter.model';
 import {Page} from 'model/common.model';
 import {Dataset} from 'model/dataset.model';
@@ -27,6 +28,7 @@ interface IAdministrationDashboardProps extends React.ClassAttributes<any> {
     datasetPage: Page<Dataset>;
     listMyDescriptors: (page?: number, results?: number, sortBy?: string, filter?: IDescriptorFilter, order?: string) => void;
     descriptorPage: Page<Descriptor>;
+    createDescriptorList: any;
     appMounted: boolean;
 }
 
@@ -77,7 +79,7 @@ class AdministrationDashboard extends BaseMyDataPage {
 
     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;
 
@@ -86,13 +88,16 @@ class AdministrationDashboard extends BaseMyDataPage {
                 <ContentHeaderWithButton title="What do you want to do?"/>
                 <div className={ classes.content }>
                     <Grid container spacing={ 0 }>
-                        <Grid item xs={ 12 } md={ 4 }>
+                        <Grid item xs={ 6 } lg={ 4 }>
                             <DashboardButton title="CREATE DATASET" onClickFunction={ this.goToNewDataset }/>
                         </Grid>
-                        <Grid item xs={ 12 } md={ 4 }>
+                        <Grid item xs={ 6 } lg={ 4 }>
                             <DashboardButton title="CREATE DESCRIPTOR" onClickFunction={ this.goToNewDescriptorForm }/>
                         </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 }/>
                         </Grid>
                     </Grid>
@@ -130,6 +135,7 @@ const mapStateToProps = (state, ownProps) => ({
 const mapDispatchToProps = (dispatch) => ({
   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)),
+  createDescriptorList: (): void => dispatch(createDescriptorList()),
 });
 
 export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(AdministrationDashboard));

src/ui/pages/descriptor/DescriptorEditPage.tsx

 import * as React from 'react';
-const connect = require('react-redux').connect;
+import {connect} from 'react-redux';
 import {withStyles} from 'material-ui/styles';
 import {loadDescriptor, createDescriptor, updateDescriptor, publishDescriptor} from 'actions/descriptors';
 import {loadPartners} from 'actions/partner';

src/ui/pages/descriptorlist/DisplayPage.tsx

+
+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);

src/ui/pages/descriptorlist/EditPage.tsx

+
+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);

src/ui/pages/descriptorlist/c/DescriptorListForm.tsx

+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);

src/ui/routes.tsx

@@ -25,12 +25,14 @@ import DashboardPage from './pages/dashboard/DashboardPage';
 import DashboardWrapper from './pages/dashboard/DashboardWrapper';
 import MyDataPage from './pages/dashboard/MyDataPage';
 
+import DescriptorListDisplayPage from './pages/descriptorlist/DisplayPage';
+import DescriptorListEditPage from './pages/descriptorlist/EditPage';
+
 import guiTestingRoutes from './pages/ui-design';
 
 export default(
     <Route name="app" component={ App } path="/">
         <IndexRoute component={ WelcomePage }/>
-        <Route path="/descriptors/list/:id" component={ DescriptorListsPage }/>
         <Route path="/descriptors" component={ DescriptorListsPage }/>
         <Route path="/descriptors/create" component={ CreateDescriptorPage }/>
         <Route path="/descriptors/:uuid/edit" component={ DescriptorEditPage }/>
@@ -38,6 +40,11 @@ export default(
         <Route path="/partners" component={ PartnersPage }/>
         <Route path="/datasets" component={ Datasets } />
         <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 */ }
         <Route component={ AuthorizedRouteComponent } authorities={ [ROLE_USER, ROLE_ADMINISTRATOR] }>
             <Route path="/profile" component={ NotFound }/>