Merge pull request #1271 from Gadha2311/returninvoice-pagination

fix:add pagination support for return sales invoice list

src/pages/POS/ReturnSalesInvoiceModal.vue

@@ -53,7 +53,7 @@
       style="height: 65vh; width: 60vh"
     >
       <Row
-        v-for="row in filteredInvoices"
+        v-for="row in paginatedInvoices"
         :key="row.name"
         :ratio="ratio"
         :border="true"
@@ -82,7 +82,15 @@
       </Row>
     </div>
 
-    <div class="row-start-6 grid grid-cols-2 gap-4 mt-4">
+    <div class="mt-1 mb-1">
+      <Paginator
+        :item-count="filteredInvoices.length"
+        :allowed-counts="[20, 40, -1]"
+        @index-change="setPageIndices"
+      />
+    </div>
+
+    <div class="row-start-6 grid grid-cols-2 gap-4 mt-1">
       <div class="col-span-2">
         <Button
           class="w-full p-5 bg-red-500 dark:bg-red-700"
@@ -109,6 +117,7 @@ import { defineComponent, inject } from 'vue';
 import { ModelNameEnum } from 'models/types';
 import { Field } from 'schemas/types';
 import { Money } from 'pesa';
+import Paginator from 'src/components/Paginator.vue';
 
 export default defineComponent({
   name: 'ReturnSalesInvoice',
@@ -117,6 +126,7 @@ export default defineComponent({
     Button,
     FormControl,
     Row,
+    Paginator,
   },
   props: {
     modalStatus: Boolean,
@@ -131,6 +141,8 @@ export default defineComponent({
     return {
       returnedInvoices: [] as SalesInvoice[],
       invoiceSearchTerm: '',
+      pageStart: 0,
+      pageEnd: 20,
     };
   },
   computed: {
@@ -175,6 +187,9 @@ export default defineComponent({
           .includes(this.invoiceSearchTerm.toLowerCase())
       );
     },
+    paginatedInvoices() {
+      return this.filteredInvoices.slice(this.pageStart, this.pageEnd);
+    },
   },
   watch: {
     async modalStatus(newVal) {
@@ -182,6 +197,10 @@ export default defineComponent({
         await this.setReturnedInvoices();
       }
     },
+    invoiceSearchTerm() {
+      this.pageStart = 0;
+      this.pageEnd = this.pageEnd - this.pageStart || 20;
+    },
   },
   async mounted() {
     await this.setReturnedInvoices();
@@ -200,6 +219,10 @@ export default defineComponent({
         this.returnInvoice(this.filteredInvoices[0] as SalesInvoice);
       }
     },
+    setPageIndices({ start, end }: { start: number; end: number }) {
+      this.pageStart = start;
+      this.pageEnd = end;
+    },
     async setReturnedInvoices() {
       const allInvoices = await this.fyo.db.getAll(ModelNameEnum.SalesInvoice, {
         fields: [],