mirror of
https://github.com/ascribe/onion.git
synced 2024-11-15 01:25:17 +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) {
|
fetchEditionList(pieceId, page, pageSize, orderBy, orderAsc, filterBy) {
|
||||||
if(!orderBy && typeof orderAsc === 'undefined') {
|
if(!orderBy && typeof orderAsc === 'undefined' || !orderAsc) {
|
||||||
orderBy = 'edition_number';
|
orderBy = 'edition_number';
|
||||||
orderAsc = true;
|
orderAsc = true;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Taken from: http://stackoverflow.com/a/519157/1263876
|
// 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;
|
page = 1;
|
||||||
pageSize = 10;
|
pageSize = 10;
|
||||||
}
|
}
|
||||||
|
|
||||||
return Q.Promise((resolve, reject) => {
|
return Q.Promise((resolve, reject) => {
|
||||||
EditionListFetcher
|
EditionListFetcher
|
||||||
.fetch(pieceId, page, pageSize, orderBy, orderAsc)
|
.fetch(pieceId, page, pageSize, orderBy, orderAsc, filterBy)
|
||||||
.then((res) => {
|
.then((res) => {
|
||||||
this.actions.updateEditionList({
|
this.actions.updateEditionList({
|
||||||
pieceId,
|
pieceId,
|
||||||
@ -39,6 +39,7 @@ class EditionListActions {
|
|||||||
pageSize,
|
pageSize,
|
||||||
orderBy,
|
orderBy,
|
||||||
orderAsc,
|
orderAsc,
|
||||||
|
filterBy,
|
||||||
'editionListOfPiece': res.editions,
|
'editionListOfPiece': res.editions,
|
||||||
'count': res.count
|
'count': res.count
|
||||||
});
|
});
|
||||||
|
@ -6,10 +6,14 @@ import classNames from 'classnames';
|
|||||||
import EditionListActions from '../../actions/edition_list_actions';
|
import EditionListActions from '../../actions/edition_list_actions';
|
||||||
import EditionListStore from '../../stores/edition_list_store';
|
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 Button from 'react-bootstrap/lib/Button';
|
||||||
|
|
||||||
import CreateEditionsButton from '../ascribe_buttons/create_editions_button';
|
import CreateEditionsButton from '../ascribe_buttons/create_editions_button';
|
||||||
|
|
||||||
|
import { mergeOptions } from '../../utils/general_utils';
|
||||||
import { getLangText } from '../../utils/lang_utils';
|
import { getLangText } from '../../utils/lang_utils';
|
||||||
|
|
||||||
let AccordionListItemEditionWidget = React.createClass({
|
let AccordionListItemEditionWidget = React.createClass({
|
||||||
@ -21,15 +25,20 @@ let AccordionListItemEditionWidget = React.createClass({
|
|||||||
},
|
},
|
||||||
|
|
||||||
getInitialState() {
|
getInitialState() {
|
||||||
return EditionListStore.getState();
|
return mergeOptions(
|
||||||
|
EditionListStore.getState(),
|
||||||
|
PieceListStore.getState()
|
||||||
|
);
|
||||||
},
|
},
|
||||||
|
|
||||||
componentDidMount() {
|
componentDidMount() {
|
||||||
EditionListStore.listen(this.onChange);
|
EditionListStore.listen(this.onChange);
|
||||||
|
PieceListStore.listen(this.onChange);
|
||||||
},
|
},
|
||||||
|
|
||||||
componentWillUnmount() {
|
componentWillUnmount() {
|
||||||
EditionListStore.unlisten(this.onChange);
|
EditionListStore.unlisten(this.onChange);
|
||||||
|
PieceListStore.unlisten(this.onChange);
|
||||||
},
|
},
|
||||||
|
|
||||||
onChange(state) {
|
onChange(state) {
|
||||||
@ -47,7 +56,7 @@ let AccordionListItemEditionWidget = React.createClass({
|
|||||||
EditionListActions.toggleEditionList(pieceId);
|
EditionListActions.toggleEditionList(pieceId);
|
||||||
} else {
|
} else {
|
||||||
EditionListActions.toggleEditionList(pieceId);
|
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];
|
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() {
|
render() {
|
||||||
let selectedEditionsCount = 0;
|
let selectedEditionsCount = 0;
|
||||||
let allEditionsCount = 0;
|
let allEditionsCount = 0;
|
||||||
|
@ -44,7 +44,9 @@ let CreateEditionsButton = React.createClass({
|
|||||||
startPolling() {
|
startPolling() {
|
||||||
// start polling until editions are defined
|
// start polling until editions are defined
|
||||||
let pollingIntervalIndex = setInterval(() => {
|
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) => {
|
.then((res) => {
|
||||||
|
|
||||||
clearInterval(this.state.pollingIntervalIndex);
|
clearInterval(this.state.pollingIntervalIndex);
|
||||||
|
@ -103,6 +103,7 @@ let PieceListToolbarFilterWidgetFilter = React.createClass({
|
|||||||
<span onClick={this.filterBy(param)}>
|
<span onClick={this.filterBy(param)}>
|
||||||
{getLangText('I can') + ' ' + getLangText(name)}
|
{getLangText('I can') + ' ' + getLangText(name)}
|
||||||
<input
|
<input
|
||||||
|
readOnly
|
||||||
type="checkbox"
|
type="checkbox"
|
||||||
checked={this.state.filterBy[param]} />
|
checked={this.state.filterBy[param]} />
|
||||||
</span>
|
</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 requests from '../utils/requests';
|
||||||
|
|
||||||
import { generateOrderingQueryParams } from '../utils/fetch_api_utils';
|
import { generateOrderingQueryParams } from '../utils/fetch_api_utils';
|
||||||
|
import { mergeOptions } from '../utils/general_utils';
|
||||||
|
|
||||||
let EditionListFetcher = {
|
let EditionListFetcher = {
|
||||||
/**
|
/**
|
||||||
* Fetches a list of editions from the API.
|
* 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);
|
let ordering = generateOrderingQueryParams(orderBy, orderAsc);
|
||||||
return requests.get('editions_list', {
|
|
||||||
'piece_id': pieceId,
|
let queryParams = mergeOptions(
|
||||||
page,
|
{
|
||||||
pageSize,
|
page,
|
||||||
ordering
|
pageSize,
|
||||||
});
|
ordering,
|
||||||
|
piece_id: pieceId
|
||||||
|
},
|
||||||
|
filterBy
|
||||||
|
);
|
||||||
|
|
||||||
|
return requests.get('editions_list', queryParams);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -12,7 +12,7 @@ class EditionListStore {
|
|||||||
this.bindActions(EditionsListActions);
|
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.
|
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].orderBy = orderBy;
|
||||||
this.editionList[pieceId].orderAsc = orderAsc;
|
this.editionList[pieceId].orderAsc = orderAsc;
|
||||||
this.editionList[pieceId].count = count;
|
this.editionList[pieceId].count = count;
|
||||||
|
this.editionList[pieceId].filterBy = filterBy;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@ -80,7 +81,10 @@ class EditionListStore {
|
|||||||
this.editionList[pieceId].length = 0;
|
this.editionList[pieceId].length = 0;
|
||||||
|
|
||||||
// refetch editions with adjusted page size
|
// 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(() => {
|
.then(() => {
|
||||||
// reset back to the normal pageSize and page
|
// reset back to the normal pageSize and page
|
||||||
this.editionList[pieceId].page = prevEditionListPage;
|
this.editionList[pieceId].page = prevEditionListPage;
|
||||||
|
Loading…
Reference in New Issue
Block a user