[#2577] Use CKEditorWidget for SSD help-text fields

maykinmedia · Jul 1, 2024 · 8f43c29 · 8f43c29
1 parent 318aed7
commit 8f43c29
Show file tree

Hide file tree

Showing 5 changed files with 102 additions and 71 deletions.
diff --git a/src/open_inwoner/conf/base.py b/src/open_inwoner/conf/base.py
@@ -947,7 +947,26 @@
 
 CKEDITOR_CONFIGS = {
     "default": {
+        "height": 200,
         "allowedContent": True,
+        # "toolbar": [
+        #     {
+        #         "name": "basicstyles",
+        #         "items": ["Bold", "Italic", "RemoveFormat"],
+        #     },
+        #     {
+        #         "name": "paragraph",
+        #         "items": [
+        #             "NumberedList",
+        #             "BulletedList",
+        #             "Outdent",
+        #             "Indent",
+        #         ],
+        #     },
+        #     {"name": "links", "items": ["Link", "Unlink"]},
+        #     {"name": "insert", "items": ["Image", "Table"]},
+        #     {"name": "clipboard", "items": ["Undo", "Redo"]},
+        # ],
     },
     "mail_editor": {
         "allowedContent": True,

diff --git a/src/open_inwoner/ssd/admin.py b/src/open_inwoner/ssd/admin.py
@@ -1,11 +1,24 @@
+from django import forms
 from django.contrib import admin
 from django.utils.translation import gettext_lazy as _
 
 from solo.admin import SingletonModelAdmin
 
+from open_inwoner.ckeditor5.widgets import CKEditorWidget
+
 from .models import SSDConfig
 
 
+class SSDAdminForm(forms.ModelForm):
+    class Meta:
+        model = SSDConfig
+        fields = "__all__"
+        widgets = {
+            "jaaropgave_display_text": CKEditorWidget,
+            "maandspecificatie_display_text": CKEditorWidget,
+        }
+
+
 @admin.register(SSDConfig)
 class SSDConfigAdmin(SingletonModelAdmin):
     fieldsets = (
@@ -47,9 +60,14 @@ class SSDConfigAdmin(SingletonModelAdmin):
             },
         ),
     )
+    form = SSDAdminForm
 
     class Meta:
         verbose_name = _("SSD configuration")
+        widgets = {
+            "jaaropgave_display_text": CKEditorWidget,
+            "maandspecificatie_display_text": CKEditorWidget,
+        }
 
     class Media:
         css = {"all": ("css/custom_admin.css",)}
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' %}
-{% load i18n grid_tags dropdown_tags form_tags button_tags ssd_tags %}
+{% extends 'pages/ssd/reports_base.html' %}
+{% load i18n grid_tags dropdown_tags form_tags button_tags render_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">
+                        <div class="wysiwyg">
+                            {% blocktrans with display_text=client.config.maandspecificatie_display_text|ckeditor_content|safe %}
+                                {{ display_text }}
+                            {% endblocktrans %}
                         </div>
-                    {% else %}
-                        <div>{% trans "Download of monthly reports not supported." %}</div>
-                    {% endif %}
+                        {% 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>
                 </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 render_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|ckeditor_content|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' %}
-{% load i18n grid_tags form_tags button_tags icon_tags ssd_tags %}
+{% extends 'pages/ssd/reports_base.html' %}
+{% load i18n grid_tags form_tags button_tags icon_tags render_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">
@@ -25,11 +15,11 @@ <h1 class="utrecht-heading-1" id="title">
                     {# 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 jaaropgave_text=client.config.jaaropgave_display_text %}
+                            <div class="wysiwyg">
+                                {% blocktrans with jaaropgave_text=client.config.jaaropgave_display_text|ckeditor_content|safe %}
                                     {{ jaaropgave_text }}
                                 {% endblocktrans %}
-                            </p>
+                            </div>
                             {% render_form form=form method="POST" id="yearlyreports-form" show_required=False submit_text=_('Download') %}
                                 {% csrf_token %}
                                 {% input form.report_date icon="expand_more" icon_position="after" icon_outlined=True %}
@@ -50,7 +40,4 @@ <h1 class="utrecht-heading-1" id="title">
                     {% endif %}
                 </div>
             </div>
-
-        {% endrender_column %}
-    {% endrender_grid %}
-{% endblock content %}
+{% endblock report %}