adminforth 2.4.0-next.130 → 2.4.0-next.132

package/dist/spa/src/afcl/Table.vue

@@ -116,10 +116,56 @@
 </template>
 
 <script setup lang="ts">
-  import { ref, type Ref, computed, useTemplateRef, watch, nextTick } from 'vue';
-  import { asyncComputed } from '@vueuse/core';
+  import { ref, computed, useTemplateRef, watch, shallowRef, toRef } from 'vue';
   import SkeleteLoader from '@/components/SkeleteLoader.vue';
 
+  type Row = Record<string, unknown>
+  type LoadFn = (page: number, pageSize: number) => Promise<{ data: Row[]; total: number }>
+
+  const isFunc = (v: unknown): v is LoadFn => typeof v === 'function'
+
+  function usePagedData(props: {
+    data: Row[] | LoadFn
+    pageSize: number
+    currentPage: number
+  }) {
+    const page = ref(props.currentPage)
+    const pageSize = toRef(props, 'pageSize')
+
+    const isLoading = ref(false)
+    const error = shallowRef<unknown>(null)
+    const result = shallowRef<{ data: Row[]; total: number }>({ data: [], total: 0 })
+
+    let requestId = 0
+
+    async function fetchData() {
+      const id = ++requestId
+      isLoading.value = true
+      error.value = null
+      try {
+        if (isFunc(props.data)) {
+          const res = await props.data(page.value, pageSize.value)
+          if (id !== requestId) return
+          result.value = res
+        } else {
+          const start = (page.value - 1) * pageSize.value
+          const end = start + pageSize.value
+          result.value = { data: props.data.slice(start, end), total: props.data.length }
+        }
+      } catch (e) {
+        if (id !== requestId) return
+        error.value = e
+        result.value = { data: [], total: 0 }
+      } finally {
+        if (id === requestId) isLoading.value = false
+      }
+    }
+
+    watch([page, pageSize, () => props.data], fetchData, { immediate: true })
+
+    return { page, pageSize, isLoading, error, result, refresh: fetchData }
+  }
+
   const props = withDefaults(
     defineProps<{
       columns: {
@@ -137,43 +183,34 @@
     }
   );
 
-  const currentPage = ref(1);
-  const isLoading = ref(false);
+  const { result: dataResult, isLoading, error, page: currentPage, pageSize, refresh } = usePagedData({
+    data: props.data,
+    pageSize: props.pageSize,
+    currentPage: 1
+  });
+
   const pageInput = ref('1');
   const rowRefs = useTemplateRef<HTMLElement[]>('rowRefs');
   const headerRefs = useTemplateRef<HTMLElement[]>('headerRefs');
   const rowHeights = ref<number[]>([]);
   const columnWidths = ref<number[]>([]);
 
-  const dataResult = asyncComputed( async() => {
-    if (typeof props.data === 'function') {
-      isLoading.value = true;
-      const result = await props.data(currentPage.value, props.pageSize);
-      isLoading.value = false;
-      return result;
-    }
-    const start = (currentPage.value - 1) * props.pageSize;
-    const end = start + props.pageSize;
-    return { data: props.data.slice(start, end), total: props.data.length };
-  });
-
   watch(() => currentPage.value, () => {
-    // rows are set to null when new records are loading
     rowHeights.value = !rowRefs.value ? [] : rowRefs.value.map((el: HTMLElement) => el.offsetHeight);
     columnWidths.value = !headerRefs.value ? [] : headerRefs.value.map((el: HTMLElement) => el.offsetWidth);
   });
 
-
   const totalPages = computed(() => {
     return dataResult.value?.total ? Math.ceil(dataResult.value.total / props.pageSize) : 1;
   });
 
-  const dataPage = asyncComputed( async() => {
+  const dataPage = computed(() => {
     return dataResult.value.data;
   });
 
   function switchPage(p: number) {
     currentPage.value = p;
+    pageInput.value = p.toString();
   }
 
   const emites = defineEmits([
@@ -191,6 +228,10 @@
     pageInput.value = validPage.toString();
   }
 
+  watch(() => currentPage.value, (newPage) => {
+    pageInput.value = newPage.toString();
+  });
+
   async function onPageKeydown(event: any) {
     // page input should accept only numbers, arrow keys and backspace
     if (['Enter', 'Space'].includes(event.code) ||

package/dist/spa/src/components/ErrorMessage.vue

@@ -0,0 +1,21 @@
+<template>
+  <div v-if="error" class="af-login-modal-error flex items-center p-4 mb-4 text-sm text-red-800 rounded-lg bg-red-50 dark:bg-gray-800 dark:text-red-400" role="alert">
+    <svg class="flex-shrink-0 inline w-4 h-4 me-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
+      <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"/>
+    </svg>
+    <span class="sr-only">{{ $t('Info') }}</span>
+    <div>
+      {{ error }}
+    </div>
+  </div>
+</template>
+
+<script setup>
+
+defineProps({
+  error: {
+    type: String,
+    default: null
+  }
+});
+</script>

package/dist/spa/src/views/LoginView.vue

@@ -92,15 +92,7 @@
                           :meta="c.meta"
                         />
 
-                        <div v-if="error" class="af-login-modal-error flex items-center p-4 mb-4 text-sm text-red-800 rounded-lg bg-red-50 dark:bg-gray-800 dark:text-red-400" role="alert">
-                          <svg class="flex-shrink-0 inline w-4 h-4 me-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
-                            <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"/>
-                          </svg>
-                          <span class="sr-only">{{ $t('Info') }}</span>
-                          <div>
-                            {{ error }}
-                          </div>
-                        </div>
+                        <ErrorMessage :error="error" />
                         
                         <div v-if="loginPromptHTML"
                           class="flex items-center p-4 mb-4 text-sm text-lightLoginViewPromptText rounded-lg bg-lightLoginViewPromptBackground dark:bg-darkLoginViewPromptBackground dark:text-darkLoginViewPromptText" role="alert"
@@ -136,6 +128,7 @@ import { callAdminForthApi, loadFile } from '@/utils';
 import { useRoute, useRouter } from 'vue-router';
 import { Button, Checkbox, Input } from '@/afcl';
 import { useI18n } from 'vue-i18n';
+import ErrorMessage from '@/components/ErrorMessage.vue';
 
 const { t } = useI18n();
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "adminforth",
-  "version": "2.4.0-next.130",
+  "version": "2.4.0-next.132",
   "description": "OpenSource Vue3 powered forth-generation admin panel",
   "main": "dist/index.js",
   "module": "dist/index.js",