store search-result fields in localStorage + add reset option

lib/search-result-fields.js

@@ -0,0 +1,23 @@
+const FIELD_STORAGE_KEY = 'search-result-fields'
+
+function getStoredFields () {
+	try {
+		const stored = localStorage.getItem(FIELD_STORAGE_KEY)
+
+		if (!stored)
+			return []
+
+		return JSON.parse(stored)
+	} catch (e) {
+		return []
+	}
+}
+
+function setStoredFields (value) {
+	localStorage.setItem(FIELD_STORAGE_KEY, JSON.stringify(value))
+}
+
+export default {
+	get: getStoredFields,
+	set: setStoredFields,
+}

src/components/catalog/ResultsTable.jsx

@@ -1,8 +1,11 @@
 import React from 'react'
 import { TacoTable, DataType } from 'react-taco-table'
+import cn from 'classnames'
 import workFields from '../../../lib/work-fields'
 import ResultsTableFieldSelect from './ResultsTableFieldSelect.jsx'
-import cn from 'classnames'
+import searchResultFields from '../../../lib/search-result-fields'
+
+const DEFAULT_FIELDS = ['title', 'creator']
 
 const propTypes = {
 	data: React.PropTypes.array,
@@ -11,7 +14,7 @@ const propTypes = {
 
 const defaultProps = {
 	data: {},
-	fields: [],
+	fields: DEFAULT_FIELDS,
 }
 
 // create a dictionary to use for sorting the fields based on position.
@@ -28,15 +31,22 @@ class ResultsTable extends React.Component {
 	constructor (props) {
 		super(props)
 
+		let fields = searchResultFields.get()
+
+		if (fields.length === 0) {
+			fields = this.props.fields || []
+		}
+
 		this.state = {
-			fields: ['title', 'creator'],
+			fields,
 			fieldSelectOpen: false,
 		}
 
 		this.getColumns = this.getColumns.bind(this)
 		this.getFieldToggleHeader = this.getFieldToggleHeader.bind(this)
 		this.handleOnSelectField = this.handleOnSelectField.bind(this)
 		this.renderFieldSelect = this.renderFieldSelect.bind(this)
+		this.setFields = this.setFields.bind(this)
 	}
 
 	getColumns () {
@@ -131,11 +141,23 @@ class ResultsTable extends React.Component {
 			)
 		}
 
-		this.setState({fields: update})
+		this.setFields(update)
 	}
 
 	renderFieldSelect () {
+		const onClose = () => {
+			if (this.state.fieldSelectOpen) {
+				this.setState({fieldSelectOpen: false})
+			}
+		}
+
+		const onReset = () => {
+			this.setFields(DEFAULT_FIELDS)
+		}
+
 		const props = {
+			onClose,
+			onReset,
 			key: 'field-select',
 			onSelectField: this.handleOnSelectField,
 			selected: this.state.fields,
@@ -144,6 +166,11 @@ class ResultsTable extends React.Component {
 		return <ResultsTableFieldSelect {...props} />
 	}
 
+	setFields (fields) {
+		searchResultFields.set(fields)
+		this.setState({fields})
+	}
+
 	render () {
 		return (
 			<TacoTable

src/components/catalog/ResultsTableFieldSelect.jsx

@@ -20,6 +20,7 @@ class ResultsTableFieldSelect extends React.Component {
 		super(props)
 
 		this.handleFieldClick = this.handleFieldClick.bind(this)
+		this.handleReset = this.handleReset.bind(this)
 		this.maybeCloseSelect = this.maybeCloseSelect.bind(this)
 		this.renderWorkField = this.renderWorkField.bind(this)
 		this.renderWorkFields = this.renderWorkFields.bind(this)
@@ -39,6 +40,10 @@ class ResultsTableFieldSelect extends React.Component {
 		this.props.onSelectField.call(null, key, !isSelected, idx)
 	}
 
+	handleReset () {
+		this.props.onReset && this.props.onReset()
+	}
+
 	maybeCloseSelect (event) {
 		let target = event.target
 
@@ -64,8 +69,15 @@ class ResultsTableFieldSelect extends React.Component {
 	}
 
 	renderWorkFields () {
+		const header = [
+			(<div className="field field-header" key="header" onClick={this.handleReset}>
+				Restore defaults
+			</div>),
+			(<div className="field-divider" key="divider"/>),
+		]
+
 		const keys = Object.keys(workFields)
-		return keys.map(this.renderWorkField)
+		return header.concat(keys.map(this.renderWorkField))
 	}
 
 	render () {

src/scss/catalog/_results-table.scss

@@ -66,5 +66,15 @@
 				color: $selected-text;
 			}
 		}
+
+		.field-header {
+			color: #666;
+			font-size: .9em;
+			font-weight: bold;
+		}
+
+		.field-divider {
+			border-bottom: 1px solid #ccc;
+		}
 	}
 }