Merge pull request '#40-query-builder-sorting' (#82) from #40-query-builder-sorting into develop

Reviewed-on: #82

src/components/queryBuilder/BuilderHost.vue

@@ -30,6 +30,9 @@
         v-if="allowPredefinedSelect && can('read', 'configuration', 'query_store')"
         class="flex flex-row gap-2 max-lg:w-full max-lg:order-10"
       >
+        <div v-if="!isAsStored" class="p-1 border border-gray-400 bg-gray-100 rounded-md" title="Änderung erkannt">
+          <DocumentCurrencyRupeeIcon class="text-gray-500 h-6 w-6 cursor-pointer" />
+        </div>
         <select v-model="activeQueryId" class="max-h-[34px] py-0!">
           <option :value="undefined" disabled>gepeicherte Anfrage auswählen</option>
           <option v-for="query in queries" :key="query.id" :value="query.id">
@@ -68,9 +71,9 @@
         </div>
       </div>
     </div>
-    <div class="p-2 h-44 md:h-60 w-full overflow-y-auto">
+    <div class="p-2 h-60 md:h-60 w-full overflow-y-auto">
       <textarea v-if="typeof value == 'string'" v-model="value" placeholder="SQL Query" class="h-full w-full" />
-      <Table v-else v-model="value" />
+      <Table v-else v-model="value" enableOrder />
     </div>
   </div>
 </template>
@@ -78,7 +81,7 @@
 <script setup lang="ts">
 import { defineAsyncComponent, defineComponent, markRaw, type PropType } from "vue";
 import { mapActions, mapState, mapWritableState } from "pinia";
-import type { DynamicQueryStructure } from "@/types/dynamicQueries";
+import { type DynamicQueryStructure } from "@/types/dynamicQueries";
 import {
   ArchiveBoxArrowDownIcon,
   CommandLineIcon,
@@ -88,12 +91,15 @@ import {
   RectangleGroupIcon,
   TrashIcon,
   SparklesIcon,
+  DocumentCurrencyRupeeIcon,
 } from "@heroicons/vue/24/outline";
 import { useQueryBuilderStore } from "@/stores/admin/club/queryBuilder";
 import { useModalStore } from "@/stores/modal";
 import Table from "./Table.vue";
 import { useAbilityStore } from "@/stores/ability";
 import { useQueryStoreStore } from "@/stores/admin/configuration/queryStore";
+import { v4 as uuid } from "uuid";
+import cloneDeep from "lodash.clonedeep";
 </script>
 
 <script lang="ts">
@@ -102,6 +108,7 @@ export default defineComponent({
     modelValue: {
       type: [Object, String] as PropType<DynamicQueryStructure | string>,
       default: {
+        id: uuid(),
         select: "*",
         table: "",
         where: [],
@@ -126,7 +133,12 @@ export default defineComponent({
         } else {
           this.queryMode = "builder";
         }
-        this.value = query;
+        this.value = cloneDeep(query);
+      }
+    },
+    value() {
+      if (typeof this.value != "string" && !this.value.id) {
+        this.value.id = uuid();
       }
     },
   },
@@ -149,6 +161,11 @@ export default defineComponent({
         this.$emit("update:model-value", val);
       },
     },
+    isAsStored() {
+      let stored = this.queries.find((q) => q.id == this.activeQueryId);
+      if (!stored) return true;
+      return JSON.stringify(this.value) == JSON.stringify(stored.query);
+    },
   },
   mounted() {
     this.fetchTableMetas();
@@ -163,6 +180,7 @@ export default defineComponent({
       this.activeQueryId = undefined;
       if (typeof this.value != "string") {
         this.value = {
+          id: uuid(),
           select: "*",
           table: "",
           where: [],
@@ -182,6 +200,7 @@ export default defineComponent({
       this.activeQueryId = undefined;
       if (this.queryMode == "builder") {
         this.value = {
+          id: uuid(),
           select: "*",
           table: "",
           where: [],

src/components/queryBuilder/Condition.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="flex flex-row gap-2 items-center w-full">
-    <select v-if="concat != '_'" v-model="concat" class="w-20! h-fit!">
+    <select v-if="!isFirst" 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 }}
@@ -68,6 +68,10 @@ import { TrashIcon } from "@heroicons/vue/24/outline";
 <script lang="ts">
 export default defineComponent({
   props: {
+    isFirst: {
+      type: Boolean,
+      default: false,
+    },
     table: {
       type: String,
       default: "",
@@ -78,9 +82,6 @@ export default defineComponent({
     },
   },
   emits: ["update:model-value", "remove"],
-  data() {
-    return {};
-  },
   computed: {
     ...mapState(useQueryBuilderStore, ["tableMetas"]),
     activeTable() {
@@ -144,5 +145,10 @@ export default defineComponent({
       },
     },
   },
+  mounted() {
+    if (this.concat == "_") {
+      this.concat = "AND";
+    }
+  },
 });
 </script>

src/components/queryBuilder/Join.vue

@@ -7,6 +7,7 @@
           v-for="(join, index) in value"
           :model-value="join"
           :table="table"
+          :alreadyJoined="alreadyJoined"
           @update:model-value="($event) => (value[index] = $event)"
           @remove="removeAtIndex(index)"
         />
@@ -21,10 +22,11 @@
 <script setup lang="ts">
 import { defineComponent, type PropType } from "vue";
 import { mapActions, mapState } from "pinia";
-import type { DynamicQueryStructure } from "@/types/dynamicQueries";
+import { type DynamicQueryStructure } from "@/types/dynamicQueries";
 import { useQueryBuilderStore } from "@/stores/admin/club/queryBuilder";
 import { PlusIcon } from "@heroicons/vue/24/outline";
 import JoinTable from "./JoinTable.vue";
+import { v4 as uuid } from "uuid";
 </script>
 
 <script lang="ts">
@@ -38,16 +40,14 @@ export default defineComponent({
       type: Array as PropType<Array<DynamicQueryStructure & { foreignColumn: string }>>,
       default: [],
     },
+    alreadyJoined: {
+      type: Array as PropType<Array<string>>,
+      default: [],
+    },
   },
   emits: ["update:model-value"],
-  data() {
-    return {};
-  },
   computed: {
     ...mapState(useQueryBuilderStore, ["tableMetas"]),
-    activeTable() {
-      return this.tableMetas.find((tm) => tm.tableName == this.table);
-    },
     value: {
       get() {
         return this.modelValue;
@@ -60,6 +60,7 @@ export default defineComponent({
   methods: {
     addToValue() {
       this.value.push({
+        id: uuid(),
         select: "*",
         table: "",
         where: [],

src/components/queryBuilder/JoinTable.vue

@@ -4,8 +4,23 @@
       <div class="flex flex-col gap-2 w-full">
         <select v-model="foreignColumn" class="w-full">
           <option value="" disabled>Relation auswählen</option>
-          <option v-for="relation in activeTable?.relations" :value="relation.column">
+          <option
+            v-for="relation in activeTable?.relations"
+            :value="relation.column"
+            :disabled="
+              alreadyJoined.includes(joinTableName(relation.referencedTableName)) &&
+              joinTableName(relation.referencedTableName) != value.table
+            "
+          >
             {{ relation.column }} -> {{ joinTableName(relation.referencedTableName) }}
+            <span
+              v-if="
+                alreadyJoined.includes(joinTableName(relation.referencedTableName)) &&
+                joinTableName(relation.referencedTableName) != value.table
+              "
+            >
+              (Join auf dieser Ebene besteht schon)
+            </span>
           </option>
         </select>
         <Table v-model="value" disable-table-select />
@@ -20,11 +35,12 @@
 <script setup lang="ts">
 import { defineComponent, type PropType } from "vue";
 import { mapActions, mapState } from "pinia";
-import type { DynamicQueryStructure } from "@/types/dynamicQueries";
+import { type DynamicQueryStructure } from "@/types/dynamicQueries";
 import { useQueryBuilderStore } from "@/stores/admin/club/queryBuilder";
 import Table from "./Table.vue";
 import { TrashIcon } from "@heroicons/vue/24/outline";
 import { joinTableName } from "@/helpers/queryFormatter";
+import { v4 as uuid } from "uuid";
 </script>
 
 <script lang="ts">
@@ -40,20 +56,14 @@ export default defineComponent({
           foreignColumn: string;
         }
       >,
-      default: {
+      required: true,
-        select: "*",
+    },
-        table: "",
+    alreadyJoined: {
-        where: [],
+      type: Array as PropType<Array<string>>,
-        join: [],
+      default: [],
-        orderBy: [],
-        foreignColumn: "",
-      },
     },
   },
   emits: ["update:model-value", "remove"],
-  data() {
-    return {};
-  },
   computed: {
     ...mapState(useQueryBuilderStore, ["tableMetas"]),
     activeTable() {
@@ -85,5 +95,10 @@ export default defineComponent({
       },
     },
   },
+  mounted() {
+    if (!this.value.id) {
+      this.value.id = uuid();
+    }
+  },
 });
 </script>

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-if="concat != '_'" v-model="concat" class="w-20! h-fit!">
+    <select v-if="isFirst" 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 }}
@@ -28,6 +28,10 @@ import NestedWhere from "./NestedWhere.vue";
 <script lang="ts">
 export default defineComponent({
   props: {
+    isFirst: {
+      type: Boolean,
+      default: false,
+    },
     table: {
       type: String,
       default: "",
@@ -38,9 +42,6 @@ export default defineComponent({
     },
   },
   emits: ["update:model-value", "remove"],
-  data() {
-    return {};
-  },
   computed: {
     ...mapState(useQueryBuilderStore, ["tableMetas"]),
     concat: {
@@ -60,5 +61,10 @@ export default defineComponent({
       },
     },
   },
+  mounted() {
+    if (this.concat == "_") {
+      this.concat = "AND";
+    }
+  },
 });
 </script>

src/components/queryBuilder/Order.vue

@@ -1,12 +1,17 @@
 <template>
   <div class="flex flex-row gap-2">
-    <p class="w-14 min-w-14 pt-2">ORDER</p>
+    <p class="w-14 min-w-14 pt-2">SORT</p>
     <div class="flex flex-row flex-wrap gap-2 items-center w-full">
       <OrderStructure
         v-for="(order, index) in value"
         :model-value="order"
         :table="table"
         :columns="columns"
+        :alreadySorted="alreadySorted"
+        :notFirst="index != 0"
+        :notLast="index != value.length - 1"
+        @up="changeSort('up', index)"
+        @down="changeSort('down', index)"
         @update:model-value="($event) => (value[index] = $event)"
         @remove="removeAtIndex(index)"
       />
@@ -35,9 +40,15 @@ export default defineComponent({
       type: String,
       default: "",
     },
+    // columns: {
+    //   type: [Array, String] as PropType<"*" | Array<string>>,
+    //   default: "*",
+    // },
     columns: {
-      type: [Array, String] as PropType<"*" | Array<string>>,
+      type: Array as PropType<
-      default: "*",
+        Array<{ table: string; id: string; depth: number; path: string[]; columns: "*" | string[] }>
+      >,
+      default: [],
     },
     modelValue: {
       type: Array as PropType<Array<OrderByStructure>>,
@@ -50,6 +61,9 @@ export default defineComponent({
   },
   computed: {
     ...mapState(useQueryBuilderStore, ["tableMetas"]),
+    alreadySorted() {
+      return this.modelValue.map((m) => ({ id: m.id, col: m.column }));
+    },
     value: {
       get() {
         return this.modelValue;
@@ -62,6 +76,9 @@ export default defineComponent({
   methods: {
     addToValue() {
       this.value.push({
+        id: "",
+        depth: 0,
+        table: "",
         column: "",
         order: "ASC",
       });
@@ -69,6 +86,12 @@ export default defineComponent({
     removeAtIndex(index: number) {
       this.value.splice(index, 1);
     },
+    changeSort(dir: "up" | "down", index: number) {
+      const swapIndex = dir === "up" ? index - 1 : index + 1;
+      if (swapIndex >= 0 && swapIndex < this.value.length) {
+        [this.value[index], this.value[swapIndex]] = [this.value[swapIndex], this.value[index]];
+      }
+    },
   },
 });
 </script>

src/components/queryBuilder/OrderStructure.vue

@@ -1,15 +1,26 @@
 <template>
   <div class="flex flex-row gap-2 items-center w-full">
+    <div class="flex flex-col min-w-fit">
+      <ChevronUpIcon v-if="notFirst" class="w-4 h-4 stroke-2 cursor-pointer" @click.prevent="$emit('up')" />
+      <ChevronDownIcon v-if="notLast" class="w-4 h-4 stroke-2 cursor-pointer" @click.prevent="$emit('down')" />
+    </div>
     <select v-model="column" class="w-full">
       <option value="" disabled>Spalte auswählen</option>
-      <option v-for="column in selectableColumns" :value="column">
+      <option
-        {{ column }}
+        v-for="selectable in selectableColumns"
+        :value="`${selectable.id}_${selectable.column}`"
+        :disabled="
+          alreadySorted.some((as) => as.id == selectable.id && as.col == selectable.column) &&
+          `${selectable.id}_${selectable.column}` != column
+        "
+      >
+        {{ [...selectable.path, selectable.table].join("-") }} -> {{ selectable.column }}
       </option>
     </select>
     <select v-model="order">
       <option value="" disabled>Sortierung auswählen</option>
-      <option v-for="order in ['ASC', 'DESC']" :value="order">
+      <option v-for="order in orderable" :value="order.key">
-        {{ order }}
+        {{ order.val }}
       </option>
     </select>
     <div class="p-1 border border-gray-400 hover:bg-gray-200 rounded-md" @click="$emit('remove')">
@@ -23,47 +34,102 @@ import { defineComponent, type PropType } from "vue";
 import { mapActions, mapState } from "pinia";
 import type { OrderByStructure, OrderByType } from "@/types/dynamicQueries";
 import { useQueryBuilderStore } from "@/stores/admin/club/queryBuilder";
-import { TrashIcon } from "@heroicons/vue/24/outline";
+import { TrashIcon, ChevronDownIcon, ChevronUpIcon } from "@heroicons/vue/24/outline";
 </script>
 
 <script lang="ts">
 export default defineComponent({
   props: {
+    notFirst: {
+      type: Boolean,
+      defailt: false,
+    },
+    notLast: {
+      type: Boolean,
+      defailt: false,
+    },
     table: {
       type: String,
       default: "",
     },
+    // columns: {
+    //   type: [Array, String] as PropType<"*" | Array<string>>,
+    //   default: "*",
+    // },
     columns: {
-      type: [Array, String] as PropType<"*" | Array<string>>,
+      type: Array as PropType<
-      default: "*",
+        Array<{ table: string; id: string; depth: number; path: string[]; columns: "*" | string[] }>
+      >,
+      default: [],
     },
     modelValue: {
       type: Object as PropType<OrderByStructure>,
       default: {},
     },
+    alreadySorted: {
+      type: Array as PropType<Array<{ id: string; col: string }>>,
+      default: [],
+    },
+  },
+  emits: ["update:model-value", "remove", "up", "down"],
+  watch: {
+    columns() {
+      if (!this.columns.some((c) => c.id == this.modelValue.id)) {
+        this.$emit("remove");
+      }
+    },
   },
-  emits: ["update:model-value", "remove"],
   data() {
-    return {};
+    return {
+      orderable: [
+        { key: "ASC", val: "Aufsteigend (ABC)" },
+        { key: "DESC", val: "Absteigend (CBA)" },
+      ],
+    };
   },
   computed: {
     ...mapState(useQueryBuilderStore, ["tableMetas"]),
+    // selectableColumns() {
+    //   if (this.columns == "*") {
+    //     let meta = this.tableMetas.find((tm) => tm.tableName == this.table);
+    //     if (!meta) return [];
+    //     let relCols = meta.relations.map((r) => r.column);
+    //     return meta.columns.map((c) => c.column).filter((c) => !relCols.includes(c));
+    //   } else {
+    //     return this.columns;
+    //   }
+    // },
     selectableColumns() {
-      if (this.columns == "*") {
+      return this.columns.reduce(
-        let meta = this.tableMetas.find((tm) => tm.tableName == this.table);
+        (acc, curr) => {
-        if (!meta) return [];
+          if (curr.columns == "*") {
-        let relCols = meta.relations.map((r) => r.column);
+            let meta = this.tableMetas.find((tm) => tm.tableName == curr.table);
-        return meta.columns.map((c) => c.column).filter((c) => !relCols.includes(c));
+            if (meta) {
-      } else {
+              let relCols = meta.relations.map((r) => r.column);
-        return this.columns;
+              meta.columns
-      }
+                .map((c) => c.column)
+                .filter((c) => !relCols.includes(c))
+                .forEach((c) =>
+                  acc.push({ id: curr.id, depth: curr.depth, table: curr.table, column: c, path: curr.path })
+                );
+            }
+          } else {
+            curr.columns.forEach((c) =>
+              acc.push({ id: curr.id, depth: curr.depth, table: curr.table, column: c, path: curr.path })
+            );
+          }
+          return acc;
+        },
+        [] as Array<{ id: string; depth: number; table: string; column: string; path: string[] }>
+      );
     },
     column: {
       get() {
-        return this.modelValue.column;
+        return `${this.modelValue.id}_${this.modelValue.column}`;
       },
-      set(val: string) {
+      set(val: `${string}_${string}`) {
-        this.$emit("update:model-value", { ...this.modelValue, column: val });
+        let col = this.selectableColumns.find((sc) => sc.id == val.split("_")[0] && sc.column == val.split("_")[1]);
+        this.$emit("update:model-value", { ...this.modelValue, ...col });
       },
     },
     order: {

src/components/queryBuilder/Table.vue

@@ -3,21 +3,20 @@
     <TableSelect v-model="table" :disableTableSelect="disableTableSelect" />
     <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" :alreadyJoined="alreadyJoined" />
-    <Join v-if="table != ''" v-model="modelValue.join" :table="table" />
+    <Order v-if="table != '' && enableOrder" v-model="order" :table="table" :columns="nestedTablesByDepth" />
   </div>
 </template>
 
 <script setup lang="ts">
 import { defineComponent, type PropType } from "vue";
-import { mapActions, mapState } from "pinia";
+import { type ConditionStructure, type DynamicQueryStructure, type OrderByStructure } from "@/types/dynamicQueries";
-import type { ConditionStructure, DynamicQueryStructure, OrderByStructure } from "@/types/dynamicQueries";
-import { useQueryBuilderStore } from "@/stores/admin/club/queryBuilder";
 import ColumnSelect from "./ColumnSelect.vue";
 import Where from "./Where.vue";
 import Order from "./Order.vue";
 import Join from "./Join.vue";
 import TableSelect from "./TableSelect.vue";
+import { v4 as uuid } from "uuid";
 </script>
 
 <script lang="ts">
@@ -25,21 +24,46 @@ export default defineComponent({
   props: {
     modelValue: {
       type: Object as PropType<DynamicQueryStructure>,
-      default: {
+      required: true,
-        select: "*",
-        table: "",
-        where: [],
-        join: [],
-        orderBy: [],
-      },
     },
     disableTableSelect: {
       type: Boolean,
       default: false,
     },
+    enableOrder: {
+      type: Boolean,
+      default: false,
+    },
   },
   emits: ["update:model-value"],
   computed: {
+    alreadyJoined() {
+      return this.modelValue.join?.map((j) => j.table);
+    },
+    nestedTablesByDepth() {
+      const tables: Array<{ table: string; id: string; depth: number; path: string[]; columns: "*" | string[] }> = [];
+
+      function recurse(item: DynamicQueryStructure, path: string[]) {
+        tables.push({ table: item.table, id: item.id, depth: path.length, path, columns: item.select });
+        if (item.join) {
+          item.join.forEach((child) => {
+            recurse(child, [...path, item.table]);
+          });
+        }
+      }
+
+      recurse(this.modelValue, []);
+
+      return tables;
+    },
+    value: {
+      get() {
+        return this.modelValue;
+      },
+      set(val: DynamicQueryStructure) {
+        this.$emit("update:model-value", val);
+      },
+    },
     table: {
       get() {
         return this.modelValue.table || "";
@@ -81,5 +105,10 @@ export default defineComponent({
       },
     },
   },
+  mounted() {
+    if (!this.value.id) {
+      this.value.id = uuid();
+    }
+  },
 });
 </script>

src/components/queryBuilder/Where.vue

@@ -5,6 +5,7 @@
       <div v-for="(condition, index) in value" class="contents">
         <NestedCondition
           v-if="condition.structureType == 'nested'"
+          :isFirst="index == 0"
           :model-value="condition"
           :table="table"
           @update:model-value="($event) => (value[index] = $event)"
@@ -12,6 +13,7 @@
         />
         <Condition
           v-else
+          :isFirst="index == 0"
           :model-value="condition"
           :table="table"
           @update:model-value="($event) => (value[index] = $event)"
@@ -74,14 +76,14 @@ export default defineComponent({
     addNestedToValue() {
       this.value.push({
         structureType: "nested",
-        concat: this.value.length == 0 ? "_" : "AND",
+        concat: "AND",
         conditions: [],
       });
     },
     addConditionToValue() {
       this.value.push({
         structureType: "condition",
-        concat: this.value.length == 0 ? "_" : "AND",
+        concat: "AND",
         operation: "eq",
         column: "",
         value: "",

src/types/dynamicQueries.ts

@@ -1,9 +1,10 @@
 export interface DynamicQueryStructure {
+  id: string;
   select: string[] | "*";
   table: string;
   where?: Array<ConditionStructure>;
   join?: Array<DynamicQueryStructure & { foreignColumn: string }>;
-  orderBy?: Array<OrderByStructure>;
+  orderBy?: Array<OrderByStructure>; // only at top level
 }
 
 export type ConditionStructure = (
@@ -48,6 +49,9 @@ export type WhereOperation =
 // TODO: age between | age equals | age greater | age smaller
 
 export type OrderByStructure = {
+  id: string;
+  depth: number;
+  table: string;
   column: string;
   order: OrderByType;
 };