Affichage d'un panneau de contenu supplémentaire basé sur un bloc booléen dans l'interface de Wagtail Editor

Question

Je souhaite ajouter un bloc booléen à mon modèle Wagtail et afficher un champ de panneau de contenu uniquement s'il est coché. J'ai trouvé comment ajouter un bloc booléen et rendre le contenu dans le modèle en fonction de sa valeur, mais pas comment contrôler l'interface de l'éditeur avec lui. Voici mon modèle. Je veux montrer le block de retenue de date, holdover_from, seulement quand holdover boolean est vérifié.

class AgendaPage(Page): 
author= models.CharField(max_length=255) 
date = models.DateField('Post date') 
agenda = StreamField([ 
    ('agenda_item', blocks.StreamBlock([ 
     ('item_title', blocks.TextBlock()), 
     ('item_text', blocks.TextBlock()), 
     ('mtg_doc', blocks.StructBlock([ 
      ('doc_description', blocks.TextBlock()), 
      ('doc_link', blocks.TextBlock()), 
      ('submitted_late', blocks.BooleanBlock(required=False, help_text='Submitted Late')), 
      ('heldover', blocks.BooleanBlock(required=False, help_text='Held Over')), 
      ('heldover_from', blocks.DateBlock(required=False, help_text="Held Over From") 

     ])) 
     ] 
    )) 
]) 




content_panels = Page.content_panels + [ 
    FieldPanel('author'), 
    FieldPanel('date'), 
    StreamFieldPanel('agenda'), 

] 

(Et après je comprendre cela, je veux savoir si je peux le faire nécessaire, mais seulement si heldover est cochée, non pour l'ensemble streamblock)

{% for block in self.agenda %} 
    {% if block.block_type == "agenda_item" %} {# will always be true, but included here for clarity #} 
    <li> 
    {% for subblock in block.value %} 
     {% if subblock.block_type == "item_title" %} 
      <h2>{{subblock.value}}</h2> 
     {% elif subblock.block_type == "item_text" %} 
       <p>{{subblock.value}}</p> 
     {% elif subblock.block_type == "mtg_doc" %} 
       <p><a href="{{subblock.value.doc_link}}">{{subblock.value.doc_description}}</a><br /> 
      {% ifequal subblock.value.submitted_late True %} 
      (Submitted Late) 
      {% endifequal %} 
       </p> 
     {% endif %} 
    {% endfor %} 
</li> 
    {% endif %} 
{% endfor %} 

Answer 1

Vous pouvez le faire en remplaçant le gabarit de formulaire pour StructBlock comme décrit dans http://docs.wagtail.io/en/v1.6.2/topics/streamfield.html#custom-editing-interfaces-for-structblock - bien qu'il nécessite un bidouillage avec des détails relativement bas du balisage de formulaire.

D'abord, tirer la définition du bloc mtg_doc dans sa propre classe pour un peu plus de répit:

class MtgDocBlock(blocks.StructBlock): 
    doc_description = blocks.TextBlock() 
    doc_link = blocks.TextBlock() 
    submitted_late = blocks.BooleanBlock(required=False, help_text='Submitted Late') 
    heldover = blocks.BooleanBlock(required=False, help_text='Held Over') 
    heldover_from = blocks.DateBlock(required=False, help_text="Held Over From") 

    class Meta: 
     form_template = 'myapp/block_forms/mtg_doc.html' 


class AgendaPage(Page): 
    ... 
    agenda = StreamField([ 
     ('agenda_item', blocks.StreamBlock([ 
      ('item_title', blocks.TextBlock()), 
      ('item_text', blocks.TextBlock()), 
      ('mtg_doc', MtgDocBlock()) 
     ]) 
    ]) 

Ici, j'ai ajouté un paramètre form_template à la classe de bloc, qui spécifie un autre modèle à utiliser pour rendre la forme à la place de Wagtail construit en un. Puisque nous ne voulons pas changer le rendu réel, nous pouvons simplement inclure le modèle intégré (situé au wagtailadmin/block_forms/struct.html) et y ajouter un peu de comportement JS. Dans templates/myapp/block_forms/mtg_doc.html:

{% include "wagtailadmin/block_forms/struct.html" %} 

<script> 
    // all fields of the block have a common prefix on the ID, 
    // which is available as the template variable 'prefix'. 
    // Retrieve the 'heldover' checkbox 
    var checkbox = $('#{{ prefix }}-heldover'); 

    // Retrieve the 'li' element containing the 'heldover_from' field 
    var field = $('#{{ prefix }}-alignment').closest('li'); 

    function showHideField() { 
     // update the visibility of field according to the state of 
     // the checkbox 
     if (checkbox.is(':checked')) { 
      field.show(); 
     } else { 
      field.hide(); 
     } 
    } 
    // call showHideField immediately to reflect the initial state 
    // of the checkbox 
    showHideField(); 
    // trigger showHideField whenever the checkbox state is changed 
    checkbox.change(showHideField); 
</script>