Skip to content

Commit

Permalink
SPIKE Inline validation
Browse files Browse the repository at this point in the history
  • Loading branch information
@emteknetnz
emteknetnz committed Feb 29, 2024
1 parent 136f1ea commit 22aab0d
Show file tree
Hide file tree
Showing 12 changed files with 5,010 additions and 311 deletions.
3,976 changes: 3,966 additions & 10 deletions client/dist/js/bundle.js
View file

Large diffs are not rendered by default.

499 changes: 498 additions & 1 deletion client/dist/styles/bundle.css
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion client/src/boot/registerTransforms.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,8 @@ import readBlocksForAreaQuery from 'state/editor/readBlocksForAreaQuery';
import addElementToArea from 'state/editor/addElementMutation';
import ArchiveAction from 'components/ElementActions/ArchiveAction';
import DuplicateAction from 'components/ElementActions/DuplicateAction';
import PublishAction from 'components/ElementActions/PublishAction';
import SaveAction from 'components/ElementActions/SaveAction';
import PublishAction from 'components/ElementActions/PublishAction';
import UnpublishAction from 'components/ElementActions/UnpublishAction';

export default () => {
Expand Down
138 changes: 33 additions & 105 deletions client/src/components/ElementActions/PublishAction.js
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,10 @@
/* global window */
import React from 'react';
import React, { useContext, useEffect } from 'react';
import { compose } from 'redux';
import AbstractAction from 'components/ElementActions/AbstractAction';
import publishBlockMutation from 'state/editor/publishBlockMutation';
import i18n from 'i18n';
import backend from 'lib/Backend';
import { connect } from 'react-redux';
import { loadElementSchemaValue } from 'state/editor/loadElementSchemaValue';
import { loadElementFormStateName } from 'state/editor/loadElementFormStateName';
import { initialize } from 'redux-form';
import { ElementContext } from 'components/ElementEditor/Element';

/**
* Show a toast message reporting whether publication of Element was successful
Expand Down Expand Up @@ -37,85 +33,31 @@ const reportPublicationStatus = (type, title, success) => {
});
};

/**
* Post updated Element data to save it
*
* @param {number} id Element ID
* @param {object} formData Information to be saved
* @param {string} securityId Security ID for form submission
*/
const performSaveForElementWithFormData = (id, formData, securityId) => {
const saveEndpoint = backend.createEndpointFetcher({
url: loadElementSchemaValue('saveUrl', id),
method: loadElementSchemaValue('saveMethod'),
payloadFormat: loadElementSchemaValue('payloadFormat'),
defaultData: {
SecurityID: securityId
},
});

// Perform save & get new version number to publish
return saveEndpoint(formData)
.then(() => window.ss.apolloClient.queryManager.reFetchObservableQueries())
.then((input) => {
const preview = window.jQuery('.cms-preview');
preview.entwine('ss.preview')._loadUrl(preview.find('iframe').attr('src'));
return input;
})
.then((newPageData) => {
const newElementData = newPageData[0] && newPageData[0]
.data
.readOneElementalArea
.elements
.find((elementData) => elementData.id === id);
return newElementData && newElementData.version;
});
};

/**
* Adds the elemental menu action to publish a draft/modified block
*/
const PublishAction = (MenuComponent) => (props) => {
if (props.type.broken) {
// Don't allow this action for a broken element.
return (
<MenuComponent {...props} />
);
}

const { element, formDirty } = props;
const {
formDirty,
onPublishButtonClick,
doPublishElement,
onAfterPublish,
formHasRendered,
} = useContext(ElementContext);

const { element, type, actions } = props;

const publishElement = () => {
// handlePublishBlock is a graphql mutation defined in publishBlockMutation.js
actions.handlePublishBlock(element.id)
.then(() => reportPublicationStatus(type.title, element.title, true))
.catch(() => reportPublicationStatus(type.title, element.title, false));
onAfterPublish();
};

const handleClick = (event) => {
event.stopPropagation();

const {
element: {
id,
title,
},
type,
securityId,
formData,
actions: { handlePublishBlock },
reinitialiseForm,
} = props;

let actionFlow = new Promise((resolve) => resolve());

// Edits have been made to the form. Peform a "Save & Publish"
if (formDirty) {
actionFlow = performSaveForElementWithFormData(id, formData, securityId)
.then((passthrough) => {
reinitialiseForm(formData);
return passthrough;
});
}

// Perform publish. Data is assumed to be up to date
actionFlow
.then(() => handlePublishBlock(id))
.then(() => reportPublicationStatus(type.title, title, true))
.catch(() => reportPublicationStatus(type.title, title, false));
onPublishButtonClick();
};

const disabled = props.element.canPublish !== undefined && !props.element.canPublish;
Expand All @@ -132,6 +74,19 @@ const PublishAction = (MenuComponent) => (props) => {
toggle: props.toggle,
};

useEffect(() => {
if (formHasRendered && doPublishElement) {
publishElement();
}
}, [formHasRendered, doPublishElement]);

if (props.type.broken) {
// Don't allow this action for a broken element.
return (
<MenuComponent {...props} />
);
}

return (
<MenuComponent {...props}>
{props.children}
Expand All @@ -140,36 +95,9 @@ const PublishAction = (MenuComponent) => (props) => {
);
};

function mapStateToProps(state, ownProps) {
const formName = loadElementFormStateName(ownProps.element.id);

let formData = null;

if (state.form.formState.element && state.form.formState.element[formName]) {
formData = state.form.formState.element[formName].values;
}

return {
formData,
securityId: state.config.SecurityID,
formDirty: state.unsavedForms.find((unsaved) => unsaved.name === `element.${formName}`),
};
}

function mapDispatchToProps(dispatch, ownProps) {
const formName = loadElementFormStateName(ownProps.element.id);

return {
reinitialiseForm(savedData) {
dispatch(initialize(`element.${formName}`, savedData));
}
};
}

export { PublishAction as Component };

export default compose(
publishBlockMutation,
connect(mapStateToProps, mapDispatchToProps),
PublishAction
);
112 changes: 29 additions & 83 deletions client/src/components/ElementActions/SaveAction.js
View file
Original file line number Diff line number Diff line change
@@ -1,86 +1,28 @@
import React from 'react';
import React, { useContext, useEffect } from 'react';
import { compose } from 'redux';
import { connect } from 'react-redux';
import AbstractAction from 'components/ElementActions/AbstractAction';
import backend from 'lib/Backend';
import i18n from 'i18n';
import { loadElementSchemaValue } from 'state/editor/loadElementSchemaValue';
import { loadElementFormStateName } from 'state/editor/loadElementFormStateName';
import { initialize } from 'redux-form';
import { ElementContext } from 'components/ElementEditor/Element';

/**
* Using a REST backend, serialize the current form data and post it to the backend endpoint to save
* the inline edit form's data for the current block.
*/
const SaveAction = (MenuComponent) => (props) => {
if (!props.expandable || props.type.broken) {
// Some elemental blocks can not be edited inline (e.g. User form blocks)
// We don't want to add a "Save" action for those blocks.
return (
<MenuComponent {...props} />
);
}
const {
doSaveElement,
onSaveButtonClick,
onAfterSave,
formHasRendered,
submitForm
} = useContext(ElementContext);

const handleClick = (event) => {
event.stopPropagation();
onSaveButtonClick();
};

const { element, type, securityId, formData, reinitialiseForm } = props;
const { jQuery: $ } = window;
const noTitle = i18n.inject(
i18n._t(
'ElementHeader.NOTITLE',
'Untitled {type} block'
),
{ type: type.title }
);

const endpointSpec = {
url: loadElementSchemaValue('saveUrl', element.id),
method: loadElementSchemaValue('saveMethod'),
payloadFormat: loadElementSchemaValue('payloadFormat'),
defaultData: {
SecurityID: securityId
},
};

const endpoint = backend.createEndpointFetcher(endpointSpec);
endpoint(formData)
.then(() => {
// Update the Apollo query cache with the new form data
const { apolloClient } = window.ss;

apolloClient.queryManager.reFetchObservableQueries();
reinitialiseForm(formData);

const preview = $('.cms-preview');
preview.entwine('ss.preview')._loadUrl(preview.find('iframe').attr('src'));

const newTitle = formData ? formData[`PageElements_${element.id}_Title`] : null;
$.noticeAdd({
text: i18n.inject(
i18n._t(
'ElementSaveAction.SUCCESS_NOTIFICATION',
'Saved \'{title}\' successfully'
),
{ title: newTitle || noTitle }
),
stay: false,
type: 'success'
});
})
.catch(() => {
$.noticeAdd({
text: i18n.inject(
i18n._t(
'ElementSaveAction.ERROR_NOTIFICATION',
'Error saving \'{title}\''
),
{ title: element.Title || noTitle }
),
stay: false,
type: 'error'
});
});
const saveElement = () => {
submitForm();
onAfterSave();
};

const newProps = {
Expand All @@ -89,6 +31,20 @@ const SaveAction = (MenuComponent) => (props) => {
onClick: handleClick,
};

useEffect(() => {
if (formHasRendered && doSaveElement) {
saveElement();
}
}, [formHasRendered, doSaveElement]);

if (!props.expandable || props.type.broken) {
// Some elemental blocks can not be edited inline (e.g. User form blocks)
// We don't want to add a "Save" action for those blocks.
return (
<MenuComponent {...props} />
);
}

return (
<MenuComponent {...props}>
{props.children}
Expand All @@ -113,16 +69,6 @@ function mapStateToProps(state, ownProps) {
};
}

function mapDispatchToProps(dispatch, ownProps) {
const formName = loadElementFormStateName(ownProps.element.id);

return {
reinitialiseForm(savedData) {
dispatch(initialize(`element.${formName}`, savedData));
}
};
}

export { SaveAction as Component };

export default compose(connect(mapStateToProps, mapDispatchToProps), SaveAction);
export default compose(connect(mapStateToProps), SaveAction);
19 changes: 17 additions & 2 deletions client/src/components/ElementEditor/Content.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,8 +22,17 @@ class Content extends PureComponent {
handleLoadingError,
formDirty,
broken,
onFormSchemaFetchResponse,
onFormSchemaSubmitResponse,
ensureFormRendered,
formHasRendered,
} = this.props;

const extraClass = {
'element-editor-editform--collapsed': !previewExpanded,
'element-editor-editform--rendered-not-visible': !previewExpanded && (ensureFormRendered || formHasRendered),
};

return (
<div className="element-editor-content">
{!previewExpanded &&
Expand All @@ -35,15 +44,17 @@ class Content extends PureComponent {
broken={broken}
/>
}
{previewExpanded &&
{(previewExpanded || ensureFormRendered || formHasRendered) &&
// Show inline editable fields
<InlineEditFormComponent
extraClass={{ 'element-editor-editform--collapsed': !previewExpanded }}
extraClass={extraClass}
onClick={(event) => event.stopPropagation()}
elementId={id}
activeTab={activeTab}
onFormInit={onFormInit}
handleLoadingError={handleLoadingError}
onFormSchemaFetchResponse={onFormSchemaFetchResponse}
onFormSchemaSubmitResponse={onFormSchemaSubmitResponse}
/>
}
{formDirty &&
Expand All @@ -69,6 +80,10 @@ Content.propTypes = {
InlineEditFormComponent: PropTypes.elementType,
handleLoadingError: PropTypes.func,
broken: PropTypes.bool,
onFormSchemaFetchResponse: PropTypes.func,
onFormSchemaSubmitResponse: PropTypes.func,
ensureFormRendered: PropTypes.bool,
formHasRendered: PropTypes.bool,
};

Content.defaultProps = {};
Expand Down
Loading

0 comments on commit 22aab0d

Please sign in to comment.