Skip to content

Commit

Permalink
Merge pull request #27 from DaleMcGrew/Dale_WCC-Feb10-2025
Browse files Browse the repository at this point in the history 
Added ability to edit Input placeholder value in EditQuestionForm. Got copyFieldMappingRule working again. Started converting captureQuestionnaireResponsesListRetrieveData to captureAnswerListRetrieveData. Added helper functions getAnswerToQuestion, getAnswerValueToQuestion, getQuestionById and getQuestionsForQuestionnaire. Moved AnswerQuestionsForm.jsx to AnswerQuestions.jsx and got it working.
  • Loading branch information
@DaleMcGrew
DaleMcGrew authored Feb 13, 2025
2 parents 8a761f7 + 18bde12 commit 24a5fe6
Show file tree
Hide file tree
Showing 8 changed files with 556 additions and 367 deletions.
4 changes: 2 additions & 2 deletions src/App.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ import Login from './js/pages/Login';

// Root URL pages

// const AnswerQuestionsForm = React.lazy(() => import(/* webpackChunkName: 'AnswerQuestionsForm' */ './js/pages/AnswerQuestionsForm'));
const AnswerQuestions = React.lazy(() => import(/* webpackChunkName: 'AnswerQuestions' */ './js/pages/AnswerQuestions'));
const FAQ = React.lazy(() => import(/* webpackChunkName: 'FAQ' */ './js/pages/FAQ'));
// const Footer = React.lazy(() => import(/* webpackChunkName: 'Footer' */ './js/components/Navigation/Footer'));
const Header = React.lazy(() => import(/* webpackChunkName: 'Header' */ './js/components/Navigation/Header'));
Expand Down Expand Up @@ -76,7 +76,7 @@ function App () {
<Route path="/faq" element={<FAQ />} />
</Route>
<Route path="/login" element={<Login />} />
{/* <Route path="/q/:questionnaireId/:personId" element={<AnswerQuestionsForm />} /> */}
<Route path="/q/:questionnaireId/:personId" element={<AnswerQuestions />} />
<Route path="/questionnaire/:questionnaireId" element={<QuestionnaireQuestionList />} />
<Route path="/system-settings" element={<SystemSettings />} />
<Route path="/tasks" element={<Tasks />} />
Expand Down
104 changes: 59 additions & 45 deletions src/js/components/Questionnaire/EditQuestionForm.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@ const EditQuestionForm = ({ classes }) => {
const [question] = useState(getAppContextValue('selectedQuestion'));
const [questionnaire] = useState(getAppContextValue('selectedQuestionnaire'));
const [fieldMappingRuleValue, setFieldMappingRuleValue] = useState('');
const [placeholderValue, setPlaceholderValue] = useState('');
const [questionInstructionsValue, setQuestionInstructionsValue] = useState('');
const [questionTextValue, setQuestionTextValue] = useState('');
const [requireAnswerValue, setRequireAnswerValue] = useState(false);
Expand All @@ -48,45 +49,48 @@ const EditQuestionForm = ({ classes }) => {
const [showFieldMappingOptions, setShowFieldMappingOptions] = useState(false);
const [radioValue, setRadioValue] = useState('STRING');

const fieldMappingRuleFldRef = useRef('');
const questionInstructionsFldRef = useRef('');
const questionTextFldRef = useRef('');
const requireAnswerFldRef = useRef(false);
const statusActiveFldRef = useRef(true);
const formatRadioFldRef = useRef(true);
const fieldMappingRuleInputRef = useRef('');
const formatRadioInputRef = useRef(true);
const placeholderInputRef = useRef('');
const questionInstructionsInputRef = useRef('');
const questionTextInputRef = useRef('');
const requireAnswerInputRef = useRef(false);
const statusActiveInputRef = useRef(true);

useEffect(() => {
if (question) {
setRadioValue(question.answerType);
setFieldMappingRuleValue(question.fieldMappingRule);
setPlaceholderValue(question.questionPlaceholder);
setQuestionInstructionsValue(question.questionInstructions);
setQuestionTextValue(question.questionText);
setRadioValue(question.answerType);
setRequireAnswerValue(question.requireAnswer);
setStatusActiveValue(question.statusActive);
} else {
setRadioValue('STRING');
setFieldMappingRuleValue('');
setPlaceholderValue('');
setQuestionInstructionsValue('');
setQuestionTextValue('');
setRadioValue('STRING');
setRequireAnswerValue(false);
setStatusActiveValue(true);
}
}, [question]);

// eslint-disable-next-line no-unused-vars
const copyFieldMappingRule = (fieldMappingRule) => {
// // console.log('EditQuestionForm copyFieldMappingRule');
// // openSnackbar({ message: 'Copied!' });
// setFieldMappingRuleCopied(fieldMappingRule);
// setInputValues({ ...inputValues, ['fieldMappingRule']: fieldMappingRule });
// // Hack 1/14/25 to get compile
// // AppObservableStore.setGlobalVariableState('fieldMappingRuleChanged', true);
// // AppObservableStore.setGlobalVariableState('fieldMappingRuleToBeSaved', fieldMappingRule);
// // End Hack 1/14/25 to get compile
// setSaveButtonActive(true);
// setTimeout(() => {
// setFieldMappingRuleCopied('');
// }, 1500);
// openSnackbar({ message: 'Copied!' });
setFieldMappingRuleCopied(fieldMappingRule);
setFieldMappingRuleValue(fieldMappingRule);
if (fieldMappingRuleInputRef.current) {
fieldMappingRuleInputRef.current.value = fieldMappingRule;
fieldMappingRuleInputRef.current.focus();
// console.log('fieldMappingRuleInputRef.current.value:', fieldMappingRuleInputRef.current.value);
}
setSaveButtonActive(true);
setTimeout(() => {
setFieldMappingRuleCopied('');
}, 1500);
};

const saveQuestion = () => {
Expand All @@ -96,11 +100,12 @@ const EditQuestionForm = ({ classes }) => {
};
const params = {
answerType: radioValue,
// fieldMappingRule: fieldMappingRuleFldRef.current.checked,
questionInstructions: questionInstructionsFldRef.current.value,
questionText: questionTextFldRef.current.value,
requireAnswer: (requireAnswerFldRef.current.value === 'on'),
statusActive: (statusActiveFldRef.current.value === 'on'),
fieldMappingRule: fieldMappingRuleInputRef.current.value,
questionPlaceholder: placeholderInputRef.current.value,
questionInstructions: questionInstructionsInputRef.current.value,
questionText: questionTextInputRef.current.value,
requireAnswer: (requireAnswerInputRef.current.value === 'on'),
statusActive: (statusActiveInputRef.current.value === 'on'),
};
const requestParams = makeRequestParams(plainParams, params);
mutate(requestParams);
Expand All @@ -113,9 +118,7 @@ const EditQuestionForm = ({ classes }) => {
};

const updateSaveButton = () => {
if (questionTextFldRef.current.value && questionTextFldRef.current.value.length &&
questionInstructionsFldRef.current.value && questionInstructionsFldRef.current.value.length &&
questionInstructionsFldRef.current.value && questionInstructionsFldRef.current.value.length) {
if (questionTextInputRef.current.value && questionTextInputRef.current.value.length) {
if (!saveButtonActive) {
setSaveButtonActive(true);
}
Expand All @@ -136,7 +139,7 @@ const EditQuestionForm = ({ classes }) => {
autoFocus
defaultValue={questionTextValue}
id="questionTextToBeSaved"
inputRef={questionTextFldRef}
inputRef={questionTextInputRef}
label="Question"
margin="dense"
multiline
Expand All @@ -149,7 +152,7 @@ const EditQuestionForm = ({ classes }) => {
<TextField
defaultValue={questionInstructionsValue}
id="questionInstructionsToBeSaved"
inputRef={questionInstructionsFldRef}
inputRef={questionInstructionsInputRef}
label="Special Instructions"
margin="dense"
multiline
Expand All @@ -159,11 +162,22 @@ const EditQuestionForm = ({ classes }) => {
rows={4}
variant="outlined"
/>
<TextField
defaultValue={placeholderValue}
id="questionPlaceholderToBeSaved"
inputRef={placeholderInputRef}
label="Placeholder text when input empty"
margin="dense"
name="questionPlaceholder"
onChange={() => updateSaveButton()}
placeholder="Text in the question input"
variant="outlined"
/>
<FormControl>
<FormLabel id="demo-radio-buttons-group-label">Data format of answer</FormLabel>
<FormLabel id="demo-radio-buttons-group-label">Answer Type</FormLabel>
<RadioGroup
aria-labelledby="demo-radio-buttons-group-label"
inputRef={formatRadioFldRef}
inputRef={formatRadioInputRef}
value={radioValue}
name="radio-buttons-group"
onChange={handleRadioChange}
Expand All @@ -183,7 +197,7 @@ const EditQuestionForm = ({ classes }) => {
className={classes.checkboxRoot}
color="primary"
id="requireAnswerToBeSaved"
inputRef={requireAnswerFldRef}
inputRef={requireAnswerInputRef}
name="requireAnswer"
onChange={() => updateSaveButton()}
/>
Expand All @@ -194,11 +208,11 @@ const EditQuestionForm = ({ classes }) => {
classes={{ label: classes.checkboxLabel }}
control={(
<Checkbox
id="statusActiveToBeSaved"
inputRef={statusActiveFldRef}
checked={Boolean(statusActiveValue)}
className={classes.checkboxRoot}
color="primary"
id="statusActiveToBeSaved"
inputRef={statusActiveInputRef}
name="statusActive"
onChange={() => updateSaveButton()}
/>
Expand All @@ -216,15 +230,15 @@ const EditQuestionForm = ({ classes }) => {
</ShowMappingOptions>
{showFieldMappingOptions && (
<TextField
defaultValue={fieldMappingRuleValue}
id="fieldMappingRuleToBeSaved"
inputRef={fieldMappingRuleFldRef}
inputRef={fieldMappingRuleInputRef}
label="Save answer to this database field"
name="fieldMappingRule"
margin="dense"
variant="outlined"
placeholder="ex/ Person.firstName"
value={fieldMappingRuleValue}
onChange={() => updateSaveButton()}
placeholder="ex/ Person.firstName"
variant="outlined"
/>
)}
{showFieldMappingOptions && (
Expand All @@ -247,8 +261,8 @@ const EditQuestionForm = ({ classes }) => {
classes={{ root: classes.saveQuestionButton }}
color="primary"
disabled={!saveButtonActive}
variant="contained"
onClick={saveQuestion}
variant="contained"
>
Save Question
</Button>
Expand Down Expand Up @@ -280,11 +294,6 @@ const styles = (theme) => ({
},
});

const ShowMappingOptions = styled('div')`
margin-bottom: 10px;
margin-top: 5px;
`;

const CheckboxLabel = styled(FormControlLabel)`
margin-bottom: 0 !important;
`;
Expand All @@ -309,4 +318,9 @@ const OneFieldMappingOption = styled('div')`
display: flex;
`;

const ShowMappingOptions = styled('div')`
margin-bottom: 10px;
margin-top: 5px;
`;

export default withStyles(styles)(EditQuestionForm);
Loading

0 comments on commit 24a5fe6

Please sign in to comment.