64 lines
1.8 KiB
Vue
64 lines
1.8 KiB
Vue
<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">
|
|
<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>
|