ReportFilterRow() — supabase Function Reference

Source Code

apps/studio/components/interfaces/Reports/ReportFilterPopover.tsx lines 131–260

const ReportFilterRow = ({
  filter,
  filterIdx,
  filterProperties,
  onChange,
  onDelete,
  onKeyDown,
}: {
  filter: ReportFilter
  filterIdx: number
  filterProperties: ReportFilterProperty[]
  onChange: (index: number, filter: ReportFilter) => void
  onDelete: (index: number) => void
  onKeyDown: (event: KeyboardEvent<HTMLInputElement>) => void
}) => {
  const property = filterProperties.find((p) => p.name === filter.propertyName)

  const propertyOptions = filterProperties.map((prop) => ({
    value: prop.name,
    label: prop.label,
    postLabel: prop.type,
  }))

  const operatorOptions =
    property?.operators.map((op) => ({
      value: op,
      label: op,
    })) || []

  const valueOptions = property?.options || []

  const handlePropertyChange = (newPropertyName: string | number) => {
    const newProperty = filterProperties.find((p) => p.name === newPropertyName)
    if (newProperty) {
      onChange(filterIdx, {
        propertyName: newPropertyName,
        operator: newProperty.operators[0] || '=',
        value: '',
      })
    }
  }

  const handleOperatorChange = (newOperator: string | number) => {
    onChange(filterIdx, {
      ...filter,
      operator: newOperator,
    })
  }

  const handleValueChange = (value: string | number) => {
    onChange(filterIdx, {
      ...filter,
      value,
    })
  }

  return (
    <div className="flex flex-col px-3">
      {filterIdx > 0 && (
        <div className="flex items-center gap-2 p-1 w-full">
          <div className="w-auto flex-1 bg-border h-px" />
          <span className="text-xs font-mono text-foreground-lighter">AND</span>
          <div className="w-auto flex-1 bg-border h-px" />
        </div>
      )}
      <div className="flex w-full items-center justify-between gap-x-2">
        <DropdownControl align="start" options={propertyOptions} onSelect={handlePropertyChange}>
          <Button
            asChild
            type="outline"
            icon={
              <div className="text-foreground-lighter">
                <ChevronDown strokeWidth={1.5} />
              </div>
            }
            className="w-32 justify-start"
          >
            <span>{property?.label ?? 'Select property'}</span>
          </Button>
        </DropdownControl>

        <DropdownControl align="start" options={operatorOptions} onSelect={handleOperatorChange}>
          <Button
            asChild
            type="outline"
            icon={
              <div className="text-foreground-lighter">
                <ChevronDown strokeWidth={1.5} />
              </div>
            }
            className="w-20 justify-start"
          >
            <span>{filter.operator}</span>
          </Button>
        </DropdownControl>

        {valueOptions?.length > 0 ? (
          <FilterableInput
            value={filter.value}
            onChange={handleValueChange}
            onKeyDown={onKeyDown}
            placeholder={
              property?.placeholder || `Enter ${property?.type === 'number' ? 'number' : 'text'}`
            }
            availableOptions={valueOptions?.map((option) => String(option.value)) || []}
          />
        ) : (
          <Input
            size="tiny"
            className="flex-1"
            placeholder={
              property?.placeholder || `Enter ${property?.type === 'number' ? 'number' : 'text'}`
            }
            value={filter.value}
            type={property?.type === 'number' ? 'number' : 'text'}
            onChange={(event) => handleValueChange(event.target.value)}
            onKeyDown={onKeyDown}
          />
        )}
        <Button
          type="text"
          size="tiny"
          className="px-1"
          icon={<X strokeWidth={1.5} />}
          onClick={() => onDelete(filterIdx)}
        />
      </div>
    </div>
  )
}