fix: page numeration and improve stability in afcl table with back-end pagination

Author: yaroslav8765

adminforth/spa/src/afcl/Table.vue

@@ -44,9 +44,9 @@
     <i18n-t 
       keypath="Showing {from} to {to} of {total}" tag="span" class="afcl-table-pagination-text text-sm font-normal text-lightTablePaginationText dark:text-darkTablePaginationText mb-4 md:mb-0 block w-full md:inline md:w-auto"
     >
-      <template #from><span class="font-semibold text-lightTablePaginationNumeration dark:text-darkTablePaginationNumeration">{{ Math.min((currentPage - 1) * props.pageSize + 1, props.data.length) }}</span></template>
-      <template #to><span class="font-semibold text-lightTablePaginationNumeration dark:text-darkTablePaginationNumeration">{{ Math.min(currentPage * props.pageSize, props.data.length) }}</span></template>
-      <template #total><span class="font-semibold text-lightTablePaginationNumeration dark:text-darkTablePaginationNumeration">{{ props.data.length }}</span></template>
+      <template #from><span class="font-semibold text-lightTablePaginationNumeration dark:text-darkTablePaginationNumeration">{{ Math.min((currentPage - 1) * props.pageSize + 1, dataResult.total) }}</span></template>
+      <template #to><span class="font-semibold text-lightTablePaginationNumeration dark:text-darkTablePaginationNumeration">{{ Math.min(currentPage * props.pageSize, dataResult.total) }}</span></template>
+      <template #total><span class="font-semibold text-lightTablePaginationNumeration dark:text-darkTablePaginationNumeration">{{ dataResult.total }}</span></template>
     </i18n-t>
 
     <ul class="afcl-table-pagination-list inline-flex -space-x-px rtl:space-x-reverse text-sm h-8">
@@ -95,24 +95,22 @@
   );
 
   const currentPage = ref(1);
-  const recievedTotalPages = ref(1);
 
-  const totalPages = computed(() => {
+  const dataResult = asyncComputed( async() => {
     if (typeof props.data === 'function') {
-      return Math.ceil(recievedTotalPages.value / props.pageSize);
-    };
-    return Math.ceil(props.data.length / props.pageSize);
+      return await props.data(currentPage.value, props.pageSize);
+    }
+    const start = (currentPage.value - 1) * props.pageSize;
+    const end = start + props.pageSize;
+    return { data: props.data.slice(start, end), total: props.data.length };
+  });
+
+  const totalPages = computed(() => {
+    return dataResult.value?.total ? Math.ceil(dataResult.value.total / props.pageSize) : 1;
   });
 
   const dataPage = asyncComputed( async() => {
-    const start = (currentPage.value - 1) * props.pageSize;
-    const end = start + props.pageSize;
-    if (typeof props.data === 'function') {
-      const res = await props.data(currentPage.value, props.pageSize);
-      recievedTotalPages.value = res.total;
-      return res.data;
-    }
-    return props.data.slice(start, end);
+    return dataResult.value.data;
   });
 
   function switchPage(p: number) {