From 70a4e60a4bc7569cf7123e015e8195040d188f0d Mon Sep 17 00:00:00 2001 From: spyrocash Date: Fri, 9 Jun 2017 17:47:19 +0700 Subject: [PATCH] add filter entry --- webui/src/api/cic/entries.js | 17 +++- webui/src/containers/Space/Entry/actions.js | 16 +++- webui/src/containers/Space/Entry/list.js | 89 ++++++++++++++++++++- webui/src/reducers/domain/entryList.js | 23 ++++++ webui/src/reducers/index.js | 4 + webui/src/selectors/index.js | 6 ++ 6 files changed, 148 insertions(+), 7 deletions(-) create mode 100644 webui/src/reducers/domain/entryList.js diff --git a/webui/src/api/cic/entries.js b/webui/src/api/cic/entries.js index 6f2260d..6be773f 100644 --- a/webui/src/api/cic/entries.js +++ b/webui/src/api/cic/entries.js @@ -1,8 +1,21 @@ import _ from 'lodash'; import { BASE_URL, fetchWithResponse } from './helper'; -export const fetchEntryInSpace = (spaceId) => { - return fetchWithResponse(`${BASE_URL}/spaces/${spaceId}/entries/`, { +/* +param = { + content_type: String, + status: String, + query: value +} +*/ + +const convertToURLParam = (paramObj) => { + if (_.isEmpty(paramObj)) return ''; + return `?${_.join(_.map(paramObj, (value, key) => `${key}=${encodeURI(value)}`), '&')}`; +}; + +export const fetchEntryInSpace = (spaceId, params = {}) => { + return fetchWithResponse(`${BASE_URL}/spaces/${spaceId}/entries/${convertToURLParam(params)}`, { method: 'GET', }) .then((response) => { diff --git a/webui/src/containers/Space/Entry/actions.js b/webui/src/containers/Space/Entry/actions.js index 71f7b34..dd09eec 100644 --- a/webui/src/containers/Space/Entry/actions.js +++ b/webui/src/containers/Space/Entry/actions.js @@ -6,7 +6,6 @@ export const getEntryInSpace = (spaceId) => { return (dispatch) => { return fetchEntryInSpace(spaceId) .then((res) => { - const entries = res.items; _.forEach(entries, entry => { dispatch({ @@ -62,3 +61,18 @@ export const deleteEntry = (spaceId, entryId) => { }) }; }; + + +export const filterEntry = (spaceId, params = '') => { + return (dispatch) => { + return fetchEntryInSpace(spaceId, params) + .then((res) => { + const entries = res.items; + dispatch({ + type: 'ENTRYLIST/UPDATE/VISIBLELIST', + list: _.map(entries, entry => entry._id), + }); + return res; + }); + } +}; \ No newline at end of file diff --git a/webui/src/containers/Space/Entry/list.js b/webui/src/containers/Space/Entry/list.js index e780d2c..10063d0 100644 --- a/webui/src/containers/Space/Entry/list.js +++ b/webui/src/containers/Space/Entry/list.js @@ -8,8 +8,12 @@ import { bindActionCreators } from 'redux'; import * as Actions from './actions'; import _ from 'lodash'; -import { Button, Table, Icon, Col, Row, Menu, Dropdown, message, Popconfirm, Tag } from 'antd'; -import { getActiveSpace, getSpaceEntries } from '../../../selectors'; +import { Button, Table, Icon, Col, Row, Menu, Dropdown, message, Popconfirm, Tag, Select, Switch, Input } from 'antd'; + +const Option = Select.Option; +const Search = Input.Search; + +import { getActiveSpace, getEntryVisibleList } from '../../../selectors'; const API_PATH = process.env.REACT_APP_API_PATH; @@ -23,11 +27,16 @@ class EntryList extends Component { space: PropTypes.object, } + state = { + filter: {}, + } + componentDidMount = () => { if (!this.props.entry) { const { space } = this.props; - const { getEntryInSpace } = this.props.actions; + const { getEntryInSpace, filterEntry } = this.props.actions; getEntryInSpace(space._id); + filterEntry(space._id); } } @@ -52,8 +61,43 @@ class EntryList extends Component { console.log(e); } + handleFilterContentTypes = (value) => { + const filter = this.state.filter; + filter.content_type = value; + this.setState({filter: filter}); + } + + handleFilterStatus = (value) => { + const filter = this.state.filter; + filter.status = value; + this.setState({filter: filter}); + } + + handleFilterInput = (e) => { + const input = e.target.value; + const filter = this.state.filter; + filter.input = input; + this.setState({filter: filter}); + } + + handleFilter = (e) => { + if ( this.state.filter.content_type === 'all' ) { + delete this.state.filter.content_type; + } + if ( this.state.filter.status === 'all' ) { + delete this.state.filter.status; + } + if ( this.state.filter.input == '' ) { + delete this.state.filter.input; + } + const { space } = this.props; + const { filterEntry } = this.props.actions; + filterEntry(space._id, this.state.filter); + } + render() { const { space, entries } = this.props; + if (!space) return (
); const { contentTypes } = space; @@ -145,8 +189,44 @@ class EntryList extends Component { ); + const contentTypesList = contentTypes.map(value => ); + return (
+ + +
+ + + Content Type + + + + Status + + + + Search + + + + + + +
+ +
@@ -177,7 +257,7 @@ class EntryList extends Component { const mapStateToProps = (state, ownProps) => { return { space: getActiveSpace(state, ownProps), - entries: getSpaceEntries(state, ownProps), + entries: getEntryVisibleList(state, ownProps), } } @@ -185,6 +265,7 @@ const actions = { getEntryInSpace: Actions.getEntryInSpace, createEmptyEntry: Actions.createEmptyEntry, deleteEntry: Actions.deleteEntry, + filterEntry: Actions.filterEntry, } const mapDispatchToProps = (dispatch) => { diff --git a/webui/src/reducers/domain/entryList.js b/webui/src/reducers/domain/entryList.js new file mode 100644 index 0000000..5f88c79 --- /dev/null +++ b/webui/src/reducers/domain/entryList.js @@ -0,0 +1,23 @@ +import _ from 'lodash'; + +const initialState = { + queryParam: { // For Display only + contentType: 'All', + status: 'All', + search: '', + }, + visibleList: [], // id ของ entry ที่กำลังแสดงผล +} + +const reducer = (state = initialState, action) => { + switch (action.type) { + + case 'ENTRYLIST/UPDATE/VISIBLELIST': { + return { ...state, visibleList: action.list }; + } + + default: return state; + } +} + +export default reducer; \ No newline at end of file diff --git a/webui/src/reducers/index.js b/webui/src/reducers/index.js index 0563a4d..965f9d1 100644 --- a/webui/src/reducers/index.js +++ b/webui/src/reducers/index.js @@ -3,9 +3,13 @@ import masterapp from './masterapp'; import entities from './entities'; import session from './session'; +import entryList from './domain/entryList'; export default combineReducers({ masterapp, entities, session, + domain: combineReducers({ + entryList, + }), }); diff --git a/webui/src/selectors/index.js b/webui/src/selectors/index.js index 2f5c551..2291074 100644 --- a/webui/src/selectors/index.js +++ b/webui/src/selectors/index.js @@ -81,3 +81,9 @@ export const getSpaceAssets = (state, ownProps) => { const space = getActiveSpace(state, ownProps); return _.filter(_.get(state, 'entities.assets.entities', []), asset => asset._spaceId === space._id); } + +export const getEntryVisibleList = (state, ownProps) => { + const visibleList = _.get(state, 'domain.entryList.visibleList'); + const space = getActiveSpace(state, ownProps); + return _.filter(_.get(state, 'entities.entries.entities'), (entry, key) => entry._spaceId === space._id && visibleList.indexOf(key) != -1); +} \ No newline at end of file