Query filter format

Intro

Query filter permits to build complex requests to fetch data from server according to a given filter. There are 4 types of filter to understand: condition, scope, group and relationship condition. When you pass query filter to Builder or Search components it must be of type group.

Condition

A condition filter contains at least a property and an operator. It may contain a value. The property MUST NOT correspond to a relationship.

{
  type: 'condition',
  property: 'last_name',
  operator: '=',
  value: 'Doe'
}

Group

A group filter contains at least an operator. It may contain filters. Each filter might be a condition, a scope, a group or relationship condition.

{
  type: 'group',
  operator: 'or',
  filters: [
    {
      type: 'condition',
      property: 'last_name',
      operator: '=',
      value: 'Doe'
    },
    {
      type: 'group',
      operator: 'and',
      filters: [...]
    }
  ]
}

Relationship condition

A relationship condition filter contains at least a property and an operator. It may contain a filter. The property MUST correspond to a relationship. The filter might be a condition, a scope, a group or relationship condition.

{
  type: 'relationship_condition',
  property: 'company',
  operator: 'has',
  filter: {
    type: 'condition',
    property: 'brand_name',
    operator: '=',
    value: 'Doe'
  }
}

Scope

A scope is like a condition but is not related to a property. It contains at least an id. It may contain parameters (an array of values). The scope might be defined on the entity schema or in the computed scopes.

{
  type: 'group',
  operator: 'or',
  filters: [
    {
      type: 'scope',
      id: 'my_scope_without_parameters',
    },
    {
      type: 'scope',
      id: 'my_scope_with_parameters',
      parameters: ['value_one', 'value_two'],
    },
  ]
}

Interactions

Visible

A filter is visible by default but you can make it not visible to the user.

{
  type: 'condition',
  property: 'last_name',
  operator: '=',
  value: 'Doe',
  visible: false,
}

Editable

A filter is editable by default but you can make it not editable by the user.

{
  type: 'condition',
  property: 'last_name',
  operator: '=',
  value: 'Doe',
  editable: false,
}

Removable

A filter is removable by default but you can make it not removable by the user.

{
  type: 'condition',
  property: 'last_name',
  operator: '=',
  value: 'Doe',
  removable: false,
}

Allowed operators

All allowed operators are listed here.

Example

<script setup>
import { ref } from "vue";

const filter = ref({
  type: 'group',
  operator: 'and',
  filters: [
    {
      type: 'condition',
      property: 'last_name',
      operator: '=',
    },
    {
      type: 'condition',
      property: 'birth_date',
      operator: '>',
      value: '2001-12-12'
    }
  ]
});
</script>

<template>
  <QkitBuilder entity="user" v-model="filter"/>
</template>

The builder will appear with an empty condition on last_name and with a filled condition on birth_date.