From 8087108b908ec9c7c6e7f743d9c1ca251024b83b Mon Sep 17 00:00:00 2001 From: Julian Krauser <jkrauser209@gmail.com> Date: Tue, 15 Apr 2025 09:35:08 +0200 Subject: [PATCH] change order of sorts --- src/components/queryBuilder/Order.vue | 10 ++++++++++ src/components/queryBuilder/OrderStructure.vue | 16 ++++++++++++++-- 2 files changed, 24 insertions(+), 2 deletions(-) diff --git a/src/components/queryBuilder/Order.vue b/src/components/queryBuilder/Order.vue index f633b42..a1d5332 100644 --- a/src/components/queryBuilder/Order.vue +++ b/src/components/queryBuilder/Order.vue @@ -8,6 +8,10 @@ :table="table" :columns="columns" :alreadySorted="alreadySorted" + :notFirst="index != 0" + :notLast="index != value.length - 1" + @up="changeSort('up', index)" + @down="changeSort('down', index)" @update:model-value="($event) => (value[index] = $event)" @remove="removeAtIndex(index)" /> @@ -82,6 +86,12 @@ export default defineComponent({ removeAtIndex(index: number) { this.value.splice(index, 1); }, + changeSort(dir: "up" | "down", index: number) { + const swapIndex = dir === "up" ? index - 1 : index + 1; + if (swapIndex >= 0 && swapIndex < this.value.length) { + [this.value[index], this.value[swapIndex]] = [this.value[swapIndex], this.value[index]]; + } + }, }, }); </script> diff --git a/src/components/queryBuilder/OrderStructure.vue b/src/components/queryBuilder/OrderStructure.vue index cd15f86..9b57fd4 100644 --- a/src/components/queryBuilder/OrderStructure.vue +++ b/src/components/queryBuilder/OrderStructure.vue @@ -1,5 +1,9 @@ <template> <div class="flex flex-row gap-2 items-center w-full"> + <div class="flex flex-col min-w-fit"> + <ChevronUpIcon v-if="notFirst" class="w-4 h-4 stroke-2 cursor-pointer" @click.prevent="$emit('up')" /> + <ChevronDownIcon v-if="notLast" class="w-4 h-4 stroke-2 cursor-pointer" @click.prevent="$emit('down')" /> + </div> <select v-model="column" class="w-full"> <option value="" disabled>Spalte auswählen</option> <option @@ -30,12 +34,20 @@ import { defineComponent, type PropType } from "vue"; import { mapActions, mapState } from "pinia"; import type { OrderByStructure, OrderByType } from "@/types/dynamicQueries"; import { useQueryBuilderStore } from "@/stores/admin/club/queryBuilder"; -import { TrashIcon } from "@heroicons/vue/24/outline"; +import { TrashIcon, ChevronDownIcon, ChevronUpIcon } from "@heroicons/vue/24/outline"; </script> <script lang="ts"> export default defineComponent({ props: { + notFirst: { + type: Boolean, + defailt: false, + }, + notLast: { + type: Boolean, + defailt: false, + }, table: { type: String, default: "", @@ -59,7 +71,7 @@ export default defineComponent({ default: [], }, }, - emits: ["update:model-value", "remove"], + emits: ["update:model-value", "remove", "up", "down"], watch: { columns() { if (!this.columns.some((c) => c.id == this.modelValue.id)) {