Merge pull request #858 from maykinmedia/feature/1817-show-errors-for-selected-documents

💄 [#1817] Show errors for selected documents

Author: alextreme

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

@@ -1,15 +1,21 @@
-{% load i18n button_tags card_tags form_tags icon_tags %}
+{% load i18n solo_tags button_tags card_tags form_tags icon_tags %}
 
-<div class="form__control file-input">
+{% get_solo 'openzaak.OpenZaakConfig' as openzaak_config %}
+
+<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 %}>
-        <label class="button button--primary" for="{{ field.auto_id }}">
+        <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 }}">
+        <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>
+        <label class="button button--borderless file-input__label-selected" for="{{ field.auto_id }}">
+        {% icon icon="add_circle_outlined" icon_position="before" outlined=True %}
+            {% if multiple %}{% trans 'Selecteer meer bestanden' %}{% else %}{% trans 'Selecteer ander bestand' %}{% endif %}
+        </label>
     {% endrender_card %}
 
-    {% if field.help_text %}<p class="p p--muted p--small">{{ field.help_text }}</p>{% endif %}
+    {% if field.help_text %}<p class="p p--small p--centered">{{ field.help_text }}</p>{% endif %}
     {% if field.errors %}{% errors errors=field.errors %}{% endif %}
 
     <div class="file-list" aria-live="polite">

src/open_inwoner/js/components/form/FileInput.js

@@ -7,6 +7,14 @@ export class FileInput extends Component {
   /** @type {string} Use this as selector to instantiate the file input. */
   static selector = '.file-input'
 
+  /**
+   * Get configured maximum filesize from 'data-max-size' and use in node.
+   * @returns {number} Maximum file size.
+   */
+  getLimit() {
+    return parseInt(this.getInput().dataset.maxSize)
+  }
+
   /**
    * Returns the card (drop zone) associated with the file input.
    * @return {HTMLDivElement}
@@ -23,6 +31,22 @@ export class FileInput extends Component {
     return this.node.querySelector(`${FileInput.selector}__input`)
   }
 
+  /**
+   * Return the label when zero files are selected.
+   * @return HTMLInputElement
+   */
+  getLabelEmpty() {
+    return this.node.querySelector(`${FileInput.selector}__label-empty`)
+  }
+
+  /**
+   * Return the label if more than 0 files are selected.
+   * @return HTMLInputElement
+   */
+  getLabelSelected() {
+    return this.node.querySelector(`${FileInput.selector}__label-selected`)
+  }
+
   /**
    * Return the element associated with the files section.
    * @return {HTMLDivElement}
@@ -39,6 +63,14 @@ export class FileInput extends Component {
     return this.node.querySelector(`${FileInput.selector} .file-list__list`)
   }
 
+  /**
+   * Returns the element outside of this component, which prompts the user to delete file-items that exceed the limit.
+   * @return {HTMLDivElement}
+   */
+  getFormNonFieldError() {
+    return document.querySelector('.form__non-field-error')
+  }
+
   /**
    * Binds events to callbacks.
    * Callbacks should trigger `setState` which in turn triggers `render`.
@@ -90,13 +122,15 @@ export class FileInput extends Component {
 
   /**
    * Gets called when dragging starts on the card (drop zone).
+   * @param {Event} e
    */
-  onDragEnter(e) {
+  onDragEnter() {
     this.node.classList.add('file-input--drag-active')
   }
 
   /**
    * Gets called when dragging ends on the card (drop zone).
+   * @param {Event} e
    */
   onDragLeave(e) {
     if (e.target !== this.getCard()) {
@@ -106,8 +140,7 @@ export class FileInput extends Component {
   }
 
   /**
-   * Gets called when click event is received on the files list, it originates from a delete button, handle the deletion
-   * accordingly.
+   * Gets called when click event is received on the files list, it originates from a delete button, handle the deletion accordingly.
    * @param {PointerEvent} e
    */
   onClick(e) {
@@ -164,10 +197,14 @@ export class FileInput extends Component {
   render() {
     const { files } = this.getInput()
     const filesSection = this.getFilesSection()
+    const additionalLabel = this.getLabelSelected()
+    const emptyLabel = this.getLabelEmpty()
 
-    // Only show files section when files are selected.
-    filesSection.setAttribute('hidden', true)
-    files.length && filesSection.removeAttribute('hidden')
+    // Only show these sections when files are selected.
+    filesSection.toggleAttribute('hidden', !files.length)
+    additionalLabel.toggleAttribute('hidden', !files.length)
+    // Hide label when no files are selected
+    emptyLabel.toggleAttribute('hidden', files.length > 0)
 
     // Populate the file list.
     const html = [...files].map((file) => this.renderFileHTML(file)).join('')
@@ -184,27 +221,50 @@ export class FileInput extends Component {
     const ext = name.split('.').pop().toUpperCase()
     const sizeMB = (size / (1024 * 1024)).toFixed(2)
     const labelDelete = this.getFilesList().dataset.labelDelete || 'Delete'
+    const getFormNonFieldError = this.getFormNonFieldError()
+
+    // Only show errors notification if data-max-file-size is exceeded + add error class to file-list
+    const maxMegabytes = this.getLimit()
 
-    return `
+    const htmlStart = `
       <li class="file-list__list-item">
         <aside class="file">
-        <div class="file__container">
-            <div class="file__file">
-                <p class="file__symbol">
+          <div class="file__container">
+            ${
+              sizeMB > maxMegabytes
+                ? '<div class="file__file error">'
+                : '<div class="file__file">'
+            }
+              <p class="file__symbol">
                 <span aria-hidden="true" class="material-icons-outlined">${
                   type.match('image') ? 'image' : 'description'
                 }</span>
-                </p>
-                <p class="p file__data">
-                  <span class="file__name">${name} (${ext}, ${sizeMB}MB)</span>
-                </p>
-                <a class="link link--primary" href="#" role="button" aria-label="${labelDelete}">
-                  <span aria-hidden="true" class="material-icons-outlined">delete</span>
-                </a>
+              </p>
+              <p class="p file__data">
+                <span class="file__name">${name} (${ext}, ${sizeMB}MB)</span>
+              </p>
+              <a class="link link--primary" href="#" role="button" aria-label="${labelDelete}">
+                <span aria-hidden="true" class="material-icons-outlined">delete</span>
+              </a>
             </div>
           </div>
         </aside>
-      </li>
-    `
+      </li>`
+
+    if (sizeMB > maxMegabytes) {
+      getFormNonFieldError.removeAttribute('hidden')
+
+      return (
+        htmlStart +
+        `<p class="p p--small p--centered error">
+          <span aria-hidden="true" class="material-icons-outlined">warning_amber</span>
+          Dit bestand is te groot
+        </p>`
+      )
+    } else {
+      getFormNonFieldError.setAttribute('hidden', 'hidden')
+    }
+
+    return htmlStart
   }
 }

src/open_inwoner/scss/components/Button/Button.scss

@@ -63,6 +63,11 @@
     }
   }
 
+  &--fullwidth {
+    display: block;
+    width: 100%;
+  }
+
   &#{&}--primary {
     background-color: var(--color-primary);
     border: 1px solid var(--color-primary);
@@ -169,6 +174,10 @@
   > .link__text {
     width: 100%;
   }
+
+  &[hidden] {
+    display: none;
+  }
 }
 
 .h2 + .button,

src/open_inwoner/scss/components/Cases/CaseDetail.scss

@@ -15,8 +15,9 @@
   }
 
   #document-upload {
+    color: var(--color-gray-dark);
     gap: 0;
-    padding: 0 0 var(--row-height-giant) 0;
+    padding: 0 0 var(--row-height) 0;
 
     &:invalid [type='submit'] {
       @extend .button--disabled;
@@ -28,20 +29,12 @@
       justify-content: center;
       pointer-events: none;
       width: 100%;
-
-      @media (min-width: 768px) {
-        width: initial;
-      }
     }
 
     .file-list,
     .form__actions {
       display: block;
       margin: 0;
-
-      @media (min-width: 768px) {
-        display: grid;
-      }
     }
 
     /// Make required asterisk visible for this component

src/open_inwoner/scss/components/File/FileList.scss

@@ -12,7 +12,7 @@
   }
 
   &__list-item {
-    margin-bottom: var(--spacing-large);
+    margin-bottom: var(--spacing-medium);
 
     &:last-child {
       margin-bottom: 0;

src/open_inwoner/scss/components/Form/FileInput.scss

@@ -19,6 +19,25 @@
   .card__body {
     box-sizing: border-box;
     padding: var(--row-height);
+
+    .button--borderless {
+      display: flex;
+      gap: var(--spacing-medium);
+      color: var(--color-primary);
+      font-weight: bold;
+
+      [class*='icon'] {
+        color: var(--color-primary);
+        font-size: var(--font-size-body);
+        position: static !important;
+        transform: none !important;
+        height: var(--font-size-body);
+      }
+
+      &[hidden] {
+        display: none;
+      }
+    }
   }
 
   [class*='icon'] {
@@ -56,5 +75,35 @@
 
   & .file-list {
     margin-bottom: var(--spacing-large) !important;
+
+    // upload-error styles
+    .file__file.error {
+      border-color: var(--color-red-notification);
+
+      .p {
+        color: var(--color-gray-90);
+      }
+
+      [class*='icon'] {
+        color: var(--color-gray-light);
+      }
+
+      .link [class*='icon'] {
+        color: var(--color-red-notification);
+      }
+    }
+
+    .p--centered.error {
+      color: var(--color-red-notification);
+      display: flex;
+      align-items: normal;
+      gap: var(--spacing-small);
+      justify-content: flex-start;
+
+      [class*='icon'] {
+        color: var(--color-red-notification);
+        font-size: var(--font-size-body-large);
+      }
+    }
   }
 }

src/open_inwoner/scss/components/Form/FileInputDefault.scss

@@ -15,7 +15,7 @@ input[type='file'] {
   @media (min-width: 768px) {
     display: flex;
     flex-direction: column;
-    min-width: var(--form-width);
+    min-width: var(--mobile-xs-width);
   }
 }
 

src/open_inwoner/scss/components/Form/NonFieldError.scss

@@ -0,0 +1,6 @@
+.form {
+  &__non-field-error {
+    color: var(--color-gray-dark);
+    margin-top: var(--spacing-medium);
+  }
+}

src/open_inwoner/scss/components/Typography/P.scss

@@ -20,6 +20,10 @@
     color: var(--color-mute);
   }
 
+  &--centered {
+    text-align: center;
+  }
+
   &:empty {
     margin: 0 !important;
   }

src/open_inwoner/scss/components/_index.scss

@@ -37,6 +37,7 @@
 @import './Form/Input.scss';
 @import './Form/Label.scss';
 @import './Form/MultiCheckbox.scss';
+@import './Form/NonFieldError.scss';
 @import './Form/Radio.scss';
 @import './Form/Search.scss';
 @import './Form/Select.scss';

src/open_inwoner/templates/pages/cases/document_form.html

@@ -4,5 +4,8 @@
     {% 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 %}
-    {% form_actions primary_text=_("Upload documenten") primary_icon="arrow_forward" enctype="multipart/form-data" %}
+    {% form_actions primary_text=_("Upload documenten") enctype="multipart/form-data" %}
+    <div class="form__non-field-error" hidden>
+        <p class="p p--small p--centered">{% trans "Verwijder eerst bestanden die niet voldoen aan de voorwaarden" %}</p>
+    </div>
 {% endrender_form %}