diff --git a/awx/ui_next/src/components/FormField/TextAndCheckboxField.jsx b/awx/ui_next/src/components/FormField/TextAndCheckboxField.jsx new file mode 100644 index 0000000000..5cbf70acf9 --- /dev/null +++ b/awx/ui_next/src/components/FormField/TextAndCheckboxField.jsx @@ -0,0 +1,85 @@ +import React, { useState } from 'react'; +import { useField } from 'formik'; + +import { Checkbox, FormGroup, TextInput } from '@patternfly/react-core'; +import styled from 'styled-components'; +import Popover from '../Popover'; + +const InputWrapper = styled.span` + && { + display: flex; + } +`; +function TextAndCheckboxField({ + id, + label, + helperText, + isRequired, + isValid, + tooltip, + name, + type, + rows, + ...rest +}) { + const [field, meta] = useField({ name }); + const [fields, setFields] = useState(field.value.split('\n')); + let array = field.value.split('\n'); + + return ( + } + > + {fields + .map((v, i) => ( + + + { + if (value === '') { + setFields(fields.filter((f, index) => i !== index)); + } else { + setFields( + fields.map((f, index) => { + if (i === index) { + return value; + } + return f; + }) + ); + } + }} + /> + + )) + .concat( + + + { + setFields([...fields, value]); + }} + /> + + )} + + ); +} + +export default TextAndCheckboxField; diff --git a/awx/ui_next/src/components/FormField/index.js b/awx/ui_next/src/components/FormField/index.js index bd1e65ef92..63e127bcf1 100644 --- a/awx/ui_next/src/components/FormField/index.js +++ b/awx/ui_next/src/components/FormField/index.js @@ -4,3 +4,4 @@ export { default as PasswordField } from './PasswordField'; export { default as PasswordInput } from './PasswordInput'; export { default as FormSubmitError } from './FormSubmitError'; export { default as ArrayTextField } from './ArrayTextField'; +export { default as TextAndCheckboxField } from './TextAndCheckboxField'; diff --git a/awx/ui_next/src/screens/Template/Survey/SurveyQuestionForm.jsx b/awx/ui_next/src/screens/Template/Survey/SurveyQuestionForm.jsx index 93f47aba77..4469ffa532 100644 --- a/awx/ui_next/src/screens/Template/Survey/SurveyQuestionForm.jsx +++ b/awx/ui_next/src/screens/Template/Survey/SurveyQuestionForm.jsx @@ -10,7 +10,9 @@ import FormField, { CheckboxField, PasswordField, FormSubmitError, + TextAndCheckboxField, } from '../../../components/FormField'; + import AnsibleSelect from '../../../components/AnsibleSelect'; import Popover from '../../../components/Popover'; import { @@ -75,7 +77,10 @@ function SurveyQuestionForm({ const defaultIsNotAvailable = choices => { return defaultValue => { let errorMessage; - const found = [...defaultValue].every(dA => choices.indexOf(dA) > -1); + const found = [...defaultValue].every(dA => { + console.log(dA, '\n', choices); + return choices.indexOf(dA) > -1; + }); if (!found) { errorMessage = t`Default choice must be answered from the choices listed.`; @@ -203,7 +208,7 @@ function SurveyQuestionForm({ )} {['multiplechoice', 'multiselect'].includes(formik.values.type) && ( <> -