From b8bb2d3b10aaa47003218d0f7e14edc4bae70307 Mon Sep 17 00:00:00 2001 From: Jeroen Olthof Date: Thu, 12 Dec 2024 11:59:19 +0100 Subject: [PATCH] Add JSON export functionality for grid configuration WIP: Add export to json --- client/src/components/Element.js | 34 ++++++++++++++++++- .../src/components/ElementEditor/Toolbar.js | 6 +++- src/Extensions/BaseElementExtension.php | 25 ++++++++++++++ src/Extensions/ElementalAreaExtension.php | 11 ++++++ src/Models/ElementRow.php | 11 ++++++ 5 files changed, 85 insertions(+), 2 deletions(-) mode change 100755 => 100644 src/Extensions/BaseElementExtension.php mode change 100755 => 100644 src/Extensions/ElementalAreaExtension.php mode change 100755 => 100644 src/Models/ElementRow.php diff --git a/client/src/components/Element.js b/client/src/components/Element.js index c58b3c4..43c28e2 100644 --- a/client/src/components/Element.js +++ b/client/src/components/Element.js @@ -15,6 +15,7 @@ import { loadElementSchemaValue } from 'state/editor/loadElementSchemaValue'; import { elementTypeType } from 'types/elementTypeType'; import { elementType } from 'types/elementType'; import { elementDragSource, isOverTop } from 'lib/dragHelpers'; +import Modal from 'react-modal'; /** * The Element component used in the context of an ElementEditor shows the summary @@ -35,6 +36,8 @@ class Element extends Component { this.updateFormTab = this.updateFormTab.bind(this); this.handleChangeSize = this.handleChangeSize.bind(this); this.handleChangeOffset = this.handleChangeOffset.bind(this); + this.handleExportJSON = this.handleExportJSON.bind(this); + this.closeModal = this.closeModal.bind(this); this.state = { previewExpanded: false, @@ -43,6 +46,8 @@ class Element extends Component { childRenderingError: false, size: props.element.blockSchema.grid.column.size, offset: props.element.blockSchema.grid.column.offset, + modalIsOpen: false, + jsonRepresentation: '', }; } @@ -243,6 +248,21 @@ class Element extends Component { }); } + handleExportJSON() { + const { element } = this.props; + const jsonRepresentation = JSON.stringify(element.blockSchema.grid, null, 2); + this.setState({ + modalIsOpen: true, + jsonRepresentation, + }); + } + + closeModal() { + this.setState({ + modalIsOpen: false, + }); + } + render() { const { element, @@ -260,7 +280,7 @@ class Element extends Component { onDragEnd, } = this.props; - const { childRenderingError, previewExpanded } = this.state; + const { childRenderingError, previewExpanded, modalIsOpen, jsonRepresentation } = this.state; if (!element.id) { return null; @@ -332,7 +352,19 @@ class Element extends Component { handleChangeOffset={this.handleChangeOffset} /> } + + + + +

JSON Representation

+ 
{jsonRepresentation}
+ + ); if (!previewExpanded) { diff --git a/client/src/components/ElementEditor/Toolbar.js b/client/src/components/ElementEditor/Toolbar.js index b44d0e9..6771b27 100644 --- a/client/src/components/ElementEditor/Toolbar.js +++ b/client/src/components/ElementEditor/Toolbar.js @@ -12,7 +12,9 @@ class Toolbar extends PureComponent { AddBlockToTopButton, elementTypes, areaId, - connectDropTarget } = this.props; + connectDropTarget, + onExportJSON + } = this.props; return connectDropTarget(
+
); } @@ -37,6 +40,7 @@ Toolbar.propTypes = { connectDropTarget: PropTypes.func.isRequired, onDragOver: PropTypes.func, // eslint-disable-line react/no-unused-prop-types onDragDrop: PropTypes.func, // eslint-disable-line react/no-unused-prop-types + onExportJSON: PropTypes.func.isRequired, }; const toolbarTarget = { diff --git a/src/Extensions/BaseElementExtension.php b/src/Extensions/BaseElementExtension.php old mode 100755 new mode 100644 index 8e64205..d3ecf0a --- a/src/Extensions/BaseElementExtension.php +++ b/src/Extensions/BaseElementExtension.php @@ -288,4 +288,29 @@ public function getAnchorTitle(): string { return $this->owner->singular_name() . '_' . $this->owner->getTitle() . '_' . $this->owner->ID; } + + public function generateGridJSON(): string + { + $gridData = [ + 'sizeXS' => $this->owner->SizeXS, + 'sizeSM' => $this->owner->SizeSM, + 'sizeMD' => $this->owner->SizeMD, + 'sizeLG' => $this->owner->SizeLG, + 'sizeXL' => $this->owner->SizeXL, + 'offsetXS' => $this->owner->OffsetXS, + 'offsetSM' => $this->owner->OffsetSM, + 'offsetMD' => $this->owner->OffsetMD, + 'offsetLG' => $this->owner->OffsetLG, + 'offsetXL' => $this->owner->OffsetXL, + 'visibilityXS' => $this->owner->VisibilityXS, + 'visibilitySM' => $this->owner->VisibilitySM, + 'visibilityMD' => $this->owner->VisibilityMD, + 'visibilityLG' => $this->owner->VisibilityLG, + 'visibilityXL' => $this->owner->VisibilityXL, + 'titleClass' => $this->owner->TitleClass, + 'titleTag' => $this->owner->TitleTag, + ]; + + return json_encode($gridData, JSON_PRETTY_PRINT); + } } diff --git a/src/Extensions/ElementalAreaExtension.php b/src/Extensions/ElementalAreaExtension.php old mode 100755 new mode 100644 index 24bb7ed..f9fe3f0 --- a/src/Extensions/ElementalAreaExtension.php +++ b/src/Extensions/ElementalAreaExtension.php @@ -78,4 +78,15 @@ public function ElementControllersWithRows(): ?ArrayList return $this->controllers; } + + public function generateGridJSON(): string + { + $gridData = []; + + foreach ($this->controllers as $controller) { + $gridData[] = $controller->getElement()->toMap(); + } + + return json_encode($gridData, JSON_PRETTY_PRINT); + } } diff --git a/src/Models/ElementRow.php b/src/Models/ElementRow.php old mode 100755 new mode 100644 index 4b17561..a1bc134 --- a/src/Models/ElementRow.php +++ b/src/Models/ElementRow.php @@ -122,4 +122,15 @@ public function getContainerClasses(): string return implode(' ', $classes); } + + public function generateGridJSON(): string + { + $gridData = [ + 'isFluid' => $this->IsFluid, + 'customSectionClass' => $this->CustomSectionClass, + 'extraClass' => $this->ExtraClass, + ]; + + return json_encode($gridData, JSON_PRETTY_PRINT); + } }