88 lines
2.5 KiB
Vue
88 lines
2.5 KiB
Vue
|
<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>
|