Condition and order building
This commit is contained in:
parent
03c0ee58f2
commit
1f8349f8d0
9 changed files with 433 additions and 15 deletions
87
src/components/queryBuilder/Condition.vue
Normal file
87
src/components/queryBuilder/Condition.vue
Normal file
|
|
@ -0,0 +1,87 @@
|
|||
<template>
|
||||
<div class="flex flex-row gap-2 items-center w-full">
|
||||
<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 }}
|
||||
</option>
|
||||
</select>
|
||||
<select v-model="column">
|
||||
<option value="" disabled>Verknüpfung auswählen</option>
|
||||
<option v-for="col in activeTable?.columns" :value="col">
|
||||
{{ foreignColumns?.includes(col.column) ? "FK:" : "" }} {{ col.column }}:{{ col.type }}
|
||||
</option>
|
||||
</select>
|
||||
<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>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<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 { useQueryBuilderStore } from "../../stores/admin/queryBuilder";
|
||||
import { TrashIcon } from "@heroicons/vue/24/outline";
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default defineComponent({
|
||||
props: {
|
||||
table: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
modelValue: {
|
||||
type: Object as PropType<ConditionStructure & { structureType: "condition" }>,
|
||||
default: {},
|
||||
},
|
||||
},
|
||||
emits: ["update:model-value", "remove"],
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
computed: {
|
||||
...mapState(useQueryBuilderStore, ["tableMetas"]),
|
||||
activeTable() {
|
||||
return this.tableMetas.find((tm) => tm.tableName == this.table);
|
||||
},
|
||||
foreignColumns() {
|
||||
return this.activeTable?.relations.map((r) => r.column);
|
||||
},
|
||||
concat: {
|
||||
get() {
|
||||
return this.modelValue.concat;
|
||||
},
|
||||
set(val: WhereType) {
|
||||
this.$emit("update:model-value", { ...this.modelValue, concat: val });
|
||||
},
|
||||
},
|
||||
column: {
|
||||
get() {
|
||||
return this.modelValue.column;
|
||||
},
|
||||
set(val: string) {
|
||||
this.$emit("update:model-value", { ...this.modelValue, column: val });
|
||||
},
|
||||
},
|
||||
operation: {
|
||||
get() {
|
||||
return this.modelValue.operation;
|
||||
},
|
||||
set(val: WhereOperation) {
|
||||
this.$emit("update:model-value", { ...this.modelValue, operation: val });
|
||||
},
|
||||
},
|
||||
value: {
|
||||
get() {
|
||||
return this.modelValue.value;
|
||||
},
|
||||
set(val: ConditionValue) {
|
||||
this.$emit("update:model-value", { ...this.modelValue, value: val });
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
@ -1,7 +1,13 @@
|
|||
<template>
|
||||
<div class="flex flex-row gap-2 items-center">
|
||||
<p class="w-14 min-w-14">JOIN</p>
|
||||
{{ activeTable?.relations }}
|
||||
<div class="flex flex-row gap-2">
|
||||
<p class="w-14 min-w-14 pt-2">JOIN</p>
|
||||
<div class="flex flex-row flex-wrap gap-2 items-center w-full">
|
||||
<div class="flex flex-row gap-2 items-center justify-end w-full">
|
||||
<div class="p-1 border border-gray-400 hover:bg-gray-200 rounded-md" @click="">
|
||||
<PlusIcon class="text-gray-500 h-6 w-6 cursor-pointer" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -10,6 +16,7 @@ import { defineComponent, type PropType } from "vue";
|
|||
import { mapActions, mapState } from "pinia";
|
||||
import type { DynamicQueryStructure } from "../../types/dynamicQueries";
|
||||
import { useQueryBuilderStore } from "../../stores/admin/queryBuilder";
|
||||
import { PlusIcon } from "@heroicons/vue/24/outline";
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
|
|
|
|||
64
src/components/queryBuilder/NestedCondition.vue
Normal file
64
src/components/queryBuilder/NestedCondition.vue
Normal file
|
|
@ -0,0 +1,64 @@
|
|||
<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">
|
||||
<option value="" disabled>Verknüpfung auswählen</option>
|
||||
<option v-for="operation in ['AND', 'OR']" :value="operation">
|
||||
{{ operation }}
|
||||
</option>
|
||||
</select>
|
||||
<NestedWhere v-model="conditions" :table="table" />
|
||||
<div
|
||||
class="flex items-center justify-center h-full 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>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { defineComponent, type PropType } from "vue";
|
||||
import { mapActions, mapState } from "pinia";
|
||||
import type { ConditionStructure, WhereType } from "../../types/dynamicQueries";
|
||||
import { useQueryBuilderStore } from "../../stores/admin/queryBuilder";
|
||||
import { TrashIcon } from "@heroicons/vue/24/outline";
|
||||
import NestedWhere from "./NestedWhere.vue";
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default defineComponent({
|
||||
props: {
|
||||
table: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
modelValue: {
|
||||
type: Object as PropType<ConditionStructure & { structureType: "nested" }>,
|
||||
default: {},
|
||||
},
|
||||
},
|
||||
emits: ["update:model-value", "remove"],
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
computed: {
|
||||
...mapState(useQueryBuilderStore, ["tableMetas"]),
|
||||
concat: {
|
||||
get() {
|
||||
return this.modelValue.concat;
|
||||
},
|
||||
set(val: WhereType) {
|
||||
this.$emit("update:model-value", { ...this.modelValue, concat: val });
|
||||
},
|
||||
},
|
||||
conditions: {
|
||||
get() {
|
||||
return this.modelValue.conditions;
|
||||
},
|
||||
set(val: Array<ConditionStructure>) {
|
||||
this.$emit("update:model-value", { ...this.modelValue, conditions: val });
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
93
src/components/queryBuilder/NestedWhere.vue
Normal file
93
src/components/queryBuilder/NestedWhere.vue
Normal file
|
|
@ -0,0 +1,93 @@
|
|||
<template>
|
||||
<div class="flex flex-row gap-2 w-full">
|
||||
<div class="flex flex-row flex-wrap gap-2 items-center w-full">
|
||||
<div v-for="(condition, index) in value" class="contents">
|
||||
<NestedCondition
|
||||
v-if="condition.structureType == 'nested'"
|
||||
:model-value="condition"
|
||||
:table="table"
|
||||
@update:model-value="($event) => (value[index] = $event)"
|
||||
@remove="removeAtIndex(index)"
|
||||
/>
|
||||
<Condition
|
||||
v-else
|
||||
:model-value="condition"
|
||||
@update:model-value="($event) => (value[index] = $event)"
|
||||
@remove="removeAtIndex(index)"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex flex-row gap-2 items-center justify-end w-full">
|
||||
<div class="p-1 border border-gray-400 hover:bg-gray-200 rounded-md" @click="addConditionToValue">
|
||||
<PlusIcon class="text-gray-500 h-6 w-6 cursor-pointer" />
|
||||
</div>
|
||||
<div class="p-1 border border-gray-400 hover:bg-gray-200 rounded-md" @click="addNestedToValue">
|
||||
<RectangleStackIcon class="text-gray-500 h-6 w-6 cursor-pointer" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { defineComponent, type PropType } from "vue";
|
||||
import { mapActions, mapState } from "pinia";
|
||||
import type { ConditionStructure } from "../../types/dynamicQueries";
|
||||
import { useQueryBuilderStore } from "../../stores/admin/queryBuilder";
|
||||
import NestedCondition from "./NestedCondition.vue";
|
||||
import Condition from "./Condition.vue";
|
||||
import { PlusIcon, RectangleStackIcon } from "@heroicons/vue/24/outline";
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default defineComponent({
|
||||
props: {
|
||||
table: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
modelValue: {
|
||||
type: Array as PropType<Array<ConditionStructure>>,
|
||||
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;
|
||||
},
|
||||
set(val: Array<ConditionStructure>) {
|
||||
this.$emit("update:model-value", val);
|
||||
},
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
addNestedToValue() {
|
||||
this.value.push({
|
||||
structureType: "nested",
|
||||
concat: "AND",
|
||||
conditions: [],
|
||||
});
|
||||
},
|
||||
addConditionToValue() {
|
||||
this.value.push({
|
||||
structureType: "condition",
|
||||
concat: this.value.length == 0 ? "_" : "AND",
|
||||
operation: "eq",
|
||||
column: "",
|
||||
value: "",
|
||||
});
|
||||
},
|
||||
removeAtIndex(index: number) {
|
||||
this.value.splice(index, 1);
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
@ -1,6 +1,21 @@
|
|||
<template>
|
||||
<div class="flex flex-row gap-2 items-center">
|
||||
<p class="w-14 min-w-14">ORDER</p>
|
||||
<div class="flex flex-row gap-2">
|
||||
<p class="w-14 min-w-14 pt-2">ORDER</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"
|
||||
@update:model-value="($event) => (value[index] = $event)"
|
||||
@remove="removeAtIndex(index)"
|
||||
/>
|
||||
<div class="flex flex-row gap-2 items-center justify-end w-full">
|
||||
<div class="p-1 border border-gray-400 hover:bg-gray-200 rounded-md" @click="addToValue">
|
||||
<PlusIcon class="text-gray-500 h-6 w-6 cursor-pointer" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -9,6 +24,8 @@ import { defineComponent, type PropType } from "vue";
|
|||
import { mapActions, mapState } from "pinia";
|
||||
import type { OrderByStructure } from "../../types/dynamicQueries";
|
||||
import { useQueryBuilderStore } from "../../stores/admin/queryBuilder";
|
||||
import OrderStructure from "./OrderStructure.vue";
|
||||
import { PlusIcon } from "@heroicons/vue/24/outline";
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
|
|
@ -33,8 +50,24 @@ export default defineComponent({
|
|||
},
|
||||
computed: {
|
||||
...mapState(useQueryBuilderStore, ["tableMetas"]),
|
||||
activeTable() {
|
||||
return this.tableMetas.find((tm) => tm.tableName == this.table);
|
||||
value: {
|
||||
get() {
|
||||
return this.modelValue;
|
||||
},
|
||||
set(val: Array<OrderByStructure>) {
|
||||
this.$emit("update:model-value", val);
|
||||
},
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
addToValue() {
|
||||
this.value.push({
|
||||
column: "",
|
||||
order: "ASC",
|
||||
});
|
||||
},
|
||||
removeAtIndex(index: number) {
|
||||
this.value.splice(index, 1);
|
||||
},
|
||||
},
|
||||
});
|
||||
|
|
|
|||
79
src/components/queryBuilder/OrderStructure.vue
Normal file
79
src/components/queryBuilder/OrderStructure.vue
Normal file
|
|
@ -0,0 +1,79 @@
|
|||
<template>
|
||||
<div class="flex flex-row gap-2 items-center w-full">
|
||||
<select v-model="column" class="w-full">
|
||||
<option value="" disabled>Spalte auswählen</option>
|
||||
<option v-for="column in selectableColumns" :value="column">
|
||||
{{ 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>
|
||||
</select>
|
||||
<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>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { defineComponent, type PropType } from "vue";
|
||||
import { mapActions, mapState } from "pinia";
|
||||
import type { OrderByStructure, OrderByType } from "../../types/dynamicQueries";
|
||||
import { useQueryBuilderStore } from "../../stores/admin/queryBuilder";
|
||||
import { TrashIcon } from "@heroicons/vue/24/outline";
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default defineComponent({
|
||||
props: {
|
||||
table: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
columns: {
|
||||
type: [Array, String] as PropType<"*" | Array<string>>,
|
||||
default: "*",
|
||||
},
|
||||
modelValue: {
|
||||
type: Object as PropType<OrderByStructure>,
|
||||
default: {},
|
||||
},
|
||||
},
|
||||
emits: ["update:model-value", "remove"],
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
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;
|
||||
}
|
||||
},
|
||||
column: {
|
||||
get() {
|
||||
return this.modelValue.column;
|
||||
},
|
||||
set(val: string) {
|
||||
this.$emit("update:model-value", { ...this.modelValue, column: val });
|
||||
},
|
||||
},
|
||||
order: {
|
||||
get() {
|
||||
return this.modelValue.order;
|
||||
},
|
||||
set(val: OrderByType) {
|
||||
this.$emit("update:model-value", { ...this.modelValue, order: val });
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
@ -2,9 +2,9 @@
|
|||
<div class="flex flex-col gap-2">
|
||||
<TableSelect v-model="table" />
|
||||
<ColumnSelect v-model="columnSelect" :table="table" />
|
||||
<Where v-model="where" :table="table" :columns="columnSelect" />
|
||||
<Where v-model="where" :table="table" />
|
||||
<Order v-model="order" :table="table" :columns="columnSelect" />
|
||||
<Join v-model="modelValue.join" />
|
||||
<Join v-model="modelValue.join" :table="table" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,32 @@
|
|||
<template>
|
||||
<div class="flex flex-row gap-2 items-center">
|
||||
<p class="w-14 min-w-14">WHERE</p>
|
||||
<div class="flex flex-row gap-2 w-full">
|
||||
<p class="w-14 min-w-14 pt-2">WHERE</p>
|
||||
<div class="flex flex-row flex-wrap gap-2 items-center w-full">
|
||||
<div v-for="(condition, index) in value" class="contents">
|
||||
<NestedCondition
|
||||
v-if="condition.structureType == 'nested'"
|
||||
:model-value="condition"
|
||||
:table="table"
|
||||
@update:model-value="($event) => (value[index] = $event)"
|
||||
@remove="removeAtIndex(index)"
|
||||
/>
|
||||
<Condition
|
||||
v-else
|
||||
:model-value="condition"
|
||||
:table="table"
|
||||
@update:model-value="($event) => (value[index] = $event)"
|
||||
@remove="removeAtIndex(index)"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex flex-row gap-2 items-center justify-end w-full">
|
||||
<div class="p-1 border border-gray-400 hover:bg-gray-200 rounded-md" @click="addConditionToValue">
|
||||
<PlusIcon class="text-gray-500 h-6 w-6 cursor-pointer" />
|
||||
</div>
|
||||
<div class="p-1 border border-gray-400 hover:bg-gray-200 rounded-md" @click="addNestedToValue">
|
||||
<RectangleStackIcon class="text-gray-500 h-6 w-6 cursor-pointer" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -9,6 +35,9 @@ import { defineComponent, type PropType } from "vue";
|
|||
import { mapActions, mapState } from "pinia";
|
||||
import type { ConditionStructure } from "../../types/dynamicQueries";
|
||||
import { useQueryBuilderStore } from "../../stores/admin/queryBuilder";
|
||||
import NestedCondition from "./NestedCondition.vue";
|
||||
import Condition from "./Condition.vue";
|
||||
import { PlusIcon, RectangleStackIcon } from "@heroicons/vue/24/outline";
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
|
|
@ -18,10 +47,6 @@ export default defineComponent({
|
|||
type: String,
|
||||
default: "",
|
||||
},
|
||||
columns: {
|
||||
type: [Array, String] as PropType<"*" | Array<string>>,
|
||||
default: "*",
|
||||
},
|
||||
modelValue: {
|
||||
type: Array as PropType<Array<ConditionStructure>>,
|
||||
default: [],
|
||||
|
|
@ -36,6 +61,35 @@ export default defineComponent({
|
|||
activeTable() {
|
||||
return this.tableMetas.find((tm) => tm.tableName == this.table);
|
||||
},
|
||||
value: {
|
||||
get() {
|
||||
return this.modelValue;
|
||||
},
|
||||
set(val: Array<ConditionStructure>) {
|
||||
this.$emit("update:model-value", val);
|
||||
},
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
addNestedToValue() {
|
||||
this.value.push({
|
||||
structureType: "nested",
|
||||
concat: "AND",
|
||||
conditions: [],
|
||||
});
|
||||
},
|
||||
addConditionToValue() {
|
||||
this.value.push({
|
||||
structureType: "condition",
|
||||
concat: this.value.length == 0 ? "_" : "AND",
|
||||
operation: "eq",
|
||||
column: "",
|
||||
value: "",
|
||||
});
|
||||
},
|
||||
removeAtIndex(index: number) {
|
||||
this.value.splice(index, 1);
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -44,6 +44,7 @@ export type WhereOperation =
|
|||
| "between" // Is between
|
||||
| "startsWith" // Starts with
|
||||
| "endsWith"; // Ends with
|
||||
// TODO: age between | age equals | age greater | age smaller
|
||||
|
||||
export type OrderByStructure = {
|
||||
column: string;
|
||||
|
|
|
|||
Loading…
Reference in a new issue