Merge pull request #5034 from kobotoolbox/5032-backport-repeated-grou…

…p-version-fix Repeated group version fix
kobotoolbox · Jul 29, 2024 · c50dd64 · c50dd64
2 parents 0fcb003 + 8d0324d
commit c50dd64
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 21 deletions.
diff --git a/jsapp/js/components/submissions/submissionUtils.ts b/jsapp/js/components/submissions/submissionUtils.ts
@@ -554,7 +554,7 @@ export function getRepeatGroupAnswers(
 
     // Each level could be an array of repeat group answers or object with questions.
     if (levelKey === targetKey) {
-      if (targetKeyData !== undefined) {
+      if (targetKeyData !== undefined && typeof targetKeyData !== 'object') {
         answers.push(String(targetKeyData));
       }
     } else if (

diff --git a/jsapp/js/components/submissions/table.tsx b/jsapp/js/components/submissions/table.tsx
@@ -423,6 +423,20 @@ export class DataTable extends React.Component<DataTableProps, DataTableState> {
     tableStore.setFrozenColumn(fieldId, isFrozen);
   }
 
+  // We need to distinguish between repeated groups with nested values
+  // and other question types that use a flat nested key (i.e. with '/').
+  // If submission response contains the parent key, we should use that.
+  _selectNestedRow(
+    row: SubmissionResponse,
+    key: string,
+    rootParentGroup: string | undefined
+  ) {
+    if (rootParentGroup && rootParentGroup in row) {
+      return row[rootParentGroup];
+    }
+    return row[key];
+  }
+
   _getColumnWidth(columnId: AnyRowTypeName | string | undefined) {
     if (!columnId) {
       return DEFAULT_DATA_CELL_WIDTH;
@@ -733,8 +747,10 @@ export class DataTable extends React.Component<DataTableProps, DataTableState> {
 
     allColumns.forEach((key: string, columnIndex: number) => {
       let q: SurveyRow | undefined;
+      let rootParentGroup: string | undefined;
       if (key.includes('/')) {
         const qParentG = key.split('/');
+        rootParentGroup = qParentG[0];
         q = survey?.find(
           (o) =>
             o.name === qParentG[qParentG.length - 1] ||
@@ -885,7 +901,7 @@ export class DataTable extends React.Component<DataTableProps, DataTableState> {
           );
         },
         id: key,
-        accessor: (row) => row[key],
+        accessor: (row) => this._selectNestedRow(row, key, rootParentGroup),
         index: index,
         question: q,
         // This (and the Filter itself) will be set below (we do it separately,
@@ -905,6 +921,20 @@ export class DataTable extends React.Component<DataTableProps, DataTableState> {
             this.state.translationIndex
           );
 
+          if (typeof row.value === 'object') {
+            const repeatGroupAnswers = getRepeatGroupAnswers(row.original, key);
+            if (repeatGroupAnswers) {
+              // display a list of answers from a repeat group question
+              return (
+                <span className='trimmed-text' dir='auto'>
+                  {repeatGroupAnswers.join(', ')}
+                </span>
+              );
+            } else {
+              return '';
+            }
+          }
+
           if (q && q.type && row.value) {
             if (Object.keys(TABLE_MEDIA_TYPES).includes(q.type)) {
               let mediaAttachment = null;
@@ -1036,25 +1066,11 @@ export class DataTable extends React.Component<DataTableProps, DataTableState> {
             );
           }
 
-          if (typeof row.value === 'object' || row.value === undefined) {
-            const repeatGroupAnswers = getRepeatGroupAnswers(row.original, key);
-            if (repeatGroupAnswers) {
-              // display a list of answers from a repeat group question
-              return (
-                <span className='trimmed-text' dir='auto'>
-                  {repeatGroupAnswers.join(', ')}
-                </span>
-              );
-            } else {
-              return '';
-            }
-          } else {
-            return (
-              <span className='trimmed-text' dir='auto'>
-                {row.value}
-              </span>
-            );
-          }
+          return (
+            <span className='trimmed-text' dir='auto'>
+              {row.value}
+            </span>
+          );
         },
       });