wip

@xen-orchestra/web-core/lib/components/ui/table-pagination/UiTablePagination.vue

@@ -1,5 +1,6 @@
 <!-- v2 -->
 <template>
+  {{ pageSize }}
   <div class="ui-table-pagination">
     <div class="buttons-container">
       <PaginationButton :disabled="isFirstPage || disabled" :icon="faAngleDoubleLeft" @click="goToFirstPage()" />
@@ -33,7 +34,7 @@ import {
   faAngleRight,
 } from '@fortawesome/free-solid-svg-icons'
 import { useOffsetPagination } from '@vueuse/core'
-import { computed, ref, watch } from 'vue'
+import { computed, ref, watchEffect } from 'vue'
 
 export type PaginationPayload = {
   currentPage: number
@@ -49,9 +50,13 @@ const { totalItems, disabled = false } = defineProps<{
 
 const emit = defineEmits<{
   change: [payload: PaginationPayload]
+  'update:modelValue': number
+  'update:per-page': number
+  'update:start-index': number
+  'update:end-index': number
 }>()
 
-const pageSize = ref(50)
+const pageSize = ref(10)
 const pageSizeOptions = [10, 50, 100, 150, 200]
 const {
   currentPage,
@@ -75,10 +80,14 @@ const goToLastPage = () => {
   currentPage.value = pageCount.value
 }
 
-watch([currentPage, currentPageSize], ([newPage, newPageSize]) => {
+watchEffect(() => {
+  emit('update:modelValue', currentPage.value)
+  emit('update:per-page', pageSize.value)
+  emit('update:start-index', startIndex.value)
+  emit('update:end-index', endIndex.value)
   emit('change', {
-    currentPage: newPage,
-    pageSize: newPageSize,
+    currentPage: currentPage.value,
+    pageSize: currentPageSize.value,
     startIndex: startIndex.value,
     endIndex: endIndex.value,
   })

@xen-orchestra/web/src/components/pif/PifTable.vue

@@ -27,7 +27,15 @@
           :total-items="usableIds.length"
           @toggle-select-all="toggleSelect"
         />
-        <UiTablePagination :total-items="usableIds.length" />
+        {{ pagination }}
+        <UiTablePagination
+          v-model="pagination.currentPage"
+          v-model:per-page="pagination.pageSize"
+          v-model:start-index="pagination.startIndex"
+          v-model:end-index="pagination.endIndex"
+          :total-items="usableIds.length"
+        />
+        <!--        <UiTablePagination :total-items="usableIds.length" @change="handle($event)" /> -->
       </div>
     </div>
     <div class="table-container">
@@ -90,7 +98,14 @@
         :total-items="usableIds.length"
         @toggle-select-all="toggleSelect"
       />
-      <UiTablePagination :total-items="usableIds.length" />
+      {{ pagination.pageSize }}
+      <UiTablePagination
+        v-model="pagination.currentPage"
+        v-model:per-page="pagination.pageSize"
+        v-model:start-index="pagination.startIndex"
+        v-model:end-index="pagination.endIndex"
+        :total-items="usableIds.length"
+      />
     </div>
   </div>
 </template>
@@ -111,7 +126,7 @@ import UiCheckbox from '@core/components/ui/checkbox/UiCheckbox.vue'
 import UiComplexIcon from '@core/components/ui/complex-icon/UiComplexIcon.vue'
 import UiQuerySearchBar from '@core/components/ui/query-search-bar/UiQuerySearchBar.vue'
 import UiTableActions from '@core/components/ui/table-actions/UiTableActions.vue'
-import UiTablePagination from '@core/components/ui/table-pagination/UiTablePagination.vue'
+import UiTablePagination, { type PaginationPayload } from '@core/components/ui/table-pagination/UiTablePagination.vue'
 import UiTitle from '@core/components/ui/title/UiTitle.vue'
 import UiTopBottomTable from '@core/components/ui/top-bottom-table/UiTopBottomTable.vue'
 import useMultiSelect from '@core/composables/table/multi-select.composable'
@@ -142,6 +157,12 @@ const emit = defineEmits<{
 }>()
 
 const { get, isReady } = useNetworkStore().subscribe()
+const pagination = ref<PaginationPayload>({
+  currentPage: 0,
+  pageSize: 0,
+  startIndex: 0,
+  endIndex: 0,
+})
 
 const getNetworkName = (pif: XoPif) => {
   const network: XoNetwork = get(pif.$network)!
@@ -154,10 +175,12 @@ const getPifData = (pif: XoPif, type: keyof XoPif) =>
 const searchQuery = ref('')
 
 const filteredPifs = computed(() => {
-  if (!searchQuery.value) return props.pifs
-  return props.pifs.filter(pif =>
+  let filtered = props.pifs
+  if (!searchQuery.value) return props.pifs.slice(pagination.value.startIndex - 1, pagination.value.endIndex)
+  filtered = props.pifs.filter(pif =>
     Object.values(pif).some(value => String(value).toLowerCase().includes(searchQuery.value.toLowerCase()))
   )
+  return filtered.slice(pagination.value.startIndex - 1, pagination.value.endIndex)
 })
 
 const usableIds = computed(() => props.pifs.map(item => item.id))