diff --git a/htdocs/css/direct-entry.css b/htdocs/css/direct-entry.css index 467f8b6f76d..ea67fc04489 100644 --- a/htdocs/css/direct-entry.css +++ b/htdocs/css/direct-entry.css @@ -50,3 +50,14 @@ label { align-items: center; font-size: 2em; } + +#save { + margin: auto; + display: block; + color: white; + background-color: #08245b; +} + +#warning { + color: red; +} diff --git a/jsx/InstrumentForm.js b/jsx/InstrumentForm.js index d4b426f76e2..d39aab2053c 100644 --- a/jsx/InstrumentForm.js +++ b/jsx/InstrumentForm.js @@ -7,7 +7,7 @@ const { SelectElement, RadioGroupLabels, RadioGroupElement, CheckboxGroupElement * The meta and elements passed to this component must already be 'localized' * (see ./lib/localize-instrument). */ -const InstrumentForm = ({meta, elements, showRequired, errorMessage, onUpdate, onSave}) => { +const InstrumentForm = ({meta, elements, showRequired, errorMessage, onUpdate, onSave, saveText, saveWarning}) => { return (
@@ -19,7 +19,7 @@ const InstrumentForm = ({meta, elements, showRequired, errorMessage, onUpdate, o renderElement(element, index, onUpdate, showRequired && element.Options.RequireResponse) )) } - +
); }; @@ -145,11 +145,14 @@ function renderDate(element, key, onUpdate, isRequired) { ) } -const SaveButton = ({onClick}) => { +const SaveButton = ({onClick, saveText, saveWarning}) => { return ( - +
+ +

{saveWarning}

+
); } diff --git a/jsx/InstrumentFormContainer.js b/jsx/InstrumentFormContainer.js index 5c2658606da..a72d2e871c3 100644 --- a/jsx/InstrumentFormContainer.js +++ b/jsx/InstrumentFormContainer.js @@ -17,14 +17,32 @@ class InstrumentFormContainer extends React.Component { data: this.props.initialData, localizedInstrument: localizeInstrument(this.props.instrument, this.props.lang), showRequired: false, - errorMessage: null + errorMessage: null, }; - + this.updateInstrumentData = this.updateInstrumentData.bind(this); this.incompleteRequiredFieldExists = this.incompleteRequiredFieldExists.bind(this); this.onSaveButtonClick = this.onSaveButtonClick.bind(this); } + getSaveText(lang) { + switch(lang) { + case 'en-ca': + return 'Save'; + case 'fr-ca': + return 'Enregistrer'; + } + } + + getSaveWarning(lang) { + switch(lang) { + case 'en-ca': + return 'You cannot modify your answers after clicking this button. Please ensure all answers are correct.'; + case 'fr-ca': + return 'Vous ne pouvez pas modifier vos réponses après avoir cliqué sur ce bouton. Assurez-vous que toutes les réponses sont correctes.'; + } + } + /** * This function is called when the user inputs or updates an instrument * field. It is responsible for updating `state.data`, which involves not @@ -186,7 +204,7 @@ class InstrumentFormContainer extends React.Component { render() { const { data, localizedInstrument } = this.state; - const { context, options } = this.props; + const { context, options, lang } = this.props; return ( ); }