feat: faq sort + feat: faq-delete + fix: faq create after edit bug

apps/api/prisma/migrations/20260311172026_faq_sort_order/migration.sql

@@ -0,0 +1,5 @@
+-- AlterTable
+ALTER TABLE "faq_categories" ADD COLUMN     "sortOrder" INTEGER NOT NULL DEFAULT 0;
+
+-- AlterTable
+ALTER TABLE "faqs" ADD COLUMN     "sortOrder" INTEGER NOT NULL DEFAULT 0;

apps/api/prisma/schema/Faq.prisma

@@ -1,6 +1,7 @@
 model FaqCategory {
-  id   String @id @default(uuid(7))
-  name String
+  id        String @id @default(uuid(7))
+  name      String
+  sortOrder Int    @default(0)
 
   unterveranstaltungId String
   unterveranstaltung   Unterveranstaltung @relation(fields: [unterveranstaltungId], references: [id])
@@ -11,9 +12,10 @@ model FaqCategory {
 }
 
 model Faq {
-  id       String @id @default(uuid(7))
-  question String
-  answer   String
+  id        String @id @default(uuid(7))
+  question  String
+  answer    String
+  sortOrder Int    @default(0)
 
   categoryId String
   category   FaqCategory @relation(fields: [categoryId], references: [id])

apps/api/src/services/faqs/faqCreateProcedure.ts

@@ -12,10 +12,22 @@ export const faqCreateProcedure = defineProtectedMutateProcedure({
     faq: faqSchema,
   }),
   handler: async ({ input: { faq, unterveranstaltungId } }) => {
+    const [maxCategoryOrder, maxFaqOrder] = await Promise.all([
+      prisma.faqCategory.aggregate({
+        where: { unterveranstaltungId },
+        _max: { sortOrder: true },
+      }),
+      prisma.faq.aggregate({
+        where: { category: { unterveranstaltungId } },
+        _max: { sortOrder: true },
+      }),
+    ])
+
     await prisma.faq.create({
       data: {
         question: faq.question,
         answer: faq.answer,
+        sortOrder: (maxFaqOrder._max.sortOrder ?? -1) + 1,
         unterveranstaltung: {
           connect: {
             id: unterveranstaltungId,
@@ -26,6 +38,7 @@ export const faqCreateProcedure = defineProtectedMutateProcedure({
             create: {
               name: faq.category,
               unterveranstaltungId,
+              sortOrder: (maxCategoryOrder._max.sortOrder ?? -1) + 1,
             },
             where: {
               name_unterveranstaltungId: {

apps/api/src/services/faqs/faqListProcedure.ts

@@ -13,24 +13,37 @@ export async function listFaqs(unterveranstaltungId: string) {
         },
       },
     },
+    orderBy: {
+      sortOrder: 'asc',
+    },
     select: {
       id: true,
       question: true,
       answer: true,
+      sortOrder: true,
       category: {
         select: {
+          id: true,
           name: true,
+          sortOrder: true,
         },
       },
     },
   })
 
   const groups = groupBy(
-    list.map((v) => ({ ...v, category: v.category.name })),
+    list.map((v) => ({
+      ...v,
+      category: v.category.name,
+      categoryId: v.category.id,
+      categorySortOrder: v.category.sortOrder,
+    })),
     ({ category }) => category
   )
 
-  return Object.fromEntries(Object.entries(groups).sort(([a], [b]) => a.localeCompare(b)))
+  return Object.fromEntries(
+    Object.entries(groups).sort(([, a], [, b]) => (a[0]?.categorySortOrder ?? 0) - (b[0]?.categorySortOrder ?? 0))
+  )
 }
 
 export const faqListProcedure = defineProtectedQueryProcedure({

apps/api/src/services/faqs/faqReorderProcedure.ts

@@ -0,0 +1,40 @@
+import z from 'zod'
+
+import prisma from '../../prisma.js'
+import { defineProtectedMutateProcedure } from '../../types/defineProcedure.js'
+
+export const faqReorderProcedure = defineProtectedMutateProcedure({
+  key: 'reorder',
+  roleIds: ['ADMIN', 'GLIEDERUNG_ADMIN'],
+  inputSchema: z.strictObject({
+    faqOrder: z.array(
+      z.strictObject({
+        id: z.string().uuid(),
+        sortOrder: z.number().int().min(0),
+        categoryId: z.string().uuid(),
+      })
+    ),
+    categoryOrder: z.array(
+      z.strictObject({
+        id: z.string().uuid(),
+        sortOrder: z.number().int().min(0),
+      })
+    ),
+  }),
+  handler: async ({ input: { faqOrder, categoryOrder } }) => {
+    await prisma.$transaction([
+      ...faqOrder.map(({ id, sortOrder, categoryId }) =>
+        prisma.faq.update({
+          where: { id },
+          data: { sortOrder, categoryId },
+        })
+      ),
+      ...categoryOrder.map(({ id, sortOrder }) =>
+        prisma.faqCategory.update({
+          where: { id },
+          data: { sortOrder },
+        })
+      ),
+    ])
+  },
+})

apps/api/src/services/faqs/faqs.router.ts

@@ -4,6 +4,7 @@ import { faqCreateProcedure } from './faqCreateProcedure.js'
 import { faqDeleteProcedure } from './faqDeleteProcecure.js'
 import { faqCategorySearchProcedure, faqListProcedure } from './faqListProcedure.js'
 import { faqUpdateProcedure } from './faqUpdateProcedure.js'
+import { faqReorderProcedure } from './faqReorderProcedure.js'
 
 // Import Routes here - do not delete this line
 
@@ -12,6 +13,7 @@ export const faqsRouter = mergeRouters(
   faqCategorySearchProcedure,
   faqCreateProcedure,
   faqUpdateProcedure,
-  faqDeleteProcedure
+  faqDeleteProcedure,
+  faqReorderProcedure
   // Add Routes here - do not delete this line
 )

apps/frontend/package.json

@@ -51,7 +51,8 @@
     "vaul-vue": "^0.4.1",
     "vue": "catalog:",
     "vue-router": "^4.2.5",
-    "vue-sonner": "^1.3.0"
+    "vue-sonner": "^1.3.0",
+    "vuedraggable": "^4.1.0"
   },
   "devDependencies": {
     "@codeanker/eslint-config": "workspace:*",

apps/frontend/src/views/FAQs/FAQFormModal.vue

@@ -79,6 +79,13 @@ async function onSubmit() {
   emit('success')
 }
 
+async function onDelete() {
+  if (!props.faq) return
+  await apiClient.faq.delete.mutate(props.faq.id)
+  modal.value?.hide()
+  emit('success')
+}
+
 defineExpose<ModalApi>({
   show() {
     modal.value?.show()
@@ -127,7 +134,16 @@ defineExpose<ModalApi>({
               />
             </div>
 
-            <div class="flex justify-end col-span-2 mt-8">
+            <div class="flex justify-between col-span-2 mt-8">
+              <Button
+                v-if="isEdit"
+                type="button"
+                color="danger"
+                @click="onDelete"
+              >
+                Entfernen
+              </Button>
+              <span v-else />
               <Button type="submit"> Speichern </Button>
             </div>
           </ValidateForm>

apps/frontend/src/views/FAQs/FAQList.vue

@@ -1,29 +1,62 @@
 <script setup lang="ts">
 import { apiClient } from '@/api'
 import Loading from '@/components/UIComponents/Loading.vue'
+import { Bars3Icon } from '@heroicons/vue/24/outline'
 import { useAsyncState } from '@vueuse/core'
-import { computed, ref, useTemplateRef } from 'vue'
+import { computed, ref, useTemplateRef, watch } from 'vue'
+import draggable from 'vuedraggable'
 import FAQFormModal, { type FAQ } from './FAQFormModal.vue'
+import { toast } from 'vue-sonner'
 
 type Props = {
   unterveranstaltungId: string
 }
 
 const { unterveranstaltungId } = defineProps<Props>()
 
-const { state, isLoading, execute } = useAsyncState(() => apiClient.faq.list.query({ unterveranstaltungId }), {})
-const hasKeys = computed(() => Object.keys(state.value).length > 0)
+const { state, isLoading, execute } = useAsyncState(
+  async () => apiClient.faq.list.query({ unterveranstaltungId }),
+  {},
+  { resetOnExecute: false }
+)
+
+type Category = {
+  name: string
+  categoryId: string
+  faqs: FAQ[]
+}
+const categories = ref<Category[]>([])
+watch(state, () => {
+  categories.value = Object.entries(state.value).map(([name, faqs]) => ({
+    name,
+    categoryId: faqs[0]?.categoryId ?? '',
+    faqs: [...faqs],
+  }))
+})
+
+const hasKeys = computed(() => categories.value.length > 0)
 
 const formModal = useTemplateRef('formModal')
 const editFaq = ref<FAQ>()
 
 function openFormModal(faq?: FAQ) {
-  if (faq !== undefined) {
-    editFaq.value = faq
-  }
+  editFaq.value = faq
   formModal.value?.show()
 }
 
+async function saveOrder() {
+  const faqOrder = categories.value.flatMap((cat) =>
+    cat.faqs.map((faq, index) => ({ id: faq.id, sortOrder: index, categoryId: cat.categoryId }))
+  )
+  const categoryOrder = categories.value.map((cat, index) => ({
+    id: cat.categoryId,
+    sortOrder: index,
+  }))
+  await apiClient.faq.reorder.mutate({ faqOrder, categoryOrder })
+  await execute()
+  toast.success('FAQ-Reihenfolge gespeichert')
+}
+
 defineExpose({
   openFormModal,
 })
@@ -37,27 +70,50 @@ defineExpose({
     @success="execute"
   />
 
-  <Loading v-if="isLoading" />
+  <Loading v-if="isLoading && !hasKeys" />
   <p v-else-if="!hasKeys">Hier wurden noch keine FAQs angelegt.</p>
 
-  <div
-    v-for="(list, category) in state"
+  <draggable
     v-else
-    :key="category"
-    class="space-y-4"
+    v-model="categories"
+    item-key="categoryId"
+    handle=".category-handle"
+    class="grid grid-cols-3 gap-8 items-start"
+    @end="saveOrder"
   >
-    <p class="text-gray-500 font-normal">{{ category }}</p>
-    <div
-      v-for="(faq, index) in list"
-      :key="index"
-      class="transition-all rounded-lg shadow hover:shadow-lg bg-primary-5 dark:bg-primary-950 p-2 select-none cursor-pointer"
-      @click="() => openFormModal(faq)"
-    >
-      <span class="font-bold">{{ faq.question }}</span>
-      <br />
-      <!-- eslint-disable vue/no-v-html -->
-      <div v-html="faq.answer" />
-      <!-- eslint-enable vue/no-v-html -->
-    </div>
-  </div>
+    <template #item="{ element: category }">
+      <div class="space-y-4 mb-6">
+        <div class="flex items-center gap-2">
+          <Bars3Icon class="category-handle w-5 h-5 text-gray-400 cursor-grab active:cursor-grabbing" />
+          <p class="text-gray-500 font-normal">{{ category.name }}</p>
+        </div>
+        <draggable
+          v-model="category.faqs"
+          item-key="id"
+          handle=".faq-handle"
+          group="faqs"
+          class="space-y-4"
+          @end="saveOrder"
+        >
+          <template #item="{ element: faq }">
+            <div
+              class="transition-all rounded-lg shadow hover:shadow-lg bg-primary-5 dark:bg-primary-950 p-2 select-none flex items-start gap-2"
+            >
+              <Bars3Icon class="faq-handle w-5 h-5 mt-0.5 text-gray-400 cursor-grab active:cursor-grabbing shrink-0" />
+              <div
+                class="cursor-pointer flex-1"
+                @click="() => openFormModal(faq)"
+              >
+                <span class="font-bold">{{ faq.question }}</span>
+                <br />
+                <!-- eslint-disable vue/no-v-html -->
+                <div v-html="faq.answer" />
+                <!-- eslint-enable vue/no-v-html -->
+              </div>
+            </div>
+          </template>
+        </draggable>
+      </div>
+    </template>
+  </draggable>
 </template>

apps/frontend/src/views/Unterveranstaltung/UnterveranstaltungDetail.vue

@@ -374,16 +374,16 @@ const anmeldeLinkCreateModal = useTemplateRef('anmeldeLinkCreateModal')
             </p>
           </div>
           <div class="flex items-center gap-x-4">
-          <RouterLink
+            <RouterLink
               class="text-primary-600 flex items-center gap-x-1"
-            :to="{
-              name: 'Unterveranstaltung Custom Field erstellen',
-              params: { veranstaltungId: route.params.veranstaltungId },
-            }"
-          >
+              :to="{
+                name: 'Unterveranstaltung Custom Field erstellen',
+                params: { veranstaltungId: route.params.veranstaltungId },
+              }"
+            >
               <PlusIcon class="size-4" />
               <span>Neues Feld</span>
-          </RouterLink>
+            </RouterLink>
             <RouterLink
               class="text-primary-600 flex items-center gap-x-1"
               :to="{
@@ -416,13 +416,11 @@ const anmeldeLinkCreateModal = useTemplateRef('anmeldeLinkCreateModal')
           <div class="flex-1"></div>
           <Button @click="() => faqList?.openFormModal()"> Frage anlegen </Button>
         </div>
-        <div class="grid grid-cols-3 gap-8">
-          <FAQList
-            v-if="unterveranstaltung"
-            ref="faqList"
-            :unterveranstaltung-id="unterveranstaltung.id"
-          />
-        </div>
+        <FAQList
+          v-if="unterveranstaltung"
+          ref="faqList"
+          :unterveranstaltung-id="unterveranstaltung.id"
+        />
         <hr class="my-10" />
       </Tab>