- Added new JS public/js/RESTClient.js as axios wrapper

- composer.json: added axios from github
- Added new directory application/components/extensions/
- Added new utility function findResource to application/helpers/hlp_common_helper.php
- Now the library libraries/FilterCmptLib loads the component definition php files from the extensions
- views/system/logs/logsViewer now includes axios and restclient, removed the includes for ajaxlib and jQueryUI
- Added includes for the RESTClient and axios to views/templates/FHC-Common and views/templates/FHC-Footer
- Improved component js/components/Fetch
- Components public/js/components/Filter.js and public/js/components/Navigation.js now they are making use of the Fetch component or/and the RESTClient

public/js/components/Fetch.js

@@ -1,46 +1,66 @@
 export const CoreFetchCmpt = {
-    props: ["apifunction"],
-    data: function() {
-      return {
-        loading: false,
-        error: null,
-        data: []
-      };
-    },
-    template: `
-    <div>
-        <slot v-if="loading" name="loading">
-            <p>Loading ...</p>
-        </slot>
-        <slot v-else-if="error" name="error" v-bind:error="error">
-            <pre>{{ JSON.stringify(error, null, 4) }}</pre>
-        </slot>
-        <slot v-else name="data" v-bind:data="data">
-            <pre>{{ JSON.stringify(data, null, 4) }}</pre>
-        </slot>
-    </div>
-    `,
-    created: function () {
-        this.fetchData();
-    },
-    methods: {
-        fetchData: function() {
-            var that = this;
-            
-            this.loading = true;
-            this.error = null;
-            
-            this.apifunction()
-            .then(function(response) {
-                that.data = response.data;
-                that.$emit('datafetched', that.data.data);
-            })
-            .catch(function(error) {
-                that.error = error;
-            })
-            .finally(function() {
-                that.loading = false;
-            });
-        }
-    }
-};
+	data: function() {
+		return {
+			loading: false,
+			error: false,
+			errorMessage: null
+		};
+	},
+	emits: ['dataFetched'],
+	props: {
+		apiFunction: Function
+	},
+	created: function () {
+		this.fetchData();
+	},
+	methods: {
+		fetchData: function() {
+			// Loader started
+	        	this.loading = true;
+
+			// Checks if the apifunction is a callable function
+			if (typeof this.apiFunction == "function")
+			{
+				// Call the function stored in apiFunction
+	        		let apiFunctionResult = this.apiFunction();
+
+				// It is expected that the function returns a Promise
+				if (apiFunctionResult instanceof Promise)
+				{
+					apiFunctionResult.then(this._success).catch(this._error).then(this._finally);
+				}
+				else // otherwise display an error
+				{
+					this._setError("The called apiFunction does not return a Promise");
+				}
+			}
+			else // otherwise display an error
+			{
+				this._setError("Property apiFunction is not a function");
+			}
+		},
+		_setError(errorMessage) {
+			this.loading = false;
+			this.error = true;
+			this.errorMessage = errorMessage;
+		},
+		_success: function(response) {
+			this.$emit('dataFetched', response.data);
+		},
+		_error: function(error) {
+			this._setError(error.message);
+		},
+		_finally: function() {
+			this.loading = false;
+		}
+	},
+	template: `
+		<slot v-if="loading">
+			<div class="fetch-loader">Loading...</div>
+		</slot>
+		<slot v-if="error">
+			<div class="fetch-error">{{ errorMessage }}</div>
+		</slot>
+	`
+};
+