New Backend changes

components/EntityTable.vue

@@ -26,7 +26,6 @@
       }
     }
   })
-
   const props = defineProps({
     rows: {
       type: Array,
@@ -40,9 +39,16 @@
     type: {
       type: String,
       required: true,
+    },
+    loading: {
+      type: Boolean,
+      required: true,
+      default: false
     }
   })
 
+  const emit = defineEmits(["sort"]);
+
   const dataStore = useDataStore()
 
   const router = useRouter()
@@ -50,12 +56,20 @@
   const dataType = dataStore.dataTypes[props.type]
 
   const selectedItem = ref(0)
-
+  const sort = ref({
+    column: dataType.supabaseSortColumn || "date",
+    direction: 'desc'
+  })
 
 </script>
 
 <template>
   <UTable
+      :loading="props.loading"
+      :loading-state="{ icon: 'i-heroicons-arrow-path-20-solid', label: 'Loading...' }"
+      sort-mode="manual"
+      v-model:sort="sort"
+      @update:sort="emit('sort',{sort_column: sort.column, sort_direction: sort.direction})"
       v-if="dataType && columns"
       :rows="props.rows"
       :columns="props.columns"
@@ -64,11 +78,11 @@
       @select="(i) => router.push(`/standardEntity/${type}/show/${i.id}`) "
       :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: `Keine ${dataType.label} anzuzeigen` }"
   >
-    <template
+<!--    <template
         v-for="column in dataType.templateColumns.filter(i => !i.disabledInTable)"
         v-slot:[`${column.key}-header`]="{row}">
       <span class="text-nowrap">{{column.label}}</span>
-    </template>
+    </template>-->
     <template #name-data="{row}">
       <span
           v-if="row.id === props.rows[selectedItem].id"