fraport/fradrive
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

more robust mass input form data handling

Browse Source
This commit is contained in:
Felix Hamann 2019-05-04 16:46:16 +02:00
parent 50b040dc41
commit e77df30632
1 changed files with 18 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
static/js/utils/massInput.js
View File

@ -23,6 +23,7 @@
var MASS_INPUT_UTIL_NAME = 'massInput'; var MASS_INPUT_UTIL_NAME = 'massInput';
var MASS_INPUT_UTIL_SELECTOR = '[uw-mass-input]'; var MASS_INPUT_UTIL_SELECTOR = '[uw-mass-input]';
var MASS_INPUT_CELL_SELECTOR = '.massinput__cell';
var MASS_INPUT_INITIALIZED_CLASS = 'mass-input--initialized'; var MASS_INPUT_INITIALIZED_CLASS = 'mass-input--initialized';
var massInputUtil = function(element) { var massInputUtil = function(element) {
@ -30,8 +31,6 @@
var massInputFormSubmitHandler; var massInputFormSubmitHandler;
var massInputForm; var massInputForm;
var massInputEnctype;
function init() { function init() {
if (!element) { if (!element) {
throw new Error('Mass Input utility cannot be setup without an element!'); throw new Error('Mass Input utility cannot be setup without an element!');
@ -64,7 +63,7 @@
var method = massInputForm.getAttribute('method') || 'POST'; var method = massInputForm.getAttribute('method') || 'POST';
var url = massInputForm.getAttribute('action') || window.location.href; var url = massInputForm.getAttribute('action') || window.location.href;
massInputEnctype = massInputForm.getAttribute('enctype') || 'application/json'; var enctype = massInputForm.getAttribute('enctype') || 'application/json';
var requestFn; var requestFn;
if (HttpClient[method.toLowerCase()]) { if (HttpClient[method.toLowerCase()]) {
@ -79,14 +78,17 @@
return false; return false;
} }
// find the according massinput cell thats hosts the element that triggered the submit
var massInputCell = activeElement.closest(MASS_INPUT_CELL_SELECTOR);
event.preventDefault(); event.preventDefault();
var requestBody = serializeForm(); var requestBody = serializeForm(massInputCell, enctype);
if (requestFn) { if (requestFn) {
requestFn( requestFn(
url, url,
{ {
'Content-Type': massInputEnctype, 'Content-Type': enctype,
'Mass-Input-Shortcircuit': massInputId, 'Mass-Input-Shortcircuit': massInputId,
}, },
requestBody, requestBody,
@ -109,24 +111,23 @@
} }
} }
function serializeForm() { function serializeForm(massInputCell, enctype) {
var formData = new FormData(massInputForm); var formData = new FormData(massInputForm);
Array.from(element.querySelectorAll('button:focus, button:active')).forEach(function (el) { // manually add name and value of submit button to formData
if (!el.name || !el.value) if (massInputCell) {
return; var submitButton = massInputCell.querySelector('button[type="submit"][name][value]');
if (submitButton) {
formData.append(submitButton.name, submitButton.value);
}
}
console.log(el); if (enctype === 'application/x-www-form-urlencoded') {
formData.append(el.name, el.value);
});
if (massInputEnctype === 'application/x-www-form-urlencoded') {
return new URLSearchParams(formData); return new URLSearchParams(formData);
} else if (massInputEnctype === 'multipart/form-data') { } else if (enctype === 'multipart/form-data') {
return formData; return formData;
} else { } else {
throw new Error('Unsupported form enctype: ' + massInputEnctype); throw new Error('Unsupported form enctype: ' + enctype);
} }
} }