condition building

src/views/admin/club/query/Builder.vue

@@ -6,7 +6,7 @@
       </div>
     </template>
     <template #diffMain>
-      <div class="flex flex-col w-full h-full gap-2 justify-center px-7">
+      <div class="flex flex-col w-full h-full gap-2 px-7 overflow-y-auto">
         <BuilderHost
           v-model="query"
           @query:run="sendQuery()"
@@ -15,7 +15,32 @@
           @results:export=""
         />
         <p>Ergebnisse:</p>
+        <div
+          v-if="loadingData == 'failed'"
+          class="flex flex-col p-2 border border-red-600 bg-red-200 rounded-md select-none"
+        >
+          <p v-if="typeof queryError == 'string'">
+            {{ queryError }}
+          </p>
+          <div v-else>
+            <p>
+              CODE: <br />
+              {{ queryError.code }}
+            </p>
+            <br />
+            <p>
+              MSG: <br />
+              {{ queryError.msg }}
+            </p>
+            <br />
+            <p>
+              RESULTING SQL: <br />
+              {{ queryError.sql }}
+            </p>
+          </div>
+        </div>
         <Pagination
+          v-else
           :items="data"
           :totalCount="totalLength"
           :indicateLoading="loadingData == 'loading'"
@@ -43,7 +68,7 @@ import type { DynamicQueryStructure } from "@/types/dynamicQueries";
 <script lang="ts">
 export default defineComponent({
   computed: {
-    ...mapState(useQueryBuilderStore, ["loading", "loadingData", "tableMetas", "data", "totalLength"]),
+    ...mapState(useQueryBuilderStore, ["loading", "loadingData", "tableMetas", "data", "totalLength", "queryError"]),
     ...mapWritableState(useQueryBuilderStore, ["query"]),
   },
   mounted() {