From dd573b501f16e01eeccc859f0d01209b52087ca4 Mon Sep 17 00:00:00 2001 From: Dennis Eichhorn Date: Sat, 29 Jan 2022 20:50:43 +0100 Subject: [PATCH] expand forms --- .gitignore | 3 ++- UI/Component/Form.js | 48 +++++++++++++++++++++++++++++++++----------- Views/FormView.js | 48 +++++++++++++++++++++++++------------------- 3 files changed, 65 insertions(+), 34 deletions(-) diff --git a/.gitignore b/.gitignore index aa026ce..7abf174 100644 --- a/.gitignore +++ b/.gitignore @@ -1,4 +1,5 @@ tests/jasmin* vendor .vscode -*.cache \ No newline at end of file +*.cache +.directory \ No newline at end of file diff --git a/UI/Component/Form.js b/UI/Component/Form.js index 896e5f0..8a4a92a 100644 --- a/UI/Component/Form.js +++ b/UI/Component/Form.js @@ -163,6 +163,30 @@ export class Form self.submit(self.forms[id], submits[i]); }); } + + // if true submit form on change + if (this.forms[id].isOnChange()) { + const hasUiContainer = this.forms[id].getFormElement().getAttribute('data-ui-content'); + const onChangeContainer = hasUiContainer !== null + ? this.forms[id].getFormElement().querySelector(hasUiContainer) + : this.forms[id].getFormElement(); + + onChangeContainer.addEventListener('change', function (event) + { + jsOMS.preventAll(event); + + const target = event.target.tagName.toLowerCase(); + + if (target === 'input' || target === 'textarea') { + let dataParent = null; + if (self.forms[id].getFormElement().tagName.toLowerCase() === 'table') { + dataParent = event.srcElement.closest(self.forms[id].getFormElement().getAttribute('data-ui-element')); + } + + self.submit(self.forms[id], null, dataParent); + } + }); + } }; bindButtons (id, e = null) @@ -256,7 +280,7 @@ export class Form * * @since 1.0.0 */ - submit (form, button) + submit (form, button = null, container = null) { /* Handle injects */ const self = this, @@ -273,7 +297,7 @@ export class Form if (!this.app.eventManager.isAttached(form.getId())) { this.app.eventManager.attach(form.getId(), function () { - self.submitForm(form, action); + self.submitForm(form, action, container); }, true); } @@ -313,9 +337,9 @@ export class Form * * @since 1.0.0 */ - submitForm (form, action = null) + submitForm (form, action = null, container = null) { - const data = form.getData(); + const data = form.getData(container); if (!form.isValid(data)) { this.app.notifyManager.send( @@ -468,7 +492,7 @@ export class Form return; } - const formElement = document.getElementById(id); + const formElement = self.forms[id].getFormElement(); const parents = []; const selectors = formElement.getAttribute('data-add-element').split(','), selectorLength = selectors.length; @@ -657,7 +681,7 @@ export class Form { const length = data.length; for (let i = 0; i < length; ++i) { - const matches = document.getElementById(formId).querySelectorAll('[data-tpl-' + type + '="' + data[i].getAttribute('data-tpl-' + type) + '"'); + const matches = self.forms[formId].getFormElement().querySelectorAll('[data-tpl-' + type + '="' + data[i].getAttribute('data-tpl-' + type) + '"'); const path = data[i].hasAttribute('data-tpl-' + type + '-path') ? data[i].getAttribute('data-tpl-' + type + '-path') : null; const matchLength = matches.length; @@ -709,7 +733,7 @@ export class Form const self = this; createForm.addEventListener('click', function () { - const formElement = document.getElementById(id); + const formElement = self.forms[id].getFormElement(); const subMain = formElement.getAttribute('data-add-content').charAt(0) === '#' ? document.querySelector(formElement.getAttribute('data-add-content')) : formElement.querySelector(formElement.getAttribute('data-add-content')); @@ -746,7 +770,7 @@ export class Form * The container element for inline adding isn't always tbody */ self.app.uiManager.getFormManager().get(eleId + '-form').injectSubmit(function () { - document.getElementById(id).getElementsByTagName('tbody')[0].removeChild( + self.forms[id].getFormElement().getElementsByTagName('tbody')[0].removeChild( document.getElementById(eleId) ); }); @@ -831,7 +855,7 @@ export class Form const self = this; update.addEventListener('click', function () { - const formElement = document.getElementById(id); + const formElement = self.forms[id].getFormElement(); const parents = []; const selectors = formElement.getAttribute('data-update-element').split(','), selectorLength = selectors.length; @@ -1042,7 +1066,7 @@ export class Form const self = this; save.addEventListener('click', function () { - const formElement = document.getElementById(id); + const formElement = self.forms[id].getFormElement(); const parentsTpl = {}; const parentsContent = {}; const selectors = formElement.getAttribute('data-update-element').split(','), @@ -1284,13 +1308,13 @@ export class Form const self = this; update.addEventListener('click', function () { - const formElement = document.getElementById(id); + const formElement = self.forms[id].getFormElement(); const parent = this.closest(formElement.getAttribute('data-update-element')); const formId = formElement.getAttribute('data-update-form'); const values = parent.querySelectorAll('[data-tpl-value]'); const text = parent.querySelectorAll('[data-tpl-text]'); - const fields = document.getElementById(formId).querySelectorAll('[data-form="' + id + '"]'); + const fields = self.forms[formId].getFormElement().querySelectorAll('[data-form="' + id + '"]'); let length = 0; // clear form values to prevent old values getting mixed with update values diff --git a/Views/FormView.js b/Views/FormView.js index c772bd1..658cbd2 100644 --- a/Views/FormView.js +++ b/Views/FormView.js @@ -34,12 +34,14 @@ export class FormView { this.id = id; - this.initializeMembers(); - this.bind(); - this.success = null; this.finally = null; this.lastSubmit = 0; + + this.form = null; + + this.initializeMembers(); + this.bind(); }; /** @@ -106,6 +108,13 @@ export class FormView this.lastSubmit = Math.floor(Date.now()); }; + isOnChange () + { + const isOnChange = this.getFormElement().getAttribute('data-on-change'); + + return (isOnChange === 'true' || isOnChange === '1'); + }; + /** * Get submit elements * @@ -305,13 +314,15 @@ export class FormView /** * Get form elements * + * @param {object} container Data container, null = entire form or element e.g. table row + * * @return {Array} * * @since 1.0.0 */ - getFormElements () + getFormElements (container = null) { - const form = document.getElementById(this.id); + const form = container === null ? this.getFormElement() : container; if (!form) { return []; @@ -412,15 +423,17 @@ export class FormView /** * Get form data * + * @param {container} Data container. Null = entire form, container e.g. single row in a table + * * @return {FormData} * * @since 1.0.0 */ - getData () + getData (container = null) { const data = {}, formData = new FormData(), - elements = this.getFormElements(), + elements = this.getFormElements(container), length = elements.length; let value = null; @@ -499,7 +512,7 @@ export class FormView const elements = this.getFormElements(), length = elements.length; - const form = document.getElementById(this.id); + const form = this.getFormElement(); form.reset(); for (let i = 0; i < length; ++i) { @@ -530,6 +543,11 @@ export class FormView return this.id; }; + getFormElement () + { + return this.form === null ? (this.form = document.getElementById(this.id)) : this.form; + }; + /** * Validate form * @@ -591,18 +609,6 @@ export class FormView return invalid; } - /** - * Get form element - * - * @return {Object} - * - * @since 1.0.0 - */ - getElement () - { - return document.getElementById(this.getId()); - }; - /** * Get form element id * @@ -648,7 +654,7 @@ export class FormView { this.clean(); - const e = document.getElementById(this.id); + const e = this.getFormElement(); if (!e) { return;