Transform SSD help-text field into HTML editor field

maykinmedia · Jun 24, 2024 · 10706bf · 10706bf
1 parent a2906c1
commit 10706bf
Show file tree

Hide file tree

Showing 6 changed files with 87 additions and 67 deletions.
diff --git a/src/open_inwoner/conf/base.py b/src/open_inwoner/conf/base.py
@@ -204,6 +204,7 @@
     "formtools",
     "django_setup_configuration",
     "django_yubin",
+    "tinymce",
     # Project applications.
     "open_inwoner.components",
     "open_inwoner.kvk",

diff --git a/src/open_inwoner/ssd/migrations/0006_alter_ssdconfig_mijn_uitkeringen_text.py b/src/open_inwoner/ssd/migrations/0006_alter_ssdconfig_mijn_uitkeringen_text.py
@@ -0,0 +1,24 @@
+# Generated by Django 4.2.11 on 2024-06-24 14:07
+
+from django.db import migrations
+
+import ckeditor.fields
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ("ssd", "0005_fix_translations_typo"),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name="ssdconfig",
+            name="mijn_uitkeringen_text",
+            field=ckeditor.fields.RichTextField(
+                blank=True,
+                help_text="The text displayed as overview of the 'Mijn Uitkeringen' section.",
+                verbose_name="Overview text",
+            ),
+        ),
+    ]
diff --git a/src/open_inwoner/ssd/models.py b/src/open_inwoner/ssd/models.py
@@ -1,6 +1,7 @@
 from django.db import models
 from django.utils.translation import gettext_lazy as _
 
+import ckeditor.fields as ckeditor_fields
 from solo.models import SingletonModel
 
 from ..configurations.models import SiteConfiguration
@@ -55,7 +56,7 @@ class SSDConfig(SingletonModel):
         validators=[validate_digits],
         blank=True,
     )
-    mijn_uitkeringen_text = models.TextField(
+    mijn_uitkeringen_text = ckeditor_fields.RichTextField(
         _("Overview text"),
         blank=True,
         help_text=_(

diff --git a/src/open_inwoner/templates/pages/ssd/monthly_reports_list.html b/src/open_inwoner/templates/pages/ssd/monthly_reports_list.html
@@ -1,54 +1,41 @@
-{% extends 'master.html' %}
+{% extends 'pages/ssd/reports_base.html' %}
 {% load i18n grid_tags dropdown_tags form_tags button_tags ssd_tags %}
 
-{% block content %}
-    {% render_grid %}
-        {% render_column span=9 %}
-            <h1 class="utrecht-heading-1" id="title">
-                {% trans "Mijn uitkeringen" %}
-            </h1>
-            <p>
-                {% blocktrans with mijn_uitkeringen_text=client.config.mijn_uitkeringen_text %}
-                    {{ mijn_uitkeringen_text }}
-                {% endblocktrans %}
-            </p>
-            <div class="tab--container">
-                <div class="tabs">
-                    <ul class="list tabs__headers">
-                        <li class="list-item tab__header--item"><span id="monthly" class="link tab__header active">{% trans "Maandspecificaties" %}</span></li>
-                        <li class="list-item tab__header--item"><a href="{% url 'ssd:yearly_benefits_index' %}" id="yearly" class="link tab__header">{% trans "Jaaropgaven" %}</a></li>
-                    </ul>
-                    {% if client.config.maandspecificatie_enabled is True %}
-                        <div class="tabs__body">
-                        {# Note: Mijn uitkeringen tab-content styles need to be independent from the URL, unlike the Tabs of the Login page #}
-                        {# URL-dependent styles would be coming from src/open_inwoner/js/components/tab-panels #}
-                        {# Setting class to 'tab__contents' instead of 'tab__content' is a quick-fix #}
-                            <div id="maandspecificaties" class="tab__contents active">
-                                <p>
-                                    {% blocktrans with display_text=client.config.maandspecificatie_display_text %}
-                                        {{ display_text }}
-                                    {% endblocktrans %}
-                                </p>
-                                {% render_form form=form method="POST" id="monthlyreports-form" show_required=False submit_text=_('Download') %}
-                                    {% csrf_token %}
-                                    {% input form.report_date icon="expand_more" icon_position="after" icon_outlined=True %}
-                                    {% form_actions primary_text=_("Download") primary_icon="file_download" icon_position="before" extra_classes="ssd" %}
-                                {% endrender_form %}
-                                <div>
-                                    {% if report_not_found %}
-                                        {% blocktrans with time_period=report_not_found|date:"F Y" %}
-                                            Geen uitkeringsspecificatie gevonden voor {{ time_period }}.
-                                        {% endblocktrans %}
-                                    {% endif %}
-                                </div>
-                            </div>
+{% block report %}
+    <div class="tab--container">
+        <div class="tabs">
+            <ul class="list tabs__headers">
+                <li class="list-item tab__header--item"><span id="monthly" class="link tab__header active">{% trans "Maandspecificaties" %}</span></li>
+                <li class="list-item tab__header--item"><a href="{% url 'ssd:yearly_benefits_index' %}" id="yearly" class="link tab__header">{% trans "Jaaropgaven" %}</a></li>
+            </ul>
+            {% if client.config.maandspecificatie_enabled is True %}
+                <div class="tabs__body">
+                {# Note: Mijn uitkeringen tab-content styles need to be independent from the URL, unlike the Tabs of the Login page #}
+                {# URL-dependent styles would be coming from src/open_inwoner/js/components/tab-panels #}
+                {# Setting class to 'tab__contents' instead of 'tab__content' is a quick-fix #}
+                    <div id="maandspecificaties" class="tab__contents active">
+                        <p>
+                            {% blocktrans with display_text=client.config.maandspecificatie_display_text %}
+                                {{ display_text }}
+                            {% endblocktrans %}
+                        </p>
+                        {% render_form form=form method="POST" id="monthlyreports-form" show_required=False submit_text=_('Download') %}
+                            {% csrf_token %}
+                            {% input form.report_date icon="expand_more" icon_position="after" icon_outlined=True %}
+                            {% form_actions primary_text=_("Download") primary_icon="file_download" icon_position="before" extra_classes="ssd" %}
+                        {% endrender_form %}
+                        <div>
+                            {% if report_not_found %}
+                                {% blocktrans with time_period=report_not_found|date:"F Y" %}
+                                    Geen uitkeringsspecificatie gevonden voor {{ time_period }}.
+                                {% endblocktrans %}
+                            {% endif %}
                         </div>
-                    {% else %}
-                        <div>{% trans "Download of monthly reports not supported." %}</div>
-                    {% endif %}
+                    </div>
                 </div>
-            </div>
-
-        {% endrender_column %}
-    {% endrender_grid %}
-{% endblock content %}
+            {% else %}
+                <div>{% trans "Download of monthly reports not supported." %}</div>
+            {% endif %}
+        </div>
+    </div>
+{% endblock report %}
diff --git a/src/open_inwoner/templates/pages/ssd/reports_base.html b/src/open_inwoner/templates/pages/ssd/reports_base.html
@@ -0,0 +1,20 @@
+{% extends 'master.html' %}
+{% load i18n grid_tags dropdown_tags form_tags button_tags ssd_tags %}
+
+{% block content %}
+    {% render_grid %}
+        {% render_column span=9 %}
+            <h1 class="utrecht-heading-1" id="title">
+                {% trans "Mijn uitkeringen" %}
+            </h1>
+            <div class="wysiwyg">
+                {% blocktrans with mijn_uitkeringen_text=client.config.mijn_uitkeringen_text|safe %}
+                    {{ mijn_uitkeringen_text }}
+                {% endblocktrans %}
+            </div>
+
+            {% block report %}{% endblock report %}
+
+        {% endrender_column %}
+    {% endrender_grid %}
+{% endblock content %}
diff --git a/src/open_inwoner/templates/pages/ssd/yearly_reports_list.html b/src/open_inwoner/templates/pages/ssd/yearly_reports_list.html
@@ -1,17 +1,7 @@
-{% extends 'master.html' %}
+{% extends 'pages/ssd/reports_base.html' %}
 {% load i18n grid_tags form_tags button_tags icon_tags ssd_tags %}
 
-{% block content %}
-    {% render_grid %}
-        {% render_column span=9 %}
-            <h1 class="utrecht-heading-1" id="title">
-                {% trans "Mijn uitkeringen" %}
-            </h1>
-            <p>
-                {% blocktrans with mijn_uitkeringen_text=client.config.mijn_uitkeringen_text %}
-                    {{ mijn_uitkeringen_text }}
-                {% endblocktrans %}
-            </p>
+{% block report %}
             <div class="tab--container">
                 <div class="tabs">
                     <ul class="list tabs__headers">
@@ -50,7 +40,4 @@ <h1 class="utrecht-heading-1" id="title">
                     {% endif %}
                 </div>
             </div>
-
-        {% endrender_column %}
-    {% endrender_grid %}
-{% endblock content %}
+{% endblock report %}