#434

frontend/src/components/counts/CountsAdditionalConditions.tsx

@@ -21,21 +21,36 @@ const ConditionEditor = (
 ) => {
   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 [condition, setCondition] = useState<CountsCondition> (() => {
+    const next = { ...initial, field: initial?.field ?? 'resource_id',
+	operator: initial?.operator ?? 'eq' }
+    if (next.operator !== 'range') delete next.end
+    return next
+  })
+  const { field, operator } = condition
   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])
+	onSelect: () => save (condition) }])
+  }, [controls, condition, 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') }}>
+	onChange={event => {
+	  const field = event.target.value
+	  const operator = definition.fields.find (item => item.key === field)?.operators[0]
+	  if (operator != null) setCondition ({ field, operator })
+	}}>
       {Object.keys (fields).filter (key => fields[key] !== 'json').map (key => (
           <option key={key} value={key}>{message (countsFieldLabel (key)).text}</option>))}
     </select>
     <select value={operator} aria-label={message ('operator').text} className={inputClass ()}
-        onChange={event => setOperator (event.target.value)}>
+	onChange={event => setCondition (previous => {
+	  const operator = event.target.value
+	  const next = { ...previous, operator }
+	  if (operator !== 'range') delete next.end
+	  if ((operator === 'like') !== (previous.operator === 'like')) delete next.value
+	  return next
+	})}>
       {operators.map (key => <option key={key} value={key}>
         {message (`operators.${key}`).text}</option>)}
     </select>