wip - faq page

elections/blocks.py

@@ -85,3 +85,50 @@ class ProgramBlock(StructBlock):
         icon = "form"
         label = "Vyskakovací program"
         template = "styleguide2/includes/molecules/program/card_program.html"
+
+
+class PersonFaqAnswerBlock(StructBlock):
+    question = CharBlock(
+        label="Otázka"
+    )
+
+    answer = TextBlock(
+        label="Odpověď"
+    )
+
+    class Meta:
+        icon = "form"
+        label = "Odpověď kandidáta na otázku"
+
+
+class PersonFaqAnswersBlock(StructBlock):
+    section_name = CharBlock(
+        label="Název sekce",
+        help_text="Např. 'Otevřenost a transparentnost'"
+    )
+
+    topic = CharBlock(
+        label="Téma",
+        help_text="Např. 'téma Markéty Gregorové'"
+    )
+
+    person_page = PageChooserBlock(
+        label="Stránka kandidáta",
+        page_type=["elections.ElectionsCandidatePage"]
+    )
+
+    image = ImageChooserBlock(
+        label="Obrázek",
+        help_text="Pokud není vybrán, použije se obrázek ze stránky kandidáta",
+        required=False,
+    )
+
+    questions = ListBlock(
+        PersonFaqAnswerBlock(label="Odpověď"),
+        label="Otázky"
+    )
+
+    class Meta:
+        icon = "form"
+        label = "Odpovědi kandidáta na otázky"
+        template = "styleguide2/includes/organisms/faq/faq_answer.html"

elections/migrations/0003_electionsfaqpage.py

+# Generated by Django 4.1.10 on 2024-01-08 12:25
+
+from django.db import migrations, models
+import django.db.models.deletion
+import shared.models.base
+import wagtail.blocks
+import wagtail.fields
+import wagtail.images.blocks
+import wagtailmetadata.models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('calendar_utils', '0004_auto_20220505_1228'),
+        ('wagtailcore', '0083_workflowcontenttype'),
+        ('wagtailimages', '0025_alter_image_file_alter_rendition_file'),
+        ('elections', '0002_initial'),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='ElectionsFaqPage',
+            fields=[
+                ('page_ptr', models.OneToOneField(auto_created=True, on_delete=django.db.models.deletion.CASCADE, parent_link=True, primary_key=True, serialize=False, to='wagtailcore.page')),
+                ('calendar_url', models.URLField(blank=True, help_text='Kalendář se po uložení stránky aktualizuje na pozadí. U plnějších kalendářů to může trvat i desítky sekund.', null=True, verbose_name='URL kalendáře ve formátu iCal')),
+                ('content', wagtail.fields.StreamField([('person_answers', wagtail.blocks.StructBlock([('topic', wagtail.blocks.CharBlock(help_text="Např. 'téma Markéty Gregorové'", label='Téma')), ('person', wagtail.blocks.PageChooserBlock(label='Stránka kandidáta', page_type=['elections.ElectionsCandidatePage'])), ('image', wagtail.images.blocks.ImageChooserBlock(help_text='Pokud není vybrán, použije se obrázek ze stránky kandidáta', label='Obrázek', required=False)), ('questions', wagtail.blocks.ListBlock(wagtail.blocks.StructBlock([('question', wagtail.blocks.CharBlock(label='Otázka')), ('answer', wagtail.blocks.TextBlock(label='Odpověď'))], label='Odpověď'), label='Otázky'))]))], blank=True, use_json_field=True, verbose_name='Obsah')),
+                ('calendar', models.ForeignKey(blank=True, null=True, on_delete=django.db.models.deletion.PROTECT, to='calendar_utils.calendar')),
+                ('search_image', models.ForeignKey(blank=True, null=True, on_delete=django.db.models.deletion.SET_NULL, related_name='+', to='wagtailimages.image', verbose_name='Search image')),
+            ],
+            options={
+                'abstract': False,
+            },
+            bases=(shared.models.base.SubpageMixin, wagtailmetadata.models.WagtailImageMetadataMixin, 'wagtailcore.page', models.Model),
+        ),
+    ]

elections/migrations/0004_alter_electionsfaqpage_options.py

+# Generated by Django 4.1.10 on 2024-01-08 12:29
+
+from django.db import migrations
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('elections', '0003_electionsfaqpage'),
+    ]
+
+    operations = [
+        migrations.AlterModelOptions(
+            name='electionsfaqpage',
+            options={'verbose_name': 'Otázky a odpovědi'},
+        ),
+    ]

elections/models.py

@@ -81,6 +81,7 @@ class ElectionsHomePage(MainHomePageMixin):
     subpage_types = [
         "elections.ElectionsArticlesPage",
         "elections.ElectionsCandidatesPage",
+        "elections.ElectionsFaqPage",
         "elections.ElectionsSearchPage",
     ]
 
@@ -275,3 +276,50 @@ class ElectionsCandidatePage(
         )
 
         return context
+
+
+class ElectionsFaqPage(
+    ExtendedMetadataPageMixin,
+    SubpageMixin,
+    MetadataPageMixin,
+    CalendarMixin,
+    PageInMenuMixin,
+    Page,
+):
+    ## FIELDS
+
+    # content
+    content = StreamField(
+        [
+            ("person_answers", blocks.PersonFaqAnswersBlock()),
+        ],
+        verbose_name="Obsah",
+        blank=True,
+        use_json_field=True,
+    )
+
+    ## PANELS
+
+    content_panels = Page.content_panels + [
+        FieldPanel("content"),
+    ]
+
+    promote_panels = make_promote_panels()
+
+    ## RELATIONS
+
+    parent_page_types = ["elections.ElectionsHomePage"]
+    subpage_types = []
+
+    class Meta:
+        verbose_name = "Otázky a odpovědi"
+
+    ## OTHERS
+
+    def get_topic_names(self) -> list:
+        topic_names = []
+
+        for section in self.content:
+            topic_names.append(section.value["topic"])
+
+        return topic_names

elections/templates/elections/elections_faq_page.html

+{% extends "styleguide2/base.html" %}
+
+{% load wagtailcore_tags %}
+
+{% block content %}
+  {% include 'styleguide2/includes/organisms/layout/elections/navbar.html' with selected_item=page.get_menu_title %}
+
+  <div class="__js-root">
+    <ui-view-provider
+      :initial="{view1: true, view2: false, view3: false, view4: false, view5: false}" :sync-location="true"
+      v-slot="{ isCurrentView, toggleView }"
+    >
+      {% include 'styleguide2/includes/organisms/header/elections/faq_header.html' with title=page.title ui_switch_iterable=page.get_topic_names %}
+
+      <main role="main" class="bg-grey-150 pb-10">
+          <div class="flex flex-col">
+          {% for block in page.content %}
+            {% with forloop.counter as iteration %}
+              {% include_block block %}
+            {% endwith %}
+          {% endfor %}
+        </div>
+      </main>
+    </ui-view-provider>
+  </div>
+
+  {% include 'styleguide2/includes/organisms/main_section/newsletter_section.html' %}
+{% endblock %}

shared/templates/styleguide2/includes/molecules/candidates/elections/candidate_primary_box.yaml

-context:
-  name: 'Mikuláš Peksa'
-  image_source: '../../../../../static/images/mikulas-arrow.png'
-  position: 'Europoslanec'
-  description: 'Mikuláš Peksa (18. 6. 1986) vystudoval fyziku na Matematicko-fyzikální fakultě Univerzity Karlovy. V Německu pracoval jako správce Linuxových serverů a programátor v C++. Po návratu do Čech byl v roce 2017 zvolen poslancem PSP ČR, následně v roce 2019 poslancem Evropského parlamentu. Věnuje se zejména tématům spojeným s fungováním společnosti v digitálním věku.'

shared/templates/styleguide2/includes/molecules/candidates/elections/candidate_secondary_box.yaml

-context:
-  number: '1'
-  name: 'Mikuláš Peksa'
-  image_source: 'https://www.extremnews.com/images/max_image_view-166664f1d580456c9866fa3c20ed545b.jpg'
-  position: 'Europoslanec'
-  description: 'Mikuláš Peksa (18. 6. 1986) vystudoval fyziku na Matematicko-fyzikální fakultě Univerzity Karlovy. V Německu pracoval jako správce Linuxových serverů a programátor v C++. Po návratu do Čech byl v roce 2017 zvolen poslancem PSP ČR, následně v roce 2019 poslancem Evropského parlamentu. Věnuje se zejména tématům spojeným s fungováním společnosti v digitálním věku.'

shared/templates/styleguide2/includes/molecules/navbar/additional_button.yaml

-context:
-  button:
-    name: 'Text'
-    url: '#'

shared/templates/styleguide2/includes/molecules/search/universal_search_result.yaml

-context:
-  title: 'Konspirační weby už nedosáhnou na veřejné peníze.'
-  perex: 'Metodika pomůže veřejným institucím zajistit, aby se jejich online inzerce neobjevila na portálech, na kterých by mohla poškodit jejich dobré jméno. Patří mezi ně hlavně konspirační a dezinformační weby. Metodika doporučuje například úřadům nebo státem ovládaným podnikům postupy pro zadávání inzerce, které firmy v soukromém sektoru už delší dobu běžně používají.'

shared/templates/styleguide2/includes/organisms/faq/faq_answer.html

+<template v-if="isCurrentView('view1') || isCurrentView('view2')">
+  <ui-faq-section-header
+    iteration="{{ iteration }}"
+    name="{{ self.section_name }}"
+  ></ui-faq-section-header>
+
+  <div class="faq-answer bg-grey-150 pt-16" id="faq{{ iteration }}">
+    <div class="container--wide !mb-16">
+      <div class="
+        flex gap-16 items-start flex-col-reverse
+
+        lg:flex-row
+
+        faq-answer--content
+      ">
+        <div class="flex flex-col w-full gap-8">
+          {% for question in self.questions %}
+            <div class="flex flex-col gap-5">
+              <h2 class="text-5xl font-alt">{{ question.question }}</h2>
+
+              <div>
+                <span class="bg-black text-white text-sm px-4 py-1.5">
+                  {{ self.topic }}
+                </span>
+              </div>
+
+              <p class="text-black leading-7 text-lg">
+                {{ question.answer }}
+              </p>
+            </div>
+          {% endfor %}
+        </div>
+
+        <div
+          class="
+            flex gap-8 w-full items-center
+            faq-answer--person
+          "
+        >
+          <div
+            class="
+              flex flex-col justify-end items-end h-64 ml-[-5.5rem]
+
+              lg:h-96 lg:ml-0
+
+              faq-answer--person--text
+            "
+          >
+            <div class="font-alt text-5xl whitespace-nowrap leading-10">
+              Odpovídá
+            </div>
+            <div class="head-3xl whitespace-nowrap leading-8">
+              {{ self.person_page.name }}
+            </div>
+            <div class="whitespace-nowrap">
+              {{ self.person_page.position }}
+            </div>
+          </div>
+
+
+          <img
+            class="lg:h-96 h-64"
+            src="{{ image_src }}"
+          >
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

shared/templates/styleguide2/includes/organisms/header/elections/simple_header_with_ui_switch.html

@@ -18,7 +18,7 @@
             @click="toggleView('view{{ forloop.counter }}')"
             class="switch__item--elections"
             :class="{'switch__item--active': isCurrentView('view{{ forloop.counter }}')}"
-          >{{ switch.name }}</a>
+          >{{ switch }}</a>
         {% endfor %}
       {% endblock %}
     </ui-horizontal-scrollable>

shared/templates/styleguide2/includes/organisms/layout/elections/navbar.yaml

-context:
-  has_background: false
-
-  menu_items:
-    -
-      name: 'Kandidáti'
-      url: '#kandidati'
-    -
-      name: 'Priority pro Evropu'
-      url: '#program'
-    -
-      name: 'Aktuality'
-      url: '#'
-    -
-      name: 'Ptáte se'
-      url: '#'
-    -
-      name: 'Kontakty'
-      url: '#'
-
-  important_item: null