Ehrenamt/ff-admin
2
0
Fork 0
Code Issues 12 Pull requests Projects Releases 18 Packages Wiki Activity Actions

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

Browse source 
Reviewed-on: #82
This commit is contained in:
Julian Krauser 2025-04-15 08:47:14 +00:00
commit d39ebc5029
10 changed files with 241 additions and 70 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
src/components/queryBuilder/BuilderHost.vue
View file

@ -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: [],

14
src/components/queryBuilder/Condition.vue
View file

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

15
src/components/queryBuilder/Join.vue
View file

@ -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: [],

41
src/components/queryBuilder/JoinTable.vue
View file

@ -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: {
select: "*",
table: "",
where: [],
join: [],
orderBy: [],
foreignColumn: "",
},
required: true,
},
alreadyJoined: {
type: Array as PropType<Array<string>>,
default: [],
},
},
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>

14
src/components/queryBuilder/NestedCondition.vue
View file

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

29
src/components/queryBuilder/Order.vue
View file

@ -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>>,
default: "*",
type: Array as PropType<
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>

106
src/components/queryBuilder/OrderStructure.vue
View file

@ -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">
{{ column }}
<option
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">
{{ order }}
<option v-for="order in orderable" :value="order.key">
{{ 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>>,
default: "*",
type: Array as PropType<
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 == "*") {
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;
}
return this.columns.reduce(
(acc, curr) => {
if (curr.columns == "*") {
let meta = this.tableMetas.find((tm) => tm.tableName == curr.table);
if (meta) {
let relCols = meta.relations.map((r) => r.column);
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) {
this.$emit("update:model-value", { ...this.modelValue, column: val });
set(val: `${string}_${string}`) {
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: {

53
src/components/queryBuilder/Table.vue
View file

@ -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" />
<Join v-if="table != ''" v-model="modelValue.join" :table="table" :alreadyJoined="alreadyJoined" />
<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, DynamicQueryStructure, OrderByStructure } from "@/types/dynamicQueries";
import { useQueryBuilderStore } from "@/stores/admin/club/queryBuilder";
import { type ConditionStructure, type DynamicQueryStructure, type OrderByStructure } from "@/types/dynamicQueries";
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: {
select: "*",
table: "",
where: [],
join: [],
orderBy: [],
},
required: true,
},
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>

6
src/components/queryBuilder/Where.vue
View file

@ -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: "",

6
src/types/dynamicQueries.ts
View file

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