works

.gitignore

@@ -32,3 +32,5 @@ admin/public/styles/keystone.min.css
 reports
 
 test/e2e/drivers/*
+
+yarn.lock

.travis.yml

@@ -14,28 +14,35 @@ matrix:
       script:
         - npm run test-e2e-saucelabs-group
       env:
-        - JOB=e2e GROUP=group005Fields
+        - JOB=e2e GROUP=group006Fields
     - node_js: '6'
       addons:
         sauce_connect: true
       script:
         - npm run test-e2e-saucelabs-group
       env:
-        - JOB=e2e GROUP=group004Item
+        - JOB=e2e GROUP=group005Item
     - node_js: '6'
       addons:
         sauce_connect: true
       script:
         - npm run test-e2e-saucelabs-group
       env:
-        - JOB=e2e GROUP=group003List
+        - JOB=e2e GROUP=group004List
     - node_js: '6'
       addons:
         sauce_connect: true
       script:
         - npm run test-e2e-saucelabs-group
       env:
-        - JOB=e2e GROUP=group002Home
+        - JOB=e2e GROUP=group003Home
+    - node_js: '6'
+      addons:
+        sauce_connect: true
+      script:
+        - npm run test-e2e-saucelabs-group
+      env:
+        - JOB=e2e GROUP=group002App
     - node_js: '6'
       addons:
         sauce_connect: true

admin/client/App/screens/Item/actions.js

@@ -3,9 +3,15 @@ import {
 	LOAD_DATA,
 	DATA_LOADING_SUCCESS,
 	DATA_LOADING_ERROR,
-	DELETE_ITEM,
+	DRAG_MOVE_ITEM,
+	DRAG_RESET_ITEMS,
+	LOAD_RELATIONSHIP_DATA,
 } from './constants';
 
+import {
+	loadItems,
+} from '../List/actions';
+
 /**
  * Select an item
  *
@@ -55,6 +61,23 @@ export function loadItemData () {
 	};
 }
 
+export function loadRelationshipItemData ({ columns, refList, relationship, relatedItemId }) {
+	return (dispatch, getState) => {
+		refList.loadItems({
+			columns: columns,
+			filters: [{
+				field: refList.fields[relationship.refPath],
+				value: { value: relatedItemId },
+			}],
+		}, (err, items) => {
+			// // TODO: indicate pagination & link to main list view
+			// this.setState({ items });
+			dispatch(relationshipDataLoaded(relationship.path, items));
+		});
+	};
+}
+
+
 /**
  * Called when data of the current item is loaded
  *
@@ -68,6 +91,14 @@ export function dataLoaded (data) {
 	};
 }
 
+export function relationshipDataLoaded (path, data) {
+	return {
+		type: LOAD_RELATIONSHIP_DATA,
+		relationshipPath: path,
+		data,
+	};
+};
+
 /**
  * Called when there was an error during the loading of the current item data,
  * will retry loading the data ever NETWORK_ERROR_RETRY_DELAY milliseconds
@@ -108,11 +139,57 @@ export function deleteItem (id, router) {
 			if (err) {
 				alert('Error deleting item, please try again!');
 			} else {
-				dispatch({
-					type: DELETE_ITEM,
-					id,
-				});
+				dispatch(loadItems());
 			}
 		});
 	};
 }
+
+export function reorderItems ({ columns, refList, relationship, relatedItemId, item, prevSortOrder, newSortOrder }) {
+	return (dispatch, getState) => {
+		// Send the item, previous sortOrder and the new sortOrder
+		// we should get the proper list and new page results in return
+		refList.reorderItems(
+			item,
+			prevSortOrder,
+			newSortOrder,
+			{
+				columns: columns,
+				filters: [{
+					field: refList.fields[relationship.refPath],
+					value: { value: relatedItemId },
+				}],
+			},
+			(err, items) => {
+				dispatch(relationshipDataLoaded(relationship.path, items));
+				// If err, flash the row alert
+				// if (err) {
+				// 	dispatch(resetItems(item.id));
+				// 	// return this.resetItems(this.findItemById[item.id]);
+				// } else {
+				// 	dispatch(itemsLoaded(items));
+				// 	dispatch(setRowAlert({
+				// 		success: item.id,
+				// 		fail: false,
+				// 	}));
+				// }
+			}
+		);
+	};
+}
+
+export function moveItem ({ prevIndex, newIndex, relationshipPath, newSortOrder }) {
+	return {
+		type: DRAG_MOVE_ITEM,
+		prevIndex,
+		newIndex,
+		relationshipPath,
+		newSortOrder,
+	};
+}
+
+export function resetItems () {
+	return {
+		type: DRAG_RESET_ITEMS,
+	};
+}

admin/client/App/screens/Item/components/EditForm.js

@@ -259,12 +259,6 @@ var EditForm = React.createClass({
 				if (typeof Fields[field.type] !== 'function') {
 					return React.createElement(InvalidFieldType, { type: field.type, path: field.path, key: field.path });
 				}
-				if (props.dependsOn) {
-					props.currentDependencies = {};
-					Object.keys(props.dependsOn).forEach(dep => {
-						props.currentDependencies[dep] = this.state.values[dep];
-					});
-				}
 				props.key = field.path;
 				if (index === 0 && this.state.focusFirstField) {
 					props.autoFocus = true;

admin/client/App/screens/Item/components/RelatedItemsList.js → admin/client/App/screens/Item/components/RelatedItemsList/RelatedItemsList.js

@@ -1,10 +1,18 @@
 import React from 'react';
 import { Link } from 'react-router';
-import { Columns } from 'FieldTypes';
 import { Alert, Spinner } from 'elemental';
 
+import DragDrop from './RelatedItemsListDragDrop';
+import ListRow from './RelatedItemsListRow';
+
+import { loadRelationshipItemData } from '../../actions';
+import { TABLE_CONTROL_COLUMN_WIDTH } from '../../../../../constants';
+
 const RelatedItemsList = React.createClass({
 	propTypes: {
+		dispatch: React.PropTypes.func.isRequired,
+		dragNewSortOrder: React.PropTypes.number,
+		items: React.PropTypes.array,
 		list: React.PropTypes.object.isRequired,
 		refList: React.PropTypes.object.isRequired,
 		relatedItemId: React.PropTypes.string.isRequired,
@@ -20,13 +28,28 @@ const RelatedItemsList = React.createClass({
 	componentDidMount () {
 		this.loadItems();
 	},
+	isSortable () {
+		// Check if the related items should be sortable. The referenced list has to
+		//   be sortable and it has to set the current list as it's sortContext.
+		const { refList, list, relationship } = this.props;
+		const sortContext = refList.sortContext;
+		if (refList.sortable && sortContext) {
+			const parts = sortContext.split(':');
+			if (parts[0] === list.key && parts[1] === relationship.path) {
+				return true;
+			}
+		}
+		return false;
+	},
 	getColumns () {
 		const { relationship, refList } = this.props;
 		const columns = refList.expandColumns(refList.defaultColumns);
 		return columns.filter(i => i.path !== relationship.refPath);
 	},
 	loadItems () {
 		const { refList, relatedItemId, relationship } = this.props;
+		const { columns } = this.state;
+		// TODO: Move error to redux store
 		if (!refList.fields[relationship.refPath]) {
 			const err = (
 				<Alert type="danger">
@@ -35,26 +58,33 @@ const RelatedItemsList = React.createClass({
 			);
 			return this.setState({ err });
 		}
-		refList.loadItems({
-			columns: this.state.columns,
-			filters: [{
-				field: refList.fields[relationship.refPath],
-				value: { value: relatedItemId },
-			}],
-		}, (err, items) => {
-			// TODO: indicate pagination & link to main list view
-			this.setState({ items });
-		});
+		this.props.dispatch(loadRelationshipItemData({ columns, refList, relatedItemId, relationship }));
 	},
 	renderItems () {
-		return this.state.items.results.length ? (
+		const tableBody = (this.isSortable()) ? (
+			<DragDrop
+				columns={this.state.columns}
+				items={this.props.items}
+				{...this.props}
+			/>
+		) : (
+			<tbody>
+				{this.props.items.results.map((item) => {
+					return (<ListRow
+						key={item.id}
+						columns={this.state.columns}
+						item={item}
+						refList={this.props.refList}
+					/>);
+				})}
+			</tbody>
+		);
+		return this.props.items.results.length ? (
 			<div className="ItemList-wrapper">
 				<table cellPadding="0" cellSpacing="0" className="Table ItemList">
 					{this.renderTableCols()}
 					{this.renderTableHeaders()}
-					<tbody>
-						{this.state.items.results.map(this.renderTableRow)}
-					</tbody>
+					{tableBody}
 				</table>
 			</div>
 		) : (
@@ -69,16 +99,16 @@ const RelatedItemsList = React.createClass({
 		const cells = this.state.columns.map((col) => {
 			return <th key={col.path}>{col.label}</th>;
 		});
+
+		// add sort col when available
+		if (this.isSortable()) {
+			cells.unshift(
+				<th width={TABLE_CONTROL_COLUMN_WIDTH} key="sortable"></th>
+			);
+		}
+
 		return <thead><tr>{cells}</tr></thead>;
 	},
-	renderTableRow (item) {
-		const cells = this.state.columns.map((col, i) => {
-			const ColumnType = Columns[col.type] || Columns.__unrecognised__;
-			const linkTo = !i ? `${Keystone.adminPath}/${this.props.refList.path}/${item.id}` : undefined;
-			return <ColumnType key={col.path} list={this.props.refList} col={col} data={item} linkTo={linkTo} />;
-		});
-		return <tr key={'i' + item.id}>{cells}</tr>;
-	},
 	render () {
 		if (this.state.err) {
 			return <div className="Relationship">{this.state.err}</div>;
@@ -87,7 +117,7 @@ const RelatedItemsList = React.createClass({
 		return (
 			<div className="Relationship">
 				<h3 className="Relationship__link"><Link to={listHref}>{this.props.refList.label}</Link></h3>
-				{this.state.items ? this.renderItems() : <Spinner size="sm" />}
+				{this.props.items ? this.renderItems() : <Spinner size="sm" />}
 			</div>
 		);
 	},

admin/client/App/screens/Item/components/RelatedItemsList/RelatedItemsListDragDrop.js

@@ -0,0 +1,34 @@
+import React, { Component, PropTypes } from 'react';
+import { DragDropContext } from 'react-dnd';
+import HTML5Backend from 'react-dnd-html5-backend';
+import { Sortable } from './RelatedItemsListRow';
+
+class RelatedItemsListDragDrop extends Component {
+	render () {
+		const { items } = this.props;
+		return (
+			<tbody>
+				{items.results.map((item, i) => {
+					return (<Sortable
+						key={item.id}
+						index={i}
+						item={item}
+						{...this.props}
+					/>);
+				})}
+			</tbody>
+		);
+	}
+};
+RelatedItemsListDragDrop.propTypes = {
+	columns: PropTypes.array.isRequired,
+	dispatch: React.PropTypes.func.isRequired,
+	dragNewSortOrder: React.PropTypes.number,
+	items: PropTypes.array.isRequired,
+	list: PropTypes.object.isRequired,
+	refList: PropTypes.object.isRequired,
+	relatedItemId: PropTypes.string.isRequired,
+	relationship: PropTypes.object.isRequired,
+};
+
+module.exports = DragDropContext(HTML5Backend)(RelatedItemsListDragDrop);