condition building

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>

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;

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 }}

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: [],
       });
     },

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>
 

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: [],
       });
     },

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";
     },
   },
 });

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",
+];

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() {