💄 [#1795] Show selected documents to be uploaded (#833)

* 🎨 [#1795] Added skeleton for selected case-documents to be uploaded

* ✨ #1795 - feat: implement drag-and-drop enabled file input.

* 🎨 [#1795] Removed tag and made some file-upload styles conforming to design

* [#1795] Fixed linting

* [#1795] Added enabled button styles, remove unused upload-document JS

* 🎨 [#1795] Added skeleton for selected case-documents to be uploaded

* ✨ #1795 - feat: implement drag-and-drop enabled file input.

* 🎨 [#1795] Removed tag and made some file-upload styles conforming to design

* [#1795] Removed unused upload-document JS

* 💄 #1795 - fix: fix inconsistencies between upstream file component and file component rendered by file input.

* 🚸 #1795 - feat: improve drag and drop ux.

* 👕 #1795 - prettier.

* 👌 #1795 - refactor: refactor try/except block to use else instead of AttributeError.

* 🎨 #1795 - style: remove whitespace.

* 🐛 #1795 - fix: multiple is not ready yet.

* 💚 #1795 - fix: re-add AttributeError due to failing tests.

* 💄 [#1795] Changed secondary to primary

---------

Co-authored-by: Sven van de Scheur <[email protected]>

src/open_inwoner/cms/cases/forms.py

@@ -1,30 +1,38 @@
 import os
 
 from django import forms
-from django.core.exceptions import ValidationError
+from django.core.exceptions import ObjectDoesNotExist, ValidationError
 from django.utils.translation import gettext_lazy as _
 
 from open_inwoner.openzaak.models import (
     OpenZaakConfig,
+    ZaakTypeConfig,
     ZaakTypeInformatieObjectTypeConfig,
 )
-from open_inwoner.utils.validators import CharFieldValidator
 
 
 class CaseUploadForm(forms.Form):
-    title = forms.CharField(
-        label=_("Titel bestand"), max_length=255, validators=[CharFieldValidator()]
-    )
     type = forms.ModelChoiceField(
         ZaakTypeInformatieObjectTypeConfig.objects.none(),
         empty_label=None,
         label=_("Bestand type"),
     )
-    file = forms.FileField(label=_("Bestand"))
+    file = forms.FileField(label=_("Bestand"), required=True)
 
     def __init__(self, case, **kwargs):
+        self.oz_config = OpenZaakConfig.get_solo()
         super().__init__(**kwargs)
 
+        help_text = f"Grootte max. { self.oz_config.max_upload_size } MB, toegestane document formaten: { ', '.join(self.oz_config.allowed_file_extensions) }."
+
+        try:
+            ztc = ZaakTypeConfig.objects.filter_case_type(case.zaaktype).get()
+            help_text = ztc.description or help_text
+        except (AttributeError, ObjectDoesNotExist):
+            pass
+
+        self.fields["file"].help_text = help_text
+
         if case:
             self.fields[
                 "type"
@@ -41,14 +49,13 @@ def __init__(self, case, **kwargs):
     def clean_file(self):
         file = self.cleaned_data["file"]
 
-        config = OpenZaakConfig.get_solo()
-        max_allowed_size = 1024**2 * config.max_upload_size
-        allowed_extensions = sorted(config.allowed_file_extensions)
+        max_allowed_size = 1024**2 * self.oz_config.max_upload_size
+        allowed_extensions = sorted(self.oz_config.allowed_file_extensions)
         filename, file_extension = os.path.splitext(file.name)
 
         if file.size > max_allowed_size:
             raise ValidationError(
-                f"Een aangeleverd bestand dient maximaal {config.max_upload_size} MB te zijn, uw bestand is te groot."
+                f"Een aangeleverd bestand dient maximaal {self.oz_config.max_upload_size} MB te zijn, uw bestand is te groot."
             )
 
         if file_extension.lower().replace(".", "") not in allowed_extensions:

src/open_inwoner/cms/cases/tests/test_htmx.py

@@ -432,7 +432,8 @@ def test_cases(self, m):
         upload_form = page.locator("#document-upload")
         expect(upload_form).to_be_visible()
 
-        upload_form.get_by_label(_("Document selecteren")).set_input_files(
+        file_input = upload_form.get_by_text(_("Sleep of selecteer bestand"))
+        file_input.set_input_files(
             files=[
                 {
                     "name": "uploaded_test_file.txt",
@@ -441,13 +442,9 @@ def test_cases(self, m):
                 }
             ],
         )
-        submit_button = upload_form.get_by_role("button", name=_("Document uploaden"))
+        submit_button = upload_form.get_by_role("button", name=_("Upload documenten"))
         expect(submit_button).to_be_visible()
 
-        title_input = upload_form.get_by_label(_("Titel bestand"))
-        expect(title_input).to_be_visible()
-        title_input.fill("uploaded document")
-
         submit_button.click()
 
         # check for new file

src/open_inwoner/cms/cases/views/status.py

@@ -490,7 +490,7 @@ def handle_document_upload(self, request, form):
         cleaned_data = form.cleaned_data
 
         file = cleaned_data["file"]
-        title = cleaned_data["title"]
+        title = file.name
         document_type = cleaned_data["type"]
         source_organization = self.case.bronorganisatie
 

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

@@ -50,7 +50,7 @@
                 {% enddropdown %}
             {% elif show_download %}
                 {% trans "Download" as download %}
-                {% link href=url text=download secondary=True download=True icon="file_download" icon_outlined=True icon_position="before" %}
+                {% link href=url text=download secondary=True download=True hide_text=True icon="file_download" icon_outlined=True icon_position="before" %}
             {% endif %}
             {% if description %}<p class="p p--small">{{ description }}</p>{% endif %}
         </div>

src/open_inwoner/components/templates/components/Form/FileInput.html

@@ -1,21 +1,19 @@
-{% load i18n form_tags icon_tags %}
+{% load i18n button_tags card_tags form_tags icon_tags %}
 
-<div class="form__control {{ extra_classes|default:"upload" }}">
-    <div class="inputfile-group">
-        <label class="label">
-            <span class="input-file">
-            {{ field|addclass:"inputfile" }}
-
-                <span class="label__label" for="{{ field.auto_id }}">
-                {% icon icon="cloud_upload" icon_position="before" outlined=True %}
-                    {{ text }}
+<div class="form__control file-input">
+    {% 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 %}>
+        <label class="button button--primary" aria-label="_('Sleep of selecteer bestand')" for="id_file">
+            {% trans 'Sleep of selecteer bestand' %}
+        </label>
+    {% endrender_card %}
 
-                </span>{% if field.field.required %}<span class="label__label--required"> * </span>{% endif %}
-            </span>
+    {% if field.help_text %}<p class="p p--muted p--small">{{ field.help_text }}</p>{% endif %}
+    {% if field.errors %}{% errors errors=field.errors %}{% endif %}
 
-            {% if field.errors %}
-                {% errors errors=field.errors %}
-            {% endif %}
-        </label>
+    <div class="file-list" aria-live="polite">
+        <h4 class="h4">{% trans 'Geselecteerd bestand'%}</h4>
+        <ul class="file-list__list" aria-live="polite" data-label-delete="{% trans 'Verwijderen' %}"></ul>
     </div>
 </div>

src/open_inwoner/components/templatetags/form_tags.py

@@ -277,12 +277,12 @@ def input(field, **kwargs):
 
 
 @register.inclusion_tag("components/Form/FileInput.html")
-def file_input(file, text, **kwargs):
+def file_input(file, text="", **kwargs):
     """
     Displaying a file upload interface.
 
     Usage:
-        {% file_input form.field text=_('Document selecteren') %}
+        {% file_input form.field text=_('Selecteer bestanden') %}
 
     Variables:
         + field: Field | The field that needs to be rendered.

src/open_inwoner/components/templatetags/helpers.py

@@ -63,4 +63,7 @@ def get_product_url(context, product):
 def as_attributes(attribute_dict):
     if not attribute_dict:
         return ""
-    return format_html_join(" ", '{}="{}"', attribute_dict.items())
+    try:
+        return format_html_join(" ", '{}="{}"', attribute_dict.items())
+    except AttributeError:
+        return attribute_dict

src/open_inwoner/js/components/abstract/component.js

@@ -20,6 +20,7 @@ export class Component {
 
     this.setState(initialState)
     this.bindEvents()
+    this.setupMutationObserver()
   }
 
   /**
@@ -28,6 +29,28 @@ export class Component {
    */
   bindEvents() {}
 
+  /**
+   * Unbinds events from callbacks.
+   * Callbacks functions should be strict equal between `bindEvents()` and `unbindEvents`.
+   * Use this to call `removeEventListener()` for every `addEventListener`()` called.
+   */
+  unbindEvents() {}
+
+  /**
+   * Sets up the mutation observer managing §this.unbindEvents()`.
+   */
+  setupMutationObserver() {
+    this.mutationObserver = new MutationObserver((mutations) => {
+      mutations.forEach((mutation) => {
+        if (mutation.type === 'childList' && !document.contains(this.node)) {
+          // Element has been removed from the DOM
+          this.unbindEvents()
+          this.mutationObserver.disconnect() // Stop observing once the element is removed
+        }
+      })
+    })
+  }
+
   /**
    * Mutates state, then re-renders.
    * @param {Object} changes Object containing (only) changes to state.