From ae0272a62cf569710219e3a7a4b4389a8fdf3eb3 Mon Sep 17 00:00:00 2001 From: mokaddem Date: Fri, 11 Dec 2020 10:38:43 +0100 Subject: [PATCH] chg: [js-helper] Added quick methods and more documentation --- webroot/js/api-helper.js | 42 ++++++++++++++++++++++++++-------- webroot/js/bootstrap-helper.js | 12 ++++++---- webroot/js/main.js | 3 +-- 3 files changed, 41 insertions(+), 16 deletions(-) diff --git a/webroot/js/api-helper.js b/webroot/js/api-helper.js index 37a54bd..d6237ad 100644 --- a/webroot/js/api-helper.js +++ b/webroot/js/api-helper.js @@ -12,8 +12,8 @@ class AJAXApi { } static defaultOptions = { - showToast: true, - statusNode: false + provideFeedback: true, + statusNode: false, } options = {} loadingOverlay = false @@ -23,11 +23,13 @@ class AJAXApi { this.mergeOptions(options) } - provideFeedback(options) { - if (this.options.showToast) { + provideFeedback(options, isError=false) { + if (this.options.provideFeedback) { UI.toast(options) } else { - console.error(options.body) + if (isError) { + console.error(options.body) + } } } @@ -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) { diff --git a/webroot/js/bootstrap-helper.js b/webroot/js/bootstrap-helper.js index b5318b6..a27ac4b 100644 --- a/webroot/js/bootstrap-helper.js +++ b/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({ - statusNode: $statusNode[0], - }) - tmpApi.fetchURL(url).then((data) => { - $container.html(data) + AJAXApi.quickFetchURL(url, { + statusNode: $statusNode[0] + }).then((data) => { + $container[0].outerHTML = data }) } } diff --git a/webroot/js/main.js b/webroot/js/main.js index ea515e1..a15c4b2 100644 --- a/webroot/js/main.js +++ b/webroot/js/main.js @@ -38,8 +38,7 @@ function executeStateDependencyChecks(dependenceSourceSelector) { }); } -var AjaxApi, UI +var UI $(document).ready(() => { - AjaxApi = new AJAXApi() UI = new UIFactory() }) \ No newline at end of file