From 2176c5175f3fdb7bfe95079589ba1cdaa81f1962 Mon Sep 17 00:00:00 2001
From: OndraPetrzilka <ondra.petrzilka@gmail.com>
Date: Thu, 25 Aug 2022 11:55:27 +0200
Subject: [PATCH] program page switch working
---
main/blocks.py | 10 +++
.../0023_alter_mainprogrampage_program.py | 21 ++++++
main/templates/main/main_program_page.html | 65 +++++++++++--------
3 files changed, 68 insertions(+), 28 deletions(-)
create mode 100644 main/migrations/0023_alter_mainprogrampage_program.py
diff --git a/main/blocks.py b/main/blocks.py
index 2243fcab..e34cecee 100644
--- a/main/blocks.py
+++ b/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(
diff --git a/main/migrations/0023_alter_mainprogrampage_program.py b/main/migrations/0023_alter_mainprogrampage_program.py
new file mode 100644
index 00000000..a8aa7b1c
--- /dev/null
+++ b/main/migrations/0023_alter_mainprogrampage_program.py
@@ -0,0 +1,21 @@
+# 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'),
+ ),
+ ]
diff --git a/main/templates/main/main_program_page.html b/main/templates/main/main_program_page.html
index 38340790..f7339466 100644
--- a/main/templates/main/main_program_page.html
+++ b/main/templates/main/main_program_page.html
@@ -13,37 +13,46 @@
</div>
</div>
<div class="container--medium">
-
- <div class="mb-12">
- <div class="switch">
- {% for program_group in page.program %}
- <a class="switch__item {% if forloop.first %}switch__item--active{% endif %}">
- {{ program_group.value.title }}
- </a>
- {% endfor %}
- </div>
- </div>
-
- <div class="mb-12">
- {% for program_group in page.program %}
- {% for item in program_group.value.point_list %}
- <div class="flex mb-6">
- {% image item.icon fill-150x150 as icon %}
- <img src="{{ icon.url }}" alt="{{ item.title }}" class="mr-6 text-6xl">
- <div class="flex flex-col">
- <h3 class="font-alt mb-4 text-4xl">
- {{ item.title }}
- </h3>
- <p class="leading-6">
- {{ item.text }}
- </p>
- </div>
+ <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 @click="toggleView('{{ program_group.value.slug }}')" class="switch__item"
+ :class="{'switch__item--active': isCurrentView('{{ program_group.value.slug }}')}">
+ {{ program_group.value.title }}
+ </a>
+ {% endfor %}
</div>
- {% endfor %}
- {% endfor %}
+ </div>
+
+ <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 %}
+ <img src="{{ icon.url }}" alt="{{ item.title }}" class="mr-6 text-6xl">
+ <div class="flex flex-col">
+ <h3 class="font-alt mb-4 text-4xl">
+ {{ item.title }}
+ </h3>
+ <p class="leading-6">
+ {{ item.text }}
+ </p>
+ </div>
+ </div>
+ {% endfor %}
+ </template>
+ {% endfor %}
+ </div>
+ </ui-view-provider>
</div>
</div>
-
{% include 'main/includes/newsletter_section.html' %}
</main>
{% endblock %}
--
GitLab