From 32daed2ad2576d3fd9cb7f33b2f67a92ace0c545 Mon Sep 17 00:00:00 2001
From: Harald Bamberger <harald.bamberger@technikum-wien.at>
Date: Wed, 29 Jun 2022 13:17:57 +0200
Subject: [PATCH] first draft data fetch component

---
 public/js/components/Fetch.js | 46 +++++++++++++++++++++++++++++++++++
 1 file changed, 46 insertions(+)
 create mode 100644 public/js/components/Fetch.js

diff --git a/public/js/components/Fetch.js b/public/js/components/Fetch.js
new file mode 100644
index 000000000..a3a11dcfe
--- /dev/null
+++ b/public/js/components/Fetch.js
@@ -0,0 +1,46 @@
+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;
+            });
+        }
+    }
+};
\ No newline at end of file