[#1978] Added hide-behavior for document-upload button and selection …

…indicator
maykinmedia · Jan 11, 2024 · a84ee86 · a84ee86
1 parent b3f5504
commit a84ee86
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 5 deletions.
diff --git a/src/open_inwoner/components/templates/components/Form/FileInput.html b/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>
diff --git a/src/open_inwoner/js/components/cases/status_accordion.js b/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',

diff --git a/src/open_inwoner/js/components/form/FileInput.js b/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 the notification indicating 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,20 @@ 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)
 
@@ -244,6 +267,7 @@ export class FileInput extends Component {
     const sizeMB = (size / (1024 * 1024)).toFixed(2)
     const labelDelete = this.getFilesList().dataset.labelDelete || 'Delete'
     const getFormNonFieldError = this.getFormNonFieldError()
+    const getFormSubmitButton = 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')
+      getFormSubmitButton.setAttribute('disabled', 'true')
 
       return (
         htmlStart +
@@ -285,6 +310,7 @@ export class FileInput extends Component {
       )
     } else {
       getFormNonFieldError.setAttribute('hidden', 'hidden')
+      getFormSubmitButton.removeAttribute('disabled')
     }
 
     return htmlStart

diff --git a/src/open_inwoner/scss/components/Cases/CaseDetail.scss b/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