DisplayPage.tsx 7.72 KB
Newer Older
1
2
3
4

import * as React from 'react';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
5
import { withStyles } from 'material-ui/styles';
6

Valeriy Panov's avatar
Valeriy Panov committed
7
8
import {log} from 'utilities/debug';

9
10
import { loadDescriptorList, publishDescriptorList, deleteDescriptorList } from 'actions/descriptorList';
import { DescriptorList, Descriptor } from 'model/descriptor.model';
11

12
13
import confirm from 'utilities/confirmAlert';
import Authorize from 'ui/common/authorized/Authorize';
14
import Loading from 'ui/common/Loading';
15
import Markdown from 'ui/catalog/markdown';
Matija Obreza's avatar
Matija Obreza committed
16
import DescriptorCard from 'ui/catalog/descriptor/DescriptorCard';
17
import ContentHeaderWithButton from 'ui/common/heading/ContentHeaderWithButton';
18
19
import { PartnerLink, DescriptorListLink, CropLink } from 'ui/catalog/Links';
import { Properties, PropertiesItem } from 'ui/catalog/Properties';
Maxym Borodenko's avatar
Maxym Borodenko committed
20
import BackButton from 'ui/common/buttons/BackButton';
21
import { ScrollToTopOnMount } from 'ui/common/page/scrollers';
22
23

import Grid from 'material-ui/Grid';
24
import Card, {CardHeader, CardContent, CardActions } from 'ui/common/Card';
25
import Section from 'ui/common/layout/Section';
26
import Divider from 'material-ui/Divider';
27
import Button from 'material-ui/Button';
28
29

interface IDescriptorListPageProps extends React.ClassAttributes<any> {
30
31
32
33
34
35
36
	classes: any;
	uuid?: string;
	descriptorList?: DescriptorList;
	loading?: any;
	loadDescriptorList: any;
	publishDescriptorList: any;
	deleteDescriptorList: any;
37
38
}

39
const styles = (theme) => ({
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
		filterSection: theme.leftPanel.root,
		contentContainer: {
			backgroundColor: '#E8E5E0',
			padding: '1.5rem',
		},
		card: {
			marginBottom: '1.5rem',
		},
		propertiesContainer: {
			marginTop: '20px',
			marginBottom: '20px',
		},
		propertiesRow: {
			/* tslint:disable */
			'marginTop': '1px',
			'marginBottom': '1px',
			'& > *:first-child': {
				borderRight: 'solid 1px white',
			},
			'&:nth-child(even)': {
					backgroundColor: '#f8f7f5',
			},
			'&:nth-child(odd)': {
					backgroundColor: '#f3f2ee',
			},
			/* tslint:enable */
		},
67
68
});

69
70
71
// Page to edit a descriptor list
class DescriptorListPage extends React.Component<IDescriptorListPageProps, any> {

72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
		protected static needs = [
			({ params: { uuid } }) => loadDescriptorList(uuid),
		];

		public componentWillMount() {
			const {uuid, loading, loadDescriptorList} = this.props;

			if (uuid && (! loading || loading.uuid !== uuid)) {
				loadDescriptorList(uuid);
			}
		}

		private onPublish = (e) => {
			const {descriptorList, publishDescriptorList} = this.props;

			confirm(<span>Publish <b>{ descriptorList.title }</b>?</span>, {
				description: `After publishing the descriptor list no changes are permitted, a new version must be created.`,
				confirmLabel: 'Publish',
				abortLabel: 'Cancel',
			}).then(() => {
Valeriy Panov's avatar
Valeriy Panov committed
92
				log('Publishing descriptor list', descriptorList);
93
94
95
96
97
98
99
100
101
102
103
104
105
106
				publishDescriptorList(descriptorList);
			}).catch(() => {
					// don't
			});
		}

		private onUnpublish = (e) => {
			const {descriptorList, publishDescriptorList} = this.props;

			confirm(<span>Unpublish <b>{ descriptorList.title }</b>?</span>, {
					// description: `Deleting the descriptor is only possible when there is no associated data.`,
					confirmLabel: 'Unpublish',
					abortLabel: 'Cancel',
			}).then(() => {
Valeriy Panov's avatar
Valeriy Panov committed
107
				log('Publishing descriptor list', descriptorList);
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
				publishDescriptorList(descriptorList, false);
			}).catch(() => {
					// don't
			});
		}

		private onDelete = (e) => {
			const {descriptorList, deleteDescriptorList} = this.props;

			confirm(<span>Delete <b>{ descriptorList.title }</b>?</span>, {
					description: `Deleting the descriptor is only possible when there is no associated data.`,
					confirmLabel: 'Delete',
					abortLabel: 'Cancel',
			}).then(() => {
					deleteDescriptorList(descriptorList);
			}).catch(() => {
					// don't
			});
		}

		public render() {
129
				const {classes, uuid, descriptorList } = this.props;
130
131
132
133
134

				const stillLoading: boolean = (! descriptorList || (uuid && (descriptorList.uuid !== uuid)));

				return (
					<div>
135
						<ScrollToTopOnMount />
Maxym Borodenko's avatar
Maxym Borodenko committed
136
						<ContentHeaderWithButton title="Descriptor list details" buttons={ <BackButton defaultTarget="/descriptorlists" /> } />
137
138
139
140
141
142
						{ stillLoading ? <Loading className={ classes.contentContainer } /> :
						<span>
							<Grid container className={ classes.contentContainer }>
								<Grid item xs={ 12 }>
									<Card className={ classes.card } square>
										<CardHeader className={ classes.cardHeader } title={ (
143
											<span><Markdown basic source={ descriptorList.title } /> <small>{ descriptorList.versionTag }</small></span>
144
145
146
147
										) } />
										<Divider />
										<CardContent className={ classes.cardContent }>
											{ ! descriptorList.published && <h2>This descriptor list is not yet published!</h2> }
148
149
150
151
											{ descriptorList.description && <Markdown className="mb-20" source={ descriptorList.description } /> }

											<Properties>
												{ descriptorList.crop &&
152
													<PropertiesItem title="Crop:"><CropLink code={ descriptorList.crop } /></PropertiesItem> }
153
154
155
156
157
158

												<PropertiesItem title="Publisher:">{ descriptorList.publisher || <i>Not specified</i> }</PropertiesItem>

												{ descriptorList.bibliographicCitation &&
													<PropertiesItem title="Bibliographic citation:">{ descriptorList.bibliographicCitation }</PropertiesItem> }

Matija Obreza's avatar
Matija Obreza committed
159
												{ (descriptorList.publisher === null && descriptorList.owner) &&
160
161
162
163
													<PropertiesItem title="Maintained by:"><PartnerLink to={ descriptorList.owner } /></PropertiesItem> }

												<PropertiesItem title="Version:">{ descriptorList.versionTag }</PropertiesItem>
											</Properties>
164
165
166
167
168
169
170
171
172
173
174
175
176
										</CardContent>

										{ (descriptorList._permissions.write || descriptorList._permissions.delete) && (
											<CardActions>
												{ descriptorList.published ?
													<Authorize role="ROLE_ADMINISTRATOR">
														<Button onClick={ this.onUnpublish } type="button">Un-publish</Button>
													</Authorize>
													:
													<Button onClick={ this.onPublish } type="button">Publish</Button>
												}
												{ ! descriptorList.published && descriptorList._permissions.write && <DescriptorListLink edit to={ descriptorList }><Button>Edit</Button></DescriptorListLink> }
												{ ! descriptorList.published && descriptorList._permissions.delete && <Button onClick={ this.onDelete } type="button">Delete</Button> }
177
												<a target="_blank" href={ `/proxy/api/v0/descriptorlist/${descriptorList.uuid}/html` }><Button type="button">Download as HTML</Button></a>
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
											</CardActions>
										) }
									</Card>
								</Grid>

								<Grid item xs={ 12 } md={ 9 }>
								{ descriptorList.descriptors.map((descriptor: Descriptor) => (
										<div key={ `${descriptor.uuid}` } id={ `d-${descriptor.uuid}` }>
											<DescriptorCard id={ `d-${descriptor.uuid}` } className={ classes.card } descriptor={ descriptor } complete publisher crop version />
										</div>
								)) }
								</Grid>
								<Grid item xs={ 12 } md={ 3 }>
									<Section title="Table of contents" className="p-20">
									{ descriptorList.descriptors.map((descriptor: Descriptor) => (
											<div key={ `${descriptor.uuid}` }><a href={ `#d-${descriptor.uuid}` }>{ descriptor.title }</a></div>
									)) }
									</Section>
								</Grid>
							</Grid>
						</span>
					}
					</div>
				);
		}
203
204
205
}

const mapStateToProps = (state, ownProps) => ({
206
207
208
	uuid: ownProps.params.uuid,
	descriptorList: state.descriptorList.currentDescriptorList,
	loading: state.descriptorList.loading,
209
210
211
});

const mapDispatchToProps = (dispatch) => bindActionCreators({
212
213
214
	loadDescriptorList,
	publishDescriptorList,
	deleteDescriptorList,
215
216
}, dispatch);

217
export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(DescriptorListPage));