From 35a9e7e56546e7d6c1b78976e2020af2e9ee0b10 Mon Sep 17 00:00:00 2001
From: Alex Corey <alex.swansboro@gmail.com>
Date: Wed, 14 Apr 2021 10:34:31 -0400
Subject: [PATCH] some refactoring, and checking and unchecking boxes

---
 .../FormField/TextAndCheckboxField.jsx        | 85 +++++++++++++------
 .../Template/Survey/SurveyQuestionForm.jsx    |  5 +-
 2 files changed, 62 insertions(+), 28 deletions(-)

diff --git a/awx/ui_next/src/components/FormField/TextAndCheckboxField.jsx b/awx/ui_next/src/components/FormField/TextAndCheckboxField.jsx
index 5cbf70acf9..8ece9c3d6e 100644
--- a/awx/ui_next/src/components/FormField/TextAndCheckboxField.jsx
+++ b/awx/ui_next/src/components/FormField/TextAndCheckboxField.jsx
@@ -1,13 +1,14 @@
 import React, { useState } from 'react';
-import { useField } from 'formik';
+import { useField, useFormikContext } from 'formik';
 
-import { Checkbox, FormGroup, TextInput } from '@patternfly/react-core';
+import { Checkbox, FormGroup, TextInput, Radio } from '@patternfly/react-core';
 import styled from 'styled-components';
 import Popover from '../Popover';
 
 const InputWrapper = styled.span`
   && {
     display: flex;
+    padding-bottom: 20px;
   }
 `;
 function TextAndCheckboxField({
@@ -18,62 +19,96 @@ function TextAndCheckboxField({
   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');
+  const { values: formikValues } = useFormikContext();
+  const [choicesField, choicesMeta, choicesHelpers] = useField('choices');
+  // const [fields, setFields] = useState(choicesField.value.split('\n'));
+  // const [defaultValue, setDefaultValue] = useState(
+  //   formikValues.default.split('\n')
+  // );
+  const [, , defaultHelpers] = useField('default');
 
+  const [isNewValueChecked, setIsNewValueChecked] = useState(false);
+  console.log('set');
+  const choicesSplit = choicesField.value.split('\n');
+  const defaultSplit = formikValues.default.split('\n');
   return (
     <FormGroup
       fieldId={id}
       helperText={helperText}
-      helperTextInvalid={meta.error}
+      helperTextInvalid={choicesMeta.error}
       isRequired={isRequired}
       validated={isValid ? 'default' : 'error'}
       label={label}
       labelIcon={<Popover content={tooltip} />}
     >
-      {fields
+      {choicesSplit
         .map((v, i) => (
           <InputWrapper>
-            <Checkbox />
+            {formikValues.type === 'multiselect' ? (
+              <Checkbox
+                isChecked={defaultSplit.includes(v)}
+                onChange={() =>
+                  defaultSplit.includes(v)
+                    ? defaultHelpers.setValue(
+                        defaultSplit.filter(d => d !== v).join('\n')
+                      )
+                    : defaultHelpers.setValue(
+                        formikValues.default.concat(`\n${v}`)
+                      )
+                }
+              />
+            ) : (
+              <Radio
+                isChecked={defaultSplit.includes(v)}
+                onChange={defaultHelpers.setValue(`${v}`)}
+              />
+            )}
             <TextInput
               id={id}
               isRequired={isRequired}
               validated={isValid ? 'default' : 'error'}
               value={v}
-              type={type}
               onChange={value => {
-                if (value === '') {
-                  setFields(fields.filter((f, index) => i !== index));
-                } else {
-                  setFields(
-                    fields.map((f, index) => {
-                      if (i === index) {
-                        return value;
-                      }
-                      return f;
-                    })
-                  );
-                }
+                defaultHelpers.setValue(
+                  defaultSplit.filter(d => d !== v).join('\n')
+                );
+
+                const newFields = choicesSplit
+                  .map((choice, index) => (i === index ? value : choice))
+                  .join('\n');
+
+                return value === ''
+                  ? choicesHelpers.setValue(
+                      choicesSplit.filter(d => d !== v).join('\n')
+                    )
+                  : choicesHelpers.setValue(newFields);
               }}
             />
           </InputWrapper>
         ))
         .concat(
           <InputWrapper>
-            <Checkbox />
+            {formikValues.type === 'multiselect' ? (
+              <Checkbox
+                isChecked={isNewValueChecked}
+                onChange={setIsNewValueChecked}
+              />
+            ) : (
+              <Radio
+                isChecked={isNewValueChecked}
+                onChange={setIsNewValueChecked}
+              />
+            )}
             <TextInput
               id={id}
               isRequired={isRequired}
               validated={isValid ? 'default' : 'error'}
               value=""
-              type={type}
               onChange={(value, event) => {
-                setFields([...fields, value]);
+                choicesHelpers.setValue([...choicesSplit, value].join('\n'));
               }}
             />
           </InputWrapper>
diff --git a/awx/ui_next/src/screens/Template/Survey/SurveyQuestionForm.jsx b/awx/ui_next/src/screens/Template/Survey/SurveyQuestionForm.jsx
index 4469ffa532..d4c8d3faef 100644
--- a/awx/ui_next/src/screens/Template/Survey/SurveyQuestionForm.jsx
+++ b/awx/ui_next/src/screens/Template/Survey/SurveyQuestionForm.jsx
@@ -78,7 +78,6 @@ function SurveyQuestionForm({
     return defaultValue => {
       let errorMessage;
       const found = [...defaultValue].every(dA => {
-        console.log(dA, '\n', choices);
         return choices.indexOf(dA) > -1;
       });
 
@@ -211,9 +210,9 @@ function SurveyQuestionForm({
                 <TextAndCheckboxField
                   id="question-options"
                   name="choices"
-                  type="textarea"
+                  type={formik.values.type}
                   label={t`Multiple Choice Options`}
-                  validate={required(null)}
+                  validate={required()}
                   tooltip={t`Each answer choice must be on a separate line.`}
                   isRequired
                   rows="10"