ff-admin/src/components/queryBuilder/Table.vue
2025-01-02 18:28:13 +01:00

85 lines
2.4 KiB
Vue

<template>
<div class="flex flex-col gap-2 w-full">
<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" />
</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 ColumnSelect from "./ColumnSelect.vue";
import Where from "./Where.vue";
import Order from "./Order.vue";
import Join from "./Join.vue";
import TableSelect from "./TableSelect.vue";
</script>
<script lang="ts">
export default defineComponent({
props: {
modelValue: {
type: Object as PropType<DynamicQueryStructure>,
default: {
select: "*",
table: "",
where: [],
join: [],
orderBy: [],
},
},
disableTableSelect: {
type: Boolean,
default: false,
},
},
emits: ["update:model-value"],
computed: {
table: {
get() {
return this.modelValue.table || "";
},
set(val: string) {
this.$emit("update:model-value", { ...this.modelValue, table: val });
},
},
columnSelect: {
get() {
return this.modelValue.select;
},
set(val: "*" | Array<string>) {
this.$emit("update:model-value", { ...this.modelValue, select: val });
},
},
where: {
get() {
return this.modelValue.where;
},
set(val: Array<ConditionStructure>) {
this.$emit("update:model-value", { ...this.modelValue, where: val });
},
},
order: {
get() {
return this.modelValue.orderBy;
},
set(val: Array<OrderByStructure>) {
this.$emit("update:model-value", { ...this.modelValue, orderBy: val });
},
},
join: {
get() {
return this.modelValue.join;
},
set(val: Array<DynamicQueryStructure & { foreignColumn: string }>) {
this.$emit("update:model-value", { ...this.modelValue, join: val });
},
},
},
});
</script>