diff --git a/client/dist/js/bundle.js b/client/dist/js/bundle.js
index 9c31b470..928c6fbb 100644
--- a/client/dist/js/bundle.js
+++ b/client/dist/js/bundle.js
@@ -2152,7 +2152,7 @@ var ElementEditor = function (_PureComponent) {
dragTargetElementId: null,
dragSpot: null,
contentBlocks: null,
- isLoading: false
+ isLoading: true
};
_this.handleDragOver = _this.handleDragOver.bind(_this);
@@ -2177,18 +2177,26 @@ var ElementEditor = function (_PureComponent) {
}, {
key: 'handleDragEnd',
value: function handleDragEnd(sourceId, afterId) {
- var _props = this.props,
- handleSortBlock = _props.actions.handleSortBlock,
- areaId = _props.areaId;
-
-
- var globalUseGraphQL = true;
+ var globalUseGraphQL = false;
if (globalUseGraphQL) {
+ var _props = this.props,
+ handleSortBlock = _props.actions.handleSortBlock,
+ areaId = _props.areaId;
+
handleSortBlock(sourceId, afterId, areaId).then(function () {
var preview = window.jQuery('.cms-preview');
preview.entwine('ss.preview')._loadUrl(preview.find('iframe').attr('src'));
});
- } else {}
+ } else {
+ _Backend2.default.post('/admin/elemental-area/sort', {
+ ID: sourceId,
+ afterBlockID: afterId
+ }).then(function (response) {
+ return response.json();
+ }).then(function (responseJson) {
+ console.log(responseJson);
+ });
+ }
this.setState({
dragTargetElementId: null,
@@ -2200,9 +2208,13 @@ var ElementEditor = function (_PureComponent) {
value: function fetchBlocks() {
var _this2 = this;
- this.setState(_extends({}, this.state, {
- isLoading: true
- }));
+ var doSetLoadingState = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
+
+ if (doSetLoadingState) {
+ this.setState(_extends({}, this.state, {
+ isLoading: true
+ }));
+ }
_Backend2.default.get('/admin/elemental-area/readBlocks/' + this.props.areaId).then(function (response) {
return response.json();
}).then(function (responseJson) {
@@ -2224,7 +2236,8 @@ var ElementEditor = function (_PureComponent) {
elementTypes = _props2.elementTypes,
isDraggingOver = _props2.isDraggingOver,
connectDropTarget = _props2.connectDropTarget,
- allowedElements = _props2.allowedElements;
+ allowedElements = _props2.allowedElements,
+ isLoading = _props2.isLoading;
var _state = this.state,
dragTargetElementId = _state.dragTargetElementId,
dragSpot = _state.dragSpot,
@@ -2233,7 +2246,7 @@ var ElementEditor = function (_PureComponent) {
var globalUseGraphqQL = false;
if (!globalUseGraphqQL && contentBlocks === null) {
- this.fetchBlocks();
+ this.fetchBlocks(false);
}
var allowedElementTypes = allowedElements.map(function (className) {
@@ -2263,7 +2276,8 @@ var ElementEditor = function (_PureComponent) {
dragSpot: dragSpot,
isDraggingOver: isDraggingOver,
dragTargetElementId: dragTargetElementId,
- contentBlocks: contentBlocks
+ contentBlocks: contentBlocks,
+ isLoading: isLoading
}),
_react2.default.createElement(_ElementDragPreview2.default, { elementTypes: elementTypes }),
_react2.default.createElement('input', {
@@ -2308,7 +2322,9 @@ function mapStateToProps(state) {
}
exports.Component = ElementEditor;
-exports.default = (0, _redux.compose)(_withDragDropContext2.default, (0, _reactDnd.DropTarget)('element', {}, function (connector, monitor) {
+
+
+var params = [_withDragDropContext2.default, (0, _reactDnd.DropTarget)('element', {}, function (connector, monitor) {
return {
connectDropTarget: connector.dropTarget(),
isDraggingOver: monitor.isOver() };
@@ -2319,7 +2335,13 @@ exports.default = (0, _redux.compose)(_withDragDropContext2.default, (0, _reactD
};
}, function () {
return 'ElementEditor';
-}), _sortBlockMutation2.default)(ElementEditor);
+})];
+var globalUseGraphQL = false;
+if (globalUseGraphQL) {
+ params.push(_sortBlockMutation2.default);
+}
+
+exports.default = _redux.compose.apply(undefined, params)(ElementEditor);
/***/ }),
@@ -2537,7 +2559,11 @@ exports.Component = ElementList;
var elementListTarget = {
drop: function drop(props, monitor) {
- var blocks = props.blocks;
+ var blocks = props.blocks,
+ contentBlocks = props.contentBlocks;
+
+ var globalUseGraphQL = false;
+ var elements = globalUseGraphQL ? blocks : contentBlocks;
var elementTargetDropResult = monitor.getDropResult();
@@ -2545,10 +2571,10 @@ var elementListTarget = {
return {};
}
- var dropIndex = (0, _dragHelpers.getDragIndicatorIndex)(blocks.map(function (element) {
+ var dropIndex = (0, _dragHelpers.getDragIndicatorIndex)(elements.map(function (element) {
return element.id;
}), elementTargetDropResult.target, monitor.getItem(), elementTargetDropResult.dropSpot);
- var dropAfterID = blocks[dropIndex - 1] ? blocks[dropIndex - 1].id : '0';
+ var dropAfterID = elements[dropIndex - 1] ? elements[dropIndex - 1].id : '0';
return _extends({}, elementTargetDropResult, {
dropAfterID: dropAfterID
diff --git a/client/src/components/ElementEditor/ElementEditor.js b/client/src/components/ElementEditor/ElementEditor.js
index 41a499bf..817f4235 100644
--- a/client/src/components/ElementEditor/ElementEditor.js
+++ b/client/src/components/ElementEditor/ElementEditor.js
@@ -26,7 +26,7 @@ class ElementEditor extends PureComponent {
dragTargetElementId: null,
dragSpot: null,
contentBlocks: null,
- isLoading: false,
+ isLoading: true,
};
this.handleDragOver = this.handleDragOver.bind(this);
@@ -61,11 +61,10 @@ class ElementEditor extends PureComponent {
* @param afterId
*/
handleDragEnd(sourceId, afterId) {
- const { actions: { handleSortBlock }, areaId } = this.props;
-
- const globalUseGraphQL = true;
+ const globalUseGraphQL = false;
if (globalUseGraphQL) {
// see sortBlockMutation.js for reference
+ const { actions: { handleSortBlock }, areaId } = this.props;
handleSortBlock(sourceId, afterId, areaId).then(() => {
const preview = window.jQuery('.cms-preview');
preview.entwine('ss.preview')._loadUrl(preview.find('iframe').attr('src'));
@@ -77,6 +76,19 @@ class ElementEditor extends PureComponent {
// call to read the element that was moved
// (strange code for sorting is in this component and not ElementList, however do not refator it)
// update the preview via jquery/entwine (see graphql code above)
+ backend.post(`/admin/elemental-area/sort`, {
+ ID: sourceId,
+ afterBlockID: afterId,
+ })
+ .then(response => response.json())
+ .then(responseJson => {
+ console.log(responseJson);
+ // this.setState({
+ // ...this.state,
+ // contentBlocks: responseJson,
+ // isLoading: false,
+ // })
+ });
}
this.setState({
@@ -89,11 +101,13 @@ class ElementEditor extends PureComponent {
* # rpc
* make a call to readAll elements endpoint (areaID)
*/
- fetchBlocks() {
- this.setState({
- ...this.state,
- isLoading: true
- });
+ fetchBlocks(doSetLoadingState = true) {
+ if (doSetLoadingState) {
+ this.setState({
+ ...this.state,
+ isLoading: true,
+ });
+ }
backend.get(`/admin/elemental-area/readBlocks/${this.props.areaId}`)
.then(response => response.json())
.then(responseJson => {
@@ -116,12 +130,13 @@ class ElementEditor extends PureComponent {
isDraggingOver,
connectDropTarget,
allowedElements,
+ isLoading,
} = this.props;
const { dragTargetElementId, dragSpot, contentBlocks } = this.state;
const globalUseGraphqQL = false;
if (!globalUseGraphqQL && contentBlocks === null) {
- this.fetchBlocks();
+ this.fetchBlocks(false);
}
// Map the allowed elements because we want to retain the sort order provided by that array.
@@ -148,6 +163,7 @@ class ElementEditor extends PureComponent {
isDraggingOver={isDraggingOver}
dragTargetElementId={dragTargetElementId}
contentBlocks={contentBlocks}
+ isLoading={isLoading}
/>
({
connectDropTarget: connector.dropTarget(),
@@ -205,7 +222,12 @@ export default compose(
ListComponent,
}),
() => 'ElementEditor'
- ),
- sortBlockMutation
-)(ElementEditor);
+ )
+];
+const globalUseGraphQL = false;
+if (globalUseGraphQL) {
+ params.push(sortBlockMutation);
+}
+
+export default compose(...params)(ElementEditor);
diff --git a/client/src/components/ElementEditor/ElementList.js b/client/src/components/ElementEditor/ElementList.js
index 99b27260..5d4f03e0 100644
--- a/client/src/components/ElementEditor/ElementList.js
+++ b/client/src/components/ElementEditor/ElementList.js
@@ -165,7 +165,10 @@ export { ElementList as Component };
const elementListTarget = {
drop(props, monitor) {
- const { blocks } = props;
+ const { blocks, contentBlocks } = props;
+ const globalUseGraphQL = false;
+ const elements = globalUseGraphQL ? blocks : contentBlocks;
+
const elementTargetDropResult = monitor.getDropResult();
if (!elementTargetDropResult) {
@@ -173,12 +176,12 @@ const elementListTarget = {
}
const dropIndex = getDragIndicatorIndex(
- blocks.map(element => element.id),
+ elements.map(element => element.id),
elementTargetDropResult.target,
monitor.getItem(),
elementTargetDropResult.dropSpot,
);
- const dropAfterID = blocks[dropIndex - 1] ? blocks[dropIndex - 1].id : '0';
+ const dropAfterID = elements[dropIndex - 1] ? elements[dropIndex - 1].id : '0';
return {
...elementTargetDropResult,
diff --git a/src/Controllers/ElementalAreaController.php b/src/Controllers/ElementalAreaController.php
index 2a15c55e..53cd6a10 100644
--- a/src/Controllers/ElementalAreaController.php
+++ b/src/Controllers/ElementalAreaController.php
@@ -39,6 +39,7 @@ class ElementalAreaController extends CMSMain
//
'GET readBlocks/$elementalAreaID!' => 'readBlocks',
'POST add' => 'add',
+ 'POST sort' => 'sort',
];
private static $allowed_actions = [
@@ -49,10 +50,40 @@ class ElementalAreaController extends CMSMain
//a
'readBlocks',
'add',
+ 'sort'
];
+ private function jsonResponse(?array $data = null)
+ {
+ $response = $this->getResponse();
+ $response->setStatusCode(200);
+ $response->addHeader('Content-Type', 'application/json');
+ $body = $data ? json_encode($data) : '';
+ $response->setBody($body);
+ return $response;
+ }
+
// ===
+ public function sort()
+ {
+ $request = $this->getRequest();
+ $postVars = json_decode($request->getBody(), true);
+ $id = $postVars['ID'];
+ $afterBlockID = $postVars['afterBlockID'];
+ $element = BaseElement::get()->byID($id);
+ if (!$element) {
+ throw new InvalidArgumentException(sprintf('%s#%s not found', BaseElement::class, $id));
+ }
+ if (!$element->canEdit()) {
+ $message = 'Changing the sort order of blocks is not allowed for the current user';
+ throw new InvalidArgumentException($message);
+ }
+ $reorderingService = Injector::inst()->create(ReorderElements::class, $element);
+ $reorderingService->reorder($afterBlockID);
+ return $this->jsonResponse(null);
+ }
+
public function readBlocks()
{
$request = $this->getRequest();
@@ -67,7 +98,7 @@ public function readBlocks()
if (!$elementalArea->canView()) {
throw new InvalidArgumentException("The current user has insufficient permission to view ElementalArea");
}
- $json = [];
+ $data = [];
foreach ($elementalArea->Elements() as $element) {
if (!$element->canView()) {
continue;
@@ -84,7 +115,7 @@ public function readBlocks()
],
'content' => '',
];
- $json[] = [
+ $data[] = [
'id' => (string) $element->ID,
'title' => $element->Title,
'__typename' => 'Block', // todo
@@ -100,12 +131,7 @@ public function readBlocks()
'canCreate' => $element->canCreate(),
];
}
- // $json['__typename'] = 'ElementalArea'; // this should get removed
- $response = $this->getResponse();
- $response->setStatusCode(200);
- $response->addHeader('Content-Type', 'application/json');
- $response->setBody(json_encode($json));
- return $response;
+ return $this->jsonResponse($data);
}
// Resolver.php resolveAddElementToArea()