#434

frontend/src/components/counts/CountsSummaryResults.tsx

@@ -0,0 +1,63 @@
+import LocalisedText from '@/components/LocalisedText'
+import PrefetchLink from '@/components/PrefetchLink'
+import CountsSelectableTable from '@/components/counts/CountsSelectableTable'
+import CountsSortHeader from '@/components/counts/CountsSortHeader'
+import { changeCountSort, countsRequestParams, readCountSort, writeCountSort } from '@/lib/counts'
+import { countsSummaryCell, countsSummaryDrill, countsSummaryRows,
+	 selectedCountsSummaryFields } from '@/lib/countsState'
+import { useLocale } from '@/lib/useLocale'
+import { useUITranslation } from '@/lib/useUITranslation'
+
+import type { CountsResource, CountsResult } from '@/lib/counts'
+
+
+const CountsSummaryResults = (
+    { resource, data, params, pending, update }: {
+	resource: CountsResource
+	data: CountsResult
+	params: URLSearchParams
+	pending: boolean
+	update: (key: string, value: string) => void },
+) => {
+  const locale = useLocale ()
+  const { label, message } = useUITranslation ('counts')
+  const fields = selectedCountsSummaryFields (resource, params)
+  const rows = countsSummaryRows (data)
+  const sorts = readCountSort (params.get ('sort') ?? (
+      params.get ('axis') === 'tags' ? 'count:desc' : 'group:asc'))
+  return (
+      <div className="min-h-0 flex-1 overflow-auto" data-counts-results aria-busy={pending}>
+	{fields.length === 0 ? <p>{label ('nested.noColumns')}</p> : (
+	    <CountsSelectableTable family={`summary_${params.get ('axis')}`}
+		columns={fields.map (field => field.key)}
+		identity={`${countsRequestParams (params)}:${fields.map (field => field.key)}`}
+		className="text-left text-sm">
+	      <thead className="sticky top-0 z-20"><tr>
+		{fields.map (field => (
+		    <CountsSortHeader key={field.key} field={field.key}
+			label={message (field.label)}
+			sorts={sorts} change={(key, additive) => update (
+			    'sort', writeCountSort (changeCountSort (sorts, key, additive)))}/>))}
+	      </tr></thead>
+	      <tbody>{rows.map (row => (
+		  <tr key={String (row.key)}>
+		    {fields.map (field => {
+		      const value = countsSummaryCell (row, field.key, locale)
+		      const content = value.language == null ? value.text : (
+			  <LocalisedText language={value.language}>{value.text}</LocalisedText>)
+		      return <td key={field.key} data-counts-copy={value.text}
+			  className="break-words border-b px-2 py-1 dark:border-slate-700">
+			{(['count', 'group'].includes (field.key) && row.count != null)
+			 ? <PrefetchLink to={countsSummaryDrill (resource, params, row)}>
+			    {content}</PrefetchLink>
+			 : content}
+		      </td>
+		    })}
+		  </tr>))}</tbody>
+	    </CountsSelectableTable>)}
+	{rows.length === 0 && <p className="p-2">{label ('empty')}</p>}
+      </div>)
+}
+
+
+export default CountsSummaryResults