From 1d402e01436e0b92267bb7c3dba4ea5142c4c545 Mon Sep 17 00:00:00 2001
From: asift798 <asifmomin798@gmail.com>
Date: Wed, 2 Feb 2022 18:51:32 +0530
Subject: [PATCH 1/8] add scroll to load invoices and fixed limited category
 and customer issue in payment and expense

---
 resources/scripts/admin/stores/category.js    |  1 +
 resources/scripts/admin/stores/customer.js    |  1 +
 .../scripts/admin/views/expenses/Create.vue   | 37 +++++++++++-
 .../scripts/admin/views/invoices/View.vue     | 60 ++++++++++++++++---
 .../scripts/admin/views/payments/Create.vue   |  6 +-
 .../base/BaseCustomerSelectInput.vue          |  7 +++
 6 files changed, 100 insertions(+), 12 deletions(-)

diff --git a/resources/scripts/admin/stores/category.js b/resources/scripts/admin/stores/category.js
index a1c35b3b..787f61b4 100644
--- a/resources/scripts/admin/stores/category.js
+++ b/resources/scripts/admin/stores/category.js
@@ -17,6 +17,7 @@ export const useCategoryStore = (useWindow = false) => {
         name: '',
         description: '',
       },
+      editCategory: null
     }),
 
     getters: {
diff --git a/resources/scripts/admin/stores/customer.js b/resources/scripts/admin/stores/customer.js
index 0069961e..ffb3b58d 100644
--- a/resources/scripts/admin/stores/customer.js
+++ b/resources/scripts/admin/stores/customer.js
@@ -25,6 +25,7 @@ export const useCustomerStore = (useWindow = false) => {
       currentCustomer: {
         ...customerStub(),
       },
+      editCustomer: null
     }),
 
     getters: {
diff --git a/resources/scripts/admin/views/expenses/Create.vue b/resources/scripts/admin/views/expenses/Create.vue
index ca36c8ad..8f689a7d 100644
--- a/resources/scripts/admin/views/expenses/Create.vue
+++ b/resources/scripts/admin/views/expenses/Create.vue
@@ -77,6 +77,7 @@
               label="name"
               track-by="id"
               :options="searchCategory"
+              v-if="!isFetchingInitialData"
               :filter-results="false"
               resolve-on-load
               :delay="500"
@@ -180,6 +181,7 @@
               label="name"
               track-by="id"
               :options="searchCustomer"
+              v-if="!isFetchingInitialData"
               :filter-results="false"
               resolve-on-load
               :delay="500"
@@ -280,7 +282,7 @@
 </template>
 
 <script setup>
-import { ref, computed, onMounted } from 'vue'
+import { ref, computed, onMounted, onBeforeUnmount } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { useI18n } from 'vue-i18n'
 import {
@@ -413,11 +415,25 @@ function onCurrencyChange(v) {
 
 async function searchCategory(search) {
   let res = await categoryStore.fetchCategories({ search })
+  if(res.data.data.length>0 && categoryStore.editCategory) {
+    let checkCategoryExist = res.data.data.find((c) => c.id==categoryStore.editCategory.id)
+    if(!checkCategoryExist) {
+      let edit_category = Object.assign({}, categoryStore.editCategory)
+      res.data.data.push(edit_category)
+    }
+  }
   return res.data.data
 }
 
 async function searchCustomer(search) {
   let res = await customerStore.fetchCustomers({ search })
+  if(res.data.data.length>0 && customerStore.editCustomer) {
+    let checkCustomerExist = res.data.data.find((c) => c.id==customerStore.editCustomer.id)
+    if(!checkCustomerExist) {
+      let edit_customer = Object.assign({}, customerStore.editCustomer)
+      res.data.data.push(edit_customer)
+    }
+  }
   return res.data.data
 }
 
@@ -433,10 +449,21 @@ async function loadData() {
   await expenseStore.fetchPaymentModes({ limit: 'all' })
 
   if (isEdit.value) {
-    await expenseStore.fetchExpense(route.params.id)
+    const expenseData = await expenseStore.fetchExpense(route.params.id)
 
     expenseStore.currentExpense.currency_id =
       expenseStore.currentExpense.selectedCurrency.id
+
+    if(expenseData.data) {
+      if(!categoryStore.editCategory && expenseData.data.data.expense_category) {
+        categoryStore.editCategory = expenseData.data.data.expense_category
+      }
+
+      if(!customerStore.editCustomer && expenseData.data.data.customer) {
+        customerStore.editCustomer = expenseData.data.data.customer
+      }
+    }
+    
   } else if (route.query.customer) {
     expenseStore.currentExpense.customer_id = route.query.customer
   }
@@ -472,4 +499,10 @@ async function submitForm() {
     return
   }
 }
+
+onBeforeUnmount(() => {
+  expenseStore.resetCurrentExpenseData()
+  customerStore.editCustomer = null
+  categoryStore.editCategory = null
+})
 </script>
diff --git a/resources/scripts/admin/views/invoices/View.vue b/resources/scripts/admin/views/invoices/View.vue
index 9e0a3078..22c98ad3 100644
--- a/resources/scripts/admin/views/invoices/View.vue
+++ b/resources/scripts/admin/views/invoices/View.vue
@@ -40,6 +40,10 @@ const isSendingEmail = ref(false)
 const isRequestOnGoing = ref(false)
 const isSearching = ref(false)
 const isLoading = ref(false)
+const invoiceList = ref(null)
+const page_no = ref(1)
+const last_page_no = ref(1)
+const isLoadMore = ref(false)
 
 const searchData = reactive({
   orderBy: null,
@@ -118,14 +122,38 @@ function hasActiveUrl(id) {
   return route.params.id == id
 }
 
-async function loadInvoices() {
-  isLoading.value = true
-  await invoiceStore.fetchInvoices()
+async function loadInvoices(params, isScroll=false) {
+  if(isScroll) {
+    isLoadMore.value = true
+  }
+  else {
+    isLoading.value = true
+  }
+  let invoice = await invoiceStore.fetchInvoices(params)
   isLoading.value = false
+  isLoadMore.value = false
+  let invoice_list = invoiceList.value ? invoiceList.value : []
+  
+  for (const key in invoice.data.data) {
+    invoice_list.push(invoice.data.data[key])
+  }
+  invoiceList.value = invoice_list
 
-  setTimeout(() => {
-    scrollToInvoice()
-  }, 500)
+  page_no.value = params ? params.page : 1
+  last_page_no.value = invoice.data.meta.last_page
+  let isInvoiceExist = invoiceList.value.find(inv=>inv.id==route.params.id)
+
+  if(isScroll==false && !isInvoiceExist && page_no.value<last_page_no.value) {
+    loadInvoices({page: ++page_no.value})
+  }
+
+  if(isInvoiceExist) {
+    setTimeout(() => {
+      if(isScroll==false) {
+        scrollToInvoice()
+      }
+    }, 500)
+  }
 }
 
 function scrollToInvoice() {
@@ -133,9 +161,21 @@ function scrollToInvoice() {
   if (el) {
     el.scrollIntoView({ behavior: 'smooth' })
     el.classList.add('shake')
+    addScrollListner()
   }
 }
 
+function addScrollListner() {
+  let el = document.getElementById("scroll_load")
+  el.addEventListener('scroll', (ev) => {
+    if(ev.target.scrollTop>0 && (ev.target.scrollTop == ev.target.scrollHeight - ev.target.clientHeight)) {
+      if(page_no.value<last_page_no.value) {
+        loadInvoices({page: ++page_no.value}, true)
+      }
+    }
+  })
+}
+
 async function loadInvoice() {
   let response = await invoiceStore.fetchInvoice(route.params.id)
   if (response.data) {
@@ -359,7 +399,7 @@ onSearched = debounce(onSearched, 500)
       </div>
 
       <div
-        v-if="invoiceStore && invoiceStore.invoices"
+        v-if="invoiceStore && invoiceList"
         class="
           h-full
           pb-32
@@ -367,8 +407,10 @@ onSearched = debounce(onSearched, 500)
           border-l border-gray-200 border-solid
           base-scroll
         "
+        id="scroll_load"
       >
-        <div v-for="(invoice, index) in invoiceStore.invoices" :key="index">
+      
+        <div v-for="(invoice, index) in invoiceList" :key="index">
           <router-link
             v-if="invoice && !isLoading"
             :id="'invoice-' + invoice.id"
@@ -451,7 +493,7 @@ onSearched = debounce(onSearched, 500)
         </div>
         <div class="flex justify-center p-4 items-center">
           <LoadingIcon
-            v-if="isLoading"
+            v-if="isLoading || isLoadMore"
             class="h-6 m-1 animate-spin text-primary-400"
           />
         </div>
diff --git a/resources/scripts/admin/views/payments/Create.vue b/resources/scripts/admin/views/payments/Create.vue
index 663a69c0..39888302 100644
--- a/resources/scripts/admin/views/payments/Create.vue
+++ b/resources/scripts/admin/views/payments/Create.vue
@@ -84,9 +84,9 @@
             <BaseCustomerSelectInput
               v-model="paymentStore.currentPayment.customer_id"
               :content-loading="isLoadingContent"
+              v-if="!isLoadingContent"
               :invalid="v$.currentPayment.customer_id.$error"
               :placeholder="$t('customers.select_a_customer')"
-              :fetch-all="isEdit"
               show-action
               @update:modelValue="
                 selectNewCustomer(paymentStore.currentPayment.customer_id)
@@ -446,6 +446,9 @@ function onCustomerChange(customer_id) {
           paymentStore.currentPayment.selectedCustomer = res2.data.data
           paymentStore.currentPayment.customer = res2.data.data
           paymentStore.currentPayment.currency = res2.data.data.currency
+          if(isEdit.value && !customerStore.editCustomer && paymentStore.currentPayment.customer_id) {
+            customerStore.editCustomer = res2.data.data
+          }
         }
 
         if (paymentStore.currentPayment.invoice_id) {
@@ -482,6 +485,7 @@ function onCustomerChange(customer_id) {
 onBeforeUnmount(() => {
   paymentStore.resetCurrentPayment()
   invoiceList.value = []
+  customerStore.editCustomer = null
 })
 
 async function submitPaymentData() {
diff --git a/resources/scripts/components/base/BaseCustomerSelectInput.vue b/resources/scripts/components/base/BaseCustomerSelectInput.vue
index 2bd2ace2..217402e6 100644
--- a/resources/scripts/components/base/BaseCustomerSelectInput.vue
+++ b/resources/scripts/components/base/BaseCustomerSelectInput.vue
@@ -82,6 +82,13 @@ async function searchCustomers(search) {
   }
 
   let res = await customerStore.fetchCustomers(data)
+  if(res.data.data.length>0 && customerStore.editCustomer) {
+    let checkCustomerExist = res.data.data.find((c) => c.id==customerStore.editCustomer.id)
+    if(!checkCustomerExist) {
+      let edit_customer = Object.assign({}, customerStore.editCustomer)
+      res.data.data.push(edit_customer)
+    }
+  }
 
   return res.data.data
 }

From c6b36d78b9f50649ad19c9cf999cfe7006e2f210 Mon Sep 17 00:00:00 2001
From: asift798 <asifmomin798@gmail.com>
Date: Wed, 2 Feb 2022 18:57:38 +0530
Subject: [PATCH 2/8] updated customer and category added in first in dropdown
 list

---
 resources/scripts/admin/views/expenses/Create.vue             | 4 ++--
 resources/scripts/components/base/BaseCustomerSelectInput.vue | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/resources/scripts/admin/views/expenses/Create.vue b/resources/scripts/admin/views/expenses/Create.vue
index 8f689a7d..a6908d04 100644
--- a/resources/scripts/admin/views/expenses/Create.vue
+++ b/resources/scripts/admin/views/expenses/Create.vue
@@ -419,7 +419,7 @@ async function searchCategory(search) {
     let checkCategoryExist = res.data.data.find((c) => c.id==categoryStore.editCategory.id)
     if(!checkCategoryExist) {
       let edit_category = Object.assign({}, categoryStore.editCategory)
-      res.data.data.push(edit_category)
+      res.data.data.unshift(edit_category)
     }
   }
   return res.data.data
@@ -431,7 +431,7 @@ async function searchCustomer(search) {
     let checkCustomerExist = res.data.data.find((c) => c.id==customerStore.editCustomer.id)
     if(!checkCustomerExist) {
       let edit_customer = Object.assign({}, customerStore.editCustomer)
-      res.data.data.push(edit_customer)
+      res.data.data.unshift(edit_customer)
     }
   }
   return res.data.data
diff --git a/resources/scripts/components/base/BaseCustomerSelectInput.vue b/resources/scripts/components/base/BaseCustomerSelectInput.vue
index 217402e6..f2b84d61 100644
--- a/resources/scripts/components/base/BaseCustomerSelectInput.vue
+++ b/resources/scripts/components/base/BaseCustomerSelectInput.vue
@@ -86,7 +86,7 @@ async function searchCustomers(search) {
     let checkCustomerExist = res.data.data.find((c) => c.id==customerStore.editCustomer.id)
     if(!checkCustomerExist) {
       let edit_customer = Object.assign({}, customerStore.editCustomer)
-      res.data.data.push(edit_customer)
+      res.data.data.unshift(edit_customer)
     }
   }
 

From 0c77562d0ed14afa35e7f055b2890cedcf75dbc4 Mon Sep 17 00:00:00 2001
From: Mohit Panjwani <mohit.panjvani@gmail.com>
Date: Sat, 5 Feb 2022 13:31:06 +0530
Subject: [PATCH 3/8] minor refactor

---
 .../scripts/admin/views/invoices/View.vue     | 94 ++++++++-----------
 1 file changed, 41 insertions(+), 53 deletions(-)

diff --git a/resources/scripts/admin/views/invoices/View.vue b/resources/scripts/admin/views/invoices/View.vue
index 22c98ad3..274cb62e 100644
--- a/resources/scripts/admin/views/invoices/View.vue
+++ b/resources/scripts/admin/views/invoices/View.vue
@@ -1,49 +1,35 @@
 <script setup>
 import { useI18n } from 'vue-i18n'
 import { computed, reactive, ref, watch, inject } from 'vue'
-import InvoiceDropdown from '@/scripts/admin/components/dropdowns/InvoiceIndexDropdown.vue'
-import { useRoute, useRouter } from 'vue-router'
+import { useRoute } from 'vue-router'
 import { debounce } from 'lodash'
+
 import { useInvoiceStore } from '@/scripts/admin/stores/invoice'
 import { useModalStore } from '@/scripts/stores/modal'
-import { useNotificationStore } from '@/scripts/stores/notification'
 import { useUserStore } from '@/scripts/admin/stores/user'
 import { useDialogStore } from '@/scripts/stores/dialog'
+
 import SendInvoiceModal from '@/scripts/admin/components/modal-components/SendInvoiceModal.vue'
+import InvoiceDropdown from '@/scripts/admin/components/dropdowns/InvoiceIndexDropdown.vue'
 import LoadingIcon from '@/scripts/components/icons/LoadingIcon.vue'
+
 import abilities from '@/scripts/admin/stub/abilities'
 
 const modalStore = useModalStore()
 const invoiceStore = useInvoiceStore()
-const notificationStore = useNotificationStore()
 const userStore = useUserStore()
 const dialogStore = useDialogStore()
 
 const { t } = useI18n()
-const utils = inject('$utils')
-const id = ref(null)
-const count = ref(null)
 const invoiceData = ref(null)
-const currency = ref(null)
 const route = useRoute()
-const router = useRouter()
-const status = ref([
-  'DRAFT',
-  'SENT',
-  'VIEWED',
-  'EXPIRED',
-  'ACCEPTED',
-  'REJECTED',
-])
+
 const isMarkAsSent = ref(false)
-const isSendingEmail = ref(false)
-const isRequestOnGoing = ref(false)
 const isSearching = ref(false)
 const isLoading = ref(false)
 const invoiceList = ref(null)
-const page_no = ref(1)
-const last_page_no = ref(1)
-const isLoadMore = ref(false)
+const currentPageNumber = ref(1)
+const lastPageNumber = ref(1)
 
 const searchData = reactive({
   orderBy: null,
@@ -122,34 +108,36 @@ function hasActiveUrl(id) {
   return route.params.id == id
 }
 
-async function loadInvoices(params, isScroll=false) {
-  if(isScroll) {
-    isLoadMore.value = true
+async function loadInvoices(params, isScroll = false) {
+  if (isLoading.value) {
+    return
   }
-  else {
-    isLoading.value = true
-  }
-  let invoice = await invoiceStore.fetchInvoices(params)
+
+  isLoading.value = true
+  let response = await invoiceStore.fetchInvoices(params)
   isLoading.value = false
-  isLoadMore.value = false
-  let invoice_list = invoiceList.value ? invoiceList.value : []
-  
-  for (const key in invoice.data.data) {
-    invoice_list.push(invoice.data.data[key])
-  }
-  invoiceList.value = invoice_list
 
-  page_no.value = params ? params.page : 1
-  last_page_no.value = invoice.data.meta.last_page
-  let isInvoiceExist = invoiceList.value.find(inv=>inv.id==route.params.id)
+  invoiceList.value = invoiceList.value ? invoiceList.value : []
 
-  if(isScroll==false && !isInvoiceExist && page_no.value<last_page_no.value) {
-    loadInvoices({page: ++page_no.value})
+  invoiceList.value = [...invoiceList.value, ...response.data.data]
+
+  currentPageNumber.value = params ? params.page : 1
+  lastPageNumber.value = response.data.meta.last_page
+  let isInvoiceExist = invoiceList.value.find(
+    (inv) => inv.id == route.params.id
+  )
+
+  if (
+    isScroll == false &&
+    !isInvoiceExist &&
+    currentPageNumber.value < lastPageNumber.value
+  ) {
+    loadInvoices({ page: ++currentPageNumber.value })
   }
 
-  if(isInvoiceExist) {
+  if (isInvoiceExist) {
     setTimeout(() => {
-      if(isScroll==false) {
+      if (isScroll == false) {
         scrollToInvoice()
       }
     }, 500)
@@ -166,11 +154,14 @@ function scrollToInvoice() {
 }
 
 function addScrollListner() {
-  let el = document.getElementById("scroll_load")
+  let el = document.getElementById('scroll_load')
   el.addEventListener('scroll', (ev) => {
-    if(ev.target.scrollTop>0 && (ev.target.scrollTop == ev.target.scrollHeight - ev.target.clientHeight)) {
-      if(page_no.value<last_page_no.value) {
-        loadInvoices({page: ++page_no.value}, true)
+    if (
+      ev.target.scrollTop > 0 &&
+      ev.target.scrollTop == ev.target.scrollHeight - ev.target.clientHeight
+    ) {
+      if (currentPageNumber.value < lastPageNumber.value) {
+        loadInvoices({ page: ++currentPageNumber.value }, true)
       }
     }
   })
@@ -251,7 +242,6 @@ onSearched = debounce(onSearched, 500)
             invoiceData.status === 'DRAFT' &&
             userStore.hasAbilities(abilities.SEND_INVOICE)
           "
-          :disabled="isSendingEmail"
           variant="primary"
           class="text-sm"
           @click="onSendInvoice"
@@ -399,7 +389,7 @@ onSearched = debounce(onSearched, 500)
       </div>
 
       <div
-        v-if="invoiceStore && invoiceList"
+        id="scroll_load"
         class="
           h-full
           pb-32
@@ -407,12 +397,10 @@ onSearched = debounce(onSearched, 500)
           border-l border-gray-200 border-solid
           base-scroll
         "
-        id="scroll_load"
       >
-      
         <div v-for="(invoice, index) in invoiceList" :key="index">
           <router-link
-            v-if="invoice && !isLoading"
+            v-if="invoice"
             :id="'invoice-' + invoice.id"
             :to="`/admin/invoices/${invoice.id}/view`"
             :class="[
@@ -493,7 +481,7 @@ onSearched = debounce(onSearched, 500)
         </div>
         <div class="flex justify-center p-4 items-center">
           <LoadingIcon
-            v-if="isLoading || isLoadMore"
+            v-if="isLoading"
             class="h-6 m-1 animate-spin text-primary-400"
           />
         </div>

From 3f2c774f91de5c1935224448b5fd46cc0cfebca6 Mon Sep 17 00:00:00 2001
From: asift798 <asifmomin798@gmail.com>
Date: Tue, 8 Feb 2022 11:57:47 +0530
Subject: [PATCH 4/8] refactor and apply scroll to load data in estimates,
 invoices and payments

---
 .../scripts/admin/views/estimates/View.vue    |  96 ++++++++++------
 .../scripts/admin/views/invoices/View.vue     |  22 ++--
 .../scripts/admin/views/payments/View.vue     | 100 +++++++++++------
 .../partials/RecurringInvoiceViewSidebar.vue  | 103 +++++++++++-------
 4 files changed, 200 insertions(+), 121 deletions(-)

diff --git a/resources/scripts/admin/views/estimates/View.vue b/resources/scripts/admin/views/estimates/View.vue
index fc631891..6d3f624b 100644
--- a/resources/scripts/admin/views/estimates/View.vue
+++ b/resources/scripts/admin/views/estimates/View.vue
@@ -23,7 +23,6 @@
             estimateData.status === 'DRAFT' &&
             userStore.hasAbilities(abilities.SEND_ESTIMATE)
           "
-          :disabled="isSendingEmail"
           :content-loading="isLoadingEstimate"
           variant="primary"
           class="text-sm"
@@ -45,7 +44,7 @@
         hidden
         h-full
         pt-16
-        pb-4
+        pb-[6.4rem]
         ml-56
         bg-white
         xl:ml-64
@@ -156,18 +155,17 @@
       </div>
 
       <div
-        v-if="estimateStore && estimateStore.estimates"
+        ref="estimateListSection"
         class="
           h-full
-          pb-32
           overflow-y-scroll
           border-l border-gray-200 border-solid
           base-scroll
         "
       >
-        <div v-for="(estimate, index) in estimateStore.estimates" :key="index">
+        <div v-for="(estimate, index) in estimateList" :key="index">
           <router-link
-            v-if="estimate && !isLoading"
+            v-if="estimate"
             :id="'estimate-' + estimate.id"
             :to="`/admin/estimates/${estimate.id}/view`"
             :class="[
@@ -248,11 +246,8 @@
             </div>
           </router-link>
         </div>
-        <div class="flex justify-center p-4 items-center">
-          <LoadingIcon
-            v-if="isLoading"
-            class="h-6 m-1 animate-spin text-primary-400"
-          />
+        <div v-if="isLoading" class="flex justify-center p-4 items-center">
+          <LoadingIcon class="h-6 m-1 animate-spin text-primary-400" />
         </div>
         <p
           v-if="!estimateStore.estimates.length && !isLoading"
@@ -283,49 +278,41 @@
 
 <script setup>
 import { useI18n } from 'vue-i18n'
-import { computed, reactive, ref, watch, inject } from 'vue'
+import { computed, reactive, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
-import EstimateDropDown from '@/scripts/admin/components/dropdowns/EstimateIndexDropdown.vue'
 import { debounce } from 'lodash'
+
 import { useEstimateStore } from '@/scripts/admin/stores/estimate'
 import { useModalStore } from '@/scripts/stores/modal'
-import { useNotificationStore } from '@/scripts/stores/notification'
 import { useDialogStore } from '@/scripts/stores/dialog'
 import { useUserStore } from '@/scripts/admin/stores/user'
+
+import EstimateDropDown from '@/scripts/admin/components/dropdowns/EstimateIndexDropdown.vue'
 import SendEstimateModal from '@/scripts/admin/components/modal-components/SendEstimateModal.vue'
 import LoadingIcon from '@/scripts/components/icons/LoadingIcon.vue'
+
 import abilities from '@/scripts/admin/stub/abilities'
 
 const modalStore = useModalStore()
 const estimateStore = useEstimateStore()
-const notificationStore = useNotificationStore()
 const dialogStore = useDialogStore()
 const userStore = useUserStore()
 
 const { t } = useI18n()
-const utils = inject('$utils')
-const id = ref(null)
-const count = ref(null)
 const estimateData = ref(null)
-const currency = ref(null)
 const route = useRoute()
 const router = useRouter()
-const status = ref([
-  'DRAFT',
-  'SENT',
-  'VIEWED',
-  'EXPIRED',
-  'ACCEPTED',
-  'REJECTED',
-])
 
 const isMarkAsSent = ref(false)
-const isSendingEmail = ref(false)
-const isRequestOnGoing = ref(false)
 const isSearching = ref(false)
 const isLoading = ref(false)
 const isLoadingEstimate = ref(false)
 
+const estimateList = ref(null)
+const currentPageNumber = ref(1)
+const lastPageNumber = ref(1)
+const estimateListSection = ref(null)
+
 const searchData = reactive({
   orderBy: null,
   orderByField: null,
@@ -374,14 +361,40 @@ function hasActiveUrl(id) {
   return route.params.id == id
 }
 
-async function loadEstimates() {
+async function loadEstimates(params, isScroll = false) {
+  if (isLoading.value) {
+    return
+  }
+
   isLoading.value = true
-  await estimateStore.fetchEstimates(route.params.id)
+  let response = await estimateStore.fetchEstimates(params)
   isLoading.value = false
 
-  setTimeout(() => {
-    scrollToEstimate()
-  }, 500)
+  estimateList.value = estimateList.value ? estimateList.value : []
+
+  estimateList.value = [...estimateList.value, ...response.data.data]
+
+  currentPageNumber.value = params ? params.page : 1
+  lastPageNumber.value = response.data.meta.last_page
+  let isEstimateExist = estimateList.value.find(
+    (est) => est.id == route.params.id
+  )
+
+  if (
+    isScroll == false &&
+    !isEstimateExist &&
+    currentPageNumber.value < lastPageNumber.value
+  ) {
+    loadEstimates({ page: ++currentPageNumber.value })
+  }
+
+  if (isEstimateExist) {
+    setTimeout(() => {
+      if (isScroll == false) {
+        scrollToEstimate()
+      }
+    }, 500)
+  }
 }
 
 function scrollToEstimate() {
@@ -389,9 +402,24 @@ function scrollToEstimate() {
   if (el) {
     el.scrollIntoView({ behavior: 'smooth' })
     el.classList.add('shake')
+    addScrollListner()
   }
 }
 
+function addScrollListner() {
+  estimateListSection.value.addEventListener('scroll', (ev) => {
+    if (
+      ev.target.scrollTop > 0 &&
+      ev.target.scrollTop + ev.target.clientHeight >
+        ev.target.scrollHeight - 200
+    ) {
+      if (currentPageNumber.value < lastPageNumber.value) {
+        loadEstimates({ page: ++currentPageNumber.value }, true)
+      }
+    }
+  })
+}
+
 async function loadEstimate() {
   isLoadingEstimate.value = true
   let response = await estimateStore.fetchEstimate(route.params.id)
diff --git a/resources/scripts/admin/views/invoices/View.vue b/resources/scripts/admin/views/invoices/View.vue
index 274cb62e..d9f8607a 100644
--- a/resources/scripts/admin/views/invoices/View.vue
+++ b/resources/scripts/admin/views/invoices/View.vue
@@ -1,6 +1,6 @@
 <script setup>
 import { useI18n } from 'vue-i18n'
-import { computed, reactive, ref, watch, inject } from 'vue'
+import { computed, reactive, ref, watch } from 'vue'
 import { useRoute } from 'vue-router'
 import { debounce } from 'lodash'
 
@@ -27,9 +27,11 @@ const route = useRoute()
 const isMarkAsSent = ref(false)
 const isSearching = ref(false)
 const isLoading = ref(false)
+
 const invoiceList = ref(null)
 const currentPageNumber = ref(1)
 const lastPageNumber = ref(1)
+const invoiceListSection = ref(null)
 
 const searchData = reactive({
   orderBy: null,
@@ -154,11 +156,11 @@ function scrollToInvoice() {
 }
 
 function addScrollListner() {
-  let el = document.getElementById('scroll_load')
-  el.addEventListener('scroll', (ev) => {
+  invoiceListSection.value.addEventListener('scroll', (ev) => {
     if (
       ev.target.scrollTop > 0 &&
-      ev.target.scrollTop == ev.target.scrollHeight - ev.target.clientHeight
+      ev.target.scrollTop + ev.target.clientHeight >
+        ev.target.scrollHeight - 200
     ) {
       if (currentPageNumber.value < lastPageNumber.value) {
         loadInvoices({ page: ++currentPageNumber.value }, true)
@@ -284,7 +286,7 @@ onSearched = debounce(onSearched, 500)
         hidden
         h-full
         pt-16
-        pb-4
+        pb-[6.4rem]
         ml-56
         bg-white
         xl:ml-64
@@ -389,10 +391,9 @@ onSearched = debounce(onSearched, 500)
       </div>
 
       <div
-        id="scroll_load"
+        ref="invoiceListSection"
         class="
           h-full
-          pb-32
           overflow-y-scroll
           border-l border-gray-200 border-solid
           base-scroll
@@ -479,11 +480,8 @@ onSearched = debounce(onSearched, 500)
             </div>
           </router-link>
         </div>
-        <div class="flex justify-center p-4 items-center">
-          <LoadingIcon
-            v-if="isLoading"
-            class="h-6 m-1 animate-spin text-primary-400"
-          />
+        <div v-if="isLoading" class="flex justify-center p-4 items-center">
+          <LoadingIcon class="h-6 m-1 animate-spin text-primary-400" />
         </div>
         <p
           v-if="!invoiceStore.invoices.length && !isLoading"
diff --git a/resources/scripts/admin/views/payments/View.vue b/resources/scripts/admin/views/payments/View.vue
index 6475aedd..de58ba11 100644
--- a/resources/scripts/admin/views/payments/View.vue
+++ b/resources/scripts/admin/views/payments/View.vue
@@ -5,7 +5,6 @@
       <template #actions>
         <BaseButton
           v-if="userStore.hasAbilities(abilities.SEND_PAYMENT)"
-          :disabled="isSendingEmail"
           :content-loading="isFetching"
           variant="primary"
           @click="onPaymentSend"
@@ -30,7 +29,7 @@
         hidden
         h-full
         pt-16
-        pb-4
+        pb-[6rem]
         ml-56
         bg-white
         xl:ml-64
@@ -139,17 +138,12 @@
       </div>
 
       <div
-        v-if="paymentStore && paymentStore.payments"
-        class="
-          h-full
-          pb-32
-          overflow-y-scroll
-          border-l border-gray-200 border-solid
-        "
+        ref="paymentListSection"
+        class="h-full overflow-y-scroll border-l border-gray-200 border-solid"
       >
-        <div v-for="(payment, index) in paymentStore.payments" :key="index">
+        <div v-for="(payment, index) in paymentList" :key="index">
           <router-link
-            v-if="payment && !isLoading"
+            v-if="payment"
             :id="'payment-' + payment.id"
             :to="`/admin/payments/${payment.id}/view`"
             :class="[
@@ -228,11 +222,8 @@
             </div>
           </router-link>
         </div>
-        <div class="flex justify-center p-4 items-center">
-          <LoadingIcon
-            v-if="isLoading"
-            class="h-6 m-1 animate-spin text-primary-400"
-          />
+        <div v-if="isLoading" class="flex justify-center p-4 items-center">
+          <LoadingIcon class="h-6 m-1 animate-spin text-primary-400" />
         </div>
         <p
           v-if="!paymentStore?.payments?.length && !isLoading"
@@ -260,26 +251,25 @@
 <script setup>
 import { useI18n } from 'vue-i18n'
 import { debounce } from 'lodash'
-import { ref, reactive, computed, inject, onMounted, watch } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
+import { ref, reactive, computed, watch } from 'vue'
+import { useRoute } from 'vue-router'
+import moment from 'moment'
+
 import { useDialogStore } from '@/scripts/stores/dialog'
 import { usePaymentStore } from '@/scripts/admin/stores/payment'
 import { useModalStore } from '@/scripts/stores/modal'
-import PaymentDropdown from '@/scripts/admin/components/dropdowns/PaymentIndexDropdown.vue'
-import moment from 'moment'
 import { useUserStore } from '@/scripts/admin/stores/user'
+
+import PaymentDropdown from '@/scripts/admin/components/dropdowns/PaymentIndexDropdown.vue'
 import SendPaymentModal from '@/scripts/admin/components/modal-components/SendPaymentModal.vue'
-import abilities from '@/scripts/admin/stub/abilities'
 import LoadingIcon from '@/scripts/components/icons/LoadingIcon.vue'
 
+import abilities from '@/scripts/admin/stub/abilities'
+
 const route = useRoute()
-const router = useRouter()
 
 const { t } = useI18n()
-let id = ref(null)
-let count = ref(null)
 let payment = reactive({})
-let currency = ref(null)
 let searchData = reactive({
   orderBy: null,
   orderByField: null,
@@ -287,17 +277,18 @@ let searchData = reactive({
 })
 
 let isSearching = ref(false)
-let isSendingEmail = ref(false)
-let isMarkingAsSent = ref(false)
 let isLoading = ref(false)
 let isFetching = ref(false)
 
-const $utils = inject('utils')
-
 const paymentStore = usePaymentStore()
 const modalStore = useModalStore()
 const userStore = useUserStore()
 
+const paymentList = ref(null)
+const currentPageNumber = ref(1)
+const lastPageNumber = ref(1)
+const paymentListSection = ref(null)
+
 const pageTitle = computed(() => {
   return payment.payment_number || ''
 })
@@ -346,14 +337,40 @@ function hasAbilities() {
 
 const dialogStore = useDialogStore()
 
-async function loadPayments() {
+async function loadPayments(params, isScroll = false) {
+  if (isLoading.value) {
+    return
+  }
+
   isLoading.value = true
-  await paymentStore.fetchPayments({ limit: 'all' })
+  let response = await paymentStore.fetchPayments(params)
   isLoading.value = false
 
-  setTimeout(() => {
-    scrollToPayment()
-  }, 500)
+  paymentList.value = paymentList.value ? paymentList.value : []
+
+  paymentList.value = [...paymentList.value, ...response.data.data]
+
+  currentPageNumber.value = params ? params.page : 1
+  lastPageNumber.value = response.data.meta.last_page
+  let isPaymentExist = paymentList.value.find(
+    (paym) => paym.id == route.params.id
+  )
+
+  if (
+    isScroll == false &&
+    !isPaymentExist &&
+    currentPageNumber.value < lastPageNumber.value
+  ) {
+    loadPayments({ page: ++currentPageNumber.value })
+  }
+
+  if (isPaymentExist) {
+    setTimeout(() => {
+      if (isScroll == false) {
+        scrollToPayment()
+      }
+    }, 500)
+  }
 }
 
 async function loadPayment() {
@@ -375,9 +392,24 @@ function scrollToPayment() {
   if (el) {
     el.scrollIntoView({ behavior: 'smooth' })
     el.classList.add('shake')
+    addScrollListner()
   }
 }
 
+function addScrollListner() {
+  paymentListSection.value.addEventListener('scroll', (ev) => {
+    if (
+      ev.target.scrollTop > 0 &&
+      ev.target.scrollTop + ev.target.clientHeight >
+        ev.target.scrollHeight - 200
+    ) {
+      if (currentPageNumber.value < lastPageNumber.value) {
+        loadPayments({ page: ++currentPageNumber.value }, true)
+      }
+    }
+  })
+}
+
 async function onSearch() {
   let data = {}
 
diff --git a/resources/scripts/admin/views/recurring-invoices/partials/RecurringInvoiceViewSidebar.vue b/resources/scripts/admin/views/recurring-invoices/partials/RecurringInvoiceViewSidebar.vue
index e19e2a18..cdda4041 100644
--- a/resources/scripts/admin/views/recurring-invoices/partials/RecurringInvoiceViewSidebar.vue
+++ b/resources/scripts/admin/views/recurring-invoices/partials/RecurringInvoiceViewSidebar.vue
@@ -1,38 +1,25 @@
 <script setup>
 import { useI18n } from 'vue-i18n'
-import { computed, reactive, ref, watch, inject } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
+import { computed, reactive, ref } from 'vue'
+import { useRoute } from 'vue-router'
 import { debounce } from 'lodash'
+
 import { useRecurringInvoiceStore } from '@/scripts/admin/stores/recurring-invoice'
-import { useModalStore } from '@/scripts/stores/modal'
-import { useNotificationStore } from '@/scripts/stores/notification'
-import { useUserStore } from '@/scripts/admin/stores/user'
-import { useDialogStore } from '@/scripts/stores/dialog'
+
 import LoadingIcon from '@/scripts/components/icons/LoadingIcon.vue'
 
-const modalStore = useModalStore()
 const recurringInvoiceStore = useRecurringInvoiceStore()
-const notificationStore = useNotificationStore()
-const userStore = useUserStore()
-const dialogStore = useDialogStore()
 
 const { t } = useI18n()
-const id = ref(null)
-const count = ref(null)
-const currency = ref(null)
 const route = useRoute()
-const router = useRouter()
-const status = ref([
-  'DRAFT',
-  'SENT',
-  'VIEWED',
-  'EXPIRED',
-  'ACCEPTED',
-  'REJECTED',
-])
 const isSearching = ref(false)
 const isLoading = ref(false)
 
+const invoiceList = ref(null)
+const currentPageNumber = ref(1)
+const lastPageNumber = ref(1)
+const invoiceListSection = ref(null)
+
 const searchData = reactive({
   orderBy: null,
   orderByField: null,
@@ -50,14 +37,40 @@ function hasActiveUrl(id) {
   return route.params.id == id
 }
 
-async function loadRecurringInvoices() {
+async function loadRecurringInvoices(params, isScroll = false) {
+  if (isLoading.value) {
+    return
+  }
+
   isLoading.value = true
-  await recurringInvoiceStore.fetchRecurringInvoices()
+  let response = await recurringInvoiceStore.fetchRecurringInvoices(params)
   isLoading.value = false
 
-  setTimeout(() => {
-    scrollToRecurringInvoice()
-  }, 500)
+  invoiceList.value = invoiceList.value ? invoiceList.value : []
+
+  invoiceList.value = [...invoiceList.value, ...response.data.data]
+
+  currentPageNumber.value = params ? params.page : 1
+  lastPageNumber.value = response.data.meta.last_page
+  let isInvoiceExist = invoiceList.value.find(
+    (inv) => inv.id == route.params.id
+  )
+
+  if (
+    isScroll == false &&
+    !isInvoiceExist &&
+    currentPageNumber.value < lastPageNumber.value
+  ) {
+    loadRecurringInvoices({ page: ++currentPageNumber.value })
+  }
+
+  if (isInvoiceExist) {
+    setTimeout(() => {
+      if (isScroll == false) {
+        scrollToRecurringInvoice()
+      }
+    }, 500)
+  }
 }
 
 function scrollToRecurringInvoice() {
@@ -65,9 +78,24 @@ function scrollToRecurringInvoice() {
   if (el) {
     el.scrollIntoView({ behavior: 'smooth' })
     el.classList.add('shake')
+    addScrollListner()
   }
 }
 
+function addScrollListner() {
+  invoiceListSection.value.addEventListener('scroll', (ev) => {
+    if (
+      ev.target.scrollTop > 0 &&
+      ev.target.scrollTop + ev.target.clientHeight >
+        ev.target.scrollHeight - 200
+    ) {
+      if (currentPageNumber.value < lastPageNumber.value) {
+        loadRecurringInvoices({ page: ++currentPageNumber.value }, true)
+      }
+    }
+  })
+}
+
 async function onSearched() {
   let data = ''
   if (
@@ -120,7 +148,7 @@ onSearched = debounce(onSearched, 500)
       hidden
       h-full
       pt-16
-      pb-4
+      pb-[6.4rem]
       ml-56
       bg-white
       xl:ml-64
@@ -211,21 +239,17 @@ onSearched = debounce(onSearched, 500)
     </div>
 
     <div
-      v-if="recurringInvoiceStore && recurringInvoiceStore.recurringInvoices"
+      ref="invoiceListSection"
       class="
         h-full
-        pb-32
         overflow-y-scroll
         border-l border-gray-200 border-solid
         base-scroll
       "
     >
-      <div
-        v-for="(invoice, index) in recurringInvoiceStore.recurringInvoices"
-        :key="index"
-      >
+      <div v-for="(invoice, index) in invoiceList" :key="index">
         <router-link
-          v-if="invoice && !isLoading"
+          v-if="invoice"
           :id="'recurring-invoice-' + invoice.id"
           :to="`/admin/recurring-invoices/${invoice.id}/view`"
           :class="[
@@ -253,7 +277,7 @@ onSearched = debounce(onSearched, 500)
                 truncate
               "
             />
-            
+
             <div
               class="
                 mt-1
@@ -305,11 +329,8 @@ onSearched = debounce(onSearched, 500)
           </div>
         </router-link>
       </div>
-      <div class="flex justify-center p-4 items-center">
-        <LoadingIcon
-          v-if="isLoading"
-          class="h-6 m-1 animate-spin text-primary-400"
-        />
+      <div v-if="isLoading" class="flex justify-center p-4 items-center">
+        <LoadingIcon class="h-6 m-1 animate-spin text-primary-400" />
       </div>
       <p
         v-if="!recurringInvoiceStore.recurringInvoices.length && !isLoading"

From c07e309918eb9a305c3daf3ab515176ae96c3bcc Mon Sep 17 00:00:00 2001
From: asift798 <asifmomin798@gmail.com>
Date: Mon, 14 Feb 2022 15:16:26 +0530
Subject: [PATCH 5/8] rename variable name

---
 resources/scripts/admin/views/estimates/View.vue | 16 ++++++++--------
 .../scripts/admin/views/expenses/Create.vue      | 10 +++++-----
 resources/scripts/admin/views/invoices/View.vue  | 16 ++++++++--------
 resources/scripts/admin/views/payments/View.vue  | 16 ++++++++--------
 .../partials/RecurringInvoiceViewSidebar.vue     | 16 ++++++++--------
 .../components/base/BaseCustomerSelectInput.vue  |  4 ++--
 6 files changed, 39 insertions(+), 39 deletions(-)

diff --git a/resources/scripts/admin/views/estimates/View.vue b/resources/scripts/admin/views/estimates/View.vue
index 6d3f624b..ba4bad9a 100644
--- a/resources/scripts/admin/views/estimates/View.vue
+++ b/resources/scripts/admin/views/estimates/View.vue
@@ -361,7 +361,7 @@ function hasActiveUrl(id) {
   return route.params.id == id
 }
 
-async function loadEstimates(params, isScroll = false) {
+async function loadEstimates(params, fromScrollListener = false) {
   if (isLoading.value) {
     return
   }
@@ -376,21 +376,21 @@ async function loadEstimates(params, isScroll = false) {
 
   currentPageNumber.value = params ? params.page : 1
   lastPageNumber.value = response.data.meta.last_page
-  let isEstimateExist = estimateList.value.find(
+  let estimateFound = estimateList.value.find(
     (est) => est.id == route.params.id
   )
 
   if (
-    isScroll == false &&
-    !isEstimateExist &&
+    fromScrollListener == false &&
+    !estimateFound &&
     currentPageNumber.value < lastPageNumber.value
   ) {
     loadEstimates({ page: ++currentPageNumber.value })
   }
 
-  if (isEstimateExist) {
+  if (estimateFound) {
     setTimeout(() => {
-      if (isScroll == false) {
+      if (fromScrollListener == false) {
         scrollToEstimate()
       }
     }, 500)
@@ -402,11 +402,11 @@ function scrollToEstimate() {
   if (el) {
     el.scrollIntoView({ behavior: 'smooth' })
     el.classList.add('shake')
-    addScrollListner()
+    addScrollListener()
   }
 }
 
-function addScrollListner() {
+function addScrollListener() {
   estimateListSection.value.addEventListener('scroll', (ev) => {
     if (
       ev.target.scrollTop > 0 &&
diff --git a/resources/scripts/admin/views/expenses/Create.vue b/resources/scripts/admin/views/expenses/Create.vue
index a6908d04..1572196d 100644
--- a/resources/scripts/admin/views/expenses/Create.vue
+++ b/resources/scripts/admin/views/expenses/Create.vue
@@ -416,8 +416,8 @@ function onCurrencyChange(v) {
 async function searchCategory(search) {
   let res = await categoryStore.fetchCategories({ search })
   if(res.data.data.length>0 && categoryStore.editCategory) {
-    let checkCategoryExist = res.data.data.find((c) => c.id==categoryStore.editCategory.id)
-    if(!checkCategoryExist) {
+    let categoryFound = res.data.data.find((c) => c.id==categoryStore.editCategory.id)
+    if(!categoryFound) {
       let edit_category = Object.assign({}, categoryStore.editCategory)
       res.data.data.unshift(edit_category)
     }
@@ -428,8 +428,8 @@ async function searchCategory(search) {
 async function searchCustomer(search) {
   let res = await customerStore.fetchCustomers({ search })
   if(res.data.data.length>0 && customerStore.editCustomer) {
-    let checkCustomerExist = res.data.data.find((c) => c.id==customerStore.editCustomer.id)
-    if(!checkCustomerExist) {
+    let customerFound = res.data.data.find((c) => c.id==customerStore.editCustomer.id)
+    if(!customerFound) {
       let edit_customer = Object.assign({}, customerStore.editCustomer)
       res.data.data.unshift(edit_customer)
     }
@@ -463,7 +463,7 @@ async function loadData() {
         customerStore.editCustomer = expenseData.data.data.customer
       }
     }
-    
+
   } else if (route.query.customer) {
     expenseStore.currentExpense.customer_id = route.query.customer
   }
diff --git a/resources/scripts/admin/views/invoices/View.vue b/resources/scripts/admin/views/invoices/View.vue
index d9f8607a..875b282d 100644
--- a/resources/scripts/admin/views/invoices/View.vue
+++ b/resources/scripts/admin/views/invoices/View.vue
@@ -110,7 +110,7 @@ function hasActiveUrl(id) {
   return route.params.id == id
 }
 
-async function loadInvoices(params, isScroll = false) {
+async function loadInvoices(params, fromScrollListener = false) {
   if (isLoading.value) {
     return
   }
@@ -125,21 +125,21 @@ async function loadInvoices(params, isScroll = false) {
 
   currentPageNumber.value = params ? params.page : 1
   lastPageNumber.value = response.data.meta.last_page
-  let isInvoiceExist = invoiceList.value.find(
+  let invoiceFound = invoiceList.value.find(
     (inv) => inv.id == route.params.id
   )
 
   if (
-    isScroll == false &&
-    !isInvoiceExist &&
+    fromScrollListener == false &&
+    !invoiceFound &&
     currentPageNumber.value < lastPageNumber.value
   ) {
     loadInvoices({ page: ++currentPageNumber.value })
   }
 
-  if (isInvoiceExist) {
+  if (invoiceFound) {
     setTimeout(() => {
-      if (isScroll == false) {
+      if (fromScrollListener == false) {
         scrollToInvoice()
       }
     }, 500)
@@ -151,11 +151,11 @@ function scrollToInvoice() {
   if (el) {
     el.scrollIntoView({ behavior: 'smooth' })
     el.classList.add('shake')
-    addScrollListner()
+    addScrollListener()
   }
 }
 
-function addScrollListner() {
+function addScrollListener() {
   invoiceListSection.value.addEventListener('scroll', (ev) => {
     if (
       ev.target.scrollTop > 0 &&
diff --git a/resources/scripts/admin/views/payments/View.vue b/resources/scripts/admin/views/payments/View.vue
index de58ba11..4f9fcbf5 100644
--- a/resources/scripts/admin/views/payments/View.vue
+++ b/resources/scripts/admin/views/payments/View.vue
@@ -337,7 +337,7 @@ function hasAbilities() {
 
 const dialogStore = useDialogStore()
 
-async function loadPayments(params, isScroll = false) {
+async function loadPayments(params, fromScrollListener = false) {
   if (isLoading.value) {
     return
   }
@@ -352,21 +352,21 @@ async function loadPayments(params, isScroll = false) {
 
   currentPageNumber.value = params ? params.page : 1
   lastPageNumber.value = response.data.meta.last_page
-  let isPaymentExist = paymentList.value.find(
+  let paymentFound = paymentList.value.find(
     (paym) => paym.id == route.params.id
   )
 
   if (
-    isScroll == false &&
-    !isPaymentExist &&
+    fromScrollListener == false &&
+    !paymentFound &&
     currentPageNumber.value < lastPageNumber.value
   ) {
     loadPayments({ page: ++currentPageNumber.value })
   }
 
-  if (isPaymentExist) {
+  if (paymentFound) {
     setTimeout(() => {
-      if (isScroll == false) {
+      if (fromScrollListener == false) {
         scrollToPayment()
       }
     }, 500)
@@ -392,11 +392,11 @@ function scrollToPayment() {
   if (el) {
     el.scrollIntoView({ behavior: 'smooth' })
     el.classList.add('shake')
-    addScrollListner()
+    addScrollListener()
   }
 }
 
-function addScrollListner() {
+function addScrollListener() {
   paymentListSection.value.addEventListener('scroll', (ev) => {
     if (
       ev.target.scrollTop > 0 &&
diff --git a/resources/scripts/admin/views/recurring-invoices/partials/RecurringInvoiceViewSidebar.vue b/resources/scripts/admin/views/recurring-invoices/partials/RecurringInvoiceViewSidebar.vue
index cdda4041..2d1b0d95 100644
--- a/resources/scripts/admin/views/recurring-invoices/partials/RecurringInvoiceViewSidebar.vue
+++ b/resources/scripts/admin/views/recurring-invoices/partials/RecurringInvoiceViewSidebar.vue
@@ -37,7 +37,7 @@ function hasActiveUrl(id) {
   return route.params.id == id
 }
 
-async function loadRecurringInvoices(params, isScroll = false) {
+async function loadRecurringInvoices(params, fromScrollListener = false) {
   if (isLoading.value) {
     return
   }
@@ -52,21 +52,21 @@ async function loadRecurringInvoices(params, isScroll = false) {
 
   currentPageNumber.value = params ? params.page : 1
   lastPageNumber.value = response.data.meta.last_page
-  let isInvoiceExist = invoiceList.value.find(
+  let invoiceFound = invoiceList.value.find(
     (inv) => inv.id == route.params.id
   )
 
   if (
-    isScroll == false &&
-    !isInvoiceExist &&
+    fromScrollListener == false &&
+    !invoiceFound &&
     currentPageNumber.value < lastPageNumber.value
   ) {
     loadRecurringInvoices({ page: ++currentPageNumber.value })
   }
 
-  if (isInvoiceExist) {
+  if (invoiceFound) {
     setTimeout(() => {
-      if (isScroll == false) {
+      if (fromScrollListener == false) {
         scrollToRecurringInvoice()
       }
     }, 500)
@@ -78,11 +78,11 @@ function scrollToRecurringInvoice() {
   if (el) {
     el.scrollIntoView({ behavior: 'smooth' })
     el.classList.add('shake')
-    addScrollListner()
+    addScrollListener()
   }
 }
 
-function addScrollListner() {
+function addScrollListener() {
   invoiceListSection.value.addEventListener('scroll', (ev) => {
     if (
       ev.target.scrollTop > 0 &&
diff --git a/resources/scripts/components/base/BaseCustomerSelectInput.vue b/resources/scripts/components/base/BaseCustomerSelectInput.vue
index f2b84d61..79d166dd 100644
--- a/resources/scripts/components/base/BaseCustomerSelectInput.vue
+++ b/resources/scripts/components/base/BaseCustomerSelectInput.vue
@@ -83,8 +83,8 @@ async function searchCustomers(search) {
 
   let res = await customerStore.fetchCustomers(data)
   if(res.data.data.length>0 && customerStore.editCustomer) {
-    let checkCustomerExist = res.data.data.find((c) => c.id==customerStore.editCustomer.id)
-    if(!checkCustomerExist) {
+    let customerFound = res.data.data.find((c) => c.id==customerStore.editCustomer.id)
+    if(!customerFound) {
       let edit_customer = Object.assign({}, customerStore.editCustomer)
       res.data.data.unshift(edit_customer)
     }

From 9e23f9b9b137cfbaaa50d17e322ea565d6e4f95e Mon Sep 17 00:00:00 2001
From: Mohit Panjwani <mohit.panjvani@gmail.com>
Date: Tue, 15 Feb 2022 11:32:30 +0530
Subject: [PATCH 6/8] fix search issues

---
 .../customers/partials/CustomerViewSidebar.vue      |  6 +++---
 resources/scripts/admin/views/estimates/View.vue    |  9 ++++++---
 resources/scripts/admin/views/invoices/View.vue     | 13 +++++++------
 resources/scripts/admin/views/payments/View.vue     |  9 ++++++---
 .../partials/RecurringInvoiceViewSidebar.vue        | 13 +++++++------
 5 files changed, 29 insertions(+), 21 deletions(-)

diff --git a/resources/scripts/admin/views/customers/partials/CustomerViewSidebar.vue b/resources/scripts/admin/views/customers/partials/CustomerViewSidebar.vue
index bc19a070..45a4e8a7 100644
--- a/resources/scripts/admin/views/customers/partials/CustomerViewSidebar.vue
+++ b/resources/scripts/admin/views/customers/partials/CustomerViewSidebar.vue
@@ -145,7 +145,7 @@
                 truncate
               "
             />
-            
+
             <BaseText
               v-if="customer.contact_name"
               :text="customer.contact_name"
@@ -170,12 +170,12 @@
       </div>
       <div class="flex justify-center p-4 items-center">
         <LoadingIcon
-          v-if="isFetching"
+          v-if="isFetching || isSearching"
           class="h-6 m-1 animate-spin text-primary-400"
         />
       </div>
       <p
-        v-if="!customerStore.customers.length && !isFetching"
+        v-if="!customerStore.customers.length && !isFetching && !isSearching"
         class="flex justify-center px-4 mt-5 text-sm text-gray-600"
       >
         {{ $t('customers.no_matching_customers') }}
diff --git a/resources/scripts/admin/views/estimates/View.vue b/resources/scripts/admin/views/estimates/View.vue
index ba4bad9a..f87b4fed 100644
--- a/resources/scripts/admin/views/estimates/View.vue
+++ b/resources/scripts/admin/views/estimates/View.vue
@@ -246,11 +246,14 @@
             </div>
           </router-link>
         </div>
-        <div v-if="isLoading" class="flex justify-center p-4 items-center">
+        <div
+          v-if="isLoading || isSearching"
+          class="flex justify-center p-4 items-center"
+        >
           <LoadingIcon class="h-6 m-1 animate-spin text-primary-400" />
         </div>
         <p
-          v-if="!estimateStore.estimates.length && !isLoading"
+          v-if="!estimateList.length && !isLoading && !isSearching"
           class="flex justify-center px-4 mt-5 text-sm text-gray-600"
         >
           {{ $t('estimates.no_matching_estimates') }}
@@ -453,7 +456,7 @@ async function onSearched() {
   let response = await estimateStore.searchEstimate(data)
   isSearching.value = false
   if (response.data) {
-    estimateStore.estimates = response.data.data
+    estimateList.value = response.data.data
   }
 }
 
diff --git a/resources/scripts/admin/views/invoices/View.vue b/resources/scripts/admin/views/invoices/View.vue
index 875b282d..c051fa46 100644
--- a/resources/scripts/admin/views/invoices/View.vue
+++ b/resources/scripts/admin/views/invoices/View.vue
@@ -125,9 +125,7 @@ async function loadInvoices(params, fromScrollListener = false) {
 
   currentPageNumber.value = params ? params.page : 1
   lastPageNumber.value = response.data.meta.last_page
-  let invoiceFound = invoiceList.value.find(
-    (inv) => inv.id == route.params.id
-  )
+  let invoiceFound = invoiceList.value.find((inv) => inv.id == route.params.id)
 
   if (
     fromScrollListener == false &&
@@ -199,7 +197,7 @@ async function onSearched() {
   let response = await invoiceStore.searchInvoice(data)
   isSearching.value = false
   if (response.data) {
-    invoiceStore.invoices = response.data.data
+    invoiceList.value = response.data.data
   }
 }
 
@@ -480,11 +478,14 @@ onSearched = debounce(onSearched, 500)
             </div>
           </router-link>
         </div>
-        <div v-if="isLoading" class="flex justify-center p-4 items-center">
+        <div
+          v-if="isLoading || isSearching"
+          class="flex justify-center p-4 items-center"
+        >
           <LoadingIcon class="h-6 m-1 animate-spin text-primary-400" />
         </div>
         <p
-          v-if="!invoiceStore.invoices.length && !isLoading"
+          v-if="!invoiceList?.length && !isLoading && !isSearching"
           class="flex justify-center px-4 mt-5 text-sm text-gray-600"
         >
           {{ $t('invoices.no_matching_invoices') }}
diff --git a/resources/scripts/admin/views/payments/View.vue b/resources/scripts/admin/views/payments/View.vue
index 4f9fcbf5..2a73616c 100644
--- a/resources/scripts/admin/views/payments/View.vue
+++ b/resources/scripts/admin/views/payments/View.vue
@@ -222,11 +222,14 @@
             </div>
           </router-link>
         </div>
-        <div v-if="isLoading" class="flex justify-center p-4 items-center">
+        <div
+          v-if="isLoading || isSearching"
+          class="flex justify-center p-4 items-center"
+        >
           <LoadingIcon class="h-6 m-1 animate-spin text-primary-400" />
         </div>
         <p
-          v-if="!paymentStore?.payments?.length && !isLoading"
+          v-if="!paymentList?.length && !isLoading && !isSearching"
           class="flex justify-center px-4 mt-5 text-sm text-gray-600"
         >
           {{ $t('payments.no_matching_payments') }}
@@ -438,7 +441,7 @@ async function onSearch() {
     isSearching.value = false
 
     if (response.data.data) {
-      paymentStore.payments = response.data.data
+      paymentList.value = response.data.data
     }
   } catch (error) {
     isSearching.value = false
diff --git a/resources/scripts/admin/views/recurring-invoices/partials/RecurringInvoiceViewSidebar.vue b/resources/scripts/admin/views/recurring-invoices/partials/RecurringInvoiceViewSidebar.vue
index 2d1b0d95..6fa60762 100644
--- a/resources/scripts/admin/views/recurring-invoices/partials/RecurringInvoiceViewSidebar.vue
+++ b/resources/scripts/admin/views/recurring-invoices/partials/RecurringInvoiceViewSidebar.vue
@@ -52,9 +52,7 @@ async function loadRecurringInvoices(params, fromScrollListener = false) {
 
   currentPageNumber.value = params ? params.page : 1
   lastPageNumber.value = response.data.meta.last_page
-  let invoiceFound = invoiceList.value.find(
-    (inv) => inv.id == route.params.id
-  )
+  let invoiceFound = invoiceList.value.find((inv) => inv.id == route.params.id)
 
   if (
     fromScrollListener == false &&
@@ -119,7 +117,7 @@ async function onSearched() {
   let response = await recurringInvoiceStore.searchRecurringInvoice(data)
   isSearching.value = false
   if (response.data) {
-    recurringInvoiceStore.recurringInvoices = response.data.data
+    invoiceList.value = response.data.data
   }
 }
 
@@ -329,11 +327,14 @@ onSearched = debounce(onSearched, 500)
           </div>
         </router-link>
       </div>
-      <div v-if="isLoading" class="flex justify-center p-4 items-center">
+      <div
+        v-if="isLoading || isSearching"
+        class="flex justify-center p-4 items-center"
+      >
         <LoadingIcon class="h-6 m-1 animate-spin text-primary-400" />
       </div>
       <p
-        v-if="!recurringInvoiceStore.recurringInvoices.length && !isLoading"
+        v-if="!invoiceList?.length && !isLoading && !isSearching"
         class="flex justify-center px-4 mt-5 text-sm text-gray-600"
       >
         {{ $t('invoices.no_matching_invoices') }}

From 13cbb5439f9e4bcb9738c55b95b82afbc97f8f9a Mon Sep 17 00:00:00 2001
From: Mohit Panjwani <mohit.panjvani@gmail.com>
Date: Tue, 15 Feb 2022 13:01:29 +0530
Subject: [PATCH 7/8] fix search pagination

---
 .../scripts/admin/views/invoices/View.vue     | 29 ++++++++-----------
 1 file changed, 12 insertions(+), 17 deletions(-)

diff --git a/resources/scripts/admin/views/invoices/View.vue b/resources/scripts/admin/views/invoices/View.vue
index c051fa46..8f64a302 100644
--- a/resources/scripts/admin/views/invoices/View.vue
+++ b/resources/scripts/admin/views/invoices/View.vue
@@ -25,7 +25,6 @@ const invoiceData = ref(null)
 const route = useRoute()
 
 const isMarkAsSent = ref(false)
-const isSearching = ref(false)
 const isLoading = ref(false)
 
 const invoiceList = ref(null)
@@ -123,7 +122,7 @@ async function loadInvoices(params, fromScrollListener = false) {
 
   invoiceList.value = [...invoiceList.value, ...response.data.data]
 
-  currentPageNumber.value = params ? params.page : 1
+  currentPageNumber.value = params && params.page ? params.page : 1
   lastPageNumber.value = response.data.meta.last_page
   let invoiceFound = invoiceList.value.find((inv) => inv.id == route.params.id)
 
@@ -175,30 +174,29 @@ async function loadInvoice() {
 }
 
 async function onSearched() {
-  let data = ''
+  let params = {}
   if (
     searchData.searchText !== '' &&
     searchData.searchText !== null &&
     searchData.searchText !== undefined
   ) {
-    data += `search=${searchData.searchText}&`
+    params.search = searchData.searchText
   }
 
   if (searchData.orderBy !== null && searchData.orderBy !== undefined) {
-    data += `orderBy=${searchData.orderBy}&`
+    params.orderBy = searchData.orderBy
   }
+
   if (
     searchData.orderByField !== null &&
     searchData.orderByField !== undefined
   ) {
-    data += `orderByField=${searchData.orderByField}`
-  }
-  isSearching.value = true
-  let response = await invoiceStore.searchInvoice(data)
-  isSearching.value = false
-  if (response.data) {
-    invoiceList.value = response.data.data
+    params.orderByField = searchData.orderByField
   }
+
+  invoiceList.value = []
+
+  loadInvoices(params)
 }
 
 function sortData() {
@@ -478,14 +476,11 @@ onSearched = debounce(onSearched, 500)
             </div>
           </router-link>
         </div>
-        <div
-          v-if="isLoading || isSearching"
-          class="flex justify-center p-4 items-center"
-        >
+        <div v-if="isLoading" class="flex justify-center p-4 items-center">
           <LoadingIcon class="h-6 m-1 animate-spin text-primary-400" />
         </div>
         <p
-          v-if="!invoiceList?.length && !isLoading && !isSearching"
+          v-if="!invoiceList?.length && !isLoading"
           class="flex justify-center px-4 mt-5 text-sm text-gray-600"
         >
           {{ $t('invoices.no_matching_invoices') }}

From 30dc428b1a6dc1fe92b85502f3425c1bced271a4 Mon Sep 17 00:00:00 2001
From: asift798 <asifmomin798@gmail.com>
Date: Tue, 15 Feb 2022 18:41:05 +0530
Subject: [PATCH 8/8] apply scroll to load data changes in customer and fixed
 search with scroll to load data issue in estimate, invoice, recurring invoice
 and payments

---
 .../partials/CustomerViewSidebar.vue          | 141 +++++++++++-------
 .../scripts/admin/views/estimates/View.vue    |  71 +++++----
 .../scripts/admin/views/invoices/View.vue     |  60 ++++----
 .../scripts/admin/views/payments/View.vue     |  79 +++++-----
 .../partials/RecurringInvoiceViewSidebar.vue  |  71 +++++----
 5 files changed, 221 insertions(+), 201 deletions(-)

diff --git a/resources/scripts/admin/views/customers/partials/CustomerViewSidebar.vue b/resources/scripts/admin/views/customers/partials/CustomerViewSidebar.vue
index 45a4e8a7..e76e5d5a 100644
--- a/resources/scripts/admin/views/customers/partials/CustomerViewSidebar.vue
+++ b/resources/scripts/admin/views/customers/partials/CustomerViewSidebar.vue
@@ -7,7 +7,7 @@
       hidden
       h-full
       pt-16
-      pb-4
+      pb-[6.6rem]
       ml-56
       bg-white
       xl:ml-64
@@ -107,18 +107,18 @@
     </div>
 
     <div
+      ref="customerListSection"
       class="
         h-full
-        pb-32
         overflow-y-scroll
         border-l border-gray-200 border-solid
         sidebar
         base-scroll
       "
     >
-      <div v-for="(customer, index) in customerStore.customers" :key="index">
+      <div v-for="(customer, index) in customerList" :key="index">
         <router-link
-          v-if="customer && !isFetching"
+          v-if="customer"
           :id="'customer-' + customer.id"
           :to="`/admin/customers/${customer.id}/view`"
           :class="[
@@ -162,20 +162,19 @@
           </div>
           <div class="flex-1 font-bold text-right whitespace-nowrap">
             <BaseFormatMoney
-              :amount="customer.due_amount"
+              :amount="customer.due_amount!==null ? customer.due_amount : 0"
               :currency="customer.currency"
             />
           </div>
         </router-link>
       </div>
-      <div class="flex justify-center p-4 items-center">
+      <div v-if="isFetching" class="flex justify-center p-4 items-center">
         <LoadingIcon
-          v-if="isFetching || isSearching"
           class="h-6 m-1 animate-spin text-primary-400"
         />
       </div>
       <p
-        v-if="!customerStore.customers.length && !isFetching && !isSearching"
+        v-if="!customerList?.length && !isFetching"
         class="flex justify-center px-4 mt-5 text-sm text-gray-600"
       >
         {{ $t('customers.no_matching_customers') }}
@@ -185,7 +184,7 @@
 </template>
 
 <script setup>
-import { computed, ref, reactive, watch, inject } from 'vue'
+import { computed, ref, reactive } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useRoute } from 'vue-router'
 import { useCustomerStore } from '@/scripts/admin/stores/customer'
@@ -193,20 +192,22 @@ import LoadingIcon from '@/scripts/components/icons/LoadingIcon.vue'
 import { debounce } from 'lodash'
 
 const customerStore = useCustomerStore()
-const title = 'Customer View'
 const route = useRoute()
 const { t } = useI18n()
 
-let isSearching = ref(false)
-
 let isFetching = ref(false)
 
 let searchData = reactive({
-  orderBy: '',
-  orderByField: '',
-  searchText: '',
+  orderBy: null,
+  orderByField: null,
+  searchText: null,
 })
 
+const customerList = ref(null)
+const currentPageNumber = ref(1)
+const lastPageNumber = ref(1)
+const customerListSection = ref(null)
+
 onSearch = debounce(onSearch, 500)
 
 const getOrderBy = computed(() => {
@@ -224,16 +225,64 @@ function hasActiveUrl(id) {
   return route.params.id == id
 }
 
-async function loadCustomers() {
+async function loadCustomers(pageNumber, fromScrollListener = false) {
+  if (isFetching.value) {
+    return
+  }
+
+  let params = {}
+  if (
+    searchData.searchText !== '' &&
+    searchData.searchText !== null &&
+    searchData.searchText !== undefined
+  ) {
+    params.display_name = searchData.searchText
+  }
+
+  if (searchData.orderBy !== null && searchData.orderBy !== undefined) {
+    params.orderBy = searchData.orderBy
+  }
+
+  if (
+    searchData.orderByField !== null &&
+    searchData.orderByField !== undefined
+  ) {
+    params.orderByField = searchData.orderByField
+  }
+
   isFetching.value = true
-
-  await customerStore.fetchCustomers({ limit: 'all' })
-
+  let response = await customerStore.fetchCustomers({
+    page: pageNumber,
+    ...params,
+    limit: 15
+  })
   isFetching.value = false
 
-  setTimeout(() => {
-    scrollToCustomer()
-  }, 500)
+  customerList.value = customerList.value ? customerList.value : []
+  customerList.value = [...customerList.value, ...response.data.data]
+
+  currentPageNumber.value = pageNumber ? pageNumber : 1
+  lastPageNumber.value = response.data.meta.last_page
+  let customerFound = customerList.value.find(
+    (cust) => cust.id == route.params.id
+  )
+
+  if (
+    fromScrollListener == false &&
+    !customerFound &&
+    currentPageNumber.value < lastPageNumber.value &&
+    Object.keys(params).length === 0
+  ) {
+    loadCustomers(++currentPageNumber.value)
+  }
+
+  if (customerFound) {
+    setTimeout(() => {
+      if (fromScrollListener == false) {
+        scrollToCustomer()
+      }
+    }, 500)
+  }
 }
 
 function scrollToCustomer() {
@@ -242,41 +291,27 @@ function scrollToCustomer() {
   if (el) {
     el.scrollIntoView({ behavior: 'smooth' })
     el.classList.add('shake')
+    addScrollListener()
   }
 }
 
-async function onSearch() {
-  let data = {}
-  if (
-    searchData.searchText !== '' &&
-    searchData.searchText !== null &&
-    searchData.searchText !== undefined
-  ) {
-    data.display_name = searchData.searchText
-  }
-
-  if (searchData.orderBy !== null && searchData.orderBy !== undefined) {
-    data.orderBy = searchData.orderBy
-  }
-
-  if (
-    searchData.orderByField !== null &&
-    searchData.orderByField !== undefined
-  ) {
-    data.orderByField = searchData.orderByField
-  }
-
-  isSearching.value = true
-
-  try {
-    let response = await customerStore.fetchCustomers(data)
-    isSearching.value = false
-    if (response.data) {
-      customerStore.customers = response.data.data
+function addScrollListener() {
+  customerListSection.value.addEventListener('scroll', (ev) => {
+    if (
+      ev.target.scrollTop > 0 &&
+      ev.target.scrollTop + ev.target.clientHeight >
+        ev.target.scrollHeight - 200
+    ) {
+      if (currentPageNumber.value < lastPageNumber.value) {
+        loadCustomers(++currentPageNumber.value, true)
+      }
     }
-  } catch (error) {
-    isSearching.value = false
-  }
+  })
+}
+
+async function onSearch() {
+  customerList.value = []
+  loadCustomers()
 }
 
 function sortData() {
diff --git a/resources/scripts/admin/views/estimates/View.vue b/resources/scripts/admin/views/estimates/View.vue
index f87b4fed..0fffb756 100644
--- a/resources/scripts/admin/views/estimates/View.vue
+++ b/resources/scripts/admin/views/estimates/View.vue
@@ -246,14 +246,11 @@
             </div>
           </router-link>
         </div>
-        <div
-          v-if="isLoading || isSearching"
-          class="flex justify-center p-4 items-center"
-        >
+        <div v-if="isLoading" class="flex justify-center p-4 items-center">
           <LoadingIcon class="h-6 m-1 animate-spin text-primary-400" />
         </div>
         <p
-          v-if="!estimateList.length && !isLoading && !isSearching"
+          v-if="!estimateList?.length && !isLoading"
           class="flex justify-center px-4 mt-5 text-sm text-gray-600"
         >
           {{ $t('estimates.no_matching_estimates') }}
@@ -307,7 +304,6 @@ const route = useRoute()
 const router = useRouter()
 
 const isMarkAsSent = ref(false)
-const isSearching = ref(false)
 const isLoading = ref(false)
 const isLoadingEstimate = ref(false)
 
@@ -364,20 +360,42 @@ function hasActiveUrl(id) {
   return route.params.id == id
 }
 
-async function loadEstimates(params, fromScrollListener = false) {
+async function loadEstimates(pageNumber, fromScrollListener = false) {
   if (isLoading.value) {
     return
   }
 
+  let params = {}
+  if (
+    searchData.searchText !== '' &&
+    searchData.searchText !== null &&
+    searchData.searchText !== undefined
+  ) {
+    params.search = searchData.searchText
+  }
+
+  if (searchData.orderBy !== null && searchData.orderBy !== undefined) {
+    params.orderBy = searchData.orderBy
+  }
+
+  if (
+    searchData.orderByField !== null &&
+    searchData.orderByField !== undefined
+  ) {
+    params.orderByField = searchData.orderByField
+  }
+
   isLoading.value = true
-  let response = await estimateStore.fetchEstimates(params)
+  let response = await estimateStore.fetchEstimates({
+    page: pageNumber,
+    ...params,
+  })
   isLoading.value = false
 
   estimateList.value = estimateList.value ? estimateList.value : []
-
   estimateList.value = [...estimateList.value, ...response.data.data]
 
-  currentPageNumber.value = params ? params.page : 1
+  currentPageNumber.value = pageNumber ? pageNumber : 1
   lastPageNumber.value = response.data.meta.last_page
   let estimateFound = estimateList.value.find(
     (est) => est.id == route.params.id
@@ -386,9 +404,10 @@ async function loadEstimates(params, fromScrollListener = false) {
   if (
     fromScrollListener == false &&
     !estimateFound &&
-    currentPageNumber.value < lastPageNumber.value
+    currentPageNumber.value < lastPageNumber.value &&
+    Object.keys(params).length === 0
   ) {
-    loadEstimates({ page: ++currentPageNumber.value })
+    loadEstimates(++currentPageNumber.value)
   }
 
   if (estimateFound) {
@@ -417,7 +436,7 @@ function addScrollListener() {
         ev.target.scrollHeight - 200
     ) {
       if (currentPageNumber.value < lastPageNumber.value) {
-        loadEstimates({ page: ++currentPageNumber.value }, true)
+        loadEstimates(++currentPageNumber.value, true)
       }
     }
   })
@@ -434,30 +453,8 @@ async function loadEstimate() {
 }
 
 async function onSearched() {
-  let data = ''
-  if (
-    searchData.searchText !== '' &&
-    searchData.searchText !== null &&
-    searchData.searchText !== undefined
-  ) {
-    data += `search=${searchData.searchText}&`
-  }
-
-  if (searchData.orderBy !== null && searchData.orderBy !== undefined) {
-    data += `orderBy=${searchData.orderBy}&`
-  }
-  if (
-    searchData.orderByField !== null &&
-    searchData.orderByField !== undefined
-  ) {
-    data += `orderByField=${searchData.orderByField}`
-  }
-  isSearching.value = true
-  let response = await estimateStore.searchEstimate(data)
-  isSearching.value = false
-  if (response.data) {
-    estimateList.value = response.data.data
-  }
+  estimateList.value = []
+  loadEstimates()
 }
 
 function sortData() {
diff --git a/resources/scripts/admin/views/invoices/View.vue b/resources/scripts/admin/views/invoices/View.vue
index 8f64a302..9f819ea2 100644
--- a/resources/scripts/admin/views/invoices/View.vue
+++ b/resources/scripts/admin/views/invoices/View.vue
@@ -109,29 +109,52 @@ function hasActiveUrl(id) {
   return route.params.id == id
 }
 
-async function loadInvoices(params, fromScrollListener = false) {
+async function loadInvoices(pageNumber, fromScrollListener = false) {
   if (isLoading.value) {
     return
   }
 
+  let params = {}
+  if (
+    searchData.searchText !== '' &&
+    searchData.searchText !== null &&
+    searchData.searchText !== undefined
+  ) {
+    params.search = searchData.searchText
+  }
+
+  if (searchData.orderBy !== null && searchData.orderBy !== undefined) {
+    params.orderBy = searchData.orderBy
+  }
+
+  if (
+    searchData.orderByField !== null &&
+    searchData.orderByField !== undefined
+  ) {
+    params.orderByField = searchData.orderByField
+  }
+
   isLoading.value = true
-  let response = await invoiceStore.fetchInvoices(params)
+  let response = await invoiceStore.fetchInvoices({
+    page: pageNumber,
+    ...params,
+  })
   isLoading.value = false
 
   invoiceList.value = invoiceList.value ? invoiceList.value : []
-
   invoiceList.value = [...invoiceList.value, ...response.data.data]
 
-  currentPageNumber.value = params && params.page ? params.page : 1
+  currentPageNumber.value = pageNumber ? pageNumber : 1
   lastPageNumber.value = response.data.meta.last_page
   let invoiceFound = invoiceList.value.find((inv) => inv.id == route.params.id)
 
   if (
     fromScrollListener == false &&
     !invoiceFound &&
-    currentPageNumber.value < lastPageNumber.value
+    currentPageNumber.value < lastPageNumber.value &&
+    Object.keys(params).length === 0
   ) {
-    loadInvoices({ page: ++currentPageNumber.value })
+    loadInvoices(++currentPageNumber.value)
   }
 
   if (invoiceFound) {
@@ -160,7 +183,7 @@ function addScrollListener() {
         ev.target.scrollHeight - 200
     ) {
       if (currentPageNumber.value < lastPageNumber.value) {
-        loadInvoices({ page: ++currentPageNumber.value }, true)
+        loadInvoices(++currentPageNumber.value, true)
       }
     }
   })
@@ -174,29 +197,8 @@ async function loadInvoice() {
 }
 
 async function onSearched() {
-  let params = {}
-  if (
-    searchData.searchText !== '' &&
-    searchData.searchText !== null &&
-    searchData.searchText !== undefined
-  ) {
-    params.search = searchData.searchText
-  }
-
-  if (searchData.orderBy !== null && searchData.orderBy !== undefined) {
-    params.orderBy = searchData.orderBy
-  }
-
-  if (
-    searchData.orderByField !== null &&
-    searchData.orderByField !== undefined
-  ) {
-    params.orderByField = searchData.orderByField
-  }
-
   invoiceList.value = []
-
-  loadInvoices(params)
+  loadInvoices()
 }
 
 function sortData() {
diff --git a/resources/scripts/admin/views/payments/View.vue b/resources/scripts/admin/views/payments/View.vue
index 2a73616c..0b08827e 100644
--- a/resources/scripts/admin/views/payments/View.vue
+++ b/resources/scripts/admin/views/payments/View.vue
@@ -222,14 +222,11 @@
             </div>
           </router-link>
         </div>
-        <div
-          v-if="isLoading || isSearching"
-          class="flex justify-center p-4 items-center"
-        >
+        <div v-if="isLoading" class="flex justify-center p-4 items-center">
           <LoadingIcon class="h-6 m-1 animate-spin text-primary-400" />
         </div>
         <p
-          v-if="!paymentList?.length && !isLoading && !isSearching"
+          v-if="!paymentList?.length && !isLoading"
           class="flex justify-center px-4 mt-5 text-sm text-gray-600"
         >
           {{ $t('payments.no_matching_payments') }}
@@ -279,7 +276,6 @@ let searchData = reactive({
   searchText: null,
 })
 
-let isSearching = ref(false)
 let isLoading = ref(false)
 let isFetching = ref(false)
 
@@ -340,20 +336,42 @@ function hasAbilities() {
 
 const dialogStore = useDialogStore()
 
-async function loadPayments(params, fromScrollListener = false) {
+async function loadPayments(pageNumber, fromScrollListener = false) {
   if (isLoading.value) {
     return
   }
 
+  let params = {}
+  if (
+    searchData.searchText !== '' &&
+    searchData.searchText !== null &&
+    searchData.searchText !== undefined
+  ) {
+    params.search = searchData.searchText
+  }
+
+  if (searchData.orderBy !== null && searchData.orderBy !== undefined) {
+    params.orderBy = searchData.orderBy
+  }
+
+  if (
+    searchData.orderByField !== null &&
+    searchData.orderByField !== undefined
+  ) {
+    params.orderByField = searchData.orderByField
+  }
+
   isLoading.value = true
-  let response = await paymentStore.fetchPayments(params)
+  let response = await paymentStore.fetchPayments({
+    page: pageNumber,
+    ...params,
+  })
   isLoading.value = false
 
   paymentList.value = paymentList.value ? paymentList.value : []
-
   paymentList.value = [...paymentList.value, ...response.data.data]
 
-  currentPageNumber.value = params ? params.page : 1
+  currentPageNumber.value = pageNumber ? pageNumber : 1
   lastPageNumber.value = response.data.meta.last_page
   let paymentFound = paymentList.value.find(
     (paym) => paym.id == route.params.id
@@ -362,9 +380,10 @@ async function loadPayments(params, fromScrollListener = false) {
   if (
     fromScrollListener == false &&
     !paymentFound &&
-    currentPageNumber.value < lastPageNumber.value
+    currentPageNumber.value < lastPageNumber.value &&
+    Object.keys(params).length === 0
   ) {
-    loadPayments({ page: ++currentPageNumber.value })
+    loadPayments(++currentPageNumber.value)
   }
 
   if (paymentFound) {
@@ -407,45 +426,15 @@ function addScrollListener() {
         ev.target.scrollHeight - 200
     ) {
       if (currentPageNumber.value < lastPageNumber.value) {
-        loadPayments({ page: ++currentPageNumber.value }, true)
+        loadPayments(++currentPageNumber.value, true)
       }
     }
   })
 }
 
 async function onSearch() {
-  let data = {}
-
-  if (
-    searchData.searchText !== '' &&
-    searchData.searchText !== null &&
-    searchData.searchText !== undefined
-  ) {
-    data.search = searchData.searchText
-  }
-
-  if (searchData.orderBy !== null && searchData.orderBy !== undefined) {
-    data.orderBy = searchData.orderBy
-  }
-
-  if (
-    searchData.orderByField !== null &&
-    searchData.orderByField !== undefined
-  ) {
-    data.orderByField = searchData.orderByField
-  }
-
-  isSearching.value = true
-  try {
-    let response = await paymentStore.searchPayment(data)
-    isSearching.value = false
-
-    if (response.data.data) {
-      paymentList.value = response.data.data
-    }
-  } catch (error) {
-    isSearching.value = false
-  }
+  paymentList.value = []
+  loadPayments()
 }
 
 function sortData() {
diff --git a/resources/scripts/admin/views/recurring-invoices/partials/RecurringInvoiceViewSidebar.vue b/resources/scripts/admin/views/recurring-invoices/partials/RecurringInvoiceViewSidebar.vue
index 6fa60762..42445324 100644
--- a/resources/scripts/admin/views/recurring-invoices/partials/RecurringInvoiceViewSidebar.vue
+++ b/resources/scripts/admin/views/recurring-invoices/partials/RecurringInvoiceViewSidebar.vue
@@ -12,7 +12,6 @@ const recurringInvoiceStore = useRecurringInvoiceStore()
 
 const { t } = useI18n()
 const route = useRoute()
-const isSearching = ref(false)
 const isLoading = ref(false)
 
 const invoiceList = ref(null)
@@ -37,29 +36,52 @@ function hasActiveUrl(id) {
   return route.params.id == id
 }
 
-async function loadRecurringInvoices(params, fromScrollListener = false) {
+async function loadRecurringInvoices(pageNumber, fromScrollListener = false) {
   if (isLoading.value) {
     return
   }
 
+  let params = {}
+  if (
+    searchData.searchText !== '' &&
+    searchData.searchText !== null &&
+    searchData.searchText !== undefined
+  ) {
+    params.search = searchData.searchText
+  }
+
+  if (searchData.orderBy !== null && searchData.orderBy !== undefined) {
+    params.orderBy = searchData.orderBy
+  }
+
+  if (
+    searchData.orderByField !== null &&
+    searchData.orderByField !== undefined
+  ) {
+    params.orderByField = searchData.orderByField
+  }
+
   isLoading.value = true
-  let response = await recurringInvoiceStore.fetchRecurringInvoices(params)
+  let response = await recurringInvoiceStore.fetchRecurringInvoices({
+    page: pageNumber,
+    ...params,
+  })
   isLoading.value = false
 
   invoiceList.value = invoiceList.value ? invoiceList.value : []
-
   invoiceList.value = [...invoiceList.value, ...response.data.data]
 
-  currentPageNumber.value = params ? params.page : 1
+  currentPageNumber.value = pageNumber ? pageNumber : 1
   lastPageNumber.value = response.data.meta.last_page
   let invoiceFound = invoiceList.value.find((inv) => inv.id == route.params.id)
 
   if (
     fromScrollListener == false &&
     !invoiceFound &&
-    currentPageNumber.value < lastPageNumber.value
+    currentPageNumber.value < lastPageNumber.value &&
+    Object.keys(params).length === 0
   ) {
-    loadRecurringInvoices({ page: ++currentPageNumber.value })
+    loadRecurringInvoices(++currentPageNumber.value)
   }
 
   if (invoiceFound) {
@@ -88,37 +110,15 @@ function addScrollListener() {
         ev.target.scrollHeight - 200
     ) {
       if (currentPageNumber.value < lastPageNumber.value) {
-        loadRecurringInvoices({ page: ++currentPageNumber.value }, true)
+        loadRecurringInvoices(++currentPageNumber.value, true)
       }
     }
   })
 }
 
 async function onSearched() {
-  let data = ''
-  if (
-    searchData.searchText !== '' &&
-    searchData.searchText !== null &&
-    searchData.searchText !== undefined
-  ) {
-    data += `search=${searchData.searchText}&`
-  }
-
-  if (searchData.orderBy !== null && searchData.orderBy !== undefined) {
-    data += `orderBy=${searchData.orderBy}&`
-  }
-  if (
-    searchData.orderByField !== null &&
-    searchData.orderByField !== undefined
-  ) {
-    data += `orderByField=${searchData.orderByField}`
-  }
-  isSearching.value = true
-  let response = await recurringInvoiceStore.searchRecurringInvoice(data)
-  isSearching.value = false
-  if (response.data) {
-    invoiceList.value = response.data.data
-  }
+  invoiceList.value = []
+  loadRecurringInvoices()
 }
 
 function sortData() {
@@ -327,14 +327,11 @@ onSearched = debounce(onSearched, 500)
           </div>
         </router-link>
       </div>
-      <div
-        v-if="isLoading || isSearching"
-        class="flex justify-center p-4 items-center"
-      >
+      <div v-if="isLoading" class="flex justify-center p-4 items-center">
         <LoadingIcon class="h-6 m-1 animate-spin text-primary-400" />
       </div>
       <p
-        v-if="!invoiceList?.length && !isLoading && !isSearching"
+        v-if="!invoiceList?.length && !isLoading"
         class="flex justify-center px-4 mt-5 text-sm text-gray-600"
       >
         {{ $t('invoices.no_matching_invoices') }}