forviz · spyrocash · Jun 9, 2017
diff --git 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
@@ -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;
+    });
+  }
+};
diff --git 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 (<div />);
 
     const { contentTypes } = space;
@@ -145,8 +189,44 @@ class EntryList extends Component {
       </Menu>
     );
 
+    const contentTypesList = contentTypes.map(value => <Option value={value._id}>{value.name}</Option>);
+
     return (
       <div>
+        <Row>
+          <Col span={24}>
+            <div style={{ marginBottom: 20, background: '#f7f7f7', padding: 20, }}>
+              <Row gutter={8}>
+                <Col span={6}>
+                  <span>Content Type </span>
+                  <Select defaultValue="all" style={{ width: 120 }} >
+                    <Option value="all">All</Option>
+                    {contentTypesList}
+                  </Select>
+                </Col>
+                <Col span={6}>
+                  <span>Status </span>
+                  <Select defaultValue="all" style={{ width: 120 }} >
+                    <Option value="all">All</Option>
+                    <Option value="draft">Draft</Option>
+                    <Option value="publish">Publish</Option>
+                  </Select>
+                </Col>
+                <Col span={6}>
+                  <span>Search </span>
+                  <Search
+                    placeholder="Filter entries"
+                    style={{ width: 200 }}
+                    >
+                  />
+                </Col>
+                <Col span={6}>
+                  <Button type="primary" icon="search" >
+                </Col>
+              </Row>
+            </div>
+          </Col>
+        </Row>
         <Row>
           <Col span={12}>
             <div style={{ marginBottom: 20 }}>
@@ -177,14 +257,15 @@ class EntryList extends Component {
 const mapStateToProps = (state, ownProps) => {
   return {
     space: getActiveSpace(state, ownProps),
-    entries: getSpaceEntries(state, ownProps),
+    entries: getEntryVisibleList(state, ownProps),
   }
 }
 
 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
@@ -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;
diff --git 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
@@ -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);
+}