#189 included rows (wip)

metasfresh · Jan 19, 2017 · dab04c5 · dab04c5
1 parent 86890c5
commit dab04c5
Show file tree

Hide file tree

Showing 7 changed files with 108 additions and 47 deletions.
diff --git a/.babelrc b/.babelrc
@@ -1,3 +1,4 @@
 {
-  "presets": ["es2015", "stage-0", "react"]
+  "presets": ["es2015", "stage-0", "react"],
+  "plugins": ["react-hot-loader/babel"]
 }
diff --git a/package.json b/package.json
@@ -6,10 +6,10 @@
   },
   "devDependencies": {
     "autoprefixer": "~6.3.6",
-    "babel-core": "~6.18.2",
-    "babel-eslint": "~4.1.3",
-    "babel-loader": "~6.2.9",
-    "babel-preset-es2015": "~6.18.0",
+    "babel-core": "^6.21.0",
+    "babel-eslint": "^6.0.0-beta.6",
+    "babel-loader": "^6.2.10",
+    "babel-preset-es2015": "^6.18.0",
     "babel-preset-react": "~6.16.0",
     "babel-preset-stage-0": "~6.16.0",
     "css-loader": "~0.23.1",
@@ -23,7 +23,7 @@
     "postcss-simple-vars": "~2.0.0",
     "postcss-url": "~5.1.2",
     "precss": "~1.4.0",
-    "react-hot-loader": "~1.3.0",
+    "react-hot-loader": "~3.0.0-beta.6",
     "redux-devtools": "~3.3.1",
     "style-loader": "~0.13.1",
     "webpack": "~1.13.0",
@@ -35,15 +35,15 @@
     "d3": "^4.4.0",
     "file-loader": "~0.8.5",
     "moment": "~2.16.0",
-    "react": "~15.3.1",
+    "react": "~15.4.2",
     "react-addons-css-transition-group": "~15.3.1",
     "react-addons-update": "~15.3.1",
     "react-bootstrap-daterangepicker": "~3.2.2",
     "react-datetime": "2.7.2",
     "react-debounce-input": "~2.4.0",
     "react-dnd": "~2.1.4",
     "react-dnd-html5-backend": "~2.1.2",
-    "react-dom": "~15.3.1",
+    "react-dom": "~15.4.2",
     "react-onclickoutside": "~5.3.3",
     "react-redux": "~4.4.5",
     "react-router": "~2.5.1",

diff --git a/src/components/table/Table.js b/src/components/table/Table.js
@@ -16,10 +16,10 @@ import {
 import Prompt from '../app/Prompt';
 
 import TableFilter from './TableFilter';
+import TableItemWrapper from './TableItemWrapper';
 import TablePagination from './TablePagination';
 import TableHeader from './TableHeader';
 import TableContextMenu from './TableContextMenu';
-import TableItem from './TableItem';
 import MasterWidget from '../widget/MasterWidget';
 
 import keymap from '../../keymap.js';
@@ -416,27 +416,27 @@ class Table extends Component {
             for(let i=0; i < keys.length; i++) {
                 const key = keys[i];
                 const index = keyProperty ? keyProperty : "rowId";
+                const included = item[key].includedDocuments;
                 ret.push(
-                    <TableItem
-                        entity={entity}
-                        fields={item[key].fields}
-                        includedDocuments={item[key].includedDocuments}
+                    <TableItemWrapper
+                        included={included}
                         key={i}
-                        rowId={item[key].rowId}
+                        item={item[key]}
+                        entity={entity}
                         tabId={tabid}
                         cols={cols}
                         type={type}
                         docId={docId}
+                        tabIndex={tabIndex}
+                        readonly={readonly}
+                        mainTable={mainTable}
                         isSelected={selected.indexOf(item[key][index]) > -1}
                         onDoubleClick={() => onDoubleClick && onDoubleClick(item[key][index])}
                         onMouseDown={(e) => this.handleClick(e, item[key][index])}
                         onContextMenu={(e) => this.handleRightClick(e, item[key][index])}
                         changeListenOnTrue={() => this.changeListenOnTrue()}
                         changeListenOnFalse={() => this.changeListenOnFalse()}
-                        readonly={readonly}
-                        mainTable={mainTable}
                         newRow={i === keys.length-1 ? newRow : false}
-                        tabIndex={tabIndex}
                     />
                 );
             }
@@ -593,11 +593,7 @@ class Table extends Component {
                                     page={page}
                                 />
                             </thead>
-                            <tbody
-                                ref={c => this.tbody = c}
-                            >
-                                {this.renderTableBody()}
-                            </tbody>
+                            {this.renderTableBody()}
                             <tfoot
                                 ref={c => this.tfoot = c}
                                 tabIndex={tabIndex}
@@ -607,20 +603,22 @@ class Table extends Component {
                         {this.renderEmptyInfo(rowData, tabid)}
                     </div>
                 </div>
-                {page && pageLength && <div className="row">
-                    <div className="col-xs-12">
-                        <TablePagination
-                            handleChangePage={handleChangePage}
-                            handleSelectAll={this.selectAll}
-                            pageLength={pageLength}
-                            size={size}
-                            selected={selected}
-                            page={page}
-                            orderBy={orderBy}
-                            deselect={this.deselectAllProducts}
-                        />
+                {page && pageLength &&
+                    <div className="row">
+                        <div className="col-xs-12">
+                            <TablePagination
+                                handleChangePage={handleChangePage}
+                                handleSelectAll={this.selectAll}
+                                pageLength={pageLength}
+                                size={size}
+                                selected={selected}
+                                page={page}
+                                orderBy={orderBy}
+                                deselect={this.deselectAllProducts}
+                            />
+                        </div>
                     </div>
-                </div>}
+                }
                 {
                     promptOpen &&
                     <Prompt
@@ -637,12 +635,12 @@ class Table extends Component {
                     handleDelete={selected.length > 0 ? () => this.handleDelete() : ''}
                 />
 
-            {!readonly &&
-                <TableContextShortcuts
-                    handleToggleQuickInput={this.handleBatchEntryToggle}
-                    handleToggleExpand={() => toggleFullScreen(!fullScreen)}
-                />
-            }
+                {!readonly &&
+                    <TableContextShortcuts
+                        handleToggleQuickInput={this.handleBatchEntryToggle}
+                        handleToggleExpand={() => toggleFullScreen(!fullScreen)}
+                    />
+                }
             </div>
         )
     }

diff --git a/src/components/table/TableItem.js b/src/components/table/TableItem.js
@@ -123,13 +123,11 @@ class TableItem extends Component {
         )
     }
 
-
-
     render() {
         const {
             isSelected, fields, selectedProducts, onContextMenu, rowId, cols,
-            onMouseDown, onDoubleClick, includedDocuments, tabid, type, docId,
-            tabIndex, mainTable
+            onMouseDown, onDoubleClick, included, tabid, type, docId,
+            tabIndex, mainTable, entity, readonly
         } = this.props;
 
 
@@ -148,6 +146,30 @@ class TableItem extends Component {
     }
 }
 
+// {included && included.map((item, index) =>
+//     <TableItem
+//         entity={entity}
+//         fields={item.fields}
+//         key={index + item.rowId}
+//         rowId={item.rowId}
+//         tabId={tabid}
+//         cols={cols}
+//         type={type}
+//         docId={docId}
+//         isSelected={false}
+//         onDoubleClick={null}
+//         onMouseDown={null}
+//         onContextMenu={null}
+//         changeListenOnTrue={null}
+//         changeListenOnFalse={null}
+//         readonly={readonly}
+//         mainTable={mainTable}
+//         newRow={false}
+//         tabIndex={tabIndex}
+//         included={item.includedDocuments}
+//     />
+// )}
+
 TableItem.propTypes = {
     dispatch: PropTypes.func.isRequired
 };

diff --git a/src/components/table/TableItemWrapper.js b/src/components/table/TableItemWrapper.js
@@ -0,0 +1,40 @@
+import React, { Component, PropTypes } from 'react';
+import TableItem from './TableItem';
+
+class TableItemWrapper extends Component {
+    constructor(props){
+        super(props);
+    }
+    render() {
+        const {
+            included, item, entity, tabid, cols, type, docId, isSelected, onDoubleClick,
+            handleClick, handleRightClick, changeListenOnTrue, changeListenOnFalse,
+            newRow, tabIndex, readonly, mainTable
+        } = this.props;
+
+        return (
+            <tbody>
+                <TableItem
+                    entity={entity}
+                    fields={item.fields}
+                    rowId={item.rowId}
+                    tabId={tabid}
+                    cols={cols}
+                    type={type}
+                    docId={docId}
+                    tabIndex={tabIndex}
+                    readonly={readonly}
+                    mainTable={mainTable}
+                    isSelected={isSelected}
+                    onDoubleClick={() => onDoubleClick && onDoubleClick()}
+                    onMouseDown={(e) => handleClick && handleClick(e)}
+                    onContextMenu={(e) => handleRightClick && handleRightClick(e)}
+                    changeListenOnTrue={() => changeListenOnTrue && changeListenOnTrue()}
+                    changeListenOnFalse={() => changeListenOnFalse && changeListenOnFalse()}
+                    newRow={newRow}
+                />
+            </tbody>
+        );
+    }
+}
+export default TableItemWrapper;
diff --git a/webpack.config.js b/webpack.config.js
@@ -24,7 +24,7 @@ module.exports = {
     module: {
         loaders: [{
             test: /\.jsx?$/,
-            loaders: ['react-hot', 'babel'],
+            loaders: ['babel'],
             include: path.join(__dirname, 'src')
         }, {
             test: /\.(jpg|png|svg|eot|woff|woff2|ttf|gif)$/,

diff --git a/webpack.prod.js b/webpack.prod.js
@@ -26,7 +26,7 @@ module.exports = {
     module: {
         loaders: [{
             test: /\.jsx?$/,
-            loaders: ['react-hot', 'babel'],
+            loaders: ['babel'],
             include: path.join(__dirname, 'src')
         }, {
             test: /\.(jpg|png|svg|eot|woff|woff2|ttf|gif)$/,