Commit c6203863 authored by Matija Obreza's avatar Matija Obreza
Browse files

Vocabulary display page updated

parent 4641c23e
......@@ -5,9 +5,13 @@ import { bindActionCreators } from 'redux';
import { Dataset } from 'model/dataset.model';
import { Descriptor, DescriptorList } from 'model/descriptor.model';
import { loadDescriptorList } from 'actions/descriptorList';
import { Partner } from 'model/partner.model';
import { loadPartner } from 'actions/partner';
import { Vocabulary } from 'model/vocabulary.model';
import { loadVocabulary } from 'actions/vocabulary';
import { Link } from 'react-router';
interface IDatasetLinkProps extends React.Props<any> {
......@@ -117,5 +121,24 @@ const PartnerLink_ = ({ to: partner, edit = false, children, loadPartner }: { to
const PartnerLink = connect(({}) => ({}), (dispatch) => bindActionCreators({loadPartner}, dispatch)) (PartnerLink_);
const VocabularyLink_ = ({ to: vocabulary, edit = false, children, loadVocabulary }: { to: Vocabulary, edit?: boolean, loadVocabulary: (uuid: string) => Promise<Vocabulary>, children?: any } & any) => {
const clickMe = (e) => {
console.log('You clicked me!', vocabulary);
loadVocabulary(vocabulary.uuid);
};
if (edit) {
return (
<Link to={ `/vocabulary/${vocabulary.uuid}/edit` } onClick={ clickMe }>{ children || vocabulary.name }</Link>
);
} else {
return (
<Link to={ `/vocabulary/${vocabulary.uuid}` } onClick={ clickMe }>{ children || vocabulary.name }</Link>
);
}
};
const VocabularyLink = connect(({}) => ({}), (dispatch) => bindActionCreators({loadVocabulary}, dispatch)) (VocabularyLink_);
export { DatasetLink, DescriptorLink, DescriptorListLink, FaoWiewsLink, PartnerLink };
export { DatasetLink, DescriptorLink, DescriptorListLink, FaoWiewsLink, PartnerLink, VocabularyLink };
import * as React from 'react';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import {withStyles} from 'material-ui/styles';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { withStyles } from 'material-ui/styles';
import {loadVocabulary} from 'actions/vocabulary';
import {Vocabulary} from 'model/vocabulary.model';
import { loadVocabulary, deleteVocabulary } from 'actions/vocabulary';
import { Vocabulary, VocabularyTerm } from 'model/vocabulary.model';
import confirm from 'utilities/confirmAlert';
import Loading from 'ui/common/Loading';
import Section from 'ui/common/layout/Section';
import Markdown from 'ui/common/markdown';
import ContentHeaderWithButton from 'ui/common/heading/ContentHeaderWithButton';
import { Table, TableRow, TableCell } from 'ui/common/tables';
import { VocabularyLink } from 'ui/common/Links';
import Grid from 'material-ui/Grid';
import Card, {CardHeader, CardContent} from 'material-ui/Card';
import Card, { CardHeader, CardContent, CardActions } from 'material-ui/Card';
import Divider from 'material-ui/Divider';
import Paper from 'material-ui/Paper';
import Button from 'material-ui/Button';
interface IDisplayPageProps extends React.ClassAttributes<any> {
classes: any;
uuid?: string;
classes: any;
uuid?: string;
loadVocabulary: (uuid: string) => void;
vocabulary?: Vocabulary;
loadVocabulary: (uuid: string) => void;
deleteVocabulary: (vocabulary: Vocabulary) => Promise<Vocabulary>;
vocabulary?: Vocabulary;
}
const styles = (theme) => ({
contentContainer: {
backgroundColor: '#E8E5E0',
padding: '1rem',
},
form: {
padding: '20px',
margin: '0 0 1rem 0',
},
contentContainer: {
backgroundColor: '#E8E5E0',
padding: '1rem',
},
form: {
padding: '20px',
margin: '0 0 1rem 0',
},
});
class DisplayPage extends React.Component<IDisplayPageProps, any> {
protected static needs = [
({params: {uuid}}) => loadVocabulary(uuid),
];
public componentDidMount() {
const {vocabulary, loadVocabulary, uuid} = this.props;
if (uuid && (!vocabulary || vocabulary.uuid !== uuid)) {
loadVocabulary(uuid);
}
}
public render() {
const {classes, uuid, vocabulary} = this.props;
const stillLoading: boolean = (! vocabulary || (uuid && vocabulary && vocabulary.uuid !== uuid));
return (
<div>
<ContentHeaderWithButton title="Vocabulary details" buttonName="BACK" buttonUrl="/vocabulary"/>
{ stillLoading ? <Loading /> :
<Grid container className={ classes.contentContainer }>
<Grid item xs={ 12 }>
<Card className={ classes.card } square>
<CardHeader className={ classes.cardHeader } title={ (
<span>{ vocabulary.title }
<small>{ vocabulary.versionTag }</small></span>
) }/>
<Divider/>
<CardContent className={ classes.cardContent }>
{ vocabulary.description && <Markdown source={ vocabulary.description }/> }
<div>Record version: <b>{ vocabulary.version }</b> UUID: <b>{ vocabulary.uuid }</b></div>
</CardContent>
</Card>
</Grid>
{ vocabulary.terms && vocabulary.terms.length > 0 && (
<Paper className={ classes.form }>
{ vocabulary.terms.map((term) => (
<div key={ term.code }>{ term.code } &rarr; { term.title }</div>
)) }
</Paper>
) }
</Grid>
}
</div>
);
}
protected static needs = [
({params: {uuid}}) => loadVocabulary(uuid),
];
public componentDidMount() {
const {vocabulary, loadVocabulary, uuid} = this.props;
if (uuid && (!vocabulary || vocabulary.uuid !== uuid)) {
loadVocabulary(uuid);
}
}
private onDelete = (e) => {
const {vocabulary, deleteVocabulary} = this.props;
confirm(<span>Delete <b>{ vocabulary.title }</b>?</span>, {
description: `Deleting the vocabulary is only possible when there is no associated data.`,
confirmLabel: 'Delete',
abortLabel: 'Cancel',
}).then(() => {
deleteVocabulary(vocabulary);
}).catch(() => {
// don't delete
});
}
public render() {
const {classes, uuid, vocabulary} = this.props;
const stillLoading: boolean = (! vocabulary || (uuid && vocabulary && vocabulary.uuid !== uuid));
return (
<div>
<ContentHeaderWithButton title="Vocabulary details" buttonName="BACK" buttonUrl="/vocabulary"/>
{ stillLoading ? <Loading /> :
<Grid container className={ classes.contentContainer }>
<Grid item xs={ 12 }>
<Card className={ classes.card } square>
<CardHeader className={ classes.cardHeader } title={ (
<span>{ vocabulary.title }
<small>{ vocabulary.versionTag }</small></span>
) }/>
<Divider/>
<CardContent className={ classes.cardContent }>
{ vocabulary.description && <Markdown source={ vocabulary.description }/> }
<div>Record version: <b>{ vocabulary.version }</b> UUID: <b>{ vocabulary.uuid }</b></div>
</CardContent>
{ (vocabulary._permissions.write || vocabulary._permissions.delete) && (
<CardActions>
{ vocabulary._permissions.write && <VocabularyLink edit to={ vocabulary }><Button>Edit</Button></VocabularyLink> }
{ vocabulary._permissions.delete && <Button onClick={ this.onDelete } type="button">Delete</Button> }
</CardActions>
) }
</Card>
</Grid>
{ vocabulary.terms && vocabulary.terms.length > 0 && (
<Grid item xs={ 12 }>
<Section title="Accepted vocabulary terms">
<Table widths={ [ '10%', '20%', null ] } headers={ (
<TableRow>
<TableCell>Code</TableCell>
<TableCell>Term</TableCell>
<TableCell>Description</TableCell>
</TableRow>
) }>
{ vocabulary.terms.map((term: VocabularyTerm) => (
<TableRow key={ term.code }>
<TableCell className="font-bold">{ term.code }</TableCell>
<TableCell>{ term.title }</TableCell>
<TableCell>{ term.description }</TableCell>
</TableRow>
)) }
</Table>
</Section>
</Grid>
) }
</Grid>
}
</div>
);
}
}
const mapStateToProps = (state, ownProps) => ({
uuid: ownProps.params.uuid,
vocabulary: state.vocabulary.currentVocabulary,
uuid: ownProps.params.uuid,
vocabulary: state.vocabulary.currentVocabulary,
});
const mapDispatchToProps = (dispatch) => bindActionCreators({
loadVocabulary,
loadVocabulary,
deleteVocabulary,
}, dispatch);
const styled = withStyles(styles)(DisplayPage);
......
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