chg: [js-helper] Added quick methods and more documentation

webroot/js/api-helper.js

@@ -12,8 +12,8 @@ class AJAXApi {
     }
 
     static defaultOptions = {
-        showToast: true,
+        provideFeedback: true,
-        statusNode: false
+        statusNode: false,
     }
     options = {}
     loadingOverlay = false
@@ -23,13 +23,15 @@ class AJAXApi {
         this.mergeOptions(options)
     }
 
-    provideFeedback(options) {
+    provideFeedback(options, isError=false) {
-        if (this.options.showToast) {
+        if (this.options.provideFeedback) {
             UI.toast(options)
         } else {
+            if (isError) {
                 console.error(options.body)
             }
         }
+    }
 
     mergeOptions(newOptions) {
         this.options = Object.assign({}, this.options, newOptions)
@@ -42,6 +44,24 @@ class AJAXApi {
         return formData
     }
 
+    static async quickFetchURL(url, options={}) {
+        const constAlteredOptions = Object.assign({}, {provideFeedback: false}, options)
+        const tmpApi = new AJAXApi(constAlteredOptions)
+        return tmpApi.fetchURL(url, constAlteredOptions.skipRequestHooks)
+    }
+
+    static async quickFetchForm(url, options={}) {
+        const constAlteredOptions = Object.assign({}, {provideFeedback: false}, options)
+        const tmpApi = new AJAXApi(constAlteredOptions)
+        return tmpApi.fetchForm(url, constAlteredOptions.skipRequestHooks)
+    }
+
+    static async quickFetchAndPostForm(url, dataToMerge={}, options={}) {
+        const constAlteredOptions = Object.assign({}, {}, options)
+        const tmpApi = new AJAXApi(constAlteredOptions)
+        return tmpApi.fetchAndPostForm(url, dataToMerge, constAlteredOptions.skipRequestHooks)
+    }
+
     async fetchURL(url, skipRequestHooks=false) {
         if (!skipRequestHooks) {
             this.beforeRequest()
@@ -53,13 +73,17 @@ class AJAXApi {
                 throw new Error('Network response was not ok')
             }
             const data = await response.text();
+            this.provideFeedback({
+                variant: 'success',
+                title: 'URL fetched',
+            });
             toReturn = data;
         } catch (error) {
             this.provideFeedback({
                 variant: 'danger',
                 title: 'There has been a problem with the operation',
                 body: error
-            });
+            }, true);
             toReturn = Promise.reject(error);
         } finally {
             if (!skipRequestHooks) {
@@ -92,7 +116,7 @@ class AJAXApi {
                 variant: 'danger',
                 title: 'There has been a problem with the operation',
                 body: error
-            });
+            }, true);
             toReturn = Promise.reject(error);
         } finally {
             if (!skipRequestHooks) {
@@ -132,7 +156,7 @@ class AJAXApi {
                         variant: 'danger',
                         title: 'There has been a problem with the operation',
                         body: data.errors
-                    });
+                    }, true);
                     toReturn = Promise.reject(error);
                 }
             } catch (error) {
@@ -140,7 +164,7 @@ class AJAXApi {
                     variant: 'danger',
                     title: 'There has been a problem with the operation',
                     body: error
-                });
+                }, true);
                 toReturn = Promise.reject(error);
             }
         } catch (error) {

webroot/js/bootstrap-helper.js

@@ -1,5 +1,6 @@
 
 class UIFactory {
+    /* Display a toast based on provided options */
     toast(options) {
         const theToast = new Toaster(options);
         theToast.makeToast()
@@ -7,6 +8,7 @@ class UIFactory {
         return theToast
     }
 
+    /* Display a modal based on provided options */
     modal (options) {
         const theModal = new ModalFactory(options);
         theModal.makeModal()
@@ -14,17 +16,17 @@ class UIFactory {
         return theModal
     }
 
+    /* Fetch HTML from the provided URL and override content of $container. $statusNode allows to specify another HTML node to display the loading */
     reload (url, $container, $statusNode=null) {
         $container = $($container)
         $statusNode = $($statusNode)
         if (!$statusNode) {
             $statusNode = $container
         }
-        const tmpApi = new AJAXApi({
+        AJAXApi.quickFetchURL(url, {
-            statusNode: $statusNode[0],
+            statusNode: $statusNode[0]
-        })
+        }).then((data) => {
-        tmpApi.fetchURL(url).then((data) => {
+            $container[0].outerHTML = data
-            $container.html(data)
         })
     }
 }

webroot/js/main.js

@@ -38,8 +38,7 @@ function executeStateDependencyChecks(dependenceSourceSelector) {
     });
 }
 
-var AjaxApi, UI
+var UI
 $(document).ready(() => {
-    AjaxApi = new AJAXApi()
     UI = new UIFactory()
 })