Jingga/jsOMS
1
0
Fork 0
mirror of https://github.com/Karaka-Management/jsOMS.git synced 2026-02-18 18:18:40 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

improve git form update/delete

Browse Source
This commit is contained in:
Dennis Eichhorn 2023-05-24 18:07:28 +00:00
parent bd6c58ddff
commit 0adf8dbf94
3 changed files with 772 additions and 752 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

204
UI/Component/Form.js
View File

@ -193,16 +193,16 @@ export class Form
}
};
formActions (self, event, id) {
let elementIndex = 0;
if ((elementIndex = Array.from(self.forms[id].getRemove()).indexOf(event.target)) !== -1) {
// handle remove
formActionRemove(self, event, id, elementIndex)
{
jsOMS.preventAll(event);
const remove = self.forms[id].getRemove()[elementIndex];
const callback = function () {
const callback = function (response, xhr) {
if (xhr.status !== 200) {
return;
}
/**
* @var {Element} elementContainer Container which holds all the data for a specific element
* (e.g. table row (tr), div, ...)
@ -235,9 +235,10 @@ export class Form
} else {
callback();
}
} else if ((elementIndex = Array.from(self.forms[id].getAdd()).indexOf(event.target)) !== -1) {
// handle add
}
formActionAdd(self, event, id, elementIndex)
{
jsOMS.preventAll(event);
if (!self.forms[id].isValid()) {
@ -245,9 +246,15 @@ export class Form
}
if (document.getElementById(id).getAttribute('data-add-form') === null) {
// handle inline add
// Since the add is inline no form exists which the user can use, hence it must be created
this.formActionAddInline(self, event, id, elementIndex);
} else {
this.formActionAddExternal(self, event, id, elementIndex);
}
}
formActionAddInline(self, event, id, elementIndex)
{
// Since the add is inline no form exists which the user can use, hence it must be created
/** @var {HTMLElement} formElement */
const formElement = self.forms[id].getFormElement();
@ -268,9 +275,10 @@ export class Form
const newElement = uiContainer.querySelector(formElement.getAttribute('data-add-tpl')).content.cloneNode(true);
uiContainer.appendChild(newElement.firstElementChild);
}
} else {
// handle external add
}
formActionAddExternal(self, event, id, elementIndex)
{
/** @var {HTMLElement} formElement External form */
const formElement = self.forms[id].getFormElement();
@ -333,6 +341,12 @@ export class Form
/** @var {object} remoteUrls Texts and values which come from remote sources */
const remoteUrls = {};
// define remote response behavior
self.forms[id].setSuccess(function (response, xhr) {
if (xhr.status !== 200) {
return;
}
// insert values into form (populate values)
Form.setDataInElement('value', newElements, values, remoteUrls);
@ -344,14 +358,6 @@ export class Form
uiContainer.appendChild(newElements[i].firstElementChild);
}
// define remote response behavior
self.forms[id].setSuccess(function (response) {
if (response.get('status') !== 'undefined' && response.get('status') !== NotificationLevel.HIDDEN) {
self.app.notifyManager.send(
new NotificationMessage(response.get('status'), response.get('title'), response.get('message')), NotificationType.APP_NOTIFICATION
);
}
window.omsApp.logger.log(remoteUrls);
UriFactory.setQuery('$id', response.get('response').id);
@ -367,15 +373,20 @@ export class Form
// reset the form after adding an element
self.forms[id].resetValues();
}
} else if ((elementIndex = Array.from(self.forms[id].getSave()).indexOf(event.target)) !== -1) {
// handle save button
formActionSave(self, event, id, elementIndex)
{
jsOMS.preventAll(event);
const mainForm = document.querySelector('[data-update-form="' + id + '"');
if (mainForm === null) {
// handle inline save
if (document.querySelector('[data-update-form="' + id + '"') === null) {
this.formActionSaveInline(self, event, id, elementIndex)
} else {
this.formActionSaveExternal(self, event, id, elementIndex)
}
}
formActionSaveInline(self, event, id, elementIndex)
{
if (!self.forms[id].isValid()) {
return;
}
@ -464,6 +475,12 @@ export class Form
/** @var {object} remoteUrls Texts and values which come from remote sources */
const remoteUrls = {};
// define remote response behavior
self.forms[id].setSuccess(function (response, xhr) {
if (xhr.status !== 200) {
return;
}
// insert values into form (populate values)
Form.setDataInElement('value', newElements, values, remoteUrls);
@ -477,14 +494,6 @@ export class Form
elementContainer.parentNode.removeChild(elementContainer);
// define remote response behavior
self.forms[id].setSuccess(function (response) {
if (response.get('status') !== 'undefined' && response.get('status') !== NotificationLevel.HIDDEN) {
self.app.notifyManager.send(
new NotificationMessage(response.get('status'), response.get('title'), response.get('message')), NotificationType.APP_NOTIFICATION
);
}
window.omsApp.logger.log(remoteUrls);
UriFactory.setQuery('$id', response.get('response').id);
@ -534,25 +543,31 @@ export class Form
/** @var {object} remoteUrls Texts and values which come from remote sources */
const remoteUrls = {};
jsOMS.removeClass(element, 'hidden');
// todo bind failure here, if failure do cancel, if success to remove edit template
self.forms[id].setSuccess(function (response, xhr) {
if (xhr.status !== 200) {
return;
}
// update values in form (overwrite values)
Form.setDataInElement('value', [element], values, remoteUrls);
// update text data in form (overwrite text)
Form.setDataInElement('text', [element], texts, remoteUrls);
jsOMS.removeClass(element, 'hidden');
elementContainer.parentNode.removeChild(elementContainer);
// todo bind failure here, if failure do cancel, if success to remove edit template
self.forms[id].setSuccess(function () {
// overwrite old values from remote response
Form.setDataFromRemoteUrls(remoteUrls);
});
}
} else {
// handle external save
}
formActionSaveExternal(self, event, id, elementIndex)
{
const mainForm = document.querySelector('[data-update-form="' + id + '"');
const externalFormId = id;
id = mainForm.getAttribute('id');
@ -621,16 +636,25 @@ export class Form
/** @var {object} remoteUrls Texts and values which come from remote sources */
const remoteUrls = {};
self.forms[externalFormId].setSuccess(function (response, xhr) {
if (xhr.status !== 200) {
// reset form values to default values after performing the update
self.forms[externalFormId].resetValues();
return;
}
// update values in form (overwrite values)
Form.setDataInElement('value', updateElements, values, remoteUrls);
// update text data in form (overwrite text)
Form.setDataInElement('text', updateElements, texts, remoteUrls);
// @todo: bind failure here, if failure do cancel, if success to remove edit template
self.forms[externalFormId].setSuccess(function () {
// overwrite old values from remote response
Form.setDataFromRemoteUrls(remoteUrls);
// reset form values to default values after performing the update
self.forms[externalFormId].resetValues();
});
// clear element id after saving
@ -639,9 +663,6 @@ export class Form
// submit to api
self.submit(self.forms[externalFormId], self.forms[externalFormId].getSave()[elementIndex]);
// reset form values to default values after performing the update
self.forms[externalFormId].resetValues();
// show add button + hide update button + hide cancel button
const addButtons = self.forms[externalFormId].getAdd();
let buttonLength = addButtons.length;
@ -662,16 +683,21 @@ export class Form
jsOMS.addClass(cancelButtons[i], 'hidden');
}
}
} else if ((elementIndex = Array.from(self.forms[id].getCancel()).indexOf(event.target)) !== -1) {
// handle cancel
// @todo currently only handling update cancel, what about add cancel?
formActionCancel(self, event, id, elementIndex)
{
jsOMS.preventAll(event);
const ele = document.getElementById(id);
if (ele.getAttribute('data-update-form') === null && ele.tagName.toLowerCase() !== 'form') {
// handle inline cancel
this.formActionCancelInline(self, event, id, elementIndex);
} else {
this.formActionCancelExternal(self, event, id, elementIndex);
}
}
formActionCancelInline(self, event, id, elementIndex)
{
/** @var {HTMLElement} formElement Form */
const formElement = self.forms[id].getFormElement();
@ -692,9 +718,10 @@ export class Form
jsOMS.removeClass(element, 'hidden');
elementContainer.parentNode.removeChild(elementContainer);
} else {
// handle external cancel
}
formActionCancelExternal(self, event, id, elementIndex)
{
// reset form values to default values
self.forms[id].resetValues();
@ -721,17 +748,22 @@ export class Form
for (let i = 0; i < length; ++i) {
jsOMS.addClass(cancelButtons[i], 'hidden');
}
jsOMS.preventAll(event);
}
} else if ((elementIndex = Array.from(self.forms[id].getUpdate()).indexOf(event.target)) !== -1) {
// handle update
formActionUpdate(self, event, id, elementIndex)
{
// this doesn't handle setting new values but populating the update form
jsOMS.preventAll(event);
if (document.getElementById(id).getAttribute('data-update-form') === null) {
// handle inline update
this.formActionUpdateInline(self, event, id, elementIndex);
} else {
this.formActionUpdateExternal(self, event, id, elementIndex);
}
}
formActionUpdateInline(self, event, id, elementIndex)
{
/** @var {HTMLElement} formElement Form */
const formElement = self.forms[id].getFormElement();
@ -798,9 +830,10 @@ export class Form
for (let i = 0; i < buttonLength; ++i) {
jsOMS.removeClass(cancelButtons[i], 'hidden');
}
} else {
// handle external update
}
formActionUpdateExternal(self, event, id, elementIndex)
{
/** @var {HTMLElement} formElement */
const formElement = self.forms[id].getFormElement();
@ -870,6 +903,24 @@ export class Form
Form.setDataFromRemoteUrls(remoteUrls);
});
}
formActions (self, event, id)
{
let elementIndex = 0;
if ((elementIndex = Array.from(self.forms[id].getRemove()).indexOf(event.target)) !== -1) {
this.formActionRemove(self, event, id, elementIndex);
} else if ((elementIndex = Array.from(self.forms[id].getAdd()).indexOf(event.target)) !== -1) {
this.formActionAdd(self, event, id, elementIndex);
} else if ((elementIndex = Array.from(self.forms[id].getSave()).indexOf(event.target)) !== -1) {
this.formActionSave(self, event, id, elementIndex);
} else if ((elementIndex = Array.from(self.forms[id].getCancel()).indexOf(event.target)) !== -1) {
// @todo currently only handling update cancel, what about add cancel?
this.formActionCancel(self, event, id, elementIndex);
} else if ((elementIndex = Array.from(self.forms[id].getUpdate()).indexOf(event.target)) !== -1) {
// handle update
// this doesn't handle setting new values but populating the update form
this.formActionUpdate(self, event, id, elementIndex);
} else if ((elementIndex = Array.from(self.forms[id].getSubmit()).indexOf(event.target)) !== -1
|| (elementIndex = Array.from(self.forms[id].getSubmit()).indexOf(event.target.parentNode)) !== -1
) {
@ -1027,7 +1078,7 @@ export class Form
request.setType(RequestType.FORM_DATA); // @todo: consider to allow different request type
request.setUri(action !== null ? action : form.getAction());
request.setMethod(method !== null ? method : form.getMethod());
request.setSuccess(function (xhr)
request.setResultCallback(0, function (xhr)
{
window.omsApp.logger.log(xhr.response);
@ -1073,7 +1124,7 @@ export class Form
let successInject = null;
if ((successInject = form.getSuccess()) !== null) {
successInject(response);
successInject(response, xhr);
} else if (redirect !== null) {
fetch(UriFactory.build(redirect))
.then((response) => response.text())
@ -1096,7 +1147,9 @@ export class Form
.catch((error) => {
console.warn(error);
});
} else if (response.get('type') !== null) {
}
if (response.get('type') !== null) {
self.app.responseManager.run(response.get('type'), response.get(), null);
} else if (typeof o.status !== 'undefined' && o.status !== NotificationLevel.HIDDEN) {
self.app.notifyManager.send(
@ -1111,24 +1164,7 @@ export class Form
+ 'Request: ' + JSON.stringify(form.getData()) + '\n'
+ 'Response: ' + xhr.response
);
}
}
});
request.setResultCallback(0, function (xhr)
{
try {
const o = JSON.parse(xhr.response)[0];
const response = new Response(o);
if (response.get('type') !== null) {
console.log(response.get('type'));
} else if (typeof o.status !== 'undefined' && o.status !== NotificationLevel.HIDDEN) {
self.app.notifyManager.send(
new NotificationMessage(o.status, o.title, o.message), NotificationType.APP_NOTIFICATION
);
}
} catch (e) {
self.app.notifyManager.send(
new NotificationMessage(
NotificationLevel.ERROR,
@ -1137,6 +1173,7 @@ export class Form
), NotificationType.APP_NOTIFICATION
);
}
}
});
if (window.omsApp.state) {
@ -1263,7 +1300,10 @@ export class Form
} else {
if (type === 'value') {
GeneralUI.setValueOfElement(matches[c], GeneralUI.getValueFromDataSource(data[i]));
} else {
} else if (type === 'text'
&& (data[i].getAttribute('data-tpl-text') !== data[i].getAttribute('data-tpl-value')
|| data[i].getAttribute('data-value') !== null)
) {
GeneralUI.setTextOfElement(matches[c], GeneralUI.getTextFromDataSource(data[i]));
}
}
@ -1290,7 +1330,11 @@ export class Form
} else {
if (type === 'value') {
GeneralUI.setValueOfElement(matches[c], GeneralUI.getValueFromDataSource(data[i]));
} else {
} else if (type === 'text'
&& (data[i].getAttribute('data-tpl-text') !== data[i].getAttribute('data-tpl-value')
|| (data[i].getAttribute('data-value') !== null)
)
) {
GeneralUI.setTextOfElement(matches[c], GeneralUI.getTextFromDataSource(data[i]));
}
}

102
UI/GeneralUI.js
View File

@ -107,7 +107,7 @@ export class GeneralUI
if (this.getAttribute('target') === '_blank'
|| this.getAttribute('data-target') === '_blank'
|| event.button === 1
|| uri.startsWith('https://')
|| uri.indexOf('://') > 0
) {
window.open(UriFactory.build(uri), '_blank');
} else if (this.getAttribute('data-redirect') !== null) {
@ -294,34 +294,12 @@ export class GeneralUI
{
if (src.hasAttribute('data-value')) {
src.setAttribute('data-value', value);
return;
}
switch (src.tagName.toLowerCase()) {
case 'div':
case 'span':
case 'pre':
case 'article':
case 'section':
case 'h1':
if (src.hasAttribute('data-tpl-text')) {
break; // prevent overwriting setTextOfElement
}
src.innerHTML = jsOMS.htmlspecialchars_encode(value);
break;
case 'select': {
const optionLength = src.options.length;
for (let i = 0; i < optionLength; ++i) {
if (src.options[i].value === value) {
src.options[i].selected = true;
break;
}
}
break;
}
case 'input':
const tagName = src.tagName.toLowerCase();
if (tagName === 'input') {
if (src.type === 'radio') {
src.checked = false;
if (src.value === value) {
@ -333,11 +311,22 @@ export class GeneralUI
if (values.includes(src.value)) {
src.checked = true;
}
} else {
src.value = value;
}
} else if (tagName === 'select') {
const optionLength = src.options.length;
for (let i = 0; i < optionLength; ++i) {
if (src.options[i].value === value) {
src.options[i].selected = true;
break;
default:
}
}
} else if (src.getAttribute('value') !== null) {
src.value = jsOMS.htmlspecialchars_decode(value);
} else {
src.innerHTML = value;
}
};
@ -353,24 +342,17 @@ export class GeneralUI
*/
static setTextOfElement (src, value)
{
switch (src.tagName.toLowerCase()) {
case 'select':
break;
case 'div':
case 'td':
case 'span':
case 'pre':
case 'article':
case 'section':
src.innerHTML = value;
break;
case 'h1':
const tagName = src.tagName.toLowerCase();
if (tagName === 'h1') {
src.innerHTML = jsOMS.htmlspecialchars_encode(value);
break;
default:
} else if (tagName === 'select') {
return;
} else if (src.getAttribute('value') !== null) {
if (src.value === '') {
src.value = jsOMS.htmlspecialchars_decode(value);
}
} else {
src.innerHTML = value;
}
};
@ -389,16 +371,8 @@ export class GeneralUI
return src.getAttribute('data-value');
}
switch (src.tagName.toLowerCase()) {
case 'td':
case 'div':
case 'span':
case 'pre':
case 'article':
case 'section':
case 'h1':
return src.innerText.trim(' ');
default:
const tagName = src.tagName.toLowerCase();
if (tagName === 'input' || src.getAttribute('value') !== null) {
if (src.getAttribute('type') === 'radio') {
const checked = document.querySelector('input[type=radio][name="' + src.name + '"]:checked');
@ -414,6 +388,10 @@ export class GeneralUI
}
return src.value;
} else if (tagName === 'select') {
return src.options[src.selectedIndex].value;
} else {
return src.innerText.trim(' ');
}
};
@ -428,18 +406,8 @@ export class GeneralUI
*/
static getTextFromDataSource (src)
{
switch (src.tagName.toLowerCase()) {
case 'td':
case 'div':
case 'span':
case 'pre':
case 'article':
case 'section':
case 'h1':
return src.innerHTML.trim(' ');
case 'select':
return src.options[src.selectedIndex].text;
case 'input':
const tagName = src.tagName.toLowerCase();
if (tagName === 'input') {
if (src.getAttribute('type') === 'radio') {
const checked = document.querySelector('input[type=radio][name="' + src.name + '"]:checked');
@ -457,8 +425,12 @@ export class GeneralUI
}
return src.value;
default:
} else if (tagName === 'select') {
return src.options[src.selectedIndex].text;
} else if (src.getAttribute('value') !== null) {
return src.value;
} else {
return src.innerHTML.trim(' ');
}
};
};

16
Views/FormView.js
View File

@ -533,8 +533,10 @@ export class FormView
} else {
if (typeof elements[i].value !== 'undefined') {
value = elements[i].value;
} else if (typeof elements[i].getAttribute('data-value') !== 'undefined') {
} else if (elements[i].getAttribute('data-value') !== null) {
value = elements[i].getAttribute('data-value');
} else {
value = elements[i].innerHTML;
}
}
@ -587,6 +589,10 @@ export class FormView
if (elements[i].getAttribute('data-value') !== null) {
elements[i].setAttribute('data-value', '');
}
if (elements[i].getAttribute('data-name') !== null) {
elements[i].innerHTML = '';
}
}
};
@ -632,9 +638,7 @@ export class FormView
for (let i = 0; i < length; ++i) {
if (!elements[i].required && elements[i].value === '') {
continue;
}
if ((elements[i].required && elements[i].value === '')
}else if ((elements[i].required && elements[i].value === '')
|| (typeof elements[i].pattern !== 'undefined'
&& elements[i].pattern !== ''
&& !(new RegExp(elements[i].pattern)).test(elements[i].value))
@ -705,10 +709,10 @@ export class FormView
{
if (e.getAttribute('name') !== null) {
return e.getAttribute('name');
} else if (e.getAttribute('id') !== null) {
return e.getAttribute('id');
} else if (e.getAttribute('data-name') !== null) {
return e.getAttribute('data-name');
} else if (e.getAttribute('id') !== null) {
return e.getAttribute('id');
} else if (e.getAttribute('type') !== null) {
return e.getAttribute('type');
}