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>

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)) {