ascribe/onion
1
0
Fork 0
mirror of https://github.com/ascribe/onion.git synced 2024-12-22 17:33:14 +01:00
Code Issues Releases Wiki Activity

Refactor to proper TableColumnModel including model validation

Browse Source
This commit is contained in:
Tim Daubenschütz 2015-05-21 16:02:42 +02:00
parent 6821f5eb34
commit fb6945914c
6 changed files with 44 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,19 +3,21 @@ import React from 'react';
import TableItem from './table_item';
import TableHeader from './table_header';
import TableColumnModel from '../../models/table_column_model';
let Table = React.createClass({
propTypes: {
columnMap: React.PropTypes.object.isRequired
columnList: React.PropTypes.arrayOf(React.PropTypes.instanceOf(TableColumnModel))
},
render() {
if(this.props.itemList && this.props.itemList.length > 0) {
return (
<div className="ascribe-table">
<TableHeader columnMap={this.props.columnMap} itemList={this.props.itemList} fetchList={this.props.fetchList} orderAsc={this.props.orderAsc} orderBy={this.props.orderBy} />
<TableHeader columnList={this.props.columnList} itemList={this.props.itemList} fetchList={this.props.fetchList} orderAsc={this.props.orderAsc} orderBy={this.props.orderBy} />
{this.props.itemList.map((item, i) => {
return (
<TableItem columnMap={this.props.columnMap} columnContent={item} key={i} />
<TableItem columnList={this.props.columnList} columnContent={item} key={i} />
);
})}
</div>

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

@ -4,11 +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';
let TableHeader = React.createClass({
mixins: [TableColumnMixin],
propTypes: {
columnMap: React.PropTypes.object.isRequired,
columnList: React.PropTypes.arrayOf(React.PropTypes.instanceOf(TableColumnModel)),
itemList: React.PropTypes.array.isRequired,
fetchList: React.PropTypes.func.isRequired,
orderAsc: React.PropTypes.bool.isRequired,
@ -16,17 +18,14 @@ let TableHeader = React.createClass({
},
render() {
let columnMapValuesList = GeneralUtils.valuesOfObject(this.props.columnMap);
return (
<div className="col-xs-12 col-sm-12 col-md-12 col-lg-12 ascribe-table-header-row">
<div className="row">
{columnMapValuesList.map((val, i) => {
{this.props.columnList.map((val, i) => {
let columnClasses = this.calcColumnClasses(this.props.columnMap, i);
let columnName = Object.keys(this.props.columnMap)[i];
let canBeOrdered = columnMapValuesList[i].canBeOrdered;
let columnClasses = this.calcColumnClasses(this.props.columnList, i);
let columnName = this.props.columnList[i].columnName;
let canBeOrdered = this.props.columnList[i].canBeOrdered;
return (
<TableHeaderItem

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

@ -4,41 +4,31 @@ 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';
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,
columnList: React.PropTypes.arrayOf(React.PropTypes.instanceOf(TableColumnModel)),
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) => {
return this.props.columnList.map((column, i) => {
let TypeElement = this.props.columnMap[key].displayType;
let columnClass = this.calcColumnClasses(this.props.columnMap, 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[key]} width="50" />
<TypeElement content={this.props.columnContent[column.columnName]} width="50" />
</div>
);

31
js/components/piece_list.js
View File

@ -9,6 +9,8 @@ import Table from './ascribe_table/table';
import TableItemImg from './ascribe_table/table_item_img';
import TableItemText from './ascribe_table/table_item_text';
import TableColumnModel from '../models/table_column_model';
let Link = Router.Link;
@ -24,32 +26,15 @@ let PieceList = React.createClass({
render() {
// TODO:
// Specifiy how a TableItemX should look like
let columnMap = {
'thumbnail': {
'displayName': '',
'displayType': TableItemImg,
'rowWidth': 2,
'canBeOrdered': false
},
'artist_name': {
'displayName': 'Artist',
'displayType': TableItemText,
'rowWidth': 4,
'canBeOrdered': true
},
'title': {
'displayName': 'Title',
'displayType': TableItemText,
'rowWidth': 4,
'canBeOrdered': true
}
};
let columnList = [
new TableColumnModel('thumbnail', '', TableItemImg, 2, false),
new TableColumnModel('artist_name', 'Artist', TableItemText, 4, true),
new TableColumnModel('title', 'Title', TableItemText, 4, true)
];
return (
<AltContainer store={PieceListStore} actions={PieceListActions}>
<Table columnMap={columnMap} />
<Table columnList={columnList} />
</AltContainer>
);
}

8
js/mixins/table_column_mixin.js
View File

@ -1,16 +1,16 @@
import GeneralUtils from '../utils/general_utils';
import React from 'react';
import GeneralUtils from '../utils/general_utils';
let TableColumnMixin = {
/**
* Generates the bootstrap grid column declarations automatically using
* the columnMap.
*/
calcColumnClasses(obj, i) {
calcColumnClasses(list, i) {
let bootstrapClasses = ['col-xs-', 'col-sm-', 'col-md-', 'col-lg-'];
let rowData = GeneralUtils.valuesOfObject(obj);
let listOfRowValues = rowData.map((val) => val.rowWidth );
let listOfRowValues = list.map((column) => column.rowWidth );
let numOfColumns = GeneralUtils.sumNumList(listOfRowValues);
if(numOfColumns > 12) {

12
js/models/table_column_model.js Normal file
View File

@ -0,0 +1,12 @@
class TableColumnItem {
constructor(columnName, displayName, displayType, rowWidth, canBeOrdered) {
this.columnName = columnName;
this.displayName = displayName;
this.displayType = displayType;
this.rowWidth = rowWidth;
this.canBeOrdered = canBeOrdered;
}
}
export default TableColumnItem;