ascribe
/
onion
mirror of https://github.com/ascribe/onion.git
1
0
Fork 0
Code Issues Releases Wiki Activity

Inject elements-to-transclude in the table

This commit is contained in:
Tim Daubenschütz 2015-05-22 16:51:08 +02:00
parent 47dd322cff
commit 4c0e7992f4
12 changed files with 135 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
css/main.css
View File

@ -51,3 +51,8 @@
display:table-cell;
vertical-align: middle;
}
.btn-ascribe, .btn-ascribe:hover, .btn-ascribe:active, .btn-ascribe:focus {
background-color: rgba(2, 182, 163, 0.5);
border-color: rgba(2, 182, 163, 0.5);
}

6
js/actions/edition_list_actions.js
View File

@ -9,11 +9,11 @@ class EditionListActions {
);
}
fetchList() {
fetchList(pieceId) {
EditionListFetcher
.fetch()
.fetch(pieceId)
.then((res) => {
this.actions.updateEditionList(res.pieces);
this.actions.updateEditionList(res.editions);
})
.catch((err) => {
console.log(err);

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

@ -1,32 +1,39 @@
import React from 'react';
import ReactAddons from 'react/addons';
import TableHeader from './table_header';
import TableColumnModel from '../../models/table_column_model';
import TableColumnContentModel from '../../models/table_column_content_model';
let Table = React.createClass({
propTypes: {
columnList: React.PropTypes.arrayOf(React.PropTypes.instanceOf(TableColumnModel)),
changeOrder: React.PropTypes.func.isRequired,
tableItem: React.PropTypes.any.isRequired // Optimally, this should check if tableItem is an instance of React.Component or something like that
columnList: React.PropTypes.arrayOf(React.PropTypes.instanceOf(TableColumnContentModel)),
changeOrder: React.PropTypes.func.isRequired
},
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
});
});
});
},
render() {
let TableItem = this.props.tableItem;
if(this.props.itemList && this.props.itemList.length > 0) {
return (
<div className="ascribe-table">
<TableHeader columnList={this.props.columnList} itemList={this.props.itemList} fetchList={this.props.fetchList} changeOrder={this.props.changeOrder} orderAsc={this.props.orderAsc} orderBy={this.props.orderBy} />
{this.props.itemList.map((item, i) => {
return (
<TableItem columnList={this.props.columnList} columnContent={item} key={i} />
);
})}
{this.renderChildren()}
</div>
);
} else {
return (
<p>Loading</p>

4
js/components/ascribe_table/table_header.js
View File

@ -4,13 +4,13 @@ import TableColumnMixin from '../../mixins/table_column_mixin';
import GeneralUtils from '../../utils/general_utils';
import TableHeaderItem from './table_header_item';
import TableColumnModel from '../../models/table_column_model';
import TableColumnContentModel from '../../models/table_column_content_model';
let TableHeader = React.createClass({
mixins: [TableColumnMixin],
propTypes: {
columnList: React.PropTypes.arrayOf(React.PropTypes.instanceOf(TableColumnModel)),
columnList: React.PropTypes.arrayOf(React.PropTypes.instanceOf(TableColumnContentModel)),
itemList: React.PropTypes.array.isRequired,
changeOrder: React.PropTypes.func.isRequired,
orderAsc: React.PropTypes.bool.isRequired,

13
js/components/ascribe_table/table_item.js
View File

@ -1,26 +1,19 @@
import React from 'react';
import TableColumnMixin from '../../mixins/table_column_mixin';
import TableItemImg from './table_item_img';
import TableItemText from './table_item_text';
import TableColumnModel from '../../models/table_column_model';
import TableColumnContentModel from '../../models/table_column_content_model';
let TableItem = React.createClass({
mixins: [TableColumnMixin],
propTypes: {
columnList: React.PropTypes.arrayOf(React.PropTypes.instanceOf(TableColumnModel)),
columnContent: React.PropTypes.object.isRequired
columnList: React.PropTypes.arrayOf(React.PropTypes.instanceOf(TableColumnContentModel)),
columnContent: React.PropTypes.object
},
render() {
/**
* An element in the Table can have a certain display_type.
* A display_type is just
*/
let calcColumnElementContent = () => {
return this.props.columnList.map((column, i) => {

61
js/components/ascribe_table/table_item_subtable.js Normal file
View File

@ -0,0 +1,61 @@
import React from 'react';
import TableColumnContentModel from '../../models/table_column_content_model';
// ToDo: Create Table-specific Utils to not lock it to projects utilities
import GeneralUtils from '../../utils/general_utils';
import TableItemSubtableButton from './table_item_subtable_button';
let TableItemSubtable = React.createClass({
propTypes: {
columnList: React.PropTypes.arrayOf(React.PropTypes.instanceOf(TableColumnContentModel)),
columnContent: React.PropTypes.object
},
calcColumnClasses(list, i) {
let bootstrapClasses = ['col-xs-', 'col-sm-', 'col-md-', 'col-lg-'];
let listOfRowValues = list.map((column) => column.rowWidth );
let numOfColumns = GeneralUtils.sumNumList(listOfRowValues);
if(numOfColumns > 10) {
throw new Error('Bootstrap has only 12 columns to assign. You defined ' + numOfColumns + '. Change this in the columnMap you\'re passing to the table.')
} else {
return bootstrapClasses.join( listOfRowValues[i] + ' ') + listOfRowValues[i];
}
},
render() {
let calcColumnElementContent = () => {
return this.props.columnList.map((column, i) => {
let TypeElement = column.displayType;
let columnClass = this.calcColumnClasses(this.props.columnList, i);
return (
<div className={columnClass + ' ascribe-table-item-column'} key={i}>
<TypeElement content={this.props.columnContent[column.columnName]} width="50" />
</div>
);
});
};
return (
<div className="col-xs-12 col-sm-12 col-md-12 col-lg-12 ascribe-table-item">
<div className="row">
{calcColumnElementContent()}
<div className="col-xs-2 col-sm-2 col-md-2 col-lg-2 ascribe-table-item-column">
<TableItemSubtableButton content="Editions">
</TableItemSubtableButton>
</div>
</div>
</div>
);
}
});
export default TableItemSubtable;

20
js/components/ascribe_table/table_item_subtable_button.js Normal file
View File

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

32
js/components/edition_list.js
View File

@ -1,32 +0,0 @@
import React from 'react';
import AltContainer from 'alt/AltContainer';
import EditionListStore from '../stores/edition_list_store';
import EditionListActions from '../actions/edition_list_actions';
import Table from './ascribe_table/table';
import TableItemText from './ascribe_table/table_item_text';
import TableColumnModel from '../models/table_column_model';
let EditionList = React.createClass({
getInitialState() {
return EditionListStore.getState();
},
componentDidMount() {
EditionListActions.fetchList();
},
render() {
return (
<AltContainer store={EditionListStore} actions={EditionListActions}>
<Table></Table>
</AltContainer>
);
}
});
export default EditionList;

24
js/components/piece_list.js
View File

@ -4,12 +4,17 @@ 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';
import TableItemText from './ascribe_table/table_item_text';
import TableItemSubtable from './ascribe_table/table_item_subtable';
import TableItemSubtableButton from './ascribe_table/table_item_subtable_button';
import TableColumnModel from '../models/table_column_model';
import TableColumnContentModel from '../models/table_column_content_model';
import Pagination from './pagination'
@ -22,8 +27,7 @@ let PieceList = React.createClass({
componentDidMount() {
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);
},
paginationGoToPage(page) {
@ -36,16 +40,15 @@ let PieceList = React.createClass({
render() {
let columnList = [
new TableColumnModel('thumbnail', '', TableItemImg, 2, false),
new TableColumnModel('artist_name', 'Artist', TableItemText, 4, true),
new TableColumnModel('title', 'Title', TableItemText, 4, true)
new TableColumnContentModel('thumbnail', '', TableItemImg, 2, false),
new TableColumnContentModel('artist_name', 'Artist', TableItemText, 4, true),
new TableColumnContentModel('title', 'Title', TableItemText, 4, true)
];
// Could wrap this altContainer potentially once again.
return (
<AltContainer
store={PieceListStore}
actions={PieceListActions}
store={PieceListStore}
transform={(props) => {
return {
'itemList': props.pieceList,
@ -54,10 +57,11 @@ let PieceList = React.createClass({
'orderAsc': props.orderAsc,
'search': props.search,
'page': props.page,
'pageSize': props.pageSize
'pageSize': props.pageSize,
}
}}>
<Table columnList={columnList} changeOrder={this.tableChangeOrder} tableItem={TableItem}>
<Table columnList={columnList} changeOrder={this.tableChangeOrder}>
<TableItemSubtable></TableItemSubtable>
</Table>
<Pagination currentPage={this.props.query.page} goToPage={this.paginationGoToPage} />
</AltContainer>

4
js/fetchers/edition_list_fetcher.js
View File

@ -7,9 +7,9 @@ let EditionListFetcher = {
/**
* Fetches a list of editions from the API.
*/
fetch() {
fetch(pieceId) {
return fetch(AppConstants.baseUrl + 'pieces/', {
return fetch(AppConstants.baseUrl + 'pieces/' + pieceId + '/editions/', {
headers: {
'Authorization': 'Basic ' + AppConstants.debugCredentialBase64
}

5
js/models/table_column_model.js → js/models/table_column_content_model.js
View File

@ -1,4 +1,5 @@
class TableColumnItem {
class TableColumnContentModel {
// ToDo: Add validation for all passed-in parameters
constructor(columnName, displayName, displayType, rowWidth, canBeOrdered) {
this.columnName = columnName;
this.displayName = displayName;
@ -8,4 +9,4 @@ class TableColumnItem {
}
}
export default TableColumnItem;
export default TableColumnContentModel;

6
js/stores/edition_list_store.js
View File

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