#189 included rows (wip) #2

metasfresh · Jan 20, 2017 · 5254028 · 5254028
1 parent dab04c5
commit 5254028
Show file tree

Hide file tree

Showing 12 changed files with 98 additions and 59 deletions.
diff --git a/src/actions/MenuActions.js b/src/actions/MenuActions.js
@@ -117,11 +117,11 @@ export function getWindowBreadcrumb(id){
 
 // UTILITIES
 
-export function flattenLastElem(node) {
+export function flattenLastElem(node, prop = "children") {
     let result = [];
 
-    if(!!node.children){
-        node.children.map(child => {
+    if(!!node[prop]){
+        node[prop].map(child => {
             const flat = flattenLastElem(child);
 
             if(typeof flat === "object"){

diff --git a/src/assets/css/font-meta.css b/src/assets/css/font-meta.css
@@ -179,3 +179,12 @@
 .meta-icon-collapse:before {
   content: "\55";
 }
+.meta-icon-package:before {
+  content: "\56";
+}
+.meta-icon-palette:before {
+  content: "\57";
+}
+.meta-icon-product:before {
+  content: "\58";
+}
diff --git a/src/assets/css/fonts/meta.eot b/src/assets/css/fonts/meta.eot
diff --git a/src/assets/css/fonts/meta.svg b/src/assets/css/fonts/meta.svg
diff --git a/src/assets/css/fonts/meta.ttf b/src/assets/css/fonts/meta.ttf
diff --git a/src/assets/css/fonts/meta.woff b/src/assets/css/fonts/meta.woff
diff --git a/src/assets/css/styles.css b/src/assets/css/styles.css
@@ -803,4 +803,3 @@ td.pulse-off input {
     font-size: .75rem;
     color: $brand-font-color-weak;
 }
-
diff --git a/src/assets/css/table.css b/src/assets/css/table.css
@@ -252,3 +252,8 @@ th {
 .pagination-link {
     text-decoration: underline;
 }
+
+.table.table-bordered-vertically td.indent {
+    min-width:0;
+    border-right:0;
+}
diff --git a/src/components/table/Table.js b/src/components/table/Table.js
@@ -64,15 +64,9 @@ class Table extends Component {
         }
     }
 
-    changeListenOnTrue = () => {
+    changeListen = (listenOnKeys) => {
         this.setState(Object.assign({}, this.state, {
-            listenOnKeys: true
-        }))
-    }
-
-    changeListenOnFalse = () => {
-        this.setState(Object.assign({}, this.state, {
-            listenOnKeys: false
+            listenOnKeys: !!listenOnKeys
         }))
     }
 
@@ -417,6 +411,7 @@ class Table extends Component {
                 const key = keys[i];
                 const index = keyProperty ? keyProperty : "rowId";
                 const included = item[key].includedDocuments;
+
                 ret.push(
                     <TableItemWrapper
                         included={included}
@@ -432,10 +427,10 @@ class Table extends Component {
                         mainTable={mainTable}
                         isSelected={selected.indexOf(item[key][index]) > -1}
                         onDoubleClick={() => onDoubleClick && onDoubleClick(item[key][index])}
-                        onMouseDown={(e) => this.handleClick(e, item[key][index])}
+                        handleClick={(e) => this.handleClick(e, item[key][index])}
                         onContextMenu={(e) => this.handleRightClick(e, item[key][index])}
-                        changeListenOnTrue={() => this.changeListenOnTrue()}
-                        changeListenOnFalse={() => this.changeListenOnFalse()}
+                        changeListenOnTrue={() => this.changeListen(true)}
+                        changeListenOnFalse={() => this.changeListen(false)}
                         newRow={i === keys.length-1 ? newRow : false}
                     />
                 );

diff --git a/src/components/table/TableHeader.js b/src/components/table/TableHeader.js
@@ -55,6 +55,9 @@ class TableHeader extends Component {
         const {cols, mainTable} = this.props;
         return (
             <tr>
+                <th
+                    className="indent"
+                />
                 {this.renderCols(cols, mainTable)}
             </tr>
         )

diff --git a/src/components/table/TableItem.js b/src/components/table/TableItem.js
@@ -127,9 +127,10 @@ class TableItem extends Component {
         const {
             isSelected, fields, selectedProducts, onContextMenu, rowId, cols,
             onMouseDown, onDoubleClick, included, tabid, type, docId,
-            tabIndex, mainTable, entity, readonly
+            tabIndex, mainTable, entity, readonly, indent
         } = this.props;
 
+        const huType = findRowByPropName(fields, "HU_UnitType").value;
 
         return (
             <tr
@@ -140,36 +141,20 @@ class TableItem extends Component {
                     (isSelected ? "row-selected" : "")
                 }
             >
+                <td
+                    className="indent"
+                    style={{paddingLeft: (indent * 10 + 10) + "px"}}
+                >
+                    {huType == "LU" && <i className="meta-icon-palette"/>}
+                    {huType == "TU" && <i className="meta-icon-package"/>}
+                    {huType == "V" && <i className="meta-icon-product"/>}
+                </td>
                 {this.renderCells(cols, fields)}
             </tr>
         );
     }
 }
 
-// {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
@@ -1,38 +1,78 @@
 import React, { Component, PropTypes } from 'react';
 import TableItem from './TableItem';
+import update from 'react-addons-update';
+
+import {flattenLastElem} from '../../actions/MenuActions';
 
 class TableItemWrapper extends Component {
     constructor(props){
         super(props);
+
+        this.state = {
+            rows: []
+        }
+    }
+
+    componentDidMount(){
+        const {item} = this.props;
+        this.setState(Object.assign({}, this.state, {
+            rows: this.mapIncluded(item)
+        }))
+    }
+
+    mapIncluded = (node, indent) => {
+        let ind = indent ? indent : 0;
+        let result = [];
+
+        const nodeCopy = Object.assign({}, node, {
+            indent: ind
+        });
+
+        result = result.concat([nodeCopy]);
+
+        if(node.includedDocuments){
+            node.includedDocuments.map(item => {
+                result = result.concat(this.mapIncluded(item, ind + 1))
+            })
+        }
+
+        return result;
     }
+
     render() {
         const {
             included, item, entity, tabid, cols, type, docId, isSelected, onDoubleClick,
             handleClick, handleRightClick, changeListenOnTrue, changeListenOnFalse,
             newRow, tabIndex, readonly, mainTable
         } = this.props;
 
+        const {rows} = this.state;
+
         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}
-                />
+                {rows.map((item, index) =>
+                    <TableItem
+                        entity={entity}
+                        fields={item.fields}
+                        rowId={item.rowId}
+                        tabId={tabid}
+                        cols={cols}
+                        type={type}
+                        docId={docId}
+                        tabIndex={tabIndex}
+                        readonly={readonly}
+                        mainTable={mainTable}
+                        onDoubleClick={() => onDoubleClick && onDoubleClick()}
+                        onMouseDown={(e) => handleClick && handleClick(e)}
+                        onContextMenu={(e) => handleRightClick && handleRightClick(e)}
+                        changeListenOnTrue={() => changeListenOnTrue && changeListenOnTrue()}
+                        changeListenOnFalse={() => changeListenOnFalse && changeListenOnFalse()}
+                        newRow={newRow}
+                        isSelected={isSelected}
+                        key={index}
+                        indent={item.indent}
+                    />
+                )}
             </tbody>
         );
     }