#434

frontend/src/components/counts/CountsAdditionalConditions.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 
 import DateTimeField from '@/components/common/DateTimeField'
 import { Button } from '@/components/ui/button'
@@ -9,18 +9,25 @@ import useDialogue from '@/lib/dialogues/useDialogue'
 import { inputClass } from '@/lib/utils'
 import { useUITranslation } from '@/lib/useUITranslation'
 
+import type { DialogueFormControls } from '@/lib/dialogues/useDialogue'
 import type { CountsCondition, CountsDefinition } from '@/lib/countsDefinitions'
 
 
-const ConditionEditor = ({ definition, initial, save }: {
-    definition: CountsDefinition; initial?: CountsCondition
-    save: (condition: CountsCondition) => void },
+const ConditionEditor = (
+    { definition, initial, controls, save }: {
+	definition: CountsDefinition; initial?: CountsCondition
+	controls: DialogueFormControls
+	save: (condition: CountsCondition) => void },
 ) => {
   const { label, message } = useUITranslation ('counts')
   const fields = countsFilterFields (definition)
   const [field, setField] = useState (initial?.field ?? 'resource_id')
   const [operator, setOperator] = useState (initial?.operator ?? 'eq')
   const operators = definition.fields.find (item => item.key === field)?.operators ?? []
+  useEffect (() => {
+    controls.setActions ([{ label: label (initial == null ? 'add' : 'shared:actions.edit'),
+	onSelect: () => save ({ ...initial, field, operator }) }])
+  }, [controls, field, operator, initial, label, save])
   return <div className="space-y-2">
     <select value={field} aria-label={message ('field').text} className={inputClass ()}
         onChange={event => { setField (event.target.value); setOperator ('eq') }}>
@@ -32,8 +39,6 @@ const ConditionEditor = ({ definition, initial, save }: {
       {operators.map (key => <option key={key} value={key}>
         {message (`operators.${key}`).text}</option>)}
     </select>
-    <Button type="button" onClick={() => save ({ ...initial, field, operator })}>
-      {label (initial == null ? 'add' : 'shared:actions.edit')}</Button>
   </div>
 }
 
@@ -48,14 +53,14 @@ const CountsAdditionalConditions = ({ params, update }: {
   const conditions = readCountsJSON<CountsCondition[]> (params, 'conditions', [])
   const write = (next: CountsCondition[]) => update ('conditions', JSON.stringify (next))
   const edit = (index?: number) => {
-    void dialogue.form ({ title: label ('additionalConditions'), body: controls => (
-	<ConditionEditor definition={definition}
-	    initial={index == null ? undefined : conditions[index]}
-            save={condition => {
-              write (index == null ? [...conditions, condition]
-                  : conditions.map ((item, position) => position === index ? condition : item))
-              controls.close ()
-            }}/>) })
+    const initial = index == null ? undefined : conditions[index]
+    const save = (condition: CountsCondition) => {
+      write (index == null ? [...conditions, condition]
+          : conditions.map ((item, position) => position === index ? condition : item))
+    }
+    dialogue.form ({ title: label ('additionalConditions'), footerLayout: 'inline',
+        body: controls => <ConditionEditor definition={definition}
+            initial={initial} controls={controls} save={save}/> })
   }
   const patch = (index: number, change: Partial<CountsCondition>) => write (
       conditions.map ((item, position) => position === index ? { ...item, ...change } : item))