#434

frontend/src/components/counts/CountsSortHeader.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useRef } from 'react'
 
+import SortableItem from '@/components/common/SortableItem'
 import CountsResizeHandle from '@/components/counts/CountsResizeHandle'
 import { Button } from '@/components/ui/button'
 import { useUITranslation } from '@/lib/useUITranslation'
@@ -8,13 +9,14 @@ import type { CountSort } from '@/lib/counts'
 
 
 const CountsSortHeader = (
-    { field, label, sorts, change, structured = false, rowSpan, colSpan, resizable = true }: {
+    { field, label, sorts, change, structured = false, rowSpan, colSpan, resizable = true, dragId, totalKind }: {
 	field: string
 	label: { text: string; language: string }
 	sorts: CountSort[]
 	change: (key: string, additive: boolean) => void
 	structured?: boolean
-	rowSpan?: number; colSpan?: number; resizable?: boolean },
+	rowSpan?: number; colSpan?: number; resizable?: boolean
+        dragId?: string; totalKind?: string },
 ) => {
   const { message } = useUITranslation ('counts')
   const press = useRef<{ x: number; y: number
@@ -36,10 +38,14 @@ const CountsSortHeader = (
       column: label.text, priority: priority + 1,
       direction: message (`sort.${state}`).text })
 
-  return (
-      <th data-counts-heading={label.text} rowSpan={rowSpan} colSpan={colSpan}
+  const render = (shell?: Parameters<NonNullable<
+      Parameters<typeof SortableItem>[0]['renderShell']>>[0]) => (
+      <th ref={shell?.ref} style={shell?.style} data-counts-total={totalKind}
+          data-counts-heading={label.text} rowSpan={rowSpan} colSpan={colSpan}
 	  className="relative overflow-hidden whitespace-nowrap px-1 py-1"
 	  aria-sort={(sorts.length > 1 && priority >= 0) ? 'other' : state}>
+	<div className="flex min-w-0 items-center">
+	{shell?.handle}
 	<Button type="button" variant="ghost" size="sm"
 	    className="h-auto w-full max-w-full justify-start select-none px-1 py-0 pr-3"
 	    lang={aria.language} aria-label={aria.text} title={title.text}
@@ -90,8 +96,11 @@ const CountsSortHeader = (
 	  {priority >= 0 && <span aria-hidden>
 	    {direction === 'asc' ? '▲' : '▼'}{sorts.length > 1 && priority + 1}</span>}
 	</Button>
+	</div>
 	{resizable && <CountsResizeHandle field={field} label={label}/>}
       </th>)
+  return dragId == null ? render () : <SortableItem id={dragId} name={message ('reorder', { column: label.text })}
+      handleId={`column-${dragId}`} moveGroup={() => { }} renderShell={render}>{null}</SortableItem>
 }