#434

frontend/src/components/counts/CountsControls.tsx

@@ -1,4 +1,4 @@
-import { useId, useState } from 'react'
+import { useEffect, useId, useState } from 'react'
 
 import CountsFieldTree from '@/components/counts/CountsFieldTree'
 import DateTimeField from '@/components/common/DateTimeField'
@@ -14,18 +14,32 @@ import type { CountsResource } from '@/lib/counts'
 
 
 const CountsControls = (
-    { resource, applied, open, setOpen, execute, displayJSON }: {
+    { resource, applied, open, setOpen, execute, displayJSON, reorder }: {
 	resource: CountsResource
 	applied: URLSearchParams
 	open: boolean
 	setOpen: (open: boolean) => void
 	execute: (params: URLSearchParams) => void
-	displayJSON: (enabled: boolean) => void },
+	displayJSON: (enabled: boolean) => void
+	reorder: (value: string) => void },
 ) => {
   const { label, message } = useUITranslation ('counts')
   const locale = useLocale ()
   const id = useId ()
   const [draft, setDraft] = useState (() => new URLSearchParams (applied))
+  const order = applied.get ('order')
+  const nestedJSON = applied.get ('nested_json')
+  useEffect (() => {
+    setDraft (previous => {
+      const next = new URLSearchParams (previous)
+      for (const [key, value] of Object.entries ({ order, nested_json: nestedJSON }))
+      {
+	if (value == null) next.delete (key)
+	else next.set (key, value)
+      }
+      return next
+    })
+  }, [order, nestedJSON])
   const [error, setError] = useState (false)
   const [pending, setPending] = useState (false)
   const mode = draft.get ('mode') ?? 'summary'
@@ -113,12 +127,15 @@ const CountsControls = (
 			    {message (`axes.${axis}`).text}</option>))}
 		    </select>
 		  </label>) : (
-		  <CountsFieldTree resource={resource} params={draft} update={update}/>)}
+		  <CountsFieldTree resource={resource} params={draft} update={(key, value) => {
+		    update (key, value)
+		    if (key === 'order') reorder (value)
+		  }}/>)}
 	    </fieldset>
 	    <fieldset className="min-w-0 space-y-2" data-counts-filters>
 	      <legend className="mb-2 font-semibold">{label ('filters')}</legend>
 	      <label className="flex items-center gap-1">
-		<input type="checkbox" checked={draft.get ('latest') === '1'}
+		<input type="checkbox" checked={draft.get ('latest') !== '0'}
 		    onChange={event => update ('latest', event.target.checked ? '1' : '0')}/>
 		{label ('latestOnly')}
 	      </label>