From 1d4103416fb3b4ce71b398928123554ca6bba0b5 Mon Sep 17 00:00:00 2001
From: Jiro Ghianni <jiro@maykinmedia.nl>
Date: Mon, 5 Feb 2024 08:18:12 +0100
Subject: [PATCH] [#1982] Fixed delete-function in case of multiple upload
 errors

---
 open-inwoner-design-tokens                    |  2 +-
 .../components/Card/CardContainer.html        | 10 ++--
 .../templates/components/Card/RenderCard.html |  2 +-
 .../templates/components/Form/FileInput.html  |  6 +-
 .../components/templatetags/card_tags.py      |  1 +
 .../js/components/form/FileInput.js           | 58 +++++++++----------
 .../templates/pages/cases/document_form.html  |  6 +-
 7 files changed, 42 insertions(+), 43 deletions(-)

diff --git a/open-inwoner-design-tokens b/open-inwoner-design-tokens
index 060acec632..b9c2e3ece8 160000
--- a/open-inwoner-design-tokens
+++ b/open-inwoner-design-tokens
@@ -1 +1 @@
-Subproject commit 060acec632b9f1f63b1a7a7324d599508930a2a9
+Subproject commit b9c2e3ece8f13ae94184734bc3ce825df67d7844
diff --git a/src/open_inwoner/components/templates/components/Card/CardContainer.html b/src/open_inwoner/components/templates/components/Card/CardContainer.html
index a776e8d94a..97b77f043c 100644
--- a/src/open_inwoner/components/templates/components/Card/CardContainer.html
+++ b/src/open_inwoner/components/templates/components/Card/CardContainer.html
@@ -4,29 +4,29 @@
         {% for category in categories %}
             {% url 'products:category_detail' slug=category.slug as category_url %}
             {% if category.icon %}
-                {% card src=category.icon.file.url alt=category.icon.name title=category.name href=category_url image_object_fit=image_object_fit %}
+                {% card src=category.icon.file.url alt=category.icon.name title=category.name href=category_url compact=True image_object_fit=image_object_fit %}
             {% else %}
-                {% card src=category.image.file.url alt=category.image.name title=category.name href=category_url image_object_fit=image_object_fit %}
+                {% card src=category.image.file.url alt=category.image.name title=category.name href=category_url compact=True image_object_fit=image_object_fit %}
             {% endif %}
         {% endfor %}
     {% endif %}
 
     {% if subcategories %}
         {% for subcategory in subcategories %}
-            {% category_card category=subcategory parent_category=parent_category image_object_fit=image_object_fit %}
+            {% category_card category=subcategory parent_category=parent_category compact=True image_object_fit=image_object_fit %}
         {% endfor %}
     {% endif %}
 
     {% if products %}
         {% for product in products %}
             {% get_product_url product as product_url %}
-            {% product_card title=product.name description=product.summary url=product_url image=product.icon image_object_fit=image_object_fit %}
+            {% product_card title=product.name description=product.summary url=product_url image=product.icon compact=True image_object_fit=image_object_fit %}
         {% endfor %}
     {% endif %}
 
     {% if plans %}
         {% for plan in plans %}
-            {% description_card title=plan.title description=plan.goal|truncatechars:51 url=plan.get_absolute_url elypsis=True object=plan image_object_fit=image_object_fit %}
+            {% description_card title=plan.title description=plan.goal|truncatechars:51 url=plan.get_absolute_url elypsis=True object=plan compact=True image_object_fit=image_object_fit %}
         {% endfor %}
     {% endif %}
 
diff --git a/src/open_inwoner/components/templates/components/Card/RenderCard.html b/src/open_inwoner/components/templates/components/Card/RenderCard.html
index e1f54d06ea..728a4ae107 100644
--- a/src/open_inwoner/components/templates/components/Card/RenderCard.html
+++ b/src/open_inwoner/components/templates/components/Card/RenderCard.html
@@ -10,7 +10,7 @@
         </span>
     {% endif %}
 
-    <div class="card__body--compact {% if direction %} card__body--direction-{{ direction }}{% endif %}{% if grid %} card__body--grid{% endif %}">
+    <div class="card__body{% if compact %}--compact{% endif %} {% if direction %} card__body--direction-{{ direction }}{% endif %}{% if grid %} card__body--grid{% endif %}">
         {% if title %}
             <p class="{% if compact %}h4{% else %}h3{% endif %}">
                 <span class="link link__text">{{ title }}</span>
diff --git a/src/open_inwoner/components/templates/components/Form/FileInput.html b/src/open_inwoner/components/templates/components/Form/FileInput.html
index 94f79fb65d..5b281b0796 100644
--- a/src/open_inwoner/components/templates/components/Form/FileInput.html
+++ b/src/open_inwoner/components/templates/components/Form/FileInput.html
@@ -1,11 +1,9 @@
-{% load i18n solo_tags button_tags card_tags form_tags icon_tags %}
-
-{% get_solo 'openzaak.OpenZaakConfig' as openzaak_config %}
+{% load i18n button_tags card_tags form_tags icon_tags %}
 
 <div class="form__control file-input" aria-live="polite">
     {% render_card direction="vertical" %}
         {% icon icon="upload" icon_position="before" outlined=True %}
-        <input class="file-input__input" id="{{ field.auto_id }}" name="file" type="file"{% if field.field.required %} required{% endif %}{% if multiple %} multiple{% endif %} data-max-size="{{ openzaak_config.max_upload_size }}" data-file-types="{{ openzaak_config.allowed_file_extensions }}">
+        <input class="file-input__input" id="{{ field.auto_id }}" name="file" type="file"{% if field.field.required %} required{% endif %}{% if multiple %} multiple{% endif %} data-max-size="{{ max_upload_size }}" data-file-types="{{ allowed_file_extensions }}">
         <label class="button button--primary file-input__label-empty" for="{{ field.auto_id }}">
             {% if multiple %}{% trans 'Sleep of selecteer bestanden' %}{% else %}{% trans 'Sleep of selecteer bestand' %}{% endif %}
         </label>
diff --git a/src/open_inwoner/components/templatetags/card_tags.py b/src/open_inwoner/components/templatetags/card_tags.py
index 3ddfe5fd20..843f1d5924 100644
--- a/src/open_inwoner/components/templatetags/card_tags.py
+++ b/src/open_inwoner/components/templatetags/card_tags.py
@@ -23,6 +23,7 @@ def card(href, title, **kwargs):
         - direction: string | can be set to "horizontal" to show contents horizontally.
         - inline: bool | Whether the card should be rendered inline.
         - src: string | the src of the header image.
+        - compact: bool | Whether the card has uniform padding on all sides.
         - stretch: bool | Whether to stretch the card vertically.
         - tinted: bool | whether to use gray as background color.
         - type: string (info) | Set to info for an info card.
diff --git a/src/open_inwoner/js/components/form/FileInput.js b/src/open_inwoner/js/components/form/FileInput.js
index 5d3d73df00..2507c86be5 100644
--- a/src/open_inwoner/js/components/form/FileInput.js
+++ b/src/open_inwoner/js/components/form/FileInput.js
@@ -20,7 +20,7 @@ export class FileInput extends Component {
    * @returns {string} of file extensions.
    */
   getUploadTypes() {
-    return this.getInput().dataset.fileTypes.replace(/["|'\[\]]/g, '')
+    return this.getInput().dataset.fileTypes.replace(/["'\[\]]/g, '')
   }
 
   /**
@@ -275,7 +275,6 @@ export class FileInput extends Component {
    * @return {string}
    */
   renderFileHTML(file) {
-    // renderFileHTML is a separate function, where the context of 'this' changes when it is called
     const { name, size, type } = file
     const ext = name.split('.').pop().toUpperCase()
     const sizeMB = (size / (1024 * 1024)).toFixed(2)
@@ -283,21 +282,17 @@ export class FileInput extends Component {
     const getFormNonFieldError = this.getFormNonFieldError()
     const formSubmitButton = this.getFormSubmitButton()
 
-    // Only show errors notification if data-max-file-size is exceeded + add error class to file-list
     const maxMegabytes = this.getLimit()
     const uploadFileTypes = this.getUploadTypes().toUpperCase()
 
     const sizeError = sizeMB > maxMegabytes
-    // Show fil-type error if allowed types DO contain the extension and returns true
-    const typeError = !uploadFileTypes.includes(ext)
+    const typeError = !uploadFileTypes.split(', ').includes(ext)
 
     const htmlStart = `
     <li class="file-list__list-item">
       <aside class="file">
         <div class="file__container">
-          <div class="file__file ${sizeError ? 'error' : ''} ${
-      typeError ? 'error' : ''
-    }">
+          <div class="file__file ${typeError || sizeError ? 'error' : ''}">
             <p class="file__symbol">
               <span aria-hidden="true" class="material-icons-outlined">${
                 type.match('image') ? 'image' : 'description'
@@ -310,34 +305,37 @@ export class FileInput extends Component {
               <span aria-hidden="true" class="material-icons-outlined">delete</span>
             </a>
           </div>
+          ${
+            typeError && sizeError
+              ? `
+              <p class="p p--small error">
+                <span aria-hidden="true" class="material-icons-outlined">warning_amber</span>
+                <span class="file-error__content">Dit bestand is te groot - en van een ongeldig type ("${ext}"). <br />Toegestaan zijn: ${uploadFileTypes}.</span>
+              </p>`
+              : typeError || sizeError
+              ? `
+              <p class="p p--small error">
+                <span aria-hidden="true" class="material-icons-outlined">warning_amber</span>
+                ${
+                  typeError
+                    ? `</span class="file-error__content">Dit type bestand ("${ext}") is ongeldig. Geldige bestandstypen zijn: ${uploadFileTypes}.</span>`
+                    : ''
+                }
+                ${
+                  sizeError
+                    ? '</span class="file-error__content">Dit bestand is te groot.</span>'
+                    : ''
+                }
+              </p>`
+              : ''
+          }
         </div>
       </aside>
     </li>`
 
-    // If uploaded field does NOT contain allowed extension
-    if (typeError) {
+    if (typeError || sizeError) {
       getFormNonFieldError.removeAttribute('hidden')
       formSubmitButton.setAttribute('disabled', 'true')
-
-      return (
-        htmlStart +
-        `<p class="p p--small error">
-          <span aria-hidden="true" class="material-icons-outlined">warning_amber</span>
-          Dit type bestand (${ext}) is ongeldig. Geldige bestandstypen zijn: ${uploadFileTypes}.
-        </p>`
-      )
-    }
-    if (sizeError) {
-      getFormNonFieldError.removeAttribute('hidden')
-      formSubmitButton.setAttribute('disabled', 'true')
-
-      return (
-        htmlStart +
-        `<p class="p p--small error">
-          <span aria-hidden="true" class="material-icons-outlined">warning_amber</span>
-          Dit bestand is te groot
-        </p>`
-      )
     } else {
       getFormNonFieldError.setAttribute('hidden', 'hidden')
       formSubmitButton.removeAttribute('disabled')
diff --git a/src/open_inwoner/templates/pages/cases/document_form.html b/src/open_inwoner/templates/pages/cases/document_form.html
index c2f8c8a4cb..ff487d5591 100644
--- a/src/open_inwoner/templates/pages/cases/document_form.html
+++ b/src/open_inwoner/templates/pages/cases/document_form.html
@@ -1,9 +1,11 @@
-{% load i18n form_tags button_tags icon_tags %}
+{% load i18n solo_tags form_tags button_tags icon_tags %}
+
+{% get_solo 'openzaak.OpenZaakConfig' as openzaak_config %}
 
 {% render_form id="document-upload" form=form method="POST" hxencoding="multipart/form-data" hxpost=hxpost_document_action hxtarget="#form_upload" submit_text=_("Bestand uploaden") extra_classes="case-detail-form" %}
     {% csrf_token %}
     {% input form.type no_label=True no_help=True class="label input" id="id_type" extra_classes="file-type__select" %}
-    {% file_input form.files %}
+    {% file_input form.files max_upload_size=openzaak_config.max_upload_size allowed_file_extensions=openzaak_config.allowed_file_extensions %}
     {% form_actions primary_text=_("Upload documenten") enctype="multipart/form-data" %}
     <div class="non-field-error" hidden>
         <p class="p p--small p--centered">{% trans "Verwijder eerst bestanden die niet voldoen aan de voorwaarden" %}</p>