.

silverstripe · Jan 1, 2024 · 91db11b · 91db11b
1 parent b55ae34
commit 91db11b
Show file tree

Hide file tree

Showing 4 changed files with 121 additions and 44 deletions.
diff --git a/client/dist/js/bundle.js b/client/dist/js/bundle.js
diff --git 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}
           />
           <ElementDragPreview elementTypes={elementTypes} />
           <input
@@ -191,7 +207,8 @@ function mapStateToProps(state) {
 }
 
 export { ElementEditor as Component };
-export default compose(
+
+const params = [
   withDragDropContext,
   DropTarget('element', {}, (connector, monitor) => ({
     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
@@ -165,20 +165,23 @@ 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) {
       return {};
     }
 
     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
@@ -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()