From cb26b28c0ff8e83a1e4e17173768ca0b9dfdbbe6 Mon Sep 17 00:00:00 2001
From: Simon Vieille <simon@deblan.fr>
Date: Sun, 2 Feb 2025 19:12:52 +0100
Subject: [PATCH] refactor(crud): add pager component

---
 frontend/js/views/BankAccountsView.vue | 21 ++++++++-------------
 1 file changed, 8 insertions(+), 13 deletions(-)

diff --git a/frontend/js/views/BankAccountsView.vue b/frontend/js/views/BankAccountsView.vue
index c258221..cdf5b9f 100644
--- a/frontend/js/views/BankAccountsView.vue
+++ b/frontend/js/views/BankAccountsView.vue
@@ -8,17 +8,13 @@
       </template>
     </Header>
 
-    <div class="d-flex justify-content-end gap-2 pe-3 pb-2">
-      <BPagination v-model="page" size="sm" :per-page="limit" :total-rows="limit*pages" @page-click="updatePage" class="m-0" />
-      <BFormSelect
-        v-model="limit"
-        :options="limits"
-        @change="updateLimit"
-        style="width: 70px"
-        size="sm"
-        :required="true"
-      />
-    </div>
+    <Pager
+      v-model:page="page"
+      v-model:pages="pages"
+      v-model:limit="limit"
+      @update="refresh()"
+    />
+
     <div class="crud-list">
       <BTableSimple caption-top responsive v-if="data !== null">
         <BThead>
@@ -90,12 +86,11 @@ import {
   BFormInput,
   BAlert,
   BButtonToolbar,
-  BPagination,
-  BFormSelect,
 } from 'bootstrap-vue-next'
 
 import SortButton from './../components/SortButton.vue'
 import Header from './../components/crud/Header.vue'
+import Pager from './../components/crud/Pager.vue'
 import { ref, onMounted, reactive, watch } from 'vue'
 import { getStorage, saveStorage, removeStorage } from '../lib/storage'
 import { defineLimits } from '../lib/limit'