diff --git a/js/nc_connector_edit_v2.js b/js/nc_connector_edit_v2.js index 59966ac..8c6abd7 100644 --- a/js/nc_connector_edit_v2.js +++ b/js/nc_connector_edit_v2.js @@ -78,6 +78,89 @@ + ''; } + function clearValidation(form) { + [].slice.call(form.querySelectorAll('[aria-invalid="true"]')).forEach(function (field) { + field.removeAttribute('aria-invalid'); + field.style.borderColor = ''; + field.style.boxShadow = ''; + }); + [].slice.call(form.querySelectorAll('[data-edit-v2-field-error]')).forEach(function (node) { node.remove(); }); + var box = form.querySelector('[data-edit-v2-error-summary]'); + if (box) box.remove(); + } + + function fieldNodes(form, fieldName) { + return [].slice.call(form.querySelectorAll('[name="'+fieldName.replace(/"/g, '\\"')+'"]')); + } + + function showValidation(form, data) { + clearValidation(form); + var message = (data && data.message) ? data.message : 'Die Verbindung konnte nicht gespeichert werden.'; + var summary = document.createElement('div'); + summary.dataset.editV2ErrorSummary = '1'; + summary.className = 'bratonien-main-cache__warning'; + summary.style.margin = '0 0 1rem'; + summary.style.padding = '.75rem'; + summary.style.border = '1px solid currentColor'; + summary.innerHTML = 'Speichern fehlgeschlagen: '+escapeHtml(message); + form.insertBefore(summary, form.firstChild); + + var first = null; + var fields = data && Array.isArray(data.fields) ? data.fields : []; + fields.forEach(function (fieldName) { + fieldNodes(form, fieldName).forEach(function (field) { + field.setAttribute('aria-invalid', 'true'); + field.style.borderColor = '#d65a5a'; + field.style.boxShadow = '0 0 0 1px #d65a5a'; + if (!first) first = field; + var note = document.createElement('span'); + note.dataset.editV2FieldError = '1'; + note.className = 'bratonien-main-cache__warning'; + note.style.display = 'block'; + note.style.marginTop = '.25rem'; + note.textContent = message; + field.insertAdjacentElement('afterend', note); + }); + }); + + if (first) { + first.scrollIntoView({block:'center', behavior:'smooth'}); + window.setTimeout(function () { first.focus(); }, 150); + } else { + summary.scrollIntoView({block:'center', behavior:'smooth'}); + } + } + + function submitEditor(form, editDialog) { + clearValidation(form); + if (!form.reportValidity()) return; + + var submit = form.querySelector('button[type="submit"]'); + if (submit) submit.disabled = true; + + var body = new FormData(form); + fetch('plugins/bratonien_tools/nc-connector-edit-save.php', { + method:'POST', + credentials:'same-origin', + cache:'no-store', + headers:{'Accept':'application/json'}, + body:body + }).then(function (response) { + return response.json().then(function (data) { + if (!response.ok || !data.ok) { + showValidation(form, data); + return; + } + editDialog.close(); + window.location.reload(); + }); + }).catch(function (error) { + showValidation(form, {message:error.message || String(error), fields:[]}); + }).finally(function () { + if (submit) submit.disabled = false; + }); + } + function openEditor(id) { var editDialog = dialog(); var content = editDialog.querySelector('[data-edit-v2-content]'); @@ -132,7 +215,7 @@ + '' + '' + '' - + '
' + + '
' + ''; var form = content.querySelector('[data-edit-v2-form]'); @@ -146,6 +229,11 @@ var row = remove.closest('[data-storage-row]'); if (row) row.remove(); }); + form.addEventListener('submit', function (event) { + event.preventDefault(); + event.stopPropagation(); + submitEditor(form, editDialog); + }); }).catch(function (error) { content.innerHTML = '

Bearbeiten nicht möglich: '+escapeHtml(error.message || String(error))+'

'; });