Split wizard to two controls: wizard and wizard-with-tooltips

beda-software · Nov 28, 2024 · d08b288 · d08b288
1 parent 2502436
commit d08b288
Show file tree

Hide file tree

Showing 8 changed files with 395 additions and 309 deletions.
diff --git a/src/components/BaseQuestionnaireResponseForm/FormFooter.tsx b/src/components/BaseQuestionnaireResponseForm/FormFooter.tsx
@@ -22,10 +22,12 @@ export interface Props extends BaseQuestionnaireResponseFormProps {
     debouncedSaveDraft?: DebouncedFunc<(currentFormValues: FormItems) => Promise<void>>;
     className?: string | undefined;
     style?: CSSProperties | undefined;
+    submitDisabled?: boolean;
 }
 
 export function FormFooter(props: Props) {
     const {
+        formData,
         readOnly,
         onCancel,
         FormFooterComponent,
@@ -38,22 +40,29 @@ export function FormFooter(props: Props) {
         setDraftSaveResponse,
         className,
         style,
+        submitDisabled: initialSubmitDisabled,
     } = props;
 
     const formValues = useWatch();
+    const assembledFromQuestionnaireId = formData.context.questionnaire.assembledFrom;
 
     if (readOnly) {
         return null;
     }
 
     const submitLoading = submitting;
-    const submitDisabled = submitting;
+    const submitDisabled = submitting || initialSubmitDisabled;
 
     const draftLoading = draftSaveResponse && isLoading(draftSaveResponse);
     const draftSaved = draftSaveResponse && isSuccess(draftSaveResponse);
-    const draftDisabled = draftSaveResponse && isLoading(draftSaveResponse);
+
+    const isSomeButtonInLoading = submitLoading || draftLoading;
 
     const renderDraftButton = () => {
+        if (!assembledFromQuestionnaireId) {
+            return null;
+        }
+
         if (!setDraftSaveResponse || !debouncedSaveDraft) {
             return null;
         }
@@ -62,7 +71,7 @@ export function FormFooter(props: Props) {
             return (
                 <Button
                     loading={draftLoading}
-                    disabled={draftDisabled || submitLoading}
+                    disabled={isSomeButtonInLoading}
                     onClick={() => debouncedSaveDraft(formValues)}
                 >
                     <Trans>Save as draft</Trans>
@@ -99,7 +108,12 @@ export function FormFooter(props: Props) {
                 <S.Footer className={className} style={style}>
                     {renderDraftButton()}
                     {onCancel && (
-                        <Button type="default" onClick={onCancel} data-testid="cancel-button">
+                        <Button
+                            type="default"
+                            onClick={onCancel}
+                            data-testid="cancel-button"
+                            disabled={isSomeButtonInLoading}
+                        >
                             {cancelButtonTitle ?? <Trans>Cancel</Trans>}
                         </Button>
                     )}
@@ -108,7 +122,7 @@ export function FormFooter(props: Props) {
                         htmlType="submit"
                         data-testid="submit-button"
                         loading={submitLoading}
-                        disabled={submitDisabled || draftLoading}
+                        disabled={submitDisabled || isSomeButtonInLoading}
                     >
                         {saveButtonTitle ?? <Trans>Save</Trans>}
                     </Button>

diff --git a/src/components/BaseQuestionnaireResponseForm/controls.tsx b/src/components/BaseQuestionnaireResponseForm/controls.tsx
@@ -28,7 +28,7 @@ import {
     Grid,
 } from './widgets';
 import { Display } from './widgets/display';
-import { GroupWizard } from './widgets/GroupWizard';
+import { GroupWizard, GroupWizardWithTooltips } from './widgets/GroupWizard';
 import { PasswordInput } from './widgets/PasswordInput';
 import { QuestionReference } from './widgets/reference';
 import { ReferenceRadioButton } from './widgets/ReferenceRadioButton';
@@ -75,4 +75,5 @@ export const groupControlComponents: ItemControlGroupItemComponentMapping = {
     'blood-pressure': BloodPressure,
     'time-range-picker': TimeRangePickerControl,
     wizard: GroupWizard,
+    'wizard-with-tooltips': GroupWizardWithTooltips,
 };
diff --git a/src/components/BaseQuestionnaireResponseForm/index.tsx b/src/components/BaseQuestionnaireResponseForm/index.tsx
@@ -266,5 +266,9 @@ export function BaseQuestionnaireResponseForm(props: BaseQuestionnaireResponseFo
 }
 
 function isGroupWizard(q: FCEQuestionnaire) {
-    return q.item?.some((i) => i.itemControl?.coding?.[0]?.code === 'wizard');
+    return q.item?.some((i) => {
+        const itemControlCode = i.itemControl?.coding?.[0]?.code;
+
+        return itemControlCode && ['wizard', 'wizard-with-tooltips'].includes(itemControlCode);
+    });
 }