ff-admin/src/components/queryBuilder/Condition.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.column">
        {{ foreignColumns?.includes(col.column) ? "FK:" : "" }} {{ col.column }}:{{ col.type }}
      </option>
    </select>
    <select v-model="operation" class="!w-fit !h-fit">
      <option value="" disabled>Vergleich auswählen</option>
      <option v-for="op in whereOperationArray" :value="op">
        {{ op }}
      </option>
    </select>
    <div v-if="!operation.toLowerCase().includes('null')" class="contents">
      <div v-if="operation == 'between'" class="contents">
        <input
          :value="(value as any)?.start"
          @input="(e) => ((value as any).start = (e.target as HTMLInputElement).value)"
          :type="inputType"
          :min="columnType == 'boolean' ? 0 : undefined"
          :max="columnType == 'boolean' ? 1 : undefined"
        />
        <p>-</p>
        <input
          :value="(value as any)?.end"
          @input="(e) => ((value as any).end = (e.target as HTMLInputElement).value)"
          :type="inputType"
          :min="columnType == 'boolean' ? 0 : undefined"
          :max="columnType == 'boolean' ? 1 : undefined"
        />
      </div>
      <input
        v-else
        v-model="value"
        :type="inputType"
        :min="columnType == 'boolean' ? 0 : undefined"
        :max="columnType == 'boolean' ? 1 : undefined"
      />
    </div>

    <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 {
  whereOperationArray,
  type ConditionStructure,
  type ConditionValue,
  type WhereOperation,
  type 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);
    },
    columnType() {
      return this.activeTable?.columns.find((c) => c.column == this.column)?.type;
    },
    inputType() {
      if (this.operation.includes("timespan")) return "number";
      switch (this.columnType) {
        case "int":
          return "number";
        case "varchar":
          return "text";
        case "date":
          return "date";
        case "boolean":
          return "number"; // "checkbox";
        default:
          return "text";
      }
    },
    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) {
        if (val == "between") {
          this.$emit("update:model-value", { ...this.modelValue, operation: val, value: { start: "", end: "" } });
        } else {
          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>