#434

frontend/src/components/counts/CountsFieldTree.tsx

@@ -2,7 +2,7 @@ import { useId, useState } from 'react'
 
 import AnimatedCollapse from '@/components/common/AnimatedCollapse'
 import SortableList from '@/components/common/SortableList'
-import { countChildPaths, fieldsForCounts, orderedCountFields,
+import { fieldsForCounts, orderedCountFields,
          selectedCountChildren, selectedCountColumns, selectedCountFields } from '@/lib/counts'
 import { useCountsDefinition } from '@/lib/countsDefinitions'
 import { useClientMotion } from '@/lib/useClientMotion'
@@ -26,7 +26,8 @@ const FieldBranch = ({ field, path, enabled, selected, params, select, update }:
   return <>
     <div className="flex items-center gap-1">
       <label className="inline-flex items-center gap-1">
-        <input type="checkbox" checked={checked} disabled={!enabled}
+        <input type="checkbox" checked={checked} disabled={!enabled || (field.children != null
+                && !field.children.some (child => selected.has (`${path}.${child.key}`)))}
             onChange={event => select (path, event.target.checked)}/>
         {label (field.label)}
       </label>
@@ -43,7 +44,7 @@ const FieldBranch = ({ field, path, enabled, selected, params, select, update }:
     {field.children != null && <AnimatedCollapse open={open} id={id}>
       <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}/>
+            enabled={enabled} selected={selected} select={select} update={update}/>
       </div>
     </AnimatedCollapse>}
   </>
@@ -65,9 +66,9 @@ const FieldGroup = ({ fields, path, params, enabled, selected, select, update }:
       renderGroup={(_, content) => content}
       onChange={groups => {
         const current = fields.map (field => `${prefix}${field.key}`)
-        const other = (params.get ('order') ?? '').split (',')
+        const other = (params.get ('order') ?? '').split (' ')
             .filter (key => key && !current.includes (key))
-        update ('order', [...other, ...groups.items.map (key => `${prefix}${key}`)].join (','))
+        update ('order', [...other, ...groups.items.map (key => `${prefix}${key}`)].join (' '))
       }} renderItem={key => {
         const field = fields.find (field => field.key === key)!
         return <FieldBranch field={field} path={`${prefix}${key}`} enabled={enabled}
@@ -101,13 +102,28 @@ const CountsFieldTree = (
       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 (','))
+	  .map (field => field.key).join (' '))
       return
     }
-    if (checked) selected.add (path)
+    if (checked)
+    {
+      const parts = path.split ('.')
+      for (let index = 1; index < parts.length; ++index)
+        selected.add (parts.slice (0, index + 1).join ('.'))
+    }
     else selected.delete (path)
-    update ('children', countChildPaths (fields).filter (
-	key => key.includes ('.') && selected.has (key)).join (','))
+    const nextParams = new URLSearchParams (params)
+    nextParams.set ('children', [...selected].filter (key => key.includes ('.')).join (' '))
+    const children = selectedCountChildren (nextParams)
+    update ('children', [...children].join (' '))
+    const nextRoots = new Set (roots)
+    const ancestor = fields.find (field => path.startsWith (`${rootPath (field.key)}.`))
+    if (checked && ancestor != null) nextRoots.add (ancestor.key)
+    for (const field of fields)
+      if (field.children != null && !field.children.some (child =>
+          children.has (`${rootPath (field.key)}.${child.key}`))) nextRoots.delete (field.key)
+    update (selectionKey, fields.filter (field => nextRoots.has (field.key))
+        .map (field => field.key).join (' '))
   }
   const visibleFields = parent === ''
       ? fields.filter (field => field.key !== 'thumbnail') : fields