From ac2d8549e5cf6efaac78de8acc0c4967e63adcf9 Mon Sep 17 00:00:00 2001 From: Clemens Date: Mon, 6 Jun 2016 23:27:04 +0200 Subject: moved sort state to redux, missing apply sort --- web/src/js/components/flowtable.js | 89 +++++++++++++++++++------------------- web/src/js/components/mainview.js | 7 ++- web/src/js/ducks/flows.js | 13 ++++++ 3 files changed, 62 insertions(+), 47 deletions(-) (limited to 'web') diff --git a/web/src/js/components/flowtable.js b/web/src/js/components/flowtable.js index d621387c..642ded17 100644 --- a/web/src/js/components/flowtable.js +++ b/web/src/js/components/flowtable.js @@ -46,61 +46,59 @@ const FlowRowContainer = connect( }) )(FlowRow) -class FlowTableHead extends React.Component { +function FlowTableHead({setSort, columns, sort}) { + + //const hasSort = Column.sortKeyFun; + + // let sortDesc = this.props.sort.sortDesc; + // + // if (Column === this.props.sort.sortColumn) { + // sortDesc = !sortDesc; + // this.props.setSort(sortColumn, sortDesc); + // } else { + // this.props.setSort({sortColumn: hasSort && Column, sortDesc: false}); + // } + // + // let sortKeyFun = Column.sortKeyFun; + // if (sortDesc) { + // sortKeyFun = hasSort && function () { + // const k = Column.sortKeyFun.apply(this, arguments); + // if (_.isString(k)) { + // return reverseString("" + k); + // } + // return -k; + // }; + // } + //this.props.setSortKeyFun(sortKeyFun); + + const sortColumn = sort.sortColumn; + const sortType = sort.sortDesc ? "sort-desc" : "sort-asc"; - static propTypes = { - setSortKeyFun: React.PropTypes.func.isRequired, - columns: React.PropTypes.array.isRequired, - }; - - constructor(props, context) { - super(props, context); - this.state = {sortColumn: undefined, sortDesc: false}; - } - - onClick(Column) { - const hasSort = Column.sortKeyFun; - - let sortDesc = this.state.sortDesc; - - if (Column === this.state.sortColumn) { - sortDesc = !sortDesc; - this.setState({sortDesc}); - } else { - this.setState({sortColumn: hasSort && Column, sortDesc: false}); - } - - let sortKeyFun = Column.sortKeyFun; - if (sortDesc) { - sortKeyFun = hasSort && function () { - const k = Column.sortKeyFun.apply(this, arguments); - if (_.isString(k)) { - return reverseString("" + k); - } - return -k; - }; - } - - this.props.setSortKeyFun(sortKeyFun); - } - - render() { - const sortColumn = this.state.sortColumn; - const sortType = this.state.sortDesc ? "sort-desc" : "sort-asc"; return ( - {this.props.columns.map(Column => ( + {columns.map(Column => ( this.onClick(Column)} - className={sortColumn === Column ? sortType : undefined} + onClick={() => setSort({sortColumn: Column.name, sortDesc: Column.name != sort.sortColumn ? false : !sort.sortDesc})} + className={sortColumn === Column.name ? sortType : undefined} /> ))} ); - } } +FlowTableHead.propTypes = { + setSort: React.PropTypes.func.isRequired, + sort: React.PropTypes.object.isRequired, + columns: React.PropTypes.array.isRequired +}; + +const FlowTableHeadContainer = connect( + (state, ownProps) => ({ + sort: state.flows.sort + }) +)(FlowTableHead) + class FlowTable extends React.Component { static propTypes = { @@ -186,9 +184,10 @@ class FlowTable extends React.Component {
- diff --git a/web/src/js/components/mainview.js b/web/src/js/components/mainview.js index 22895991..99cdeb3c 100644 --- a/web/src/js/components/mainview.js +++ b/web/src/js/components/mainview.js @@ -7,7 +7,7 @@ import {Splitter} from "./common.js" import FlowTable from "./flowtable.js"; import FlowView from "./flowview/index.js"; import {connect} from 'react-redux' -import {selectFlow, setFilter, setHighlight} from "../ducks/flows"; +import {selectFlow, setFilter, setHighlight, setSort} from "../ducks/flows"; var MainView = React.createClass({ @@ -161,7 +161,8 @@ var MainView = React.createClass({
console.log("asdf")} + setSort={this.props.setSort} selected={this.props.selectedFlow} /> {details}
@@ -173,12 +174,14 @@ const MainViewContainer = connect( state => ({ flows: state.flows.view, filter: state.flows.filter, + sort: state.flows.sort, highlight: state.flows.highlight, selectedFlow: state.flows.all.byId[state.flows.selected[0]] }), dispatch => ({ selectFlow: flowId => dispatch(selectFlow(flowId)), setFilter: filter => dispatch(setFilter(filter)), + setSort: (sort) => dispatch(setSort(sort)), setHighlight: highlight => dispatch(setHighlight(highlight)) }), undefined, diff --git a/web/src/js/ducks/flows.js b/web/src/js/ducks/flows.js index fdbc42ee..bde53179 100644 --- a/web/src/js/ducks/flows.js +++ b/web/src/js/ducks/flows.js @@ -5,6 +5,7 @@ import {updateViewFilter, updateViewList} from "./utils/view" export const UPDATE_FLOWS = "UPDATE_FLOWS" export const SET_FILTER = "SET_FLOW_FILTER" export const SET_HIGHLIGHT = "SET_FLOW_HIGHLIGHT" +export const SET_SORT = "SET_FLOW_SORT" export const SELECT_FLOW = "SELECT_FLOW" const { @@ -20,6 +21,7 @@ const defaultState = { view: [], filter: undefined, highlight: undefined, + sort: {sortColumn: undefined, sortDesc: false}, } function makeFilterFn(filter) { @@ -46,6 +48,11 @@ export default function reducer(state = defaultState, action) { ...state, highlight: action.highlight } + case SET_SORT: + return { + ...state, + sort: action.sort + } case SELECT_FLOW: return { ...state, @@ -69,6 +76,12 @@ export function setHighlight(highlight) { highlight } } +export function setSort(sort){ + return { + type: SET_SORT, + sort + } +} export function selectFlow(flowId) { return { type: SELECT_FLOW, -- cgit v1.2.3