From e9248952cc718e8a3f829b7a90bbd47f3ee01c1b Mon Sep 17 00:00:00 2001 From: Radoslaw Szwajkowski Date: Thu, 18 Apr 2024 19:29:57 +0200 Subject: [PATCH] Enable save on assessment change The change is detected by comparing form values with initial values. Properties checked: 1. stakeholders 2. stakeholder groups 3. questions Signed-off-by: Radoslaw Szwajkowski --- .../assessment-wizard/assessment-wizard.tsx | 27 +++++++++++++------ .../custom-wizard-footer.tsx | 18 ++++++++++--- .../tests/custom-wizard-footer.test.tsx | 1 + 3 files changed, 35 insertions(+), 11 deletions(-) diff --git a/client/src/app/pages/assessment/components/assessment-wizard/assessment-wizard.tsx b/client/src/app/pages/assessment/components/assessment-wizard/assessment-wizard.tsx index 5fabca265..7c2e1950b 100644 --- a/client/src/app/pages/assessment/components/assessment-wizard/assessment-wizard.tsx +++ b/client/src/app/pages/assessment/components/assessment-wizard/assessment-wizard.tsx @@ -114,6 +114,8 @@ export const AssessmentWizard: React.FC = ({ return comments; }, [assessment]); + const initialStakeholders = assessment?.stakeholders ?? []; + const initialStakeholderGroups = assessment?.stakeholderGroups ?? []; const initialQuestions = useMemo(() => { const questions: { [key: string]: string | undefined } = {}; if (assessment) { @@ -146,8 +148,8 @@ export const AssessmentWizard: React.FC = ({ resolver: yupResolver(validationSchema), mode: "all", defaultValues: { - stakeholders: assessment?.stakeholders ?? [], - stakeholderGroups: assessment?.stakeholderGroups ?? [], + stakeholders: initialStakeholders, + stakeholderGroups: initialStakeholderGroups, [COMMENTS_KEY]: initialComments, [QUESTIONS_KEY]: initialQuestions, @@ -160,7 +162,6 @@ export const AssessmentWizard: React.FC = ({ const isValid = methods.formState.isValid; const isSubmitting = methods.formState.isSubmitting; const isValidating = methods.formState.isValidating; - const watchAllFields = methods.watch(); const disableNavigation = !isValid || isSubmitting; @@ -439,11 +440,20 @@ export const AssessmentWizard: React.FC = ({ } }; - const haveAnyQuestionBeenAnswered = () => { - const questions = values[QUESTIONS_KEY]; - return Object.values(questions).some( - (answer) => answer !== null && answer !== "" + const isAssessmentChanged = () => { + const questionsChanged = Object.entries(values[QUESTIONS_KEY]).some( + ([name, answer]) => initialQuestions[name] !== answer ); + const stakeholdersChanged = + initialStakeholders.length !== values.stakeholders.length || + initialStakeholderGroups.length !== values.stakeholderGroups.length || + !values.stakeholders.every(({ id, name }) => + initialStakeholders.find((it) => it.id === id && it.name === name) + ) || + !values.stakeholderGroups.every(({ id, name }) => + initialStakeholderGroups.find((it) => it.id === id && it.name === name) + ); + return questionsChanged || stakeholdersChanged; }; const handleCancelAssessment = () => { @@ -486,6 +496,7 @@ export const AssessmentWizard: React.FC = ({ isLastStep={step === sortedSections.length} onNext={() => setCurrentStep(step + 1)} onBack={() => setCurrentStep(step - 1)} + isAssessmentChanged={isAssessmentChanged()} isDisabled={ isSubmitting || isValidating || @@ -574,7 +585,7 @@ export const AssessmentWizard: React.FC = ({ onClose={() => setAssessmentToCancel(null)} onConfirm={() => handleCancelAssessment()} message={ - haveAnyQuestionBeenAnswered() + isAssessmentChanged() ? t("message.unsavedChanges") : t("message.noAnswers") } diff --git a/client/src/app/pages/assessment/components/custom-wizard-footer/custom-wizard-footer.tsx b/client/src/app/pages/assessment/components/custom-wizard-footer/custom-wizard-footer.tsx index d1efbe933..97c4416f3 100644 --- a/client/src/app/pages/assessment/components/custom-wizard-footer/custom-wizard-footer.tsx +++ b/client/src/app/pages/assessment/components/custom-wizard-footer/custom-wizard-footer.tsx @@ -13,6 +13,7 @@ export interface CustomWizardFooterProps { isDisabled: boolean; isFormInvalid: boolean; isSaveAsDraftDisabled?: boolean; + isAssessmentChanged?: boolean; enableNext?: boolean; onNext?: () => void; onBack?: () => void; @@ -27,6 +28,7 @@ export const CustomWizardFooter: React.FC = ({ isDisabled, isFormInvalid, isSaveAsDraftDisabled, + isAssessmentChanged, enableNext, onNext, onBack, @@ -35,7 +37,7 @@ export const CustomWizardFooter: React.FC = ({ onSaveAsDraft, }) => { const { t } = useTranslation(); - const { goToNextStep, goToPrevStep, close, activeStep } = useWizardContext(); + const { goToNextStep, goToPrevStep, close } = useWizardContext(); return ( <> @@ -45,7 +47,12 @@ export const CustomWizardFooter: React.FC = ({