minor v1.4.0 #84

Merged
jkeffects merged 17 commits from develop into main 2025-04-16 15:01:08 +00:00
6 changed files with 97 additions and 46 deletions
Showing only changes of commit 238a35da9f - Show all commits

View file

@ -71,7 +71,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="p-2 h-60 md:h-60 w-full overflow-y-auto"> <div class="p-2 h-44 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" /> <textarea v-if="typeof value == 'string'" v-model="value" placeholder="SQL Query" class="h-full w-full" />
<Table v-else v-model="value" enableOrder /> <Table v-else v-model="value" enableOrder />
</div> </div>

View file

@ -1,6 +1,6 @@
<template> <template>
<div class="flex flex-row gap-2"> <div class="flex flex-row gap-2">
<p class="w-14 min-w-14 pt-2">JOIN</p> <p class="w-14 min-w-14 pt-2">I_JOIN</p>
<div class="flex flex-row flex-wrap gap-2 items-center w-full"> <div class="flex flex-row flex-wrap gap-2 items-center w-full">
<div class="flex flex-row flex-wrap gap-2 items-center justify-end w-full"> <div class="flex flex-row flex-wrap gap-2 items-center justify-end w-full">
<JoinTable <JoinTable
@ -22,7 +22,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { defineComponent, type PropType } from "vue"; import { defineComponent, type PropType } from "vue";
import { mapActions, mapState } from "pinia"; import { mapActions, mapState } from "pinia";
import { type DynamicQueryStructure } from "@/types/dynamicQueries"; import { type DynamicQueryStructure, type JoinStructure } from "@/types/dynamicQueries";
import { useQueryBuilderStore } from "@/stores/admin/club/queryBuilder"; import { useQueryBuilderStore } from "@/stores/admin/club/queryBuilder";
import { PlusIcon } from "@heroicons/vue/24/outline"; import { PlusIcon } from "@heroicons/vue/24/outline";
import JoinTable from "./JoinTable.vue"; import JoinTable from "./JoinTable.vue";
@ -37,7 +37,7 @@ export default defineComponent({
default: "", default: "",
}, },
modelValue: { modelValue: {
type: Array as PropType<Array<DynamicQueryStructure & { foreignColumn: string }>>, type: Array as PropType<Array<DynamicQueryStructure & JoinStructure>>,
default: [], default: [],
}, },
alreadyJoined: { alreadyJoined: {
@ -52,7 +52,7 @@ export default defineComponent({
get() { get() {
return this.modelValue; return this.modelValue;
}, },
set(val: Array<DynamicQueryStructure & { foreignColumn: string }>) { set(val: Array<DynamicQueryStructure & JoinStructure>) {
this.$emit("update:model-value", val); this.$emit("update:model-value", val);
}, },
}, },
@ -66,6 +66,7 @@ export default defineComponent({
where: [], where: [],
join: [], join: [],
orderBy: [], orderBy: [],
type: "defined",
foreignColumn: "", foreignColumn: "",
}); });
}, },

View file

@ -2,28 +2,51 @@
<div class="flex flex-row gap-2 w-full"> <div class="flex flex-row gap-2 w-full">
<div class="flex flex-row gap-2 w-full"> <div class="flex flex-row gap-2 w-full">
<div class="flex flex-col gap-2 w-full"> <div class="flex flex-col gap-2 w-full">
<select v-model="foreignColumn" class="w-full"> <div class="flex flex-row gap-2 w-full">
<option value="" disabled>Relation auswählen</option> <div
<option class="h-fit p-1 border border-gray-400 hover:bg-gray-200 rounded-md"
v-for="relation in activeTable?.relations" title="Join Modus wechseln"
:value="relation.column" @click="swapJoinType(value.type)"
:disabled="
alreadyJoined.includes(joinTableName(relation.referencedTableName)) &&
joinTableName(relation.referencedTableName) != value.table
"
> >
{{ relation.column }} -> {{ joinTableName(relation.referencedTableName) }} <ArrowsUpDownIcon class="text-gray-500 h-6 w-6 cursor-pointer" />
<span </div>
v-if="
<select v-if="value.type == 'defined'" v-model="context" class="w-full">
<option value="" disabled>Relation auswählen</option>
<option
v-for="relation in activeTable?.relations"
:value="relation.column"
:disabled="
alreadyJoined.includes(joinTableName(relation.referencedTableName)) && alreadyJoined.includes(joinTableName(relation.referencedTableName)) &&
joinTableName(relation.referencedTableName) != value.table joinTableName(relation.referencedTableName) != value.table
" "
> >
(Join auf dieser Ebene besteht schon) {{ relation.column }} -> {{ joinTableName(relation.referencedTableName) }}
</span> <span
</option> v-if="
</select> alreadyJoined.includes(joinTableName(relation.referencedTableName)) &&
<Table v-model="value" disable-table-select /> joinTableName(relation.referencedTableName) != value.table
"
>
(Join auf dieser Ebene besteht schon)
</span>
</option>
</select>
<div v-else class="flex flex-col w-full">
<select v-model="joinTable">
<option value="" disabled>Tabelle auswählen</option>
<option
v-for="table in tableMetas"
:value="table.tableName"
:disabled="alreadyJoined.includes(table.tableName) && table.tableName != value.table"
>
{{ table.tableName }}
</option>
</select>
<input v-model="context" type="text" placeholder="Join Condition tabA.col = tabB.col" />
</div>
</div>
<Table v-model="value" disable-table-select :show-table-select="false" />
</div> </div>
<div class="h-fit p-1 border border-gray-400 hover:bg-gray-200 rounded-md" @click="$emit('remove')"> <div class="h-fit 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" /> <TrashIcon class="text-gray-500 h-6 w-6 cursor-pointer" />
@ -35,10 +58,10 @@
<script setup lang="ts"> <script setup lang="ts">
import { defineComponent, type PropType } from "vue"; import { defineComponent, type PropType } from "vue";
import { mapActions, mapState } from "pinia"; import { mapActions, mapState } from "pinia";
import { type DynamicQueryStructure } from "@/types/dynamicQueries"; import { type DynamicQueryStructure, type JoinStructure } from "@/types/dynamicQueries";
import { useQueryBuilderStore } from "@/stores/admin/club/queryBuilder"; import { useQueryBuilderStore } from "@/stores/admin/club/queryBuilder";
import Table from "./Table.vue"; import Table from "./Table.vue";
import { TrashIcon } from "@heroicons/vue/24/outline"; import { ArrowsUpDownIcon, TrashIcon } from "@heroicons/vue/24/outline";
import { joinTableName } from "@/helpers/queryFormatter"; import { joinTableName } from "@/helpers/queryFormatter";
import { v4 as uuid } from "uuid"; import { v4 as uuid } from "uuid";
</script> </script>
@ -51,11 +74,7 @@ export default defineComponent({
default: "", default: "",
}, },
modelValue: { modelValue: {
type: Object as PropType< type: Object as PropType<DynamicQueryStructure & JoinStructure>,
DynamicQueryStructure & {
foreignColumn: string;
}
>,
required: true, required: true,
}, },
alreadyJoined: { alreadyJoined: {
@ -73,24 +92,43 @@ export default defineComponent({
get() { get() {
return this.modelValue; return this.modelValue;
}, },
set( set(val: DynamicQueryStructure & JoinStructure) {
val: DynamicQueryStructure & {
foreignColumn: string;
}
) {
this.$emit("update:model-value", val); this.$emit("update:model-value", val);
}, },
}, },
foreignColumn: { context: {
get() { get() {
return this.modelValue.foreignColumn; if (this.modelValue.type == "defined") {
return this.modelValue.foreignColumn ?? "";
} else {
return this.modelValue.condition ?? "";
}
},
set(val: string) {
console.log(val, this.modelValue.type);
if (this.modelValue.type == "defined") {
let relTable = this.activeTable?.relations.find((r) => r.column == val);
this.$emit("update:model-value", {
...this.modelValue,
foreignColumn: val,
table: joinTableName(relTable?.referencedTableName ?? ""),
});
} else {
this.$emit("update:model-value", {
...this.modelValue,
condition: val,
});
}
},
},
joinTable: {
get(): string {
return this.modelValue.table;
}, },
set(val: string) { set(val: string) {
let relTable = this.activeTable?.relations.find((r) => r.column == val);
this.$emit("update:model-value", { this.$emit("update:model-value", {
...this.modelValue, ...this.modelValue,
foreignColumn: val, table: val,
table: joinTableName(relTable?.referencedTableName ?? ""),
}); });
}, },
}, },
@ -100,5 +138,14 @@ export default defineComponent({
this.value.id = uuid(); this.value.id = uuid();
} }
}, },
methods: {
swapJoinType(type: string) {
if (type == "defined") {
this.value.type = "custom";
} else {
this.value.type = "defined";
}
},
},
}); });
</script> </script>

View file

@ -1,6 +1,6 @@
<template> <template>
<div class="flex flex-col gap-2 w-full"> <div class="flex flex-col gap-2 w-full">
<TableSelect v-model="table" :disableTableSelect="disableTableSelect" /> <TableSelect v-if="showTableSelect" v-model="table" :disableTableSelect="disableTableSelect" />
<ColumnSelect v-if="table != ''" v-model="columnSelect" :table="table" /> <ColumnSelect v-if="table != ''" v-model="columnSelect" :table="table" />
<Where v-if="table != ''" v-model="where" :table="table" /> <Where v-if="table != ''" v-model="where" :table="table" />
<Join v-if="table != ''" v-model="modelValue.join" :table="table" :alreadyJoined="alreadyJoined" /> <Join v-if="table != ''" v-model="modelValue.join" :table="table" :alreadyJoined="alreadyJoined" />
@ -34,6 +34,10 @@ export default defineComponent({
type: Boolean, type: Boolean,
default: false, default: false,
}, },
showTableSelect: {
type: Boolean,
default: true,
},
}, },
emits: ["update:model-value"], emits: ["update:model-value"],
computed: { computed: {

View file

@ -3,7 +3,7 @@ export interface DynamicQueryStructure {
select: string[] | "*"; select: string[] | "*";
table: string; table: string;
where?: Array<ConditionStructure>; where?: Array<ConditionStructure>;
join?: Array<DynamicQueryStructure & { foreignColumn: string }>; join?: Array<DynamicQueryStructure & JoinStructure>;
orderBy?: Array<OrderByStructure>; // only at top level orderBy?: Array<OrderByStructure>; // only at top level
} }
@ -48,6 +48,8 @@ export type WhereOperation =
| "timespanEq"; // Date before x years (YYYY-01-01 <bis> YYYY-12-31) | "timespanEq"; // Date before x years (YYYY-01-01 <bis> YYYY-12-31)
// TODO: age between | age equals | age greater | age smaller // TODO: age between | age equals | age greater | age smaller
export type JoinStructure = { foreignColumn: string; type: "defined" } | { condition: string; type: "custom" };
export type OrderByStructure = { export type OrderByStructure = {
id: string; id: string;
depth: number; depth: number;

View file

@ -70,14 +70,11 @@ import { useQueryStoreStore } from "@/stores/admin/configuration/queryStore";
<script lang="ts"> <script lang="ts">
export default defineComponent({ export default defineComponent({
computed: { computed: {
...mapState(useQueryBuilderStore, ["loading", "loadingData", "tableMetas", "data", "totalLength", "queryError"]), ...mapState(useQueryBuilderStore, ["loading", "loadingData", "data", "totalLength", "queryError"]),
...mapWritableState(useQueryBuilderStore, ["query"]), ...mapWritableState(useQueryBuilderStore, ["query"]),
}, },
mounted() {
this.fetchTableMetas();
},
methods: { methods: {
...mapActions(useQueryBuilderStore, ["fetchTableMetas", "sendQuery", "clearResults", "exportData"]), ...mapActions(useQueryBuilderStore, ["sendQuery", "clearResults", "exportData"]),
...mapActions(useQueryStoreStore, ["triggerSave"]), ...mapActions(useQueryStoreStore, ["triggerSave"]),
}, },
}); });