Skip to content

Commit

Permalink
NEW Validation of fields when inline saving
Browse files Browse the repository at this point in the history
  • Loading branch information
emteknetnz committed Mar 4, 2024
1 parent 136f1ea commit bdf8a90
Show file tree
Hide file tree
Showing 15 changed files with 853 additions and 379 deletions.
6 changes: 3 additions & 3 deletions client/dist/js/bundle.js

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion client/dist/styles/bundle.css

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion client/src/boot/registerTransforms.js
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
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 {
doPublishElement,
formDirty,
formHasRendered,
onAfterPublish,
onPublishButtonClick,
} = 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
);
132 changes: 30 additions & 102 deletions client/src/components/ElementActions/SaveAction.js
Original file line number Diff line number Diff line change
@@ -1,128 +1,56 @@
import React from 'react';
import { compose } from 'redux';
import { connect } from 'react-redux';
import React, { useContext, useEffect } from 'react';
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,
formHasRendered,
onSaveButtonClick,
onAfterSave,
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 = {
title: i18n._t('ElementSaveAction.SAVE', 'Save'),
className: 'element-editor__actions-save',
onClick: handleClick,
toggle: props.toggle,
};

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}

<AbstractAction {...newProps} />
</MenuComponent>
);
};

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,
};
}

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 SaveAction;
Loading

0 comments on commit bdf8a90

Please sign in to comment.