improve git form update/delete

UI/Component/Form.js

@@ -193,16 +193,16 @@ export class Form
         }
     };
 
-    formActions (self, event, id) {
+    formActionRemove(self, event, id, elementIndex)
-        let elementIndex = 0;
+    {
-
-        if ((elementIndex = Array.from(self.forms[id].getRemove()).indexOf(event.target)) !== -1) {
-            // handle remove
-
         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
+            this.formActionAddInline(self, event, id, elementIndex);
-                // Since the add is inline no form exists which the user can use, hence it must be created
+        } 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 (document.querySelector('[data-update-form="' + id  + '"') === null) {
-            if (mainForm === null) {
+            this.formActionSaveInline(self, event, id, elementIndex)
-                // handle inline save
+        } 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]));
                     }
                 }

UI/GeneralUI.js

@@ -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()) {
+        const tagName = src.tagName.toLowerCase();
-            case 'div':
+        if (tagName === 'input') {
-            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':
             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()) {
+        const tagName = src.tagName.toLowerCase();
-            case 'select':
+        if (tagName === 'h1') {
-                break;
-            case 'div':
-            case 'td':
-            case 'span':
-            case 'pre':
-            case 'article':
-            case 'section':
-                src.innerHTML = value;
-                break;
-            case 'h1':
             src.innerHTML = jsOMS.htmlspecialchars_encode(value);
-                break;
+        } else if (tagName === 'select') {
-            default:
+            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()) {
+        const tagName = src.tagName.toLowerCase();
-            case 'td':
+        if (tagName === 'input' || src.getAttribute('value') !== null) {
-            case 'div':
-            case 'span':
-            case 'pre':
-            case 'article':
-            case 'section':
-            case 'h1':
-                return src.innerText.trim(' ');
-            default:
             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()) {
+        const tagName = src.tagName.toLowerCase();
-            case 'td':
+        if (tagName === 'input') {
-            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':
             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(' ');
         }
     };
 };

Views/FormView.js

@@ -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;
-                }
+                }else if ((elements[i].required && elements[i].value === '')
-
-                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');
         }