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

feat(datepicker): format any dates before submission

Browse Source 
format any date input values before submission on submit for forms, mass-inputs, async-forms and async-tables
This commit is contained in:
Sarah Vaupel 2019-08-13 18:03:18 +02:00
parent b9fd4d7d28
commit 1eccb0ee4a
4 changed files with 26 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
frontend/src/utils/async-form/async-form.js
View File

@ -1,4 +1,5 @@
import { Utility } from '../../core/utility';
import { Datepicker } from '../form/datepicker';
import './async-form.scss';
const ASYNC_FORM_INITIALIZED_CLASS = 'check-all--initialized';
@ -70,6 +71,10 @@ export class AsyncForm {
const url = this._element.getAttribute('action');
const headers = { };
// format any date values before submission
Datepicker.formatAllFormInputDateValues(this._element);
const body = new FormData(this._element);
const isModal = this._element.closest(MODAL_SELECTOR);

9
frontend/src/utils/async-table/async-table.js
View File

@ -1,4 +1,5 @@
import { Utility } from '../../core/utility';
import { Datepicker } from '../form/datepicker';
import { HttpClient } from '../../services/http-client/http-client';
import * as debounce from 'lodash.debounce';
import './async-table-filter.scss';
@ -238,6 +239,10 @@ export class AsyncTable {
_serializeTableFilterToURL(tableFilterForm) {
const url = new URL(getLocalStorageParameter('currentTableUrl') || window.location.href);
// format any date values before submission
Datepicker.formatAllFormInputDateValues(tableFilterForm);
const formData = new FormData(tableFilterForm);
for (var k of url.searchParams.keys()) {
@ -298,6 +303,10 @@ export class AsyncTable {
_changePagesizeHandler = () => {
const url = new URL(getLocalStorageParameter('currentTableUrl') || window.location.href);
// format any date values before submission
Datepicker.formatAllFormInputDateValues(this._pagesizeForm);
const formData = new FormData(this._pagesizeForm);
for (var k of url.searchParams.keys()) {

11
frontend/src/utils/form/datepicker.js
View File

@ -115,13 +115,20 @@ export class Datepicker {
/**
* Calls formatElementValue on all datepicker objects registered for a form.
* @param {*} formID ID of the form for which all datepicker date values should be formatted
* @param {*} form form for which all datepicker date values should be formatted
*/
static formatAllFormElementValues(formID) {
static formatAllFormInputDateValues(form) {
if (!Datepicker.datepickerCollections) {
// no datepicker collections yet (i.e. constructor was never called) => do nothing
return;
}
// if the form has no id, assign one randomly
if (!form.id) {
form.id = `f${Math.floor(Math.random() * 100000)}`;
}
const formID = form.id;
if (Datepicker.datepickerCollections.has(formID)) {
const datepickerInstances = Datepicker.datepickerCollections.get(formID);

6
frontend/src/utils/mass-input/mass-input.js
View File

@ -96,9 +96,6 @@ export class MassInput {
return false;
}
// format any date values before submission
Datepicker.formatAllFormElementValues(this._massInputForm.id);
event.preventDefault();
const requestBody = this._serializeForm(submitButton, enctype);
@ -161,6 +158,9 @@ export class MassInput {
}
_serializeForm(submitButton, enctype) {
// format any date values before submission
Datepicker.formatAllFormInputDateValues(this._massInputForm);
const formData = new FormData(this._massInputForm);
// manually add name and value of submit button to formData