[#1978] Make uploadbutton and title show only when files are selected

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

@@ -19,7 +19,7 @@
     {% if field.errors %}{% errors errors=field.errors %}{% endif %}
 
     <div class="file-list" aria-live="polite">
-        <h4 class="h4">{% if multiple %}{% trans 'Geselecteerde bestanden' %}{% else %}{% trans 'Geselecteerd bestand' %}{% endif %}</h4>
+        <div class="file-list-selection" hidden><h4 class="file-list-selection__h4">{% if multiple %}{% trans 'Geselecteerde bestanden' %}{% else %}{% trans 'Geselecteerd bestand' %}{% endif %}</h4></div>
         <ul class="file-list__list" aria-live="polite" data-label-delete="{% trans 'Verwijderen' %}"></ul>
     </div>
 </div>

src/open_inwoner/js/components/cases/status_accordion.js

@@ -18,8 +18,6 @@ export class StatusAccordion {
       '.status-list__notification-content'
     )
     setTimeout(() => {
-      console.log('status is clicked')
-
       // Toggle any status list-element (current, completed, final, future)
       node.classList.toggle(
         'status--open',

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

@@ -55,6 +55,14 @@ export class FileInput extends Component {
     return this.node.querySelector(`${FileInput.selector} .file-list`)
   }
 
+  /**
+   * Return the element associated with indicating whether 1 or more files are selected.
+   * @return {HTMLDivElement}
+   */
+  getSelectionIndicator() {
+    return this.node.querySelector(`${FileInput.selector} .file-list-selection`)
+  }
+
   /**
    * Return the element associated with the file list.
    * @return {HTMLUListElement}
@@ -71,6 +79,14 @@ export class FileInput extends Component {
     return document.querySelector('.non-field-error')
   }
 
+  /**
+   * Returns the submit button of the form
+   * @return {HTMLDivElement}
+   */
+  getFormSubmitButton() {
+    return document.querySelector('#document-upload .button[type="submit"]')
+  }
+
   /**
    * Binds events to callbacks.
    * Callbacks should trigger `setState` which in turn triggers `render`.
@@ -218,13 +234,19 @@ export class FileInput extends Component {
       this.addFiles(files, true)
     }
 
+    const filesExist = files.length > 0
     const filesSection = this.getFilesSection()
+    const selectionIndicator = this.getSelectionIndicator()
     const additionalLabel = this.getLabelSelected()
     const emptyLabel = this.getLabelEmpty()
+    const formSubmitButton = this.getFormSubmitButton()
 
     // Only show these sections when files are selected.
-    filesSection.toggleAttribute('hidden', !files.length)
-    additionalLabel.toggleAttribute('hidden', !files.length)
+    filesSection.hidden = !filesExist
+    selectionIndicator.hidden = !filesExist
+    additionalLabel.hidden = !filesExist
+    formSubmitButton.hidden = !filesExist
+
     // Hide label when no files are selected
     emptyLabel.toggleAttribute('hidden', files.length > 0)
 
@@ -239,11 +261,13 @@ 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)
     const labelDelete = this.getFilesList().dataset.labelDelete || 'Delete'
     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()
@@ -275,6 +299,7 @@ export class FileInput extends Component {
 
     if (sizeMB > maxMegabytes) {
       getFormNonFieldError.removeAttribute('hidden')
+      formSubmitButton.setAttribute('disabled', 'true')
 
       return (
         htmlStart +
@@ -285,6 +310,7 @@ export class FileInput extends Component {
       )
     } else {
       getFormNonFieldError.setAttribute('hidden', 'hidden')
+      formSubmitButton.removeAttribute('disabled')
     }
 
     return htmlStart

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

@@ -34,6 +34,18 @@
     .button--primary[type='submit'] {
       justify-content: center;
       width: 100%;
+
+      &:disabled {
+        @extend .button--disabled;
+        background-color: var(--color-gray);
+        border-color: var(--color-gray);
+        color: var(--color-gray-90);
+        cursor: default;
+        font-weight: bold;
+        justify-content: center;
+        pointer-events: none;
+        width: 100%;
+      }
     }
 
     &:invalid [type='submit'] {
@@ -52,6 +64,14 @@
     .form__actions {
       display: block;
       margin: 0;
+
+      &-selection__h4 {
+        color: var(--font-color-heading-4);
+        font-family: var(--font-family-heading-4);
+        font-size: var(--font-size-heading-4);
+        font-weight: var(--font-weight-heading-4);
+        line-height: var(--font-line-height-heading-4);
+      }
     }
 
     /// Make required asterisk visible for this component