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 (
);
}