2024-12-15 13:48:55 +01:00
|
|
|
<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>
|
2024-12-15 13:48:55 +01:00
|
|
|
</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";
|
2024-12-15 13:48:55 +01:00
|
|
|
</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);
|
2024-12-15 13:48:55 +01:00
|
|
|
},
|
|
|
|
},
|
|
|
|
});
|
|
|
|
</script>
|