[#3081] New checkbox and modal design for plan-previews screen

Author: jiromaykin

src/open_inwoner/cms/collaborate/urls.py

@@ -6,20 +6,32 @@
     PlanActionEditStatusTagView,
     PlanActionEditView,
     PlanActionHistoryView,
-    PlanCreateView,
+    PlanCreateNoTemplateView,
+    PlanCreateWithTemplateView,
     PlanDetailView,
     PlanEditView,
     PlanExportView,
     PlanFileUploadView,
     PlanGoalEditView,
     PlanListView,
+    PlanTemplateChooseView,
 )
 
 app_name = "collaborate"
 
 urlpatterns = [
     path("", PlanListView.as_view(), name="plan_list"),
-    path("create/", PlanCreateView.as_view(), name="plan_create"),
+    path(
+        "template-choice/",
+        PlanTemplateChooseView.as_view(),
+        name="plan_choose_template",
+    ),
+    path("create/", PlanCreateNoTemplateView.as_view(), name="plan_create_no_template"),
+    path(
+        "create-from-template/",
+        PlanCreateWithTemplateView.as_view(),
+        name="plan_create_with_template",
+    ),
     path("<uuid:uuid>/", PlanDetailView.as_view(), name="plan_detail"),
     path("<uuid:uuid>/edit/", PlanEditView.as_view(), name="plan_edit"),
     path("<uuid:uuid>/edit/goal/", PlanGoalEditView.as_view(), name="plan_edit_goal"),

src/open_inwoner/components/templates/components/File/File.html

@@ -18,11 +18,11 @@
                 <span class="file__name">
                     {{ name }}
                     {% if extension and size %}
-                        ({{ extension }}, {{ size|readable_size }})
+                        <span class="file__extension">({{ extension }}</span>, <span class="file__size">{{ size|readable_size }})</span>
                     {% elif extension %}
-                        ({{ extension }})
+                        <span class="file__extension">({{ extension }})</span>
                     {% elif size %}
-                        ({{ size|readable_size }})
+                        <span class="file__size">({{ size|readable_size }})</span>
                     {% endif %}
                 </span>
                 <span class="file__date">{{ created|date:'j F Y' }}</span>

src/open_inwoner/js/components/plan-preview/index.js

@@ -13,8 +13,13 @@ export class PlanPreview {
     event.stopPropagation()
     event.preventDefault()
 
-    const modalId = document.getElementById(this.node.dataset.id)
-    const modal = new Modal(modalId)
+    const modalId = this.node.dataset.id || 'modal'
+    const modalElement = document.getElementById(modalId)
+    if (!modalElement) {
+      return
+    }
+
+    const modal = new Modal(modalElement)
     modal.setModalIcons(false)
     modal.setConfirmButtonVisibility(false)
     modal.setCancelButtonVisibility(true)
@@ -23,9 +28,109 @@ export class PlanPreview {
     // Track the element that opened the modal
     modal.openedBy = this.node
 
-    // Set the modal-closed callback to focus on the element that opened it
+    // Find the corresponding radio input
+    let radioInput = null
+    let radioLabel = null
+
+    // First structure (original page)
+    const templateRow = this.node.closest('.plan-template__row')
+    if (templateRow) {
+      radioInput = templateRow.querySelector('.radio__input')
+      radioLabel = templateRow.querySelector('.radio__label')
+    }
+
+    // Second structure (choice-list page)
+    if (!radioInput) {
+      const choiceListItem = this.node.closest('.choice-list__item')
+      if (choiceListItem) {
+        radioInput = choiceListItem.querySelector('.choice-list__radio')
+        radioLabel = choiceListItem.querySelector('.choice-list__label')
+      }
+    }
+
+    // Get the template ID from the modalId
+    const templateId = modalId.split('-')[1]
+
+    // As a fallback, try to find the radio by its ID
+    if (!radioInput && templateId) {
+      radioInput = document.getElementById(`id_template_${templateId}`)
+      if (radioInput) {
+        // Try to find the associated label
+        radioLabel = document.querySelector(
+          `label[for="id_template_${templateId}"]`
+        )
+        if (!radioLabel) {
+          // If no explicit label found, look for parent or ancestor label
+          radioLabel =
+            radioInput.closest('label') ||
+            radioInput.parentElement.querySelector('label')
+        }
+      }
+    }
+
+    // Find all close buttons in the modal
+    const closeButtons = modalElement.querySelectorAll(
+      '.modal__close, .modal__close-title'
+    )
+
+    // Add event listener to all close buttons to select the radio input
+    if (radioInput) {
+      closeButtons.forEach((closeButton) => {
+        closeButton.addEventListener(
+          'click',
+          () => {
+            // Select the radio input
+            radioInput.checked = true
+
+            // Set focus to the radio input to trigger CSS focus styles
+            radioInput.focus()
+
+            // If using the choice-list structure, add the 'selected' class to the parent list item
+            const choiceListItem = radioInput.closest('.choice-list__item')
+            if (choiceListItem) {
+              // Remove 'selected' class from all items
+              const allItems = document.querySelectorAll('.choice-list__item')
+              allItems.forEach((item) => item.classList.remove('selected'))
+
+              // Add 'selected' class to the clicked item
+              choiceListItem.classList.add('selected')
+            }
+
+            // Trigger change event to ensure any listeners know the radio was changed
+            const changeEvent = new Event('change', { bubbles: true })
+            radioInput.dispatchEvent(changeEvent)
+
+            // Add a small delay before setting focus to ensure DOM updates are processed
+            setTimeout(() => {
+              // For the first HTML variant, ensure focus affects the label for visual feedback
+              if (radioInput && radioLabel && templateRow) {
+                // First try to focus the label if possible (better for accessibility)
+                if (radioLabel.getAttribute('for') === radioInput.id) {
+                  radioLabel.focus()
+                } else {
+                  // Otherwise focus the input itself
+                  radioInput.focus()
+                }
+              }
+            }, 50)
+          },
+          { once: true }
+        )
+      })
+    }
+
+    // Set the modal-closed callback to focus on the selected radio or label
     modal.setModalClosedCallback(() => {
-      if (modal.openedBy) {
+      if (radioInput && radioInput.checked) {
+        // Try to focus the label first (if it exists and is properly linked)
+        if (radioLabel && radioLabel.getAttribute('for') === radioInput.id) {
+          radioLabel.focus()
+        } else {
+          // Fall back to focusing the input itself
+          radioInput.focus()
+        }
+      } else if (modal.openedBy) {
+        // If no radio was selected, return focus to the element that opened the modal
         modal.openedBy.focus()
       }
     })

src/open_inwoner/plans/templates/plans/preview.html

@@ -1,39 +1,28 @@
-{% load i18n link_tags %}
+{% load i18n link_tags file_tags %}
 
-<div class='preview'>
+<div class='plan-preview'>
+<p class='plan-preview__key'>{% trans "Titel" %}</p>
+<h2 class="utrecht-heading-4">{{ plan_template.name }}</h2>
     {% if plan_template.goal %}
-        <div class='preview__title'>{% trans "Doel:" %}</div>
-        <div>{{ plan_template.goal }}</div>
+        <p class='plan-preview__key'>{% trans "Doel" %}</p>
+        <div>{{ plan_template.goal|truncatewords:20 }}</div>
     {% endif %}
 
     {% if plan_template.description %}
-        <div class='preview__title'>{% trans "Description:" %}</div>
-        <div>{{ plan_template.description }}</div>
+        <div class='plan-preview__key'>{% trans "Description:" %}</div>
+        <div>{{ plan_template.description|truncatewords:10 }}</div>
     {% endif %}
 
     {% if plan_template.file %}
-        <div class='preview__title'>{% trans 'File:' %}</div>
-        <div>{% link href=plan_template.file.url text=plan_template.file %}</div>
+        <div class='plan-preview__key'>{% trans 'Bestand' %}</div>
+        <div>{% file file=plan_template.file extension=plan_template.file.extension size=plan_template.file.size show_download=False %}</div>
     {% endif %}
 
     {% if plan_template.actiontemplates.exists %}
-        <div class='preview__title'>{% trans 'Actions:' %}</div>
+        <div class='plan-preview__key'>{% trans 'Actions:' %}</div>
 
         {% for action_template in plan_template.actiontemplates.all %}
-            <div class='preview__span'>
-                <div class='preview__title'>{{ forloop.counter }}</div>
-                <div class='preview__title'>{% trans 'Name:' %}</div>
-                <div>{{ action_template.name }}</div>
-                <div></div>
-                <div class='preview__title'>{% trans 'Description:' %}</div>
-                <div>{{ action_template.description }}</div>
-                <div></div>
-                <div class='preview__title'>{% trans 'Type:' %}</div>
-                <div>{{ action_template.get_type_display }}</div>
-                <div></div>
-                <div class='preview__title'>{% trans 'Eindigt' %}</div>
-                <div>{% trans "Over" %}{{ over }} {{ action_template.end_in_days }} {% trans "dagen" %} {{ days }}</div>
-            </div>
+            <div class='plan-preview__span'>{{ forloop.counter }}. {{ action_template.name }}</div>
         {% endfor %}
     {% endif %}
 </div>

src/open_inwoner/plans/tests/test_logging.py

@@ -32,9 +32,9 @@ def setUp(self):
 
     def test_created_plan_is_logged(self):
         plan = PlanFactory.build(created_by=self.user)
-        form = self.app.get(reverse("collaborate:plan_create"), user=self.user).forms[
-            "plan-form"
-        ]
+        form = self.app.get(
+            reverse("collaborate:plan_create_no_template"), user=self.user
+        ).forms["plan-form"]
         form["title"] = plan.title
         form["goal"] = plan.goal
         form["end_date"] = plan.end_date

src/open_inwoner/plans/tests/test_views.py

@@ -44,7 +44,11 @@ def setUp(self) -> None:
 
         self.login_url = reverse("login")
         self.list_url = reverse("collaborate:plan_list")
-        self.create_url = reverse("collaborate:plan_create")
+        self.choose_template_url = reverse("collaborate:plan_choose_template")
+        # TODO: new tests for choosing template form
+        self.create_url = reverse("collaborate:plan_create_no_template")
+        self.create_with_template_url = reverse("collaborate:plan_create_with_template")
+        # TODO: new tests for creating plan from template where Title/Goal are prefilled, but Contact/Enddate are not.
         self.detail_url = reverse(
             "collaborate:plan_detail", kwargs={"uuid": self.plan.uuid}
         )
@@ -315,11 +319,11 @@ def test_plan_action_create_not_your_action(self):
         other_user = UserFactory()
         self.app.get(self.action_add_url, user=other_user, status=404)
 
-    def test_plan_create_login_required(self):
+    def test_plan_create_no_template_login_required(self):
         response = self.app.get(self.create_url)
         self.assertRedirects(response, f"{self.login_url}?next={self.create_url}")
 
-    def test_plan_create_fields_required(self):
+    def test_plan_create_no_template_fields_required(self):
         response = self.app.get(self.create_url, user=self.user)
         form = response.forms["plan-form"]
         response = form.submit()
@@ -333,7 +337,7 @@ def test_plan_create_fields_required(self):
             },
         )
 
-    def test_plan_create_fails_with_no_collaborators(self):
+    def test_plan_create_no_template_fails_with_no_collaborators(self):
         response = self.app.get(self.create_url, user=self.user)
         form = response.forms["plan-form"]
         form["title"] = "Plan"
@@ -348,20 +352,20 @@ def test_plan_create_fails_with_no_collaborators(self):
             {"__all__": [_("At least one collaborator is required for a plan.")]},
         )
 
-    def test_plan_create_contains_expected_contacts(self):
+    def test_plan_create_no_template_contains_expected_contacts(self):
         another_contact = UserFactory()
         self.user.user_contacts.add(another_contact)
         response = self.app.get(self.create_url, user=self.user)
 
-        rendered_contacts = response.pyquery("#plan-form .grid .form__grid-box")[
+        rendered_contacts = response.pyquery("#plan-form .plan__contacts")[
             0
         ].text_content()
 
         self.assertNotIn(self.user.get_full_name(), rendered_contacts)
         self.assertIn(self.contact.get_full_name(), rendered_contacts)
         self.assertIn(another_contact.get_full_name(), rendered_contacts)
 
-    def test_plan_create_plan(self):
+    def test_plan_create_no_template_plan(self):
         self.assertEqual(Plan.objects.count(), 1)
         response = self.app.get(self.create_url, user=self.user)
         form = response.forms["plan-form"]
@@ -378,7 +382,7 @@ def test_plan_create_plan(self):
         self.assertEqual(plan.goal, "Goal")
         self.assertEqual(plan.description, "Description")
 
-    def test_plan_create_plan_with_template(self):
+    def test_plan_create_no_template_plan_with_template(self):
         plan_template = PlanTemplateFactory(file=None)
         self.assertEqual(Plan.objects.count(), 1)
         response = self.app.get(self.create_url, user=self.user)
@@ -397,7 +401,7 @@ def test_plan_create_plan_with_template(self):
         self.assertEqual(plan.documents.count(), 0)
         self.assertEqual(plan.actions.count(), 0)
 
-    def test_plan_create_plan_with_template_and_field_overrides(self):
+    def test_plan_create_no_template_plan_with_template_and_field_overrides(self):
         plan_template = PlanTemplateFactory(file=None)
         self.assertEqual(Plan.objects.count(), 1)
         response = self.app.get(self.create_url, user=self.user)
@@ -418,7 +422,7 @@ def test_plan_create_plan_with_template_and_field_overrides(self):
         self.assertEqual(plan.documents.count(), 0)
         self.assertEqual(plan.actions.count(), 0)
 
-    def test_plan_create_plan_with_template_and_file(self):
+    def test_plan_create_no_template_plan_with_template_and_file(self):
         plan_template = PlanTemplateFactory()
         self.assertEqual(Plan.objects.count(), 1)
         response = self.app.get(self.create_url, user=self.user)
@@ -437,7 +441,7 @@ def test_plan_create_plan_with_template_and_file(self):
         self.assertEqual(plan.documents.count(), 1)
         self.assertEqual(plan.actions.count(), 0)
 
-    def test_plan_create_plan_with_template_and_actions(self):
+    def test_plan_create_no_template_plan_with_template_and_actions(self):
         plan_template = PlanTemplateFactory(file=None)
         ActionTemplateFactory(plan_template=plan_template)
         self.assertEqual(Plan.objects.count(), 1)
@@ -457,7 +461,9 @@ def test_plan_create_plan_with_template_and_actions(self):
         self.assertEqual(plan.documents.count(), 0)
         self.assertEqual(plan.actions.count(), 1)
 
-    def test_plan_create_plan_validation_error_reselects_template_and_contact(self):
+    def test_plan_create_no_template_plan_validation_error_reselects_template_and_contact(
+        self,
+    ):
         plan_template = PlanTemplateFactory(file=None)
         ActionTemplateFactory(plan_template=plan_template)
         # make sure we have only one plan
@@ -483,12 +489,14 @@ def test_plan_create_plan_validation_error_reselects_template_and_contact(self):
         elem = response.pyquery("#id_plan_contacts_1")[0]
         self.assertEqual(elem.attrib.get("checked"), "checked")
 
-    def test_plan_create_contains_contact_create_link_when_no_contacts_exist(self):
+    def test_plan_create_no_template_contains_contact_create_link_when_no_contacts_exist(
+        self,
+    ):
         self.user.user_contacts.remove(self.contact)
         response = self.app.get(self.create_url, user=self.user)
         self.assertContains(response, reverse("profile:contact_create"))
 
-    def test_plan_create_does_not_contain_contact_create_link_when_contacts_exist(
+    def test_plan_create_no_template_does_not_contain_contact_create_link_when_contacts_exist(
         self,
     ):
         response = self.app.get(self.create_url, user=self.user)