Commit a59c3f84 authored by Valeriy Panov's avatar Valeriy Panov
Browse files

#117 Basic information section.

parent 830289b4
Pipeline #3477 passed with stages
in 3 minutes and 59 seconds
......@@ -63,7 +63,7 @@ function getDatasetRequest(uuid: string) {
}
function createDatasetRequest() {
const dataset = new Dataset({title: 'New Dataset', description: 'Description here'});
const dataset = new Dataset();
return (dispatch, getState) => {
const token = getState().login.access_token;
......
......@@ -67,7 +67,7 @@ class CollapsibleComponentSearch extends React.Component<ICollapsibleComponentS
</div>
<Collapse
in={ this.state.show }
transitionDuration="auto"
timeout="auto"
unmountOnExit
>
<div className={ classes.collapseBlockBody }>{ children }</div>
......
......@@ -84,7 +84,7 @@ class ExpandFiltersComponent extends React.Component<IExpandFiltersComponentProp
</div>
<Collapse
in={ this.state.filterExpanded }
transitionDuration="auto"
timeout="auto"
unmountOnExit
>
{ children }
......
......@@ -130,7 +130,7 @@ class BrowseMenu extends React.Component<IBrowseMenuProps, any> {
</Hidden>
</ListItem>
<Collapse in={ this.state.expanded } transitionDuration="auto" unmountOnExit>
<Collapse in={ this.state.expanded } timeout="auto" unmountOnExit>
<div>
<Divider />
<ListItem button className={ `${classes.liItemWrapper}` }>
......
......@@ -68,11 +68,11 @@ class StepNavigation extends React.Component<IStepNavigationProps, any> {
return steps.find((e) => e.link === path).id;
}
protected onNext = () => {
if (this.state.id === 6) {
protected goToStep = (id) => () => {
if (id > 6) {
// ACCEPT AND PUBLISH
} else {
const path = steps.find((e) => e.id === this.state.id + 1).link;
const path = steps.find((e) => e.id === id).link;
const {router, params: {uuid}} = this.props;
router.push(`/datasets/${uuid}/${path}`);
}
......@@ -92,10 +92,13 @@ class StepNavigation extends React.Component<IStepNavigationProps, any> {
}
</Typography>
<div className={ classes.flexGrow }/>
<Button className={ classes.btnReturn }>
Return
</Button>
<Button raised onClick={ this.onNext } className={ classes.btnBlue }>
{ this.state.id > 1 && (
<Button onClick={ this.goToStep(this.state.id - 1) } className={ classes.btnReturn }>
Return
</Button>
)
}
<Button raised onClick={ this.goToStep(this.state.id + 1) } className={ classes.btnBlue }>
{ this.state.id === 6 ? 'ACCEPT AND PUBLISH' : 'NEXT STEP' }
</Button>
</Grid>
......
......@@ -2,8 +2,9 @@ import * as React from 'react';
import {connect} from 'react-redux';
import {Field, FieldArray, reduxForm} from 'redux-form';
import {withStyles} from 'material-ui/styles';
import {FormLabel, FormControl, FormControlLabel} from 'material-ui/Form';
import Radio, {RadioGroup} from 'material-ui/Radio';
import {DatePicker} from 'material-ui-pickers';
import KeyboardArrowLeft from 'material-ui-icons/KeyboardArrowLeft';
import KeyboardArrowRight from 'material-ui-icons/KeyboardArrowRight';
import UploadSection from './upload-section';
import MaterialAutosuggest from '../../../../../common/material-autosuggest';
......@@ -12,6 +13,7 @@ import languages from '../../../../../../data/Languages';
import {TextField} from '../../../../../common/text-field';
import SelectPartnerComponent from './SelectPartnerComponent';
import {Partner} from '../../../../../../model/partner.model';
import {BasicInfoRadioGroup} from './BasicInfoRadioGroup';
interface ILoginContainerProps extends React.ClassAttributes<any> {
handleSubmit: () => void;
......@@ -27,36 +29,40 @@ const styleSheet = {
},
};
const renderRadioGroup = ({input, meta, ...rest}) => (
<FormControl required>
<FormLabel>Rights*</FormLabel>
<RadioGroup
{ ...input }
{ ...rest }
value={ input.value }
onChange={
(event, value) => input.onChange(value) // tslint:disable-line
}
>
<FormControlLabel value="CC0" label="CC0" control={ <Radio /> }/>
<FormControlLabel value="CC-BY" label="CC-BY" control={ <Radio /> }/>
<FormControlLabel value="CC-BY-NC" label="CC-BY-NC" control={ <Radio /> }/>
</RadioGroup>
</FormControl>
const renderDatePicker = ({input, meta, label, ...rest}) => (
<DatePicker
value={ input.value }
onChange={
(value) => input.onChange(value.getTime()) // tslint:disable-line
}
invalidLabel={ label }
returnMoment={ false }
leftArrowIcon={ <KeyboardArrowLeft/> }
rightArrowIcon={ <KeyboardArrowRight/> }
/>
);
class BasicInfoStep extends React.Component<ILoginContainerProps, any> {
protected save = () => {
this.props.handleSubmit();
setTimeout(this.props.handleSubmit);
}
public render() {
const {handleSubmit, initialValues, classes, uuid, partners} = this.props;
const {classes, uuid, partners} = this.props;
return (
<form>
<Field
name="owner"
component={ SelectPartnerComponent }
label="Select Partner"
placeholder="Partner"
array={ partners }
selectId="select-option-partner"
onBlur={ this.save }
/>
<Field
name="title"
component={ TextField }
......@@ -72,29 +78,16 @@ class BasicInfoStep extends React.Component<ILoginContainerProps, any> {
placeholder="An abstract, short or long description of the resource. Descriptive details improves discoverability of the resource."
onBlur={ this.save }
/>
<Field
name="owner"
component={ SelectPartnerComponent }
label="Select Partner"
placeholder="Partner"
array= { partners }
selectId = "select-option-partner"
onBlur={ this.save }
/>
<Field
name="dateCreateDocument"
component={ TextField }
component={ renderDatePicker }
label="Date of creation of the document*"
type="date"
onBlur={ this.save }
InputLabelProps={ {
shrink: true,
} }
onChange={ this.save }
/>
<Field
name="rights"
component={ renderRadioGroup }
onBlur={ this.save }
component={ BasicInfoRadioGroup }
onChange={ this.save }
/>
<Field
name="language"
......
import * as React from 'react';
import {FormLabel, FormControl, FormControlLabel} from 'material-ui/Form';
import Radio, {RadioGroup} from 'material-ui/Radio';
import Tooltip from 'material-ui/Tooltip';
export const BasicInfoRadioGroup = ({input, meta, ...rest}) => (
<FormControl required>
<FormLabel>Rights*</FormLabel>
<RadioGroup
{ ...input }
{ ...rest }
value={ input.value }
onChange={
(event, value) => input.onChange(value) // tslint:disable-line
}
>
<FormControlLabel
value="CC0"
label={ (
<Tooltip
id="tooltip-controlled1"
title={ (
<a href="https://creativecommons.org/publicdomain/zero/1.0/" target="_blank"
style={ {color: 'white'} }>
https://creativecommons.org/publicdomain/zero/1.0/
</a>
) }
enterDelay={ 300 }
leaveDelay={ 1200 }
placement="right"
>
<div>CCO</div>
</Tooltip>
) }
control={ <Radio /> }
/>
<FormControlLabel
value="CC-BY"
label={ (
<Tooltip
id="tooltip-controlled1"
title={ (
<a href="https://creativecommons.org/licenses/by/4.0/" target="_blank"
style={ {color: 'white'} }>
https://creativecommons.org/licenses/by/4.0/
</a>
) }
enterDelay={ 300 }
leaveDelay={ 1200 }
placement="right"
>
<div>CC-BY</div>
</Tooltip>
) }
control={ <Radio /> }
/>
<FormControlLabel
value="CC-BY-NC"
label={ (
<Tooltip
id="tooltip-controlled1"
title={ (
<a href="https://creativecommons.org/licenses/by-nc/4.0/" target="_blank"
style={ {color: 'white'} }>
https://creativecommons.org/licenses/by-nc/4.0/
</a>
) }
enterDelay={ 300 }
leaveDelay={ 1200 }
placement="right"
>
<div>CC-BY-NC</div>
</Tooltip>
) }
control={ <Radio /> }
/>
</RadioGroup>
</FormControl>
);
......@@ -2,7 +2,6 @@ import * as React from 'react';
import {bindActionCreators} from 'redux';
import {connect} from 'react-redux';
import * as _ from 'lodash';
import * as moment from 'moment';
import BasicInfoForm from './BasicInfoForm';
import {Dataset} from '../../../../../../model/dataset.model';
......@@ -11,8 +10,6 @@ import {loadPartners} from '../../../../../../actions/partner';
import {IPartnerFilter} from '../../../../../../model/filter.model';
import {Partner} from '../../../../../../model/partner.model';
const DATE_FORMAT = 'YYYY-MM-DD';
interface IDatasetProps extends React.ClassAttributes<any> {
route: any;
router: any;
......@@ -25,10 +22,6 @@ interface IDatasetProps extends React.ClassAttributes<any> {
class BasicInfoStep extends React.Component<IDatasetProps, any> {
public constructor(props) {
super(props);
}
public componentDidMount() {
if (this.props.partners.length === 0) {
this.props.loadPartners(0, 50, null, {});
......@@ -37,30 +30,13 @@ class BasicInfoStep extends React.Component<IDatasetProps, any> {
protected handleSubmit = (values: Dataset) => {
const {dataset, saveDatasetRequest} = this.props;
const handled = {
...values,
dateCreateDocument: moment(values.dateCreateDocument, DATE_FORMAT).valueOf(),
};
if (!_.isEqual({...dataset}, handled)) {
saveDatasetRequest(new Dataset(handled));
}
}
// todo check date when material-ui date-picker is available
private withStringDateValue = (dataset) => {
if (dataset && dataset.dateCreateDocument) {
dataset.dateCreateDocument = moment(dataset.dateCreateDocument).format(DATE_FORMAT);
if (!_.isEqual({...dataset}, values)) {
saveDatasetRequest(values);
}
return dataset;
}
public render() {
const { partners } = this.props;
const dataset = this.withStringDateValue({...this.props.dataset});
const {dataset, partners} = this.props;
return (
<BasicInfoForm
......
......@@ -362,7 +362,7 @@ class SearchMenu extends React.Component<ISearchMenuProps, any> {
</IconButton>
</div>
<Collapse in={ this.state.searchExpanded } transitionDuration="auto" unmountOnExit>
<Collapse in={ this.state.searchExpanded } timeout="auto" unmountOnExit>
{ this.renderSearchComponent() }
</Collapse>
</div>
......@@ -393,7 +393,7 @@ class SearchMenu extends React.Component<ISearchMenuProps, any> {
</div>
</Hidden>
<Collapse in={ this.state.filterExpanded } transitionDuration="auto" unmountOnExit>
<Collapse in={ this.state.filterExpanded } timeout="auto" unmountOnExit>
<div>
<Divider className={ classes.hrClass }/>
<ListItem className={ `${classes.gray} ${classes.smallTitle} ${classes.mgBottom5}` }>
......
......@@ -217,7 +217,7 @@ class SearchMenu extends React.Component<ISearchMenuProps, any> {
<Collapse
in={ this.state.expanded }
transitionDuration="auto"
timeout="auto"
unmountOnExit
onEntered={ this.overflowVisible }
onExit={ this.overflowHidden }
......@@ -257,7 +257,7 @@ class SearchMenu extends React.Component<ISearchMenuProps, any> {
<Collapse
in={ this.state.expandDate }
transitionDuration="auto"
timeout="auto"
unmountOnExit
onEntered={ this.overflowVisible }
onExit={ this.overflowHidden }
......@@ -320,7 +320,7 @@ class SearchMenu extends React.Component<ISearchMenuProps, any> {
<Collapse
in={ this.state.expandInst }
transitionDuration="auto"
timeout="auto"
unmountOnExit
onEntered={ this.overflowVisible }
onExit={ this.overflowHidden }
......
const steps = [
{
id: 1,
name: 'Basic info',
name: 'Basic information',
link: '',
},
{
......
import {createMuiTheme} from 'material-ui/styles';
import {ThemeOptions} from 'material-ui/styles/createMuiTheme';
const theme = createMuiTheme({
/* tslint:disable */
......@@ -178,7 +179,7 @@ const theme = createMuiTheme({
backgroundColor: '#fff',
},
},
});
/* tslint:enable */
} as ThemeOptions);
export default theme;
Markdown is supported
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