From 61fd28e74393579ea603959969b0748159b12cf1 Mon Sep 17 00:00:00 2001
From: Gerald Schmittinger <gerald.schmittinger@ugent.be>
Date: Mon, 31 Mar 2025 16:28:12 +0200
Subject: [PATCH] feat(backend): UsingQueryResult analoog aan
 UsingBackendResource aangemaakt

---
 frontend/src/components/UsingQueryResult.vue | 41 ++++++++++++++++++++
 1 file changed, 41 insertions(+)
 create mode 100644 frontend/src/components/UsingQueryResult.vue

diff --git a/frontend/src/components/UsingQueryResult.vue b/frontend/src/components/UsingQueryResult.vue
new file mode 100644
index 00000000..5cadf231
--- /dev/null
+++ b/frontend/src/components/UsingQueryResult.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts" generic="T">
+    import {RemoteResource} from "@/services/api-client/remote-resource.ts";
+    import {computed, type MaybeRefOrGetter} from "vue";
+    import {useI18n} from "vue-i18n";
+    import type {UseQueryReturnType} from "@tanstack/vue-query";
+
+    const props = defineProps<{
+        queryResult: UseQueryReturnType<T, Error>
+    }>()
+
+    const { t } = useI18n();
+
+    const isLoading = computed(() => props.queryResult.isFetching);
+    const data = computed(() => props.queryResult.data);
+    const error = computed(() => props.queryResult.error);
+    const errorMessage = computed(() => {
+        let errorWithMessage = (error.value as {message: string}) || null;
+        return errorWithMessage?.message || JSON.stringify(errorWithMessage)
+    });
+</script>
+
+<template>
+    <div class="loading-div" v-if="isLoading">
+        <v-progress-circular indeterminate></v-progress-circular>
+    </div>
+    <div v-if="error">
+        <v-empty-state
+            icon="mdi-alert-circle-outline"
+            :text="errorMessage"
+            :title="t('error_title')"
+        ></v-empty-state>
+    </div>
+    <slot v-if="data" :data="data!"></slot>
+</template>
+
+<style scoped>
+  .loading-div {
+      padding: 20px;
+      text-align: center;
+  }
+</style>