program page switch working

main/blocks.py

@@ -87,8 +87,18 @@ class ProgramBlock(StructBlock):
 
 class ProgramGroupBlock(StructBlock):
     title = CharBlock(label="Titulek části programu")
+    slug = CharBlock(
+        label="Slug části programu",
+        required=False,
+        help_text="Není třeba vyplňovat, bude automaticky vyplněno",
+    )
     point_list = ListBlock(ProgramBlock(), label="Jednotlivé články programu")
 
+    def get_prep_value(self, value):
+        value = super().get_prep_value(value)
+        value["slug"] = slugify(value["title"])
+        return value
+
 
 class RegionsBlock(StructBlock):
     title = CharBlock(

main/migrations/0023_alter_mainprogrampage_program.py

+# Generated by Django 4.0.7 on 2022-08-25 09:18
+
+from django.db import migrations
+import wagtail.blocks
+import wagtail.fields
+import wagtail.images.blocks
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('main', '0022_alter_mainarticlepage_region'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='mainprogrampage',
+            name='program',
+            field=wagtail.fields.StreamField([('program_group', wagtail.blocks.StructBlock([('title', wagtail.blocks.CharBlock(label='Titulek části programu')), ('slug', wagtail.blocks.CharBlock(help_text='Není třeba vyplňovat, bude automaticky vyplněno', label='Slug části programu', required=False)), ('point_list', wagtail.blocks.ListBlock(wagtail.blocks.StructBlock([('icon', wagtail.images.blocks.ImageChooserBlock(label='Ikona')), ('title', wagtail.blocks.CharBlock(label='Titulek článku programu')), ('text', wagtail.blocks.TextBlock(label='Obsah'))]), label='Jednotlivé články programu'))], label='Část programu'))], blank=True, use_json_field=None, verbose_name='Program'),
+        ),
+    ]

main/templates/main/main_program_page.html

@@ -13,11 +13,17 @@
       </div>
     </div>
     <div class="container--medium">
-
+      <div class="__js-root">
+        <ui-view-provider
+          :initial="{ {% for program_group in page.program %}'{{ program_group.value.slug }}':{% if forloop.counter0 %}false{% else %}true{% endif %},{% endfor %} }"
+          :sync-location="true"
+          v-slot="{ isCurrentView, toggleView }"
+        >
           <div class="mb-12">
             <div class="switch">
               {% for program_group in page.program %}
-            <a class="switch__item {% if forloop.first %}switch__item--active{% endif %}">
+                <a @click="toggleView('{{ program_group.value.slug }}')" class="switch__item"
+                   :class="{'switch__item--active': isCurrentView('{{ program_group.value.slug }}')}">
                   {{ program_group.value.title }}
                 </a>
               {% endfor %}
@@ -26,6 +32,7 @@
 
           <div class="mb-12">
             {% for program_group in page.program %}
+              <template v-if="isCurrentView('{{ program_group.value.slug }}')">
                 {% for item in program_group.value.point_list %}
                   <div class="flex mb-6">
                     {% image item.icon fill-150x150 as icon %}
@@ -40,10 +47,12 @@
                     </div>
                   </div>
                 {% endfor %}
+              </template>
             {% endfor %}
           </div>
+        </ui-view-provider>
+      </div>
     </div>
-
     {% include 'main/includes/newsletter_section.html' %}
   </main>
 {% endblock %}