#434

frontend/src/components/counts/CountsControls.tsx

@@ -9,7 +9,7 @@ import FormField from '@/components/common/FormField'
 import HelpPopover from '@/components/common/HelpPopover'
 import TagInput from '@/components/common/TagInput'
 import { Button } from '@/components/ui/button'
-import { normaliseCountsParams } from '@/lib/counts'
+import { countsUseLatest, normaliseCountsParams } from '@/lib/counts'
 import { useClientMotion } from '@/lib/useClientMotion'
 import { inputClass } from '@/lib/utils'
 import { useUITranslation } from '@/lib/useUITranslation'
@@ -20,11 +20,13 @@ import type { CountsResource } from '@/lib/counts'
 
 
 const CountsControls = (
-    { resource, applied, open, setOpen, execute, displayJSON, reorder, actions }: {
+    { resource, applied, open, setOpen, execute, displayJSON, displayRowNumbers,
+      reorder, actions }: {
         resource: CountsResource; applied: URLSearchParams; open: boolean
         setOpen: (open: boolean) => void
         execute: (params: URLSearchParams) => void
         displayJSON: (enabled: boolean) => void
+	displayRowNumbers: (enabled: boolean) => void
         reorder: (value: string) => void; actions?: ReactNode },
 ) => {
   const { label, message } = useUITranslation ('counts')
@@ -33,17 +35,19 @@ const CountsControls = (
   const [draft, setDraft] = useState (() => new URLSearchParams (applied))
   const order = applied.get ('order')
   const nestedJSON = applied.get ('nested_json')
+  const rowNumbers = applied.get ('row_numbers')
   useEffect (() => {
     setDraft (previous => {
       const next = new URLSearchParams (previous)
-      for (const [key, value] of Object.entries ({ order, nested_json: nestedJSON }))
+      const display = { order, nested_json: nestedJSON, row_numbers: rowNumbers }
+      for (const [key, value] of Object.entries (display))
       {
         if (value == null) next.delete (key)
         else next.set (key, value)
       }
       return next
     })
-  }, [order, nestedJSON])
+  }, [order, nestedJSON, rowNumbers])
   const mode = draft.get ('mode') ?? 'summary'
   const history = draft.get ('definition') === 'history'
   const update = (key: string, value: string) => setDraft (previous => {
@@ -66,13 +70,18 @@ const CountsControls = (
           {label (key)}<DateTimeField precision="second" value={draft.get (key) ?? ''}
               aria-label={message (key).text} onChange={value => update (key, value ?? '')}/>
         </label>)}
-      </> : <label className="flex flex-wrap items-center gap-1 text-sm">
+      </> : <div className="flex flex-wrap items-center gap-1 text-sm">
         {label ('referenceAt')}<HelpPopover label={message ('referenceAt')}>
           {label ('referenceHelp')}</HelpPopover>
-        <DateTimeField precision="second" value={draft.get ('at') ?? ''}
-            aria-label={message ('referenceAt').text}
+	<label className="inline-flex items-center gap-1">
+	  <input type="checkbox" checked={countsUseLatest (draft)}
+	      onChange={event => update ('current', event.target.checked ? '1' : '0')}/>
+	  {label ('latest')}</label>
+	<DateTimeField precision="second" disabled={countsUseLatest (draft)}
+	    value={draft.get ('at') ?? ''}
+	    aria-label={message ('referenceAt').text} lang={message ('referenceAt').language}
             onChange={value => update ('at', value ?? '')}/>
-      </label>}
+      </div>}
     </div>
     <div className="flex flex-wrap items-center gap-2 border-b py-1 dark:border-slate-700">
       <Button type="submit" size="sm">{label ('run')}</Button>
@@ -87,7 +96,14 @@ const CountsControls = (
           value={mode} onChange={event => update ('mode', event.target.value)}>
         {['summary', 'details'].map (value => <option key={value} value={value}>
           {message (value).text}</option>)}
-      </select>{actions}
+      </select>
+      <label className="inline-flex items-center gap-1 text-sm">
+	<input type="checkbox" checked={draft.get ('row_numbers') === '1'}
+	    onChange={event => {
+	      update ('row_numbers', event.target.checked ? '1' : '0')
+	      displayRowNumbers (event.target.checked)
+	    }}/>{label ('rowNumbers')}
+      </label>{actions}
     </div>
     <AnimatedCollapse id={id} open={open}>
     <div className="max-h-[35dvh] overflow-y-auto overscroll-contain