Merge branch 'next' of github.com:devforth/adminforth into next

SerVitasik · SerVitasik · commit 5c0d29134e73 · 2025-09-17T17:43:59.000+03:00
diff --git a/adminforth/documentation/docs/tutorial/03-Customization/15-afcl.md b/adminforth/documentation/docs/tutorial/03-Customization/15-afcl.md
@@ -797,7 +797,7 @@ const isoFlagToEmoji = (iso) => iso.toUpperCase().replace(/./g, char => String.f
 
 
 
-## Pagination
+### Pagination
 
 Table provides front-end side pagination. You can set `pageSize` (default is 10) to set how many rows to show per page.
 If there is less then `pageSize` rows, pagination will not be shown.
@@ -829,6 +829,36 @@ If there is less then `pageSize` rows, pagination will not be shown.
   </div>
 </div>
 
+### Server-side pagination
+
+To load pages dynamically, simply pass async callback to data:
+
+```ts
+async function loadPageData(offset, limit) {  
+    // in real app do await callAdminForthApi or await fetch to get date, use offset and limit value to slice data
+  return {
+    data: [
+      { name: 'John', age: offset, country: 'US' },
+      { name: 'Rick', age: offset+1, country: 'CA' },
+      { name: 'Alice', age: offset+2, country: 'BR' },
+    ],
+    total: 3 // should return total amount of records in database
+  }
+}
+
+<Table
+  :columns="[
+    { label: 'Name', fieldName: 'name' },
+    { label: 'Age', fieldName: 'age' },
+    { label: 'Country', fieldName: 'country' },
+  ]"
+//diff-remove
+  :data="[...] 
+//diff-add
+  :data="loadPageData"
+
+  :pageSize="3"
+```
 
 ## ProgressBar
 
diff --git a/adminforth/modules/styles.ts b/adminforth/modules/styles.ts
@@ -251,6 +251,9 @@ export const styles = () => ({
     lightTableOddBackground: "#FFFFFF",
     lightTablePaginationText: "#6B7280",
     lightTablePaginationNumeration: "#111827",
+    lightTablePaginationInputBackground: "#FFFFFF",
+    lightTablePaginationInputBorder: "#D1D5DB",
+    lightTablePaginationInputText: "#111827",
     lightUnactivePaginationButtonBackground: "#FFFFFF",
     lightUnactivePaginationButtonText: "#6B7280",
     lightUnactivePaginationButtonBorder: "#D1D5DB",
@@ -580,6 +583,9 @@ export const styles = () => ({
     darkTableOddBackground: "#111827",
     darkTablePaginationText: "#9CA3AF",
     darkTablePaginationNumeration: "#FFFFFF",
+    darkTablePaginationInputBackground: "#1f2937",
+    darkTablePaginationInputBorder: "#374151",
+    darkTablePaginationInputText: "#FFFFFF",
     darkUnactivePaginationButtonBackground: "#1F2937",
     darkUnactivePaginationButtonText: "#9CA3AF",
     darkUnactivePaginationButtonBorder: "#374151",
diff --git a/adminforth/spa/src/afcl/Table.vue b/adminforth/spa/src/afcl/Table.vue
@@ -4,7 +4,7 @@
   <table class="afcl-table w-full text-sm text-left rtl:text-right text-lightTableText dark:text-darkTableText">
       <thead class="afcl-table-thread text-xs text-lightTableHeadingText uppercase bg-lightTableHeadingBackground dark:bg-darkTableHeadingBackground dark:text-darkTableHeadingText">
         <tr>
-          <th scope="col" class="px-6 py-3"
+          <th scope="col" class="px-6 py-3" ref="headerRefs"
             v-for="column in columns"
           >
             <slot v-if="$slots[`header:${column.fieldName}`]" :name="`header:${column.fieldName}`" :column="column" />
@@ -16,8 +16,17 @@
         </tr>
       </thead>
       <tbody>
+        <SkeleteLoader 
+          v-if="isLoading" 
+          :rows="pageSize" 
+          :columns="columns.length" 
+          :row-heights="rowHeights"
+          :column-widths="columnWidths"
+        />
         <tr
+          v-else="!isLoading"
           v-for="(item, index) in dataPage"
+          ref="rowRefs"
           :class="{
             'afcl-table-body odd:bg-lightTableOddBackground odd:dark:bg-darkTableOddBackground even:bg-lightTableEvenBackground even:dark:bg-darkTableEvenBackground': evenHighlights,
             'border-b border-lightTableBorder dark:border-darkTableBorder': index !== dataPage.length - 1 || totalPages > 1,
@@ -31,40 +40,74 @@
               :item="item" :column="column"
             >
             </slot>
-            <span v-else>
+            <span v-else-if="!isLoading" >
               {{ item[column.fieldName] }}
             </span>
+            <div v-else>
+              <div class=" w-full">
+                <Skeleton class="h-4" />
+              </div>
+            </div>
           </td>
         </tr>
       </tbody>
   </table>
-  <nav class="afcl-table-pagination-container bg-lightTableBackground dark:bg-darkTableBackground flex items-center flex-column flex-wrap md:flex-row justify-between p-4" 
+  <nav class="afcl-table-pagination-container bg-lightTableBackground dark:bg-darkTableBackground mt-2 flex flex-col gap-2 items-center sm:flex-row justify-center sm:justify-between px-4 pb-4" 
     v-if="totalPages > 1"
     :aria-label="$t('Table navigation')">
-    <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>
-    </i18n-t>
-
-    <ul class="afcl-table-pagination-list inline-flex -space-x-px rtl:space-x-reverse text-sm h-8">
-      <li v-for="page in totalPages" :key="page">
-        <a href="#" 
-          @click.prevent="switchPage(page)"
-          :aria-current="page === page ? 'page' : undefined"
-          :class='{
-            "afcl-table-pagination-button text-blue-600 bg-lightActivePaginationButtonBackground text-lightActivePaginationButtonText dark:bg-darkActivePaginationButtonBackground dark:text-darkActivePaginationButtonText hover:opacity-90": page === currentPage,
-            "text-lightUnactivePaginationButtonText border bg-lightUnactivePaginationButtonBackground border-lightUnactivePaginationButtonBorder hover:bg-lightUnactivePaginationButtonHoverBackground hover:text-lightUnactivePaginationButtonHoverText dark:bg-darkUnactivePaginationButtonBackground dark:border-darkUnactivePaginationButtonBorder dark:text-darkUnactivePaginationButtonText dark:hover:bg-darkUnactivePaginationButtonHoverBackground dark:hover:text-darkUnactivePaginationButtonHoverText": page !== currentPage,
-            "rounded-s-lg ms-0": page === 1,
-            "rounded-e-lg": page === totalPages,
-          }'
-          class="flex items-center justify-center px-3 h-8 leading-tight ">
-          {{ page }}
-        </a>
-      </li>
-    </ul>
+  <i18n-t 
+    keypath="Showing {from} to {to} of {total}" tag="span" class="afcl-table-pagination-text text-sm font-normal text-center text-lightTablePaginationText dark:text-darkTablePaginationText sm: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, 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>
+  <div class="af-pagination-container flex flex-row items-center xs:flex-row xs:justify-between xs:items-center gap-3">
+    <div class="inline-flex">
+        <!-- Buttons -->
+        <button
+          class="flex items-center py-1 px-3 gap-1 text-sm font-medium text-lightActivePaginationButtonText bg-lightActivePaginationButtonBackground border-r-0 rounded-s hover:opacity-90 dark:bg-darkActivePaginationButtonBackground dark:text-darkActivePaginationButtonText disabled:opacity-50"
+          @click="currentPage--; pageInput = currentPage.toString();" :disabled="currentPage <= 1">
+          <svg class="w-3.5 h-3.5 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
+              viewBox="0 0 14 10">
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                  d="M13 5H1m0 0 4 4M1 5l4-4"/>
+          </svg>
+        </button>
+        <button
+          class="flex items-center py-1 px-3 text-sm font-medium text-lightUnactivePaginationButtonText focus:outline-none bg-lightUnactivePaginationButtonBackground border-r-0  border border-lightUnactivePaginationButtonBorder hover:bg-lightUnactivePaginationButtonHoverBackground hover:text-lightUnactivePaginationButtonHoverText dark:bg-darkUnactivePaginationButtonBackground dark:text-darkUnactivePaginationButtonText dark:border-darkUnactivePaginationButtonBorder dark:hover:text-darkUnactivePaginationButtonHoverText dark:hover:bg-darkUnactivePaginationButtonHoverBackground disabled:opacity-50"
+          @click="switchPage(1); pageInput = currentPage.toString();" :disabled="currentPage <= 1">
+          <!-- <IconChevronDoubleLeftOutline class="w-4 h-4" /> -->
+          1
+        </button>
+        <div
+          contenteditable="true" 
+          class="min-w-10 outline-none inline-block w-auto py-1.5 px-3 text-sm text-center text-lightTablePaginationInputText border border-lightTablePaginationInputBorder bg-lightTablePaginationInputBackground dark:border-darkTablePaginationInputBorder dark:text-darkTablePaginationInputText dark:bg-darkTablePaginationInputBackground z-10"
+          @keydown="onPageKeydown($event)"
+          @input="onPageInput($event)"
+          @blur="validatePageInput()"
+        >
+          {{ pageInput }}
+        </div>
+
+        <button
+          class="flex items-center py-1 px-3 text-sm font-medium text-lightUnactivePaginationButtonText focus:outline-none bg-lightUnactivePaginationButtonBackground border-l-0  border border-lightUnactivePaginationButtonBorder hover:bg-lightUnactivePaginationButtonHoverBackground hover:text-lightUnactivePaginationButtonHoverText dark:bg-darkUnactivePaginationButtonBackground dark:text-darkUnactivePaginationButtonText dark:border-darkUnactivePaginationButtonBorder dark:hover:text-darkUnactivePaginationButtonHoverText dark:hover:bg-darkUnactivePaginationButtonHoverBackground disabled:opacity-50"
+          @click="currentPage = totalPages; pageInput = currentPage.toString();" :disabled="currentPage >= totalPages">
+          {{ totalPages }}
+
+          <!-- <IconChevronDoubleRightOutline class="w-4 h-4" /> -->
+        </button>
+        <button
+          class="flex items-center py-1 px-3 gap-1 text-sm font-medium text-lightActivePaginationButtonText focus:outline-none bg-lightActivePaginationButtonBackground border-l-0 rounded-e hover:opacity-90 dark:bg-darkActivePaginationButtonBackground dark:text-darkActivePaginationButtonText disabled:opacity-50"
+          @click="currentPage++; pageInput = currentPage.toString();" :disabled="currentPage >= totalPages">
+          <svg class="w-3.5 h-3.5 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
+              viewBox="0 0 14 10">
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                  d="M1 5h12m0 0L9 1m4 4L9 9"/>
+          </svg>
+        </button>
+      </div>
+    </div>
   </nav>
 </div>
 
@@ -73,7 +116,9 @@
 </template>
 
 <script setup lang="ts">
-  import { ref, type Ref, computed } from 'vue';
+  import { ref, type Ref, computed, useTemplateRef, watch, nextTick } from 'vue';
+  import { asyncComputed } from '@vueuse/core';
+  import SkeleteLoader from '@/components/SkeleteLoader.vue';
 
   const props = withDefaults(
     defineProps<{
@@ -83,7 +128,7 @@
       }[],
       data: {
         [key: string]: any,
-      }[],
+      }[] | ((offset: number, limit: number) => Promise<{data: {[key: string]: any}[], total: number}>),
       evenHighlights?: boolean,
       pageSize?: number,
     }>(), {
@@ -93,15 +138,38 @@
   );
 
   const currentPage = ref(1);
+  const isLoading = ref(false);
+  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 Math.ceil(props.data.length / props.pageSize);
+    return dataResult.value?.total ? Math.ceil(dataResult.value.total / props.pageSize) : 1;
   });
 
-  const dataPage = computed(() => {
-    const start = (currentPage.value - 1) * props.pageSize;
-    const end = start + props.pageSize;
-    return props.data.slice(start, end);
+  const dataPage = asyncComputed( async() => {
+    return dataResult.value.data;
   });
 
   function switchPage(p: number) {
@@ -112,5 +180,28 @@
     'update:activeTab',
   ]);
   
+  function onPageInput(event: any) {
+    pageInput.value = event.target.innerText;
+  }
+
+  function validatePageInput() {
+    const newPage = parseInt(pageInput.value) || 1;
+    const validPage = Math.max(1, Math.min(newPage, totalPages.value));
+    currentPage.value = validPage;
+    pageInput.value = validPage.toString();
+  }
+
+  async function onPageKeydown(event: any) {
+    // page input should accept only numbers, arrow keys and backspace
+    if (['Enter', 'Space'].includes(event.code) ||
+      (!['Backspace', 'ArrowRight', 'ArrowLeft'].includes(event.code)
+      && isNaN(Number(String.fromCharCode(event.keyCode || 0))))) {
+      event.preventDefault();
+      if (event.code === 'Enter') {
+        validatePageInput();
+        event.target.blur();
+      }
+    }
+  }
 
 </script>
diff --git a/adminforth/spa/src/components/ThreeDotsMenu.vue b/adminforth/spa/src/components/ThreeDotsMenu.vue
@@ -21,8 +21,9 @@
                 'pointer-events-none': checkboxes && checkboxes.length === 0 && item.meta?.disabledWhenNoCheckboxes,
                 'opacity-50': checkboxes && checkboxes.length === 0 && item.meta?.disabledWhenNoCheckboxes,
                 'cursor-not-allowed': checkboxes && checkboxes.length === 0 && item.meta?.disabledWhenNoCheckboxes,
-              }">
-              <component :is="getCustomComponent(item)" 
+              }"
+              @click="injectedComponentClick(i)">
+              <component :ref="(el: any) => setComponentRef(el, i)" :is="getCustomComponent(item)" 
                 :meta="item.meta" 
                 :resource="coreStore.resource" 
                 :adminUser="coreStore.adminUser"
@@ -75,10 +76,12 @@ import adminforth from '@/adminforth';
 import { callAdminForthApi } from '@/utils';
 import { useRoute, useRouter } from 'vue-router';
 import type { AdminForthComponentDeclarationFull, AdminForthBulkActionCommon, AdminForthActionInput } from '@/types/Common.js';
+import { ref, type ComponentPublicInstance } from 'vue';
 
 const route = useRoute();
 const coreStore = useCoreStore();
 const router = useRouter();
+const threeDotsDropdownItemsRefs = ref<Array<ComponentPublicInstance | null>>([]);
 
 const props = defineProps({
   threeDotsDropdownItems: Array<AdminForthComponentDeclarationFull>,
@@ -95,6 +98,12 @@ const props = defineProps({
 
 const emit = defineEmits(['startBulkAction']);
 
+function setComponentRef(el: ComponentPublicInstance | null, index: number) {
+  if (el) {
+    threeDotsDropdownItemsRefs.value[index] = el;
+  }
+}
+
 async function handleActionClick(action: AdminForthActionInput) {
   adminforth.list.closeThreeDotsDropdown();
   
@@ -151,4 +160,11 @@ function startBulkAction(actionId: string) {
   adminforth.list.closeThreeDotsDropdown();
   emit('startBulkAction', actionId);
 }
+
+async function injectedComponentClick(index: number) {
+  const componentRef = threeDotsDropdownItemsRefs.value[index];
+  if (componentRef && 'click' in componentRef) {
+    (componentRef as any).click?.();
+  }
+}
 </script>
diff --git a/adminforth/spa/vite.config.ts b/adminforth/spa/vite.config.ts
@@ -69,7 +69,7 @@ export default defineConfig({
     },
   },
   plugins: [
-    ignoreTailwindErrors(),
+    //ignoreTailwindErrors(),
     vue(),
   ],
   resolve: {
diff --git a/adminforth/types/Back.ts b/adminforth/types/Back.ts
@@ -1164,6 +1164,9 @@ export class Filters {
   static LIKE(field: string, value: any): IAdminForthSingleFilter {
     return { field, operator: AdminForthFilterOperators.LIKE, value };
   }
+  static ILIKE(field: string, value: any): IAdminForthSingleFilter {
+    return { field, operator: AdminForthFilterOperators.ILIKE, value };
+  }
   static AND(
     ...args: (IAdminForthSingleFilter | IAdminForthAndOrFilter | Array<IAdminForthSingleFilter | IAdminForthAndOrFilter>)[]
   ): IAdminForthAndOrFilter {
