refactor and apply scroll to load data in estimates, invoices and payments

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 = {}