FilterBuilder

<script lang="ts">
import type { FilterGroup, FilterRule } from '../../lib/filter-model';

function nodeIds(node: FilterGroup | FilterRule): string[] {
  if (node.kind === 'rule') return [node.id];
  return [node.id, ...node.children.flatMap(nodeIds)];
}

// Restored trees can already hold IDs from an earlier page load, so skip any in use.
let nodeCount = 0;
function createNodeId(prefix: string, taken: ReadonlySet<string>) {
  let id: string;
  do {
    nodeCount += 1;
    id = `${prefix}${nodeCount}`;
  } while (taken.has(id));
  return id;
}
</script>

<script setup lang="ts">
import { computed, type HTMLAttributes, ref, useId } from 'vue';

import { type FilterField, getFilterErrors } from '../../lib/filter-model';
import { cn } from '../../lib/utils';

import GroupEditor from './GroupEditor.vue';

export interface FilterBuilderProps {
  fields: readonly FilterField[];
  value: FilterGroup;
  disabled?: boolean;
  /** Limits how deep new groups go, with the root at zero. Deeper groups already in the tree show as invalid. */
  maxDepth?: number;
  /** Accessible name for the root group. */
  ariaLabel?: string;
  class?: HTMLAttributes['class'];
}

const props = withDefaults(defineProps<FilterBuilderProps>(), {
  disabled: false,
  maxDepth: 3,
  ariaLabel: 'Filters',
});
const emit = defineEmits<{ 'value-change': [value: FilterGroup] }>();

const idPrefix = useId();
const untouched = ref<ReadonlySet<string>>(new Set());

// A newly added rule stays quiet until it is edited; the application still sees its errors.
const errors = computed(() =>
  getFilterErrors(props.value, props.fields, props.maxDepth).filter(
    (error) => !untouched.value.has(error.id)
  )
);

function createId(kind: FilterRule['kind'] | FilterGroup['kind']) {
  const id = createNodeId(idPrefix, new Set(nodeIds(props.value)));
  if (kind === 'rule') untouched.value = new Set(untouched.value).add(id);
  return id;
}

function markEdited(id: string) {
  if (!untouched.value.has(id)) return;
  const next = new Set(untouched.value);
  next.delete(id);
  untouched.value = next;
}
</script>

<template>
  <div
    data-slot="filter-builder"
    :data-disabled="disabled || undefined"
    :class="
      cn(
        'nx:@container/builder nx:w-full nx:min-w-0 nx:rounded-lg nx:border-default nx:border-border-default nx:bg-container nx:p-4',
        props.class
      )
    "
  >
    <GroupEditor
      :fields="fields"
      :value="value"
      :disabled="disabled"
      :depth="0"
      :max-depth="maxDepth"
      :errors="errors"
      :label="ariaLabel"
      :create-id="createId"
      @value-change="emit('value-change', $event)"
      @rule-edited="markEdited"
    />
  </div>
</template>

<script setup lang="ts">
import { computed, useId } from 'vue';

import {
  changeFilterOperator,
  emptyFilterRule,
  type FilterField,
  type FilterOperator,
  filterOperatorLabels,
  type FilterRule,
  getFilterOperators,
  isValuelessOperator,
} from '../../lib/filter-model';
import {
  IconCalendar,
  IconHash,
  IconLetterCase,
  IconList,
  IconX,
} from '../../lib/icons';
import { cn } from '../../lib/utils';
import { Button } from '../button';

import Picker from './Picker.vue';
import RuleValue from './RuleValue.vue';

// Edits one controlled condition; numeric and date operands remain draft strings.
const props = defineProps<{
  value: FilterRule;
  fields: readonly FilterField[];
  disabled?: boolean;
  error?: string;
}>();
const emit = defineEmits<{
  'value-change': [value: FilterRule];
  remove: [];
}>();

const fieldTypeIcons = {
  text: IconLetterCase,
  number: IconHash,
  date: IconCalendar,
  choice: IconList,
} satisfies Record<FilterField['type'], unknown>;

const errorId = useId();
const field = computed(() =>
  props.fields.find((item) => item.id === props.value.field)
);
const operators = computed(() =>
  field.value ? getFilterOperators(field.value) : []
);
const fieldOptions = computed(() =>
  props.fields
    .filter((item) => getFilterOperators(item).length)
    .map((item) => ({ value: item.id, label: item.label }))
);
const operatorOptions = computed(() =>
  operators.value.map((operator) => ({
    value: operator,
    label: filterOperatorLabels[operator],
  }))
);

function changeField(fieldId: string) {
  const nextField = props.fields.find((item) => item.id === fieldId);
  if (!nextField) return;
  const operator = getFilterOperators(nextField)[0];
  if (!operator) return;
  emit('value-change', emptyFilterRule(props.value.id, fieldId, operator));
}

function changeOperator(operator: FilterOperator) {
  emit('value-change', changeFilterOperator(props.value, operator));
}
</script>

<template>
  <div data-slot="filter-rule-editor" class="nx:@container/rule nx:min-w-0">
    <div class="nx:flex nx:min-w-0 nx:items-start nx:gap-1">
      <div
        class="nx:grid nx:min-w-0 nx:flex-1 nx:grid-cols-1 nx:gap-1.5 nx:@sm/rule:grid-cols-2 nx:@lg/rule:gap-0 nx:@lg/rule:grid-cols-[minmax(0,1fr)_max-content_minmax(0,1.3fr)] nx:[&_button:focus-visible]:relative nx:[&_button:focus-visible]:z-10 nx:[&_input:focus-visible]:relative nx:[&_input:focus-visible]:z-10"
      >
        <Picker
          class="nx:w-full nx:bg-container nx:@lg/rule:rounded-e-none"
          label="Field"
          :value="value.field"
          :options="fieldOptions"
          :disabled="disabled"
          :invalid="!field"
          :described-by="error ? errorId : undefined"
          @value-change="changeField"
        >
          <template v-if="field" #leading>
            <component
              :is="fieldTypeIcons[field.type]"
              aria-hidden="true"
              class="nx:size-3.5 nx:shrink-0 nx:text-muted-foreground"
            />
          </template>
        </Picker>
        <Picker
          :class="
            cn(
              'nx:w-full nx:@lg/rule:rounded-s-none nx:@lg/rule:border-s-0',
              !isValuelessOperator(value.operator) &&
                'nx:@lg/rule:rounded-e-none'
            )
          "
          :label="`${field?.label ?? 'Condition'} operator`"
          :value="value.operator"
          :options="operatorOptions"
          :disabled="disabled || !field"
          :invalid="!operators.includes(value.operator)"
          :described-by="error ? errorId : undefined"
          @value-change="changeOperator"
        />
        <div
          v-if="field"
          class="nx:min-w-0 nx:@sm/rule:col-span-2 nx:@lg/rule:col-span-1 nx:@lg/rule:[&_input]:rounded-s-none nx:@lg/rule:[&_input]:border-s-0 nx:@lg/rule:[&_button]:rounded-s-none nx:@lg/rule:[&_button]:border-s-0"
        >
          <RuleValue
            :field="field"
            :rule="value"
            :disabled="disabled"
            :error-id="error ? errorId : undefined"
            :invalid="!!error"
            @value-change="emit('value-change', $event)"
          />
        </div>
      </div>
      <Button
        variant="ghost"
        size="icon-sm"
        class="nx:size-(--nx-spacing-8) nx:shrink-0 nx:text-muted-foreground"
        :aria-label="`Remove ${field?.label ?? 'unavailable'} condition`"
        :disabled="disabled"
        @click="emit('remove')"
      >
        <IconX aria-hidden="true" />
      </Button>
    </div>
    <p
      v-if="error"
      :id="errorId"
      class="nx:mt-1 nx:mb-0 nx:typography-body-small nx:text-error-subtle-foreground"
    >
      {{ error }}
    </p>
  </div>
</template>

<script lang="ts">
import type { FilterErrorCode } from '../../lib/filter-model';

const errorMessages: Record<Exclude<FilterErrorCode, 'tooDeep'>, string> = {
  duplicateId: 'Each condition and group needs a unique ID.',
  unknownField: 'Choose an available field.',
  unknownOperator: 'Choose an available operator.',
  unexpectedValue: 'This operator takes no value.',
  valueShape: 'Choose a value for this operator.',
  incompleteRange: 'Enter both ends of the range.',
  missingValue: 'Enter a value.',
  invalidNumber: 'Enter a valid number.',
  invalidDate: 'Enter a valid date.',
  unknownOption: 'Choose an available option.',
  reversedRange: 'The start must not be after the end.',
  emptyGroup: 'Add a condition or remove this group.',
};
function errorMessage(code: FilterErrorCode, maxDepth: number) {
  if (code === 'tooDeep')
    return `Use at most ${maxDepth} levels of nested groups.`;
  return errorMessages[code];
}
</script>

<script setup lang="ts">
import { computed, useTemplateRef } from 'vue';

import {
  emptyFilterRule,
  type FilterError,
  type FilterField,
  type FilterGroup,
  type FilterRule,
  getFilterOperators,
} from '../../lib/filter-model';
import { IconPlus, IconX } from '../../lib/icons';
import { cn } from '../../lib/utils';
import { Button } from '../button';

import FilterRuleEditor from './FilterRuleEditor.vue';
import Picker from './Picker.vue';

const props = defineProps<{
  value: FilterGroup;
  fields: readonly FilterField[];
  disabled?: boolean;
  depth: number;
  maxDepth: number;
  errors: FilterError[];
  label: string;
  createId: (kind: FilterRule['kind'] | FilterGroup['kind']) => string;
}>();
const emit = defineEmits<{
  'value-change': [value: FilterGroup];
  remove: [];
  'rule-edited': [id: string];
}>();

const addButton = useTemplateRef<InstanceType<typeof Button>>('add');
let focusId: string | null = null;

const firstField = computed(() =>
  props.fields.find((field) => getFilterOperators(field).length)
);
const groupError = computed(
  () => props.errors.find((error) => error.id === props.value.id)?.code
);

function newRule(): FilterRule {
  const operator = firstField.value
    ? (getFilterOperators(firstField.value)[0] ?? 'is')
    : 'is';
  return emptyFilterRule(
    props.createId('rule'),
    firstField.value?.id ?? '',
    operator
  );
}

function addRule() {
  const rule = newRule();
  focusId = rule.id;
  emit('value-change', {
    ...props.value,
    children: [...props.value.children, rule],
  });
}

function addGroup() {
  const group: FilterGroup = {
    kind: 'group',
    id: props.createId('group'),
    conjunction: 'any',
    children: [newRule()],
  };
  focusId = group.id;
  emit('value-change', {
    ...props.value,
    children: [...props.value.children, group],
  });
}

function replace(next: FilterGroup | FilterRule) {
  if (next.kind === 'rule') emit('rule-edited', next.id);
  emit('value-change', {
    ...props.value,
    children: props.value.children.map((child) =>
      child.id === next.id ? next : child
    ),
  });
}

function remove(id: string) {
  emit('value-change', {
    ...props.value,
    children: props.value.children.filter((child) => child.id !== id),
  });
  (addButton.value?.$el as HTMLElement | undefined)?.focus();
}

function ruleError(id: string) {
  const code = props.errors.find((error) => error.id === id)?.code;
  return code && errorMessage(code, props.maxDepth);
}

// The node an add just created renders once the new value comes back; focus
// its first picker then.
function focusNewNode(node: unknown) {
  if (!(node instanceof HTMLElement) || focusId !== node.dataset.nodeId) return;
  node.querySelector<HTMLButtonElement>('button[role="combobox"]')?.focus();
  focusId = null;
}

function separator(index: number) {
  if (index === 0) return 'Where';
  return props.value.conjunction === 'all' ? 'And' : 'Or';
}
</script>

<template>
  <div
    data-slot="filter-group"
    role="group"
    :aria-label="label"
    :class="
      cn(
        'nx:min-w-0',
        depth > 0 &&
          'nx:rounded-md nx:border-default nx:border-border-default nx:bg-muted-extralight nx:p-3'
      )
    "
  >
    <div class="nx:mb-3 nx:flex nx:items-center nx:gap-2">
      <div
        class="nx:flex nx:min-w-0 nx:flex-1 nx:flex-wrap nx:items-center nx:gap-2"
      >
        <span
          class="nx:shrink-0 nx:@2xl/builder:w-12 nx:typography-body-default nx:text-muted-foreground"
          >Match</span
        >
        <div class="nx:shrink-0">
          <Picker
            class="nx:bg-container"
            :label="`${label} match`"
            :value="value.conjunction"
            :options="[
              { value: 'all', label: 'All' },
              { value: 'any', label: 'Any' },
            ]"
            :disabled="disabled"
            @value-change="
              emit('value-change', { ...value, conjunction: $event })
            "
          />
        </div>
        <span class="nx:typography-body-default nx:text-muted-foreground"
          >conditions</span
        >
      </div>
      <Button
        v-if="depth > 0"
        class="nx:size-(--nx-spacing-8) nx:shrink-0 nx:text-muted-foreground"
        variant="ghost"
        size="icon-sm"
        :aria-label="`Remove ${label}`"
        :disabled="disabled"
        @click="emit('remove')"
      >
        <IconX aria-hidden="true" />
      </Button>
    </div>
    <div class="nx:grid nx:gap-2">
      <div
        v-for="(child, index) in value.children"
        :key="child.id"
        :ref="focusNewNode"
        :data-node-id="child.id"
        class="nx:flex nx:min-w-0 nx:items-start nx:gap-2"
      >
        <span
          aria-hidden="true"
          class="nx:hidden nx:h-(--nx-spacing-8) nx:w-12 nx:shrink-0 nx:@2xl/builder:flex nx:items-center nx:typography-body-default nx:text-muted-foreground"
          >{{ separator(index) }}</span
        >
        <div class="nx:min-w-0 nx:flex-1">
          <GroupEditor
            v-if="child.kind === 'group'"
            :value="child"
            :fields="fields"
            :disabled="disabled"
            :depth="depth + 1"
            :max-depth="maxDepth"
            :errors="errors"
            :label="`${label} group ${index + 1}`"
            :create-id="createId"
            @value-change="replace"
            @remove="remove(child.id)"
            @rule-edited="emit('rule-edited', $event)"
          />
          <FilterRuleEditor
            v-else
            :value="child"
            :fields="fields"
            :disabled="disabled"
            :error="ruleError(child.id)"
            @value-change="replace"
            @remove="remove(child.id)"
          />
        </div>
      </div>
      <p
        v-if="!value.children.length"
        class="nx:m-0 nx:py-2 nx:typography-body-small nx:text-muted-foreground"
      >
        {{
          depth === 0
            ? 'No conditions. All results are included.'
            : 'Add a condition to this group.'
        }}
      </p>
    </div>
    <p
      v-if="groupError"
      class="nx:mt-2 nx:mb-0 nx:typography-body-small nx:text-error-subtle-foreground"
    >
      {{ errorMessage(groupError, maxDepth) }}
    </p>
    <div class="nx:mt-3 nx:flex nx:flex-wrap nx:gap-1">
      <Button
        ref="add"
        size="sm"
        class="nx:h-(--nx-spacing-8) nx:text-muted-foreground"
        variant="ghost"
        :disabled="disabled || !firstField"
        @click="addRule"
      >
        <IconPlus aria-hidden="true" />Add condition</Button
      >
      <Button
        v-if="depth < maxDepth"
        class="nx:h-(--nx-spacing-8) nx:text-muted-foreground"
        variant="ghost"
        :disabled="disabled || !firstField"
        size="sm"
        @click="addGroup"
      >
        <IconPlus aria-hidden="true" />Add group</Button
      >
    </div>
  </div>
</template>

<script setup lang="ts">
import { PopoverRoot, PopoverTrigger } from 'reka-ui';
import { computed, ref, useId } from 'vue';

import type { FilterField } from '../../lib/filter-model';
import { IconChevronDown } from '../../lib/icons';
import { Button } from '../button';
import { Checkbox } from '../checkbox';
import { ChoiceRow } from '../choice-row';
import { Input } from '../input';
import { PopoverContent } from '../popover';

const props = defineProps<{
  field: Extract<FilterField, { type: 'choice' }>;
  value: string[];
  disabled?: boolean;
  invalid?: boolean;
  describedBy?: string;
}>();
const emit = defineEmits<{ 'value-change': [value: string[]] }>();

const id = useId();
const search = ref('');
const options = computed(() =>
  props.field.options.filter((option) =>
    option.label.toLocaleLowerCase().includes(search.value.toLocaleLowerCase())
  )
);

function toggle(option: string) {
  emit(
    'value-change',
    props.value.includes(option)
      ? props.value.filter((item) => item !== option)
      : [...props.value, option]
  );
}

const summary = computed(() =>
  props.value
    .map(
      (item) =>
        props.field.options.find((option) => option.value === item)?.label ??
        item
    )
    .join(', ')
);
</script>

<template>
  <PopoverRoot @update:open="search = ''">
    <PopoverTrigger as-child>
      <Button
        size="sm"
        variant="outline"
        :disabled="disabled"
        :aria-label="`${field.label} values`"
        :aria-invalid="invalid"
        :aria-describedby="describedBy"
        class="nx:h-(--nx-spacing-8) nx:w-full nx:min-w-0 nx:justify-between"
      >
        <span class="nx:truncate">{{ summary || 'Choose values…' }}</span>
        <IconChevronDown aria-hidden="true" />
      </Button>
    </PopoverTrigger>
    <PopoverContent
      align="start"
      :aria-label="`${field.label} values`"
      class="nx:w-64 nx:max-w-(--reka-popover-content-available-width) nx:overflow-hidden nx:p-0"
    >
      <div class="nx:border-b nx:border-border-default nx:p-2">
        <Input
          v-model="search"
          size="sm"
          :aria-label="`Search ${field.label} options`"
          placeholder="Search options…"
          :disabled="disabled"
        />
      </div>
      <div class="nx:max-h-48 nx:overflow-y-auto nx:p-1">
        <ChoiceRow
          v-for="(option, index) in options"
          :key="option.value"
          :for="`${id}-${index}`"
          class="nx:not-has-[:disabled]:hover:bg-popover-hover"
        >
          <Checkbox
            :id="`${id}-${index}`"
            :model-value="value.includes(option.value)"
            :disabled="disabled"
            @update:model-value="toggle(option.value)"
          />
          <span class="nx:min-w-0 nx:break-words">{{ option.label }}</span>
        </ChoiceRow>
        <p
          v-if="!options.length"
          class="nx:m-0 nx:p-2 nx:typography-body-small nx:text-muted-foreground"
        >
          No options found.
        </p>
      </div>
    </PopoverContent>
  </PopoverRoot>
</template>

<script setup lang="ts" generic="Value extends string">
import { computed, type HTMLAttributes, type VNode } from 'vue';

import { cn } from '../../lib/utils';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '../select';

const props = defineProps<{
  label: string;
  value: Value;
  options: readonly { value: Value; label: string }[];
  disabled?: boolean;
  invalid?: boolean;
  describedBy?: string;
  class?: HTMLAttributes['class'];
}>();
const emit = defineEmits<{ 'value-change': [value: Value] }>();
defineSlots<{ leading?: () => VNode[] }>();

const available = computed(() =>
  props.options.some((option) => option.value === props.value)
);

function select(next: unknown) {
  const option = props.options.find((item) => item.value === next);
  if (option) emit('value-change', option.value);
}
</script>

<template>
  <Select
    :model-value="value"
    :disabled="disabled"
    @update:model-value="select"
  >
    <SelectTrigger
      :aria-label="label"
      :aria-invalid="invalid"
      :aria-describedby="describedBy"
      :class="
        cn(
          'nx:h-(--nx-spacing-8) nx:w-auto nx:min-w-0 nx:max-w-full nx:px-2.5 nx:[&>span]:flex-1 nx:[&>span]:text-start',
          props.class
        )
      "
    >
      <slot name="leading" />
      <SelectValue v-if="!available && value"
        >Unavailable selection</SelectValue
      >
      <SelectValue v-else placeholder="Choose…" />
    </SelectTrigger>
    <SelectContent class="nx:max-w-(--reka-select-content-available-width)">
      <template v-for="option in options" :key="option.value">
        <SelectItem v-if="option.value !== ''" :value="option.value">
          {{ option.label }}
        </SelectItem>
      </template>
    </SelectContent>
  </Select>
</template>

<script setup lang="ts">
import type { FilterField, FilterRule } from '../../lib/filter-model';
import { Input } from '../input';

import MultipleValues from './MultipleValues.vue';
import Picker from './Picker.vue';

defineProps<{
  field: FilterField;
  rule: FilterRule;
  disabled?: boolean;
  errorId?: string;
  invalid: boolean;
}>();
const emit = defineEmits<{ 'value-change': [rule: FilterRule] }>();
</script>

<template>
  <span
    v-if="rule.operator === 'isEmpty' || rule.operator === 'isNotEmpty'"
    class="nx:self-center nx:typography-body-small nx:text-muted-foreground"
  >
    No value needed
  </span>
  <template
    v-else-if="rule.operator === 'isAnyOf' || rule.operator === 'isNoneOf'"
  >
    <MultipleValues
      v-if="field.type === 'choice'"
      :field="field"
      :value="rule.value"
      :disabled="disabled"
      :invalid="invalid"
      :described-by="errorId"
      @value-change="emit('value-change', { ...rule, value: $event })"
    />
  </template>
  <template v-else-if="rule.operator === 'between'">
    <div
      v-if="field.type !== 'choice'"
      class="nx:flex nx:min-w-0 nx:max-w-full nx:flex-wrap nx:items-center nx:gap-2 nx:@lg/rule:flex-nowrap nx:@lg/rule:gap-0 nx:@lg/rule:[&>input]:flex-1 nx:@lg/rule:[&>input:first-child]:rounded-e-none"
    >
      <Input
        size="sm"
        :type="field.type"
        :step="field.type === 'number' ? 'any' : undefined"
        :aria-label="`${field.label} start`"
        placeholder="From"
        :model-value="rule.value[0]"
        :disabled="disabled"
        :aria-invalid="invalid"
        :aria-describedby="errorId"
        class="nx:min-w-0 nx:w-36 nx:max-w-full nx:typography-body-default nx:h-(--nx-spacing-8)"
        @update:model-value="
          emit('value-change', {
            ...rule,
            value: [String($event), rule.value[1]],
          })
        "
      />
      <Input
        size="sm"
        :type="field.type"
        :step="field.type === 'number' ? 'any' : undefined"
        :aria-label="`${field.label} end`"
        placeholder="To"
        :model-value="rule.value[1]"
        :disabled="disabled"
        :aria-invalid="invalid"
        :aria-describedby="errorId"
        class="nx:min-w-0 nx:w-36 nx:max-w-full nx:typography-body-default nx:h-(--nx-spacing-8)"
        @update:model-value="
          emit('value-change', {
            ...rule,
            value: [rule.value[0], String($event)],
          })
        "
      />
    </div>
  </template>
  <Picker
    v-else-if="field.type === 'choice'"
    class="nx:w-full nx:bg-container"
    :label="`${field.label} value`"
    :options="field.options"
    :value="rule.value"
    :disabled="disabled"
    :invalid="invalid"
    :described-by="errorId"
    @value-change="emit('value-change', { ...rule, value: $event })"
  />
  <Input
    v-else
    size="sm"
    :type="field.type"
    :step="field.type === 'number' ? 'any' : undefined"
    :aria-label="`${field.label} value`"
    :placeholder="field.type === 'date' ? undefined : 'Enter a value…'"
    :model-value="rule.value"
    :disabled="disabled"
    :aria-invalid="invalid"
    :aria-describedby="errorId"
    class="nx:min-w-0 nx:w-full nx:max-w-full nx:bg-container nx:typography-body-default nx:h-(--nx-spacing-8)"
    @update:model-value="
      emit('value-change', { ...rule, value: String($event) })
    "
  />
</template>