#434

frontend/src/components/counts/CountsAdditionalConditions.tsx

@@ -2,7 +2,8 @@ import { useState } from 'react'
 
 import DateTimeField from '@/components/common/DateTimeField'
 import { Button } from '@/components/ui/button'
-import { countsFieldLabel, countsFilterFields, readCountsJSON, useCountsDefinition }
+import { countsEventTypes, countsFieldLabel, countsFilterFields,
+	 readCountsJSON, useCountsDefinition }
     from '@/lib/countsDefinitions'
 import useDialogue from '@/lib/dialogues/useDialogue'
 import { inputClass } from '@/lib/utils'
@@ -70,14 +71,25 @@ const CountsAdditionalConditions = ({ params, update }: {
 	  {' · '}{label (`operators.${condition.operator}`)}
         </button>
         {(condition.operator === 'range' ? ['value', 'end'] as const : ['value'] as const)
-            .map (key => datetime ? <DateTimeField precision="second" key={key}
+	    .map (key => condition.field === 'event_type' ? (
+		<select key={key} value={condition[key] ?? ''} disabled={condition.blank}
+		    className={inputClass (false, 'w-36 py-1')}
+		    aria-label={message ('value').text}
+		    onChange={event => patch (index, { [key]: event.target.value })}>
+		  <option value=""/>
+		  {condition[key] && !countsEventTypes.some (event => event === condition[key])
+		      && <option value={condition[key]}>{condition[key]}</option>}
+		  {countsEventTypes.map (event => <option key={event} value={event}
+		      lang={message (`events.${event}`).language}>
+		    {message (`events.${event}`).text}</option>)}
+		</select>) : (datetime ? <DateTimeField precision="second" key={key}
                 value={condition[key] ?? ''} disabled={condition.blank}
                 aria-label={message (key === 'end' ? 'through' : 'value').text}
                 onChange={value => patch (index, { [key]: value ?? '' })}/> : (
                 <input key={key} value={condition[key] ?? ''} disabled={condition.blank}
                     className={inputClass (false, 'w-36 py-1')}
                     aria-label={message ('value').text}
-                    onChange={event => patch (index, { [key]: event.target.value })}/>))}
+		    onChange={event => patch (index, { [key]: event.target.value })}/>)))}
         <label className="inline-flex items-center gap-1">
           <input type="checkbox" checked={condition.blank ?? false}
               onChange={event => patch (index, { blank: event.target.checked })}/>