diff --git a/js/components/ascribe_app.js b/js/components/ascribe_app.js index 7d19c1b0..bab7de97 100644 --- a/js/components/ascribe_app.js +++ b/js/components/ascribe_app.js @@ -11,9 +11,6 @@ let AscribeApp = React.createClass({ return (
-
); diff --git a/js/components/table.js b/js/components/ascribe_table/table.js similarity index 58% rename from js/components/table.js rename to js/components/ascribe_table/table.js index 7565868c..721fb802 100644 --- a/js/components/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 new file mode 100644 index 00000000..3c959f76 --- /dev/null +++ b/js/components/ascribe_table/table_header.js @@ -0,0 +1,50 @@ +import React from 'react'; + +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: { + columnList: React.PropTypes.arrayOf(React.PropTypes.instanceOf(TableColumnModel)), + itemList: React.PropTypes.array.isRequired, + fetchList: React.PropTypes.func.isRequired, + orderAsc: React.PropTypes.bool.isRequired, + orderBy: React.PropTypes.string.isRequired + }, + + render() { + return ( +
+
+ {this.props.columnList.map((val, i) => { + + let columnClasses = this.calcColumnClasses(this.props.columnList, i); + let columnName = this.props.columnList[i].columnName; + let canBeOrdered = this.props.columnList[i].canBeOrdered; + + return ( + + + ); + })} +
+
+ ); + + } +}); + +export default TableHeader; diff --git a/js/components/ascribe_table/table_header_item.js b/js/components/ascribe_table/table_header_item.js new file mode 100644 index 00000000..d918f6e3 --- /dev/null +++ b/js/components/ascribe_table/table_header_item.js @@ -0,0 +1,52 @@ +import React from 'react'; + +import TableHeaderItemCarret from './table_header_item_carret'; + +let TableHeaderItem = React.createClass({ + + propTypes: { + columnClasses: React.PropTypes.string.isRequired, + displayName: React.PropTypes.string.isRequired, + columnName: React.PropTypes.string.isRequired, + canBeOrdered: React.PropTypes.bool.isRequired, + orderAsc: React.PropTypes.bool.isRequired, + orderBy: React.PropTypes.string.isRequired, + fetchList: React.PropTypes.func.isRequired + }, + + changeOrder() { + this.props.fetchList(1, 10, null, this.props.columnName, !this.props.orderAsc); + }, + + render() { + if(this.props.canBeOrdered) { + if(this.props.columnName === this.props.orderBy) { + return ( +
+ {this.props.displayName} +
+ ); + } else { + return ( +
+ {this.props.displayName} +
+ ); + } + } else { + return ( +
+ + {this.props.displayName} + +
+ ); + } + } +}); + +export default TableHeaderItem; diff --git a/js/components/ascribe_table/table_header_item_carret.js b/js/components/ascribe_table/table_header_item_carret.js new file mode 100644 index 00000000..8d33eb75 --- /dev/null +++ b/js/components/ascribe_table/table_header_item_carret.js @@ -0,0 +1,24 @@ +import React from 'react'; + +let TableHeaderItemCarret = React.createClass({ + propTypes: { + orderAsc: React.PropTypes.bool.isRequired + }, + + render() { + let carretDirection = 'glyphicon-triangle-'; + + if(this.props.orderAsc) { + carretDirection += 'top'; + } else { + carretDirection += 'bottom'; + } + + return ( + + + ); + } +}); + +export default TableHeaderItemCarret; \ No newline at end of file diff --git a/js/components/table_item.js b/js/components/ascribe_table/table_item.js similarity index 60% rename from js/components/table_item.js rename to js/components/ascribe_table/table_item.js index 41a40d11..97181450 100644 --- a/js/components/table_item.js +++ b/js/components/ascribe_table/table_item.js @@ -1,44 +1,34 @@ 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'; + 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); + render() { /** * 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 (
- +
); diff --git a/js/components/table_item_img.js b/js/components/ascribe_table/table_item_img.js similarity index 100% rename from js/components/table_item_img.js rename to js/components/ascribe_table/table_item_img.js diff --git a/js/components/table_item_text.js b/js/components/ascribe_table/table_item_text.js similarity index 100% rename from js/components/table_item_text.js rename to js/components/ascribe_table/table_item_text.js diff --git a/js/components/header.js b/js/components/header.js index c7ad3965..f191c04c 100644 --- a/js/components/header.js +++ b/js/components/header.js @@ -1,8 +1,11 @@ import React from 'react'; +import Router from 'react-router'; + import AltContainer from 'alt/AltContainer'; import UserActions from '../actions/user_actions'; import UserStore from '../stores/user_store'; +let Link = Router.Link; let Header = React.createClass({ @@ -22,37 +25,43 @@ let Header = React.createClass({ render() { return ( - ) + ); } }); diff --git a/js/components/piece_list.js b/js/components/piece_list.js index 2b3de95d..504e7909 100644 --- a/js/components/piece_list.js +++ b/js/components/piece_list.js @@ -5,9 +5,12 @@ 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'; +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'; + import Pagination from './pagination' let Link = Router.Link; @@ -27,32 +30,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/components/table_header.js b/js/components/table_header.js deleted file mode 100644 index 8754e477..00000000 --- a/js/components/table_header.js +++ /dev/null @@ -1,86 +0,0 @@ -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, - itemList: React.PropTypes.array.isRequired, - fetchList: React.PropTypes.func.isRequired, - orderAsc: React.PropTypes.bool.isRequired, - orderBy: React.PropTypes.string.isRequired - }, - - sortIndex(i) { - - let orderAsc; - - if(this.props.orderAsc) { - orderAsc = false; - } else { - orderAsc = true; - } - - this.props.fetchList(1, 10, null, Object.keys(this.props.columnMap)[i], orderAsc); - }, - - render() { - - let columnMapValuesList = GeneralUtils.valuesOfObject(this.props.columnMap); - - let calcHeaderText = (val, i, columnClass) => { - - if(columnMapValuesList[i].canBeOrdered && Object.keys(this.props.columnMap)[i] === this.props.orderBy) { - - let boundClick = this.sortIndex.bind(this, i); - let carretDirection = 'glyphicon-triangle-'; - - if(this.props.orderAsc) { - carretDirection += 'top'; - } else { - carretDirection += 'bottom'; - } - - return ( -
- - {val.displayName} - - -
- ); - } else { - return ( -
- - {val.displayName} - -
- ); - } - }; - - return ( -
-
- {columnMapValuesList.map((val, i) => { - - let columnClass = this.calcColumnClasses(this.props.columnMap, i); - - return ( -
- {calcHeaderText(val, i, columnClass)} -
- ); - })} -
-
- ); - - } -}); - -export default TableHeader; diff --git a/js/components/table_header_item.js b/js/components/table_header_item.js deleted file mode 100644 index d566975c..00000000 --- a/js/components/table_header_item.js +++ /dev/null @@ -1,9 +0,0 @@ -import React from 'react'; - - -let TableHeaderItem = React.createClass({ - mixins: [TableColumnMixin], - render() { - 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