mirror of
https://github.com/ascribe/onion.git
synced 2024-12-22 17:33:14 +01:00
add filterBy to edition list action|store
This commit is contained in:
parent
6f1c6a0168
commit
fc0bccbff3
@ -17,21 +17,21 @@ class EditionListActions {
|
||||
);
|
||||
}
|
||||
|
||||
fetchEditionList(pieceId, page, pageSize, orderBy, orderAsc) {
|
||||
if(!orderBy && typeof orderAsc === 'undefined') {
|
||||
fetchEditionList(pieceId, page, pageSize, orderBy, orderAsc, filterBy) {
|
||||
if(!orderBy && typeof orderAsc === 'undefined' || !orderAsc) {
|
||||
orderBy = 'edition_number';
|
||||
orderAsc = true;
|
||||
}
|
||||
|
||||
// Taken from: http://stackoverflow.com/a/519157/1263876
|
||||
if(typeof page === 'undefined' && typeof pageSize === 'undefined') {
|
||||
if(typeof page === 'undefined' || !page && typeof pageSize === 'undefined' || !pageSize) {
|
||||
page = 1;
|
||||
pageSize = 10;
|
||||
}
|
||||
|
||||
return Q.Promise((resolve, reject) => {
|
||||
EditionListFetcher
|
||||
.fetch(pieceId, page, pageSize, orderBy, orderAsc)
|
||||
.fetch(pieceId, page, pageSize, orderBy, orderAsc, filterBy)
|
||||
.then((res) => {
|
||||
this.actions.updateEditionList({
|
||||
pieceId,
|
||||
@ -39,6 +39,7 @@ class EditionListActions {
|
||||
pageSize,
|
||||
orderBy,
|
||||
orderAsc,
|
||||
filterBy,
|
||||
'editionListOfPiece': res.editions,
|
||||
'count': res.count
|
||||
});
|
||||
|
@ -6,10 +6,14 @@ import classNames from 'classnames';
|
||||
import EditionListActions from '../../actions/edition_list_actions';
|
||||
import EditionListStore from '../../stores/edition_list_store';
|
||||
|
||||
import PieceListActions from '../../actions/piece_list_actions';
|
||||
import PieceListStore from '../../stores/piece_list_store';
|
||||
|
||||
import Button from 'react-bootstrap/lib/Button';
|
||||
|
||||
import CreateEditionsButton from '../ascribe_buttons/create_editions_button';
|
||||
|
||||
import { mergeOptions } from '../../utils/general_utils';
|
||||
import { getLangText } from '../../utils/lang_utils';
|
||||
|
||||
let AccordionListItemEditionWidget = React.createClass({
|
||||
@ -21,15 +25,20 @@ let AccordionListItemEditionWidget = React.createClass({
|
||||
},
|
||||
|
||||
getInitialState() {
|
||||
return EditionListStore.getState();
|
||||
return mergeOptions(
|
||||
EditionListStore.getState(),
|
||||
PieceListStore.getState()
|
||||
);
|
||||
},
|
||||
|
||||
componentDidMount() {
|
||||
EditionListStore.listen(this.onChange);
|
||||
PieceListStore.listen(this.onChange);
|
||||
},
|
||||
|
||||
componentWillUnmount() {
|
||||
EditionListStore.unlisten(this.onChange);
|
||||
PieceListStore.unlisten(this.onChange);
|
||||
},
|
||||
|
||||
onChange(state) {
|
||||
@ -47,7 +56,7 @@ let AccordionListItemEditionWidget = React.createClass({
|
||||
EditionListActions.toggleEditionList(pieceId);
|
||||
} else {
|
||||
EditionListActions.toggleEditionList(pieceId);
|
||||
EditionListActions.fetchEditionList(pieceId);
|
||||
EditionListActions.fetchEditionList(pieceId, null, null, null, null, this.state.filterBy);
|
||||
}
|
||||
},
|
||||
|
||||
|
@ -76,13 +76,9 @@ let AccordionListItemTableEditions = React.createClass({
|
||||
});
|
||||
|
||||
let editionList = this.state.editionList[this.props.parentId];
|
||||
EditionListActions.fetchEditionList(this.props.parentId, editionList.page + 1, editionList.pageSize);
|
||||
EditionListActions.fetchEditionList(this.props.parentId, editionList.page + 1, editionList.pageSize,
|
||||
editionList.orderBy, editionList.orderAsc, editionList.filterBy);
|
||||
},
|
||||
|
||||
changeEditionListOrder(orderBy, orderAsc) {
|
||||
EditionListActions.fetchEditionList(this.props.parentId, orderBy, orderAsc);
|
||||
},
|
||||
|
||||
render() {
|
||||
let selectedEditionsCount = 0;
|
||||
let allEditionsCount = 0;
|
||||
|
@ -44,7 +44,9 @@ let CreateEditionsButton = React.createClass({
|
||||
startPolling() {
|
||||
// start polling until editions are defined
|
||||
let pollingIntervalIndex = setInterval(() => {
|
||||
EditionListActions.fetchEditionList(this.props.piece.id)
|
||||
let editionsForPiece = this.state.editionList[this.props.piece.id];
|
||||
|
||||
EditionListActions.fetchEditionList(this.props.piece.id, null, null, null, null, editionsForPiece.filterBy)
|
||||
.then((res) => {
|
||||
|
||||
clearInterval(this.state.pollingIntervalIndex);
|
||||
|
@ -103,6 +103,7 @@ let PieceListToolbarFilterWidgetFilter = React.createClass({
|
||||
<span onClick={this.filterBy(param)}>
|
||||
{getLangText('I can') + ' ' + getLangText(name)}
|
||||
<input
|
||||
readOnly
|
||||
type="checkbox"
|
||||
checked={this.state.filterBy[param]} />
|
||||
</span>
|
||||
|
@ -1,113 +0,0 @@
|
||||
'use strict';
|
||||
|
||||
import React from 'react';
|
||||
|
||||
import { ColumnModel } from './models/table_models';
|
||||
|
||||
import EditionListStore from '../../stores/edition_list_store';
|
||||
import EditionListActions from '../../actions/edition_list_actions';
|
||||
|
||||
|
||||
import Table from './table';
|
||||
import TableItemWrapper from './table_item_wrapper';
|
||||
import TableItemText from './table_item_text';
|
||||
import TableItemAcl from './table_item_acl';
|
||||
import TableItemSelectable from './table_item_selectable';
|
||||
import TableItemSubtableButton from './table_item_subtable_button';
|
||||
|
||||
|
||||
let TableItemSubtable = React.createClass({
|
||||
propTypes: {
|
||||
columnList: React.PropTypes.arrayOf(React.PropTypes.instanceOf(ColumnModel)),
|
||||
columnContent: React.PropTypes.object
|
||||
},
|
||||
|
||||
getInitialState() {
|
||||
return {
|
||||
'open': false
|
||||
};
|
||||
},
|
||||
|
||||
componentDidMount() {
|
||||
EditionListStore.listen(this.onChange);
|
||||
},
|
||||
|
||||
componentWillUnmount() {
|
||||
EditionListStore.unlisten(this.onChange);
|
||||
},
|
||||
|
||||
onChange(state) {
|
||||
this.setState(state);
|
||||
},
|
||||
|
||||
loadEditionList() {
|
||||
if(this.state.open) {
|
||||
this.setState({
|
||||
'open': false
|
||||
});
|
||||
} else {
|
||||
|
||||
EditionListActions.fetchEditionList(this.props.columnContent.id);
|
||||
this.setState({
|
||||
'open': true,
|
||||
'editionList': EditionListStore.getState()
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
selectItem(parentId, itemId) {
|
||||
EditionListActions.selectEdition({
|
||||
'pieceId': parentId,
|
||||
'editionId': itemId
|
||||
});
|
||||
},
|
||||
|
||||
render() {
|
||||
|
||||
let renderEditionListTable = () => {
|
||||
|
||||
let columnList = [
|
||||
new ColumnModel('edition_number', 'Number', TableItemText, 2, false),
|
||||
new ColumnModel('user_registered', 'User', TableItemText, 4, true),
|
||||
new ColumnModel('acl', 'Actions', TableItemAcl, 4, true)
|
||||
];
|
||||
|
||||
if(this.state.open && this.state.editionList[this.props.columnContent.id] && this.state.editionList[this.props.columnContent.id].length) {
|
||||
return (
|
||||
<div className="row">
|
||||
<div className="col-xs-12 col-sm-12 col-md-12 col-lg-12">
|
||||
<Table itemList={this.state.editionList[this.props.columnContent.id]} columnList={columnList}>
|
||||
{this.state.editionList[this.props.columnContent.id].map((edition, i) => {
|
||||
return (
|
||||
<TableItemSelectable
|
||||
className="ascribe-table-item-selectable"
|
||||
selectItem={this.selectItem}
|
||||
parentId={this.props.columnContent.id}
|
||||
key={i} />
|
||||
);
|
||||
})}
|
||||
</Table>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="col-xs-12 col-sm-12 col-md-12 col-lg-12 ascribe-table-item">
|
||||
<div className="row">
|
||||
<TableItemWrapper
|
||||
columnList={this.props.columnList}
|
||||
columnContent={this.props.columnContent}
|
||||
columnWidth={12} />
|
||||
<div className="col-xs-1 col-sm-1 col-md-1 col-lg-1 ascribe-table-item-column">
|
||||
<TableItemSubtableButton content="+" onClick={this.loadEditionList} />
|
||||
</div>
|
||||
</div>
|
||||
{renderEditionListTable()}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
export default TableItemSubtable;
|
@ -1,23 +0,0 @@
|
||||
'use strict';
|
||||
|
||||
import React from 'react';
|
||||
|
||||
let TableItemSubtableButton = React.createClass({
|
||||
|
||||
propTypes: {
|
||||
content: React.PropTypes.string.isRequired,
|
||||
onClick: React.PropTypes.func.isRequired
|
||||
},
|
||||
|
||||
render() {
|
||||
return (
|
||||
<span>
|
||||
<button type="button" className="btn btn-default btn-sm ascribe-table-expand-button" onClick={this.props.onClick}>
|
||||
{this.props.content}
|
||||
</button>
|
||||
</span>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
export default TableItemSubtableButton;
|
@ -3,20 +3,26 @@
|
||||
import requests from '../utils/requests';
|
||||
|
||||
import { generateOrderingQueryParams } from '../utils/fetch_api_utils';
|
||||
|
||||
import { mergeOptions } from '../utils/general_utils';
|
||||
|
||||
let EditionListFetcher = {
|
||||
/**
|
||||
* Fetches a list of editions from the API.
|
||||
*/
|
||||
fetch(pieceId, page, pageSize, orderBy, orderAsc) {
|
||||
fetch(pieceId, page, pageSize, orderBy, orderAsc, filterBy) {
|
||||
let ordering = generateOrderingQueryParams(orderBy, orderAsc);
|
||||
return requests.get('editions_list', {
|
||||
'piece_id': pieceId,
|
||||
page,
|
||||
pageSize,
|
||||
ordering
|
||||
});
|
||||
|
||||
let queryParams = mergeOptions(
|
||||
{
|
||||
page,
|
||||
pageSize,
|
||||
ordering,
|
||||
piece_id: pieceId
|
||||
},
|
||||
filterBy
|
||||
);
|
||||
|
||||
return requests.get('editions_list', queryParams);
|
||||
}
|
||||
};
|
||||
|
||||
|
@ -12,7 +12,7 @@ class EditionListStore {
|
||||
this.bindActions(EditionsListActions);
|
||||
}
|
||||
|
||||
onUpdateEditionList({pieceId, editionListOfPiece, page, pageSize, orderBy, orderAsc, count}) {
|
||||
onUpdateEditionList({pieceId, editionListOfPiece, page, pageSize, orderBy, orderAsc, count, filterBy}) {
|
||||
|
||||
/*
|
||||
Basically there are two modes an edition list can be updated.
|
||||
@ -54,6 +54,7 @@ class EditionListStore {
|
||||
this.editionList[pieceId].orderBy = orderBy;
|
||||
this.editionList[pieceId].orderAsc = orderAsc;
|
||||
this.editionList[pieceId].count = count;
|
||||
this.editionList[pieceId].filterBy = filterBy;
|
||||
}
|
||||
|
||||
/**
|
||||
@ -80,7 +81,10 @@ class EditionListStore {
|
||||
this.editionList[pieceId].length = 0;
|
||||
|
||||
// refetch editions with adjusted page size
|
||||
EditionsListActions.fetchEditionList(pieceId, 1, prevEditionListLength, this.editionList[pieceId].orderBy, this.editionList[pieceId].orderAsc)
|
||||
EditionsListActions.fetchEditionList(pieceId, 1, prevEditionListLength,
|
||||
this.editionList[pieceId].orderBy,
|
||||
this.editionList[pieceId].orderAsc,
|
||||
this.editionList[pieceId].filterBy)
|
||||
.then(() => {
|
||||
// reset back to the normal pageSize and page
|
||||
this.editionList[pieceId].page = prevEditionListPage;
|
||||
|
Loading…
Reference in New Issue
Block a user