Cavemanon/piratepoet
8
Fork 0
Code Pull Requests Actions Releases 16 Activity

Fix custom fields label saving for date

Browse Source 
[MAILPOET-3926]
This commit is contained in:
Pavel Dohnal
2021-11-10 15:37:03 +01:00
committed by Veljko V
parent 822587e92b
commit 9700e9abbb
2 changed files with 18 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
assets/js/src/form_editor/blocks/custom_date/custom_field_settings.jsx
View File

@@ -2,13 +2,14 @@ import React, { useEffect, useMemo, useState } from 'react';
import { import {
Button, Button,
ToggleControl, ToggleControl,
SelectControl, SelectControl, TextControl,
} from '@wordpress/components'; } from '@wordpress/components';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import MailPoet from 'mailpoet'; import MailPoet from 'mailpoet';
import CustomFieldDelete from '../custom_field_delete.jsx'; import CustomFieldDelete from '../custom_field_delete.jsx';
const CustomFieldSettings = ({ const CustomFieldSettings = ({
label,
mandatory, mandatory,
dateType, dateType,
dateFormat, dateFormat,
@@ -20,22 +21,25 @@ const CustomFieldSettings = ({
onCustomFieldDelete, onCustomFieldDelete,
onChange, onChange,
}) => { }) => {
const [localLabel, setLocalLabel] = useState(label);
const [localMandatory, setLocalMandatory] = useState(mandatory); const [localMandatory, setLocalMandatory] = useState(mandatory);
const [localDefaultToday, setLocalDefaultToday] = useState(defaultToday); const [localDefaultToday, setLocalDefaultToday] = useState(defaultToday);
const [localDateType, setLocalDateType] = useState(dateType); const [localDateType, setLocalDateType] = useState(dateType);
const [localDateFormat, setLocalDateFormat] = useState(dateFormat); const [localDateFormat, setLocalDateFormat] = useState(dateFormat);
const localData = useMemo(() => ({ const localData = useMemo(() => ({
label: localLabel,
mandatory: localMandatory, mandatory: localMandatory,
dateType: localDateType, dateType: localDateType,
dateFormat: localDateFormat, dateFormat: localDateFormat,
defaultToday: localDefaultToday, defaultToday: localDefaultToday,
}), [localMandatory, localDateType, localDateFormat, localDefaultToday]); }), [localLabel, localMandatory, localDateType, localDateFormat, localDefaultToday]);
const hasUnsavedChanges = localMandatory !== mandatory const hasUnsavedChanges = localMandatory !== mandatory
|| localDefaultToday !== defaultToday || localDefaultToday !== defaultToday
|| localDateType !== dateType || localDateType !== dateType
|| localDateFormat !== dateFormat; || localDateFormat !== dateFormat
|| localLabel !== label;
useEffect(() => { useEffect(() => {
if (onChange) { if (onChange) {
@@ -64,6 +68,12 @@ const CustomFieldSettings = ({
return ( return (
<div className="custom-field-settings"> <div className="custom-field-settings">
<TextControl
label={MailPoet.I18n.t('label')}
value={localLabel}
data-automation-id="settings_custom_date_label_input"
onChange={setLocalLabel}
/>
<ToggleControl <ToggleControl
label={MailPoet.I18n.t('blockMandatory')} label={MailPoet.I18n.t('blockMandatory')}
checked={localMandatory} checked={localMandatory}
@@ -94,6 +104,7 @@ const CustomFieldSettings = ({
dateType: localDateType, dateType: localDateType,
dateFormat: localDateFormat, dateFormat: localDateFormat,
defaultToday: localDefaultToday, defaultToday: localDefaultToday,
label: localLabel,
})} })}
isBusy={isSaving} isBusy={isSaving}
disabled={isSaving || !hasUnsavedChanges} disabled={isSaving || !hasUnsavedChanges}
@@ -114,6 +125,7 @@ const CustomFieldSettings = ({
CustomFieldSettings.propTypes = { CustomFieldSettings.propTypes = {
mandatory: PropTypes.bool, mandatory: PropTypes.bool,
label: PropTypes.string,
dateType: PropTypes.string, dateType: PropTypes.string,
dateFormat: PropTypes.string, dateFormat: PropTypes.string,
defaultToday: PropTypes.bool, defaultToday: PropTypes.bool,
@@ -133,6 +145,7 @@ CustomFieldSettings.propTypes = {
}; };
CustomFieldSettings.defaultProps = { CustomFieldSettings.defaultProps = {
label: '',
mandatory: false, mandatory: false,
isSaving: false, isSaving: false,
dateType: null, dateType: null,

13
assets/js/src/form_editor/blocks/custom_date/edit.jsx
View File

@@ -3,7 +3,6 @@ import moment from 'moment';
import { import {
Panel, Panel,
PanelBody, PanelBody,
TextControl,
} from '@wordpress/components'; } from '@wordpress/components';
import { InspectorControls } from '@wordpress/block-editor'; import { InspectorControls } from '@wordpress/block-editor';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
@@ -40,6 +39,7 @@ const CustomDateEdit = ({ attributes, setAttributes, clientId }) => {
<Panel> <Panel>
<PanelBody title={MailPoet.I18n.t('customFieldSettings')} initialOpen> <PanelBody title={MailPoet.I18n.t('customFieldSettings')} initialOpen>
<CustomFieldSettings <CustomFieldSettings
label={attributes.label}
mandatory={attributes.mandatory} mandatory={attributes.mandatory}
dateSettings={dateSettings} dateSettings={dateSettings}
defaultToday={attributes.defaultToday} defaultToday={attributes.defaultToday}
@@ -56,6 +56,7 @@ const CustomDateEdit = ({ attributes, setAttributes, clientId }) => {
dateType: params.dateType, dateType: params.dateType,
dateFormat: params.dateFormat, dateFormat: params.dateFormat,
defaultToday: params.defaultToday, defaultToday: params.defaultToday,
label: params.label,
}), }),
})} })}
onCustomFieldDelete={() => deleteCustomField( onCustomFieldDelete={() => deleteCustomField(
@@ -67,16 +68,6 @@ const CustomDateEdit = ({ attributes, setAttributes, clientId }) => {
/> />
</PanelBody> </PanelBody>
</Panel> </Panel>
<Panel>
<PanelBody title={MailPoet.I18n.t('formSettings')} initialOpen>
<TextControl
label={MailPoet.I18n.t('label')}
value={attributes.label}
data-automation-id="settings_custom_date_label_input"
onChange={(label) => (setAttributes({ label }))}
/>
</PanelBody>
</Panel>
</InspectorControls> </InspectorControls>
); );