ascribe/onion
1
0
Fork 0
mirror of https://github.com/ascribe/onion.git synced 2024-12-22 09:23:13 +01:00
Code Issues Releases Wiki Activity

put show state of item list in store to fix bug

Browse Source
This commit is contained in:
Tim Daubenschütz 2015-06-02 15:33:48 +02:00
parent 713dd72b2b
commit 53a01115f2
6 changed files with 70 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
js/actions/piece_list_actions.js
View File

@ -6,7 +6,8 @@ import PieceListFetcher from '../fetchers/piece_list_fetcher';
class PieceListActions {
constructor() {
this.generateActions(
'updatePieceList'
'updatePieceList',
'showEditionList'
);
}

50
js/components/ascribe_accordion_list/accordion_list_item_table.js
View File

@ -6,30 +6,17 @@ import TableItem from '../ascribe_table/table_item';
import TableColumnContentModel from '../../models/table_column_content_model';
let AccordionListItemTable = React.createClass({
getInitialState() {
return {
'show': false
};
},
propTypes: {
className: React.PropTypes.string,
parentId: React.PropTypes.number,
fetchData: React.PropTypes.func,
itemList: React.PropTypes.array,
columnList: React.PropTypes.arrayOf(React.PropTypes.instanceOf(TableColumnContentModel)),
numOfTableItems: React.PropTypes.number
},
toggleTable() {
this.props.fetchData();
this.setState({
'show': !this.state.show
});
numOfTableItems: React.PropTypes.number,
show: React.PropTypes.bool
},
render() {
if(this.props.itemList && this.state.show) {
if(this.props.show && this.props.itemList) {
return (
<div className={this.props.className}>
<Table
@ -44,44 +31,17 @@ let AccordionListItemTable = React.createClass({
);
})}
</Table>
<AccordionListItemTableToggle
className="ascribe-accordion-list-table-toggle"
onClick={this.toggleTable}
show={this.state.show}
numOfTableItems={this.props.numOfTableItems} />
{this.props.children}
</div>
);
} else {
return (
<div className={this.props.className}>
<AccordionListItemTableToggle
className="ascribe-accordion-list-table-toggle"
onClick={this.toggleTable}
show={this.state.show}
numOfTableItems={this.props.numOfTableItems} />
{this.props.children}
</div>
);
}
}
});
let AccordionListItemTableToggle = React.createClass({
propTypes: {
className: React.PropTypes.string,
onClick: React.PropTypes.func,
show: React.PropTypes.bool,
numOfTableItems: React.PropTypes.number
},
render() {
return (
<span
className={this.props.className}
onClick={this.props.onClick}>
{this.props.show ? 'Hide all ' + this.props.numOfTableItems + ' Editions' : 'Show all ' + this.props.numOfTableItems + ' Editions'}
</span>
);
}
});
export default AccordionListItemTable;

38
js/components/ascribe_accordion_list/accordion_list_item_table_editions.js
View File

@ -2,8 +2,11 @@ import React from 'react';
import EditionListStore from '../../stores/edition_list_store';
import EditionListActions from '../../actions/edition_list_actions';
import PieceListStore from '../../stores/piece_list_store';
import PieceListActions from '../../actions/piece_list_actions';
import AccordionListItemTable from './accordion_list_item_table';
import AccordionListItemTableToggle from './accordion_list_item_table_toggle';
import TableColumnContentModel from '../../models/table_column_content_model';
@ -17,7 +20,8 @@ let AccordionListItemTableEditions = React.createClass({
propTypes: {
className: React.PropTypes.string,
parentId: React.PropTypes.number,
numOfEditions: React.PropTypes.number
numOfEditions: React.PropTypes.number,
show: React.PropTypes.bool
},
getInitialState() {
@ -36,14 +40,15 @@ let AccordionListItemTableEditions = React.createClass({
EditionListStore.unlisten(this.onChange);
},
getEditionList() {
EditionListActions.fetchEditionList(this.props.parentId);
},
selectItem(pieceId, editionId) {
EditionListActions.selectEdition({pieceId, editionId});
},
toggleTable() {
PieceListActions.showEditionList(this.props.parentId);
EditionListActions.fetchEditionList(this.props.parentId);
},
render() {
let columnList = [
new TableColumnContentModel((item) => { return { 'editionId': item.id, 'pieceId': this.props.parentId, 'selectItem': this.selectItem, 'selected': item.selected }}, '', '', TableItemCheckbox, 1, false),
@ -53,13 +58,22 @@ let AccordionListItemTableEditions = React.createClass({
];
return (
<AccordionListItemTable
className={this.props.className}
parentId={this.props.parentId}
fetchData={this.getEditionList}
itemList={this.state.editionList[this.props.parentId]}
columnList={columnList}
numOfTableItems={this.props.numOfEditions} />
<div>
<AccordionListItemTable
className={this.props.className}
parentId={this.props.parentId}
itemList={this.state.editionList[this.props.parentId]}
columnList={columnList}
numOfTableItems={this.props.numOfEditions}
show={this.props.show}>
<AccordionListItemTableToggle
className="ascribe-accordion-list-table-toggle"
onClick={this.toggleTable}
show={this.props.show}
numOfTableItems={this.props.numOfEditions} />
</AccordionListItemTable>
</div>
);
}
});

22
js/components/ascribe_accordion_list/accordion_list_item_table_toggle.js Normal file
View File

@ -0,0 +1,22 @@
import React from 'react';
let AccordionListItemTableToggle = React.createClass({
propTypes: {
className: React.PropTypes.string,
onClick: React.PropTypes.func,
show: React.PropTypes.bool,
numOfTableItems: React.PropTypes.number
},
render() {
return (
<span
className={this.props.className}
onClick={this.props.onClick}>
{this.props.show ? 'Hide all ' + this.props.numOfTableItems + ' Editions' : 'Show all ' + this.props.numOfTableItems + ' Editions'}
</span>
);
}
});
export default AccordionListItemTableToggle;

3
js/components/piece_list.js
View File

@ -70,7 +70,8 @@ let PieceList = React.createClass({
key={i}>
<AccordionListItemTableEditions
className="ascribe-accordion-list-item-table col-xs-6 col-sm-6 col-md-6 col-lg-6 col-xs-offset-3 col-sm-offset-3 col-md-offset-3 col-lg-offset-3"
parentId={item.id}
parentId={item.id}
show={item.show}
numOfEditions={item.num_editions}/>
</AccordionListItem>
);

13
js/stores/piece_list_store.js
View File

@ -24,6 +24,19 @@ class PieceListStore {
this.bindActions(PieceListActions);
}
onShowEditionList(pieceId) {
this.pieceList
.forEach((piece) => {
if(piece.id === pieceId) {
if(piece.show) {
piece.show = false;
} else {
piece.show = true;
}
}
});
}
onUpdatePieceList({ page, pageSize, search, pieceList, orderBy, orderAsc, pieceListCount }) {
this.page = page;
this.pageSize = pageSize;