# Smart Element Grid Component

# Description

Le composant Smart Element Grid est une grille permettant de consulter, rechercher et effectuer des actions sur un ensemble de Smart Elements.

Cette grille est basée sur le composant natif Vue Kendo Grid. Ainsi certains événements et propriétés sont communs au composant Smart Element Grid et à Kendo. Un lien vers la documentation Kendo correspondante sera alors proposé pour plus de détails.

Dans la suite de ce chapitre, nous baserons nos exemples sur une Smart Structure factice appelée DEVBILL. Voici une description xml de l’ensemble de ses smart fields :

<smart:fields>
    <smart:field-set name="bill_fr_ident" type="frame" label="Identification" access="ReadWrite">
        <smart:field-text name="bill_title" label="Title" access="ReadWrite" is-title="true"/>
        <smart:field-longtext name="bill_content" label="Description" access="ReadWrite"/>
        <smart:field-docid name="bill_author" label="Author" access="ReadWrite" relation="DEVPERSON"/>
        <smart:field-text name="bill_author_display" access="Read" is-title="true"/>
        <smart:field-date name="bill_billdate" label="Bill date" access="ReadWrite"/>
        <smart:field-text name="bill_location" label="City" access="ReadWrite"/>
        <smart:field-docid name="bill_clients" label="Clients" access="ReadWrite" relation="DEVCLIENT" multiple="true"/>
        <smart:field-set name="bill_otherclients" type="array" label="Other clients" access="ReadWrite">
        <smart:field-text name="bill_clientname" label="Client name" access="ReadWrite"/>
        <smart:field-text name="bill_society" label="Enterprise" access="ReadWrite"/>
        </smart:field-set>
        <smart:field-money name="bill_cost" label="Cost" access="ReadWrite"/>
    </smart:field-set>
</smart:fields>

# Initialisation

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

On peut définir sa configuration de deux manières:

via un fichier de configuration PHP qui étend la configuration par défaut de la grille,
via des propriétés JavaScript en utilisant la configuration par défaut de la grille.

WARNING

Attention La configuration apportée par le serveur est prioritaire par rapport à la configuration apportée par le client. De fait, s’il est souhaitable que la configuration cliente soit prise en compte, il faut impérativement appeler la méthode parente dans les méthodes de configuration serveur.

# Configuration des colonnes d’une grille

Les colonnes de la grille sont configurables, le format des colonnes est défini de la façon suivante :

{
  "abstract": boolean // Si `true` => Défini une colonne personalisée
  "field": string // L'identifiant de la colonne
  "property": boolean // Si `true` =>  Défini une colonne de propriété
  "withContext": boolean // Si `true` => Affiche le nom du smart field parent (par défaut)
  "context": string[] // Si l'option "withContext" est activée, permet de définir le contexte à afficher
  "width": number // Largeur de la colonne définie
  "headerAttributes": { [key: string]: string } // Des attributs html à rajouter sur les entêtes de grille
  "smartType": SmartFieldLeafType // Défini le type de smart field de donnée à afficher pour la colonne
  "title": string // Le titre de la colonne
  "encoded": boolean // Permet d'interpréter le html d'une cellule
  "hidden": boolean // La colonne cachée
  "sortable": boolean // La colonne peut être triée
  "filterable": boolean | SmartGridFilterable // La colonne peut être filtrée
  "resizable": boolean // La colonne peut être redimensionnée
  "orderIndex": number // Personaliser l'ordre d'affichage des colonnes
}

Les clefs abstract, field et property peuvent recevoir les trois valeurs suivantes :

Propriété	Colonne personnalisée	Colonne de propriété de Smart Élement	Colonne de Smart Field
abstract	true
field	string	identifiant d'une propriété du smart élément	identifiant d'un smart field
property		true

Exemple d’initialisation en JavaScript et en utilisant la configuration par défaut de AnkSmartElementGrid

Fichier PHP :

<?php

namespace Anakeen\Components\Grid;

use Anakeen\Router\Exception;

class DefaultGridController implements SmartGridController
{
  /**
   * Get the Smart Element Grid configuration builder
   * @return SmartGridConfigBuilder
   */
  protected static function getConfigBuilder(): SmartGridConfigBuilder
  {
    return new SmartGridConfigBuilder();
  }

  /**
   * Get the Smart Element Grid configuration
   * @param $collectionId
   * @param $clientConfig
   * @return array
   */
  public static function getGridConfig($collectionId, $clientConfig)
  {
    $configBuilder = static::getConfigBuilder();
    static::setCollectionId($configBuilder, $collectionId, $clientConfig);
    static::setPageable($configBuilder, $collectionId, $clientConfig);
    static::setColumns($configBuilder, $collectionId, $clientConfig);
    static::setActions($configBuilder, $collectionId, $clientConfig);
    return $configBuilder->getConfig();
  }
}

Fichier .vue :

<template>
  <div>
    <ank-smart-element-grid
      @rowActionClick="onRowActionClick"
      collection="DEVBILL"
      :columns="columns"
      :exportOptions="{ignoreFilters: true}"
      defaultExpandable
      defaultShownColumns
    >
    </ank-smart-element-grid>
  </div>
</template>

<script>
  import AnkSmartGridVue from "@anakeen/user-interfaces/components/lib/AnkSmartElementGrid.esm";
  export default {
    components: {
      "ank-smart-element-grid": AnkSmartGridVue
    },
    data() {
      return {
        columns: [
          { field: "initid", property: true },
          { field: "title", property: true },
          { field: "bill_author_display", title: "Auteur" },
          { field: "bill_location", title: "Ville" }
        ]
      };
    },
    methods: {
      onRowActionClick(evt) {}
    }
  };
</script>

Exemple d’initialisation via une configuration PHP qui étend la configuration par défaut de

AnkSmartElementGrid

Fichier PHP :

<?php
namespace Anakeen\Routes\Test;

use Anakeen\Components\Grid\DefaultGridController;
use Anakeen\Components\Grid\SmartGridConfigBuilder;

class MyGridController extends DefaultGridController
{
  protected static function setColumns($builder, $collectionId, $clientConfig)
  {
    $builder->addProperty("id");
    $builder->addProperty("title");
    $builder->addField("bill_author_display", array("title" => "Auteur"));
    $builder->addField("bill_location", array("title" => "Ville"));
  }
}

Veillez à importer le fichier XML de configuration de contrôleur de grille via le script manageGridControllers:

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<grid:controllers xmlns:grid="https://platform.anakeen.com/4/schemas/grid/1.0">
    <grid:controller name="MY_GRID_CONTROLLER" class="Anakeen\Routes\Test\MyGridController"/>
</grid:controllers>

Fichier .vue :

<template>
  <div>
    <ank-smart-element-grid
      @rowActionClick="onRowActionClick"
      collection="DEVBILL"
      controller="MY_GRID_CONTROLLER"
      :exportOptions="{ignoreFilters: true}"
      defaultExpandable
      defaultShownColumns
    >
    </ank-smart-element-grid>
  </div>
</template>

<script>
  import AnkSmartGridVue from "@anakeen/user-interfaces/components/lib/AnkSmartElementGrid.esm";
  export default {
    components: {
      "ank-smart-element-grid": AnkSmartGridVue
    },
    methods: {
      onRowActionClick(evt) {}
    }
  };
</script>

Aperçu du composant

Presentation

# Configuration d’une colonne abstraite de la grille

Exemple d’initialisation en JavaScript et en utilisant la configuration par défaut de AnkSmartElementGrid

Fichier PHP :

<?php

namespace Anakeen\Components\Grid;

class DefaultGridController implements SmartGridController
{
  /**
   * Get the Smart Element Grid configuration builder
   * @return SmartGridConfigBuilder
   */
  protected static function getConfigBuilder(): SmartGridConfigBuilder
  {
    return new SmartGridConfigBuilder();
  }
  /**
   * Get the Smart Element Grid configuration
   * @param $collectionId
   * @param $clientConfig
   * @return array
   */
  public static function getGridConfig($collectionId, $clientConfig)
  {
    $configBuilder = static::getConfigBuilder();
    static::setCollectionId($configBuilder, $collectionId, $clientConfig);
    static::setPageable($configBuilder, $collectionId, $clientConfig);
    static::setColumns($configBuilder, $collectionId, $clientConfig);
    static::setActions($configBuilder, $collectionId, $clientConfig);
    return $configBuilder->getConfig();
  }
}

Fichier .vue :

<template>
  <div>
    <ank-smart-element-grid
      @rowActionClick="onRowActionClick"
      collection="DEVBILL"
      :columns="columns"
      :actions="actions"
      :exportOptions="{ignoreFilters: true}"
      defaultExpandable
      defaultShownColumns
      checkable
      reorderable
      resizable
    >
      <template v-slot:cellTemplate="opts">
        <td v-if="opts.columnConfig.field === 'my_abstract_column'">
          <span>Test d’une colonne abstraite</span>
        </td>
      </template>
    </ank-smart-element-grid>
  </div>
</template>

<script>
  import AnkSmartGridVue from "@anakeen/user-interfaces/components/lib/AnkSmartElementGrid.esm";
  export default {
    components: {
      "ank-smart-element-grid": AnkSmartGridVue
    },
    data() {
      return {
        columns: [
          { field: "initid", property: true },
          { field: "title", property: true },
          { field: "bill_author_display", title: "Auteur" },
          { field: "bill_location", title: "Ville" },
          { field: "my_abstract_column", title: "Colonne abstraite", abstract: true }
        ],
        actions: [
          { action: "display", title: "Display" },
          { action: "modify", title: "Modify", iconClass: "fa fa-edit" },
          { action: "delete", title: "Delete", iconClass: "fa fa-trash" }
        ]
      };
    },
    methods: {
      onRowActionClick(evt) {}
    }
  };
</script>

Aperçu du composant :

AbstractPresentationJS

Exemple d’initialisation via une configuration PHP qui étend la configuration par défaut de

AnkSmartElementGrid

Fichier PHP :

<?php

namespace Anakeen\Test\HubComponent\TestSmartGrid;

use Anakeen\Components\Grid\DefaultGridController;
use Anakeen\Components\Grid\SmartGridBuilder;
use Anakeen\Components\Grid\SmartGridConfigBuilder;

class TestSmartGridController extends DefaultGridController
{
  protected static function setColumns(SmartGridBuilder $builder, $collectionId, $clientConfig)
  {
    $builder->addProperty("initid");
    $builder->addProperty("title");
    $builder->addField("bill_author");
    $builder->addField("bill_location");
    $builder->addAbstract("my_abstract_column", array(
      "dataFunction" => function ($se) {
        return ["value" => $se->getTitle()];
      },
      "title" => "Colonne abstraite"
    ));
  }

  protected static function setActions(SmartGridConfigBuilder $builder, $collectionId, $clientConfig)
  {
    $builder->addRowAction(array("action" => "display", "title" => "Display"));
    $builder->addRowAction(array("action" => "modify", "title" => "Modify", "iconClass" => "fa fa-edit"));
    $builder->addRowAction(array("action" => "delete", "title" => "Delete", "iconClass" => "fa fa-trash"));
  }
}

Veillez à importer le fichier XML de configuration de contrôleur de grille via le script manageGridControllers:

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<grid:controllers xmlns:grid="https://platform.anakeen.com/4/schemas/grid/1.0">
    <grid:controller name="TEST_SMART_GRID_CONTROLLER" class="Anakeen\Test\HubComponent\TestSmartGrid\TestSmartGridController"/>
</grid:controllers>

Fichier .vue :

<template>
  <div>
    <ank-smart-element-grid
      @rowActionClick="onRowActionClick"
      collection="DEVBILL"
      controller="TEST_SMART_GRID_CONTROLLER"
      :exportOptions="{ignoreFilters: true}"
      defaultExpandable
      defaultShownColumns
      checkable
      reorderable
      resizable
    >
    </ank-smart-element-grid>
  </div>
</template>

<script>
  import AnkSmartGridVue from "@anakeen/user-interfaces/components/lib/AnkSmartElementGrid.esm";
  export default {
    components: {
      "ank-smart-element-grid": AnkSmartGridVue
    },
    methods: {
      onRowActionClick(evt) {}
    }
  };
</script>

Aperçu du composant :

AbstractPresentationJS

# Configuration de la colonne d’actions de la grille

Exemple d’initialisation en JavaScript et en utilisant la configuration par défaut de AnkSmartElementGrid

Fichier PHP :

<?php

namespace Anakeen\Components\Grid;

use Anakeen\Router\Exception;

class DefaultGridController implements SmartGridController
{
  /**
   * Get the Smart Element Grid configuration builder
   * @return SmartGridConfigBuilder
   */
  protected static function getConfigBuilder(): SmartGridConfigBuilder
  {
    return new SmartGridConfigBuilder();
  }

  /**
   * Get the Smart Element Grid configuration
   * @param $collectionId
   * @param $clientConfig
   * @return array
   */
  public static function getGridConfig($collectionId, $clientConfig)
  {
    $configBuilder = static::getConfigBuilder();
    static::setCollectionId($configBuilder, $collectionId, $clientConfig);
    static::setPageable($configBuilder, $collectionId, $clientConfig);
    static::setColumns($configBuilder, $collectionId, $clientConfig);
    static::setActions($configBuilder, $collectionId, $clientConfig);
    return $configBuilder->getConfig();
  }
}

Fichier .vue :

<template>
  <div>
    <ank-smart-element-grid
      @rowActionClick="onRowActionClick"
      collection="DEVBILL"
      :actions="actions"
      :exportOptions="{ignoreFilters: true}"
      defaultExpandable
      defaultShownColumns
    >
    </ank-smart-element-grid>
  </div>
</template>

<script>
  import AnkSmartGridVue from "@anakeen/user-interfaces/components/lib/AnkSmartElementGrid.esm";
  export default {
    components: {
      "ank-smart-element-grid": AnkSmartGridVue
    },
    data() {
      return {
        actions: [
          { action: "display", title: "Display" },
          { action: "modify", title: "Modify", iconClass: "fa fa-edit" },
          { action: "delete", title: "Delete", iconClass: "fa fa-trash" }
        ]
      };
    },
    methods: {
      onRowActionClick(evt) {}
    }
  };
</script>

Exemple d’initialisation via une configuration PHP qui étend la configuration par défaut de

AnkSmartElementGrid

Fichier PHP :

<?php
namespace Anakeen\Routes\Test;

use Anakeen\Components\Grid\DefaultGridController;
use Anakeen\Components\Grid\SmartGridConfigBuilder;

class MyGridController extends DefaultGridController
{
  protected static function setActions(SmartGridConfigBuilder $builder, $collectionId, $clientConfig)
  {
    $builder->addRowAction(array("action" => "display", "title" => "Display"));
    $builder->addRowAction(array("action" => "modify", "title" => "Modify", "iconClass" => "fa fa-edit"));
    $builder->addRowAction(array("action" => "delete", "title" => "Delete", "iconClass" => "fa fa-trash"));
  }
}

Veillez à importer le fichier XML de configuration de contrôleur de grille via le script manageGridControllers:

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<grid:controllers xmlns:grid="https://platform.anakeen.com/4/schemas/grid/1.0">
    <grid:controller name="MY_GRID_CONTROLLER" class="Anakeen\Routes\Test\MyGridController"/>
</grid:controllers>

Fichier .vue :

<template>
  <div>
    <ank-smart-element-grid
      @rowActionClick="onRowActionClick"
      collection="DEVBILL"
      controller="MY_GRID_CONTROLLER"
      :exportOptions="{ignoreFilters: true}"
      defaultExpandable
      defaultShownColumns
    >
    </ank-smart-element-grid>
  </div>
</template>

<script>
  import AnkSmartGridVue from "@anakeen/user-interfaces/components/lib/AnkSmartElementGrid.esm";
  export default {
    components: {
      "ank-smart-element-grid": AnkSmartGridVue
    },
    methods: {
      onRowActionClick(evt) {}
    }
  };
</script>

Aperçu du composant

Presentation

# Propriétés

ank-smart-element-grid

Le composant ank-smart-element-grid est le composant de base de la grille. Chaque sous composant devra être inclus dans les balises :

<ank-smart-element-grid></ank-smart-element-grid>

# `collection (String)`

Permet de définir la collection de Smart Element à afficher dans la grille. Il s’agit du nom logique de la Smart Structure souhaitée.

Dans notre exemple :

<ank-smart-element-grid collection="DEVBILL"></ank-smart-element-grid>

gridBaseExample

Avertissement

Si vous ne spécifiez pas la propriété collection, la grille récupère par défaut tous les Smart Elements de la plateforme.

# `controller (String)`

Spécifie le controller de grille permettant de récupérer la configuration de la grille (colonnes, entête, export ...). Par défaut, controller correspond à DEFAULT_GRID_CONTROLLER qui récupère la configuration de base de la grille.

# `defaultExportButton (Boolean)` Jusqu'à la version 2021.1.1

Attention

Cette option est dépréciée au profit de la propriété exportOptions. Si defaultExportButton et exportOptions sont toutes deux définies, seule la valeur de exportOptions sera prise en compte.

Ajoute un bouton d’exportation par défaut dans une toolbar au dessus de la grille.

Chaque opération d’export génère un identifiant d’exportation qui est utilisé pour récupérer des informations sur la progression de l’opération.

La réponse de la requête d’export retourne le fichier exporté.

# `exportOptions (Object)` À partir de la version 2021.1.2

La propriété exportOptions permet de définir le comportement de la fonction d’export des données de la grille.

La propriété est un objet qui suit la structure :

ignoreSelection (boolean, default : false): Dans le cas où des rangs sont sélectionnés lors de l’export, seules les données sélectionnées seront exportées si ignoreSelection est à false.
ignoreFilters (boolean, default : false): Dans le cas où des colonnes sont filtrées lors de l’export, seules les données filtrées seront exportées si ignoreFilters est à false.
ignoreHiddenColumns (boolean, default : false): Les colonnes cachées seront exportées uniquement si ignoreHiddenColumns est à false.
columns (Array<Object>, default: []) : Le tableau des colonnes exportées.

TIP

Par défaut, aucune option n’est définie, le bouton d’export n’est donc pas affiché. Pour utiliser le bouton d’export, il suffit de définir au moins une option.

L’exemple suivant montre une configuration qui ignore la sélection et les filtres lors de l’export :

<template>
  <div>
    <ank-smart-element-grid collection="DEVBILL" :exportOptions="exportOptions" />
  </div>
</template>

<script>
import AnkSmartGridVue from "@anakeen/user-interfaces/components/lib/AnkSmartElementGrid.esm";
export default {
  components: {
    "ank-smart-element-grid": AnkSmartGridVue
  },
  data() {
    return {
      exportOptions: {
        ignoreSelection: true,
        ignoreFilters: true
      }
    };
  }
};
</script>

# `contextTitles (Boolean, default: true)`

Affiche en plus du titre, pour chaque colonne, le contexte (i.e. la hiérarchie des Smart Fields parents) du Smart Field s’il existe

En se basant sur notre exemple :

Fichier .vue :

<template>
  <div>
    <ank-smart-element-grid
      @rowActionClick="onRowActionClick"
      collection="DEVBILL"
      :columns="columns"
      :exportOptions="{ignoreFilters: true}"
      defaultExpandable
      defaultShownColumns
    >
    </ank-smart-element-grid>
  </div>
</template>

contextTitlesTrue

En ajoutant l’option contextTitles="false" :

<template>
  <div>
    <ank-smart-element-grid
      @rowActionClick="onRowActionClick"
      collection="DEVBILL"
      :columns="columns"
      :contextTitles="false"
      :exportOptions="{ignoreFilters: true}"
      defaultExpandable
      defaultShownColumns
    >
    </ank-smart-element-grid>
  </div>
</template>

contextTitlesFalse

# `contextTitlesSeparator (String, default: "-")`

Spécifie le séparateur à utiliser entre le contexte et le titre des colonnes.

Cet exemple montre un header avec un séparateur personnalisé --- :

<template>
  <div>
    <ank-smart-element-grid
      @rowActionClick="onRowActionClick"
      collection="DEVBILL"
      :columns="columns"
      contextTitlesSeparator="---"
      :exportOptions="{ignoreFilters: true}"
      defaultExpandable
      defaultShownColumns
    >
    </ank-smart-element-grid>
  </div>
</template>

contextTitlesSeparator

# `emptyCellText (String, default: "")`

Spécifie la chaîne de caractères à afficher lorsque qu’une cellule est vide.

Cet exemple montre une grille avec une valeur personnalisée emptyCellText="NO DATA"

<template>
  <div>
    <ank-smart-element-grid
      @rowActionClick="onRowActionClick"
      collection="DEVBILL"
      :columns="columns"
      emptyCellText="NO DATA"
      :exportOptions="{ignoreFilters: true}"
      defaultExpandable
      defaultShownColumns
    >
    </ank-smart-element-grid>
  </div>
</template>

emptyCell

# `sortable (Boolean | SmartGridSortConfig, default: DEFAULT_SORT)`

const DEFAULT_SORT = {
  mode: "multiple",
  showIndexes: true,
  allowUnsort: true
};

Définit le type de tri sur les colonnes. Les valeurs possibles sont : "single" ou "multiple".

Pour plus d’informations, se référer à la documentation Kendo.

# `filterable (Boolean ou Object, default: true)`

Définit si les colonnes de la grille sont filtrable ou non. Le filtrage de la grille s’effectue côté serveur via une configuration PHP. Cette configuration gère, par défaut, les filtres de tous les Smart Field et propriétés d’un Smart Element. Il est également possible d’effectuer des filtres personnalisés ou d’ajouter des filtres pour les colonnes de type abstraites.

Exemple : filtrage customisé de colonne abstraites de la grille en PHP.
- classe TrashGridController contrôleur de la grille de la section poubelle d’administration

<?php
namespace Anakeen\Routes\Test;

use Anakeen\Components\Grid\DefaultGridController;
use Anakeen\Components\Grid\SmartGridConfigBuilder;
use Anakeen\Components\Grid\SmartGridContentBuilder;
use Anakeen\Core\DbManager;
use Anakeen\Core\SEManager;
use Anakeen\Core\Utils\Date;
use Anakeen\Search\SearchElements;

class MyGridController extends DefaultGridController
{
  public static function getGridConfig($collectionId, $clientConfig)
  {
    $configBuilder = new SmartGridConfigBuilder();
    if (isset($clientConfig["pageable"])) {
      $configBuilder->setPageable($clientConfig["pageable"]);
    }
    $configBuilder->addAbstract("auth", array(
      "smartType" => "text",
      "title" => "Authorization",
      "hidden" => true,
      "sortable" => false,
      "filterable" => false
    ));
    $configBuilder->addAbstract("author", array(
      "smartType" => "text",
      "title" => "Author of the deletion",
      "sortable" => false,
      "filterable" => true
    ));
    return $configBuilder->getConfig();
  }

  public static function getGridContent($collectionId, $clientConfig)
  {
    $contentBuilder = new SmartGridContentBuilder();

    $trashContent = new TrashContent();
    $contentBuilder->getSearch()->useTrash(SearchElements::ONLYTRASH);
    $contentBuilder->getSearch()->setDistinct(true);
    $contentBuilder->getSearch()->overrideAccessControl();
    $contentBuilder->getSearch()->join("id = dochisto(id)");
    $contentBuilder->getSearch()->addFilter("dochisto.code = 'DELETE'");

    if (isset($clientConfig["pageable"]["pageSize"])) {
      $contentBuilder->setPageSize($clientConfig["pageable"]["pageSize"]);
    }
    if (isset($clientConfig["page"])) {
      $contentBuilder->setPage($clientConfig["page"]);
    }
    if (isset($clientConfig["filter"])) {
      foreach ($clientConfig["filter"]["filters"] as $filter) {
        if (strcmp($filter["field"], "author") === 0) {
          $filters = $filter["filters"];
          foreach ($filters as $f) {
            if ($f["operator"] === "contains") {
              $contentBuilder->getSearch()->addFilter("dochisto.uname ILIKE '%%%s%%'", $f["value"]);
            } elseif ($f["operator"] === "startswith") {
              $contentBuilder->getSearch()->addFilter("dochisto.uname ILIKE '%s%%'", $f["value"]);
            } elseif ($f["operator"] === "doesnotcontain") {
              $contentBuilder->getSearch()->addFilter("dochisto.uname NOT ILIKE '%%%s%%'", $f["value"]);
            } elseif ($f["operator"] === "isempty") {
              $contentBuilder->getSearch()->addFilter("dochisto.uname IS NULL OR dochisto.uname = ''");
            } elseif ($f["operator"] === "isnotempty") {
              $contentBuilder->getSearch()->addFilter("dochisto.uname IS NOT NULL AND dochisto.uname != ''");
            }
          }
        } elseif (strcmp($filter["field"], "fromid") === 0) {
          if (isset($filter["filters"]) && !empty($filter["filters"])) {
            foreach ($filter["filters"] as $fromIdFilter) {
              if (strcmp($fromIdFilter["operator"], "titleContains") !== 0) {
                $contentBuilder->addFilter($fromIdFilter);
              } else {
                $sqlQuery = "SELECT id FROM docfam WHERE name ~* '%s’";
                if (isset($fromIdFilter["value"]) && !empty($fromIdFilter["value"])) {
                  $result = [];
                  DbManager::query(sprintf($sqlQuery, pg_escape_string($fromIdFilter["value"])), $result, true);
                  if (empty($result)) {
                    // Ensure that no filter result implies there is no grid data content (fromid = -2)
                    $result = [-2];
                  }
                  $contentBuilder->getSearch()->addFilter("fromid in (%s)", implode(",", $result));
                }
              }
            }
          }
        } else {
          $contentBuilder->addFilter($filter);
        }
      }
    }

    $contentBuilder->addAbstract("auth", array(
      "dataFunction" => function ($seData) use ($trashContent) {
        return $trashContent->canDisplay($seData);
      }
    ));
    $contentBuilder->addAbstract("author", array(
      "dataFunction" => function ($seData) use ($trashContent) {
        return $trashContent->getAuthorName($seData);
      }
    ));
    return $contentBuilder->getContent();
  }
}

# `pageable (Boolean | SmartGridPageSize, default: DEFAULT_PAGER)`

const DEFAULT_PAGER = {
  buttonCount: 0,
  pageSize: 10,
  pageSizes: [10, 20, 50]
};

Autorise la présence d’un tourne-page en bas de grille. Par défaut le tourne-page n’est pas présent.

Voici le tourne-page par défaut : pager

Permet de définir les options de taille de page disponibles dans le tourne-page (Voir pageable).

Pour plus d’informations, se référer à la documentation Kendo.

# `refresh (Boolean, default: false)`

Ajout d’un bouton d’actualisation des données dans le bas de la grille.

# `autoScrollTop (Boolean, default: true])`

Définit si l’on défile automatiquement en haut de la liste lors de tout changement(changement de page, ajout d’un filtre, rechargement de la liste).

# `reorderable (Boolean, default: false)`

Définit si l’utilisateur peut réorganiser les colonnes de la grille par drag and drop du header. Désactivé par défaut.

Pour plus d’informations, se référer à la documentation Kendo.

# `resizable (Boolean, default: true)`

Définit si l’utilisateur peut redimensionner les colonnes de la grille par drag and drop des bordures latérales du header. Activé par défaut.

Pour plus d’informations, se référer à la documentation Kendo.

# `checkable (Boolean, default: false)`

Permet d’ajouter une colonne de checkbox. En cochant les cases, l’utilisateur sélectionne les rangs associés. Désactivé par défaut.

En reprenant notre exemple :

<ank-smart-element-grid collection="DEVBILL" :checkable="true"></ank-smart-element-grid>

Pour sélectionner les éléments dans le code grâce à la méthode selectSmartElements, cliquez ici

checkable

# `persistStateKey (String, default:"")`

Active la persistance de l’état de la grille. Par défaut, la clé fournie est utilisée pour sauvegarder l’état dans le localStorage du navigateur. Cette clé doit être unique.

Exemple :

Fichier .vue : Sauvegarde et Restauration par défaut de la Smart Element Grid

<ank-smart-element-grid collection="DEVBILL" ref="grid" :persistStateKey="ma-cle-unique"></ank-smart-element-grid>
<script>
  import AnkSEGrid from "@anakeen/user-interfaces/components/lib/AnkSmartElementGrid.esm";
  export default {
    components: {
      AnkSEGrid
    }
  };
</script>

Il existe un hook de sauvegarde beforeSaveConfiguration, ainsi qu’un hook de restauration beforeRestoreConfiguration. Ces hooks sont actifs si la propriété persistStateKey est présente.

beforeSaveConfiguration permet de sauvegarder la configuration des colonnes lors des modifications d’ordre, de taille, ou de présence de colonnes dans la grille.
beforeRestoreConfiguration permet de restaurer la configuration provenant du localStorage en utilisant la clé persistStateKey.

Info

Les évenements de sauvegarde et de restauration peuvent être annulés par l’utilisateur. Il existe également un hook de post-sauvegarde afterSaveConfiguration, ainsi qu’un hook de post-restauration afterRestoreConfiguration, émit à la fin de la sauvegarde ou de la restauration respectivement.

Exemple :

Fichier .vue : Sauvegarde et Restauration customisé en ajoutant des données supplémentaires.

<ank-smart-element-grid
  collection="DEVBILL"
  ref="grid"
  :persistStateKey="ma-cle-unique"
  @beforeRestoreConfiguration="beforeRestoreColumns"
  @afterSaveConfiguration="afterSaveColumns"
></ank-smart-element-grid>
<script>
  import AnkSEGrid from "@anakeen/user-interfaces/components/lib/AnkSmartElementGrid.esm";
  export default {
    components: {
      AnkSEGrid
    },
    methods: {
      afterSaveColumns(e) {
        // Ajout de données supplémentaires après la sauvegarde de la configuration des colonnes.
        window.localStorage.setItem(this.$refs.grid.persistStateKey, JSON.stringify({config : e.data.config, moreData: { width: window.outerWidth}}));
      }
      beforeRestoreColumns(e) {
        // Restauration des données seulement si la largeur de la fenêtre actuelle est plus supérieure ou égale à la largeur sauvegardé dans moreData.
        if (window.outerWidth < e.data.config.moreData.width) {
          e.preventDefault();
        }
     }
    }
  };
</script>

Fichier .vue : Sauvegarde et Restauration customisé via données extérieure au localStorage.

<ank-smart-element-grid
  collection="DEVBILL"
  ref="grid"
  :persistStateKey="ma-cle-unique"
  @beforeSaveConfiguration="beforeSaveColumns"
  @beforeRestoreConfiguration="beforeRestoreColumns"
></ank-smart-element-grid>
<script>
  import AnkSEGrid from "@anakeen/user-interfaces/components/lib/AnkSmartElementGrid.esm";
  export default {
    components: {
      AnkSEGrid
    },
    methods: {
      beforeSaveColumns(e) {
        e.preventDefault();
        e.data.promise = this.$http.put("/mon/url/de/configuration/extérieure", { config: e.data.config });
      },
      beforeRestoreColumns(e) {
        e.preventDefault();
        e.data.promise = this.$http.get("/mon/url/de/récupération/de/configuration/extérieure").then(response => {
          this.$refs.grid.restoreConfiguration(response);
        });
      }
    }
  };
</script>

Info

En ajoutant l’option persistStateKey, un bouton de réinitialisation de la configuration des colonnes est disponible dans l’interface de gestion des colonnes. Ce bouton ramène la grille dans son état initial de configuration. columnsConfiguration

# `customData (Object)`

Permet à l’utilisateur d’ajouter des données additionnelles à la Smart Element Grid, qui sont transmises au serveur.

En reprenant notre exemple :

Fichier .vue :

<ank-smart-element-grid collection="DEVBILL" ref="grid" :customData="customData"></ank-smart-element-grid>
<script>
  import AnkSEGrid from "@anakeen/user-interfaces/components/lib/AnkSmartElementGrid.esm";
  export default {
    components: {
      AnkSEGrid
    },
    computed: {
      customData: function() {
        return {
          myCustomData: "Bill 0001 AGIUS Elizabeth"
        };
      }
    }
  };
</script>

Fichier PHP :

<?php
namespace Anakeen\Routes\Test;

use Anakeen\Components\Grid\DefaultGridController;
use Anakeen\Components\Grid\SmartGridBuilder;
use Anakeen\Components\Grid\SmartGridConfigBuilder;
use Anakeen\Components\Grid\SmartGridContentBuilder;

class MyGridController extends DefaultGridController
{
  protected static function setContentFilter(SmartGridContentBuilder $contentBuilder, $collectionId, $clientConfig)
  {
    parent::setContentFilter($contentBuilder, $collectionId, $clientConfig);
    $contentBuilder->getSearch()->addFilter("title ILIKE '%s’ ", $clientConfig["customData"]["myCustomData"]);
  }
}

# kendoProps

Il est possible d’appliquer les propriétés natives de la grille Vue.js Kendo sur la grille Anakeen en utilisant la propriété kendoProps.

Certaines de ces propriétés sont utilisées sur la grille Anakeen par défaut. Ainsi, si des propriétés natives de la grille Kendo sont redéfinies, le rendu de la grille Anakeen risque d’être impacté.

WARNING

Le fonctionnement des options natives dépend directement du bon fonctionnement de la grille Kendo. Par conséquent, les options natives ne sont pas maintenues par Anakeen.

Ci-dessous, voici un exemple de configuration d’une grille Anakeen avec l’utilisation de la propriété scrollable de la grille Kendo :

<template>
  <div>
    <ank-smart-element-grid
        @rowActionClick="onRowActionClick"
        collection="DEVBILL"
        :actions="actions"
        :exportOptions="{ignoreFilters: true}"
        defaultExpandable
        defaultShownColumns
        :kendoProps="kendoProps"
    >
    </ank-smart-element-grid>
  </div>
</template>

<script>
import AnkSmartGridVue from "@anakeen/user-interfaces/components/lib/AnkSmartElementGrid.esm";
export default {
  components: {
    "ank-smart-element-grid": AnkSmartGridVue
  },
  data() {
    return {
      actions: [
        { action: "display", title: "Display" }
      ],
      kendoProps: {
        scrollable: "none"
      }
    };
  },
  methods: {
    onRowActionClick(evt) {},
  }
};
</script>

# `smartCriteriaValue (object, default: {})`

Permet d’intégrer la valeur d’un Smart Criteria dans les filtres de la grilles. La structure suit celle de la valeur de la méthode getFilters() du composant.

Voici un exemple de prise en compte du filtre à chaque changement du Smart Criteria :

<template>
  <ank-smart-criteria
    :config="criteriaConfiguration"
    @smartCriteriaChange="onSmartCriteriaChange"
    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: {}
        }
    },
    onSmartCriteriaChange: function(event, values) {
        this.smartCriteriaValue = this.$refs.smartCriteria.getFilters();
    }
  };
</script>

# `filterOption (FilterOptions <1|2|4|8>, default: FilterOptions.NOCASE = 2)`

Permet d’avoir la main sur les options utilisés par les filtres des colones du composant.

FilterOptions:NOT = 1:
FilterOptions:NOCASE = 2:
FilterOptions:NODIACRITIC = 4:
FilterOptions:STARTSWITH = 8:

# Événements

Les évènements renvoient en paramètre un objet de type GridEvent dont la structure est la suivante :

{
  type: string;
  cancelable: boolean;
  target: EventTarget;
  data: any;

  preventDefault(): void // Annule l'événement s'il est annulable
  isDefaultPrevented(): boolean
}

# `gridReady`

# Déclenchement

Déclenché lorsque la grille est configurée et affichée. Les données peuplant la grille ne sont pas forcément encore affichées.

# Paramètres passés au callback

Aucune donnée n’est passée par l’événement.

# `beforeConfig`

# Déclenchement

Déclenché avant la demande de configuration au serveur. Permet de modifier la requête ou d’annuler son envoi.

# Paramètres passés au callback

L’événement transporte l’url de la requête pour récupérer la configuration de la grille, via event.data.

{
  "data": {
    "url": "url/config/example"
  }
}

# Exemples

Cet exemple permet d’annuler la requête de récupération de la configuration de la grille :

<ank-smart-element-grid ref="grid" collection="DEVBILL"></ank-smart-element-grid>

const grid = this.$refs.grid;
grid.$on("beforeConfig", e => {
  e.preventDefault();
});

# `afterConfig`

# Déclenchement

Déclenché après la réception de la configuration depuis le serveur. Permet de modifier la configuration reçue.

# Paramètres passés au callback

L’événement transporte la configuration de la grille provenant du serveur : œ

{
  "data": {
    "config": {
      "actions": Array,
      "collection": Object,
      "columns": Array,
      "contentURL": string,
      "footer": Boolean,
      "pageable": Object | Boolean
    }
  }
}

# `beforeContent`

# Déclenchement

Déclenché avant la demande de contenu au serveur. Permet de modifier la requête ou d’annuler son envoi.

# Paramètres passés au callback

L’événement transporte l’url et les paramètres de la requête :

{
  "data": {
    "queryParams": {
      "actions": Array,
      "collection": Object,
      "columns": Array,
      "contentURL": string,
      "footer": Boolean,
      "pageable": Object | Boolean,
      "onlySelection": Boolean,
      "selectedRows": Array
    },
    "url": String
  }
}

# Exemples

Cet exemple permet d’annuler la requête de récupération de la configuration de la grille.

<ank-smart-element-grid ref="grid" collection="DEVBILL"></ank-smart-element-grid>

const grid = this.$refs.grid;
grid.$on("beforeContent", e => {
  e.preventDefault();
});

# `afterContent`

# Déclenchement

Déclenché après la réception du contenu depuis le serveur. Permet de modifier les données reçues.

# Paramètres passés au callback

{
  "data": {
    "content": {
      "content": Array
    },
    "requestParameters": {
      "filter": String,
      "pager": {
        "page": Number,
        "pageSize": Number,
        "skip": Number,
        "take": Number,
        "total": Number
      },
      "sort": String
    }
  }
}

# Exemples

Cet exemple met tous les titres des éléments affichés en majuscules :

<ank-smart-element-grid ref="grid" collection="DEVBILL"></ank-smart-element-grid>

const grid = this.$refs.grid;
grid.$on("afterContent", e => {
  const smartElements = e.data.content.content;
  smartElements.map(smartElement => {
    smartElement.properties.title = smartElement.properties.title.toUpperCase();
  });
});

# `beforeGridCellRender`

# Déclenchement

Est déclenché avant chaque rendu de cellule.

# Paramètres passés au callback

L’événement transporte les données Kendo liées à la cellule :

{
  "data": {
    "columnConfig": Object,
    "rowData": Object,
    "defaultPrevented": Boolean
  }
}

# `rowClick`

# Déclenchement

Déclenché lors du clic sur une ligne de la grille. L’événement est annulable pour les actions standards (display ou modify).

# Paramètres passés au callback

event.preventDefault() : Méthode qui annule le comportement par défaut des actions standards display et modify.

event.data : Données de l’événement.

{
  "data": {
    "type": String,
    "dataItem": {
      "properties": {
        "icon": string,
        "id": Number,
        "initId": Number,
        "revision": Number,
        "title": Number
      }
    }
  }
}

type: Identifiant de l’action associé
dataItem : Information sur le Smart Element de la ligne selectionnée
- properties :
  - icon: icône du Smart Element,
  - id: identifiant de la Smart Structure,
  - initId: identifiant du Smart Element,
  - revision: révision du Smart Element,
  - title: titre du Smart Element,

Dans cet exemple, nous affichons le titre du SmartElement de la ligne séléctionnée dans la console du navigateur :

<ank-grid collection="DEVBILL" @rowClick="onRowClick" />

    onRowClick(evt) {
  console.log("Le titre du SmartElement séléctionné est = ", evt.data.dataItem.properties.title);
}

rowClick

# `rowActionClick`

# Déclenchement

Déclenché lors du clic sur une action de la grille (boutons de la colonne d’actions de la grille). L’événement est annulable pour les actions standards (display ou modify).

# Paramètres passés au callback

event.preventDefault() : Méthode qui annule le comportement par défaut des actions standards display et modify.

event.data : Données de l’événement avec le type de l’action (identifiant action).

{
  "data": {
    "type": String,
    "row": {
      "properties": {
        "icon": string,
        "id": Number,
        "initId": Number,
        "revision": Number,
        "title": Number
      }
    },
    "evt": MouseEvent
  }
}

type: Identifiant de l’action associé
row : Information sur le Smart Element de la ligne selectionnée
- properties :
  - icon: icône du Smart Element,
  - id: identifiant de la Smart Structure,
  - initId: identifiant du Smart Element,
  - revision: révision du Smart Element,
  - title: titre du Smart Element,
evt : Événement d’origine de type MouseEvent,

Dans cet exemple, nous réimplémentons l’action display pour afficher le premier champ de bill_clientname dans la console du navigateur :

<ank-smart-element-grid collection="DEVBILL" ref="grid"></ank-smart-element-grid>

const grid = this.$refs.grid;
grid.$on("rowActionClick", e => {
  if (e.data.type === "display") {
    e.preventDefault();
    console.log(e.data.row.attributes.bill_clientname[0]);
  }
});

La méthode StopPropagation permet d’empêcher la propagation de l’événement et donc de ne pas déclencher d’autres événements non voulut.

Prenons par exemple l’utilisation des événements rowActionClick et rowClick

Grâce à la méthode stopPropagation dans l’événement rowActionClick l’événement rowClick n’est pas déclenché.

<ank-grid collection="DEVBILL" @rowClick="onRowClick" @rowActionClick="onActionClick" />

    onRowClick(evt) {
      console.log("Je clique sur la ligne");
    },
    onActionClick(evt) {
      console.log("Je clique sur l’action");
      evt.data.evt.stopPropagation();
    }

avecPropagation

# `beforeDocidLink`

# Déclenchement

Déclenché lors du clic sur un lien pour un Smart Field de type docid. Cet événement permet de modifier ou d’annuler la redirection vers la page de consultation du Smart Element référencé. L’événement est annulable.

# Paramètres passés au callback

event.preventDefault() : Méthode qui annule la redirection.
event.data : Objet contenant les données de l’événement. Il contient les propriétés suivantes :
- url: l’url du lien vers le docid
- fieldValue :
  - displayValue : valeur affichée,
  - familyRelation: Smart Structure auquel est lié le docid,
  - fromid : identifiant de la Smart Structure,
  - icon : icone utilisée par le Smart Element,
  - initid: identifiant du Smart Element,
  - revision : revision du Smart Element.

# Exemples

Dans cet exemple nous annulons la redirection des liens docid

<template>
  <ank-smart-element-grid collection="DEVBILL" ref="grid" @beforeDocidLink="callback"> </ank-smart-element-grid>
</template>
<script>
import AnkSEGrid from "@anakeen/user-interfaces/components/lib/AnkSmartElementGrid.esm";
export default {
  components: {
    AnkSEGrid
  },
  methods: {
    callback(event) {
      event.preventDefault(); //Annule la redirection
    }
  }
};
</script>

# `beforeGridExport`

# Déclenchement

Déclenché avant l’export de la grille, que ça soit par clic sur le sous composant Export Button ou par appel de la méthode export.

# Paramètres passés au callback

event.preventDefault() : Méthode qui annule l’export.
event.data : Objet contenant les données de l’événement. Il contient les propriétés suivantes :
- component: Le composant Vue de la grille.
- onExport: La méthode appelée pour réaliser la transaction.
- onPolling: La méthode appelée à chaque scrutation du serveur pendant la transaction.

# Exemples

Dans cet exemple nous annulons l’export de la grille

<template>
  <ank-smart-element-grid collection="DEVBILL" ref="grid" @beforeGridExport="callback"> </ank-smart-element-grid>
</template>
<script>
import AnkSEGrid from "@anakeen/user-interfaces/components/lib/AnkSmartElementGrid.esm";
export default {
  components: {
    AnkSEGrid
  },
  methods: {
    callback(event) {
      event.preventDefault(); //Annule l’export
    }
  }
};
</script>

# `beforePollingGridExport`

{
  type: "GridEvent";
  cancelable: true;
  target: null;
  data: {
          config: SmartGridColumn[], // La liste des colonnes.
          promise: Promise
        },;
}

# `beforeRestoreConfiguration`

# Déclenchement

Déclenché lors du chargement de la grille, avant de restaurer sa configuration.

WARNING

Est appelé uniquement si la propriété persistStateKey est définie.

# Paramètres passés au callback

L'événement de la grille.

# `gridError`

# Déclenchement

Déclenché si une erreur est survenue lors du chargement de la grille ou d'une action annexe. (ex : Chargement des données ou à l'export de la grille)

# Paramètres passés au callback

L'événement de la grille.

# Exemple

<template>
  <div>
    <ank-smart-element-grid
      collection="DEVBILL"
      ref="grid"
      :columns="columns"
      @gridError="callback"
    ></ank-smart-element-grid>
  </div>
</template>
<script>
import AnkSEGrid from "@anakeen/user-interfaces/components/lib/AnkSmartElementGrid.esm";
export default {
  components: {
    "ank-smart-element-grid": AnkSEGrid
  },
  data() {
    return {
      columns: [{ field: "field_inconnu" }]
    };
  },
  methods: {
    callback(event) {
      console.log(event.data.message);
    }
  }
};
</script>

# `pageChange`

# Déclenchement

Déclenché au moment du changement de page ou du nombre d'éléments affichés par pages.

# Paramètres passés au callback

L'événement de la grille.

# Exemples

<template>
  <div>
    <ank-smart-element-grid
      collection="DEVBILL"
      ref="grid"
      :columns="columns"
      @pageChange="callback"
    ></ank-smart-element-grid>
  </div>
</template>
<script>
import AnkSEGrid from "@anakeen/user-interfaces/components/lib/AnkSmartElementGrid.esm";
export default {
  components: {
    "ank-smart-element-grid": AnkSEGrid
  },
  data() {
    return {
      columns: [
        { field: "title", property: true },
        { field: "bill_author_display", title: "Auteur" },
        { field: "initid", property: true },
        { field: "bill_location", title: "Ville" }
      ]
    };
  },
  methods: {
    callback(event) {
      console.log("Nous avons changé de page.");
    }
  }
};
</script>

# Slots

# Description

La grille comporte des slots vue permettant d’intégrer du contenu à l’intérieur du composant ank-smart-element-grid. Ces slots sont nommés gridHeader et gridFooter. Ils permettent l’ajout de contenu en entête ou au pied de la grille.

Afin de peupler ces slots, certains composants sont fournis : ank-grid-pager, ank-smart-element-grid-button, ank-grid-columns-button et ank-export-button. Ces composants seront détaillés dans la section Slots.

# Initialisation

Les slots sont à utiliser comme suit :

<ank-smart-element-grid>
  <template v-slot:gridHeader>
    // Contenu de header
  </template>
  <template #cellTemplate="options">
    // Contenu de la cellule
  </template>
  <template v-slot:gridFooter>
    // Contenu du footer
  </template>
</ank-smart-element-grid>

Les composants ank-grid-pager, ank-smart-element-grid-button, ank-grid-columns-button et ank-grid-export-button sont disponibles dans la bibliothèque @anakeen/user-interfaces/components/lib.

Si vous souhaitez utiliser des composants qui nécessitent des informations de la grille, l’instance du composant Vue de la grille est disponible dans les slots via le mécanisme de Scoped Slots. Ainsi pour le slot gridHeader par exemple, vous pouvez injecter l’instance du composant grille en propriété de votre composant (ici my-component) de la manière suivante :

<ank-smart-element-grid>
  <template v-slot:gridHeader="{ gridComponent }">
    <my-component :gridComponent="gridComponent"></ank-smart-element-grid-export-button>
  </template>
</ank-smart-element-grid>

WARNING

Il est important de garder le nom gridComponent de la donnée. Dans le cas contraire Vue n’injectera pas la donnée dans les slots.

Voici un exemple complet d’utilisation des slots :

Exemple d’initialisation

<template>
  <div>
    <ank-smart-element-grid collection="DEVBILL" ref="grid">
      <template v-slot:gridHeader="{ gridComponent }">
        <ank-smart-element-grid-export-button :gridComponent="gridComponent"></ank-smart-element-grid-export-button>
        <ank-smart-element-grid-columns-button :gridComponent="gridComponent"></ank-smart-element-grid-columns-button>
      </template>
    </ank-smart-element-grid>
  </div>
</template>
<script>
  import AnkSEGrid from "@anakeen/user-interfaces/components/lib/AnkSmartElementGrid.esm";
  import AnkSEGridColumnsButton from "@anakeen/user-interfaces/components/lib/AnkSmartElementGridColumnsButton.esm";
  import AnkSEGridExportButton from "@anakeen/user-interfaces/components/lib/AnkSmartElementGridExportButton.esm";
  export default {
    components: {
      "ank-smart-element-grid": AnkSEGrid,
      "ank-smart-element-grid-columns-button": AnkSEGridColumnsButton,
      "ank-smart-element-grid-export-button": AnkSEGridExportButton
    }
  };
</script>

Aperçu du composant

Presentation slots

# `cellTemplate`

Ce slot transmet des données.

# Structure des données

renderElement : L'élément (VNode) qui correspond a l'affichage standard de la cellule.
props : Les propriétés envoyées par Kendo (GridCellProps).
listeners : Les événements écoutés (Record<string, unknown>).
columnConfig : La configuration de la colonne (Object).

Contenu de props :

{
  "id": "_ai0-0_cell",
  "field": "title",
  "dataItem": {
    // Information de la ligne
    "properties": {
      // Propriétés du Smart Element
      "id": 1038,
      "title": "Accès des masques de saisie et des contrôles de vues",
      "initid": 1038,
      "fromid": "PFAM",
      "icon": "/api/v2/images/assets/sizes/24x24c/se-pfam.png",
      "name": "PRF_RENDERUI_CREATION",
      "revision": 0
    },
    "attributes": {
      // Présent uniquement si sur la ligne il y a des smart fields
      "nom_smart_field": {
        "value": "",
        "displayValue": ""
      }
    },
    "abstract": {
      "colonne_personalisée": {
        "foo": "bar"
      }
    }
  },
  "className": "",
  "colSpan": 1,
  "columnIndex": 0,
  "columnsCount": 5,
  "dataIndex": 1,
  "rowType": "data",
  "level": 0,
  "expanded": true,
  "type": "text",
  "isSelected": false,
  "render": {
    "type": "renderFunction",
    "listeners": {}
  }
}

Exemple de la configuration de la colonne :

{
  "type": "text",
  "sortable": true,
  "filterable": {
    "operators": {
      "string": {
        "contains": "Contient",
        "startswith": "Commence par",
        "doesnotcontain": "Ne contient pas",
        "isempty": "Est vide",
        "isnotempty": "N'est pas vide",
        "searchCriteria": ""
      },
      "date": {
        "contains": "Contient",
        "startswith": "Commence par",
        "doesnotcontain": "Ne contient pas",
        "isempty": "Est vide",
        "isnotempty": "N'est pas vide",
        "searchCriteria": ""
      }
    },
    "cell": {
      "enable": true,
      "delay": 9999999999
    }
  },
  "label": "prop_title",
  "field": "title",
  "smartType": "text",
  "title": "Titre",
  "property": true
}

Exemple d'utilisation :

<template #cellTemplate="options">
  <td v-if="options.columnConfig.field === 'title'">
    <span>Mon titre est : {{ options.columnConfig.title }}</span>
  </td>
</template>

# `ank-grid-pager`

# Présentation

Le composant ank-grid-pager est un paginateur pour le composant ank-smart-element-grid. Il est inclus par défaut dans le slot gridFooter de la grille.

WARNING

Ce composant a besoin de la donnée gridComponent du slot, à injecter dans la propriété gridComponent du pager.

Voici un exemple d’utilisation de grille avec deux paginateurs :

Exemple d’initialisation

<template>
  <div>
    <ank-smart-element-grid collection="DEVBILL" :checkable="true" ref="grid">
      <template v-slot:gridHeader="{ gridComponent }">
        <ank-grid-pager :gridComponent="gridComponent"></ank-grid-pager>
      </template>
    </ank-smart-element-grid>
  </div>
</template>
<script>
  import AnkSEGrid from "@anakeen/user-interfaces/components/lib/AnkSmartElement.esm";
  import AnkSEGridPager from "@anakeen/user-interfaces/components/lib/AnkSmartElementGridPager.esm";
  export default {
    components: {
      "ank-smart-element-grid": AnkSEGrid,
      "ank-grid-pager": AnkSEGridPager
    }
  };
</script>

Aperçu du composant

Presentation pager

# Propriétés

# `gridComponent (AnkSmartElementGrid, default: null) : Required`

L’instance du composant Vue ank-smart-element-grid, qui est disponible dans les slots via la donnée gridComponent. Cette propriété est obligatoire. Si elle n’est pas passée, le composant ne sera pas initialisé.

# Événements

Pas d’événements.

# `ank-smart-element-grid-expand-button`

# Présentation

Le composant ank-smart-element-grid-expand-button est un bouton d’expansion/minimisation des lignes de la grille ank-smart-element-grid. Il est inclus par défaut dans le slot gridFooter de la grille.

WARNING

Ce composant a besoin de la donnée gridComponent du slot, à injecter dans la propriété gridComponent de ank-smart-element-grid-expand-button.

Voici un exemple d’utilisation de grille avec un bouton d’expansion au dessus de la grille:

Exemple d’utilisation

<template>
  <div>
    <ank-smart-element-grid collection="DEVBILL" :checkable="true" ref="grid">
      <template v-slot:gridHeader="{ gridComponent }">
        <ank-smart-element-grid-expand-button
          :gridComponent="gridComponent"
          iconClass="fa fa-expand"
        ></ank-smart-element-grid-expand-button>
      </template>
    </ank-smart-element-grid>
  </div>
</template>
<script>
  import AnkSEGrid from "@anakeen/user-interfaces/components/lib/AnkSmartElementGrid.esm";
  import AnkSEGridExpandButton from "@anakeen/user-interfaces/components/lib/AnkSmartElementGridExpandButton.esm";
  export default {
    components: {
      "ank-smart-element-grid": AnkSEGrid,
      "ank-smart-element-grid-expand-button": AnkSEGridExpandButton
    }
  };
</script>

Aperçu du composant

Presentation expand button

# Propriétés

# `gridComponent (VueComponent, default: null) : Required`

# `iconClass (String, default: "")`

La classe de l’icône Font Awesome du bouton.

Par exemple, pour utiliser l’icône expand de Font Awesome :

<ank-smart-element-grid-expand-button
  :gridComponent="gridComponent"
  iconClass="fa fa-expand"
></ank-smart-element-grid-expand-button>

expand button icon class

# Événements

Pas d’événements.

# `ank-smart-element-grid-export-button`

# Présentation

Le composant ank-smart-element-grid-export-button est un bouton d’export des données de la grille ank-smart-element-grid sous un format xlsx. Il donne accès à un menu permettant de télécharger l’intégralité des données ou le sous ensemble de données sélectionnées dans le cas où la grille est checkable.

WARNING

Ce composant a besoin de la donnée gridComponent du slot, à injecter dans la propriété gridComponent du pager.

Voici un exemple d’utilisation de grille avec un bouton d’export en dessous de la grille:

Exemple d’utilisation

<template>
  <div>
    <ank-smart-element-grid collection="DEVBILL" :checkable="true" ref="grid">
      <template v-slot:gridFooter="{ gridComponent }">
        <ank-grid-pager :gridComponent="gridComponent"></ank-grid-pager>
        <ank-smart-element-grid-export-button
          :gridComponent="gridComponent"
          direction="bottom"
        ></ank-smart-element-grid-export-button>
      </template>
    </ank-smart-element-grid>
  </div>
</template>
<script>
  import AnkSEGrid from "@anakeen/user-interfaces/components/lib/AnkSmartElementGrid.esm";
  import AnkSEGridExportButton from "@anakeen/user-interfaces/components/lib/AnkSmartElementGridExportButton.esm";
  import AnkSEGridPager from "@anakeen/user-interfaces/components/lib/AnkSmartElementGridPager.esm";

  export default {
    components: {
      "ank-grid-pager": AnkSEGridPager,
      "ank-smart-element-grid": AnkSEGrid,
      "ank-smart-element-grid-export-button": AnkSEGridExportButton
    }
  };
</script>

Aperçu du composant

Presentation export button

# Propriétés

# `gridComponent (VueComponent, default: null) : Required`

# `iconClass (String, default: "")`

La classe de l’icône Font Awesome du bouton.

Par exemple, pour utiliser l’icône download de Font Awesome :

<ank-smart-element-grid-export-button
  :gridComponent="gridComponent"
  iconClass="fa fa-download"
></ank-smart-element-grid-export-button>

export button icon class

# `direction (String, default: "bottom")`

Direction dans laquelle le menu de sélection des options d’export s’ouvrira. Les valeurs possibles sont top, bottom, left et right. Pour plus d’informations, se référer à la documentation Kendo.

# `text (String, default: "")`

Texte à insérer dans le bouton, à côté de l’icône.

Par exemple, pour rajouter le texte Export :

<ank-smart-element-grid-export-button
  :gridComponent="gridComponent"
  text="Export"
  iconClass="fa fa-export"
></ank-smart-element-grid-export-button>

export button text

# Événements

exportDone: événement émis à la fin de l’export. ne contient aucune donnée.

# `ank-smart-element-grid-columns-button`

# Présentation

Le composant ank-smart-element-grid-columns-button est un bouton permettant de gérer les colonnes de la grille ank-smart-element-grid. Il donne accès à un dialogue permettant d’afficher/cacher les colonnes souhaitées.

WARNING

Ce composant a besoin de la donnée gridComponent du slot, à injecter dans la propriété gridComponent du pager.

Voici un exemple d’utilisation de grille avec un bouton de gestion des colonnes en dessous de la grille:

Exemple d’utilisation

<template>
  <div>
    <ank-smart-element-grid collection="DEVBILL" :checkable="true" ref="grid">
      <template v-slot:gridFooter="{ gridComponent }">
        <ank-grid-pager :gridComponent="gridComponent"></ank-grid-pager>
        <ank-smart-element-grid-columns-button :gridComponent="gridComponent"></ank-smart-element-grid-columns-button>
      </template>
    </ank-smart-element-grid>
  </div>
</template>
<script>
  import AnkSEGrid from "@anakeen/user-interfaces/components/lib/AnkSmartElementGrid.esm";
  import AnkSEGridColumnsButton from "@anakeen/user-interfaces/components/lib/AnkSmartElementGridColumnsButton.esm";
  import AnkSEGridPager from "@anakeen/user-interfaces/components/lib/AnkSmartElementGridPager.esm";
  export default {
    components: {
      "ank-smart-element-grid": AnkSEGrid,
      "ank-grid-pager": AnkSEGridPager,
      "ank-smart-element-grid-columns-button": AnkSEGridColumnsButton
    }
  };
</script>

Aperçu du composant

Presentation columns button

Presentation columns modal

# Propriétés

# `gridComponent (VueComponent, default: null) : Required`

# `iconClass (String, default: "")`

La classe de l’icône Font Awesome du bouton.

Par exemple, pour utiliser l’icône columns de Font Awesome :

<ank-smart-element-grid-columns-button
  :gridComponent="gridComponent"
  iconClass="fa fa-columns"
></ank-smart-element-grid-columns-button>

columns button icon class

# `title (String, default: "")`

Titre de la modale.

Par exemple, pour avoir le titre Modale de gestion des colonnes :

<ank-smart-element-grid-columns-button
  :gridComponent="gridComponent"
  title="Modale de gestion des colonnes"
></ank-smart-element-grid-columns-button>

columns button title

# Événements

Pas d’événements.

# Méthodes

# `export`

La méthode export permet d’exporter les données de la grille sous un format xlsx.

# Paramètres

options (Object): un objet portant les options d’export. Les clés prises en comptes sont :
- ignoreSelection (boolean, default : false): Dans le cas où des rangs sont sélectionnés lors de l’export, seules les données sélectionnées seront exportées si ignoreSelection est à false.
- ignoreFilters (boolean, default : false): Dans le cas où des colonnes sont filtrées lors de l’export, seules les données filtrées seront exportées si ignoreFilters est à false.
- ignoreHiddenColumns (boolean, default : false): Les colonnes cachées seront exportées uniquement si ignoreHiddenColumns est à false.
- columns (Array<Object>, default: []) : Le tableau des colonnes exportées.
filename (Function, default: (AnkSmartElementGrid) => null) : une fonction qui retourne le nom du fichier de sortie. Cette fonction prend en entrée la grille AnkSmartElementGrid

# Retour

Aucun retour.

# Exceptions

En cas d'erreur, émet l'événement gridError.

# Exemple

<template>
  <div>
    <button class="grid-export-button" @click="exportData">Télécharger l'export de la grille</button>
    <ank-smart-element-grid
      collection="DEVBILL"
      ref="grid"
      :columns="columns"
      @dataBound="selectSomeSmartElements"
    ></ank-smart-element-grid>
  </div>
</template>
<script>
import AnkSEGrid from "@anakeen/user-interfaces/components/lib/AnkSmartElementGrid.esm";
export default {
  components: {
    "ank-smart-element-grid": AnkSEGrid
  },
  data() {
    return {
      columns: [
        { field: "title", property: true },
        { field: "bill_author_display", title: "Auteur" },
        { field: "initid", property: true },
        { field: "bill_location", title: "Ville" }
      ]
    };
  },
  methods: {
    selectSomeSmartElements() {
      this.$refs.grid.selectSmartElements([1708, 1710, 1712]);
    },
    exportData() {
      this.$refs.grid
        .export({ ignoreFilters: true, ignoreSelection: false }, () => "myExportFile.xlsx")
        .then(() => {
          alert("L’export est un succès !");
        })
        .catch(() => {
          alert("L’export a échoué.");
        });
    }
  }
};
</script>

# `addFilter`

La méthode addFilter permet de filtrer la grille.

# Paramètres

filterConfiguration: L’objet de configuration du filtre Kendo.

# Retour

Un objet promesse permettant de contrôler le déroulement du filtrage.

# Exceptions

Aucune exception.

# Exemple

<template>
  <ank-smart-element-grid collection="DEVBILL" ref="grid" @gridReady="filterGrid" :columns="columns">
  </ank-smart-element-grid>
</template>
<script>
import AnkSEGrid from "@anakeen/user-interfaces/components/lib/AnkSmartElementGrid.esm";
export default {
  components: {
    "ank-smart-element-grid": AnkSEGrid
  },
  data() {
    return {
      columns: [
        { field: "title", property: true },
        { field: "bill_author_display", title: "Auteur" },
        { field: "bill_location", title: "Ville" }
      ]
    };
  },
  methods: {
    filterGrid() {
      this.$refs.grid
        .addFilter({ field: "bill_author_display", operator: "contains", value: "Jean" })
        .then(() => {
          alert("Le filtrage est un succès !");
        })
        .catch(() => {
          alert("Le filtrage a échoué.");
        });
    }
  }
};
</script>

# `refreshGrid`

La méthode refreshGrid permet de recharger la grille.

# Paramètres

onlyContent : si positionné à true, recharge seulement le contenu de la grille sans la configuration.
Par défaut, onlyContent est positionné à false.

# Retour

Aucun retour.

# Exceptions

Aucune exception.

# Exemple

<template>
  <ank-smart-element-grid collection="DEVBILL" ref="grid" @gridReady="refreshGrid"> </ank-smart-element-grid>
</template>
<script>
import AnkSEGrid from "@anakeen/user-interfaces/components/lib/AnkSmartElementGrid.esm";
export default {
  components: {
    "ank-smart-element-grid": AnkSEGrid
  },
  methods: {
    refreshGrid() {
      this.$refs.grid.refreshGrid();
    }
  }
};
</script>

# `addSort`

La méthode addSort permet de trier la grille.

# Paramètres

sortConfiguration: L’objet de configuration de tri Kendo.

# Retour

Un objet promesse permettant de contrôler le déroulement du tri.

# Exceptions

Aucune exception.

# Exemple

<template>
  <ank-smart-element-grid
    collection="DEVBILL"
    ref="grid"
    @gridReady="sortGrid"
    :columns="columns"
  ></ank-smart-element-grid>
</template>
<script>
import AnkSEGrid from "@anakeen/user-interfaces/components/lib/AnkSmartElementGrid.esm";
export default {
  components: {
    "ank-smart-element-grid": AnkSEGrid
  },
  data() {
    return {
      columns: [
        { field: "title", property: true },
        { field: "bill_author_display", title: "Auteur" },
        { field: "bill_location", title: "Ville" }
      ]
    };
  },
  methods: {
    sortGrid() {
      this.$refs.grid
        .addSort({ field: "bill_author_display", dir: "asc" })
        .then(() => {
          alert("Le filtrage est un succès !");
        })
        .catch(() => {
          alert("Le filtrage a échoué.");
        });
    }
  }
};
</script>

# `selectSmartElements`

La méthode selectSmartElements permet de sélectionner une ou plusieurs lignes d'une grille si elle est definie en checkable.

# Paramètres

smartElementIds(number[]|string): Tableau d’identifiants de Smart Elements ou ALL pour sélectionner tous les Smart Elements.
reverse(boolean):

Valeur par défaut : false Permet d’inverser la sélection de Smart Elements (ex: tous les Smart Elements sauf ceux indiqués dans le tableau smartElementIds).

# Retour

Aucun retour.

# Exceptions

Aucune exception.

# Exemple

Sélectionner les Smart Elements "1672", "1674" et "1677" :

<template>
  <ank-smart-element-grid
    collection="DEVBILL"
    ref="grid"
    @dataBound="selectSomeSmartElements"
    :columns="columns"
    :checkable="true"
  ></ank-smart-element-grid>
</template>
<script>
import AnkSEGrid from "@anakeen/user-interfaces/components/lib/AnkSmartElementGrid.esm";
export default {
  components: {
    "ank-smart-element-grid": AnkSEGrid
  },
  data() {
    return {
      columns: [
        { field: "title", property: true },
        { field: "initid", property: true },
        { field: "bill_author_display", title: "Auteur" },
        { field: "bill_location", title: "Ville" }
      ]
    };
  },
  methods: {
    selectSomeSmartElements() {
      this.$refs.grid.selectSmartElements([1672, 1674, 1677]);
    }
  }
};
</script>

Sélectionner tous les Smart Elements sauf "1672", "1674" et "1677" :

<template>
  <ank-smart-element-grid
    collection="DEVBILL"
    ref="grid"
    @dataBound="selectSomeSmartElements"
    :columns="columns"
    :checkable="true"
  ></ank-smart-element-grid>
</template>
<script>
import AnkSEGrid from "@anakeen/user-interfaces/components/lib/AnkSmartElementGrid.esm";
export default {
  components: {
    "ank-smart-element-grid": AnkSEGrid
  },
  data() {
    return {
      columns: [
        { field: "title", property: true },
        { field: "initid", property: true },
        { field: "bill_author_display", title: "Auteur" },
        { field: "bill_location", title: "Ville" }
      ]
    };
  },
  methods: {
    selectSomeSmartElements() {
      this.$refs.grid.selectSmartElements([1672, 1674, 1677], true);
    }
  }
};
</script>

Sélectionner tous les Smart Elements :

<template>
  <ank-smart-element-grid
    collection="DEVBILL"
    ref="grid"
    @dataBound="selectSomeSmartElements"
    :columns="columns"
    :checkable="true"
  ></ank-smart-element-grid>
</template>
<script>
import AnkSEGrid from "@anakeen/user-interfaces/components/lib/AnkSmartElementGrid.esm";
export default {
  components: {
    "ank-smart-element-grid": AnkSEGrid
  },
  data() {
    return {
      columns: [
        { field: "title", property: true },
        { field: "initid", property: true },
        { field: "bill_author_display", title: "Auteur" },
        { field: "bill_location", title: "Ville" }
      ]
    };
  },
  methods: {
    selectSomeSmartElements() {
      this.$refs.grid.selectSmartElements("ALL");
    }
  }
};
</script>

Sauvegarder la sélection de Smart Elements dans le localStorage:

<template>
  <ank-smart-element-grid
    collection="DEVBILL"
    ref="grid"
    @dataBound="selectSomeSmartElements"
    :columns="columns"
    :checkable="true"
  ></ank-smart-element-grid>
</template>
<script>
import AnkSEGrid from "@anakeen/user-interfaces/components/lib/AnkSmartElementGrid.esm";
export default {
  components: {
    "ank-smart-element-grid": AnkSEGrid
  },
  data() {
    return {
      columns: [
        { field: "title", property: true },
        { field: "initid", property: true },
        { field: "bill_author_display", title: "Auteur" },
        { field: "bill_location", title: "Ville" }
      ]
    };
  },
  methods: {
    selectSomeSmartElements() {
      this.$refs.grid.selectSmartElements([1672, 1674, 1677]);
      window.localStorage.setItem("grid-selected-rows", this.$refs.grid.selectedRows);
    }
  }
};
</script>

<template>
  <ank-smart-element-grid
    collection="DEVBILL"
    ref="grid"
    @gridReady="gridReady"
    :columns="columns"
  ></ank-smart-element-grid>
</template>
<script>
import AnkSEGrid from "@anakeen/user-interfaces/components/lib/AnkSmartElementGrid.esm";
export default {
  components: {
    "ank-smart-element-grid": AnkSEGrid
  },
  data() {
    return {
      columns: [
        { field: "title", property: true },
        { field: "bill_author_display", title: "Auteur" },
        { field: "bill_location", title: "Ville" }
      ]
    };
  },
  methods: {
    gridReady() {
      this.$refs.grid.selectSmartElements(["1672", "1761", "1666", "1669"]);
    }
  }
};
</script>

# `displayColumns`

La méthode displayColumns permet d'afficher ou de cacher des colonnes.

# Paramètres

Objet avec le format suivant :

{
  columnId: {
    display: boolean;
  }
}

# Retour

Un objet promesse qui se résout lorsque la configuration est sauvegardée.

# Exceptions

Aucune exception.

# Exemple

<template>
  <ank-smart-element-grid
    collection="DEVBILL"
    ref="grid"
    @afterConfig="setDisplayedColumns"
    :columns="columns"
  ></ank-smart-element-grid>
</template>
<script>
import AnkSEGrid from "@anakeen/user-interfaces/components/lib/AnkSmartElementGrid.esm";
export default {
  components: {
    "ank-smart-element-grid": AnkSEGrid
  },
  data() {
    return {
      columns: [
        { field: "title", property: true },
        { field: "bill_author_display", title: "Auteur" },
        { field: "bill_location", title: "Ville" }
      ]
    };
  },
  methods: {
    setDisplayedColumns() {
      this.$refs.grid
        .displayColumns({ bill_author_display: false, bill_location: false })
        .then(() => {
          console.log("Le filtrage a réussi.");
        })
        .catch(() => {
          console.log("Le filtrage a échoué.");
        });
    }
  }
};
</script>

# `setOverlay`

La méthode setOverlay permet d'afficher un composant en superposition de la grille.

# Paramètres

Un booléen permettant d'afficher ou non la superposition
Un objet construit avec le format suivant :

{
  component: VueComponent;
  options: Object;
  events: Record<string, () => void>;
}

Où :

component est le nom du composant de superposition ou la définition d'un composant vue.
options est un objet d'options à passer au composant de superposition.
events est la liste des fonctions de rappel des événements du composant de superposition.

# Retour

Aucun retour.

# Exceptions

Aucune exception.

# Exemple d'affichage du composant de superposition :

Dans un premier fichier, la grille avec le composant à afficher.

<template>
  <ank-smart-element-grid collection="DEVBILL" ref="grid" :columns="columns">
    <template v-slot:gridHeader>
      <button @click="showLoadingOverlay">Afficher le composant en superposition de la grille</button>
    </template>
  </ank-smart-element-grid>
</template>
<script>
import AnkSEGrid from "@anakeen/user-interfaces/components/lib/AnkSmartElementGrid.esm";
import MyCustomGridOverlay from "./MyCustomGridOverlay.vue";
export default {
  components: {
    "ank-smart-element-grid": AnkSEGrid
  },
  data() {
    return {
      columns: [
        { field: "title", property: true },
        { field: "bill_author_display", title: "Auteur" },
        { field: "bill_location", title: "Ville" }
      ]
    };
  },
  methods: {
    showLoadingOverlay() {
      this.$refs.grid.setOverlay(true, {
        component: MyCustomGridOverlay,
        options: {
          columns: this.columns // data à passer au composant de superposition
        },
        events: {
          myEvent: () => {
            this.$refs.grid.setOverlay(false); // Enlever l'affichage du composant
          }
        }
      });
    }
  }
};
</script>

Dans un deuxième fichier, le composant de superposition.

<template>
  <div>
    <div ref="overlay" class="grid-overlay">
      <p>Le composant de superposition de la grille</p>
      <button @click="myEmitEvent">Fermer le composant en superposition de la grille</button>
    </div>
  </div>
</template>
<script>
export default {
  methods: {
    myEmitEvent() {
      this.$emit("myEvent"); // Événement qui est récupéré par la fonction myEvent du premier fichier
    }
  }
};
</script>
<style lang="scss" scoped>
.grid-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  z-index: 9999;
  background-color: #ffffff;
  opacity: 0.7;
  width: 800px;
  height: 200px;
  border: solid;
  border-radius: 10px;
  margin: auto;
}
</style>

Composant de superposition

# `updateOverlay`

La méthode updateOverlay permet de mettre à jour les options du composant de superposition.

# Paramètres

Un objet d'option correspondant à l'objet qui a été créé.

# Retour

Aucun retour.

# Exceptions

Aucune exception.

# Exemple d'actualisation du composant de superposition de la grille :

Dans les exemples, sont en surbrillance les lignes qui diffèrent du setOverlay.

Dans un premier fichier, la grille avec le composant à afficher.

<template>
  <ank-smart-element-grid collection="DEVBILL" ref="grid" :columns="columns">
    <template v-slot:gridHeader>
      <button @click="showLoadingOverlay">Afficher le composant en superposition de la grille</button>
    </template>
  </ank-smart-element-grid>
</template>
<script>
import AnkSEGrid from "@anakeen/user-interfaces/components/lib/AnkSmartElementGrid.esm";
import MyCustomGridOverlay from "./MyCustomGridOverlay.vue";
export default {
  components: {
    "ank-smart-element-grid": AnkSEGrid
  },
  data() {
    return {
      columns: [
        { field: "title", property: true },
        { field: "bill_author_display", title: "Auteur" },
        { field: "bill_location", title: "Ville" }
      ]
    };
  },
  methods: {
    showLoadingOverlay() {
      this.$refs.grid.setOverlay(true, {
        component: MyCustomGridOverlay,
        options: {
          msg: "Affichage du composant de superposition de la grille."
        },
        events: {
          myEvent: () => {
            this.$refs.grid.updateOverlay({
              msg: "Le composant de superposition de la grille va bientôt disparaître."
            });
            setTimeout(() => {
              this.$refs.grid.setOverlay(false);
            }, 3000);
          }
        }
      });
    }
  }
};
</script>

Dans un second fichier, le composant de superposition.

<template>
  <div>
    <div ref="overlay" class="grid-overlay">
      <p>{{ options.msg }}</p>
      <button @click="myEvent">Fermer le composant en superposition de la grille</button>
    </div>
  </div>
</template>
<script>
export default {
  props: ["options"],
  methods: {
    myEvent() {
      this.$emit("myEvent");
    }
  }
};
</script>
<style lang="scss" scoped>
.grid-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  z-index: 9999;
  background-color: #ffffff;
  opacity: 0.7;
  width: 800px;
  height: 200px;
  border: solid;
  border-radius: 10px;
  margin: auto;
}
</style>

# `getExportFile`

La méthode getExportFile permet d'obtenir le contenu de l'export au format ".xlsx".

# Paramètres

Un objet précisant les options d'export construit avec le format suivant :

{
  ignoreSelection: boolean;
  ignoreFilters: boolean;
  ignoreHiddenColumns: boolean;
  columns: SmartGridColumn[];
}

Un objet optionnel, définissant la fonction de rappel appelée lors de la progression de l'export ainsi que l'intervalle de mise à jour des informations de l'export.

  {
    onProgress: (transactionInfo) => void, // Défaut, ne fait rien
    pollingInterval: number // Défaut 500 ms
  }

# Retour

Une promesse se résolvant sur le fichier d'export au format Blob.

# Exceptions

Aucune exception.

# Exemple

<template>
  <div>
    <ank-smart-element-grid
      collection="DEVBILL"
      ref="grid"
      :columns="columns"
      @dataBound="selectSomeSmartElements"
    ></ank-smart-element-grid>
    <button @click="exportFile">Afficher les détails de l'export</button>
  </div>
</template>
<script>
import AnkSEGrid from "@anakeen/user-interfaces/components/lib/AnkSmartElementGrid.esm";
export default {
  components: {
    "ank-smart-element-grid": AnkSEGrid
  },
  data() {
    return {
      columns: [
        { field: "title", property: true },
        { field: "bill_author_display", title: "Auteur" },
        { field: "bill_location", title: "Ville" }
      ]
    };
  },
  methods: {
    selectSomeSmartElements() {
      this.$refs.grid.selectSmartElements([1708, 1711, 1712]);
    },

    exportFile() {
      const options = {
        ignoreSelection: false,
        ignoreFilters: false,
        ignoreHiddenColumns: false,
        columns: [
          {
            abstract: true,
            field: "title"
          }
        ]
      };
      const exportPromise = this.$refs.grid.getExportFile(options, {
        onProgress: transaction => {
          if (!Array.isArray(transaction.details)) {
            console.log(transaction.details);
          }
        }
      });
      exportPromise.then(blobFile => {
        console.log("Fichier exporté", blobFile);
      });
    }
  }
};
</script>

# Cas d’usages

# Recherche générale

Le module de recherche générale fournit une version augmentée du composant Smart Element Grid qui prend en charge nativement l’affichage des résultats d’une recherche générale.

Important

Pour utiliser ce nouveau composant, il est nécessaire d’installer au préalable le module Anakeen Platform 4 fulltext-search.

# Utilisation

<template>
  <ank-fulltext-smart-element-grid collection="DEVBILL"></ank-fulltext-smart-element-grid>
</template>
<script>
import AnkFulltextSmartElementGrid from "@anakeen/fulltext-search/components/lib/AnkFulltextSmartElementGrid.esm";
export default {
  components: {
    AnkFulltextSmartElementGrid
  }
};
</script>

En plus des fonctionnalités de la Smart Element Grid standard, ce composant fournit les propriétés suivantes :

# `fulltextSearch (Object)`

Cet objet contient les deux clés suivantes :

fulltextSearch.searchDomain (String): identifiant du domaine de recherche
fulltextSearch.searchPattern (String): motif recherché

Utilisation de la recherche générale avec un champ de saisie personnalisé :

<template>
  <div>
    <input type="text" v-model="configFulltext.searchPattern" />
    <ank-fulltext-smart-element-grid
      collection="DEVBILL"
      :fulltextSearch="configFulltext"
    ></ank-fulltext-smart-element-grid>
  </div>
</template>
<script>
import AnkFulltextSmartElementGrid from "@anakeen/fulltext-search/components/lib/AnkFulltextSmartElementGrid.esm";
export default {
  components: {
    AnkFulltextSmartElementGrid
  },
  data() {
    return {
      configFulltext: {
        searchDomain: "myDomain",
        searchPattern: ""
      }
    };
  }
};
</script>

Important

Il est nécessaire de s’assurer de la cohérence entre la collection donnée à la grille et la configuration du domaine de recherche utilisé.

Astuce

Si le composant Smart Element Grid est utilisé en relation avec le composant Smart Criteria, il n’est pas nécessaire d’utiliser la Smart Element Grid fournit par le module de recherche générale. La Smart Element Grid standard peut être alors utilisée, le filtre généré par le composant Smart Criteria prenant en charge la recherche générale.

← Smart Element Smart Element List →

# Smart Element Grid Component

# Description

# Initialisation

# Configuration des colonnes d’une grille

# Configuration d’une colonne abstraite de la grille

# Configuration de la colonne d’actions de la grille

# Propriétés

# collection (String)

# controller (String)

# defaultExportButton (Boolean) Jusqu'à la version 2021.1.1

# exportOptions (Object) À partir de la version 2021.1.2

# contextTitles (Boolean, default: true)

# contextTitlesSeparator (String, default: "-")

# emptyCellText (String, default: "")

# sortable (Boolean | SmartGridSortConfig, default: DEFAULT_SORT)

# filterable (Boolean ou Object, default: true)

# pageable (Boolean | SmartGridPageSize, default: DEFAULT_PAGER)

# refresh (Boolean, default: false)

# autoScrollTop (Boolean, default: true])

# reorderable (Boolean, default: false)

# resizable (Boolean, default: true)

# checkable (Boolean, default: false)

# persistStateKey (String, default:"")

# customData (Object)

# kendoProps

# smartCriteriaValue (object, default: {})

# filterOption (FilterOptions <1|2|4|8>, default: FilterOptions.NOCASE = 2)

# Événements

# gridReady

# Déclenchement

# Paramètres passés au callback

# beforeConfig

# Déclenchement

# Paramètres passés au callback

# Exemples

# afterConfig

# Déclenchement

# Paramètres passés au callback

# beforeContent

# Déclenchement

# Paramètres passés au callback

# Exemples

# afterContent

# Déclenchement

# Paramètres passés au callback

# Exemples

# beforeGridCellRender

# Déclenchement

# Paramètres passés au callback

# rowClick

# Déclenchement

# Paramètres passés au callback

# rowActionClick

# Déclenchement

# Paramètres passés au callback

# beforeDocidLink

# Déclenchement

# Paramètres passés au callback

# Exemples

# beforeGridExport

# Déclenchement

# Paramètres passés au callback

# Exemples

# beforePollingGridExport

# Déclenchement

# Paramètres passés au callback

# dataBound

# Déclenchement

# Paramètres passés au callback

# Exemples

# selectionChange

# Déclenchement

# Paramètres passés au callback

# Exemples

# afterRestoreConfiguration

# Déclenchement

# Paramètres passés au callback

# afterSaveConfiguration

# Déclenchement

# Paramètres passés au callback

# `collection (String)`

# `controller (String)`

# `defaultExportButton (Boolean)` Jusqu'à la version 2021.1.1

# `exportOptions (Object)` À partir de la version 2021.1.2

# `contextTitles (Boolean, default: true)`

# `contextTitlesSeparator (String, default: "-")`

# `emptyCellText (String, default: "")`

# `sortable (Boolean | SmartGridSortConfig, default: DEFAULT_SORT)`

# `filterable (Boolean ou Object, default: true)`

# `pageable (Boolean | SmartGridPageSize, default: DEFAULT_PAGER)`

# `refresh (Boolean, default: false)`

# `autoScrollTop (Boolean, default: true])`

# `reorderable (Boolean, default: false)`

# `resizable (Boolean, default: true)`

# `checkable (Boolean, default: false)`

# `persistStateKey (String, default:"")`

# `customData (Object)`

# `smartCriteriaValue (object, default: {})`

# `filterOption (FilterOptions <1|2|4|8>, default: FilterOptions.NOCASE = 2)`

# `gridReady`

# `beforeConfig`

# `afterConfig`

# `beforeContent`

# `afterContent`

# `beforeGridCellRender`

# `rowClick`

# `rowActionClick`

# `beforeDocidLink`

# `beforeGridExport`

# `beforePollingGridExport`

# `dataBound`

# `selectionChange`

# `afterRestoreConfiguration`

# `afterSaveConfiguration`

# `beforeSaveConfiguration`

# `beforeRestoreConfiguration`

# `gridError`

# `pageChange`

# `cellTemplate`

# `ank-grid-pager`

# `gridComponent (AnkSmartElementGrid, default: null) : Required`

# `ank-smart-element-grid-expand-button`

# `gridComponent (VueComponent, default: null) : Required`

# `iconClass (String, default: "")`

# `ank-smart-element-grid-export-button`

# `gridComponent (VueComponent, default: null) : Required`

# `iconClass (String, default: "")`

# `direction (String, default: "bottom")`

# `text (String, default: "")`

# `ank-smart-element-grid-columns-button`

# `gridComponent (VueComponent, default: null) : Required`

# `iconClass (String, default: "")`

# `title (String, default: "")`

# `export`

# `addFilter`

# `refreshGrid`

# `addSort`

# `selectSmartElements`