1
0
mirror of https://github.com/ascribe/onion.git synced 2024-12-23 01:39:36 +01:00

Merge remote-tracking branch 'remotes/origin/master' into piece-detail-setup

Conflicts:
	css/main.css
	js/components/ascribe_table/table_item_subtable.js
This commit is contained in:
ddejongh 2015-05-26 13:48:00 +02:00
commit 497e43005e
13 changed files with 171 additions and 64 deletions

View File

@ -9,16 +9,24 @@ The code is JavaScript ECMA 6.
Getting started Getting started
=============== ===============
Install some nice extensions for Chrom(e|ium):
- [Allow-Control-Allow-Origin](https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi):
we need this to open connection to external hosts ([staging.ascribe.io](http://staging.ascribe.io/) in our case)
- [React Developer Tools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi)
```bash ```bash
git clone git@bitbucket.org:ascribe/onion.git git clone git@bitbucket.org:ascribe/onion.git
cd onion cd onion
npm install npm install
npm run watch npm run watch
python -mSimpleHTTPServer
``` ```
Code Conventions Code Conventions
============ ================
For this project, we're using: For this project, we're using:
* 4 Spaces * 4 Spaces
@ -28,10 +36,16 @@ For this project, we're using:
* We use `let` instead of `var`: [SA Post](http://stackoverflow.com/questions/762011/javascript-let-keyword-vs-var-keyword) * We use `let` instead of `var`: [SA Post](http://stackoverflow.com/questions/762011/javascript-let-keyword-vs-var-keyword)
Troubleshooting
===============
Q: OMG nothing works
A: try `npm install`. Someone may have updated some dependencies
Reading list Reading list
============ ============
Start here Start here
---------- ----------

View File

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

View File

@ -0,0 +1,23 @@
import alt from '../alt';
import PieceFetcher from '../fetchers/piece_fetcher';
class PieceActions {
constructor() {
this.generateActions(
'updatePiece'
);
}
fetchOne(pieceId) {
PieceFetcher.fetchOne(pieceId)
.then((res) => {
this.actions.updatePiece(res.piece);
})
.catch((err) => {
console.log(err);
});
}
}
export default alt.createActions(PieceActions);

View File

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

View File

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

View File

@ -2,11 +2,16 @@ import React from 'react';
import TableColumnContentModel from '../../models/table_column_content_model'; 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 // ToDo: Create Table-specific Utils to not lock it to projects utilities
import GeneralUtils from '../../utils/general_utils'; import GeneralUtils from '../../utils/general_utils';
import TableItemSubtableButton from './table_item_subtable_button';
import Table from './table'; import Table from './table';
import TableItem from './table_item';
import TableItemText from './table_item_text';
import TableItemSubtableButton from './table_item_subtable_button';
let TableItemSubtable = React.createClass({ let TableItemSubtable = React.createClass({
@ -26,16 +31,21 @@ let TableItemSubtable = React.createClass({
}, },
componentDidMount() { componentDidMount() {
this.props.store.listen(this.onChange); EditionListStore.listen(this.onChange);
}, },
loadEditionList() { loadEditionList() {
this.props.actions.fetchEditionList(this.props.columnContent.id); if(this.state.open) {
this.setState({
'open': false
});
} else {
EditionListActions.fetchEditionList(this.props.columnContent.id);
this.setState({ this.setState({
'open': true, 'open': true,
'editionList': this.props.store.getState() 'editionList': EditionListStore.getState()
}); });
}
}, },
calcColumnClasses(list, i) { calcColumnClasses(list, i) {
@ -71,17 +81,25 @@ let TableItemSubtable = React.createClass({
let renderEditionListTable = () => { let renderEditionListTable = () => {
// let columnList = [ let columnList = [
// new TableColumnContentModel('thumbnail', '', TableItemImg, 2, false), new TableColumnContentModel('edition_number', 'Edition Number', TableItemText, 2, false),
// new TableColumnContentModel('artist_name', 'Artist', TableItemText, 4, true), new TableColumnContentModel('user_registered', 'User', TableItemText, 4, true),
// new TableColumnContentModel('title', 'Title', TableItemText, 4, true) new TableColumnContentModel('bitcoin_id', 'Bitcoin Address', TableItemText, 4, true)
// ]; ];
if(this.state.open) { if(this.state.open && this.state.editionList[this.props.columnContent.id] && this.state.editionList[this.props.columnContent.id].length) {
return ( return (
<div className="row"> <div className="row">
<div className="col-xs-12 col-sm-12 col-md-12 col-lg-12"> <div className="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<Table itemList={this.state.editionList}></Table> <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>
</div> </div>
); );

View File

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

View File

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

View File

@ -0,0 +1,22 @@
import fetch from 'isomorphic-fetch';
import AppConstants from '../constants/application_constants';
import FetchApiUtils from '../utils/fetch_api_utils';
let PieceFetcher = {
/**
* Fetch one user from the API.
* If no arg is supplied, load the current user
*
*/
fetchOne(pieceId) {
return fetch(AppConstants.baseUrl + 'editions/' + pieceId + '/', {
headers: {
'Authorization': 'Basic ' + AppConstants.debugCredentialBase64
}
}).then((res) => res.json());
}
};
export default PieceFetcher;

View File

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

View File

@ -0,0 +1,16 @@
import alt from '../alt';
import PieceAction from '../actions/piece_actions';
class PieceStore {
constructor() {
this.piece = {};
this.bindActions(PieceAction);
}
onUpdatePiece(piece) {
this.piece = piece;
}
}
export default alt.createStore(PieceStore);