From ff253c73f049ccf558b2b15e1b7afc3f219f7730 Mon Sep 17 00:00:00 2001
From: Julian Krauser <jkrauser209@gmail.com>
Date: Mon, 16 Dec 2024 17:49:18 +0100
Subject: [PATCH] condition building

---
 src/components/queryBuilder/BuilderHost.vue   | 15 ++++++++-
 src/components/queryBuilder/Condition.vue     | 31 +++++++++++++++++--
 .../queryBuilder/NestedCondition.vue          |  2 +-
 src/components/queryBuilder/NestedWhere.vue   |  3 +-
 src/components/queryBuilder/Table.vue         |  8 ++---
 src/components/queryBuilder/Where.vue         |  2 +-
 src/stores/admin/queryBuilder.ts              | 19 ++++++++----
 src/types/dynamicQueries.ts                   | 22 ++++++++++++-
 src/views/admin/club/query/Builder.vue        | 29 +++++++++++++++--
 9 files changed, 112 insertions(+), 19 deletions(-)

diff --git a/src/components/queryBuilder/BuilderHost.vue b/src/components/queryBuilder/BuilderHost.vue
index 4d1c0a4..f2cb3e3 100644
--- a/src/components/queryBuilder/BuilderHost.vue
+++ b/src/components/queryBuilder/BuilderHost.vue
@@ -29,6 +29,13 @@
       >
         <NoSymbolIcon class="text-gray-500 h-6 w-6 cursor-pointer" />
       </div>
+      <div
+        class="p-1 border border-gray-400 bg-red-200 rounded-md"
+        title="Anfrage löschen"
+        @click="$emit('update:model-value', undefined)"
+      >
+        <TrashIcon class="text-gray-500 h-6 w-6 cursor-pointer" />
+      </div>
     </div>
     <div class="p-2 h-44 md:h-60 w-full overflow-y-scroll">
       <Table v-model="value" />
@@ -40,7 +47,13 @@
 import { defineComponent, type PropType } from "vue";
 import { mapActions, mapState } from "pinia";
 import type { DynamicQueryStructure } from "../../types/dynamicQueries";
-import { ArchiveBoxArrowDownIcon, InboxArrowDownIcon, NoSymbolIcon, PlayIcon } from "@heroicons/vue/24/outline";
+import {
+  ArchiveBoxArrowDownIcon,
+  InboxArrowDownIcon,
+  NoSymbolIcon,
+  PlayIcon,
+  TrashIcon,
+} from "@heroicons/vue/24/outline";
 import { useQueryBuilderStore } from "../../stores/admin/queryBuilder";
 import Table from "./Table.vue";
 </script>
diff --git a/src/components/queryBuilder/Condition.vue b/src/components/queryBuilder/Condition.vue
index f686a9b..66c62d9 100644
--- a/src/components/queryBuilder/Condition.vue
+++ b/src/components/queryBuilder/Condition.vue
@@ -8,10 +8,17 @@
     </select>
     <select v-model="column">
       <option value="" disabled>Verknüpfung auswählen</option>
-      <option v-for="col in activeTable?.columns" :value="col">
+      <option v-for="col in activeTable?.columns" :value="col.column">
         {{ foreignColumns?.includes(col.column) ? "FK:" : "" }} {{ col.column }}:{{ col.type }}
       </option>
     </select>
+    <select v-model="operation" class="!w-fit !h-fit">
+      <option value="" disabled>Vergleich auswählen</option>
+      <option v-for="op in whereOperationArray" :value="op">
+        {{ op }}
+      </option>
+    </select>
+    <input v-model="value" :type="inputType" />
     <div class="p-1 border border-gray-400 hover:bg-gray-200 rounded-md" @click="$emit('remove')">
       <TrashIcon class="text-gray-500 h-6 w-6 cursor-pointer" />
     </div>
@@ -21,7 +28,13 @@
 <script setup lang="ts">
 import { defineComponent, type PropType } from "vue";
 import { mapActions, mapState } from "pinia";
-import type { ConditionStructure, ConditionValue, WhereOperation, WhereType } from "../../types/dynamicQueries";
+import {
+  whereOperationArray,
+  type ConditionStructure,
+  type ConditionValue,
+  type WhereOperation,
+  type WhereType,
+} from "../../types/dynamicQueries";
 import { useQueryBuilderStore } from "../../stores/admin/queryBuilder";
 import { TrashIcon } from "@heroicons/vue/24/outline";
 </script>
@@ -50,6 +63,20 @@ export default defineComponent({
     foreignColumns() {
       return this.activeTable?.relations.map((r) => r.column);
     },
+    inputType() {
+      let type = this.activeTable?.columns.find((c) => c.column == this.column)?.type;
+      if (this.operation.includes("timespan")) return "number";
+      switch (type) {
+        case "int":
+          return "number";
+        case "varchar":
+          return "text";
+        case "date":
+          return "date";
+        default:
+          return "text";
+      }
+    },
     concat: {
       get() {
         return this.modelValue.concat;
diff --git a/src/components/queryBuilder/NestedCondition.vue b/src/components/queryBuilder/NestedCondition.vue
index 44cbb26..dde4d9c 100644
--- a/src/components/queryBuilder/NestedCondition.vue
+++ b/src/components/queryBuilder/NestedCondition.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="flex flex-row gap-2 w-full border border-gray-300 rounded-md p-1">
-    <select v-model="concat" class="!w-20 !h-fit">
+    <select v-if="concat != '_'" v-model="concat" class="!w-20 !h-fit">
       <option value="" disabled>Verknüpfung auswählen</option>
       <option v-for="operation in ['AND', 'OR']" :value="operation">
         {{ operation }}
diff --git a/src/components/queryBuilder/NestedWhere.vue b/src/components/queryBuilder/NestedWhere.vue
index 023c035..98fe5c4 100644
--- a/src/components/queryBuilder/NestedWhere.vue
+++ b/src/components/queryBuilder/NestedWhere.vue
@@ -12,6 +12,7 @@
         <Condition
           v-else
           :model-value="condition"
+          :table="table"
           @update:model-value="($event) => (value[index] = $event)"
           @remove="removeAtIndex(index)"
         />
@@ -72,7 +73,7 @@ export default defineComponent({
     addNestedToValue() {
       this.value.push({
         structureType: "nested",
-        concat: "AND",
+        concat: this.value.length == 0 ? "_" : "AND",
         conditions: [],
       });
     },
diff --git a/src/components/queryBuilder/Table.vue b/src/components/queryBuilder/Table.vue
index d973a33..c2b7389 100644
--- a/src/components/queryBuilder/Table.vue
+++ b/src/components/queryBuilder/Table.vue
@@ -1,10 +1,10 @@
 <template>
   <div class="flex flex-col gap-2">
     <TableSelect v-model="table" />
-    <ColumnSelect v-model="columnSelect" :table="table" />
-    <Where v-model="where" :table="table" />
-    <Order v-model="order" :table="table" :columns="columnSelect" />
-    <Join v-model="modelValue.join" :table="table" />
+    <ColumnSelect v-if="table != ''" v-model="columnSelect" :table="table" />
+    <Where v-if="table != ''" v-model="where" :table="table" />
+    <Order v-if="table != ''" v-model="order" :table="table" :columns="columnSelect" />
+    <Join v-if="table != ''" v-model="modelValue.join" :table="table" />
   </div>
 </template>
 
diff --git a/src/components/queryBuilder/Where.vue b/src/components/queryBuilder/Where.vue
index ddc2e9f..9cc5803 100644
--- a/src/components/queryBuilder/Where.vue
+++ b/src/components/queryBuilder/Where.vue
@@ -74,7 +74,7 @@ export default defineComponent({
     addNestedToValue() {
       this.value.push({
         structureType: "nested",
-        concat: "AND",
+        concat: this.value.length == 0 ? "_" : "AND",
         conditions: [],
       });
     },
diff --git a/src/stores/admin/queryBuilder.ts b/src/stores/admin/queryBuilder.ts
index 60b5a3a..bffc4b5 100644
--- a/src/stores/admin/queryBuilder.ts
+++ b/src/stores/admin/queryBuilder.ts
@@ -1,7 +1,5 @@
 import { defineStore } from "pinia";
-import type { CreateAwardViewModel, UpdateAwardViewModel, AwardViewModel } from "@/viewmodels/admin/award.models";
 import { http } from "@/serverCom";
-import type { AxiosResponse } from "axios";
 import type { TableMeta } from "../../viewmodels/admin/query.models";
 import type { DynamicQueryStructure } from "../../types/dynamicQueries";
 
@@ -12,7 +10,8 @@ export const useQueryBuilderStore = defineStore("queryBuilder", {
       loading: "loading" as "loading" | "fetched" | "failed",
       data: [] as Array<{ id: number; [key: string]: any }>,
       totalLength: 0 as number,
-      loadingData: "failed" as "loading" | "fetched" | "failed",
+      loadingData: "fetched" as "loading" | "fetched" | "failed",
+      queryError: "" as string | { sql: string; code: string; msg: string },
       query: undefined as undefined | DynamicQueryStructure,
       isLoadedQuery: undefined as undefined | number,
     };
@@ -38,17 +37,25 @@ export const useQueryBuilderStore = defineStore("queryBuilder", {
           query: this.query,
         })
         .then((result) => {
-          this.data = result.data.rows;
-          this.totalLength = result.data.total;
-          this.loadingData = "fetched";
+          if (result.data.stats == "success") {
+            this.data = result.data.rows;
+            this.totalLength = result.data.total;
+            this.loadingData = "fetched";
+          } else {
+            this.queryError = result.data ?? "An error occurred";
+            this.loadingData = "failed";
+          }
         })
         .catch((err) => {
+          this.queryError = "An error occurred";
           this.loadingData = "failed";
         });
     },
     clearResults() {
       this.data = [];
       this.totalLength = 0;
+      this.queryError = "";
+      this.loadingData = "fetched";
     },
   },
 });
diff --git a/src/types/dynamicQueries.ts b/src/types/dynamicQueries.ts
index 460b158..6971bd2 100644
--- a/src/types/dynamicQueries.ts
+++ b/src/types/dynamicQueries.ts
@@ -43,7 +43,8 @@ export type WhereOperation =
   | "notNull" //	Is not null
   | "between" //	Is between
   | "startsWith" //	Starts with
-  | "endsWith"; //	Ends with
+  | "endsWith" //	Ends with
+  | "timespanEq"; // Date before x years (YYYY-01-01 <bis> YYYY-12-31)
 // TODO: age between | age equals | age greater | age smaller
 
 export type OrderByStructure = {
@@ -52,3 +53,22 @@ export type OrderByStructure = {
 };
 
 export type OrderByType = "ASC" | "DESC";
+
+export const whereOperationArray = [
+  "eq",
+  "neq",
+  "lt",
+  "lte",
+  "gt",
+  "gte",
+  "in",
+  "notIn",
+  "contains",
+  "notContains",
+  "null",
+  "notNull",
+  "between",
+  "startsWith",
+  "endsWith",
+  "timespanEq",
+];
diff --git a/src/views/admin/club/query/Builder.vue b/src/views/admin/club/query/Builder.vue
index 1755f5f..14304ef 100644
--- a/src/views/admin/club/query/Builder.vue
+++ b/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() {