Add search results table

lib/search-result-settings.js

@@ -0,0 +1,38 @@
+function getFactory (key, def) {
+	return function () {
+		const stored = localStorage.getItem(key)
+
+		if (!stored) {
+			return def
+		}
+
+		try {
+			return JSON.parse(stored)
+		} catch (e) {
+			return def
+		}
+	}
+}
+
+function setFactory (key) {
+	return function (value) {
+		localStorage.setItem(key, JSON.stringify(value))
+	}
+}
+
+const FIELD_KEY = 'search-result--fields'
+const DISPLAY_KEY = 'search-result--display'
+
+const fields = {
+	get: getFactory(FIELD_KEY, []),
+	set: setFactory(FIELD_KEY),
+}
+
+const display = {
+	get: getFactory(DISPLAY_KEY),
+	set: setFactory(DISPLAY_KEY),
+}
+
+export default { fields, display }
+export { fields }
+export { display }

lib/work-fields.js

@@ -0,0 +1,70 @@
+const fields = {
+	'id': 'ID',
+	'title': 'Title',
+	'creator': 'Creator',
+	'creator_photographer': 'Creator - Photographer',
+	'format_medium': 'Format - Medium',
+	'format_size': 'Format - Size',
+	'date_approximate': 'Date (Approximate)',
+	'date_range': 'Date Range',
+	'creator_maker': 'Creator - Maker',
+	'date_original_display': 'Date - Original (Display)',
+	'description_size': 'Size',
+	'description_note': 'Note',
+	'subject_lcsh': 'Subject (LCSH)',
+	'publisher_original': 'Publisher - Original',
+	'date_original': 'Date - Original',
+	'format_extent': 'Extent',
+	'description_condition': 'Condition',
+	'description_provenance': 'Provenance',
+	'description_series': 'Series',
+	'identifier_itemnumber': 'Item Number',
+	'publisher_digital': 'Publisher - Digital',
+	'format_digital': 'Format - Digital',
+	'rights_digital': 'Rights - Digital',
+	'subject_ocm': 'Subject (OCM)',
+	'description_critical': 'Description - Critial',
+	'description_indicia': 'Indicia',
+	'description_text': 'Description - Text',
+	'description_inscription': 'Inscription',
+	'description_ethnicity': 'Ethnicity',
+	'description_citation': 'Citation',
+	'coverage_location_country': 'Location - Country',
+	'coverage_location': 'Location',
+	'creator_company': 'Company',
+	'relation_seealso': 'See Also',
+	'date_image_upper': 'Date - Image (Upper)',
+	'date_image_lower': 'Date - Image (Lower)',
+	'title_name': 'Title - Name',
+	'description_class': 'Class',
+	'date_birth_display': 'Date - Birth (Display)',
+	'coverage_place_birth': 'Place - Birth',
+	'description_military_branch': 'Military Branch',
+	'description_military_rank': 'Military Rank',
+	'description_military_unit': 'Military Unit',
+	'date_death_display': 'Date - Death (Display)',
+	'coverage_place_death': 'Place - Death',
+	'description_cause_death': 'Cause of Death',
+	'description_honors': 'Honors',
+	'type': 'Type',
+	'contributor': 'Contributor(s)',
+	'description': 'Description',
+	'keyword': 'Keyword',
+	'rights': 'Rights',
+	'publisher': 'Publisher',
+	'date_created': 'Date - Created',
+	'subject': 'Subject',
+	'language': 'Language',
+	'identifier': 'Identifier',
+	'based_near': 'Based Near',
+	'related_url': 'Related URL',
+	'bibliographic_citation': 'Bibliographic Citation',
+	'source': 'Source',
+	'date_artifact_upper': 'Date - Artifact (Upper)',
+	'date_artifact_lower': 'Date - Artifact (Lower)',
+
+	//'thumbnail_path': 'Thumbnail Path',
+	//'uses_vocabulary': 'Uses Vocabulary',
+}
+
+export default fields

package.json

@@ -25,6 +25,7 @@
     "babel-preset-react": "^6.5.0",
     "babel-runtime": "^6.18.0",
     "blacklight-querystring": "^3.0.0",
+    "classnames": "^2.2.5",
     "color-shade": "^1.0.0",
     "css-loader": "^0.23.1",
     "debounce": "^1.0.0",
@@ -40,16 +41,16 @@
     "node-bourbon": "^4.2.8",
     "node-neat": "^1.7.2",
     "node-sass": "^3.8.0",
-    "number-with-commas": "^1.0.2",
+    "number-with-commas": "^1.1.0",
     "object-assign": "^4.1.0",
     "openseadragon": "^2.2.1",
     "pdfjs-dist": "^1.6.332",
     "pdfviewer": "^1.0.1",
     "promise-queue": "^2.2.3",
     "raw-loader": "^0.5.1",
     "rc-slider": "^5.1.2",
-    "react": "^15.3.1",
-    "react-addons-shallow-compare": "^15.3.1",
+    "react": "^15.4.2",
+    "react-addons-shallow-compare": "^15.4.2",
     "react-autocomplete": "^1.4.0",
     "react-dom": "^15.1.0",
     "react-dropzone": "^3.5.3",
@@ -67,12 +68,12 @@
     "style-loader": "^0.13.1",
     "url-loader": "^0.5.7",
     "webpack": "^1.13.1",
-    "webpack-dev-server": "^1.14.1",
-    "xhr": "^2.2.1"
+    "webpack-dev-server": "^1.14.1"
   },
   "devDependencies": {
     "babel-plugin-add-module-exports": "^0.2.1",
     "babel-plugin-static-fs": "^1.1.0",
+    "babel-preset-stage-0": "^6.16.0",
     "chai": "^3.5.0",
     "enzyme": "^2.4.1",
     "eslint": "^3.2.2",
@@ -92,7 +93,8 @@
     "random-array-index": "^1.1.0",
     "random-bool": "^1.0.2",
     "raw-loader": "^0.5.1",
-    "react-addons-test-utils": "^15.3.1",
+    "react-addons-test-utils": "^15.4.2",
+    "react-dom": "^15.4.2",
     "redux-mock-store": "^1.2.0"
   },
   "plugins": [

src/components/catalog/ResultsGallery.jsx

@@ -0,0 +1,33 @@
+import React from 'react'
+import ResultsGalleryItem from './ResultsGalleryItem.jsx'
+
+const propTypes = {
+	data: React.PropTypes.array,
+}
+
+const defaultProps = {
+	data: [],
+}
+
+class ResultsGallery extends React.Component {
+	constructor (props) {
+		super(props)
+	}
+
+	renderGalleryItem (item, index) {
+		return <ResultsGalleryItem data={item} key={index}/>
+	}
+
+	render () {
+		return (
+			<div className="search-results-gallery">
+				{this.props.data.map(this.renderGalleryItem)}
+			</div>
+		)
+	}
+}
+
+ResultsGallery.propTypes = propTypes
+ResultsGallery.defaultProps = defaultProps
+
+export default ResultsGallery

src/components/catalog/ResultsGalleryItem.jsx

@@ -1,52 +1,54 @@
 import React from 'react'
 import Link from 'react-router/lib/Link'
 
-const T = React.PropTypes
-
-const ResultsGalleryItem = React.createClass({
-	propTypes: {
-		item: T.object,
-		position: T.number,
-		width: T.string,
-	},
-
-	getInitialState: function () {
-		return {
-			isHovered: false,
-		}
-	},
-
-	render: function () {
-		const src = process.env.API_BASE_URL + this.props.item.thumbnail_path
-		const containerProps = {
-			onMouseOver: e => this.setState({isHovered: true}),
-			onMouseOut: e => this.setState({isHovered: false}),
-
-			style: {
-				backgroundColor: (this.state.isHovered ? '#dee' : 'transparent'),
-				display: 'inline-block',
-				height: '100%',
-				padding: '10px',
-				width: this.props.width || '175px',
-			},
-		}
+const propTypes = {
+	data: React.PropTypes.object,
+}
+
+const defaultProps = {
+	data: {}
+}
 
-		const imgStyle = {
-			opacity: (this.state.isHovered ? '.5' : '1'),
-			width: '100%',
+class ResultsGalleryItem extends React.PureComponent {
+	getTitle () {
+		const { title } = this.props.data
+
+		if (!title || !title.length)
+			return null
+
+		return title[0]
+	}
+
+	renderThumbnail () {
+		const { thumbnail_path } = this.props.data
+
+		if (!thumbnail_path)
+			return null
+
+		const src = `${process.env.API_BASE_URL}${thumbnail_path}`
+		const props = {
+			className: 'search-results-gallery--thumbnail',
+			src,
 		}
+		return <img {...props} />
+	}
 
+	render () {
+		const src = process.env.API_BASE_URL + this.props.data.thumbnail_path
 		return (
-			<Link to={`/works/${this.props.item.id}`} style={{display: 'inline-block'}}>
-				<figure {...containerProps}>
-					<img src={src} style={imgStyle} />
-					<figcaption>
-						{this.props.item.title[0]}
+			<figure className="search-results-gallery--item">
+				<Link to={`/works/${this.props.data.id}`}>
+					{this.renderThumbnail()}
+					<figcaption className="search-results-gallery--caption">
+						{this.getTitle()}
 					</figcaption>
-				</figure>
-			</Link>
+				</Link>
+			</figure>
 		)
 	}
-})
+}
+
+ResultsGalleryItem.propTypes = propTypes
+ResultsGalleryItem.defaultProps = defaultProps
 
 export default ResultsGalleryItem