214 行
10 KiB
TypeScript
214 行
10 KiB
TypeScript
import { useEffect, useState } from 'react'
|
||
|
||
import CountsConditionValues from '@/components/counts/CountsConditionValues'
|
||
import DateTimeField from '@/components/common/DateTimeField'
|
||
import { Button } from '@/components/ui/button'
|
||
import { countsConditionInputs, countsEventTypes, countsFieldLabel, countsFilterFields,
|
||
countsSetOperators, useCountsDefinition }
|
||
from '@/lib/countsDefinitions'
|
||
import useDialogue from '@/lib/dialogues/useDialogue'
|
||
import { countsConditionValue } from '@/lib/countsDisplay'
|
||
import { countsAxisLabel } from '@/lib/countsDefinitions'
|
||
import { useLocale } from '@/lib/useLocale'
|
||
import { inputClass } from '@/lib/utils'
|
||
import { useUITranslation } from '@/lib/useUITranslation'
|
||
|
||
import { readCountState, encodeCountState } from '@/lib/queryState'
|
||
|
||
import type { CountsResult } from '@/lib/counts'
|
||
import type { DialogueFormControls } from '@/lib/dialogues/useDialogue'
|
||
import type { CountsCondition, CountsDefinition } from '@/lib/countsDefinitions'
|
||
|
||
|
||
const ConditionEditor = (
|
||
{ definition, initial, controls, save }: {
|
||
definition: CountsDefinition; initial?: CountsCondition
|
||
controls: DialogueFormControls
|
||
save: (condition: CountsCondition) => void },
|
||
) => {
|
||
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 (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' }
|
||
if (next.operator !== 'range') delete next.end
|
||
return next
|
||
})
|
||
const { field, operator } = condition
|
||
const operators = fields.find (item => item.key === field)?.operators ?? []
|
||
const inputs = countsConditionInputs (fields.find (item => item.key === field), operator)
|
||
useEffect (() => {
|
||
controls.setActions ([{ label: label (initial == null ? 'add' : 'shared:actions.edit'),
|
||
onSelect: () => save (condition) }])
|
||
}, [controls, condition, initial, label, save])
|
||
return <div className="space-y-2">
|
||
<select value={field} aria-label={message ('field').text}
|
||
className={inputClass (false, 'h-11 w-full')}
|
||
onChange={event => {
|
||
const field = event.target.value
|
||
const operator = fields.find (item => item.key === field)?.operators[0]
|
||
if (operator != null) setCondition ({ field, operator })
|
||
}}>
|
||
{fields.filter (item => item.operators.length > 0
|
||
&& (!item.legacy || item.key === field)).map (field => (
|
||
<option key={field.key} value={field.key}>{fieldName (field.key)}</option>))}
|
||
</select>
|
||
<select value={operator} aria-label={message ('operator').text}
|
||
className={inputClass (false, 'h-11 w-full')}
|
||
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
|
||
const choices = countsConditionInputs (fields.find (item => item.key === field), operator)
|
||
if (countsSetOperators.includes (operator))
|
||
{
|
||
delete next.value
|
||
delete next.end
|
||
next.input = choices.includes (previous.input ?? 'single') ? previous.input : choices[0]
|
||
}
|
||
else
|
||
{
|
||
delete next.values
|
||
delete next.input
|
||
}
|
||
return next
|
||
})}>
|
||
{operators.map (key => <option key={key} value={key}>
|
||
{message (`operators.${key}`).text}</option>)}
|
||
</select>
|
||
{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-11 w-full')}
|
||
onChange={event => setCondition (previous => ({ ...previous,
|
||
input: event.target.value as CountsCondition['input'] }))}>
|
||
{inputs.map (input => <option key={input} value={input}>
|
||
{message (`counts:pattern.${input}`).text}</option>)}
|
||
</select>
|
||
</label>}
|
||
</div>
|
||
}
|
||
|
||
|
||
const CountsAdditionalConditions = ({ params, update, conditionLabels }: {
|
||
conditionLabels?: CountsResult['conditionLabels']
|
||
params: URLSearchParams
|
||
update: (key: string, value: string) => void },
|
||
) => {
|
||
const { label, message } = useUITranslation ('counts')
|
||
const definition = useCountsDefinition ()
|
||
const dialogue = useDialogue ()
|
||
const locale = useLocale ()
|
||
const conditions = readCountState<CountsCondition[]> (params, 'conditions', [])
|
||
const metadata = definition.filterFields ?? definition.fields
|
||
const fields = metadata.filter (field => field.operators.length > 0 && !field.legacy)
|
||
const fieldName = (key: string) => (metadata.find (item => item.key === key)?.labels
|
||
?? [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 (
|
||
conditions.map ((item, position) => position === index ? condition : item))
|
||
const patch = (index: number, change: Partial<CountsCondition>) =>
|
||
replace (index, { ...conditions[index], ...change })
|
||
const edit = (index?: number) => {
|
||
const initial = index == null ? undefined : conditions[index]
|
||
const save = (condition: CountsCondition) => {
|
||
if (index == null) write ([...conditions, condition])
|
||
else replace (index, condition)
|
||
}
|
||
void dialogue.form ({ title: label ('additionalConditions'), footerLayout: 'inline',
|
||
body: controls => <ConditionEditor definition={definition}
|
||
initial={initial} controls={controls} save={save}/> })
|
||
}
|
||
const valueInput = (condition: CountsCondition, index: number, key: 'value' | 'end') => {
|
||
const type = countsFilterFields (definition)[condition.field]
|
||
const aria = message (key === 'end' ? 'through'
|
||
: (condition.operator === 'range' ? 'from' : 'value'))
|
||
if (type === 'boolean' || condition.field === 'event_type')
|
||
{
|
||
const options: string[] = type === 'boolean' ? ['true', 'false'] : [...countsEventTypes]
|
||
const namespace = type === 'boolean' ? 'truthValues' : 'events'
|
||
return <select value={condition[key] == null ? '' : String (condition[key])} disabled={condition.blank}
|
||
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 })}>
|
||
<option value=""/>
|
||
{options.map (value => <option key={value} value={value}
|
||
lang={message (`${namespace}.${value}`).language}>
|
||
{message (`${namespace}.${value}`).text}</option>)}
|
||
</select>
|
||
}
|
||
if (type === 'datetime')
|
||
return <DateTimeField precision="second" className="h-10 w-48 min-w-0 max-w-full py-1"
|
||
value={condition[key] == null ? '' : String (condition[key])} disabled={condition.blank}
|
||
aria-label={aria.text} lang={aria.language}
|
||
onChange={value => patch (index, { [key]: value ?? '' })}/>
|
||
return <input value={condition[key] == null ? '' : String (condition[key])} disabled={condition.blank}
|
||
type={(type === 'integer' || type === 'interval') ? 'number' : 'text'}
|
||
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 })}/>
|
||
}
|
||
return <fieldset className="min-w-0 space-y-1">
|
||
<legend className="flex items-center gap-2">{label ('additionalConditions')}
|
||
<Button type="button" variant="outline" size="sm" disabled={fields.length === 0}
|
||
onClick={() => edit ()}>{label ('add')}</Button></legend>
|
||
{conditions.map ((condition, index) => condition.operator === 'axis_eq' ? (
|
||
<div key={index} className="flex flex-wrap items-center gap-2 border-b py-2">
|
||
<span>{countsAxisLabel (condition, definition, locale).text}</span>
|
||
<span>{label ('operatorSymbols.eq')}</span>
|
||
<span>{countsConditionValue (condition.value, condition, locale,
|
||
params.get ('timezone') ?? 'UTC', conditionLabels)}</span>
|
||
<Button type="button" variant="ghost" size="sm"
|
||
aria-label={message ('remove').text}
|
||
onClick={() => write (conditions.filter ((_, position) => position !== index))}>
|
||
×</Button>
|
||
</div>) : (
|
||
<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}`}
|
||
className="min-w-0 max-w-full justify-start gap-2 whitespace-normal px-1 text-left">
|
||
<span className="min-w-0 break-words">{fieldName (condition.field)}</span>
|
||
{condition.operator !== 'range' && <span aria-hidden="true" className="shrink-0">
|
||
{label (`operatorSymbols.${condition.operator}`)}</span>}
|
||
</Button>
|
||
{countsSetOperators.includes (condition.operator) ? (
|
||
<CountsConditionValues key={`${condition.field}:${condition.operator}`}
|
||
condition={condition}
|
||
field={metadata.find (field => field.key === condition.field)!}
|
||
definition={definition} params={params}
|
||
maximum={Math.max (0, 100 - conditions.reduce ((sum, item, position) =>
|
||
sum + (position === index ? 0 : item.values?.length ?? 0), 0))}
|
||
change={values => patch (index, { values })}/>) : (
|
||
<div className="inline-flex min-w-0 max-w-full items-center gap-1">
|
||
{valueInput (condition, index, 'value')}
|
||
{condition.operator === 'range' && <>
|
||
<span aria-hidden="true" className="shrink-0">{label ('operatorSymbols.range')}</span>
|
||
{valueInput (condition, index, 'end')}
|
||
</>}
|
||
</div>)}
|
||
<div className="inline-flex shrink-0 items-center gap-1">
|
||
<label className="inline-flex items-center gap-1 text-sm">
|
||
<input type="checkbox" checked={condition.blank ?? false}
|
||
onChange={event => patch (index, { blank: event.target.checked })}/>
|
||
{label ('blank')}</label>
|
||
<Button type="button" variant="ghost" size="sm" className="px-1"
|
||
aria-label={message ('remove').text}
|
||
onClick={() => write (conditions.filter ((_, position) => index !== position))}>
|
||
×</Button>
|
||
</div>
|
||
</div>))}
|
||
</fieldset>
|
||
}
|
||
|
||
|
||
export default CountsAdditionalConditions
|