diff --git a/client/src/app/api/models.ts b/client/src/app/api/models.ts index 87b50c599b..b9fc7750be 100644 --- a/client/src/app/api/models.ts +++ b/client/src/app/api/models.ts @@ -666,6 +666,7 @@ export interface Section { name: string; questions: Question[]; order: number; + comment?: string; } export interface Question { diff --git a/client/src/app/components/questionnaire-summary/questionnaire-summary.tsx b/client/src/app/components/questionnaire-summary/questionnaire-summary.tsx index aea4bf63dc..26d2907788 100644 --- a/client/src/app/components/questionnaire-summary/questionnaire-summary.tsx +++ b/client/src/app/components/questionnaire-summary/questionnaire-summary.tsx @@ -25,6 +25,7 @@ import QuestionnaireSectionTabTitle from "./components/questionnaire-section-tab import { AxiosError } from "axios"; import { formatPath } from "@app/utils/utils"; import useIsArchetype from "@app/hooks/useIsArchetype"; +import spacing from "@patternfly/react-styles/css/utilities/Spacing/spacing"; export enum SummaryType { Assessment = "Assessment", @@ -215,6 +216,14 @@ const QuestionnaireSummary: React.FC = ({ data={summaryData} hideAnswerKey={summaryType === SummaryType.Assessment} /> + {section?.comment && ( + + Section comments + + {section.comment} + + + )} ); }) || []), 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 75809c0ed0..64e002e708 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 @@ -26,6 +26,7 @@ import { ConfirmDialog } from "@app/components/ConfirmDialog"; import { COMMENTS_KEY, QUESTIONS_KEY, + getCommentFieldName, getQuestionFieldName, } from "../../form-utils"; import { AxiosError } from "axios"; @@ -108,16 +109,15 @@ export const AssessmentWizard: React.FC = ({ (a, b) => a.order - b.order ); - //TODO: Add comments to the sections when/if available from api - // const initialComments = useMemo(() => { - // let comments: { [key: string]: string } = {}; - // if (assessment) { - // assessment.questionnaire.categories.forEach((category) => { - // comments[getCommentFieldName(category, false)] = category.comment || ""; - // }); - // } - // return comments; - // }, [assessment]); + const initialComments = useMemo(() => { + const comments: { [key: string]: string } = {}; + if (assessment) { + assessment.sections.forEach((section) => { + comments[getCommentFieldName(section, false)] = section.comment || ""; + }); + } + return comments; + }, [assessment]); const initialQuestions = useMemo(() => { const questions: { [key: string]: string | undefined } = {}; @@ -154,6 +154,7 @@ export const AssessmentWizard: React.FC = ({ stakeholderGroups: assessment?.stakeholderGroups?.map((sg) => sg.name).sort() ?? [], questions: initialQuestions, + comments: initialComments, [SAVE_ACTION_KEY]: SAVE_ACTION_VALUE.SAVE_AS_DRAFT, }); return () => { @@ -170,7 +171,6 @@ export const AssessmentWizard: React.FC = ({ const disableNavigation = !isValid || isSubmitting; const isFirstStepValid = () => { - // TODO: Wire up stakeholder support for assessment when available const numberOfStakeholdlers = values?.stakeholders?.length || 0; const numberOfGroups = values?.stakeholderGroups?.length || 0; return numberOfStakeholdlers + numberOfGroups > 0; @@ -181,23 +181,11 @@ export const AssessmentWizard: React.FC = ({ return !questionErrors[getQuestionFieldName(question, false)]; }; - //TODO: Add comments to the sections - // const isCommentValid = (category: QuestionnaireCategory): boolean => { - // const commentErrors = errors.comments || {}; - // return !commentErrors[getCommentFieldName(category, false)]; - // }; - const questionHasValue = (question: Question): boolean => { const questionValues = values.questions || {}; const value = questionValues[getQuestionFieldName(question, false)]; return value !== null && value !== undefined && value !== ""; }; - //TODO: Add comments to the sections - // const commentMinLenghtIs1 = (category: QuestionnaireCategory): boolean => { - // const categoryComments = values.comments || {}; - // const value = categoryComments[getCommentFieldName(category, false)]; - // return value !== null && value !== undefined && value.length > 0; - // }; const areAllQuestionsAnswered = (section: Section): boolean => { return ( @@ -227,7 +215,6 @@ export const AssessmentWizard: React.FC = ({ const maxCategoryWithData = [...sortedSections].reverse().find((section) => { return section.questions.some((question) => questionHasValue(question)); - // ||commentMinLenghtIs1(category) }); const onInvalid = (errors: FieldErrors) => @@ -241,16 +228,14 @@ export const AssessmentWizard: React.FC = ({ } const updatedQuestionsData = formValues[QUESTIONS_KEY]; - // Create an array of sections based on the questionsData const sections: Section[] = assessment?.sections?.map((section) => { - //TODO: Add comments to the sections - // const commentValues = values["comments"]; - // const fieldName = getCommentFieldName(category, false); - // const commentValue = commentValues[fieldName]; + const commentValues = values["comments"]; + const fieldName = getCommentFieldName(section, false); + const commentValue = commentValues[fieldName]; return { ...section, - // comment: commentValue, + comment: commentValue, questions: section.questions.map((question) => { return { ...question, diff --git a/client/src/app/pages/assessment/components/questionnaire-form/questionnaire-form.tsx b/client/src/app/pages/assessment/components/questionnaire-form/questionnaire-form.tsx index 372eea8226..dedf105558 100644 --- a/client/src/app/pages/assessment/components/questionnaire-form/questionnaire-form.tsx +++ b/client/src/app/pages/assessment/components/questionnaire-form/questionnaire-form.tsx @@ -16,6 +16,7 @@ import { getCommentFieldName } from "../../form-utils"; import { useFormContext } from "react-hook-form"; import { Section } from "@app/api/models"; import { AssessmentWizardValues } from "@app/pages/assessment/components/assessment-wizard/assessment-wizard"; +import { HookFormPFTextInput } from "@app/components/HookFormPFFields"; export interface QuestionnaireFormProps { section: Section; @@ -86,7 +87,7 @@ export const QuestionnaireForm: React.FC = ({ ); })} - {/* + {t("terms.additionalNotesOrComments")} @@ -103,7 +104,7 @@ export const QuestionnaireForm: React.FC = ({ > - */} + ); }; diff --git a/client/src/app/pages/assessment/components/wizard-step-nav-description/tests/wizard-step-nav-description.test.tsx b/client/src/app/pages/assessment/components/wizard-step-nav-description/tests/wizard-step-nav-description.test.tsx index f3fae32a86..3b7a934605 100644 --- a/client/src/app/pages/assessment/components/wizard-step-nav-description/tests/wizard-step-nav-description.test.tsx +++ b/client/src/app/pages/assessment/components/wizard-step-nav-description/tests/wizard-step-nav-description.test.tsx @@ -8,6 +8,7 @@ describe("WizardStepNavDescription", () => { name: "Section 1", order: 1, questions: [], + comment: "", }; it("Renders without crashing", () => { diff --git a/client/src/app/pages/assessment/form-utils.test.ts b/client/src/app/pages/assessment/form-utils.test.ts index 32dc4a2128..401648b394 100644 --- a/client/src/app/pages/assessment/form-utils.test.ts +++ b/client/src/app/pages/assessment/form-utils.test.ts @@ -3,7 +3,7 @@ import { getCommentFieldName, getQuestionFieldName } from "./form-utils"; describe("Application assessment - form utils", () => { const section: Section = { - name: "category-123", + name: "section-123", order: 1, questions: [], }; @@ -16,12 +16,12 @@ describe("Application assessment - form utils", () => { it("getCommentFieldName: fullName", () => { const fieldName = getCommentFieldName(section, true); - expect(fieldName).toBe("comments.category-category-123"); + expect(fieldName).toBe("comments.section-section-123"); }); it("getCommentFieldName: singleName", () => { const fieldName = getCommentFieldName(section, false); - expect(fieldName).toBe("category-category-123"); + expect(fieldName).toBe("section-section-123"); }); it("getQuestionFieldName: fullName", () => { diff --git a/client/src/app/pages/assessment/form-utils.ts b/client/src/app/pages/assessment/form-utils.ts index 5b868b6a4e..bbbd993e6c 100644 --- a/client/src/app/pages/assessment/form-utils.ts +++ b/client/src/app/pages/assessment/form-utils.ts @@ -10,9 +10,13 @@ export enum SAVE_ACTION_VALUE { SAVE_AS_DRAFT, } export const getCommentFieldName = (section: Section, fullName: boolean) => { - const fieldName = `category-${section.name}`; - return fullName ? `${COMMENTS_KEY}.${fieldName}` : fieldName; + const fieldName = `section-${section.name}`; + const sanitizedFieldName = sanitizeKey(fieldName); + return fullName + ? `${COMMENTS_KEY}.${sanitizedFieldName}` + : sanitizedFieldName; }; + export const sanitizeKey = (text: string) => { return text.replace(/[^a-zA-Z0-9-_:.]/g, "_"); };