From bbd59b55ff6fd2e76da026b8503abcaaa3ebbbb4 Mon Sep 17 00:00:00 2001
From: esikkala <esko.ikkala@aalto.fi>
Date: Wed, 12 Dec 2018 18:12:32 +0200
Subject: [PATCH] Building new layout
---
src/client/components/FacetBar.js | 61 ++++++++++++
src/client/components/Manuscripts.js | 1 -
src/client/components/ResultTable.js | 1 -
src/client/components/ResultTableHead.js | 7 +-
src/client/components/Tree.js | 112 ++++++++++++-----------
src/client/containers/MapApp.js | 65 +++++++------
6 files changed, 157 insertions(+), 90 deletions(-)
create mode 100644 src/client/components/FacetBar.js
diff --git a/src/client/components/FacetBar.js b/src/client/components/FacetBar.js
new file mode 100644
index 00000000..ee228490
--- /dev/null
+++ b/src/client/components/FacetBar.js
@@ -0,0 +1,61 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import Tree from './Tree';
+// import EnhancedTable from './EnhancedTable';
+import CircularProgress from '@material-ui/core/CircularProgress';
+import purple from '@material-ui/core/colors/purple';
+import Paper from '@material-ui/core/Paper';
+//import Typography from '@material-ui/core/Typography';
+// import CheckboxesGroup from './CheckboxesGroup';
+
+const styles = theme => ({
+ root: {
+ width: '100%',
+ height: '100%'
+ },
+ facetContainer: {
+ height: 350,
+ borderBottom: '4px solid' + theme.palette.primary.main,
+ }
+});
+
+class FacetBar extends React.Component {
+
+ componentDidMount = () => {
+ this.props.fetchFacet();
+ }
+
+ // componentDidUpdate = prevProps => {
+ // if (prevProps.facet.facetFilters != this.props.facet.facetFilters) {
+ // this.props.fetchFacet();
+ // }
+ // }
+
+ render() {
+ const { classes, facet } = this.props;
+
+ return (
+ <div className={classes.root}>
+ {this.props.facet.fetchingFacet ?
+ <CircularProgress style={{ color: purple[500] }} thickness={5} /> :
+ <Paper className={classes.facetContainer}>
+ <Tree
+ data={facet.facetValues.productionPlace}
+ updateFilter={this.props.updateFilter}
+ />
+ </Paper>
+ }
+ </div>
+ );
+ }
+}
+
+FacetBar.propTypes = {
+ classes: PropTypes.object.isRequired,
+ fetchFacet: PropTypes.func.isRequired,
+ facet: PropTypes.object.isRequired,
+ updateFilter: PropTypes.func.isRequired,
+};
+
+export default withStyles(styles)(FacetBar);
diff --git a/src/client/components/Manuscripts.js b/src/client/components/Manuscripts.js
index 8135ffc8..8a916df6 100644
--- a/src/client/components/Manuscripts.js
+++ b/src/client/components/Manuscripts.js
@@ -73,7 +73,6 @@ Manuscripts.propTypes = {
fetchPlaces: PropTypes.func.isRequired,
fetchPlace: PropTypes.func.isRequired,
updatePage: PropTypes.func.isRequired,
- openFacetDialog: PropTypes.func.isRequired,
routeProps: PropTypes.object.isRequired
};
diff --git a/src/client/components/ResultTable.js b/src/client/components/ResultTable.js
index 10b02971..49b9e5a8 100644
--- a/src/client/components/ResultTable.js
+++ b/src/client/components/ResultTable.js
@@ -309,7 +309,6 @@ ResultTable.propTypes = {
resultCount: PropTypes.number.isRequired,
page: PropTypes.number.isRequired,
updatePage: PropTypes.func.isRequired,
- openFacetDialog: PropTypes.func.isRequired,
routeProps: PropTypes.object.isRequired
};
diff --git a/src/client/components/ResultTableHead.js b/src/client/components/ResultTableHead.js
index 950fc0e3..fd3f97a0 100644
--- a/src/client/components/ResultTableHead.js
+++ b/src/client/components/ResultTableHead.js
@@ -99,9 +99,9 @@ class ResultTableHead extends React.Component {
this.setState({ order, orderBy });
};
- handleFacetButtonOnClick = property => () => {
- this.props.openFacetDialog(property);
- }
+ // handleFacetButtonOnClick = property => () => {
+ // this.props.openFacetDialog(property);
+ // }
// <TableSortLabel
// active={orderBy === column.property}
@@ -162,7 +162,6 @@ ResultTableHead.propTypes = {
updatePage: PropTypes.func.isRequired,
fetchManuscripts: PropTypes.func.isRequired,
routeProps: PropTypes.object.isRequired,
- openFacetDialog: PropTypes.func.isRequired
};
export default withStyles(styles)(ResultTableHead);
diff --git a/src/client/components/Tree.js b/src/client/components/Tree.js
index da41a0cf..af435035 100644
--- a/src/client/components/Tree.js
+++ b/src/client/components/Tree.js
@@ -10,14 +10,13 @@ import FormControlLabel from '@material-ui/core/FormControlLabel';
const styles = () => ({
root: {
height: '100%',
- width: 600
},
searchForm: {
display: 'inline-block',
height: 50,
},
treeContainer: {
- height: 'calc(100% - 50px)',
+ height: '100%',
},
treeNode: {
fontFamily: 'Roboto',
@@ -70,64 +69,67 @@ class Tree extends Component {
searchQuery &&
node.title.toLowerCase().indexOf(searchQuery.toLowerCase()) > -1;
- const selectPrevMatch = () =>
- this.setState({
- searchFocusIndex:
- searchFocusIndex !== null
- ? (searchFoundCount + searchFocusIndex - 1) % searchFoundCount
- : searchFoundCount - 1,
- });
+ // const selectPrevMatch = () =>
+ // this.setState({
+ // searchFocusIndex:
+ // searchFocusIndex !== null
+ // ? (searchFoundCount + searchFocusIndex - 1) % searchFoundCount
+ // : searchFoundCount - 1,
+ // });
+ //
+ // const selectNextMatch = () =>
+ // this.setState({
+ // searchFocusIndex:
+ // searchFocusIndex !== null
+ // ? (searchFocusIndex + 1) % searchFoundCount
+ // : 0,
+ // });
+
+ // <form
+ // className={classes.searchForm}
+ // onSubmit={event => {
+ // event.preventDefault();
+ // }}
+ // >
+ // <input
+ // id="find-box"
+ // type="text"
+ // placeholder="Search..."
+ // style={{ fontSize: '1rem' }}
+ // value={searchString}
+ // onChange={event =>
+ // this.setState({ searchString: event.target.value })
+ // }
+ // />
+ //
+ // <button
+ // type="button"
+ // disabled={!searchFoundCount}
+ // onClick={selectPrevMatch}
+ // >
+ // <
+ // </button>
+ //
+ // <button
+ // type="submit"
+ // disabled={!searchFoundCount}
+ // onClick={selectNextMatch}
+ // >
+ // >
+ // </button>
+ //
+ // <span>
+ //
+ // {searchFoundCount > 0 ? searchFocusIndex + 1 : 0}
+ // /
+ // {searchFoundCount || 0}
+ // </span>
+ // </form>
- const selectNextMatch = () =>
- this.setState({
- searchFocusIndex:
- searchFocusIndex !== null
- ? (searchFocusIndex + 1) % searchFoundCount
- : 0,
- });
return (
<div className={classes.root}>
- <form
- className={classes.searchForm}
- onSubmit={event => {
- event.preventDefault();
- }}
- >
- <input
- id="find-box"
- type="text"
- placeholder="Search..."
- style={{ fontSize: '1rem' }}
- value={searchString}
- onChange={event =>
- this.setState({ searchString: event.target.value })
- }
- />
-
- <button
- type="button"
- disabled={!searchFoundCount}
- onClick={selectPrevMatch}
- >
- <
- </button>
-
- <button
- type="submit"
- disabled={!searchFoundCount}
- onClick={selectNextMatch}
- >
- >
- </button>
- <span>
-
- {searchFoundCount > 0 ? searchFocusIndex + 1 : 0}
- /
- {searchFoundCount || 0}
- </span>
- </form>
<div className={classes.treeContainer}>
<SortableTree
treeData={this.state.treeData}
diff --git a/src/client/containers/MapApp.js b/src/client/containers/MapApp.js
index d6722f4e..b2d4f671 100644
--- a/src/client/containers/MapApp.js
+++ b/src/client/containers/MapApp.js
@@ -10,9 +10,9 @@ import Footer from '../components/Footer';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import Manuscripts from '../components/Manuscripts';
import Main from '../components/Main';
-import FacetDialog from '../components/FacetDialog';
+import FacetBar from '../components/FacetBar';
import Grid from '@material-ui/core/Grid';
-import Paper from '@material-ui/core/Paper';
+
import {
fetchManuscripts,
@@ -51,6 +51,13 @@ const styles = theme => ({
marginTop: 56,
height: 'calc(100% - 122px)',
},
+ backgroundColor: '#E0E0E0',
+ // paddingLeft: 8,
+ // paddingRight: 8,
+ // paddingTop: 4
+ },
+ gridItem: {
+ borderRight: '4px solid' + theme.palette.primary.main,
}
});
@@ -65,37 +72,37 @@ let MapApp = (props) => {
<Router>
<React.Fragment>
<TopBar />
- <Grid container spacing={8} className={classes.mainContainer}>
+ <Grid container className={classes.mainContainer}>
<Route exact path="/" component={Main} />
- <Grid item xs={12} sm={4}>
- <Paper></Paper>
- </Grid>
- <Grid item xs={12} sm={8}>
- <Route
- path="/manuscripts"
- render={routeProps =>
- <Manuscripts
- search={props.search}
- facetFilters={props.facet.facetFilters}
- fetchManuscripts={props.fetchManuscripts}
- fetchPlaces={props.fetchPlaces}
- fetchPlace={props.fetchPlace}
- updatePage={props.updatePage}
- openFacetDialog={props.openFacetDialog}
- routeProps={routeProps}
- />}
- />
- </Grid>
+ <Route
+ path="/manuscripts"
+ render={routeProps =>
+ <React.Fragment>
+ <Grid item sm={12} md={4} className={classes.gridItem} >
+ <FacetBar
+ facet={props.facet}
+ fetchFacet={props.fetchFacet}
+ updateFilter={props.updateFilter}
+ updatePage={props.updatePage}
+ />
+ </Grid>
+ <Grid item sm={12} md={8}>
+ <Manuscripts
+ search={props.search}
+ facetFilters={props.facet.facetFilters}
+ fetchManuscripts={props.fetchManuscripts}
+ fetchPlaces={props.fetchPlaces}
+ fetchPlace={props.fetchPlace}
+ updatePage={props.updatePage}
+ routeProps={routeProps}
+ />
+ </Grid>
+ </React.Fragment>
+ }
+ />
</Grid>
</React.Fragment>
</Router>
- <FacetDialog
- facet={props.facet}
- fetchFacet={props.fetchFacet}
- updateFilter={props.updateFilter}
- updatePage={props.updatePage}
- closeFacetDialog={props.closeFacetDialog}
- />
<Footer />
</div>
</div>
--
GitLab