#434

frontend/src/components/counts/CountsAdditionalConditions.tsx

@@ -25,7 +25,8 @@ const ConditionEditor = (
   const { label, message } = useUITranslation ('counts')
   const fields = definition.filterFields ?? definition.fields
   const fieldName = (key: string) => (fields.find (item => item.key === key)?.labels
-      ?? [countsFieldLabel (key)]).map (key => message (key).text).join (' › ')
+      ?? [countsFieldLabel (key)]).map (label => message (
+	  label, fields.find (item => item.key === key)?.labelValues).text).join (' › ')
   const [condition, setCondition] = useState<CountsCondition> (() => {
     const next = { ...initial, field: initial?.field ?? 'resource_id',
 	operator: initial?.operator ?? 'eq' }
@@ -39,9 +40,9 @@ const ConditionEditor = (
     controls.setActions ([{ label: label (initial == null ? 'add' : 'shared:actions.edit'),
 	onSelect: () => save (condition) }])
   }, [controls, condition, initial, label, save])
-  return <div className="space-y-2">
+  return <div className="space-y-5 px-1 py-3 md:px-3">
     <select value={field} aria-label={message ('field').text}
-	className={inputClass (false, 'h-9 w-full')}
+	className={inputClass (false, 'h-11 w-full')}
 	onChange={event => {
 	  const field = event.target.value
 	  const operator = fields.find (item => item.key === field)?.operators[0]
@@ -51,7 +52,7 @@ const ConditionEditor = (
 	  <option key={field.key} value={field.key}>{fieldName (field.key)}</option>))}
     </select>
     <select value={operator} aria-label={message ('operator').text}
-	className={inputClass (false, 'h-9 w-full')}
+	className={inputClass (false, 'h-11 w-full')}
 	onChange={event => setCondition (previous => {
 	  const operator = event.target.value
 	  const next = { ...previous, operator }
@@ -74,15 +75,16 @@ const ConditionEditor = (
       {operators.map (key => <option key={key} value={key}>
         {message (`operators.${key}`).text}</option>)}
     </select>
-    <label className="block text-sm">{label ('pattern.input')}
+    {inputs.length > 1 && <label className="block space-y-2 text-sm">
+      <span>{label ('counts:pattern.input')}</span>
       <select value={condition.input ?? inputs[0]}
-	  className={inputClass (false, 'h-9 w-full')}
+	  className={inputClass (false, 'h-11 w-full')}
 	  onChange={event => setCondition (previous => ({ ...previous,
 	      input: event.target.value as CountsCondition['input'] }))}>
 	{inputs.map (input => <option key={input} value={input}>
-	  {message (`pattern.${input}`).text}</option>)}
+	  {message (`counts:pattern.${input}`).text}</option>)}
       </select>
-    </label>
+    </label>}
   </div>
 }
 
@@ -98,7 +100,8 @@ const CountsAdditionalConditions = ({ params, update }: {
   const metadata = definition.filterFields ?? definition.fields
   const fields = metadata.filter (field => field.operators.length > 0)
   const fieldName = (key: string) => (metadata.find (item => item.key === key)?.labels
-      ?? [countsFieldLabel (key)]).map (key => message (key).text).join (' › ')
+      ?? [countsFieldLabel (key)]).map (label => message (
+	  label, metadata.find (item => item.key === key)?.labelValues).text).join (' › ')
   const write = (next: CountsCondition[]) => update (
       'conditions', encodeCountState ('conditions', next))
   const replace = (index: number, condition: CountsCondition) => write (
@@ -112,6 +115,7 @@ const CountsAdditionalConditions = ({ params, update }: {
       else replace (index, condition)
     }
     void dialogue.form ({ title: label ('additionalConditions'), footerLayout: 'inline',
+	size: 'large',
 	body: controls => <ConditionEditor definition={definition}
 	    initial={initial} controls={controls} save={save}/> })
   }
@@ -124,7 +128,7 @@ const CountsAdditionalConditions = ({ params, update }: {
       const options: string[] = type === 'boolean' ? ['true', 'false'] : [...countsEventTypes]
       const namespace = type === 'boolean' ? 'truthValues' : 'events'
       return <select value={condition[key] ?? ''} disabled={condition.blank}
-	  className={inputClass (false, 'h-9 w-36 min-w-0 max-w-full py-1')}
+	  className={inputClass (false, 'h-10 w-36 min-w-0 max-w-full py-1')}
 	  aria-label={aria.text}
 	  lang={aria.language}
 	  onChange={event => patch (index, { [key]: event.target.value })}>
@@ -135,13 +139,13 @@ const CountsAdditionalConditions = ({ params, update }: {
       </select>
     }
     if (type === 'datetime')
-      return <DateTimeField precision="second" className="h-9 w-48 min-w-0 max-w-full py-1"
+      return <DateTimeField precision="second" className="h-10 w-48 min-w-0 max-w-full py-1"
 	  value={condition[key] ?? ''} disabled={condition.blank}
 	  aria-label={aria.text} lang={aria.language}
 	  onChange={value => patch (index, { [key]: value ?? '' })}/>
     return <input value={condition[key] ?? ''} disabled={condition.blank}
 	type={(type === 'integer' || type === 'interval') ? 'number' : 'text'}
-	className={inputClass (false, 'h-9 w-36 min-w-0 max-w-full py-1')}
+	className={inputClass (false, 'h-10 w-36 min-w-0 max-w-full py-1')}
 	aria-label={aria.text} lang={aria.language}
 	onChange={event => patch (index, { [key]: event.target.value })}/>
   }
@@ -150,8 +154,8 @@ const CountsAdditionalConditions = ({ params, update }: {
       <Button type="button" variant="outline" size="sm" disabled={fields.length === 0}
 	  onClick={() => edit ()}>{label ('add')}</Button></legend>
     {conditions.map ((condition, index) => (
-	<div key={index} className="flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1
-	    border-b border-slate-200 py-1 dark:border-slate-700">
+	<div key={index} className="flex min-w-0 flex-wrap items-center gap-x-2 gap-y-2
+	    border-b border-slate-200 py-2 dark:border-slate-700">
 	  <Button type="button" variant="ghost" size="sm" onClick={() => edit (index)}
 	      aria-label={`${fieldName (condition.field)} ${message (
 		  `operators.${condition.operator}`).text}`}