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

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

View File

@ -51,3 +51,8 @@
display:table-cell; display:table-cell;
vertical-align: middle; 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);
}

View File

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

View File

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

View File

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

View File

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

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;

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;

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;

View File

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

View File

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

View File

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

View File

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