From d46b7f67dd017036cc7ecb86c88f3beb5bb67e50 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tim=20Daubensch=C3=BCtz?= <tim@ascribe.io>
Date: Wed, 20 May 2015 15:22:29 +0200
Subject: [PATCH] introduce generic table types

---
 js/components/piece_list.js      | 18 ++++++++++++++---
 js/components/table_header.js    |  2 +-
 js/components/table_item.js      | 33 +++++++++++++++++++++++++-------
 js/components/table_item_img.js  | 20 +++++++++++++++++++
 js/components/table_item_text.js | 17 ++++++++++++++++
 5 files changed, 79 insertions(+), 11 deletions(-)
 create mode 100644 js/components/table_item_img.js
 create mode 100644 js/components/table_item_text.js

diff --git a/js/components/piece_list.js b/js/components/piece_list.js
index 522ecebc..8ce82fca 100644
--- a/js/components/piece_list.js
+++ b/js/components/piece_list.js
@@ -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;
 
@@ -17,9 +20,18 @@ let PieceList = React.createClass({
     render() {
 
         let columnMap = {
-            'thumbnail': 'Thumbnail',
-            'artist_name': 'Artist',
-            'title': 'Title'
+            'thumbnail': {
+                'display_name': 'thumbnail',
+                'display_type': TableItemImg
+            },
+            'artist_name': {
+                'display_name': 'Artist',
+                'display_type': TableItemText
+            },
+            'title': {
+                'display_name': 'Title',
+                'display_type': TableItemText
+            }
         };
 
         return (
diff --git a/js/components/table_header.js b/js/components/table_header.js
index 9f8d8ea3..c1a22ef3 100644
--- a/js/components/table_header.js
+++ b/js/components/table_header.js
@@ -20,7 +20,7 @@ let TableHeader = React.createClass({
                     {columnMapValuesList.map((val, i) => {
                         return (
                             <div className={columnClasses} key={i}>
-                                {val}
+                                {val.display_name}
                             </div>
                         );
                     })}
diff --git a/js/components/table_item.js b/js/components/table_item.js
index cfda35f2..415a444b 100644
--- a/js/components/table_item.js
+++ b/js/components/table_item.js
@@ -1,6 +1,8 @@
 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],
@@ -14,16 +16,33 @@ let TableItem = React.createClass({
         let columnClasses = this.calcColumnClasses(this.props.columnMap);
         let columnMapKeysList = Object.keys(this.props.columnMap);
 
+        /**
+         * An element in the Table can have a certain display_type.
+         * For example it can be an Image or a text, or a button.
+         * This method is recognizing different types and injecting them into the DOM.
+         */
+        let calcColumnElementContent = () => {
+            return columnMapKeysList.map((key, i) => {
+                if(this.props.columnMap[key].display_type === TableItemImg) {
+                    return (
+                        <div className={columnClasses}>
+                            <TableItemImg src={this.props.columnContent[key]} width="50" key={i} />
+                        </div>
+                    );
+                } else if(this.props.columnMap[key].display_type === TableItemText) {
+                    return (
+                        <div className={columnClasses}>
+                            <TableItemText text={this.props.columnContent[key]} key={i} />
+                        </div>
+                    );
+                }
+            });
+        };
+
         return (
             <div className="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                 <div className="row">
-                    {columnMapKeysList.map((key, i) => {
-                        return (
-                            <div className={columnClasses} key={i}>
-                                {columnContent[key]}
-                            </div>
-                        );
-                    })}
+                    {calcColumnElementContent()}
                 </div>
             </div> 
         );
diff --git a/js/components/table_item_img.js b/js/components/table_item_img.js
new file mode 100644
index 00000000..f62d3afa
--- /dev/null
+++ b/js/components/table_item_img.js
@@ -0,0 +1,20 @@
+import React from 'react';
+
+/**
+ * This could be enhanced further by specifying an optional description for example
+ */
+let TableItemImg = React.createClass({
+    propTypes: {
+        src: React.PropTypes.string.isRequired,
+        width: React.PropTypes.number,
+        height: React.PropTypes.number
+    },
+
+    render() {
+        return (
+            <img src={this.props.src} width={this.props.width} height={this.props.height} />
+        );
+    }
+});
+
+export default TableItemImg;
\ No newline at end of file
diff --git a/js/components/table_item_text.js b/js/components/table_item_text.js
new file mode 100644
index 00000000..0fad7b7f
--- /dev/null
+++ b/js/components/table_item_text.js
@@ -0,0 +1,17 @@
+import React from 'react';
+
+let TableItemText = React.createClass({
+    propTypes: {
+        text: React.PropTypes.string.isRequired
+    },
+
+    render() {
+        return (
+            <span>
+                {this.props.text}
+            </span>
+        );
+    }
+});
+
+export default TableItemText;
\ No newline at end of file