ff-admin/src/components/queryBuilder/Order.vue

75 lines
1.9 KiB
Vue
Raw Normal View History

<template>
2024-12-16 15:39:49 +01:00
<div class="flex flex-row gap-2">
<p class="w-14 min-w-14 pt-2">ORDER</p>
<div class="flex flex-row flex-wrap gap-2 items-center w-full">
<OrderStructure
v-for="(order, index) in value"
:model-value="order"
:table="table"
:columns="columns"
@update:model-value="($event) => (value[index] = $event)"
@remove="removeAtIndex(index)"
/>
<div class="flex flex-row gap-2 items-center justify-end w-full">
<div class="p-1 border border-gray-400 hover:bg-gray-200 rounded-md" @click="addToValue">
<PlusIcon class="text-gray-500 h-6 w-6 cursor-pointer" />
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { defineComponent, type PropType } from "vue";
import { mapActions, mapState } from "pinia";
2024-12-26 12:34:36 +01:00
import type { OrderByStructure } from "@/types/dynamicQueries";
2025-01-02 18:28:13 +01:00
import { useQueryBuilderStore } from "@/stores/admin/club/queryBuilder";
2024-12-16 15:39:49 +01:00
import OrderStructure from "./OrderStructure.vue";
import { PlusIcon } from "@heroicons/vue/24/outline";
</script>
<script lang="ts">
export default defineComponent({
props: {
table: {
type: String,
default: "",
},
columns: {
type: [Array, String] as PropType<"*" | Array<string>>,
default: "*",
},
modelValue: {
type: Array as PropType<Array<OrderByStructure>>,
default: [],
},
},
emits: ["update:model-value"],
data() {
return {};
},
computed: {
...mapState(useQueryBuilderStore, ["tableMetas"]),
2024-12-16 15:39:49 +01:00
value: {
get() {
return this.modelValue;
},
set(val: Array<OrderByStructure>) {
this.$emit("update:model-value", val);
},
},
},
methods: {
addToValue() {
this.value.push({
column: "",
order: "ASC",
});
},
removeAtIndex(index: number) {
this.value.splice(index, 1);
},
},
});
</script>