public/mailtrain
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Refactoring a common pattern for "clone for existing". Applied to custom forms and templates.

Browse source
This commit is contained in:
Tomas Bures 2019-07-26 16:48:26 +05:30
parent 6eeef7a991
commit d247893d31
8 changed files with 95 additions and 98 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
client/package.json
View file

@ -28,7 +28,6 @@
"datatables.net": "^1.10.19", "datatables.net": "^1.10.19",
"datatables.net-bs4": "^1.10.19", "datatables.net-bs4": "^1.10.19",
"ellipsize": "^0.1.0", "ellipsize": "^0.1.0",
"fast-deep-equal": "^2.0.1",
"grapesjs": "^0.14.62", "grapesjs": "^0.14.62",
"grapesjs-mjml": "0.0.31", "grapesjs-mjml": "0.0.31",
"grapesjs-preset-newsletter": "^0.2.20", "grapesjs-preset-newsletter": "^0.2.20",

20
client/src/lib/form.js
View file

@ -12,7 +12,6 @@ import {TreeSelectMode, TreeTable} from './tree';
import {Table, TableSelectMode} from './table'; import {Table, TableSelectMode} from './table';
import {Button} from "./bootstrap-components"; import {Button} from "./bootstrap-components";
import {SketchPicker} from 'react-color'; import {SketchPicker} from 'react-color';
import deepEqual from "fast-deep-equal";
import ACEEditorRaw from 'react-ace'; import ACEEditorRaw from 'react-ace';
import 'brace/theme/github'; import 'brace/theme/github';
@ -1373,7 +1372,24 @@ const withForm = createComponentMixin([], [], (TargetClass, InnerClass) => {
const currentData = getSaveData(self, self.state.formState.get('data')); const currentData = getSaveData(self, self.state.formState.get('data'));
const savedData = self.state.formState.get('savedData'); const savedData = self.state.formState.get('savedData');
return !deepEqual(currentData, savedData); function isDifferent(data1, data2, prefix) {
if (typeof data1 === 'object' && typeof data2 === 'object') {
const keys = new Set([...Object.keys(data1), ...Object.keys(data2)]);
for (const key of keys) {
if (isDifferent(data1[key], data2[key], `${prefix}/${key}`)) {
return true;
}
}
} else if (data1 !== data2) {
// console.log(prefix);
return true;
}
return false;
}
const result = isDifferent(currentData, savedData, '');
return result;
}; };
proto.isFormChanged = function() { proto.isFormChanged = function() {

60
client/src/lists/forms/CUD.js
View file

@ -46,9 +46,7 @@ export default class CUD extends Component {
this.state = { this.state = {
previewContents: null, previewContents: null,
previewFullscreen: false, previewFullscreen: false
fromSourceCustomForms: false,
sourceCustomForms: null,
}; };
this.serverValidatedFields = [ this.serverValidatedFields = [
@ -300,7 +298,10 @@ export default class CUD extends Component {
} }
submitFormValuesMutator(data) { submitFormValuesMutator(data) {
return filterData(data, ['name', 'description', 'layout', 'form_input_style', 'namespace', return filterData(data, ['name', 'description', 'namespace',
'fromExistingEntity', 'existingEntity',
'layout', 'form_input_style',
'web_subscribe', 'web_subscribe',
'web_confirm_subscription_notice', 'web_confirm_subscription_notice',
'mail_confirm_subscription_html', 'mail_confirm_subscription_html',
@ -333,8 +334,8 @@ export default class CUD extends Component {
const data = { const data = {
name: '', name: '',
description: '', description: '',
fromSourceCustomForms: false, fromExistingEntity: false,
sourceCustomForms: null, existingEntity: null,
selectedTemplate: 'layout', selectedTemplate: 'layout',
namespace: mailtrainConfig.user.namespace namespace: mailtrainConfig.user.namespace
}; };
@ -355,12 +356,13 @@ export default class CUD extends Component {
validateNamespace(t, state); validateNamespace(t, state);
if (state.getIn(['fromSourceCustomForms', 'value']) && !state.getIn(['sourceCustomForms', 'value'])) { if (state.getIn(['fromExistingEntity', 'value']) && !state.getIn(['existingEntity', 'value'])) {
state.setIn(['sourceCustomForms', 'error'], t('sourceCustomFormsMustNotBeEmpty')); state.setIn(['existingEntity', 'error'], t('sourceCustomFormsMustNotBeEmpty'));
} else { } else {
state.setIn(['sourceCustomForms', 'error'], null); state.setIn(['existingEntity', 'error'], null);
} }
let formsServerValidationRunning = false; let formsServerValidationRunning = false;
const formsErrors = []; const formsErrors = [];
@ -400,11 +402,7 @@ export default class CUD extends Component {
url = `rest/forms/${this.props.entity.id}`; url = `rest/forms/${this.props.entity.id}`;
} else { } else {
sendMethod = FormSendMethod.POST; sendMethod = FormSendMethod.POST;
if (this.getFormValue('sourceCustomForms') !== null) { url = 'rest/forms';
url = `rest/forms/${this.getFormValue('sourceCustomForms')}`;
} else {
url = 'rest/forms';
}
} }
this.disableForm(); this.disableForm();
@ -510,18 +508,17 @@ export default class CUD extends Component {
<NamespaceSelect/> <NamespaceSelect/>
{!isEdit && {!isEdit &&
<CheckBox id="fromSourceCustomForms" label={t('customForms')} text={t('cloneFromAnExistingCustomForms')}/> <CheckBox id="fromExistingEntity" label={t('customForms')} text={t('cloneFromAnExistingCustomForms')}/>
} }
{this.getFormValue('fromSourceCustomForms') && {this.getFormValue('fromExistingEntity') ?
<TableSelect key="sourceCustomFormsKey" id="sourceCustomForms" withHeader dropdown dataUrl='rest/forms-table' columns={customFormsColumns} selectionLabelIndex={1} /> <TableSelect id="existingEntity" label={t('Source custom forms')} withHeader dropdown dataUrl='rest/forms-table' columns={customFormsColumns} selectionLabelIndex={1} />
} :
<>
<Fieldset label={t('formsPreview')}>
<TableSelect id="previewList" label={t('listToPreviewOn')} withHeader dropdown dataUrl='rest/lists-table' columns={listsColumns} selectionLabelIndex={1} help={t('selectListWhoseFieldsWillBeUsedToPreview')}/>
{!this.getFormValue('fromSourceCustomForms') && { previewListId &&
<Fieldset label={t('formsPreview')}>
<TableSelect id="previewList" label={t('listToPreviewOn')} withHeader dropdown dataUrl='rest/lists-table' columns={listsColumns} selectionLabelIndex={1} help={t('selectListWhoseFieldsWillBeUsedToPreview')}/>
{ previewListId &&
<div> <div>
<AlignedRow> <AlignedRow>
<div> <div>
@ -570,15 +567,16 @@ export default class CUD extends Component {
</div> </div>
} }
</div> </div>
} }
</Fieldset> </Fieldset>
}
{ selectedTemplate && { selectedTemplate &&
<Fieldset label={t('templates')}> <Fieldset label={t('templates')}>
<Dropdown id="selectedTemplate" label={t('edit')} options={templateOptGroups} help={this.templateSettings[selectedTemplate].help}/> <Dropdown id="selectedTemplate" label={t('edit')} options={templateOptGroups} help={this.templateSettings[selectedTemplate].help}/>
<ACEEditor id={selectedTemplate} height="500px" mode={this.templateSettings[selectedTemplate].mode}/> <ACEEditor id={selectedTemplate} height="500px" mode={this.templateSettings[selectedTemplate].mode}/>
</Fieldset> </Fieldset>
}
</>
} }
<ButtonRow> <ButtonRow>

23
client/src/templates/CUD.js
View file

@ -98,7 +98,8 @@ export default class CUD extends Component {
submitFormValuesMutator(data) { submitFormValuesMutator(data) {
this.templateTypes[data.type].beforeSave(data); this.templateTypes[data.type].beforeSave(data);
return filterData(data, ['name', 'description', 'type', 'tag_language', 'data', 'html', 'text', 'namespace']);
return filterData(data, ['name', 'description', 'type', 'tag_language', 'data', 'html', 'text', 'namespace', 'fromExistingEntity', 'existingEntity']);
} }
async getPreSubmitFormValuesUpdater() { async getPreSubmitFormValuesUpdater() {
@ -127,8 +128,8 @@ export default class CUD extends Component {
type: mailtrainConfig.editors[0], type: mailtrainConfig.editors[0],
tag_language: mailtrainConfig.tagLanguages[0], tag_language: mailtrainConfig.tagLanguages[0],
fromSourceTemplate: false, fromExistingEntity: false,
sourceTemplate: null, existingEntity: null,
text: '', text: '',
html: '', html: '',
@ -158,10 +159,10 @@ export default class CUD extends Component {
state.setIn(['tag_language', 'error'], t('Tag language must be selected')); state.setIn(['tag_language', 'error'], t('Tag language must be selected'));
} }
if (state.getIn(['fromSourceTemplate', 'value']) && !state.getIn(['sourceTemplate', 'value'])) { if (state.getIn(['fromExistingEntity', 'value']) && !state.getIn(['existingEntity', 'value'])) {
state.setIn(['sourceTemplate', 'error'], t('sourceTemplateMustNotBeEmpty')); state.setIn(['existingEntity', 'error'], t('sourceTemplateMustNotBeEmpty'));
} else { } else {
state.setIn(['sourceTemplate', 'error'], null); state.setIn(['existingEntity', 'error'], null);
} }
validateNamespace(t, state); validateNamespace(t, state);
@ -350,11 +351,11 @@ export default class CUD extends Component {
<TextArea id="description" label={t('description')}/> <TextArea id="description" label={t('description')}/>
{!isEdit && {!isEdit &&
<CheckBox id="fromSourceTemplate" label={t('template')} text={t('cloneFromAnExistingTemplate')}/> <CheckBox id="fromExistingEntity" label={t('template')} text={t('cloneFromAnExistingTemplate')}/>
} }
{this.getFormValue('fromSourceTemplate') ? {this.getFormValue('fromExistingEntity') ?
<TableSelect key="templateSelect" id="sourceTemplate" withHeader dropdown dataUrl='rest/templates-table' columns={templatesColumns} selectionLabelIndex={1} /> <TableSelect id="existingEntity" label={t('Source template')} withHeader dropdown dataUrl='rest/templates-table' columns={templatesColumns} selectionLabelIndex={1} />
: :
<> <>
{isEdit ? {isEdit ?
@ -366,11 +367,11 @@ export default class CUD extends Component {
} }
{typeForm} {typeForm}
<Dropdown id="tag_language" label={t('Tag language')} options={tagLanguageOptions} disabled={isEdit && (!typeKey || this.templateTypes[typeKey].isTagLanguageSelectorDisabledForEdit)}/>
</> </>
} }
<Dropdown id="tag_language" label={t('Tag language')} options={tagLanguageOptions} disabled={isEdit && (!typeKey || this.templateTypes[typeKey].isTagLanguageSelectorDisabledForEdit)}/>
<NamespaceSelect/> <NamespaceSelect/>
{editForm} {editForm}

2
locales/en-US/common.json
View file

@ -924,7 +924,7 @@
"editTemplate": "Edit Template", "editTemplate": "Edit Template",
"createTemplate": "Create Template", "createTemplate": "Create Template",
"cloneFromAnExistingTemplate": "Clone from an existing template", "cloneFromAnExistingTemplate": "Clone from an existing template",
"cloneFromAnExistingCustomForms": "Clone from an existing custom forms", "cloneFromAnExistingCustomForms": "Clone from existing custom forms",
"mosaico": "Mosaico", "mosaico": "Mosaico",
"templateContentHtml": "Template content (HTML)", "templateContentHtml": "Template content (HTML)",
"mosaicoTemplateDesigner": "Mosaico Template Designer", "mosaicoTemplateDesigner": "Mosaico Template Designer",

61
server/models/forms.js
View file

@ -70,7 +70,7 @@ async function listDTAjax(context, params) {
} }
async function _getById(tx, id) { async function _getByIdTx(tx, id) {
const entity = await tx('custom_forms').where('id', id).first(); const entity = await tx('custom_forms').where('id', id).first();
if (!entity) { if (!entity) {
@ -86,17 +86,20 @@ async function _getById(tx, id) {
return entity; return entity;
} }
async function getByIdTx(tx, context, id, withPermissions = true) {
await shares.enforceEntityPermissionTx(tx, context, 'customForm', id, 'view');
const entity = await _getByIdTx(tx, id);
if (withPermissions) {
entity.permissions = await shares.getPermissionsTx(tx, context, 'customForm', id);
}
return entity;
}
async function getById(context, id, withPermissions = true) { async function getById(context, id, withPermissions = true) {
return await knex.transaction(async tx => { return await knex.transaction(async tx => {
await shares.enforceEntityPermissionTx(tx, context, 'customForm', id, 'view'); return await getByIdTx(tx, context, id, withPermissions);
const entity = await _getById(tx, id);
if (withPermissions) {
entity.permissions = await shares.getPermissionsTx(tx, context, 'customForm', id);
}
return entity;
}); });
} }
@ -122,6 +125,17 @@ async function create(context, entity) {
return await knex.transaction(async tx => { return await knex.transaction(async tx => {
await shares.enforceEntityPermissionTx(tx, context, 'namespace', entity.namespace, 'createCustomForm'); await shares.enforceEntityPermissionTx(tx, context, 'namespace', entity.namespace, 'createCustomForm');
if (entity.fromExistingEntity) {
const existing = await getByIdTx(tx, context, entity.existingEntity, false);
entity.layout = existing.layout;
entity.form_input_style = existing.form_input_style;
for (const key of allowedFormKeys) {
entity[key] = existing[key];
}
}
await namespaceHelpers.validateEntity(tx, entity); await namespaceHelpers.validateEntity(tx, entity);
const form = filterObject(entity, allowedFormKeys); const form = filterObject(entity, allowedFormKeys);
@ -147,7 +161,7 @@ async function updateWithConsistencyCheck(context, entity) {
await knex.transaction(async tx => { await knex.transaction(async tx => {
await shares.enforceEntityPermissionTx(tx, context, 'customForm', entity.id, 'edit'); await shares.enforceEntityPermissionTx(tx, context, 'customForm', entity.id, 'edit');
const existing = await _getById(tx, entity.id); const existing = await _getByIdTx(tx, entity.id);
const existingHash = hash(existing); const existingHash = hash(existing);
if (existingHash !== entity.originalHash) { if (existingHash !== entity.originalHash) {
@ -175,31 +189,6 @@ async function updateWithConsistencyCheck(context, entity) {
}); });
} }
async function copy(context, entity, formId) {
return await knex.transaction(async tx => {
await shares.enforceEntityPermissionTx(tx, context, 'namespace', entity.namespace, 'createCustomForm');
const existing = await _getById(tx, formId);
await namespaceHelpers.validateEntity(tx, entity);
const form = filterObject(existing, allowedFormKeys);
enforce(!Object.keys(checkForMjmlErrors(form)).length, 'Error(s) in form templates');
const ids = await tx('custom_forms').insert(filterObject(entity, formAllowedKeys));
const id = ids[0];
for (const formKey in form) {
await tx('custom_forms_data').insert({
form: id,
data_key: formKey,
data_value: form[formKey]
})
}
await shares.rebuildPermissionsTx(tx, { entityTypeId: 'customForm', entityId: id });
return id;
});
}
async function remove(context, id) { async function remove(context, id) {
await knex.transaction(async tx => { await knex.transaction(async tx => {
await shares.enforceEntityPermissionTx(tx, context, 'customForm', id, 'delete'); await shares.enforceEntityPermissionTx(tx, context, 'customForm', id, 'delete');
@ -308,9 +297,9 @@ function checkForMjmlErrors(form) {
module.exports.listDTAjax = listDTAjax; module.exports.listDTAjax = listDTAjax;
module.exports.hash = hash; module.exports.hash = hash;
module.exports.getById = getById; module.exports.getById = getById;
module.exports.getByIdTx = getByIdTx;
module.exports.create = create; module.exports.create = create;
module.exports.updateWithConsistencyCheck = updateWithConsistencyCheck; module.exports.updateWithConsistencyCheck = updateWithConsistencyCheck;
module.exports.copy = copy;
module.exports.remove = remove; module.exports.remove = remove;
module.exports.getDefaultCustomFormValues = getDefaultCustomFormValues; module.exports.getDefaultCustomFormValues = getDefaultCustomFormValues;
module.exports.serverValidate = serverValidate; module.exports.serverValidate = serverValidate;

20
server/models/templates.js
View file

@ -75,14 +75,14 @@ async function create(context, entity) {
return await knex.transaction(async tx => { return await knex.transaction(async tx => {
await shares.enforceEntityPermissionTx(tx, context, 'namespace', entity.namespace, 'createTemplate'); await shares.enforceEntityPermissionTx(tx, context, 'namespace', entity.namespace, 'createTemplate');
if (entity.fromSourceTemplate) { if (entity.fromExistingEntity) {
const template = await getByIdTx(tx, context, entity.sourceTemplate, false); const existing = await getByIdTx(tx, context, entity.existingEntity, false);
entity.type = template.type; entity.type = existing.type;
entity.tag_language = template.tag_language; entity.tag_language = existing.tag_language;
entity.data = template.data; entity.data = existing.data;
entity.html = template.html; entity.html = existing.html;
entity.text = template.text; entity.text = existing.text;
} }
await _validateAndPreprocess(tx, entity); await _validateAndPreprocess(tx, entity);
@ -92,10 +92,10 @@ async function create(context, entity) {
await shares.rebuildPermissionsTx(tx, { entityTypeId: 'template', entityId: id }); await shares.rebuildPermissionsTx(tx, { entityTypeId: 'template', entityId: id });
if (entity.fromSourceTemplate) { if (entity.fromExistingEntity) {
await files.copyAllTx(tx, context, 'template', 'file', entity.sourceTemplate, 'template', 'file', id); await files.copyAllTx(tx, context, 'template', 'file', entity.existingEntity, 'template', 'file', id);
convertFileURLs(entity, 'template', entity.sourceTemplate, 'template', id); convertFileURLs(entity, 'template', entity.existingEntity, 'template', id);
await tx('templates').update(filterObject(entity, allowedKeys)).where('id', id); await tx('templates').update(filterObject(entity, allowedKeys)).where('id', id);
} }

6
server/routes/rest/forms.js
View file

@ -26,12 +26,6 @@ router.postAsync('/forms', passport.loggedIn, passport.csrfProtection, async (re
return res.json(await forms.create(req.context, req.body)); return res.json(await forms.create(req.context, req.body));
}); });
router.postAsync('/forms/:formId', passport.loggedIn, passport.csrfProtection, async (req, res) => {
const entity = req.body;
const formId= castToInteger(req.params.formId);
return res.json(await forms.copy(req.context, entity, formId));
});
router.putAsync('/forms/:formId', passport.loggedIn, passport.csrfProtection, async (req, res) => { router.putAsync('/forms/:formId', passport.loggedIn, passport.csrfProtection, async (req, res) => {
const entity = req.body; const entity = req.body;
entity.id = castToInteger(req.params.formId); entity.id = castToInteger(req.params.formId);