#434

frontend/src/components/counts/CountsNestedTable.tsx

@@ -4,7 +4,8 @@ import CountsSortHeader from '@/components/counts/CountsSortHeader'
 import CountsSelectableTable from '@/components/counts/CountsSelectableTable'
 import { changeCountSort, readCountSort, selectedCountChildren,
 	 writeCountSort } from '@/lib/counts'
-import { countsLogicalName, countsNestedOrder, countsNestedText } from '@/lib/countsDisplay'
+import { countsLogicalName, countsNestedExport,
+	 countsNestedOrder, countsNestedText } from '@/lib/countsDisplay'
 import { useLocale } from '@/lib/useLocale'
 import { useUITranslation } from '@/lib/useUITranslation'
 
@@ -53,47 +54,53 @@ const CountsNestedTable = (
 	<summary className="cursor-pointer text-xs" title={message ('nested.toggle').text}>
 	  <LocalisedText language={title.language}>{title.text}</LocalisedText> ({rows.length})
 	</summary>
-	{columns.length > 0 && rows.length > 0 && (
-	    <div className="relative isolate mt-1 max-h-72 w-full min-w-0 overflow-auto">
-	    <CountsSelectableTable family={path} columns={columns.map (field => field.key)}
-		identity={`${path}:${params}`} name={title}
-		className="border text-xs dark:border-slate-700">
-	      <thead className="sticky top-0 z-10 bg-background text-foreground
-		  dark:bg-background dark:text-foreground"><tr>
-		{columns.map (field => (
-		    <CountsSortHeader key={field.key} field={field.key}
-			label={message (field.label)}
-			sorts={sorts} structured={field.children != null}
-			change={(key, additive) => {
-			  const next = changeCountSort (sorts, key, additive)
-			      .map (sort => ({ ...sort, key: `${path}/${sort.key}` }))
-			  update ('child_sort', writeCountSort ([
-			      ...allSorts.filter (sort => !sort.key.startsWith (`${path}/`)),
-			      ...next]))
-			}}/>))}
-	      </tr></thead>
-	      <tbody>{ordered.map ((row, index) => (
-		  <tr key={index} className="border-t dark:border-slate-700">
-		    {columns.map (field => (
-			<td key={field.key}
-			    className="overflow-hidden break-words border-t px-2 py-1
-			    align-top dark:border-slate-700"
-			    data-counts-copy={
-				field.children
-				? countsNestedText (
-				    row[field.key] as CountRecord[] ?? [], field.children,
-				    `${path}.${field.key}`, params, locale)
-				: countsLogicalName (row, field.key, locale).text}>
-			  {field.children
-			   ? <CountsNestedTable rows={row[field.key] as CountRecord[] ?? []}
-			       fields={field.children} path={`${path}.${field.key}`}
-			       resource={resource}
-			       title={message (field.label)} params={params} update={update}/>
-			   : scalar (row, field.key)}
-			</td>))}
-		  </tr>))}</tbody>
-	    </CountsSelectableTable>
-	    </div>)}
+	{params.get ('nested_json') === '1' ? (
+	    <pre data-counts-scroll
+		className="mt-1 max-h-72 w-full overflow-auto whitespace-pre-wrap
+		    break-words text-xs">
+	      {JSON.stringify (countsNestedExport (rows, fields, path, params, locale), null, 2)}
+	    </pre>) : (columns.length > 0 && rows.length > 0 && (
+	    <div data-counts-scroll
+		className="relative isolate mt-1 max-h-72 w-full min-w-0 overflow-auto">
+	      <CountsSelectableTable family={path} columns={columns.map (field => field.key)}
+		  identity={`${path}:${params}`} name={title}
+		  className="border text-xs dark:border-slate-700">
+		<thead className="sticky top-0 z-10 bg-background text-foreground
+		    dark:bg-background dark:text-foreground"><tr>
+		  {columns.map (field => (
+		      <CountsSortHeader key={field.key} field={field.key}
+			  label={message (field.label)}
+			  sorts={sorts} structured={field.children != null}
+			  change={(key, additive) => {
+			    const next = changeCountSort (sorts, key, additive)
+				.map (sort => ({ ...sort, key: `${path}/${sort.key}` }))
+			    update ('child_sort', writeCountSort ([
+				...allSorts.filter (sort => !sort.key.startsWith (`${path}/`)),
+				...next]))
+			  }}/>))}
+		</tr></thead>
+		<tbody>{ordered.map ((row, index) => (
+		    <tr key={index} className="border-t dark:border-slate-700">
+		      {columns.map (field => (
+			  <td key={field.key}
+			      className="overflow-hidden break-words border-t px-2 py-1
+			      align-top dark:border-slate-700"
+			      data-counts-copy={
+				  field.children
+				  ? countsNestedText (
+				      row[field.key] as CountRecord[] ?? [], field.children,
+				      `${path}.${field.key}`, params, locale)
+				  : countsLogicalName (row, field.key, locale).text}>
+			    {field.children
+			     ? <CountsNestedTable rows={row[field.key] as CountRecord[] ?? []}
+				 fields={field.children} path={`${path}.${field.key}`}
+				 resource={resource}
+				 title={message (field.label)} params={params} update={update}/>
+			     : scalar (row, field.key)}
+			  </td>))}
+		    </tr>))}</tbody>
+	      </CountsSelectableTable>
+	    </div>))}
       </details>)
 }