From fa3ad2382bd13a76b38e1567d82636d349708371 Mon Sep 17 00:00:00 2001 From: Clemens Date: Tue, 7 Jun 2016 11:02:46 +0200 Subject: sorting done, ready to review --- web/src/js/components/flowtable.js | 30 ++---------------------------- web/src/js/ducks/flows.js | 26 ++++++++++++++++++++++---- web/src/js/ducks/utils/view.js | 4 ++-- 3 files changed, 26 insertions(+), 34 deletions(-) (limited to 'web/src') diff --git a/web/src/js/components/flowtable.js b/web/src/js/components/flowtable.js index 23469827..5a0793ba 100644 --- a/web/src/js/components/flowtable.js +++ b/web/src/js/components/flowtable.js @@ -2,7 +2,6 @@ import React from "react"; import ReactDOM from "react-dom"; import {connect} from 'react-redux' import classNames from "classnames"; -import {reverseString} from "../utils.js"; import _ from "lodash"; import shallowEqual from "shallowequal"; import AutoScroll from "./helpers/AutoScroll"; @@ -48,30 +47,6 @@ const FlowRowContainer = connect( )(FlowRow) 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"; @@ -99,7 +74,7 @@ const FlowTableHeadContainer = connect( sort: state.flows.sort }), dispatch => ({ - loc: (sort) => dispatch(setSort(sort)), + setSort: (sort) => dispatch(setSort(sort)), }) )(FlowTableHead) @@ -219,8 +194,7 @@ const parseFilter = _.memoize(Filt.parse) const FlowTableContainer = connect( state => ({ - // first idea to sort here, but i think thats not good enough ( and not working yet)... - flows: state.flows.view.sort((a,b) => state.flows.sort.sortColumn ? a.response.status_code > b.response.status_code : 0), + flows: state.flows.view }) )(FlowTable) diff --git a/web/src/js/ducks/flows.js b/web/src/js/ducks/flows.js index bde53179..c4444a9f 100644 --- a/web/src/js/ducks/flows.js +++ b/web/src/js/ducks/flows.js @@ -1,6 +1,8 @@ import makeList from "./utils/list" import Filt from "../filt/filt" -import {updateViewFilter, updateViewList} from "./utils/view" +import {updateViewFilterSort, updateViewList} from "./utils/view" +import {reverseString} from "../utils.js"; +import flowtable_columns from "../components/flowtable-columns.js"; export const UPDATE_FLOWS = "UPDATE_FLOWS" export const SET_FILTER = "SET_FLOW_FILTER" @@ -28,6 +30,21 @@ function makeFilterFn(filter) { return filter ? Filt.parse(filter) : () => true; } + +function makeSortFn(sort){ + let column = _.find(flowtable_columns, c => c.name == sort.sortColumn); + if (!column) return; + + let sortKeyFun = column.sortKeyFun; + if (sort.sortDesc) { + sortKeyFun = function () { + const k = column.sortKeyFun.apply(this, arguments); + return _.isString(k) ? reverseString("" + k) : -k; + }; + } + return sortKeyFun; +} + export default function reducer(state = defaultState, action) { switch (action.type) { case UPDATE_FLOWS: @@ -35,13 +52,13 @@ export default function reducer(state = defaultState, action) { return { ...state, all, - view: updateViewList(state.view, state.all, all, action, makeFilterFn(action.filter)) + view: updateViewList(state.view, state.all, all, action, makeFilterFn(action.filter), makeSortFn(state.sort)) } case SET_FILTER: return { ...state, filter: action.filter, - view: updateViewFilter(state.all, makeFilterFn(action.filter)) + view: updateViewFilterSort(state.all, makeFilterFn(action.filter), makeSortFn(state.sort)) } case SET_HIGHLIGHT: return { @@ -51,7 +68,8 @@ export default function reducer(state = defaultState, action) { case SET_SORT: return { ...state, - sort: action.sort + sort: action.sort, + view: updateViewFilterSort(state.all, makeFilterFn(state.filter), makeSortFn(action.sort)) } case SELECT_FLOW: return { diff --git a/web/src/js/ducks/utils/view.js b/web/src/js/ducks/utils/view.js index fa23efcd..712c4d99 100644 --- a/web/src/js/ducks/utils/view.js +++ b/web/src/js/ducks/utils/view.js @@ -75,7 +75,7 @@ export function updateViewList(currentView, currentList, nextList, action, filte case REQUEST_LIST: return currentView case RECEIVE_LIST: - return updateViewFilter(nextList, filterFn, sortFn) + return updateViewFilterSort(nextList, filterFn, sortFn) case ADD: if (filterFn(action.item)) { return sortedInsert(currentView, sortFn, action.item) @@ -113,7 +113,7 @@ export function updateViewList(currentView, currentList, nextList, action, filte } } -export function updateViewFilter(list, filterFn = defaultFilterFn, sortFn = defaultSortFn) { +export function updateViewFilterSort(list, filterFn = defaultFilterFn, sortFn = defaultSortFn) { let filtered = list.list.filter(filterFn) if (sortFn){ filtered.sort(makeCompareFn(sortFn)) -- cgit v1.2.3