Merge pull request #553 from maykinmedia/fix/1268-prevent-multiple-ca…

…se-documents-upload

[#1268] Disable case document button when form is being submitted

src/open_inwoner/js/components/cases/index.js

@@ -0,0 +1,16 @@
+class DisableSubmitButton {
+  constructor(form) {
+    this.form = form
+    this.form.addEventListener('submit', this.disableButton.bind(this))
+  }
+
+  disableButton() {
+    const submitButton = this.form.querySelector('button[type="submit"]')
+    submitButton.setAttribute('disabled', 'true')
+  }
+}
+
+const caseDocumentForms = document.querySelectorAll('#document-upload')
+;[...caseDocumentForms].forEach(
+  (caseDocumentForm) => new DisableSubmitButton(caseDocumentForm)
+)

src/open_inwoner/js/components/index.js

@@ -6,6 +6,7 @@ import './anchor-menu'
 import './autocomplete-search'
 import './autocomplete'
 import './autosumbit'
+import './cases'
 import './confirmation'
 import './contacts'
 import './datepicker'

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

@@ -8,3 +8,10 @@
     }
   }
 }
+
+#document-upload .button[type='submit']:disabled {
+  border-color: var(--color-gray) !important;
+  color: var(--color-gray-light);
+  pointer-events: none;
+  cursor: default;
+}