#434

frontend/src/components/counts/CountsControls.tsx

@@ -0,0 +1,145 @@
+import { useId, useState } from 'react'
+
+import CountsFieldTree from '@/components/counts/CountsFieldTree'
+import DateTimeField from '@/components/common/DateTimeField'
+import FormField from '@/components/common/FormField'
+import { Button } from '@/components/ui/button'
+import { normaliseCountsParams } from '@/lib/counts'
+import { fetchTagByName } from '@/lib/tags'
+import { inputClass } from '@/lib/utils'
+import { useLocale } from '@/lib/useLocale'
+import { useUITranslation } from '@/lib/useUITranslation'
+
+import type { CountsResource } from '@/lib/counts'
+
+
+const CountsControls = (
+    { resource, applied, open, setOpen, execute }: {
+	resource: CountsResource
+	applied: URLSearchParams
+	open: boolean
+	setOpen: (open: boolean) => void
+	execute: (params: URLSearchParams) => void },
+) => {
+  const { label, message } = useUITranslation ('counts')
+  const locale = useLocale ()
+  const id = useId ()
+  const [draft, setDraft] = useState (() => new URLSearchParams (applied))
+  const [error, setError] = useState (false)
+  const [pending, setPending] = useState (false)
+  const mode = draft.get ('mode') ?? 'summary'
+  const update = (key: string, value: string) => {
+    setDraft (previous => {
+      const next = new URLSearchParams (previous)
+      if (key === 'mode') next.delete ('sort')
+      if (value || key === 'columns' || key === 'children') next.set (key, value)
+      else next.delete (key)
+      return next
+    })
+  }
+  const submit = async () => {
+    setError (false)
+    setPending (true)
+    try
+    {
+      const next = new URLSearchParams (draft)
+      for (const key of resource === 'posts' ? ['tag'] : ['resource_id'])
+      {
+	const value = next.get (key)?.trim () ?? ''
+	if (value && !/^[1-9][0-9]*$/.test (value))
+	{
+	  const tag = await fetchTagByName (value, locale)
+	  if (tag == null)
+	    throw new Error ()
+	  next.set (key, String (tag.id))
+	}
+      }
+      next.delete ('page')
+      execute (normaliseCountsParams (resource, next))
+    }
+    catch
+    {
+      setError (true)
+    }
+    finally
+    {
+      setPending (false)
+    }
+  }
+
+  return (
+      <form className="shrink-0" onSubmit={event => {
+	event.preventDefault ()
+	void submit ()
+      }}>
+	<div className="flex flex-wrap items-center gap-2 border-b pb-2 dark:border-slate-700">
+	  <Button type="submit" size="sm" disabled={pending}>{label ('run')}</Button>
+	  <Button type="button" size="sm" variant="outline" aria-expanded={open}
+	      aria-controls={id} onClick={() => setOpen (!open)}>
+	    {label ('conditions')}<span aria-hidden>{open ? '▴' : '▾'}</span>
+	  </Button>
+	  <select className={inputClass (false, 'w-auto py-1')}
+	      aria-label={message ('mode').text} lang={message ('mode').language}
+	      value={mode} onChange={event => update ('mode', event.target.value)}>
+	    <option value="summary" lang={message ('summary').language}>
+	      {message ('summary').text}</option>
+	    <option value="details" lang={message ('details').language}>
+	      {message ('details').text}</option>
+	  </select>
+	</div>
+	{error && <p role="alert">{label ('shared:messages.checkInputModern')}</p>}
+	<div id={id} hidden={!open} className="border-b py-2 dark:border-slate-700">
+	  <div className="grid gap-4 md:grid-cols-2">
+	    <fieldset className="min-w-0" data-counts-output>
+	      <legend className="mb-2 font-semibold">{label ('output')}</legend>
+	      {mode === 'summary' ? (
+		  <label className="flex flex-wrap items-center gap-2">
+		    {label ('axis')}
+		    <select className={inputClass (false, 'w-auto py-1')}
+			value={draft.get ('axis') ?? 'month'}
+			aria-label={message ('axis').text} lang={message ('axis').language}
+			onChange={event => update ('axis', event.target.value)}>
+		      {['month', 'user'].map (axis => (
+			  <option key={axis} value={axis} lang={message (`axes.${axis}`).language}>
+			    {message (`axes.${axis}`).text}</option>))}
+		    </select>
+		  </label>) : (
+		  <CountsFieldTree resource={resource} params={draft} update={update}/>)}
+	    </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'}
+		    onChange={event => update ('latest', event.target.checked ? '1' : '0')}/>
+		{label ('latestOnly')}
+	      </label>
+	      <div className="grid gap-2 md:grid-cols-2">
+		{['from', 'before'].map (key => (
+		    <FormField key={key} label={label (`fields.${key}`)}>
+		      {() => <DateTimeField value={draft.get (key) ?? ''}
+			  aria-label={message (`fields.${key}`).text}
+			  lang={message (`fields.${key}`).language}
+			  onChange={value => update (key, value ?? '')}/>}
+		    </FormField>))}
+	      </div>
+	      <div className="grid gap-2 md:grid-cols-2">
+		{[['resource_id', resource === 'posts' ? 'post' : 'tag'], ['user_id', 'actor'],
+		  ...(resource === 'posts' ? [['tag', 'tag']] : []), ['limit', 'limit']]
+		    .map (([key, field]) => (
+			<FormField key={key} label={label (`fields.${field}`)}>
+			  {() => <input aria-label={message (`fields.${field}`).text}
+			      lang={message (`fields.${field}`).language}
+			      type={key === 'limit' ? 'number' : 'text'} min={1} max={100}
+			      value={draft.get (key) ?? (key === 'limit' ? '20' : '')}
+			      onChange={event => update (key, event.target.value)}
+			      className={inputClass (false, 'py-1')}/>}
+			</FormField>))}
+	      </div>
+	    </fieldset>
+	  </div>
+	</div>
+      </form>)
+}
+
+
+export default CountsControls