{% block name %}Groupe de liste{% endblock %}

{% block using %}
<p>Configuration appliquée à un groupe de listes dans le projet.<br />
Elle surcharge les définitions déclarées au niveau 'global'. <br />
Localisation du fichier de configuration : <code>config/packages/oka-lists.yaml</code></p>


{% include 'pages/configuration/groupe/_code.html.twig'  %}

{% endblock %}


{% block preview %}
    <h4>Identification du groupe</h4>
    <p>Référencer un groupe de liste <code>mon_groupe_liste:</code></p>
    <h4>Généralités</h4>
    <table class="oka-table">
        <thead>
            <tr>
                <th class="-left">Paramètre</th>
                <th>Valeurs attendues</th>
                <th>Valeur par défault</th>
                <th class="-left">Définition</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="-left">max_per_page</td>
                <td>nombre</td>
                <td>10</td>
                <td class="-left">Nombre d'éléments par page</td>
            </tr>
            <tr>
                <td class="-left">sort_mode</td>
                <td>mono/multi</td>
                <td>mono</td>
                <td class="-left">définit le mode de tri</td>
            </tr>
            <tr>
                <td class="-left">type</td>
                <td>paginate/lazy</td>  
                <td>paginate</td>
                <td class="-left">définit le mode de chargement des données</td>
            </tr>
            <tr>
                <td class="-left">list_mode</td>
                <td>table/cards</td>
                <td>table</td>
                <td class="-left">définit le mode d'affichage</td>
            </tr>
            <tr>
                <td class="-left">extra_class</td>
                <td>string</td>
                <td>Tableau: --<br>Vignette: <code>grid-240</code></td>
                <td class="-left">
                    Tableau: Chaîne de caractère des <a href="http://design-system.oka.com/?path=/docs/components-organisms-tables--docs" target="_blank">'variants'</a> de <code>oka-table</code><br>
                    Vignettes: Layout de la <a href="http://design-system.oka.com/?path=/docs/layouts-templates-grids-auto--docs" target="_blank">grille</a> du container autour des vignettes
                </td>
            </tr>
            <tr>
                <td class="-left">body_extra_class</td>
                <td>string</td>
                <td>--</td>
                <td class="-left">
                    Tableau: aucun impact, option ignoré<br>
                    Vignette: ajout de <a href="http://design-system.oka.com/?path=/docs/components-organisms-cards--docs">modifier</a> au <code>oka-card</code><br>
                </td>
            </tr>
            <tr>
                <td class="-left">onclick</td>
                <td>string</td>
                <td>--</td>
                <td class="-left">Javascript ajouté à <code>onclick</code>. Il est possible de récupérer les valeurs d'une colonne avec : <code>{id_colonne}</code></td>
            </tr>
            <tr>
                <td class="-left">controller</td>
                <td>string</td>
                <td>--</td>
                <td class="-left">
                    Tableau: ajoute <code>data-controller</code> au <code>tbody</code><br>
                    Vignettes: ajoute <code>data-controller</code> au <code>grid</code>
                </td>
            </tr>
            <tr>
                <td class="-left">action</td>
                <td>string</td>
                <td>--</td>
                <td class="-left">
                    Tableau: ajoute <code>data-action</code> au <code>tbody</code><br>
                    Vignettes: ajoute <code>data-action</code> au <code>grid</code>
                </td>
            </tr>
            <tr>
                <td class="-left">line_controller</td>
                <td>string</td>
                <td>--</td>
                <td class="-left">
                    Tableau: ajoute <code>data-controller</code> à chaque <code>td</code><br>
                    Vignettes: ajoute <code>data-controller</code> au <code>oka-card</code>
                </td>
            </tr>
            <tr>
                <td class="-left">line_action</td>
                <td>string</td>
                <td>--</td>
                <td class="-left">
                    Tableau: ajoute <code>data-action</code> à chaque <code>td</code><br>
                    Vignettes: ajoute <code>data-action</code> au <code>oka-card</code>
                </td>
            </tr>
            <tr>
                <td class="-left">filters_render</td>
                <td>boolean</td>
                <td>true</td>
                <td class="-left">Définit si les filtres doivent être affichés par défaut ou non</td>
            </tr>
            <tr>
                <td class="-left">export_type</td>
                <td>string</td>
                <td>--</td>
                <td class="-left">Définit le type d'export à utiliser avec le groupe de liste</td>
            </tr>
            <tr>
                <td class="-left">dataset</td>
                <td>tableau clé/valeur</td>
                <td>[]</td>
                <td class="-left">Définit les dataset qui sera ajouté à chaque lignes.</td>
            </tr>
        </tbody>
    </table>

    <div class="oka-spacer -md"></div>
    <h4>Définition des colonnes</h4>
    <p>Sous le groupe <code>column :</code> est défini chaque colonne à affichée</p>
    

    <ul>
        <li>id : référence unique (dans le jeu de données de la liste)</li>
        <li>display : label </li>
        <li>place : positionnement (1 : gauche , 2 , 3 .... -1 : droite)</li>
        <li>size : string permettant d'ajouter des classes aux colonnes (appliqués qu'au header)</li>
        <li>align : string permettant d'ajouter des classes aux colonnes (appliqués au header et body)</li>
        <li>controller : permet l'ajout de controller stimulus à chaque cellule de cette colonne</li>
        <li>action : permet l'ajout d'action stimulus à chaque cellule de cette colonne</li>
    </ul>


    <h4>Définition du tri</h4>
    <p>Sous le groupe <code>sort :</code> est défini les colonnes triables</p>
    <ul>
        <li>field : id de la colonne à trié</li>
        <li>direction : (facultatif) tri par défaut : asc / desc </li>
    </ul>

    {% include 'pages/configuration/global/_table-template.html.twig'  %}
{% endblock %}


{% block code %}

{% endblock %}

{% block config %}

{% endblock %}