Skip to content
This repository has been archived by the owner on Aug 27, 2018. It is now read-only.

Commit

Permalink
Merge pull request #84 from get-focus/feature-pagination
Browse files Browse the repository at this point in the history 
[Pagination] add pagination and ungroup
  • Loading branch information
@TomGallon
TomGallon authored Jan 5, 2017
2 parents 9cfa105 + 13f1663 commit ddb6dcf
Show file tree
Hide file tree
Showing 6 changed files with 91 additions and 77 deletions.
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "focus-search",
"version": "3.0.1-beta1",
"version": "3.0.1-beta6",
"description": "Serach FOCUS",
"main": "src/index.js",
"scripts": {
Expand Down
57 changes: 28 additions & 29 deletions src/behaviours/__tests__/paginate-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,35 +4,34 @@ import { mount, shallow, render } from 'enzyme';
import connectPaginate from '../paginate';

describe('The Pagninate connector ', () => {
describe('The connector with a list which uses the selected props', ()=>{
const propsSpy = sinon.spy();
const List = props => {
return <ul>{props.data.map((d,i) => <li key={i}>{JSON.stringify(d)}</li>)}</ul>
}
const ConnectedPaginateList = connectPaginate()(props => <List data={[1,2,3]} />);
const wrapper = mount(<ConnectedPaginateList onClickNext={propsSpy} />);
it('should add four differents div', () => {
expect(wrapper.find('[data-focus="pagination"]')).to.have.length(1)
expect(wrapper.find('[data-focus="pagination-indicators"]')).to.have.length(1);
expect(wrapper.find('[data-focus="pagination__actions"]')).to.have.length(1);
expect(wrapper.find('[data-focus="list-with-pagination"]')).to.have.length(1)
});
it("should call the onClickNext function on the button next 's click", () => {
expect(wrapper.find("[data-focus='pagination__actions']").find('button')).to.have.length(1);
wrapper.find("[data-focus='pagination__actions']").find('button').simulate('click');
wrapper.find("[data-focus='pagination__actions']").find('button').simulate('click');
expect(propsSpy).to.have.callCount(2);
expect(propsSpy).to.have.been.calledWith(20,0)
expect(propsSpy).to.have.been.calledWith(30,0)
});
describe('The connector with a list which uses the selected props', ()=>{
const propsSpy = sinon.spy();
const List = props => {
return <ul>{props.data.map((d,i) => <li key={i}>{JSON.stringify(d)}</li>)}</ul>
}
const ConnectedPaginateList = connectPaginate()(props => <List data={[1,2,3]} />);
const wrapper = mount(<ConnectedPaginateList onClickNext={propsSpy} />);
it('should add four differents div', () => {
expect(wrapper.find('[data-focus="pagination"]')).to.have.length(1)
expect(wrapper.find('[data-focus="pagination-indicators"]')).to.have.length(1);
expect(wrapper.find('[data-focus="pagination__actions"]')).to.have.length(1);
expect(wrapper.find('[data-focus="list-with-pagination"]')).to.have.length(1)
});
it("should call the onClickNext function on the button next's click", () => {
expect(wrapper.find("[data-focus='pagination__actions']").find('button')).to.have.length(1);
wrapper.find("[data-focus='pagination__actions']").find('button').simulate('click');
wrapper.find("[data-focus='pagination__actions']").find('button').simulate('click');
expect(propsSpy).to.have.callCount(2);
expect(propsSpy).to.have.been.calledWith(20, 0)
expect(propsSpy).to.have.been.calledWith(30, 0)
});

it("should call the otherAction function on the button other action 's click and props isOtherAction", () => {
const otherAction=sinon.spy()
const wrapperOther = mount(<ConnectedPaginateList onClickNext={()=>{}} otherAction={otherAction} isOtherAction={true} />);
expect(wrapperOther.find("[data-focus='pagination__actions']").find('button')).to.have.length(1);
wrapperOther.find("[data-focus='pagination__actions']").find('button').simulate('click');
expect(otherAction).to.have.callCount(1);
it("should call the otherAction function on the button other action 's click", () => {
const otherAction=sinon.spy()
const wrapperOther = mount(<ConnectedPaginateList onClickNext={()=>{}} otherAction={otherAction} />);
expect(wrapperOther.find("[data-focus='pagination__actions']").find('button')).to.have.length(1);
wrapperOther.find("[data-focus='pagination__actions']").find('button').simulate('click');
expect(otherAction).to.have.callCount(1);
});
});
});

});
50 changes: 26 additions & 24 deletions src/behaviours/paginate.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import React, {PropTypes, PureComponent} from 'react';
import {slice, set} from 'lodash';
import Button from 'focus-components/button';
import i18next from 'i18next';

export default () => {
return (ComponentToConnect) => {
Expand All @@ -14,53 +15,54 @@ export default () => {
this._otherAction = this._otherAction.bind(this);
}
_onClickNext() {
const { onClickNext, top, skip, page} = this.props;
const { onClickNext, top, skip, page } = this.props;
const newTop = this.state.top + page;
this.setState({
top: newTop
});
onClickNext(newTop, skip);
}
_otherAction(){
const {otherAction} = this.props;
window.scrollTo(0,0);
otherAction({...this.props, ...this.state})
const {otherAction} = this.props;
if(!otherAction) {
console.log('please define a other function for the other action.');
return;
}
window.scrollTo(0,0);
otherAction({...this.props, ...this.state})
}
render() {
const {top} = this.state;
const {totalCount, isOtherAction} = this.props;
const {totalCount, otherAction, data} = this.props;
const isOtherAction = otherAction !== undefined;
const paginateCount = (data && data.length < top) ? data.length : top;
return (
<div data-focus='list-with-pagination'>
<ComponentToConnect {...this.props} />
<div data-focus='pagination'>
<div data-focus='pagination-indicators'>{top} / {totalCount}</div>
<div data-focus='pagination__actions'>
{!isOtherAction && <Button data-focus='paginate.show.next' label='focus.application.paginate.show.next' onClick={this._onClickNext} />}
{isOtherAction && <Button data-focus='paginate.other.action' label='focus.application.paginate.other.action' onClick={this._otherAction} />}
</div>
<div data-focus='pagination-indicators'>{i18next.t(`focus.search.paginate.totalCount`, {count: paginateCount})}</div>
<div data-focus='pagination__actions'>
{!isOtherAction && <Button data-focus='paginate.show.next' label='focus.search.paginate.show.next' onClick={this._onClickNext} />}
{isOtherAction && <Button data-focus='paginate.other.action' label='focus.search.paginate.other.action' onClick={this._otherAction} />}
</div>
</div>
<Button className='tsonga' label='bonjour' />
</div>
);
}
}
PaginationConnector.displayName = 'PaginationConnector';
PaginationConnector.defaultProps = {
page : 10,
skip : 0,
top : 10,
otherAction : (params) => console.log("please define a other function for the 'other action'. The passed params are " + JSON.stringify(params)),
onClickNext : (params) => console.log('please define a function. The passed params are ' + JSON.stringify(params)),
isOtherAction : false

onClickNext: (params) => console.log('please define a function. The passed params are ' + JSON.stringify(params)),
page: 10,
skip: 0,
top: 10
}
PaginationConnector.propTypes = {
page: PropTypes.number,
skip: PropTypes.nnumber,
top: PropTypes.number,
isOtherAction: PropTypes.bool,
otherAction: PropTypes.func,
onClickNext: PropTypes.func.isRequired
onClickNext: PropTypes.func,
otherAction: PropTypes.func,
page: PropTypes.number,
skip: PropTypes.nnumber,
top: PropTypes.number
}
return PaginationConnector;
}
Expand Down
37 changes: 19 additions & 18 deletions src/behaviours/search.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,8 @@ import {map} from 'lodash/map';
import isArray from 'lodash/isArray';
import isUndefined from 'lodash/isUndefined';
import {loadLine} from '../actions/single-action-creator';
import {get, set} from 'lodash';
import {get, set, omit, keys} from 'lodash';



const SEARCH_CONTEXT_TYPE = {
Expand Down Expand Up @@ -48,10 +49,11 @@ export function getResultsForGroup(groups, searchMetadata){
});
};

export function getResultsForList(list = [], searchMetadata, listType) {
export function getResultsForList(list = [], searchMetadata, listType, selectedFacet) {
const metadatas = extractMedatadas(searchMetadata.getListMetadata(listType, list));
return {
...metadatas,
groupList: metadatas.groupList && metadatas.groupList.reduce((acc, element) => { if(keys(selectedFacet).indexOf(element) === -1) {acc.push(element); } return acc }, [] ),
data: list,
listType
};
Expand All @@ -69,16 +71,16 @@ export function connect(searchOptions) {
this.unitSearchDispatch = {
nextPage: (top, skip) => dispatch(nextPage(top, skip)),
startAction: element => {
dispatch(initPage())
dispatch(startSearch())
dispatch(initPage())
dispatch(startSearch())
},
sortAction: element => {
dispatch(initPage())
dispatch(updateSort(element))
dispatch(initPage())
dispatch(updateSort(element))
},
groupAction: (element, replace) => {
dispatch(initPage())
dispatch(updateGroup(element, replace))
dispatch(initPage())
dispatch(updateGroup(element, replace))
},
facetAction: function facet(element, replace) {
if(element.code === 'FCT_SCOPE') {
Expand All @@ -94,8 +96,8 @@ export function connect(searchOptions) {
return dispatch(updateSelectedFacets(element, replace, true));
},
queryAction: element => {
dispatch(updateQuery(element))
dispatch(initPage())
dispatch(updateQuery(element))
dispatch(initPage())
},
scopeAction: (element, replace) => {
dispatch(initPage())
Expand All @@ -116,20 +118,19 @@ export function connect(searchOptions) {
const scope = hasDefinedScopes ? criteriaScope || 'all' : undefined;
const hasScope = hasDefinedScopes ? !isUndefined(get(criteria, 'query.scope')) : false;
const groupSelect = get(criteria, 'group');
const selectedFacet = get(criteria, 'selectedFacets')
const term = get(criteria, 'query.term');
const results = hasGroups ? getResultsForGroup(data, searchMetadata) : getResultsForList(data, searchMetadata, listType);
const results = hasGroups ? getResultsForGroup(data, searchMetadata) : getResultsForList(data, searchMetadata, listType, selectedFacet);
const facetInformations = facetListWithselectedInformation(this.props);

set(results, 'totalCount', totalCount);
set(results, 'groupSelect', groupSelect);

const paginateProps = {
onClickNext: this.unitSearchDispatch.nextPage,
page: criteria.page,
skip: criteria.skip,
top: criteria.top,
isOtherAction: hasGroups,
otherAction:({groupSelected = {name:'FCT_SCOPE'}, valuesForResult: {code}}) => this.unitSearchDispatch.facetAction({code: groupSelected.name, values: code})
onClickNext: this.unitSearchDispatch.nextPage,
page: criteria.page,
skip: criteria.skip,
top: criteria.top,
otherAction: hasGroups ? ({groupSelected = {name:'FCT_SCOPE'}, valuesForResult: {code}}) => this.unitSearchDispatch.facetAction({code: groupSelected.name, values: code}) : undefined
};


Expand Down
6 changes: 4 additions & 2 deletions src/components/searchbar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,9 +29,11 @@ export class SearchBarInput extends PureComponent {
if(onChange) onChange({term: value});
}
render() {
console.log(this.props.placeholder)
return (
<InputText
data-focus='search-bar-input'
placeholder={this.props.placeholder}
name='search-bar-input'
onChange={this._debouncedOnSearchBarInputChange}
ref='searchBarInputText' />
Expand Down Expand Up @@ -95,7 +97,7 @@ SearchBarScopeSelection.defaultProps = {

export default class SearchBar extends PureComponent {
render() {
const {hasFocus, onChange, queryAction, queryActionWait, scope, scopeAction, scopes, term} = this.props;
const {hasFocus, onChange, queryAction, queryActionWait, scope, scopeAction, scopes, term, placeholder} = this.props;
const hasScopes = scopes && scopes.length > 0;
return (
<div data-focus='search-bar'>
Expand All @@ -106,7 +108,7 @@ export default class SearchBar extends PureComponent {
scopes={scopes}
scope={scope} />
}
<SearchBarInput hasFocus={hasFocus} onChange={onChange} queryAction={queryAction} queryActionWait={queryActionWait} term={term} />
<SearchBarInput hasFocus={hasFocus} placeholder={placeholder} onChange={onChange} queryAction={queryAction} queryActionWait={queryActionWait} term={term} />
</div>
);
}
Expand Down
16 changes: 13 additions & 3 deletions src/translation/fr-FR.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,23 +2,33 @@
export default {
focus: {
search: {
ungroup: 'Dégrouper',
group: 'Grouper',
sort: 'Trier',
facets: {
title: 'Filtres',
show: {
less: 'Afficher moins',
more: 'Afficher tout'
}
},
paginate: {
other: {
action: 'Autre action'
},
show: {
next: 'Afficher plus'
},
totalCount: '{{count}} élément affiché',
totalCount_plural: '{{count}} éléments affichés'
},
sort: 'Trier',
selected: 'aucun élément sélectionné',
selected_plural: '{{count}} éléments sélectionnés',
results: {
number: '{{count}} résultat',
number_plural: '{{count}} résultats',
for: 'pour'
}
},
ungroup: 'Dégrouper'
}
}
}

0 comments on commit ddb6dcf

Please sign in to comment.