show the related answers in history, summary betterments

Author: mluukkai

src/client/components/Admin/Summary/Summary.tsx

@@ -22,6 +22,7 @@ type TableProps = {
   tableValues: TableValues[]
   questionTitles: TableValues
   isOutdated: any
+  entries: any[]
 }
 
 const additionalColumnNames: TableValues = {
@@ -32,8 +33,13 @@ const additionalColumnNames: TableValues = {
   unit: 'Yksikkö',
 }
 
-const Table = ({ tableValues, questionTitles, isOutdated }: TableProps) => {
+const Table = ({ tableValues, questionTitles, isOutdated, entries }: TableProps) => {
   const deleteMutation = useDeleteEntryMutation()
+
+  const isTestVersion = (id: string) => {
+    return entries.find(e => e.id === Number(id))?.testVersion || false
+  }
+
   const columns = useMemo<MRT_ColumnDef<TableValues>[]>(() => {
     const outdatedWarning = { paddingRight: 10, color: 'red', fontSize: 'x-large' }
     return tableValues.length
@@ -54,10 +60,18 @@ const Table = ({ tableValues, questionTitles, isOutdated }: TableProps) => {
               })}
             >
               {columnId === '3' ? (
-                <>
+                <Box>
                   {isOutdated(row.getValue('id')) && <span style={outdatedWarning}>!</span>}
                   <Link to={`/admin/entry/${row.getValue('id')}`}>{cell.getValue<string>()}</Link>
-                </>
+                  {isTestVersion(row.getValue('id')) && (
+                    <Box
+                      component="div"
+                      sx={{ color: 'red', fontWeight: 'bold', fontSize: '0.75rem', marginTop: '4px' }}
+                    >
+                      TEST VERSION
+                    </Box>
+                  )}
+                </Box>
               ) : (
                 cell.getValue<number>()
               )}
@@ -106,7 +120,12 @@ const Table = ({ tableValues, questionTitles, isOutdated }: TableProps) => {
     enableColumnOrdering: true,
     enableGlobalFilter: false,
     enableRowActions: true,
-    muiTableBodyRowProps: { hover: false },
+    muiTableBodyRowProps: ({ row }) => ({
+      hover: false,
+      sx: {
+        backgroundColor: isTestVersion(row.original.id) ? '#fffef5' : 'inherit',
+      },
+    }),
     muiTableBodyCellProps: {
       sx: {
         border: '1px solid rgba(81, 81, 81, .5)',
@@ -208,7 +227,12 @@ const Summary = () => {
           px: 8,
         }}
       >
-        <Table tableValues={tableData} questionTitles={questionTitles} isOutdated={isOutdated} />
+        <Table
+          tableValues={tableData}
+          questionTitles={questionTitles}
+          isOutdated={isOutdated}
+          entries={entriesWithData}
+        />
       </Box>
     </>
   )

src/client/components/Admin/Summary/utils.ts

@@ -26,9 +26,6 @@ const createTableData = (entries: Entry[], questions: Question[], faculties: Fac
     if (entry.data.answers.selectOrganisation) {
       entry.data.answers[22] = entry.data.answers.selectOrganisation
     }
-    if (entry.testVersion && !entry.data.answers[3].includes('TEST VERSION')) {
-      entry.data.answers[3] = `${entry.data.answers[3]} -TEST VERSION-`
-    }
     const formData = Object.fromEntries(
       questionIds.map(id => [
         id,

src/client/components/ResultPage/RenderAnswersDOM.tsx

@@ -4,7 +4,15 @@ import useUnits from '../../hooks/useUnits'
 import RenderAnswers from '@resultRenderer/RenderAnswers'
 import { FormValues } from '@types'
 
-const RenderAnswersDOM = ({ survey, resultData }: { survey: Survey; resultData: FormValues }) => {
+const RenderAnswersDOM = ({
+  survey,
+  resultData,
+  changedFields,
+}: {
+  survey: Survey
+  resultData: FormValues
+  changedFields?: Set<number>
+}) => {
   const { faculties, isLoading: facultiesLoading } = useFaculties()
   const { faculties: units, isLoading: unitsLoading } = useUnits()
 
@@ -15,7 +23,15 @@ const RenderAnswersDOM = ({ survey, resultData }: { survey: Survey; resultData:
     return null
   }
 
-  return <RenderAnswers survey={survey} resultData={resultData} faculties={faculties} units={units} />
+  return (
+    <RenderAnswers
+      survey={survey}
+      resultData={resultData}
+      faculties={faculties}
+      units={units}
+      changedFields={changedFields}
+    />
+  )
 }
 
 export default RenderAnswersDOM

src/client/components/UserPage/UserEntry.tsx

@@ -64,6 +64,26 @@ const UserEntry = () => {
 
   const { answers, country, updatedData } = entry.data
 
+  // Helper function to compare answers and find changed fields
+  const getChangedFields = (currentAnswers: any, previousAnswers: any): Set<number> => {
+    const changed = new Set<number>()
+    if (!previousAnswers) {
+      return changed
+    }
+
+    Object.keys(currentAnswers).forEach(key => {
+      const numKey = Number(key)
+      if (!isNaN(numKey)) {
+        const current = JSON.stringify(currentAnswers[key])
+        const previous = JSON.stringify(previousAnswers[key])
+        if (current !== previous) {
+          changed.add(numKey)
+        }
+      }
+    })
+    return changed
+  }
+
   return (
     <MuiComponentProvider>
       <div>
@@ -97,15 +117,26 @@ const UserEntry = () => {
 
           <TabPanel value={tabValue} index={0}>
             <RiskTableDOM riskData={entry.data} countryData={country[0]} />
-            <RenderAnswersDOM survey={survey} resultData={answers} />
+            <RenderAnswersDOM
+              survey={survey}
+              resultData={answers}
+              changedFields={getChangedFields(answers, updatedData?.[0]?.answers)}
+            />
           </TabPanel>
-          {updatedData?.map((updated, index) => (
-            /* eslint-disable-next-line react/no-array-index-key */
-            <TabPanel key={index} value={tabValue} index={index + 1}>
-              <RiskTableDOM riskData={updated} countryData={country[0]} />
-              <RenderAnswersDOM survey={survey} resultData={updated.answers ?? answers} />
-            </TabPanel>
-          ))}
+          {updatedData?.map((updated, index) => {
+            const previousAnswers = updatedData[index + 1]?.answers
+            return (
+              /* eslint-disable-next-line react/no-array-index-key */
+              <TabPanel key={index} value={tabValue} index={index + 1}>
+                <RiskTableDOM riskData={updated} countryData={country[0]} />
+                <RenderAnswersDOM
+                  survey={survey}
+                  resultData={updated.answers ?? answers}
+                  changedFields={getChangedFields(updated.answers ?? answers, previousAnswers)}
+                />
+              </TabPanel>
+            )
+          })}
         </Box>
         <SendSummaryEmail entryId={entryId} />
       </div>

src/locales/en.json

@@ -110,6 +110,7 @@
     "title": "Project risk profile",
     "riskTableTitle": "Risks of the collaboration",
     "answerBoxTitle": "Summary of your choices",
+    "changedFieldsNote": "Questions with a light background indicate answers that have changed from the previous version.",
     "resultsMessage": "We have compiled a summary of your selections below",
     "proceedTitle": "Did you find what you were looking for?",
     "proceedToExit": "Yes",

src/locales/fi.json

@@ -108,6 +108,7 @@
     "title": "Yhteistyöhankkeen riskiprofiili",
     "riskTableTitle": "Yhteistyön riskit",
     "answerBoxTitle": "Yhteenveto valinnoistasi",
+    "changedFieldsNote": "Korostetulla taustalla näkyvät vastaukset, jotka ovat muuttuneet edellisestä versiosta.",
     "resultsMessage": "Listasimme sinulle vielä alle yhteevedon valinnoista",
     "proceedTitle": "Löysitkö etsimäsi?",
     "proceedToExit": "Kyllä",

src/resultRenderer/RenderAnswers.tsx

@@ -13,11 +13,13 @@ const RenderAnswers = ({
   resultData,
   faculties,
   units,
+  changedFields,
 }: {
   survey: Survey
   resultData: FormValues
   faculties: FacultyOrUnit[]
   units: FacultyOrUnit[]
+  changedFields?: Set<number>
 }) => {
   const { Div, Typography, t, language } = useComponents()
 
@@ -73,12 +75,25 @@ const RenderAnswers = ({
       <Typography variant="h6" style={{ fontSize: '24px', marginBottom: '20px' }}>
         {t('results:answerBoxTitle')}
       </Typography>
+      {changedFields && changedFields.size > 0 && (
+        <Div style={{ backgroundColor: '#fffef0', padding: '12px', borderRadius: '4px', marginBottom: '16px' }}>
+          <Typography style={{ fontSize: '14px', fontStyle: 'italic' }}>{t('results:changedFieldsNote')}</Typography>
+        </Div>
+      )}
       <Div style={{ borderLeft: '1px solid lightgray' }}>
         {survey?.Questions.map(currentQuestion => (
           <Div key={currentQuestion.id}>
             {!currentQuestion.parentId && !(hyCordinatedMultilateral && [6, 8, 24].includes(currentQuestion.id)) && (
               <>
-                <Div style={{ margin: '16px' }} id={`question-${currentQuestion.id}`}>
+                <Div
+                  style={{
+                    margin: '16px',
+                    ...(changedFields?.has(currentQuestion.id)
+                      ? { backgroundColor: '#fffef0', padding: '8px', borderRadius: '4px' }
+                      : {}),
+                  }}
+                  id={`question-${currentQuestion.id}`}
+                >
                   <Typography style={{ fontWeight: '800' }}>
                     {currentQuestion.id === 8 && resultData[4] === 'multilateral'
                       ? t('questions:additionalPartnerOrganisationCountryQuestion')
@@ -98,7 +113,8 @@ const RenderAnswers = ({
                 {survey?.Questions.filter(
                   childQuestion =>
                     childQuestion.parentId === currentQuestion.id &&
-                    !(resultData[9] !== 'coordinator' && childQuestion.parentId === 4)
+                    !(hyCordinatedMultilateral && [6, 8, 24].includes(childQuestion.id)) &&
+                    !(!hyCordinatedMultilateral && [26, 27, 28, 30].includes(childQuestion.id))
                 )?.map(childQuestion => (
                   <Div key={childQuestion.id} style={{ margin: '16px' }}>
                     <Div style={{ borderLeft: '1px solid lightgray' }}>