apply scroll to load data changes in customer and fixed search with scroll to load data issue in estimate, invoice, recurring invoice and payments

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: '',
+  orderBy: null,
-  orderByField: '',
+  orderByField: null,
-  searchText: '',
+  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,17 +225,65 @@ 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
-
+  let response = await customerStore.fetchCustomers({
-  await customerStore.fetchCustomers({ limit: 'all' })
+    page: pageNumber,
-
+    ...params,
+    limit: 15
+  })
   isFetching.value = false
 
+  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() {
   const el = document.getElementById(`customer-${route.params.id}`)
@@ -242,41 +291,27 @@ function scrollToCustomer() {
   if (el) {
     el.scrollIntoView({ behavior: 'smooth' })
     el.classList.add('shake')
+    addScrollListener()
   }
 }
 
+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)
+      }
+    }
+  })
+}
+
 async function onSearch() {
-  let data = {}
+  customerList.value = []
-  if (
+  loadCustomers()
-    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
-    }
-  } catch (error) {
-    isSearching.value = false
-  }
 }
 
 function sortData() {

resources/scripts/admin/views/estimates/View.vue

@@ -246,14 +246,11 @@
             </div>
           </router-link>
         </div>
-        <div
+        <div v-if="isLoading" class="flex justify-center p-4 items-center">
-          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="!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 = ''
+  estimateList.value = []
-  if (
+  loadEstimates()
-    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
-  }
 }
 
 function sortData() {

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()
-  loadInvoices(params)
 }
 
 function sortData() {

resources/scripts/admin/views/payments/View.vue

@@ -222,14 +222,11 @@
             </div>
           </router-link>
         </div>
-        <div
+        <div v-if="isLoading" class="flex justify-center p-4 items-center">
-          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="!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 = {}
+  paymentList.value = []
-
+  loadPayments()
-  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
-  }
 }
 
 function sortData() {

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 = ''
+  invoiceList.value = []
-  if (
+  loadRecurringInvoices()
-    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
-  }
 }
 
 function sortData() {
@@ -327,14 +327,11 @@ onSearched = debounce(onSearched, 500)
           </div>
         </router-link>
       </div>
-      <div
+      <div v-if="isLoading" class="flex justify-center p-4 items-center">
-        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="!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') }}