mirror of https://github.com/ascribe/onion.git
Merge branch 'master' of bitbucket.org:ascribe/onion
This commit is contained in:
vrde
commit
d14e56f223
|
|
@ -0,0 +1,3 @@
|
|||
.ascribe-table-header-column {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
|
@ -5,10 +5,11 @@
|
|||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<title>ascribe</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link ref="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"></link>
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"></link>
|
||||
<link rel="stylesheet" href="css/main.css"></link>
|
||||
</head>
|
||||
<body>
|
||||
<div id="main" class="container-fluid"></div>
|
||||
<div id="main" class="container"></div>
|
||||
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
|
||||
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,10 @@ import AltContainer from 'alt/AltContainer';
|
|||
|
||||
import PieceListStore from '../stores/piece_list_store';
|
||||
import PieceListActions from '../actions/piece_list_actions';
|
||||
|
||||
import Table from './table';
|
||||
import TableItemImg from './table_item_img';
|
||||
import TableItemText from './table_item_text';
|
||||
|
||||
let Link = Router.Link;
|
||||
|
||||
|
|
@ -15,9 +18,29 @@ let PieceList = React.createClass({
|
|||
},
|
||||
|
||||
render() {
|
||||
|
||||
// TODO:
|
||||
// Specifiy how a TableItemX should look like
|
||||
let columnMap = {
|
||||
'thumbnail': {
|
||||
'displayName': 'Thumbnail',
|
||||
'displayType': TableItemImg,
|
||||
'rowWidth': 2
|
||||
},
|
||||
'artist_name': {
|
||||
'displayName': 'Artist',
|
||||
'displayType': TableItemText,
|
||||
'rowWidth': 3
|
||||
},
|
||||
'title': {
|
||||
'displayName': 'Title',
|
||||
'displayType': TableItemText,
|
||||
'rowWidth': 6
|
||||
}
|
||||
};
|
||||
return (
|
||||
<AltContainer store={PieceListStore}>
|
||||
<Table />
|
||||
<Table class="piecesTable" columnMap={columnMap} />
|
||||
</AltContainer>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,20 +1,32 @@
|
|||
import React from 'react';
|
||||
|
||||
import TableItem from './table_item';
|
||||
import TableHeader from './table_header';
|
||||
|
||||
let Table = React.createClass({
|
||||
propTypes: {
|
||||
columnMap: React.PropTypes.object.isRequired
|
||||
},
|
||||
render() {
|
||||
return (
|
||||
<ul>
|
||||
{this.props.pieceList.map((piece, i) => {
|
||||
return (
|
||||
<li key={i}>
|
||||
<TableItem piece={piece} />
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
);
|
||||
|
||||
if(this.props.itemList && this.props.itemList.length > 0) {
|
||||
|
||||
return (
|
||||
<div>
|
||||
<TableHeader columnMap={this.props.columnMap}/>
|
||||
{this.props.itemList.map((item, i) => {
|
||||
return (
|
||||
<TableItem columnMap={this.props.columnMap} columnContent={item} key={i} />
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
|
||||
} else {
|
||||
return (
|
||||
<p>Loading</p>
|
||||
);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,36 @@
|
|||
import React from 'react';
|
||||
|
||||
import TableColumnMixin from '../mixins/table_column_mixin';
|
||||
import GeneralUtils from '../utils/general_utils';
|
||||
|
||||
let TableHeader = React.createClass({
|
||||
mixins: [TableColumnMixin],
|
||||
propTypes: {
|
||||
columnMap: React.PropTypes.object.isRequired
|
||||
},
|
||||
|
||||
render() {
|
||||
|
||||
let columnMapValuesList = GeneralUtils.valuesOfObject(this.props.columnMap);
|
||||
|
||||
return (
|
||||
<div className="col-xs-12 col-sm-12 col-md-12 col-lg-12">
|
||||
<div className="row">
|
||||
{columnMapValuesList.map((val, i) => {
|
||||
|
||||
let columnClass = this.calcColumnClasses(this.props.columnMap, i);
|
||||
|
||||
return (
|
||||
<div className={columnClass + ' ascribe-table-header-column'} key={i}>
|
||||
{val.displayName}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
export default TableHeader;
|
||||
|
|
@ -1,14 +1,55 @@
|
|||
import React from 'react';
|
||||
|
||||
import TableColumnMixin from '../mixins/table_column_mixin';
|
||||
import TableItemImg from './table_item_img';
|
||||
import TableItemText from './table_item_text';
|
||||
|
||||
let TableItem = React.createClass({
|
||||
mixins: [TableColumnMixin],
|
||||
|
||||
// ToDo: Specify that every columnMap should look like this:
|
||||
// {
|
||||
// 'name-of-the-data-point': {
|
||||
// 'displayName': String,
|
||||
// 'displayType': ReactComponent,
|
||||
// 'rowWidth': number
|
||||
// }
|
||||
//
|
||||
// }
|
||||
propTypes: {
|
||||
columnMap: React.PropTypes.object.isRequired,
|
||||
columnContent: React.PropTypes.object.isRequired
|
||||
},
|
||||
render() {
|
||||
|
||||
let columnContent = this.props.columnContent;
|
||||
let columnMapKeysList = Object.keys(this.props.columnMap);
|
||||
|
||||
/**
|
||||
* An element in the Table can have a certain display_type.
|
||||
* A display_type is just
|
||||
*/
|
||||
let calcColumnElementContent = () => {
|
||||
return columnMapKeysList.map((key, i) => {
|
||||
|
||||
let TypeElement = this.props.columnMap[key].displayType;
|
||||
let columnClass = this.calcColumnClasses(this.props.columnMap, i);
|
||||
|
||||
return (
|
||||
<div className={columnClass} key={i}>
|
||||
<TypeElement content={this.props.columnContent[key]} width="50" />
|
||||
</div>
|
||||
);
|
||||
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<ul>
|
||||
<li>something</li>
|
||||
<li></li>
|
||||
<li></li>
|
||||
<li></li>
|
||||
</ul>
|
||||
<div className="col-xs-12 col-sm-12 col-md-12 col-lg-12">
|
||||
<div className="row">
|
||||
{calcColumnElementContent()}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -0,0 +1,18 @@
|
|||
import React from 'react';
|
||||
|
||||
/**
|
||||
* This could be enhanced further by specifying an optional description for example
|
||||
*/
|
||||
let TableItemImg = React.createClass({
|
||||
propTypes: {
|
||||
content: React.PropTypes.string.isRequired,
|
||||
},
|
||||
|
||||
render() {
|
||||
return (
|
||||
<img src={this.props.content} width="50" />
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
export default TableItemImg;
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
import React from 'react';
|
||||
|
||||
let TableItemText = React.createClass({
|
||||
propTypes: {
|
||||
content: React.PropTypes.string.isRequired
|
||||
},
|
||||
|
||||
render() {
|
||||
return (
|
||||
<span>
|
||||
{this.props.content}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
export default TableItemText;
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
import GeneralUtils from '../utils/general_utils';
|
||||
|
||||
let TableColumnMixin = {
|
||||
/**
|
||||
* Generates the bootstrap grid column declarations automatically using
|
||||
* the columnMap.
|
||||
*/
|
||||
calcColumnClasses(obj, i) {
|
||||
let bootstrapClasses = ['col-xs-', 'col-sm-', 'col-md-', 'col-lg-'];
|
||||
|
||||
let rowData = GeneralUtils.valuesOfObject(obj);
|
||||
let listOfRowValues = rowData.map((val) => val.rowWidth );
|
||||
let numOfColumns = GeneralUtils.sumNumList(listOfRowValues);
|
||||
|
||||
if(numOfColumns > 12) {
|
||||
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];
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
export default TableColumnMixin;
|
||||
|
|
@ -3,12 +3,12 @@ import PieceListActions from '../actions/piece_list_actions';
|
|||
|
||||
class PieceListStore {
|
||||
constructor() {
|
||||
this.pieceList = [];
|
||||
this.itemList = []; // rename this to pieceList after figuring out AltContainer transform
|
||||
this.bindActions(PieceListActions);
|
||||
}
|
||||
|
||||
onUpdatePieceList(pieceList) {
|
||||
this.pieceList = pieceList;
|
||||
onUpdatePieceList(itemList) {
|
||||
this.itemList = itemList;
|
||||
}
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -16,6 +16,24 @@ let GeneralUtils = {
|
|||
});
|
||||
|
||||
return obj;
|
||||
},
|
||||
|
||||
/**
|
||||
* Returns the values of an object.
|
||||
*/
|
||||
valuesOfObject(obj) {
|
||||
return Object
|
||||
.keys(obj)
|
||||
.map(key => obj[key]);
|
||||
},
|
||||
|
||||
/**
|
||||
* Sums up a list of numbers. Like a Epsilon-math-kinda-sum...
|
||||
*/
|
||||
sumNumList(l) {
|
||||
let sum = 0;
|
||||
l.forEach((num) => sum += parseFloat(num) || 0);
|
||||
return sum;
|
||||
}
|
||||
};
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue