From 52c3e9ac24acfefc1c9f5def1eee83d708c6219f Mon Sep 17 00:00:00 2001 From: owenjs Date: Fri, 17 Feb 2023 12:10:49 +0000 Subject: [PATCH 1/4] each child response is displayed as a seperate response to the user --- .../report/components/ReportResponse.tsx | 6 +- .../report/components/ReportResponses.tsx | 75 +++++++++++++++---- 2 files changed, 62 insertions(+), 19 deletions(-) diff --git a/src/pages/reports/report/components/ReportResponse.tsx b/src/pages/reports/report/components/ReportResponse.tsx index 704ee4df..bab94396 100644 --- a/src/pages/reports/report/components/ReportResponse.tsx +++ b/src/pages/reports/report/components/ReportResponse.tsx @@ -10,7 +10,7 @@ import { useIntl } from "react-intl"; export interface IReportResponse { question: string; - response: string; + response: string | null; type: string; } @@ -50,13 +50,13 @@ const Response = (props: ReportResponseProps) => { title="audio.play" onClose={() => setAudioModalOpen(false)} actions={[ - { name: "common.download", onClick: () => download(response) }, + { name: "common.download", onClick: () => download(response || "") }, { name: "common.close", variant: "secondary", onClick: () => setAudioModalOpen(false) } ]} >
{/* eslint-disable-next-line jsx-a11y/media-has-caption */} -
diff --git a/src/pages/reports/report/components/ReportResponses.tsx b/src/pages/reports/report/components/ReportResponses.tsx index f95bd708..462463f2 100644 --- a/src/pages/reports/report/components/ReportResponses.tsx +++ b/src/pages/reports/report/components/ReportResponses.tsx @@ -16,27 +16,70 @@ const ReportResponses = ({ questions, responses }: ReportResponsesProps) => { const [showImagesModal, setShowImagesModal] = useState(false); const data = useMemo(() => { - return questions - .map(q => { - const response = responses.find(r => r.name === q.name); - if (!response) return undefined; - const formattedQuestion = q.name + return questions?.reduce((combinedResponses, currentQuestionDetails) => { + const copyCombinedResponses = [...combinedResponses]; + + const response = responses.find(r => r.name === currentQuestionDetails.name); + if (!response) return copyCombinedResponses; + + console.log(currentQuestionDetails); + + const generateCombineResponse = (name: string, label: string, type: string, value?: string) => { + const formattedQuestion = name .split("-") .map(s => s[0].toUpperCase() + s.slice(1)) - .join(",") - .replace(",", " "); + .join(" "); return { - // @ts-expect-error - question: `${formattedQuestion}: ${q.label.en}`, - response: response.value ?? null, - childQuestions: responses.filter(response => - q.childQuestions?.find(question => question.name === response.name) - ), - type: q.type + question: `${formattedQuestion}: ${label}`, + response: value ?? null, + type, + childQuestions: [] as AnswerResponse[] }; - }) - .filter(x => x) as ReportResponseProps[]; + }; + + const combineResponse = generateCombineResponse( + currentQuestionDetails.name, + // @ts-ignore use browser's lang here, not "en" + currentQuestionDetails.label.en, + currentQuestionDetails.type, + response.value + ); + + // When the question type is "audio" + // Each child question contains the audio file information + // Add this to the combineResponse object for later + // @see src/pages/reports/report/components/ReportResponse.tsx + if (currentQuestionDetails.type === "audio") { + combineResponse.childQuestions = responses.filter(response => + currentQuestionDetails.childQuestions?.find(question => question.name === response.name) + ); + } + + copyCombinedResponses.push(combineResponse); + + // When the question type isn't "audio" + // Each child question is considered a separate response + // Generate a Combined Response for each child + if (currentQuestionDetails.type !== "audio" && currentQuestionDetails.childQuestions?.length) { + for (let i = 0; i < currentQuestionDetails.childQuestions.length; i++) { + const childQuestionDetails = currentQuestionDetails.childQuestions[i]; + const childQuestionResponse = responses.find(r => r.name === childQuestionDetails.name); + + copyCombinedResponses.push( + generateCombineResponse( + childQuestionDetails.name, + // @ts-ignore use browser's lang here, not "en" + childQuestionDetails.label.en, + childQuestionDetails.type, + childQuestionResponse?.value + ) + ); + } + } + + return copyCombinedResponses; + }, []); }, [questions, responses]); const hasImages = useMemo(() => { From 22022bd814f53e554dbfbdbb6d50728a23743916 Mon Sep 17 00:00:00 2001 From: owenjs Date: Fri, 17 Feb 2023 14:21:49 +0000 Subject: [PATCH 2/4] removed console log --- src/pages/reports/report/components/ReportResponses.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/pages/reports/report/components/ReportResponses.tsx b/src/pages/reports/report/components/ReportResponses.tsx index 462463f2..abf7977b 100644 --- a/src/pages/reports/report/components/ReportResponses.tsx +++ b/src/pages/reports/report/components/ReportResponses.tsx @@ -22,8 +22,6 @@ const ReportResponses = ({ questions, responses }: ReportResponsesProps) => { const response = responses.find(r => r.name === currentQuestionDetails.name); if (!response) return copyCombinedResponses; - console.log(currentQuestionDetails); - const generateCombineResponse = (name: string, label: string, type: string, value?: string) => { const formattedQuestion = name .split("-") From 236bc9950f481ea0ed4f08e018f26b2416d81bd9 Mon Sep 17 00:00:00 2001 From: owenjs Date: Fri, 17 Feb 2023 14:34:08 +0000 Subject: [PATCH 3/4] question titles now translated --- src/pages/reports/report/Report.tsx | 6 +++++- .../reports/report/components/ReportResponses.tsx | 15 +++++++++------ 2 files changed, 14 insertions(+), 7 deletions(-) diff --git a/src/pages/reports/report/Report.tsx b/src/pages/reports/report/Report.tsx index 331bacca..2cb5a194 100644 --- a/src/pages/reports/report/Report.tsx +++ b/src/pages/reports/report/Report.tsx @@ -84,7 +84,11 @@ const Report = () => { /> - + ); }; diff --git a/src/pages/reports/report/components/ReportResponses.tsx b/src/pages/reports/report/components/ReportResponses.tsx index abf7977b..63b440c2 100644 --- a/src/pages/reports/report/components/ReportResponses.tsx +++ b/src/pages/reports/report/components/ReportResponses.tsx @@ -2,18 +2,21 @@ import List from "components/extensive/List"; import OptionalWrapper from "components/extensive/OptionalWrapper"; import Button from "components/ui/Button/Button"; import { AnswerResponse, ReportsQuestion } from "generated/forms/formsSchemas"; +import { useAppSelector } from "hooks/useRedux"; import { useMemo, useState } from "react"; import { FormattedMessage } from "react-intl"; import ReportExportImagesModal from "./modal/ReportExportImagesModal"; import ReportResponse, { ReportResponseProps } from "./ReportResponse"; type ReportResponsesProps = { + defaultLanguage: string; questions: ReportsQuestion[]; responses: AnswerResponse[]; }; -const ReportResponses = ({ questions, responses }: ReportResponsesProps) => { +const ReportResponses = ({ defaultLanguage, questions, responses }: ReportResponsesProps) => { const [showImagesModal, setShowImagesModal] = useState(false); + const { locale } = useAppSelector(state => state.app); const data = useMemo(() => { return questions?.reduce((combinedResponses, currentQuestionDetails) => { @@ -38,8 +41,8 @@ const ReportResponses = ({ questions, responses }: ReportResponsesProps) => { const combineResponse = generateCombineResponse( currentQuestionDetails.name, - // @ts-ignore use browser's lang here, not "en" - currentQuestionDetails.label.en, + // @ts-ignore + currentQuestionDetails.label[locale] ?? currentQuestionDetails.label[defaultLanguage], currentQuestionDetails.type, response.value ); @@ -67,8 +70,8 @@ const ReportResponses = ({ questions, responses }: ReportResponsesProps) => { copyCombinedResponses.push( generateCombineResponse( childQuestionDetails.name, - // @ts-ignore use browser's lang here, not "en" - childQuestionDetails.label.en, + // @ts-ignore + childQuestionDetails.label[locale] ?? childQuestionDetails.label[defaultLanguage], childQuestionDetails.type, childQuestionResponse?.value ) @@ -78,7 +81,7 @@ const ReportResponses = ({ questions, responses }: ReportResponsesProps) => { return copyCombinedResponses; }, []); - }, [questions, responses]); + }, [questions, responses, locale, defaultLanguage]); const hasImages = useMemo(() => { const found = data.find(item => item.type === "blob"); From 6ee10db7ac67911299c0110568939c51a9e2f64c Mon Sep 17 00:00:00 2001 From: owenjs Date: Fri, 17 Feb 2023 15:34:36 +0000 Subject: [PATCH 4/4] Question prefixes now translated --- src/locales/en.json | 2 + .../report/components/ReportResponses.tsx | 119 ++++++++++-------- 2 files changed, 68 insertions(+), 53 deletions(-) diff --git a/src/locales/en.json b/src/locales/en.json index 9ce8623f..51eb4e63 100644 --- a/src/locales/en.json +++ b/src/locales/en.json @@ -304,6 +304,8 @@ "reports.preview.area": "Area: {name}", "reports.preview.submittedBy": "Submitted By: {name}", "reports.preview.view": "View Report", + "reports.preview.question.id": "Question {index}:", + "reports.preview.childQuestion.id": "Question {index} More Info:", "reporting.back": "Back to Monitoring", "reporting.tabs.investigation": "Investigation", "reporting.tabs.reports": "Reports", diff --git a/src/pages/reports/report/components/ReportResponses.tsx b/src/pages/reports/report/components/ReportResponses.tsx index 63b440c2..2df1e823 100644 --- a/src/pages/reports/report/components/ReportResponses.tsx +++ b/src/pages/reports/report/components/ReportResponses.tsx @@ -4,7 +4,7 @@ import Button from "components/ui/Button/Button"; import { AnswerResponse, ReportsQuestion } from "generated/forms/formsSchemas"; import { useAppSelector } from "hooks/useRedux"; import { useMemo, useState } from "react"; -import { FormattedMessage } from "react-intl"; +import { FormattedMessage, useIntl } from "react-intl"; import ReportExportImagesModal from "./modal/ReportExportImagesModal"; import ReportResponse, { ReportResponseProps } from "./ReportResponse"; @@ -17,71 +17,84 @@ type ReportResponsesProps = { const ReportResponses = ({ defaultLanguage, questions, responses }: ReportResponsesProps) => { const [showImagesModal, setShowImagesModal] = useState(false); const { locale } = useAppSelector(state => state.app); + const intl = useIntl(); const data = useMemo(() => { - return questions?.reduce((combinedResponses, currentQuestionDetails) => { - const copyCombinedResponses = [...combinedResponses]; + return questions?.reduce( + (combinedResponses, currentQuestionDetails, currentQuestionIndex) => { + const copyCombinedResponses = [...combinedResponses]; - const response = responses.find(r => r.name === currentQuestionDetails.name); - if (!response) return copyCombinedResponses; + const response = responses.find(r => r.name === currentQuestionDetails.name); + if (!response) return copyCombinedResponses; - const generateCombineResponse = (name: string, label: string, type: string, value?: string) => { - const formattedQuestion = name - .split("-") - .map(s => s[0].toUpperCase() + s.slice(1)) - .join(" "); - - return { - question: `${formattedQuestion}: ${label}`, - response: value ?? null, + const generateCombineResponse = ({ + label, type, - childQuestions: [] as AnswerResponse[] + value, + childQuestion = false + }: { + label: string; + type: string; + value?: string; + childQuestion?: boolean; + }) => { + const formattedQuestion = intl.formatMessage( + { id: childQuestion ? "reports.preview.childQuestion.id" : "reports.preview.question.id" }, + { index: currentQuestionIndex + 1 } + ); + + return { + question: `${formattedQuestion} ${label}`, + response: value ?? null, + type, + childQuestions: [] as AnswerResponse[] + }; }; - }; - const combineResponse = generateCombineResponse( - currentQuestionDetails.name, - // @ts-ignore - currentQuestionDetails.label[locale] ?? currentQuestionDetails.label[defaultLanguage], - currentQuestionDetails.type, - response.value - ); + const combineResponse = generateCombineResponse({ + // @ts-ignore + label: currentQuestionDetails.label[locale] ?? currentQuestionDetails.label[defaultLanguage], + type: currentQuestionDetails.type, + value: response.value + }); - // When the question type is "audio" - // Each child question contains the audio file information - // Add this to the combineResponse object for later - // @see src/pages/reports/report/components/ReportResponse.tsx - if (currentQuestionDetails.type === "audio") { - combineResponse.childQuestions = responses.filter(response => - currentQuestionDetails.childQuestions?.find(question => question.name === response.name) - ); - } + // When the question type is "audio" + // Each child question contains the audio file information + // Add this to the combineResponse object for later + // @see src/pages/reports/report/components/ReportResponse.tsx + if (currentQuestionDetails.type === "audio") { + combineResponse.childQuestions = responses.filter(response => + currentQuestionDetails.childQuestions?.find(question => question.name === response.name) + ); + } - copyCombinedResponses.push(combineResponse); + copyCombinedResponses.push(combineResponse); - // When the question type isn't "audio" - // Each child question is considered a separate response - // Generate a Combined Response for each child - if (currentQuestionDetails.type !== "audio" && currentQuestionDetails.childQuestions?.length) { - for (let i = 0; i < currentQuestionDetails.childQuestions.length; i++) { - const childQuestionDetails = currentQuestionDetails.childQuestions[i]; - const childQuestionResponse = responses.find(r => r.name === childQuestionDetails.name); + // When the question type isn't "audio" + // Each child question is considered a separate response + // Generate a Combined Response for each child + if (currentQuestionDetails.type !== "audio" && currentQuestionDetails.childQuestions?.length) { + for (let i = 0; i < currentQuestionDetails.childQuestions.length; i++) { + const childQuestionDetails = currentQuestionDetails.childQuestions[i]; + const childQuestionResponse = responses.find(r => r.name === childQuestionDetails.name); - copyCombinedResponses.push( - generateCombineResponse( - childQuestionDetails.name, - // @ts-ignore - childQuestionDetails.label[locale] ?? childQuestionDetails.label[defaultLanguage], - childQuestionDetails.type, - childQuestionResponse?.value - ) - ); + copyCombinedResponses.push( + generateCombineResponse({ + // @ts-ignore + label: childQuestionDetails.label[locale] ?? childQuestionDetails.label[defaultLanguage], + type: childQuestionDetails.type, + value: childQuestionResponse?.value, + childQuestion: true + }) + ); + } } - } - return copyCombinedResponses; - }, []); - }, [questions, responses, locale, defaultLanguage]); + return copyCombinedResponses; + }, + [] + ); + }, [questions, responses, locale, defaultLanguage, intl]); const hasImages = useMemo(() => { const found = data.find(item => item.type === "blob");