Manuel de référence

# Smart Element List Component

# Description

Le composant Smart Element List (SE List) permet d'afficher une collection de Smart Element (SE).

Le terme collection fait ici référence à un ensemble de SE correspondant à une même Smart Structure (SST) ou résultant d'une recherche par exemple.

Le composant Smart Element List (SE List) peut être assimilé au cas particulier d'une Smart Element Grid comportant une seule colonne. C'est pourquoi ce composant utilise le composant Smart Element Grid en interne. Ainsi, certaines propriétés correspondent à une personnaliation du composant de grille interne, comme c'est le cas de la propriété controller par exemple.

SEList

# Initialisation

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

<template>
  <div>
    <ank-smart-element-list ref="listComponent" smart-collection="IUSER" />
  </div>
</template>
<script>
import AnkSmartElementList from "@anakeen/user-interfaces/components/lib/AnkSmartElementList.esm";

export default {
  components: {
    AnkSmartElementList: AnkSmartElementList
  }
};
</script>

# Propriétés

Plusieurs propriétés sont mises à disposition permettant la configuration du composant.

  • smart-collection : l'identifiant de la collection à afficher. La collection peut référencer une recherche, un dossier enregistrée ou encore une Smart Structure. Pour ce dernier cas, tous les Smart Elements de la Smart Structure sont les élements de la collection.

  • label : libellé textuel de la collection à afficher

  • page: naviguer vers la page n° x de la SE List au chargement du composant.

  • selectable: indique si la liste de Smart Elements est en lecture seule. Par défaut, selectable est à true

  • content-url : l'url permettant d'obtenir la liste des SE à afficher. Les sections {controller} et {collection} sont respectivement remplacées par le nom du controleur et par l'identifiant de la collection. Par défaut, la propriété vaut "/api/v2/grid/controllers/{controller}/content/{collection}"

  • attached-data: liste d'objet permettant de récupérer dans les données de la liste des données supplémentaires relative à la collection consultée.
    Par exemple:

<template>
  <ank-smart-element-list smart-collection="IUSER" :attached-data="attachedData" />
</template>
<script>
export default {
  data() {
    return {
      attachedData: [{ field: "us_lname" }, { field: "us_fname" }, { field: "fromid", property: true }]
    };
  }
};
</script>

  • controller: permet d'associer un contrôleur de grille à la liste.

  • pageable: configure la pagination. Si la valeur false est passée, la pagination est désactivée. Si la valeur true est passée, les valeurs par défaut seront alors utilisées.
    La propriété pageable peut contenir les informations suivantes :

    • pageSizes (number[] | boolean, default: [10, 20, 50]): les tailles de page disponible dans le sélecteur. Si false est donnée, le sélecteur n'apparaît pas
    • info (boolean, default :true): Permet d'afficher ou non les informations concernant le nombre d'éléments affichés et le nombre d'éléments total
    • showCurrentPage, (string | boolean, default: false): affiche la page courante sur le nombre de page total. Si la valeur input est donnée, alors le champ affichant la page courante est modifiable par l'utilisateur
    • buttonCount (number, default: 0): affiche un nombre de bouton donné permettant de changer de page

  • sort: tri les éléments de la liste. La propriété prend un objet contenant les informations suivantes :

    • field (string, default: 'title'): champ sur lequel porte le tri
    • dir (string, default :'asc'): sens du tri. ('asc' pour un tri croissant et 'desc' pour un tri décroissant))

  • value: identifiant de l'élément sélectionné. Il est possible synchroniser la valeur de l'élément sélectionné à l'aide de la directive v-model.
    La propriété n'est utilisable que si selectable est positionné à true (valeur par défaut)

# Événements

Les événements suivants permettent d'écouter certaines actions du composant.

# itemSelected

# Déclenchement

Est déclenché lorsqu'un SE est sélectionné dans la liste affichée.
Cet événement n'est pas déclenché lorsque selectable est à false.

# Paramètres passés au callback

  • listEvent: l'évènement émis
    • data : élément sélectionné

# Exemple

# Ouverture d'un Smart Element dans le navigateur
<template>
  <div>
    <ank-smart-element-list ref="listComponent" smart-collection="IUSER" @itemSelected="onItemSelected" />
  </div>
</template>
<script>
import AnkSmartElementList from "@anakeen/user-interfaces/components/lib/AnkSmartElementList.esm";

export default {
  components: {
    AnkSmartElementList: AnkSmartElementList
  },
  methods: {
    onItemSelected(listEvent) {
      const seId = listEvent.data.properties.initid;
      window.open(`/api/v2/smart-elements/${seId}.html`);
    }
  }
};
</script>

# filterChange

# Déclenchement

Est déclenché lors de chaque changement du champ filtre de la liste

# Paramètres passés au callback

  • listEvent: l'évènement émis
    • data : élément sélectionné
      • filterInput: valeur du filtre
      • filter:
        • field: champ filtré
        • operator: opérateur de filtre
        • value: valeur du filtre

# filterInput

# Déclenchement

Est déclenché lors de saisie dans le champ filtre de la liste

# Paramètres passés au callback

  • listEvent: l'évènement émis
    • data : élément sélectionné
      • filterInput: valeur du filtre

# Filtrage de la liste à chaque input

    <ank-se-list ref="seList" :smartCollection="'DEVBILL'" @filterInput="filterInput" />

filterInput(e) {
  const filterInput = e.data.filterInput;
  this.$refs.seList.filterList(filterInput);
}

# pageChange

# Déclenchement

Est déclenché lorsque un changement de page est effectué

# Paramètres passés au callback

  • listEvent: l'évènement émis
    • data :
      • page: représentation formalisme données
        • skip: Décalage du nombre de données
        • take: Nombre de données demandé
        • total: Total du nombre des donnés
      • pages: représentation formalisme page
        • page: Numéro de la page
        • size: Taille de la page
        • total: Total du nombre de pages

Les deux champs listEvent.data.page et listEvent.data.pages sont deux représentations du même état de pagination.

# beforeContent

# Déclenchement

Est déclenché lorsque la liste effectue une requête au serveur pour récupérer les éléments. L'événement peut être annulé.

# Paramètres passés au callback

  • listEvent: l'évènement émis
    • data :
      • url: url de contenu de la liste
      • queryParams: données envoyées dans la requête
    • preventDefault(): annule l'évènement

# dataBound

Est déclenché lorsque une requête au serveur est terminée.

# Slots

Le composant SE List peut être également personnalisé par l'intermédiaire de slots.

Le slot nommé header permet de personnaliser le contenu de l'entête de liste.

# Ajout d'un bouton de déconnexion dans l'entête du composant SE List

    <ank-se-list smartCollection="DEVBILL">
        <template v-slot:header>
            <ank-logout></ank-logout>
            <span>Ma super liste</span>
        </template>
    </ank-se-list>

# label

Le slot nommé label permet de personnaliser l'affichage du libellé de la liste.

# Ajout d'une icône devant le libellé de la SE List

    <ank-se-list ref="seList" smartCollection="DEVBILL">
        <template v-slot:label="{ label }">
            <span><i class="fa fa-list"></i> <span>{{label}}</span></span>
        </template>
    </ank-se-list>

Le slot nommé search permet de personnaliser l'affichage du champ de recherche.

# Ajout d'un composant dropdown devant le champ de recherche SE List

    <ank-se-list ref="seList" smartCollection="MY_ANIMAL">
        <template v-slot:search="{ filter }">
            <div>
                <my-dropdown-selector></my-dropdown-selector>
                <input type="text" @change="filter($event.target.value)"/>
            </div>
        </template>
    </ank-se-list>

# item

Le slot nommé item permet de personnaliser l'affichage de chaque élément de la liste.

# Affichage d'un smart field pour chaque élément de la SE List

<template>
  <ank-se-list smart-collection="IUSER" :attachedData="otherData">
    <template v-slot:item="{ item }">
      <span>{{ item.attributes.us_fname.displayValue }}</span>
    </template>
  </ank-se-list>
</template>
<script>
export default {
  data() {
    return {
      otherData: [
        {
          field: "us_fname"
        }
      ]
    };
  }
};
</script>

Le slot nommé footer permet de personnaliser l'affichage du pied de liste.

# pager

Le slot nommé pager permet de personnaliser l'affichage du paginateur de la liste.

# Méthodes

# setCollection

Spécifie la collection à afficher

# Arguments

collection : Identifiant de la collection

# Retour

Aucun

# Exceptions

# filterList

Filtre la liste de SE

# Arguments

filtre

: Une chaîne de caractères représentant le filtre à appliquer sur la liste

# Retour

Aucun

# Exceptions

Aucune

# refreshList

Met à jour la liste des SE.

# Arguments

Aucun

# Retour

Promise qui est résolu lorsque la list est rechargée

# Exceptions

Aucune

# selectSmartElement

Sélectionne un élément de la liste de SE.

# Arguments

seId : identifiant du Smart Element sélectionné.

Avertissements

La propriété selectable du composant doit être à true.

# Retour

Aucun

# Exceptions

Aucune

# clearListFilter

Vide le champ de saisie de filtrage de la liste de SE.

# Arguments

Aucun

# Retour

Retourne la liste de SE sans filtre.

# Exception

Aucune

# scrollToActiveItem

navigue jusqu'à l'élément sélectionné de la liste de SE.

# Arguments

Aucun

# Retour

Aucun

# Exception

Aucune

# Exemples

# Affichage des Smart Elements de la Smart Structure "DEVBILLL"

    <ank-se-list ref="seList" smart-collection="DEVBILL" />

# Affichage d'une collection "MyCollection" après initialisation du composant

    <ank-se-list ref="seList" />

const list = this.$refs.seList;
list.setCollection("MyCollection");

# Affichage d'une collection "MyCollection" avec gestion d'événements et non sélectionnable

<template>
  <div>
    <ank-smart-element-list
      ref="myCollectionRef"
      smart-collection="IUSER"
      :selectable="false"
      @itemSelected="onSelectListItem"
      @pageChange="afterPageChange"
      @filterChange="onListFilterChange"
    />
  </div>
</template>
<script>
import AnkSmartElementList from "@anakeen/user-interfaces/components/lib/AnkSmartElementList.esm";

export default {
  components: {
    AnkSmartElementList: AnkSmartElementList
  },
  methods: {
    onSelectListItem: function(event) {
      console.log(event);
    },
    afterPageChange: function(event) {
      console.log(event);
    },
    onListFilterChange: function(event) {
      console.log(event);
    }
  }
};
</script>

← Smart Element Tab →