feat(web-core): add reactivity to pagination

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

@@ -44,36 +44,39 @@ export type PaginationPayload = {
 const {
   totalItems,
   disabled = false,
+  currPage,
   perPage,
   startIndex,
   endIndex,
 } = defineProps<{
   totalItems: number
   disabled?: boolean
-  modelValue: number
+  currPage: number
   perPage: number
   startIndex: number
   endIndex: number
 }>()
 
 const emit = defineEmits<{
   change: [payload: PaginationPayload]
-  'update:modelValue': [value: number]
+  'update:currPage': [value: number]
   'update:per-page': [value: number]
   'update:start-index': [value: number]
   'update:end-index': [value: number]
 }>()
 
 const localPageSize = ref(perPage)
+const localCurrentPage = ref(currPage)
 const pageSizeOptions = [10, 50, 100, 150, 200]
 
-watch(
-  () => perPage,
-  newPerPage => {
+watch([() => perPage, () => currPage], ([newPerPage, newCurrPage], [oldPerPage, oldCurrPage]) => {
+  if (newPerPage !== oldPerPage) {
     localPageSize.value = newPerPage
   }
-)
-
+  if (newCurrPage !== oldCurrPage) {
+    localCurrentPage.value = newCurrPage
+  }
+})
 const {
   currentPage,
   currentPageSize,
@@ -85,6 +88,7 @@ const {
 } = useOffsetPagination({
   total: () => totalItems,
   pageSize: localPageSize,
+  page: localCurrentPage,
 })
 const localStartIndex = computed(() => (currentPage.value - 1) * currentPageSize.value + 1)
 const localEndIndex = computed(() => Math.min(currentPage.value * currentPageSize.value, totalItems))
@@ -97,7 +101,7 @@ const goToLastPage = () => {
 }
 
 watchEffect(() => {
-  emit('update:modelValue', currentPage.value)
+  emit('update:currPage', localCurrentPage.value)
   emit('update:per-page', localPageSize.value)
   emit('update:start-index', localStartIndex.value)
   emit('update:end-index', localEndIndex.value)

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

@@ -28,7 +28,7 @@
           @toggle-select-all="toggleSelect"
         />
         <UiTablePagination
-          v-model="pagination.currentPage"
+          v-model:curr-page="pagination.currentPage"
           v-model:per-page="pagination.pageSize"
           v-model:start-index="pagination.startIndex"
           v-model:end-index="pagination.endIndex"
@@ -97,7 +97,7 @@
         @toggle-select-all="toggleSelect"
       />
       <UiTablePagination
-        v-model="pagination.currentPage"
+        v-model:curr-page="pagination.currentPage"
         v-model:per-page="pagination.pageSize"
         v-model:start-index="pagination.startIndex"
         v-model:end-index="pagination.endIndex"
@@ -143,7 +143,7 @@ import {
   faPowerOff,
   faTrash,
 } from '@fortawesome/free-solid-svg-icons'
-import { computed, ref } from 'vue'
+import { computed, ref, watch } from 'vue'
 
 const props = defineProps<{
   pifs: XoPif[]
@@ -163,6 +163,18 @@ const pagination = ref<PaginationPayload>({
   endIndex: 0,
 })
 
+const findPageById = () => {
+  const index = props.pifs.findIndex(pif => pif.id === props.selectedRowId)
+  if (index === -1) return null
+  pagination.value.currentPage = Math.floor(index / pagination.value.pageSize) + 1
+}
+watch(
+  () => props.pifs,
+  () => {
+    findPageById()
+  }
+)
+
 const getNetworkName = (pif: XoPif) => {
   const network: XoNetwork = get(pif.$network)!
   return network.name_label ? network.name_label : ''
@@ -217,14 +229,6 @@ const headerIcon: Record<pifHeader, { icon: IconDefinition }> = {
   more: { icon: faEllipsis },
 }
 
-const findPageById = () => {
-  const index = props.pifs.findIndex(pif => pif.id === props.selectedRowId)
-  if (index === -1) return null
-  pagination.value.currentPage = Math.floor(index / pagination.value.pageSize) + 1
-}
-
-findPageById()
-
 const getHeaderIcon = (status: pifHeader) => {
   return headerIcon[status].icon
 }