ff-admin/src/components/queryBuilder/NestedCondition.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>