From 5eb7528531562c24e1bcc83a1b5434a212e01414 Mon Sep 17 00:00:00 2001
From: Kuchenpirat <jojow@gmx.net>
Date: Wed, 18 Jun 2025 11:21:55 +0000
Subject: [PATCH] fix crud table

---
 frontend/components/global/CrudTable.vue | 39 +++++++++++-------------
 1 file changed, 18 insertions(+), 21 deletions(-)

diff --git a/frontend/components/global/CrudTable.vue b/frontend/components/global/CrudTable.vue
index af5d2b1d4..09832d6cc 100644
--- a/frontend/components/global/CrudTable.vue
+++ b/frontend/components/global/CrudTable.vue
@@ -65,7 +65,7 @@
       class="elevation-2"
     >
       <template
-        v-for="header in activeHeaders"
+        v-for="header in headersWithoutActions"
         #[`item.${header.value}`]="{ item }"
       >
         <slot
@@ -172,28 +172,24 @@ export default defineNuxtComponent({
 
     // ===========================================================
     // Reactive Headers
-    const filteredHeaders = ref<string[]>([]);
-
-    // Set default filtered
-    filteredHeaders.value = (() => {
-      const filtered: string[] = [];
-      props.headers.forEach((element) => {
-        if (element.show) {
-          filtered.push(element.value);
-        }
-      });
-      return filtered;
-    })();
-
-    const activeHeaders = computed(() => {
-      const filtered = props.headers.filter(header => filteredHeaders.value.includes(header.value)).map((h) => {
-        const { text, ...rest } = h;
-        return { ...rest, title: i18n.t(text) };
-      });
-      filtered.push({ title: "", value: "actions", show: true, align: "right" });
-      return filtered;
+    const filteredHeaders = computed<string[]>(() => {
+      return props.headers.filter(header => header.show).map(header => header.value);
     });
 
+    const headersWithoutActions = computed(() =>
+      props.headers
+        .filter(header => filteredHeaders.value.includes(header.value))
+        .map(header => ({
+          ...header,
+          title: i18n.t(header.text),
+        })),
+    );
+
+    const activeHeaders = computed(() => [
+      ...headersWithoutActions.value,
+      { title: "", value: "actions", show: true, align: "end" },
+    ]);
+
     const selected = ref<any[]>([]);
 
     // ===========================================================
@@ -219,6 +215,7 @@ export default defineNuxtComponent({
       sortBy,
       selected,
       filteredHeaders,
+      headersWithoutActions,
       activeHeaders,
       bulkActionListener,
       search,