minor fixes

openmrs · Oct 15, 2024 · a329aec · a329aec
1 parent 5a50c2b
commit a329aec
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 39 deletions.
diff --git a/src/components/interactive-builder/add-question.modal.tsx b/src/components/interactive-builder/add-question.modal.tsx
@@ -323,25 +323,6 @@ const AddQuestionModal: React.FC<AddQuestionModalProps> = ({
         <ModalBody hasScrollingContent>
           <FormGroup legendText={''}>
             <Stack gap={5}>
-              <Select
-                value={renderingType}
-                onChange={(event: React.ChangeEvent<HTMLSelectElement>) =>
-                  setRenderingType(event.target.value as RenderType)
-                }
-                id="renderingType"
-                invalidText={t('validRenderingTypeRequired', 'A valid rendering type value is required')}
-                labelText={t('renderingType', 'Rendering type')}
-                required
-              >
-                {!renderingType && <SelectItem text={t('chooseRenderingType', 'Choose a rendering type')} value="" />}
-
-                {questionTypes.filter((questionType) => questionType !== 'obs').includes(questionType as Exclude<QuestionType, 'obs'>)
-                  ? renderTypeOptions[questionType].map((type, key) => (
-                      <SelectItem key={`${questionType}-${key}`} text={type} value={type} />
-                    ))
-                  : fieldTypes.map((type, key) => <SelectItem key={key} text={type} value={type} />)}
-              </Select>
-
               {renderingType === 'markdown' ? <MarkdownQuestion onValueChange={setQuestionValue}/> : (
                 <TextInput
                 id="questionLabel"
@@ -426,6 +407,25 @@ const AddQuestionModal: React.FC<AddQuestionModalProps> = ({
                 </>
               )}
 
+              <Select
+                value={renderingType}
+                onChange={(event: React.ChangeEvent<HTMLSelectElement>) =>
+                  setRenderingType(event.target.value as RenderType)
+                }
+                id="renderingType"
+                invalidText={t('validRenderingTypeRequired', 'A valid rendering type value is required')}
+                labelText={t('renderingType', 'Rendering type')}
+                required
+              >
+                {!renderingType && <SelectItem text={t('chooseRenderingType', 'Choose a rendering type')} value="" />}
+
+                {questionTypes.filter((questionType) => questionType !== 'obs').includes(questionType as Exclude<QuestionType, 'obs'>)
+                  ? renderTypeOptions[questionType].map((type, key) => (
+                      <SelectItem key={`${questionType}-${key}`} text={type} value={type} />
+                    ))
+                  : fieldTypes.map((type, key) => <SelectItem key={key} text={type} value={type} />)}
+              </Select>
+
               {questionType === 'personAttribute' && (
                 <div>
                   <FormLabel className={styles.label}>
@@ -859,7 +859,8 @@ const AddQuestionModal: React.FC<AddQuestionModalProps> = ({
             !renderingType ||
             (questionType === 'patientIdentifier' && !selectedPatientIdetifierType)) &&
             renderingType !== 'markdown') ||
-            !questionId
+            !questionId ||
+            !questionValue
           }
           onClick={handleCreateQuestion}
         >

diff --git a/src/components/interactive-builder/edit-question.modal.tsx b/src/components/interactive-builder/edit-question.modal.tsx
@@ -375,20 +375,7 @@ const EditQuestionModal: React.FC<EditQuestionModalProps> = ({
       <Form className={styles.form} onSubmit={(event: React.SyntheticEvent) => event.preventDefault()}>
         <ModalBody hasScrollingContent>
           <Stack gap={5}>
-            <Select
-                defaultValue={questionToEdit.questionOptions.rendering}
-                onChange={(event: React.ChangeEvent<HTMLSelectElement>) => setFieldType(event.target.value as RenderType)}
-                id="renderingType"
-                invalidText={t('validFieldTypeRequired', 'A valid field type value is required')}
-                labelText={t('renderingType', 'Rendering type')}
-                required
-              >
-                {!fieldType && <SelectItem text={t('chooseRenderingType', 'Choose a rendering type')} value="" />}
-                {fieldTypes.map((fieldType, key) => (
-                  <SelectItem text={fieldType} value={fieldType} key={key} />
-                ))}
-            </Select>
-            {questionToEdit.questionOptions.rendering === 'markdown' ? <MarkdownQuestion palceHolder={questionToEdit.value} onValueChange={setQuestionValue}/> : (
+            {questionToEdit.questionOptions.rendering === 'markdown' ? <MarkdownQuestion placeholder={questionToEdit.value} onValueChange={setQuestionValue}/> : (
               <TextInput
                 defaultValue={questionToEdit.label}
                 id={questionToEdit.id}
@@ -455,6 +442,19 @@ const EditQuestionModal: React.FC<EditQuestionModalProps> = ({
                 </Select>
               </>
             )}
+            <Select
+                defaultValue={questionToEdit.questionOptions.rendering}
+                onChange={(event: React.ChangeEvent<HTMLSelectElement>) => setFieldType(event.target.value as RenderType)}
+                id="renderingType"
+                invalidText={t('validFieldTypeRequired', 'A valid field type value is required')}
+                labelText={t('renderingType', 'Rendering type')}
+                required
+              >
+                {!fieldType && <SelectItem text={t('chooseRenderingType', 'Choose a rendering type')} value="" />}
+                {fieldTypes.map((fieldType, key) => (
+                  <SelectItem text={fieldType} value={fieldType} key={key} />
+                ))}
+            </Select>
             {fieldType === 'number' ? (
               <>
                 <TextInput

diff --git a/src/components/interactive-builder/markdown-question.component.tsx b/src/components/interactive-builder/markdown-question.component.tsx
@@ -6,12 +6,12 @@ import rehypeRaw from 'rehype-raw';
 import styles from './markdown-question.scss';
 
 interface MarkdownQuestionProps {
-  palceHolder?: string;
+  placeholder?: string;
   onValueChange: (value: string) => void;
 }
 
-const MarkdownQuestion: React.FC<MarkdownQuestionProps> = ({ palceHolder, onValueChange }) => {
-  const [value, setValue] = React.useState(palceHolder || "");
+const MarkdownQuestion: React.FC<MarkdownQuestionProps> = ({ placeholder, onValueChange }) => {
+  const [value, setValue] = React.useState(placeholder || "");
   const [selectedTab, setSelectedTab] = React.useState<"write" | "preview">("write");
 
   const handleEditorChange = (newValue: string) => {
@@ -35,8 +35,8 @@ const MarkdownQuestion: React.FC<MarkdownQuestionProps> = ({ palceHolder, onValu
           Promise.resolve(
             <ReactMarkdown
               children={Array.isArray(markdown) ? markdown.join('\n') : markdown}
-              remarkPlugins={[remarkGfm]} // Adds support for GFM features
-              rehypePlugins={[rehypeRaw]} // Allows HTML like <sub> and <sup>
+              remarkPlugins={[remarkGfm]}
+              rehypePlugins={[rehypeRaw]}
             />
           )
         }