MEG - VSR - Générateur de template - Structure mst incorrecte

[spelhate]

Exemple pour le composant image :

 {{#photo}}
    <div class="imageComponent template-component mb-2"
      data-value="photo"
      data-type-selector="field"
      data-component="imageComponent"
    >
    <img src="{{#photo}}{{photo}}{{/photo}}" class="img img-responsive" style="max-height:300px;"/>
    </div>
    {{/photo}}

Pour l'attribut src, on devrait simplement avoir src="{{photo}}"

Autre exemple pour une liste où le code suivant créer une liste par commune (et non par EPCI) : une boucle EPCI et une boucle commune

    {{#communes}}
    <div class="listComponent template-component mb-2"
      data-type-selector="liField"
      data-value="communes"
      data-sub-value="nom_commune"
      data-component="listComponent"
    >
      <ul style="list-style-type: disc;margin-bottom:10px;">

            {{#communes}}
            <li>{{#nom_commune}}{{nom_commune}}{{/nom_commune}}</li>
            {{/communes}}

      </ul>
    </div>
    {{/communes}}

Il faut remplacer

 {{#communes}}
            <li>{{#nom_commune}}{{nom_commune}}{{/nom_commune}}</li>
            {{/communes}}

par

{{#nom_commune}} <li>{{nom_commune}}</li>{{/nom_commune}}

car la boucle sur les communes est déjà effectuée plus haut

[Gaetanbrl]

Modification apportée :

• Pour une liste avec un champ JSON :

      <ul style="list-style-type: disc;margin-bottom:10px;">
          {{#communes}}<li>{{nom_commune}}</li>{{/communes}}
      </ul>

• Pour une liste avec un champ liste non JSON :

      <ul style="list-style-type: disc;margin-bottom:10px;">
          {{#communes}}<li>{{.}}</li>{{/communes}}
      </ul>

Pour une liste avec plusieurs champs du JSON et un text libre :

      <ul style="list-style-type: disc;margin-bottom:10px;">
          {{#communes}}<li>{{nom_commune}} test {{code_insee}}</li>{{/communes}}
      </ul>

Pour une photo :

    {{#photo}}
    <div class="imageComponent template-component mb-2"
      data-value="photo"
      data-type-selector="field"
      data-component="imageComponent"
    >
    <img src="{{photo}}" class="img img-responsive" style="max-height:300px;"/>
    </div>
    {{/photo}}

[lecault]

Ok pour le type photo mais on a ce soucis sur tous les types.

Exemple pour le titre :

    {{#nom}}
    <div class="textH1Component template-component mb-2" id="404d0702-0c6a-4f18-9bf7-763ae819aee4"
      data-type-selector="field"
      data-color="#000000"
      data-value="nom"
      data-component="textH1Component"
    >
        <!--
        Variable : nom
        Prop : color
        -->
        <h3 style="font-weight:bold; color:#000000;">{{#nom}}{{nom}}{{/nom}}</h3>
    </div>{{/nom}}

Pour le sous-titre :

    {{#code_rne}}
    <div class="TextH3Component template-component mb-2" id="a016ebb5-b9da-41e8-b011-e68c8510203c"
      data-type-selector="field"
      data-color="#000000"
      data-value="code_rne"
      data-component="TextH3Component"
    >
        <!--
        Variable : nom
        Prop : color
        -->
        <h4 style="font-weight:bold; color:#000000;">{{#code_rne}}{{code_rne}}{{/code_rne}}</h4>
        </div>{{/code_rne}}

Pour le bouton :

    {{#photo}}
    <div class="linkComponent template-component mb-2"
      data-type-selector="field"
      data-value="photo"
      data-text="Accéder"
      data-icon="undefined"
      data-color="#ffffff"
      data-bg-color="#345266"
      data-component="linkComponent"
    >
      <a href="{{#photo}}{{photo}}{{/photo}}" target="_blank" class="btn" style="background-color: #345266;color:#ffffff;">
        <i class="undefined"></i>
        Accéder
      </a>
    </div>
    {{/photo}}

Pour le chiffre clé :

    {{#code_postal}}
    <div class="numberComponent template-component mb-2"
      style="margin: 12px 0px;display:flex; align-items:center; color:#009688; justify-content:flex-start;background: #f4f4f4; padding: 14px;border-radius: 5px;width: fit-content;"
      data-type-selector="field"
      data-value="code_postal"
      data-text=""
      data-icon="undefined"
      data-color="#009688"
      data-bg-color="#f4f4f4"
      data-component="numberComponent"
      >
      <div style="font-size: 40px;"><i class="undefined"></i></div>
      <div style="line-height: 1.2;padding: 0px 15px;">
            <div style="font-size: 24px;font-weight: bold;">{{#code_postal}}{{code_postal}}{{/code_postal}}</div>
            <div></div>
        </div>
    </div>
    {{/code_postal}}

Et pour le type texte :

    {{#adresse}}
    <div class="textTextComponent template-component mb-2"
      data-type-selector="field"
      data-value="adresse"
      data-component="textTextComponent"
    >
        <p>{{#adresse}}{{adresse}}{{/adresse}}</p>
    </div>
    {{/adresse}}

Pour le type liste, il serait cohérent de mettre les balises {{#communes}} et {{/communes}} au niveau du div comme pour les autres types. D'ailleurs @spelhate proposait que la boucle de l'ul porte sur le champ json {{nom_commune}} et non {{communes}}. Dans le cas de multiples champs, ça me semble compliqué à gérer. A rediscture

La j'ai :

    <div class="listComponent template-component mb-2"
      data-type-selector="liField"
      data-value="communes"
      data-sub-value="nom_commune,:,code_insee"
      data-component="listComponent"
    >
      <ul style="list-style-type: disc;margin-bottom:10px;">
          {{#communes}}<li>{{nom_commune}} : {{code_insee}}</li>{{/communes}}
      </ul>
    </div>

[Gaetanbrl]

Pour le type liste, il serait cohérent de mettre les balises {{#communes}} et {{/communes}} au niveau du div comme pour les autres types

Si on met{{#communes}} avant le <ul> on aura une boucle inutile (vu lundi) sur toute la div. Je me dois de préciser que la gestion des listes avec le générateur est loin d'être simple. En l'état c'est fonctionne, vous confirmez ?

Question :

Pour les autres syntaxes, ce n'est pas bloquant. Je pense qu'au pire c'est une condition inutile. Avez-vous constaté un problème majeur qui impacte le rendu du template ?