#434

frontend/src/components/counts/CountsFieldTree.tsx

@@ -2,7 +2,7 @@ import { DndContext, MouseSensor, TouchSensor, closestCenter,
 	 useDraggable, useDroppable, useSensor, useSensors } from '@dnd-kit/core'
 
 import { countChildPaths, fieldsForCounts, orderedCountFields, reorderCountFields,
-	 selectedCountChildren, selectedCountColumns } from '@/lib/counts'
+	 selectedCountChildren, selectedCountColumns, selectedCountFields } from '@/lib/counts'
 import { cn } from '@/lib/utils'
 import { useUITranslation } from '@/lib/useUITranslation'
 
@@ -36,7 +36,8 @@ const FieldBranch = (
     {label (field.label)}
   </label>
   return (
-      <div ref={drop.setNodeRef} className={cn ('flex items-start gap-1',
+      <div ref={drop.setNodeRef} className={cn ('max-w-full rounded border border-slate-200 px-1',
+	  'dark:border-slate-700',
 	  drop.isOver && 'outline outline-1 outline-blue-500 dark:outline-blue-400')}>
 	<div ref={drag.setNodeRef} className="flex min-w-0 flex-1 items-start gap-1"
 	    style={drag.transform == null ? undefined : {
@@ -60,7 +61,7 @@ const FieldBranch = (
 	  {field.children ? (
 	      <details className="my-1 min-w-0 flex-1">
 		<summary className="cursor-pointer">{control}</summary>
-		<div className="ml-4 border-l pl-2 dark:border-slate-700">
+		<div className="ml-2 border-l pl-1 dark:border-slate-700">
 		  <FieldGroup fields={field.children} path={path} params={params}
 		      enabled={enabled && checked} selected={selected} select={select}
 		      update={update}/>
@@ -99,6 +100,7 @@ const FieldGroup = (
 	  onDragEnd={({ active, over }) => {
 	    if (over != null && active.id !== over.id) move (String (active.id), String (over.id))
 	  }}>
+	<div className="flex flex-wrap items-start gap-1">
 	{ordered.map (field => {
 	  const position = movable.findIndex (item => item.key === field.key)
 	  return <FieldBranch key={field.key} field={field}
@@ -107,28 +109,36 @@ const FieldGroup = (
 	      select={select} update={update} move={move}
 	      previous={movable[position - 1]?.key} next={movable[position + 1]?.key}/>
 	})}
+	</div>
       </DndContext>)
 }
 
 
 const CountsFieldTree = (
-    { resource, params, update }: {
+    { resource, params, update, fields: suppliedFields,
+      selectionKey = 'columns', parent = '' }: {
 	resource: CountsResource
+	fields?: CountField[]
+	selectionKey?: string
+	parent?: string
 	params: URLSearchParams
 	update: (key: string, value: string) => void },
 ) => {
   const { label } = useUITranslation ('counts')
-  const fields = fieldsForCounts (resource)
-  const roots = selectedCountColumns (resource, params)
+  const fields = suppliedFields ?? fieldsForCounts (resource)
+  const roots = suppliedFields == null ? selectedCountColumns (resource, params)
+      : selectedCountFields (fields, params, selectionKey, parent).map (field => field.key)
   const selected = selectedCountChildren (params)
-  for (const root of roots) selected.add (root)
+  const rootPath = (key: string) => parent ? `${parent}.${key}` : key
+  for (const root of roots) selected.add (rootPath (root))
   const select = (path: string, checked: boolean) => {
-    if (!path.includes ('.'))
+    const root = fields.find (field => rootPath (field.key) === path)
+    if (root != null)
     {
       const next = new Set<string> (roots)
-      if (checked) next.add (path)
-      else next.delete (path)
-      update ('columns', fields.filter (field => next.has (field.key))
+      if (checked) next.add (root.key)
+      else next.delete (root.key)
+      update (selectionKey, fields.filter (field => next.has (field.key))
 	  .map (field => field.key).join (','))
       return
     }
@@ -139,9 +149,9 @@ const CountsFieldTree = (
   }
   return (
       <>
-	<FieldGroup fields={fields} path="" params={params} enabled selected={selected}
+	<FieldGroup fields={fields} path={parent} params={params} enabled selected={selected}
 	    select={select} update={update}/>
-	<p className="mt-2 text-xs">{label ('nested.selection')}</p>
+	{suppliedFields == null && <p className="mt-2 text-xs">{label ('nested.selection')}</p>}
       </>)
 }