#434

frontend/src/components/counts/CountsFieldTree.tsx

@@ -0,0 +1,72 @@
+import { countChildPaths, fieldsForCounts, selectedCountChildren,
+	 selectedCountColumns } from '@/lib/counts'
+import { useUITranslation } from '@/lib/useUITranslation'
+
+import type { CountField, CountsResource } from '@/lib/counts'
+
+
+const FieldBranch = (
+    { field, path, enabled, selected, select }: {
+	field: CountField
+	path: string
+	enabled: boolean
+	selected: Set<string>
+	select: (path: string, checked: boolean) => void },
+) => {
+  const { label } = useUITranslation ('counts')
+  const checked = selected.has (path)
+  const control = <label className="inline-flex items-center gap-1">
+    <input type="checkbox" checked={checked} disabled={!enabled}
+	onClick={event => event.stopPropagation ()}
+	onChange={event => select (path, event.target.checked)}/>
+    {label (field.label)}
+  </label>
+  return field.children ? (
+      <details className="my-1">
+	<summary className="cursor-pointer">{control}</summary>
+	<div className="ml-4 border-l pl-2 dark:border-slate-700">
+	  {field.children.map (child => (
+	      <FieldBranch key={child.key} field={child} path={`${path}.${child.key}`}
+		  enabled={enabled && checked} selected={selected} select={select}/>))}
+	</div>
+      </details>) : <div className="my-1">{control}</div>
+}
+
+
+const CountsFieldTree = (
+    { resource, params, update }: {
+	resource: CountsResource
+	params: URLSearchParams
+	update: (key: string, value: string) => void },
+) => {
+  const { label } = useUITranslation ('counts')
+  const fields = fieldsForCounts (resource)
+  const roots = selectedCountColumns (resource, params)
+  const selected = selectedCountChildren (params)
+  for (const root of roots) selected.add (root)
+  const select = (path: string, checked: boolean) => {
+    if (!path.includes ('.'))
+    {
+      const next = new Set<string> (roots)
+      if (checked) next.add (path)
+      else next.delete (path)
+      update ('columns', fields.filter (field => next.has (field.key))
+	  .map (field => field.key).join (','))
+      return
+    }
+    if (checked) selected.add (path)
+    else selected.delete (path)
+    update ('children', countChildPaths (fields).filter (
+	key => key.includes ('.') && selected.has (key)).join (','))
+  }
+  return (
+      <>
+	{fields.map (field => (
+	    <FieldBranch key={field.key} field={field} path={field.key}
+		enabled selected={selected} select={select}/>))}
+	<p className="mt-2 text-xs">{label ('nested.selection')}</p>
+      </>)
+}
+
+
+export default CountsFieldTree