diff --git a/survey-frontend/src/SurveyComponent.tsx b/survey-frontend/src/SurveyComponent.tsx index f4cb81bc97e908fadd8a198a068f0e53be46bbd2..bc9607b3bc31e1e1c1a419648c139cfd06d13f45 100644 --- a/survey-frontend/src/SurveyComponent.tsx +++ b/survey-frontend/src/SurveyComponent.tsx @@ -5,35 +5,7 @@ import { VerificationStatus } from './Schema'; function SurveyComponent({ surveyModel, verificationStatus }) { - function setVerifyButton(question: Question, state: VerificationStatus) { - verificationStatus.current.set(question.name, state); - - const btn = document.createElement("button"); - btn.type = "button"; - btn.className = "sv-action-bar-item verification"; - btn.innerHTML = state; - - if (state == VerificationStatus.Unverified) { - btn.innerHTML = "Verify last years data"; - btn.className += " verification-required"; - btn.onclick = function () { - question.validate(); - setVerifyButton(question, VerificationStatus.Verified) - } - } else { - btn.className += " verification-ok"; - } - - const selector = '[data-name="' + question.name + '"]'; - const header = document.querySelector(selector)?.querySelector('h5'); - const old = header?.querySelector(".verification"); - if (old) { - old.replaceWith(btn); - } else { - header?.appendChild(btn); - } - } function validateWebsiteUrl(params) { const value = params[0]; @@ -50,6 +22,42 @@ function SurveyComponent({ surveyModel, verificationStatus }) { useEffect(() => { + function setVerifyButton(question: Question, state: VerificationStatus) { + + verificationStatus.current.set(question.name, state); + + const btn = document.createElement("button"); + btn.type = "button"; + btn.className = "sv-action-bar-item verification"; + btn.innerHTML = state; + + if (state == VerificationStatus.Unverified) { + btn.innerHTML = "No change from previous year"; + btn.className += " verification-required"; + btn.onclick = function () { + question.validate(); + setVerifyButton(question, VerificationStatus.Verified) + } + } else { + btn.className += " verification-ok"; + } + + const selector = '[data-name="' + question.name + '"]'; + const header = document.querySelector(selector)?.querySelector('h5'); + + // check if the header has class 'sv-header-flex' and if not, add it + if (header && !header.classList.contains('sv-header-flex')) { + header.classList.add('sv-header-flex'); + } + + const old = header?.querySelector(".verification"); + if (old) { + old.replaceWith(btn); + } else { + header?.appendChild(btn); + } + } + FunctionFactory.Instance.register("validateWebsiteUrl", validateWebsiteUrl); surveyModel.onAfterRenderQuestion.add(function (survey, options) { @@ -89,13 +97,9 @@ function SurveyComponent({ surveyModel, verificationStatus }) { } }); - }, [surveyModel]); + }, [surveyModel, verificationStatus]); - return ( - <div className="survey-container"> - <Survey model={surveyModel} /> - </div> - ); + return <Survey model={surveyModel} /> } export default SurveyComponent;