#29 Display open orders for all outcomes

src/modules/market/components/market-page.jsx

@@ -75,15 +75,12 @@ export default class MarketPage extends Component {
 					);
 				}
 
-				if (p.market.openOrders && p.market.openOrders.items.length > 0) {
-					nodes.push(
-						<OpenOrders
-							key="open-orders"
-							onCancelOrder={p.market.onCancelOrder}
-							openOrders={p.market.openOrders}
-						/>
-					);
-				}
+				nodes.push(
+					<OpenOrders
+						key="open-orders"
+						outcomes={p.market.outcomes}
+					/>
+				);
 
 				// chart
 				nodes.push(

src/modules/market/components/open-orders.jsx

@@ -1,56 +1,30 @@
 import React from 'react';
 
-import OpenOrder from '../../open-orders/components/open-order';
+import OpenOrdersGroup from '../../open-orders/components/open-orders-group';
 
 const OpenOrders = (p) => (
 	<div className="open-orders">
-		<table>
-			<tbody>
-				<tr>
-					<th>Type</th>
-					<th>Shares</th>
-					<th>Price</th>
-					<th>Matched</th>
-					<th>Unmatched</th>
-					<th>&nbsp;</th>
-				</tr>
-				{
-					p.openOrders.items.map(openOrder => (
-						<OpenOrder
-							key={openOrder.id}
-							{...openOrder}
-							onCancelOrder={p.openOrders.onCancelOrder}
+		<h2>Open orders</h2>
+		{
+			p.outcomes.map(outcome => {
+				if (outcome.openOrders.items.length > 0) {
+					return (
+						<OpenOrdersGroup
+							key={outcome.id}
+							name={outcome.name}
+							openOrders={outcome.openOrders}
 						/>
-						)
 					)
+				} else {
+					return (<div>No open orders</div>);
 				}
-			</tbody>
-			<tfoot>
-				{
-					p.openOrders.items.length > 0 &&
-						<button className="button" onClick={(event) => { p.openOrders.onCancelAllOrders(); }}>
-							Cancel all
-						</button>
-				}
-				{
-					p.openOrders.bidsCount > 0 &&
-						<button className="button" onClick={(event) => { p.openOrders.onCancelAllBids(); }}>
-							Cancel all bids
-						</button>
-				}
-				{
-					p.openOrders.asksCount > 0 &&
-						<button className="button" onClick={(event) => { p.openOrders.onCancelAllAsks(); }}>
-							Cancel all asks
-						</button>
-				}
-			</tfoot>
-		</table>
+			})
+		}
 	</div>
 );
 
 OpenOrders.propTypes = {
-	openOrders: React.PropTypes.object
+	outcomes: React.PropTypes.array
 };
 
 export default OpenOrders;

src/modules/open-orders/components/open-order.jsx

@@ -43,7 +43,8 @@ OpenOrder.propTypes = {
 	avgPrice: React.PropTypes.object,
 	matchedShares: React.PropTypes.object,
 	unmatchedShares: React.PropTypes.object,
-	isCancelling: React.PropTypes.bool
+	isCancelling: React.PropTypes.bool,
+	onCancelOrder: React.PropTypes.func
 };
 
 export default OpenOrder;

src/modules/open-orders/components/open-orders-group.jsx

@@ -0,0 +1,80 @@
+/*
+ * Author: priecint
+ */
+
+import React from 'react';
+
+import Collapse from '../../common/components/collapse';
+import Clickable from '../../common/components/clickable';
+
+import OpenOrder from '../../open-orders/components/open-order';
+
+const OpenOrdersGroup = (p) => (
+	<div>
+		<Clickable component="h3" onClick={(event) => p.openOrders.toggleGroupOpen()}>
+			{p.name}
+		</Clickable>
+
+		<Collapse isOpen={p.openOrders.isMarketOpenOrdersOpen}>
+			<table>
+				<tbody>
+					<tr>
+						<th>Type</th>
+						<th>Shares</th>
+						<th>Price</th>
+						<th>Matched</th>
+						<th>Unmatched</th>
+						<th>&nbsp;</th>
+					</tr>
+					{
+						p.openOrders.items.map(openOrder => (
+								<OpenOrder
+									key={openOrder.id}
+									{...openOrder}
+									onCancelOrder={p.openOrders.onCancelOrder}
+								/>
+							)
+						)
+					}
+				</tbody>
+				<tfoot>
+					<tr>
+						<td colSpan="5">
+							{
+								p.openOrders.items.length > 0 &&
+								<button className="button" onClick={(event) => {
+									p.openOrders.onCancelAllOrders();
+								}}>
+									Cancel all
+								</button>
+							}
+							{
+								p.openOrders.bidsCount > 0 &&
+								<button className="button" onClick={(event) => {
+									p.openOrders.onCancelAllBids();
+								}}>
+									Cancel all bids
+								</button>
+							}
+							{
+								p.openOrders.asksCount > 0 &&
+								<button className="button" onClick={(event) => {
+									p.openOrders.onCancelAllAsks();
+								}}>
+									Cancel all asks
+								</button>
+							}
+						</td>
+					</tr>
+				</tfoot>
+			</table>
+		</Collapse>
+	</div>
+);
+
+OpenOrdersGroup.propTypes = {
+	openOrders: React.PropTypes.object,
+	name: React.PropTypes.string
+};
+
+export default OpenOrdersGroup;

src/modules/open-orders/less/open-order.less

@@ -1,8 +1,17 @@
+.market {
+  .open-orders {
+    padding: 4vmin 6vmin;
+  }
 
-.open-order:not(:hover) .cancel-order-action {
-  display: none;
-}
+  .open-order {
+    height: 27px; // same height as when action is visible
+  }
+
+  .open-order:not(:hover) .cancel-order-action {
+    display: none;
+  }
 
-.open-order.isCancelling {
-  text-decoration: line-through;
-}
+  .open-order.isCancelling {
+    text-decoration: line-through;
+  }
+}

src/selectors/markets.js

@@ -36,7 +36,7 @@ function makeMarkets(numMarkets = 25) {
 			makerFeePercent: makeNumber(randomInt(1, 5), '%', true),
 			volume: makeNumber(randomInt(0, 10000), 'shares', true),
 			isOpen: Math.random() > 0.1,
-			isPendingReport: Math.random() < 0.5,
+			isPendingReport: Math.random() < 0.1,
 			marketLink: {
 				text: 'Trade',
 				className: 'trade',
@@ -55,6 +55,8 @@ function makeMarkets(numMarkets = 25) {
 		// outcomes
 		m.outcomes = makeOutcomes();
 
+		m.openOrdersOutcomes = m.outcomes.slice();
+
 		// reportable outcomes
 		m.reportableOutcomes = m.outcomes.slice();
 		m.reportableOutcomes.push({ id: '1.5', name: 'indeterminate' });
@@ -129,62 +131,6 @@ function makeMarkets(numMarkets = 25) {
 			}
 		];
 
-		m.openOrders = {
-			onCancelOrder: (orderId) => {
-				console.log('cancelling order %o', orderId);
-				setTimeout(() => {
-					require('../selectors').market.openOrders.items.find(openOrder => openOrder.id === orderId).isCancelling = true;
-					require('../selectors').update({});
-					setTimeout(() => {
-						const index = require('../selectors').market.openOrders.items.findIndex(openOrder => openOrder.id === orderId);
-						require('../selectors').market.openOrders.items.splice(index, 1);
-						require('../selectors').update({});
-					}, 2000);
-				}, 1);
-			},
-			onCancelAllOrders: () => {
-				console.log('todo: onCancelAllOrders');
-			},
-			onCancelAllBids: () => {
-				console.log('todo: onCancelAllBids');
-			},
-			onCancelAllAsks: () => {
-				console.log('todo: onCancelAllAsks');
-			},
-			bidsCount: 2,
-			asksCount: 1,
-			items: [{
-				id: 'order1',
-				type: 'sell',
-				originalShares: makeNumber(5, 'shares'),
-				avgPrice: makeNumber(0.7, 'ether'),
-				matchedShares: makeNumber(3, 'shares'),
-				unmatchedShares: makeNumber(2, 'shares'),
-				outcome: 'outcomeasdf123',
-				owner: '0x45a153fdd97836c2b349a5f53970dc44b0ef1efa'
-			},
-			{
-				id: 'order2',
-				type: 'buy',
-				originalShares: makeNumber(5, 'shares'),
-				avgPrice: makeNumber(0.7, 'ether'),
-				matchedShares: makeNumber(3, 'shares'),
-				unmatchedShares: makeNumber(2, 'shares'),
-				outcome: 'outcomeasdf123',
-				owner: '0x45a153fdd97836c2b349a5f53970dc44b0ef1efa'
-			},
-			{
-				id: 'order3',
-				type: 'buy',
-				originalShares: makeNumber(5, 'shares'),
-				avgPrice: makeNumber(0.7, 'ether'),
-				matchedShares: makeNumber(3, 'shares'),
-				unmatchedShares: makeNumber(2, 'shares'),
-				outcome: 'outcomeasdf123',
-				owner: '0x45a153fdd97836c2b349a5f53970dc44b0ef1efa'
-			}]
-		};
-
 		// positions summary
 		m.positionsSummary = {
 			numPositions: makeNumber(3, 'Positions', true),
@@ -361,6 +307,69 @@ function makeMarkets(numMarkets = 25) {
 					orderBook
 				};
 
+				outcome.openOrders = {
+					isMarketOpenOrdersOpen: false,
+					bidsCount: 2,
+					asksCount: 1,
+					items: [
+						{
+							id: 'order1',
+							type: 'sell',
+							originalShares: makeNumber(5, 'shares'),
+							avgPrice: makeNumber(0.7, 'ether'),
+							matchedShares: makeNumber(3, 'shares'),
+							unmatchedShares: makeNumber(2, 'shares'),
+							outcome: 'outcomeasdf123',
+							owner: '0x45a153fdd97836c2b349a5f53970dc44b0ef1efa'
+						},
+						{
+							id: 'order2',
+							type: 'buy',
+							originalShares: makeNumber(5, 'shares'),
+							avgPrice: makeNumber(0.7, 'ether'),
+							matchedShares: makeNumber(3, 'shares'),
+							unmatchedShares: makeNumber(2, 'shares'),
+							outcome: 'outcomeasdf123',
+							owner: '0x45a153fdd97836c2b349a5f53970dc44b0ef1efa'
+						},
+						{
+							id: 'order3',
+							type: 'buy',
+							originalShares: makeNumber(5, 'shares'),
+							avgPrice: makeNumber(0.7, 'ether'),
+							matchedShares: makeNumber(3, 'shares'),
+							unmatchedShares: makeNumber(2, 'shares'),
+							outcome: 'outcomeasdf123',
+							owner: '0x45a153fdd97836c2b349a5f53970dc44b0ef1efa'
+						}
+					],
+					toggleGroupOpen: () => {
+						outcome.openOrders.isMarketOpenOrdersOpen = !outcome.openOrders.isMarketOpenOrdersOpen;
+						require('../selectors').update({});
+					},
+					onCancelOrder: (orderId) => {
+						console.log('cancelling order %o', orderId);
+						setTimeout(() => {
+							outcome.openOrders.items.find(openOrder => openOrder.id === orderId).isCancelling = true;
+							require('../selectors').update({});
+							setTimeout(() => {
+								const index = outcome.openOrders.items.findIndex(openOrder => openOrder.id === orderId);
+								outcome.openOrders.items.splice(index, 1);
+								require('../selectors').update({});
+							}, 2000);
+						}, 1);
+					},
+					onCancelAllOrders: () => {
+						console.log('todo: onCancelAllOrders in outcome %o', outcome.id);
+					},
+					onCancelAllBids: () => {
+						console.log('todo: onCancelAllBids in outcome %o', outcome.id);
+					},
+					onCancelAllAsks: () => {
+						console.log('todo: onCancelAllAsks in outcome %o', outcome.id);
+					}
+				};
+
 				return outcome;
 
 				function makeName(index) {