From fb6945914cb3cc14dc6ed46976d41c3d64249efd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tim=20Daubensch=C3=BCtz?= Date: Thu, 21 May 2015 16:02:42 +0200 Subject: [PATCH] Refactor to proper TableColumnModel including model validation --- js/components/ascribe_table/table.js | 8 ++++-- js/components/ascribe_table/table_header.js | 15 +++++----- js/components/ascribe_table/table_item.js | 26 ++++++----------- js/components/piece_list.js | 31 ++++++--------------- js/mixins/table_column_mixin.js | 8 +++--- js/models/table_column_model.js | 12 ++++++++ 6 files changed, 44 insertions(+), 56 deletions(-) create mode 100644 js/models/table_column_model.js diff --git a/js/components/ascribe_table/table.js b/js/components/ascribe_table/table.js index 7565868c..721fb802 100644 --- a/js/components/ascribe_table/table.js +++ b/js/components/ascribe_table/table.js @@ -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 (
- + {this.props.itemList.map((item, i) => { return ( - + ); })}
diff --git a/js/components/ascribe_table/table_header.js b/js/components/ascribe_table/table_header.js index 38d32705..3c959f76 100644 --- a/js/components/ascribe_table/table_header.js +++ b/js/components/ascribe_table/table_header.js @@ -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 (
- {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 ( { - 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 (
- +
); diff --git a/js/components/piece_list.js b/js/components/piece_list.js index aaf05405..a414bdd2 100644 --- a/js/components/piece_list.js +++ b/js/components/piece_list.js @@ -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 ( - +
); } diff --git a/js/mixins/table_column_mixin.js b/js/mixins/table_column_mixin.js index d2bf8977..5904389d 100644 --- a/js/mixins/table_column_mixin.js +++ b/js/mixins/table_column_mixin.js @@ -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) { diff --git a/js/models/table_column_model.js b/js/models/table_column_model.js new file mode 100644 index 00000000..0a204717 --- /dev/null +++ b/js/models/table_column_model.js @@ -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; \ No newline at end of file