src/stores/admin/club/protocol/protocolAgenda.ts

@@ -54,6 +54,7 @@ export const useProtocolAgendaStore = defineStore("protocolAgenda", {
             id: Number(res.data),
             topic: "",
             context: "",
+            sort: this.agenda.length,
             protocolId: Number(protocolId),
           });
         })

src/stores/admin/club/protocol/protocolDecision.ts

@@ -55,6 +55,7 @@ export const useProtocolDecisionStore = defineStore("protocolDecision", {
             id: Number(res.data),
             topic: "",
             context: "",
+            sort: this.decision.length,
             protocolId: Number(protocolId),
           });
         })

src/stores/admin/club/protocol/protocolVoting.ts

@@ -58,6 +58,7 @@ export const useProtocolVotingStore = defineStore("protocolVoting", {
             favour: 0,
             abstain: 0,
             against: 0,
+            sort: this.voting.length,
             protocolId: Number(protocolId),
           });
         })

src/viewmodels/admin/club/protocol/protocolAgenda.models.ts

@@ -2,6 +2,7 @@ export interface ProtocolAgendaViewModel {
   id: number;
   topic: string;
   context: string;
+  sort: number;
   protocolId: number;
 }
 
@@ -9,4 +10,5 @@ export interface SyncProtocolAgendaViewModel {
   id?: number;
   topic: string;
   context: string;
+  sort?: number;
 }

src/viewmodels/admin/club/protocol/protocolDecision.models.ts

@@ -2,6 +2,7 @@ export interface ProtocolDecisionViewModel {
   id: number;
   topic: string;
   context: string;
+  sort: number;
   protocolId: number;
 }
 
@@ -9,4 +10,5 @@ export interface SyncProtocolDecisionViewModel {
   id?: number;
   topic: string;
   context: string;
+  sort?: number;
 }

src/viewmodels/admin/club/protocol/protocolVoting.models.ts

@@ -5,6 +5,7 @@ export interface ProtocolVotingViewModel {
   favour: number;
   abstain: number;
   against: number;
+  sort: number;
   protocolId: number;
 }
 
@@ -15,5 +16,5 @@ export interface SyncProtocolVotingViewModel {
   favour: number;
   abstain: number;
   against: number;
-  protocolId: number;
+  sort?: number;
 }

src/views/admin/club/protocol/ProtocolAgenda.vue

@@ -5,10 +5,10 @@
       ↺ laden fehlgeschlagen
     </p>
 
-    <div class="flex flex-col gap-2 h-full overflow-y-auto">
+    <div class="flex flex-col gap-2 h-full overflow-y-scroll">
       <details
-        v-for="item in agenda"
+        v-for="(item, index) in sortedAgenda"
-        class="flex flex-col gap-2 rounded-lg w-full justify-between border border-primary overflow-hidden min-h-fit"
+        class="flex flex-col rounded-lg w-full justify-between border border-primary overflow-hidden min-h-fit"
       >
         <summary class="flex flex-row gap-2 bg-primary p-2 w-full justify-between items-center cursor-pointer">
           <svg
@@ -30,6 +30,19 @@
             @keyup.prevent
             :disabled="!can('create', 'club', 'protocol')"
           />
+
+          <div class="flex flex-col">
+            <ChevronUpIcon
+              v-if="index != 0"
+              class="text-white w-4 h-4 stroke-2"
+              @click.prevent="changeSort('up', item.id, index)"
+            />
+            <ChevronDownIcon
+              v-if="index != agenda.length - 1"
+              class="text-white w-4 h-4 stroke-2"
+              @click.prevent="changeSort('down', item.id, index)"
+            />
+          </div>
         </summary>
         <QuillEditor
           id="top"
@@ -59,8 +72,8 @@ import { QuillEditor } from "@vueup/vue-quill";
 import "@vueup/vue-quill/dist/vue-quill.snow.css";
 import { toolbarOptions } from "@/helpers/quillConfig";
 import { useProtocolAgendaStore } from "@/stores/admin/club/protocol/protocolAgenda";
-import type { ProtocolAgendaViewModel } from "@/viewmodels/admin/club/protocol/protocolAgenda.models";
 import { useAbilityStore } from "@/stores/ability";
+import { ChevronDownIcon, ChevronUpIcon } from "@heroicons/vue/24/outline";
 </script>
 
 <script lang="ts">
@@ -71,12 +84,31 @@ export default defineComponent({
   computed: {
     ...mapWritableState(useProtocolAgendaStore, ["agenda", "loading"]),
     ...mapState(useAbilityStore, ["can"]),
+    sortedAgenda() {
+      return this.agenda.slice().sort((a, b) => a.sort - b.sort);
+    },
   },
   mounted() {
-    // this.fetchProtocolAgenda();
+    this.normalizeSort();
   },
   methods: {
     ...mapActions(useProtocolAgendaStore, ["fetchProtocolAgenda", "createProtocolAgenda"]),
+    changeSort(dir: "up" | "down", thisId: number, index: number) {
+      let affected = this.sortedAgenda[dir == "up" ? index - 1 : index + 1]?.id;
+      if (affected) {
+        this.agenda.find((a) => a.id == thisId)!.sort = dir == "up" ? index - 1 : index + 1;
+        this.agenda.find((a) => a.id == affected)!.sort = dir == "up" ? index + 1 : index - 1;
+      }
+      this.normalizeSort();
+    },
+    normalizeSort() {
+      let rightSort = this.agenda.every((val, index) => val.sort == index);
+      if (!rightSort) {
+        this.sortedAgenda.forEach((e, index) => {
+          e.sort = index;
+        });
+      }
+    },
   },
 });
 </script>

src/views/admin/club/protocol/ProtocolDecisions.vue

@@ -5,10 +5,10 @@
       ↺ laden fehlgeschlagen
     </p>
 
-    <div class="flex flex-col gap-2 h-full overflow-y-auto">
+    <div class="flex flex-col gap-2 h-full overflow-y-scroll">
       <details
-        v-for="item in decision"
+        v-for="(item, index) in sortedDecision"
-        class="flex flex-col gap-2 rounded-lg w-full justify-between border border-primary overflow-hidden min-h-fit"
+        class="flex flex-col rounded-lg w-full justify-between border border-primary overflow-hidden min-h-fit"
       >
         <summary class="flex flex-row gap-2 bg-primary p-2 w-full justify-between items-center cursor-pointer">
           <svg
@@ -30,6 +30,19 @@
             @keyup.prevent
             :disabled="!can('create', 'club', 'protocol')"
           />
+
+          <div class="flex flex-col">
+            <ChevronUpIcon
+              v-if="index != 0"
+              class="text-white w-4 h-4 stroke-2"
+              @click.prevent="changeSort('up', item.id, index)"
+            />
+            <ChevronDownIcon
+              v-if="index != decision.length - 1"
+              class="text-white w-4 h-4 stroke-2"
+              @click.prevent="changeSort('down', item.id, index)"
+            />
+          </div>
         </summary>
         <QuillEditor
           id="top"
@@ -55,12 +68,12 @@
 import { defineComponent } from "vue";
 import { mapActions, mapState, mapWritableState } from "pinia";
 import Spinner from "@/components/Spinner.vue";
-import { useProtocolStore } from "@/stores/admin/club/protocol/protocol";
 import { QuillEditor } from "@vueup/vue-quill";
 import "@vueup/vue-quill/dist/vue-quill.snow.css";
 import { toolbarOptions } from "@/helpers/quillConfig";
 import { useProtocolDecisionStore } from "@/stores/admin/club/protocol/protocolDecision";
 import { useAbilityStore } from "@/stores/ability";
+import { ChevronDownIcon, ChevronUpIcon } from "@heroicons/vue/24/outline";
 </script>
 
 <script lang="ts">
@@ -71,12 +84,31 @@ export default defineComponent({
   computed: {
     ...mapWritableState(useProtocolDecisionStore, ["decision", "loading"]),
     ...mapState(useAbilityStore, ["can"]),
+    sortedDecision() {
+      return this.decision.slice().sort((a, b) => a.sort - b.sort);
+    },
   },
   mounted() {
-    // this.fetchProtocolDecision();
+    this.normalizeSort();
   },
   methods: {
     ...mapActions(useProtocolDecisionStore, ["fetchProtocolDecision", "createProtocolDecision"]),
+    changeSort(dir: "up" | "down", thisId: number, index: number) {
+      let affected = this.sortedDecision[dir == "up" ? index - 1 : index + 1]?.id;
+      if (affected) {
+        this.decision.find((a) => a.id == thisId)!.sort = dir == "up" ? index - 1 : index + 1;
+        this.decision.find((a) => a.id == affected)!.sort = dir == "up" ? index + 1 : index - 1;
+      }
+      this.normalizeSort();
+    },
+    normalizeSort() {
+      let rightSort = this.decision.every((val, index) => val.sort == index);
+      if (!rightSort) {
+        this.sortedDecision.forEach((e, index) => {
+          e.sort = index;
+        });
+      }
+    },
   },
 });
 </script>

src/views/admin/club/protocol/ProtocolVoting.vue

@@ -5,10 +5,10 @@
       ↺ laden fehlgeschlagen
     </p>
 
-    <div class="flex flex-col gap-2 h-full overflow-y-auto">
+    <div class="flex flex-col gap-2 h-full overflow-y-scroll">
       <details
-        v-for="item in voting"
+        v-for="(item, index) in sortedVoting"
-        class="flex flex-col gap-2 rounded-lg w-full justify-between border border-primary overflow-hidden min-h-fit"
+        class="flex flex-col rounded-lg w-full justify-between border border-primary overflow-hidden min-h-fit"
       >
         <summary class="flex flex-row gap-2 bg-primary p-2 w-full justify-between items-center cursor-pointer">
           <svg
@@ -30,6 +30,19 @@
             @keyup.prevent
             :disabled="!can('create', 'club', 'protocol')"
           />
+
+          <div class="flex flex-col">
+            <ChevronUpIcon
+              v-if="index != 0"
+              class="text-white w-4 h-4 stroke-2"
+              @click.prevent="changeSort('up', item.id, index)"
+            />
+            <ChevronDownIcon
+              v-if="index != voting.length - 1"
+              class="text-white w-4 h-4 stroke-2"
+              @click.prevent="changeSort('down', item.id, index)"
+            />
+          </div>
         </summary>
         <QuillEditor
           id="top"
@@ -72,12 +85,12 @@
 import { defineComponent } from "vue";
 import { mapActions, mapState } from "pinia";
 import Spinner from "@/components/Spinner.vue";
-import { useProtocolStore } from "@/stores/admin/club/protocol/protocol";
 import { QuillEditor } from "@vueup/vue-quill";
 import "@vueup/vue-quill/dist/vue-quill.snow.css";
 import { toolbarOptions } from "@/helpers/quillConfig";
 import { useProtocolVotingStore } from "@/stores/admin/club/protocol/protocolVoting";
 import { useAbilityStore } from "@/stores/ability";
+import { ChevronDownIcon, ChevronUpIcon } from "@heroicons/vue/24/outline";
 </script>
 
 <script lang="ts">
@@ -88,12 +101,31 @@ export default defineComponent({
   computed: {
     ...mapState(useProtocolVotingStore, ["voting", "loading"]),
     ...mapState(useAbilityStore, ["can"]),
+    sortedVoting() {
+      return this.voting.slice().sort((a, b) => a.sort - b.sort);
+    },
   },
   mounted() {
-    // this.fetchProtocolVoting();
+    this.normalizeSort();
   },
   methods: {
     ...mapActions(useProtocolVotingStore, ["fetchProtocolVoting", "createProtocolVoting"]),
+    changeSort(dir: "up" | "down", thisId: number, index: number) {
+      let affected = this.sortedVoting[dir == "up" ? index - 1 : index + 1]?.id;
+      if (affected) {
+        this.voting.find((a) => a.id == thisId)!.sort = dir == "up" ? index - 1 : index + 1;
+        this.voting.find((a) => a.id == affected)!.sort = dir == "up" ? index + 1 : index - 1;
+      }
+      this.normalizeSort();
+    },
+    normalizeSort() {
+      let rightSort = this.voting.every((val, index) => val.sort == index);
+      if (!rightSort) {
+        this.sortedVoting.forEach((e, index) => {
+          e.sort = index;
+        });
+      }
+    },
   },
 });
 </script>