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

add foldable editions table

Browse Source
This commit is contained in:
Tim Daubenschütz 2015-05-26 13:14:35 +02:00
parent ffd1326366
commit 5f492ff13b
8 changed files with 108 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
css/main.css
View File

@ -36,9 +36,9 @@
background-color: #F5F5F5;
}
.ascribe-table-item:hover {
/*.ascribe-table-item:hover {
background-color: #EEEEEE;
}
}*/
.ascribe-table-item-column {
display: table;

5
js/actions/edition_list_actions.js
View File

@ -13,7 +13,10 @@ class EditionListActions {
EditionListFetcher
.fetch(pieceId)
.then((res) => {
this.actions.updateEditionList(res.editions);
this.actions.updateEditionList({
'editionList': res.editions,
pieceId
});
})
.catch((err) => {
console.log(err);

14
js/components/ascribe_table/table.js
View File

@ -14,14 +14,12 @@ let Table = React.createClass({
renderChildren() {
var that = this;
return ReactAddons.Children.map(this.props.children, (child) => {
return that.props.itemList.map((item, i) => {
return ReactAddons.addons.cloneWithProps(child, {
columnList: this.props.columnList,
columnContent: item,
key: i
});
});
return ReactAddons.Children.map(this.props.children, (child, i) => {
return ReactAddons.addons.cloneWithProps(child, {
columnList: this.props.columnList,
columnContent: this.props.itemList[i],
key: i
});
});
},

52
js/components/ascribe_table/table_item_subtable.js
View File

@ -2,9 +2,15 @@ import React from 'react';
import TableColumnContentModel from '../../models/table_column_content_model';
import EditionListStore from '../../stores/edition_list_store';
import EditionListActions from '../../actions/edition_list_actions';
// ToDo: Create Table-specific Utils to not lock it to projects utilities
import GeneralUtils from '../../utils/general_utils';
import Table from './table';
import TableItem from './table_item';
import TableItemText from './table_item_text';
import TableItemSubtableButton from './table_item_subtable_button';
@ -25,12 +31,21 @@ let TableItemSubtable = React.createClass({
},
componentDidMount() {
this.props.store.listen(this.onChange);
EditionListStore.listen(this.onChange);
},
loadEditionList() {
console.log(this.props);
//this.props.actions.actions.fetchEditionList();
if(this.state.open) {
this.setState({
'open': false
});
} else {
EditionListActions.fetchEditionList(this.props.columnContent.id);
this.setState({
'open': true,
'editionList': EditionListStore.getState()
});
}
},
calcColumnClasses(list, i) {
@ -63,6 +78,34 @@ let TableItemSubtable = React.createClass({
});
};
let renderEditionListTable = () => {
let columnList = [
new TableColumnContentModel('edition_number', 'Edition Number', TableItemText, 2, false),
new TableColumnContentModel('user_registered', 'User', TableItemText, 4, true),
new TableColumnContentModel('bitcoin_id', 'Bitcoin Address', TableItemText, 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 (
<TableItem
key={i}>
</TableItem>
);
})}
</Table>
</div>
</div>
);
}
};
return (
<div className="col-xs-12 col-sm-12 col-md-12 col-lg-12 ascribe-table-item">
<div className="row">
@ -72,9 +115,10 @@ let TableItemSubtable = React.createClass({
</TableItemSubtableButton>
</div>
</div>
{renderEditionListTable()}
</div>
);
}
});
export default TableItemSubtable;
export default TableItemSubtable;

5
js/components/ascribe_table/table_item_subtable_button.js
View File

@ -3,13 +3,14 @@ import React from 'react';
let TableItemSubtableButton = React.createClass({
propTypes: {
content: React.PropTypes.string.isRequired
content: React.PropTypes.string.isRequired,
onClick: React.PropTypes.func.isRequired
},
render() {
return (
<span>
<button type="button" className="btn btn-ascribe btn-primary btn-sm">
<button type="button" className="btn btn-ascribe btn-primary btn-sm" onClick={this.props.onClick}>
{this.props.content}
</button>
</span>

5
js/components/ascribe_table/table_item_text.js
View File

@ -3,7 +3,10 @@ import React from 'react';
let TableItemText = React.createClass({
propTypes: {
content: React.PropTypes.string.isRequired
content: React.PropTypes.oneOfType([
React.PropTypes.string,
React.PropTypes.number
])
},
render() {

67
js/components/piece_list.js
View File

@ -4,9 +4,6 @@ import AltContainer from 'alt/AltContainer';
import PieceListStore from '../stores/piece_list_store';
import PieceListActions from '../actions/piece_list_actions';
import EditionListStore from '../stores/edition_list_store';
import EditionListActions from '../actions/edition_list_actions';
import Table from './ascribe_table/table';
import TableItem from './ascribe_table/table_item';
import TableItemImg from './ascribe_table/table_item_img';
@ -26,6 +23,8 @@ let PieceList = React.createClass({
},
componentDidMount() {
PieceListStore.listen(this.onChange);
let page = this.props.query.page || this.state.page;
PieceListActions.fetchPieceList(page, this.state.pageSize, this.state.search, this.state.orderBy, this.state.orderAsc);
},
@ -34,8 +33,8 @@ let PieceList = React.createClass({
PieceListStore.unlisten(this.onChange);
},
onChange() {
this.setState(this.getInitialState());
onChange(state) {
this.setState(state);
},
paginationGoToPage(page) {
@ -58,30 +57,40 @@ let PieceList = React.createClass({
let currentPage = parseInt(this.props.query.page, 10);
let totalPages = Math.ceil(this.state.pieceListCount / this.state.pageSize)
// Could wrap this altContainer potentially once again.
return (
<AltContainer
store={PieceListStore}
transform={(props) => {
return {
'itemList': props.pieceList,
'itemListCount': props.pieceListCount,
'orderBy': props.orderBy,
'orderAsc': props.orderAsc,
'search': props.search,
'page': props.page,
'pageSize': props.pageSize,
}
}}>
<Table columnList={columnList} changeOrder={this.tableChangeOrder}>
<TableItemSubtable store={EditionListStore} actions={EditionListActions}></TableItemSubtable>
</Table>
<Pagination currentPage={currentPage}
totalPages={totalPages}
goToPage={this.paginationGoToPage} />
</AltContainer>
);
if(this.state.pieceList && this.state.pieceList.length > 0) {
return (
<div>
<Table
columnList={columnList}
changeOrder={this.tableChangeOrder}
itemList={this.state.pieceList}
itemListCount={this.state.pieceListCount}
orderBy={this.state.orderBy}
orderAsc={this.state.orderAsc}
search={this.state.search}
page={this.state.page}
pageSize={this.state.pageSize}>
{this.state.pieceList.map((item, i) => {
return (
<TableItemSubtable
key={i}>
</TableItemSubtable>
);
})}
</Table>
<Pagination currentPage={currentPage}
totalPages={totalPages}
goToPage={this.paginationGoToPage}>
</Pagination>
</div>
);
} else {
return (
<p>Loading</p>
);
}
}
});

6
js/stores/edition_list_store.js
View File

@ -3,12 +3,12 @@ import EditionsListActions from '../actions/edition_list_actions';
class EditionListStore {
constructor() {
this.editionList = [];
this.editionList = {};
this.bindActions(EditionsListActions);
}
onUpdateEditionList(editionList) {
this.editionList = editionList;
onUpdateEditionList({pieceId, editionList}) {
this.editionList[pieceId] = editionList;
}
};