Smart Criteria

Description

Le composant Smart Criteria permet à l'intégrateur de proposer facilement à l'utilisateur final d'entrer des valeurs de filtre portant sur des Smart Field ou des propriétés.

La structure de données de la configuration de ce composant est définie ci-contre

Initialisation

Le composant AnkSmartCriteria est défini dans la bibliothèque "@anakeen/user-interfaces/components/lib/AnkSmartCriteria".

Exemple d'initialisation

<div>
  <ank-smart-criteria :config="criteriaConfiguration" :submit="true" />
</div>
<script>
  import AnkSmartCriteria from "@anakeen/user-interfaces/components/lib/AnkSmartCriteria.esm";
  export default {
    components: {
      "ank-smart-criteria": AnkSmartCriteria
    },
    data: () => {
      return {
        criteriaConfiguration: {
          title: "Filtre des factures",
          defaultStructure: "DEVBILL",
          criterias: [
            {
              kind: "property",
              field: "title",
              label: "Titre de facture"
            },
            {
              kind: "field",
              field: "bill_clients",
              default: {
                operator: {
                  key: "oneEqualsMulti",
                  option: ["all"]
                }
              }
            },
            {
              kind: "field",
              field: "bill_billdate",
              label: "Date de facturation",
              default: {
                value: ["1970-01-01", "2020-01-01"]
              }
            },
            {
              kind: field,
              field: "bill_cost",
              label: "Coût"
            }
          ]
        }
      };
    }
  };
</script>

Aperçu du composant

Concepts

Types de filtre

Il existe quatre types de filtre : field, property, virtual et fulltext

Les filtres de type field correspondent à des filtres sur des Smart Field.

Les filtres de type property correspondent à des filtres sur des propriétés de Smart Element. Les propriétés supportées sont title et state

Les filtres de type virtual correspondent à des filtres sur des champs qui ne correspondent pas à des Smart Element.

Les filtres de type fulltext correspondent à des filtres de recherche générale, appliqués sur un domaine de recherche défini par l'intégrateur.

Structure des filtres

Description

Un objet de type SmartFilter suit la structure récursive suivante :

• kind (String): le type de filtre parmi field, property, virtual et fulltext.
• field (String): l'identifiant du champ sur lequel appliquer le filtre. Pour une propriété, il s'agit du nom de la propriété. Non pris en compte pour fulltext.
• operator (Object): Objet représentant la valeur de l'opérateur. Il suit la structure suivante :
  • key (string) : le nom de l'opérateur
  • options (Array<String>): tableau d'options appliquées au filtre
  • filterMultiple (boolean): Booléen correspondant à la multiplicité du filtre.
• value: la valeur du filtre, typée en fonction du type de Smart Field ou de la propriété.
• displayValue: la valeur du filtre à afficher, sous forme de chaîne de caractère pour les types simples, tableau de chaînes de caractère pour les valeurs multiples.
• logic (String): l'opération logique à appliquer avec les autres filtres exprimés par la propriété filters. Les valeurs possibles sont and et or.
• filters (Array<SmartFilter>): Un tableau d'objet SmartFilter.

WARNING

Pour le moment, le composant SearchCriteria ne gère que la logique and

Exemple :

Entrée du Smart Criteria

Résultat de la méthode getFilters()

{
  "field": "title",
  "filters": [
    {
      "field": "bill_clients",
      "filters": [],
      "kind": "field",
      "logic": "and",
      "operator": {
        "key": "oneEqualsMulti",
        "options": [],
        "filterMultiple": true
      },

      "value": ["1121"],
      "displayValue": ["ALEXANDER Peter BAYER HEALTHCARE SAS"]
    },
    {
      "field": "bill_billdate",
      "filters": [],
      "kind": "field",
      "logic": "and",
      "operator": {
        "key": "between",
        "options": [],
        "filterMultiple": false
      },

      "value": ["1970-01-01", "2020-01-01"],
      "displayValue": ["1970-01-01", "2020-01-01"]
    },
    {
      "field": "bill_cost",
      "filters": [],
      "kind": "field",
      "logic": "and",
      "operator": {
        "key": "between",
        "options": [],
        "filterMultiple": false
      },

      "value": [10, 20],
      "displayValue": ["10,00 €", "20,00 €"]
    }
  ],
  "kind": "property",
  "logic": "and",
  "operator": {
    "key": "contains",
    "options": [],
    "filterMultiple": false
  },

  "value": "a",
  "displayValue": "a"
}

Logiques de filtrage

Dans la configuration du Smart Criteria, les opérateurs servent à définir les logiques de filtrage appliquées sur chaque champ ou propriété défini. Ces logiques sont définies par une clé de filtre (un identifiant logique décrivant le type de filtre à appliquer, défini par l'attribut key) ainsi que des options s'appliquant à ce type de filtre.

Le tableau suivant présente les clés de filtre, leurs options disponibles, les types de smart fields ou de propriétés supportés, une description de la logique ainsi que des exemples illustratifs.

Filtre	Options	Types ou propriétés supportées	Description	Exemple
none		*	Aucune logique de filtre appliquée	none -> true
isEmpty	not	*	La valeur de l'attribut est vide not : La valeur de l'attribut n'est pas vide	'' isEmpty -> true [] isEmpty not -> false
equals	not	*	La valeur de l'attribut est égale à la valeur du filtre not : La valeur de l'attribut est différente de la valeur du filtre	a equals b -> false a equals not b -> true
contains	not, startsWith	text, longtext, htmlText, title	La valeur de l'attribut contient la valeur du filtre not : La valeur de l'attribut ne contient pas la valeur du filtre startsWith : La valeur de l'attribut commence par la valeur du filtre not startsWith : La valeur de l'attribut ne commence pas par la valeur du filtre	'abc' contains 'b' -> true 'abc' contains startsWith 'b' -> false 'abc' contains not 'b' -> true
lesser	equal	date, time, timestamp, int, double, money	La valeur de l'attribut est strictement inférieure à la valeur du filtre equal : La valeur de l'attribut est inférieure ou égale à la valeur du filtre	1 lesser 2 -> true 1 lesser 1 -> false 1 lesser equal 1 -> true
greater	equal	date, time, timestamp, int, double, money	La valeur de l'attribut est strictement supérieure à la valeur du filtre equal: La valeur de l'attribut est supérieure ou égaleà la valeur du filtre	1 greater 0 -> true 1 greater 1 -> false 1 greater equal 1 -> true
between	equalLeft, equalRight	date, time, timestamp, int, double, money	La valeur de l'attribut est strictement supérieure à la première valeur du filtre et strictement inférieure à la seconde valeur du filtre equalLeft : La valeur de l'attribut est supérieure ou égale à la première valeur du filtre et strictement inférieure à la seconde valeur du filtre equalRight : La valeur de l'attribut est strictement supérieure à la première valeur du filtre et inférieure ou égale à la seconde valeur du filtre equalLeft equalRight : La valeur de l'attribut est supérieure ou égale à la première valeur du filtre et inférieure ou égale à la seconde valeur du filtre	1 between [0, 2] -> true 1 between equalLeft [0, 1] -> false 1 between equalRight [0, 1] -> true
titleContains	not, startsWith	account, docid	Le titre de l'attribut contient la valeur du filtre not : Le titre de l'attribut contient pas la valeur du filtre startsWith : Le titre de l'attribut commence par la valeur du filtre not startsWith: Le titre de l'attribut ne commence pas par la valeur du filtre	docid(IUSER1120) titleContains 'Jean' -> true
oneEmpty	not, all	text[], longtext[], htmlText[], date[], time[], timestamp[], int[], double[], money[]	Une des valeurs de l'attribut est vide not : une des valeurs de l'attribut n'est pas vide all : Toutes les valeurs de l'attribut sont vides not all : Aucune valeur de l'attribut n'est vide	[a, , c] oneEmpty -> true [a, , c] oneEmpty all -> false
oneEquals	not, all	text[], longtext[], htmlText[], date[], time[], timestamp[], int[], double[], money[], enum[]	Une des valeurs de l'attribut est égale à la valeur du filtre not : Une des valeurs de l'attribut est différent de la valeur du filtre all : Toutes les valeurs de l'attribut sont égales à la valeur du filtre not all : Toutes les valeurs de l'attribut sont différentes de la valeur du filtre	[a, b, c] oneEquals b -> true [b, b, b] oneEquals all b -> true
oneContains	not, all	text[], longtext[], htmlText[]	Une des valeurs de l'attribut contient la valeur du filtre not : Une des valeurs de l'attribut ne contient pas la valeur du filtre all : Toutes les valeurs de l'attribut contiennent la valeur du filtre not all : Aucune valeur de l'attribut ne contient la valeur du filtre	['toto', 'titi'] oneContains 'iti' -> true ['toto', 'toto'] oneContains all 'toto' -> true
oneLesser	equal, all	date[], time[], timestamp[], int[], double[], money[]	Une des valeurs de l'attribut est strictement inférieure à la valeur du filtre equal : Une des valeurs de l'attribut est inférieure ou égale à la valeur du filtre all: Toutes les valeurs de l'attribut sont strictement inférieures à la valeur du filtre equal all : Toutes les valeurs de l'attribut sont inférieures ou égale à la valeur du filtre	[1, 2, 3] oneLesser 1 -> false [1, 2, 3] oneLesser equal 1 -> true [1, 2, 3] oneLesser all 10 -> true
oneGreater	equal, all	date[], time[], timestamp[], int[], double[], money[]	Une des valeurs de l'attribut est strictement supérieure à la valeur du filtre equal : Une des valeurs de l'attribut est supérieure ou égale à la valeur du filtre all: Toutes les valeurs de l'attribut sont strictement supérieures à la valeur du filtre equal all : Toutes les valeurs de l'attribut sont supérieures ou égale à la valeur du filtre	[1, 2, 3] oneGreater 3 -> false [1, 2, 3] oneGreater equal 3 -> true [1, 2, 3] oneLesser all 0 -> true
oneBetween	not, all	date[], time[], timestamp[], int[], double[], money[]	Une des valeurs de l'attribut est supérieure ou égale à la première valeur du filtre et inférieure ou égale à la seconde valeur du filtre not : Une des valeurs de l'attribut est strictement inférieur à la première valeur du filtre ou strictement supérieure à la seconde valeur du filtre all : Toutes les valeurs de l'attribut sont supérieures ou égales à la première valeur du filtre et inférieures ou égales à la seconde valeur du filtre not all : Aucune valeur de l'attribut n'est supérieure ou égale à la première valeur du filtre et inférieure ou égale à la seconde valeur du filtre	[1, 2, 3] oneBetween [3, 4] -> true [1, 2, 3] oneBetween [5, 10] -> false [1, 2, 3] oneBetween all [2, 4] -> false [1, 2, 3] oneBetween all [0, 4] -> true
oneTitleEquals	not, all	docid[], docid[][], account[], account[][]	Une des valeurs de l'attribut à un titre égal à la valeur du filtre not : Une des valeurs de l'attribut à un titre différent de la valeur du filtre all : Toutes les valeurs de l'attribut ont un titre égal à la valeur du filtre not all : Aucune valeur de l'attribut n'a un titre égal à la valeur du filtre	[IUSERJEAN, IUSERPIERRE] oneTitleEquals 'Jean' -> true [IUSERJEAN, IUSERPIERRE] oneTitleEquals not 'Jean' -> true [IUSERJEAN, IUSERPIERRE] oneTitleEquals all 'Jean' -> false [IUSERJEAN, IUSERPIERRE] oneTitleEquals all not 'Paul' -> true
oneTitleContains	not, all	docid[], docid[][], account[], account[][]	Une des valeurs de l'attribut à un titre qui contient la valeur du filtre not : Une des valeurs de l'attribut à un titre qui ne contient pas la valeur du filtre all : Toutes les valeurs de l'attribut ont un titre qui contient la valeur du filtre not all : Aucune valeur de l'attribut n'a un titre qui contient la valeur du filtre	[IUSERJEAN, IUSERPIERRE] oneTitleContains 'j' -> true [IUSERJEAN, IUSERPIERRE] oneTitleContains not 'j' -> true [IUSERJEAN, IUSERPIERRE] oneTitleContains all 'j' -> false [IUSERJEAN, IUSERPIERRE] oneTitleContains not all 'z' -> true
equalsOne	not	state, enum, account, docid	La valeur de l'attribut est égale à une des valeurs du filtre not : La valeur de l'attribut est différente des valeurs du filtre	a equalsOne [a, b, c] -> true a equalsOne not [b, c] -> true
titleEqualsOne	not	account, docid	Le titre de la valeur de l'attribut est égal à une des valeurs du filtre not : Le titre de la valeur de l'attribut est différent des valeurs du filtre	IUSERJEAN titleEqualsOne ['Pierre', 'Jean', 'Paul'] -> true IUSERJEAN titleEqualsOne not ['Pierre', 'Paul'] -> true
oneEqualsMulti	not, all	docid[], docid[][], account[], account[][]	Une des valeurs de l'attribut est égale à une des valeurs du filtre not : Une des valeurs de l'attribut est différente des valeurs du filtre all : Toutes les valeurs de l'attribut sont égales à une des valeurs du filtre not all : Aucune valeur de l'attribute n'est égale à une des valeurs du filtre	[a, b, c] oneEqualsMulti [b, d] -> true [a, b, c] oneEqualsMulti not [b, d] -> true [a, b, c] oneEqualsMulti all [b, d] -> false [a, b, c] oneEqualsMulti all [a, b, c, d] -> true [a, b, c] oneEqualsMulti not all [d, e] -> true

Le tableau suivant présente les filtres disponibles en fonction des types de Smart Field

filtre/type	none	IsEmpty	equals	contains	lesser	greater	between	titleContains	one empty	oneEquals	oneContains	oneLesser	oneGreater	oneBetween	oneTitleEquals	oneTitleContains	equalsOne	titleEqualsOne	oneEqualsMulti
Textuel (text, longtext, htmlText)
Temporel (date, time, timestamp)
Numerique (int, double, money)
Relation (account, docid)								A venir										A venir
Enum
state
title
Textuel multiple (text[], longtext[], htmlText[])
Temporel multiple (date[], time[], timestamp[])
Numerique multiple (int[], double[], money[])
Relation multiple (docid[], docid[][],account[], account[][])			A venir												A venir	A venir
Enum multiple (enum[])			A venir

Propriétés

config: La configuration initiale

Définition

Permet de définir la configuration des critères de recherche.

Cette configuration est un objet prenant en compte les champs suivants :

• title (String, default: "") : le titre du composant. Ce titre sera affiché par défaut en header du panel comprenant les critères de recherche. Si le titre est non défini ou vide, le header n'apparaitra pas.

• defaultStructure (String|int): A utiliser dans le cas où vous souhaitez créer des critères de type field portant principalement sur une Smart Structure. Permet de remplacer la valeur du paramètre structure dans les critères de type field.

• criterias (Array) : Tableau contenant la configuration de chaque critère. Un critère est un objet pouvant supporter les options suivantes:

  • kind (String, default: 'field'): Obligatoire Le type de critère parmi field, property, virtual et fulltext. Voir la section portant sur les types de filtres pour plus de détails.

  • label (String): Texte affiché devant le critère de recherche. Par défaut, prendra le libellé de la propriété ou du Smart Field.

  • operators (Array<Object>): liste des opérateurs auquels l'utilisateur aura accès. Si non défini, tous les opérateurs possibles pour le type donné seront présentés. Chaque opérateur suit la structure suivante :

    • key (string) : le nom de l'opérateur
    • options (Array<String>): tableau d'options appliquées au filtre
    • label (string) : le libellé de l'opérateur à afficher
    • filterMultiple (boolean): Booléen correspondant à la multiplicité du filtre.

  • autocomplete: Un objet de configuration de l'aide à la saisie tel que défini dans le Smart Form.

• modifiableOperator (boolean, default: true): Si à false, l'opérateur ne sera pas modifiable et non affiché à l'interface. Pour spécifier l'opérateur à appliquer, utilisez l'attribut default.

TIP

Pour plus d'informations sur les opérateurs possibles, voir la section Opérateurs de recherche

TIP

Pour plus d'informations sur l'aide à la saisie, voir le cas d'usage décrit dans la section suivante.

Pour les critères de recherche de type field et property, les attributs suivants sont également pris en compte :

• field (String): Obligatoire Identifiant du champ ou de la propriété sur lequel porte le critère. Pour les propriétés, seuls title et state sont pris en compte.
• structure (String | id): obligatoire Nom logique ou id de la Smart Structure contenant le paramètre field.
• default (Object): Valeur par défaut du critère de recherche avec la structure suivante :
  • operator (Object): La valeur de l'opérateur avec la structure suivante :
    • key (string) : le nom de l'opérateur
    • options (Array<String>): tableau d'options pour l'opérateur
  • value La valeur du filtre. Elle doit être du même type que celle du Smart Field ou de la propriété associée.

Dans le cas où la propriété est state, il est possible de définir les états possibles à sélectionner grâce à l'une de ces propriétés, présentés par priorité décroissante :

• stateList (Array<Object>) : Un tableau d'objets définis par l'intégrateur. Les objets suivent la structure suivante :
  • key (String) : l'identifiant de l'état.
  • label (String) : la valeur affichée à l'utilisateur.
• stateWorkflow (String | Number) : le nom ou l'initid du workflow associé.
• stateStructure (String | Number) : le nom ou l'initid de la structure associée. Les états du workflow associé par défaut seront alors chargés. Si non défini, la valeur de defaultStructure sera prise en compte.

Pour les critères de recherche de type virtual, les attributs suivants sont également pris en compte :

• field (String): Le nom du champ virtuel.
• type (String): Le type du critère correspondant (Par exemple text, date, docid...).
• multipleField (Boolean): Si à true, le résultat du critère sera présenté sous la forme d'un champ multiple.
• default (Object): Valeur par défaut du critère de recherche avec la structure suivante :
  • operator (String): La valeur de l'opérateur.
  • value La valeur du filtre. Elle doit être du même type que celle du Smart Field ou de la propriété associée.

Pour les critères de recherche de type fulltext, les attributs suivants sont également pris en compte :

• searchDomain (string): Le domaine de recherche associé au critère

• default (Object): Valeur par défaut du critère de recherche avec la structure suivante :

  • value (String): La valeur par défaut du filtre.

WARNING

Pour utiliser la recherche générale, utilisez le composant AnkFulltextSmartCriteria disponible dans le module fulltext-search. Voir le cas d'usage décrit ci-dessous.

Exemples

Utilisation de defaultStructure

{
  "title": "Filtre des factures",
  "defaultStructure": "DEVBILL",
  "criterias": [
    {
      "kind": "property",
      "field": "title",
      "label": "Titre de facture"
    },
    {
      "kind": "field",
      "field": "bill_clients"
    },
    {
      "kind": "field",
      "field": "bill_billdate",
      "label": "Date de facturation"
    },
    {
      "kind": "field",
      "field": "bill_cost",
      "label": "Coût"
    }
  ]
}

Recherche de state

Avec stateList

{
  "title": "Filtre des états factures",
  "criterias": [
    {
      "kind": "property",
      "field": "state",
      "stateList": [
        { "key": "state_1", "label": "Etat 1" },
        { "key": "state_2", "label": "Etat 2" }
      ],
      "label": "État"
    }
  ]
}

Avec stateWorkflow

{
  "title": "Filtre des états factures",
  "criterias": [
    {
      "kind": "property",
      "field": "state",
      "stateWorkflow": "WDOC_BILL",
      "label": "État"
    }
  ]
}

Avec stateStructure

{
  "title": "Filtre des états factures",
  "criterias": [
    {
      "kind": "property",
      "field": "state",
      "stateStructure": "DEV_BILL",
      "label": "État"
    }
  ]
}

Recherche générale

{
  "title": "Recherche générale",
  "criterias": [
    {
      "kind": "fulltext",
      "searchDomain": "YourSearchDomain",
      "label": "Recherche générale sur YourSearchDomain"
    }
  ]
}

standalone: Configuration complète côté client

Permet de définir une configuration complète du Smart Criteria uniquement côté serveur. Si à true, aucune requête ne sera envoyée au serveur pour compléter la requête. Par défaut cette option est à false.

Afin d'avoir tous les éléments permettant de construire le Smart Criteria, chaque critère de la configuration doit posséder les éléments suivants :

• kind (string): Obligatoire Le type de critère parmi field, property, virtual et fulltext. Si non défini, un message d'erreur sera affiché.

• field (String): Obligatoire Identifiant du champ ou de la propriété sur lequel porte le critère. Pour les propriétés, seuls title et state sont pris en compte. Si non défini, un message d'erreur sera affiché.

• type (String): Obligatoire le type de donnée de la valeur du critère, parmi account array, color, date, docid, double, enum, file, frame, htmltext, image, int, integer, json, longtext, money, password, tab, time, timestamp, xml,text

• modifiableOperator (Boolean): Si à false, l'opérateur ne sera pas modifiable. Par défaut à false.

• label (String): Texte affiché devant e critère de recherche. Si non défini, une avertissement sera affiché.

• operators (Array<Object>): liste des opérateurs auquels l'utilisateur aura accès. Chaque opérateur doit suivre la structure suivante :

  • key (string) : Obligatoire Le nom de l'opérateur. Si non défini, un message d'erreur sera affiché.
  • options (Array<String>): tableau d'options appliquées au filtre
  • label (string) : le libellé de l'opérateur à afficher. Si non défini, Aucun texte n'apparaîtra dans le sélecteur d'opérateur et un avertissement sera affiché.
  • acceptValues (boolean): Définit si l'opérateur accepte des valeurs de filtre (Par exemple, l'opérateur isEmpty n'accepte pas de valeurs de filtre). Par défaut à false.
  • filterMultiple (boolean): Définit si l'opérateur accepte des valeurs multiples plutôt que simple (Par exemple, l'opérateur equalsOne accepte des valeurs multiples de filtre). Par défaut à false.
  • isBetween (boolean): Définit si l'opérateur accepte pour valeurs des intervalles, comme l'opérateur between. Par défaut à false.

• default (Object): Valeur par défaut du critère de recherche avec la structure suivante :

  • operator (Object): La valeur de l'opérateur avec la structure suivante :
    • key (string) : le nom de l'opérateur
    • options (Array<String>): tableau d'options pour l'opérateur
  • value La valeur du filtre. Elle doit être du même type que celle du Smart Field ou de la propriété associée.

TIP

La propriété noCheck permet d'empêcher l'affichage de messages d'erreurs dans le cas où la configuration serait incomplète.

L'exemple suivant montre une configuration complète côté client :

Configuration client du smart criteria

{
  "title": "Correct standalone",
  "standalone": true,
  "criterias": [
    {
      "kind": "property",
      "field": "title",
      "label": "Titre de facture",
      "operators": [
        {
          "key": "none",
          "options": [],
          "label": "Ignorer",
          "acceptValues": false,
          "filterMultiple": false,
          "isBetween": false
        },
        {
          "key": "isEmpty",
          "options": [],
          "label": "Est vide",
          "acceptValues": false,
          "filterMultiple": false,
          "isBetween": false
        },
        {
          "key": "isEmpty",
          "options": ["not"],
          "label": "N'est pas vide",
          "acceptValues": false,
          "filterMultiple": false,
          "isBetween": false
        },
        {
          "key": "equals",
          "options": [],
          "label": "Est égal à",
          "acceptValues": true,
          "filterMultiple": false,
          "isBetween": false
        },
        {
          "key": "equals",
          "options": ["not"],
          "label": "Est différent de",
          "acceptValues": true,
          "filterMultiple": false,
          "isBetween": false
        },
        {
          "key": "contains",
          "options": [],
          "label": "Contient",
          "acceptValues": true,
          "filterMultiple": false,
          "isBetween": false
        },
        {
          "key": "contains",
          "options": ["not"],
          "label": "Ne contient pas",
          "acceptValues": true,
          "filterMultiple": false,
          "isBetween": false
        },
        {
          "key": "contains",
          "options": ["startsWith"],
          "label": "Commence par",
          "acceptValues": true,
          "filterMultiple": false,
          "isBetween": false
        },
        {
          "key": "contains",
          "options": ["not", "startsWith"],
          "label": "Ne commence pas par",
          "acceptValues": true,
          "filterMultiple": false,
          "isBetween": false
        }
      ],
      "modifiableOperator": true,
      "type": "text",
      "default": {
        "operator": {
          "key": "contains",
          "options": []
        }
      }
    },
    {
      "kind": "field",
      "field": "bill_clients",
      "default": {
        "operator": {
          "key": "oneEqualsMulti",
          "option": ["all"],
          "options": []
        }
      },
      "operators": [
        {
          "key": "none",
          "options": [],
          "label": "Ignorer",
          "acceptValues": false,
          "filterMultiple": false,
          "isBetween": false
        },
        {
          "key": "isEmpty",
          "options": [],
          "label": "Est vide",
          "acceptValues": false,
          "filterMultiple": false,
          "isBetween": false
        },
        {
          "key": "isEmpty",
          "options": ["not"],
          "label": "N'est pas vide",
          "acceptValues": false,
          "filterMultiple": false,
          "isBetween": false
        },
        {
          "key": "oneEqualsMulti",
          "options": [],
          "label": "Un des 'Clients' est parmi",
          "acceptValues": true,
          "filterMultiple": true,
          "isBetween": false
        },
        {
          "key": "oneEqualsMulti",
          "options": ["not"],
          "label": "Un des 'Clients' n'est pas parmi",
          "acceptValues": true,
          "filterMultiple": true,
          "isBetween": false
        },
        {
          "key": "oneEqualsMulti",
          "options": ["all"],
          "label": "Tous les 'Clients' sont parmi",
          "acceptValues": true,
          "filterMultiple": true,
          "isBetween": false
        },
        {
          "key": "oneEqualsMulti",
          "options": ["not", "all"],
          "label": "Aucun des 'Clients' n'est parmi",
          "acceptValues": true,
          "filterMultiple": true,
          "isBetween": false
        }
      ],
      "modifiableOperator": true,
      "structure": "DEVBILL",
      "label": "Clients",
      "type": "docid",
      "multipleField": true,
      "typeFormat": "DEVCLIENT"
    }
  ]
}

Interface

submit: Bouton de validation

Booléen. Si à true, présente un bouton en dessous du Smart Criteria. Les actions sur le bouton peuvent être récupérées par l'événement smartCriteriaSubmitClick.

Par défaut la propriété est à false.

force: Popup de confirmation

Booléen. Si à false, une confirmation est demandée à l'utilisateur dans le cas où le composant doit être déchargé.

Par défaut, la valeur est true.

responsiveColumns: Affichage multi-colonne

Tableau d'options permettant de définir des règles d'affichage en colonne en fonction de la largeur du Smart Criteria, tel que défini dans le Smart Form.

L'exemple suivant montre comment afficher 2 colonnes à partir d'une largeur de 50rem.

Configuration du smartCriteria

<div>
  <ank-smart-criteria :config="criteriaConfiguration" :submit="true" :responsiveColumns="responsiveColumns" />
</div>
<script>
  import AnkSmartCriteria from "@anakeen/user-interfaces/components/lib/AnkSmartCriteria.esm";
  export default {
    components: {
      "ank-smart-criteria": AnkSmartCriteria
    },
    data: () => {
      return {
        criteriaConfiguration: {
          title: "Filtre des factures",
          defaultStructure: "DEVBILL",
          criterias: [
            {
              kind: "property",
              field: "title",
              label: "Titre de facture"
            },
            {
              kind: "field",
              field: "bill_clients",
              default: {
                operator: {
                  key: "oneEqualsMulti",
                  option: ["all"]
                }
              }
            },
            {
              kind: "field",
              field: "bill_billdate",
              label: "Date de facturation"
            },
            {
              kind: field,
              field: "bill_cost",
              label: "Coût"
            }
          ]
        },
        responsiveColumns: [
          {
            number: 2,
            minWidth: "50rem",
            maxWidth: null,
            grow: true
          }
        ]
      };
    }
  };
</script>

Affichage en deux colonnes

noCheck: Empêcher l'affichage d'erreurs

Booléen. Si à true, la configuration complète du Smart Criteria ne sera pas vérifiée et aucun message d'erreur ne remontera.

Par défaut, la propriété est à false.

Slots

Le composant SmartCriteria possède un slot Vue par défaut servant d'écran de chargement du composant.

Par défaut son contenu est le suivant :

Pour le remplacer, il suffit d'écraser le contenu par défaut du slot dans le composant Vue.

L'exemple suivant remplace le contenu de l'écran chargement par défaut par un texte fixe.

Écrasement du slot par défaut

<template>
  <ank-smart-criteria :config="criteriaConfiguration">
    <div class="my-custom-loading-screen">
      Je suis en train de
      <h1>CHARGER !</h1>
    </div>
  </ank-smart-criteria>
</template>
<style>
  .my-custom-loading-screen {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 5rem 0;
  }
</style>

Affichage au chargement

Méthodes

getFilters()

Définition

Permet de récupérer la valeur de l'ensemble des critères de recherche.

Paramètres

Aucun paramètres

Retour

Retourne un tableau d'objets de la structure SmartFilter définie ci-haut

Exemple

Entrée du Smart Criteria

Résultat de la méthode getFilters()

{
  "field": "title",
  "filters": [
    {
      "field": "bill_clients",
      "filters": [],
      "kind": "field",
      "logic": "and",
      "operator": {
        "key": "oneEqualsMulti",
        "options": [],
        "filterMultiple": true
      },
      "value": "112165"
    },
    {
      "field": "bill_billdate",
      "filters": [],
      "kind": "field",
      "logic": "and",
      "operator": {
        "key": "between",
        "options": [],
        "filterMultiple": false
      },
      "value": ["1970-01-01", "2020-01-01"]
    },
    {
      "field": "bill_cost",
      "filters": [],
      "kind": "field",
      "logic": "and",
      "operator": {
        "key": "between",
        "options": [],
        "filterMultiple": false
      },
      "value": [10, 20]
    }
  ],
  "kind": "property",
  "logic": "and",
  "operator": {
    "key": "contains",
    "options": [],
    "filterMultiple": false
  },
  "value": "a"
}

getCriteriaForm()

Définition

Permet de récupérer le composant Smart Form associé au SmartCriteria

Paramètres

Aucun paramètre.

Retour

Retourne un objet Smart Form.

Exemple

Entrée du Smart Criteria

<template>
  <ank-smart-criteria ref="smartCriteria" :config="criteriaConfiguration" />
</template>

Ajout d'un event listener

this.$refs.smartCriteria.getSmartCriteriaForm().addEventListener("smartFieldChange", (...args) => {
  console.log("SMART FIELD CHANGE with arguments : ", args);
});

loadValues(filterValues: SmartFilter)

Définition

Permet de charger des valeurs dans le Smart Criteria depuis un Smart Filter.

Paramètres

• filterValues : [Object SmartFilter](#Structure des filtres).

Retour

Aucun retour.

Exemple

Entrée de la fonction loadValues()

{
  "field": "title",
  "filters": [
    {
      "field": "bill_clients",
      "filters": [],
      "kind": "field",
      "disabled": false,
      "logic": "and",
      "isBetween": false,
      "operator": {
        "key": "oneEqualsMulti",
        "options": [],
        "filterMultiple": true,
        "additionalOptions": []
      },
      "value": ["1331", "1298"],
      "displayValue": ["BACHMANN Chloé ESOMET", "BREDART Ralph GIFI MAG"]
    },
    {
      "field": "bill_billdate",
      "filters": [],
      "kind": "field",
      "disabled": false,
      "logic": "and",
      "isBetween": true,
      "operator": {
        "key": "between",
        "options": [],
        "filterMultiple": false,
        "additionalOptions": []
      },
      "value": ["2020-11-23", "2020-11-24"],
      "displayValue": ["23/11/2020", "24/11/2020"]
    },
    {
      "field": "bill_cost",
      "filters": [],
      "kind": "field",
      "disabled": false,
      "logic": "and",
      "isBetween": true,
      "operator": {
        "key": "between",
        "options": [],
        "filterMultiple": false,
        "additionalOptions": []
      },
      "value": [10, 20],
      "displayValue": ["10,00 €", "20,00 €"]
    }
  ],
  "kind": "property",
  "disabled": false,
  "logic": "and",
  "isBetween": false,
  "operator": {
    "key": "contains",
    "options": [],
    "filterMultiple": false,
    "additionalOptions": []
  },
  "value": "facture de victor",
  "displayValue": "facture de victor"
}

Smart criteria

Méthodes de Smart Form

Grâce à la méthode getCriteriaForm et aux événements smartCriteriaReady, vous pouvez accéder à toutes les méthodes du composant Smart Form pour chaque critère.

Evénements

smartCriteriaReady

Déclenchement

Déclenché lorsque l'ensemble des critères de recherche sont prêts

Paramètres

Aucun paramètre

Exemple

Entrée du Smart Criteria

<template>
  <ank-smart-criteria ref="smartCriteria" @smartCriteriaReady="onSmartCriteriaReady" :config="criteriaConfiguration" />
</template>

code associé

onSmartCriteriaReady() {
  console.log("The smart criteria is ready");
}

smartCriteriaChange

Déclenchement

Déclenché lorsqu'une valeur des critères de recherche a été modifiée.

Paramètres

• event : objet événement standard de jQuery,
• values : Un objet contenant les valeurs de filtre du SmartCriteria. Il contient les propriétés suivantes :
  • current : valeur après la modification
  • previous : valeur avant la modification
  • initial : valeur initiale (telle que récupérée au chargement du Smart Element).

Exemple

Entrée du Smart Criteria

<template>
  <ank-smart-criteria
    ref="smartCriteria"
    @smartCriteriaChange="onSmartCriteriaChange"
    :config="criteriaConfiguration"
  />
</template>

code associé

onSmartCriteriaChange(event, values) {
  console.log("The smart criteria changed values with new values : ", values.current);
}

smartCriteriaError

Déclenchement

Déclenché lorsqu'une erreur est survenue dans le Smart Criteria, par exemple une entrée incorrecte.

Paramètres

• errorMessage: le message d'erreur

Exemple

Entrée du Smart Criteria

<template>
  <ank-smart-criteria ref="smartCriteria" @smartCriteriaError="onSmartCriteriaError" :config="criteriaConfiguration" />
</template>

code associé

onSmartCriteriaError(message) {
  console.log("The smart criteria encountered an error : ", message);
}

smartCriteriaValidated

Déclenchement

Déclenché lorsque le formulaire a été validé.

Par défaut, la validation survient lorsque la touche Entrée est frappée ou lorsque le bouton submit a été cliqué. Pour changer ces règles, la méthode preventDefault() des événements smartCriteriaEnterKey et smartCriteriaSubmitClick permet d'empêcher l'émission de l'événement smartCriteriaValidated.

Paramètres

Aucun paramètre.

smartCriteriaSubmitClick

Déclenchement

Déclenché lorsque le bouton submit est cliqué. Ce bouton peut être ajouté via la propriété submit

L'événement est annulable grâce à sa méthode preventDefault. S'il est annulé, l'événement smartCriteriaValidated ne sera pas envoyé.

Paramètres

Aucun paramètre.

smartCriteriaEnterKey

Déclenchement

Déclenché lorsque la touche entrée a été frappée.

L'événement est annulable grâce à sa méthode preventDefault. S'il est annulé, l'événement smartCriteriaValidated ne sera pas envoyé.

Paramètres

Aucun paramètre.

Evènements de Smart Form

Grâce à la méthode getCriteriaForm et aux événements smartCriteriaFormReady, vous pouvez accéder à tous les événements du composant Smart Form interne.

Cas d'usages

Operateur non modifiable

Configuration en entrée

{
  "defaultStructure": "DEVBILL",
  "criterias": [
    {
      "kind": "field",
      "field": "bill_cost",
      "label": "Filtrer le coût entre",
      "modifiableOperator": false,
      "default": {
        "operator": {
          "key": "between"
        },
        "value": [25, null]
      }
    }
  ]
}

Interface associée

Aide à la saisie

Comme défini dans le Smart Form, l'attribut de configuration autocomplete permet de définir une aide à la saisie en liant certains champs en entrée et en sortie.

En suivant l'exemple d'une aide à la saisie simple de la section consacrée au Smart Form, on aurait pour le smart criteria :

une aide à la saisie sur le champ "my_country". Elle référence la route /my/countries/. Cette route renvoie des données dans un attribut nommé "Country". La valeur sélectionnée d'un attribut sera enregistrée dans le champ "my_country" (indiqué par autocomplete.outputs).

Déclaration de la route `/my/countries/` . Fichier `src/config/SmartDataEngine/myAutocompletes.xml`

<?xml version="1.0"?>
<sde:config xmlns:sde="https://platform.anakeen.com/4/schemas/sde/1.0">
    <sde:routes namespace="My">
        <sde:route name="Autocomplete:Countries">
            <sde:priority>0</sde:priority>
            <sde:callable>My\AutoCountries</sde:callable>
            <sde:method>POST</sde:method>
            <sde:pattern>/my/countries/</sde:pattern>
            <sde:description>Get countries</sde:description>
        </sde:route>

    </sde:routes>
</sde:config>

Classe PHP `My\AutoCountries` pour retourner les résultats (Fichier `vendor/My/AutoCountries.php`)

<?php
namespace My;

use Anakeen\SmartAutocomplete;
use Psr\Http\Message\ResponseInterface as Response;
use Psr\Http\Message\ServerRequestInterface as Request;

/**
 * Class AutoCountries
 *
 * Données retournées :
 *  - "Country"
 */
class AutoCountries
{
    public function __invoke(Request $request, Response $response, $args)
    {

        $autocomplete = new SmartAutocomplete($request, $response);

        // Get filter form input value
        $inputValue = $autocomplete->getFilterValue();

        // Here my data to returns
        $countries = ["France", "Italie", "Espagne"];

        $autoCompleteData = [];
        foreach ($countries as $country) {
            if (!$inputValue || preg_match(sprintf("/%s/i", preg_quote($inputValue, "/")), $country) > 0) {
                // Return only if match input
                $autoCompleteData[] = [
                    "Country" => $country
                ];
            }
        }
        $autocomplete->setEntryData($autoCompleteData);
        $autocomplete->setEntryLabel("<p>{{Country}}</p>");

        return $autocomplete->getResponse();
    }

}

Configuration du Smart Criteria

{
  "defaultStructure": "MyStructure",
  "criterias": [
    {
      "kind": "field",
      "field": "my_country",
      "autocomplete": {
        "url": "/my/countries/",
        "outputs": {
          "my_country": "Country"
        }
      }
    }
  ]
}

Interface associée

il est également possible de gérer une entrée pour l'aide à la saisie,

L'exemple suivant montre l'inclusion des entrées de mon champ my_extra_countries dans l'aide à la saisie de my_country :

Déclaration de la route `/my/countries/` . Fichier `src/config/SmartDataEngine/myAutocompletes.xml`

<?xml version="1.0"?>
<sde:config xmlns:sde="https://platform.anakeen.com/4/schemas/sde/1.0">
    <sde:routes namespace="My">
        <sde:route name="Autocomplete:Countries">
            <sde:priority>0</sde:priority>
            <sde:callable>My\AutoCountries</sde:callable>
            <sde:method>POST</sde:method>
            <sde:pattern>/my/countries/</sde:pattern>
            <sde:description>Get countries</sde:description>
        </sde:route>

    </sde:routes>
</sde:config>

Classe PHP `My\AutoCountries` pour retourner les résultats (Fichier `vendor/My/AutoCountries.php`)

<?php

namespace My;

use Anakeen\Core\SEManager;
use Anakeen\Routes\Core\Lib\ApiMessage;
use Anakeen\SmartAutocomplete;
use Anakeen\SmartElementManager;
use Psr\Http\Message\ResponseInterface as Response;
use Psr\Http\Message\ServerRequestInterface as Request;

/**
 * Class AutoUsers
 *
 * Données d'entrée :
 *  - "extraEntry"
 * Données retournées :
 *  - "Country"
 */
class ComplexAutocomplete
{
    public function __invoke(Request $request, Response $response, $args)
    {
        $autocomplete = new SmartAutocomplete($request, $response);

        // Get filter form input value
        $inputValue = $autocomplete->getFilterValue();

        // Here my data to returns
        $countries = ["France", "Italie", "Espagne"];
        $inputGroup = $autocomplete->getInputValue("extraEntry");
        if (!empty($inputGroup)) {
            if (is_array($inputGroup)) {
                foreach ($inputGroup as $input) {
                    array_push($countries, $input);
                }
            } else {
                array_push($countries, $inputGroup);
            }
        }

        $autoCompleteData = [];
        foreach ($countries as $country) {
            if (!$inputValue || preg_match(sprintf("/%s/i", preg_quote($inputValue, "/")), $country) > 0) {
                // Return only if match input
                $autoCompleteData[] = [
                    "Country" => $country
                ];
            }
        }
        $autocomplete->setEntryData($autoCompleteData);
        $autocomplete->setEntryLabel("<p>{{Country}}</p>");

        return $autocomplete->getResponse();
    }
}

Configuration du Smart Criteria

{
  "defaultStructure": "MyStructure",
  "criterias": [
    {
      "kind": "field",
      "field": "my_country",
      "autocomplete": {
        "url": "/my/countries/",
        "inputs": {
          "my_extra_countries": "extraEntry"
        },
        "outputs": {
          "my_country": "Country"
        }
      }
    },
    {
      "kind": "field",
      "field": "my_extra_countries"
    }
  ]
}

Interface associée

Lien avec une SmartGrid

Pour visualiser les résultats du Smart Criteria dans une Smart Grid, il faut injecter la valeur de la méthode getCriteriaValues() dans la propriété smartCriteriaValue de la grille.

Par exemple ici dans la grille prendra en compte la valeur du Smart Criteria à chaque fois que le Smart Criteria est validé:

<template>
  <ank-smart-criteria
    :config="criteriaConfiguration"
    @smartCriteriaValidated="onSmartCriteriaValidated"
    ref="smartCriteria"
  />
  <ank-se-grid ref="grid" collection="DEVBILL" :smartCriteriaValue="criteriaValue" />
</template>
<script>
  import AnkSmartCriteria from "@anakeen/user-interfaces/components/lib/AnkSmartCriteria";
  import AnkSEGrid from "@anakeen/user-interfaces/components/lib/AnkSEGrid";
  export default {
    components: {
      "ank-smart-criteria": AnkSmartCriteria,
      "ank-se-grid": AnkSEGrid
    },
    data: () => {
        return {
            criteriaConfiguration : {
                title: "Filtre des factures"
                defaultCollection: "DEVBILL",
                criterias: [
                    {
                        id: "title",
                        label: "Titre de facture"
                    },
                    {
                        id: "bill_clients",
                        urlSource: '/api/v2/devbill/clientlist'
                    },
                    {
                        id: "bill_billdate"
                    },
                    {
                        id: "bill_cost",
                        default: {
                            operator: "greater",
                            value: 10000
                        }
                    }
                ]
            },
            criteriaValue: {}
        }
    },
    onSmartCriteriaValidated: function() {
        this.smartCriteriaValue = this.$refs.smartCriteria.getFilters();
    }
  };
</script>

Recherche générale

Le composant graphique AnkFulltextSmartCriteria, fourni par le module fulltext-search, est une extension du composant graphique de base AnkSmartCriteria. Il permet d'ajouter la logique permettant de gérer la recherche générale.

Voici un exemple d'instanciation du composant fulltext smart criteria sur un domaine de recherche appelé YourSearchDomain.

<template>
  <ank-fulltext-smart-criteria :config="criteriaConfiguration" ref="smartCriteria" />
</template>
<script>
  import AnkFulltextSmartCriteria from "@anakeen/fulltext-search/components/lib/AnkFulltextSmartCriteria";
  export default {
    components: {
      "ank-fulltext-smart-criteria": AnkFulltextSmartCriteria
    },
    data: () => {
        return {
            criteriaConfiguration : {
                title: "Filtre de recherche générale"
                criterias: [
                    {
                        kind: "fulltext",
                        searchDomain: "YourSearchDomain"
                    }
                ]
            }
        }
    }
  };
</script>