Merge branch 'fix_all_customer_load' into 'master'

Fix all customer load

See merge request mohit.panjvani/crater-web!1435

resources/scripts/admin/stores/category.js

@@ -17,6 +17,7 @@ export const useCategoryStore = (useWindow = false) => {
         name: '',
         description: '',
       },
+      editCategory: null
     }),
 
     getters: {

resources/scripts/admin/stores/customer.js

@@ -25,6 +25,7 @@ export const useCustomerStore = (useWindow = false) => {
       currentCustomer: {
         ...customerStub(),
       },
+      editCustomer: null
     }),
 
     getters: {

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="[
@@ -145,7 +145,7 @@
                 truncate
               "
             />
-            
+
             <BaseText
               v-if="customer.contact_name"
               :text="customer.contact_name"
@@ -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"
           class="h-6 m-1 animate-spin text-primary-400"
         />
       </div>
       <p
-        v-if="!customerStore.customers.length && !isFetching"
+        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,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
-
+  let response = await customerStore.fetchCustomers({
-  await customerStore.fetchCustomers({ limit: 'all' })
+    page: pageNumber,
-
+    ...params,
+    limit: 15
+  })
   isFetching.value = false
 
-  setTimeout(() => {
+  customerList.value = customerList.value ? customerList.value : []
-    scrollToCustomer()
+  customerList.value = [...customerList.value, ...response.data.data]
-  }, 500)
+
+  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() {
+function addScrollListener() {
-  let data = {}
+  customerListSection.value.addEventListener('scroll', (ev) => {
-  if (
+    if (
-    searchData.searchText !== '' &&
+      ev.target.scrollTop > 0 &&
-    searchData.searchText !== null &&
+      ev.target.scrollTop + ev.target.clientHeight >
-    searchData.searchText !== undefined
+        ev.target.scrollHeight - 200
-  ) {
+    ) {
-    data.display_name = searchData.searchText
+      if (currentPageNumber.value < lastPageNumber.value) {
-  }
+        loadCustomers(++currentPageNumber.value, true)
-
+      }
-  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
+}
-  }
+
+async function onSearch() {
+  customerList.value = []
+  loadCustomers()
 }
 
 function sortData() {

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,14 +246,11 @@
             </div>
           </router-link>
         </div>
-        <div class="flex justify-center p-4 items-center">
+        <div v-if="isLoading" class="flex justify-center p-4 items-center">
-          <LoadingIcon
+          <LoadingIcon class="h-6 m-1 animate-spin text-primary-400" />
-            v-if="isLoading"
-            class="h-6 m-1 animate-spin text-primary-400"
-          />
         </div>
         <p
-          v-if="!estimateStore.estimates.length && !isLoading"
+          v-if="!estimateList?.length && !isLoading"
           class="flex justify-center px-4 mt-5 text-sm text-gray-600"
         >
           {{ $t('estimates.no_matching_estimates') }}
@@ -283,49 +278,40 @@
 
 <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 +360,63 @@ function hasActiveUrl(id) {
   return route.params.id == id
 }
 
-async function loadEstimates() {
+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
-  await estimateStore.fetchEstimates(route.params.id)
+  let response = await estimateStore.fetchEstimates({
+    page: pageNumber,
+    ...params,
+  })
   isLoading.value = false
 
-  setTimeout(() => {
+  estimateList.value = estimateList.value ? estimateList.value : []
-    scrollToEstimate()
+  estimateList.value = [...estimateList.value, ...response.data.data]
-  }, 500)
+
+  currentPageNumber.value = pageNumber ? pageNumber : 1
+  lastPageNumber.value = response.data.meta.last_page
+  let estimateFound = estimateList.value.find(
+    (est) => est.id == route.params.id
+  )
+
+  if (
+    fromScrollListener == false &&
+    !estimateFound &&
+    currentPageNumber.value < lastPageNumber.value &&
+    Object.keys(params).length === 0
+  ) {
+    loadEstimates(++currentPageNumber.value)
+  }
+
+  if (estimateFound) {
+    setTimeout(() => {
+      if (fromScrollListener == false) {
+        scrollToEstimate()
+      }
+    }, 500)
+  }
 }
 
 function scrollToEstimate() {
@@ -389,9 +424,24 @@ function scrollToEstimate() {
   if (el) {
     el.scrollIntoView({ behavior: 'smooth' })
     el.classList.add('shake')
+    addScrollListener()
   }
 }
 
+function addScrollListener() {
+  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(++currentPageNumber.value, true)
+      }
+    }
+  })
+}
+
 async function loadEstimate() {
   isLoadingEstimate.value = true
   let response = await estimateStore.fetchEstimate(route.params.id)
@@ -403,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) {
-    estimateStore.estimates = response.data.data
-  }
 }
 
 function sortData() {

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 {
@@ -415,11 +417,25 @@ function onCurrencyChange(v) {
 
 async function searchCategory(search) {
   let res = await categoryStore.fetchCategories({ search })
+  if(res.data.data.length>0 && categoryStore.editCategory) {
+    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)
+    }
+  }
   return res.data.data
 }
 
 async function searchCustomer(search) {
   let res = await customerStore.fetchCustomers({ search })
+  if(res.data.data.length>0 && customerStore.editCustomer) {
+    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)
+    }
+  }
   return res.data.data
 }
 
@@ -435,10 +451,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
   }
@@ -477,4 +504,10 @@ async function submitForm() {
     return
   }
 }
+
+onBeforeUnmount(() => {
+  expenseStore.resetCurrentExpenseData()
+  customerStore.editCustomer = null
+  categoryStore.editCategory = null
+})
 </script>

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

@@ -1,46 +1,37 @@
 <script setup>
 import { useI18n } from 'vue-i18n'
-import { computed, reactive, ref, watch, inject } from 'vue'
+import { computed, reactive, ref, watch } from 'vue'
-import InvoiceDropdown from '@/scripts/admin/components/dropdowns/InvoiceIndexDropdown.vue'
+import { useRoute } from 'vue-router'
-import { useRoute, useRouter } 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 currentPageNumber = ref(1)
+const lastPageNumber = ref(1)
+const invoiceListSection = ref(null)
+
 const searchData = reactive({
   orderBy: null,
   orderByField: null,
@@ -118,14 +109,61 @@ function hasActiveUrl(id) {
   return route.params.id == id
 }
 
-async function loadInvoices() {
+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
-  await invoiceStore.fetchInvoices()
+  let response = await invoiceStore.fetchInvoices({
+    page: pageNumber,
+    ...params,
+  })
   isLoading.value = false
 
-  setTimeout(() => {
+  invoiceList.value = invoiceList.value ? invoiceList.value : []
-    scrollToInvoice()
+  invoiceList.value = [...invoiceList.value, ...response.data.data]
-  }, 500)
+
+  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 &&
+    Object.keys(params).length === 0
+  ) {
+    loadInvoices(++currentPageNumber.value)
+  }
+
+  if (invoiceFound) {
+    setTimeout(() => {
+      if (fromScrollListener == false) {
+        scrollToInvoice()
+      }
+    }, 500)
+  }
 }
 
 function scrollToInvoice() {
@@ -133,9 +171,24 @@ function scrollToInvoice() {
   if (el) {
     el.scrollIntoView({ behavior: 'smooth' })
     el.classList.add('shake')
+    addScrollListener()
   }
 }
 
+function addScrollListener() {
+  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) {
+        loadInvoices(++currentPageNumber.value, true)
+      }
+    }
+  })
+}
+
 async function loadInvoice() {
   let response = await invoiceStore.fetchInvoice(route.params.id)
   if (response.data) {
@@ -144,30 +197,8 @@ async function loadInvoice() {
 }
 
 async function onSearched() {
-  let data = ''
+  invoiceList.value = []
-  if (
+  loadInvoices()
-    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 invoiceStore.searchInvoice(data)
-  isSearching.value = false
-  if (response.data) {
-    invoiceStore.invoices = response.data.data
-  }
 }
 
 function sortData() {
@@ -211,7 +242,6 @@ onSearched = debounce(onSearched, 500)
             invoiceData.status === 'DRAFT' &&
             userStore.hasAbilities(abilities.SEND_INVOICE)
           "
-          :disabled="isSendingEmail"
           variant="primary"
           class="text-sm"
           @click="onSendInvoice"
@@ -254,7 +284,7 @@ onSearched = debounce(onSearched, 500)
         hidden
         h-full
         pt-16
-        pb-4
+        pb-[6.4rem]
         ml-56
         bg-white
         xl:ml-64
@@ -359,18 +389,17 @@ onSearched = debounce(onSearched, 500)
       </div>
 
       <div
-        v-if="invoiceStore && invoiceStore.invoices"
+        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 invoiceStore.invoices" :key="index">
+        <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="[
@@ -449,14 +478,11 @@ onSearched = debounce(onSearched, 500)
             </div>
           </router-link>
         </div>
-        <div class="flex justify-center p-4 items-center">
+        <div v-if="isLoading" class="flex justify-center p-4 items-center">
-          <LoadingIcon
+          <LoadingIcon class="h-6 m-1 animate-spin text-primary-400" />
-            v-if="isLoading"
-            class="h-6 m-1 animate-spin text-primary-400"
-          />
         </div>
         <p
-          v-if="!invoiceStore.invoices.length && !isLoading"
+          v-if="!invoiceList?.length && !isLoading"
           class="flex justify-center px-4 mt-5 text-sm text-gray-600"
         >
           {{ $t('invoices.no_matching_invoices') }}

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() {

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"
+        ref="paymentListSection"
-        class="
+        class="h-full overflow-y-scroll border-l border-gray-200 border-solid"
-          h-full
-          pb-32
-          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,14 +222,11 @@
             </div>
           </router-link>
         </div>
-        <div class="flex justify-center p-4 items-center">
+        <div v-if="isLoading" class="flex justify-center p-4 items-center">
-          <LoadingIcon
+          <LoadingIcon class="h-6 m-1 animate-spin text-primary-400" />
-            v-if="isLoading"
-            class="h-6 m-1 animate-spin text-primary-400"
-          />
         </div>
         <p
-          v-if="!paymentStore?.payments?.length && !isLoading"
+          v-if="!paymentList?.length && !isLoading"
           class="flex justify-center px-4 mt-5 text-sm text-gray-600"
         >
           {{ $t('payments.no_matching_payments') }}
@@ -260,44 +251,43 @@
 <script setup>
 import { useI18n } from 'vue-i18n'
 import { debounce } from 'lodash'
-import { ref, reactive, computed, inject, onMounted, watch } from 'vue'
+import { ref, reactive, computed, watch } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
+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,
   searchText: null,
 })
 
-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 +336,63 @@ function hasAbilities() {
 
 const dialogStore = useDialogStore()
 
-async function loadPayments() {
+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
-  await paymentStore.fetchPayments({ limit: 'all' })
+  let response = await paymentStore.fetchPayments({
+    page: pageNumber,
+    ...params,
+  })
   isLoading.value = false
 
-  setTimeout(() => {
+  paymentList.value = paymentList.value ? paymentList.value : []
-    scrollToPayment()
+  paymentList.value = [...paymentList.value, ...response.data.data]
-  }, 500)
+
+  currentPageNumber.value = pageNumber ? pageNumber : 1
+  lastPageNumber.value = response.data.meta.last_page
+  let paymentFound = paymentList.value.find(
+    (paym) => paym.id == route.params.id
+  )
+
+  if (
+    fromScrollListener == false &&
+    !paymentFound &&
+    currentPageNumber.value < lastPageNumber.value &&
+    Object.keys(params).length === 0
+  ) {
+    loadPayments(++currentPageNumber.value)
+  }
+
+  if (paymentFound) {
+    setTimeout(() => {
+      if (fromScrollListener == false) {
+        scrollToPayment()
+      }
+    }, 500)
+  }
 }
 
 async function loadPayment() {
@@ -375,42 +414,27 @@ function scrollToPayment() {
   if (el) {
     el.scrollIntoView({ behavior: 'smooth' })
     el.classList.add('shake')
+    addScrollListener()
   }
 }
 
-async function onSearch() {
+function addScrollListener() {
-  let data = {}
+  paymentListSection.value.addEventListener('scroll', (ev) => {
-
+    if (
-  if (
+      ev.target.scrollTop > 0 &&
-    searchData.searchText !== '' &&
+      ev.target.scrollTop + ev.target.clientHeight >
-    searchData.searchText !== null &&
+        ev.target.scrollHeight - 200
-    searchData.searchText !== undefined
+    ) {
-  ) {
+      if (currentPageNumber.value < lastPageNumber.value) {
-    data.search = searchData.searchText
+        loadPayments(++currentPageNumber.value, true)
-  }
+      }
-
-  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) {
-      paymentStore.payments = response.data.data
     }
-  } catch (error) {
+  })
-    isSearching.value = false
+}
-  }
+
+async function onSearch() {
+  paymentList.value = []
+  loadPayments()
 }
 
 function sortData() {

resources/scripts/admin/views/recurring-invoices/partials/RecurringInvoiceViewSidebar.vue

@@ -1,38 +1,24 @@
 <script setup>
 import { useI18n } from 'vue-i18n'
-import { computed, reactive, ref, watch, inject } from 'vue'
+import { computed, reactive, ref } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
+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 +36,61 @@ function hasActiveUrl(id) {
   return route.params.id == id
 }
 
-async function loadRecurringInvoices() {
+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
-  await recurringInvoiceStore.fetchRecurringInvoices()
+  let response = await recurringInvoiceStore.fetchRecurringInvoices({
+    page: pageNumber,
+    ...params,
+  })
   isLoading.value = false
 
-  setTimeout(() => {
+  invoiceList.value = invoiceList.value ? invoiceList.value : []
-    scrollToRecurringInvoice()
+  invoiceList.value = [...invoiceList.value, ...response.data.data]
-  }, 500)
+
+  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 &&
+    Object.keys(params).length === 0
+  ) {
+    loadRecurringInvoices(++currentPageNumber.value)
+  }
+
+  if (invoiceFound) {
+    setTimeout(() => {
+      if (fromScrollListener == false) {
+        scrollToRecurringInvoice()
+      }
+    }, 500)
+  }
 }
 
 function scrollToRecurringInvoice() {
@@ -65,34 +98,27 @@ function scrollToRecurringInvoice() {
   if (el) {
     el.scrollIntoView({ behavior: 'smooth' })
     el.classList.add('shake')
+    addScrollListener()
   }
 }
 
-async function onSearched() {
+function addScrollListener() {
-  let data = ''
+  invoiceListSection.value.addEventListener('scroll', (ev) => {
-  if (
+    if (
-    searchData.searchText !== '' &&
+      ev.target.scrollTop > 0 &&
-    searchData.searchText !== null &&
+      ev.target.scrollTop + ev.target.clientHeight >
-    searchData.searchText !== undefined
+        ev.target.scrollHeight - 200
-  ) {
+    ) {
-    data += `search=${searchData.searchText}&`
+      if (currentPageNumber.value < lastPageNumber.value) {
-  }
+        loadRecurringInvoices(++currentPageNumber.value, true)
+      }
+    }
+  })
+}
 
-  if (searchData.orderBy !== null && searchData.orderBy !== undefined) {
+async function onSearched() {
-    data += `orderBy=${searchData.orderBy}&`
+  invoiceList.value = []
-  }
+  loadRecurringInvoices()
-  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) {
-    recurringInvoiceStore.recurringInvoices = response.data.data
-  }
 }
 
 function sortData() {
@@ -120,7 +146,7 @@ onSearched = debounce(onSearched, 500)
       hidden
       h-full
       pt-16
-      pb-4
+      pb-[6.4rem]
       ml-56
       bg-white
       xl:ml-64
@@ -211,21 +237,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
+      <div v-for="(invoice, index) in invoiceList" :key="index">
-        v-for="(invoice, index) in recurringInvoiceStore.recurringInvoices"
-        :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 +275,7 @@ onSearched = debounce(onSearched, 500)
                 truncate
               "
             />
-            
+
             <div
               class="
                 mt-1
@@ -305,14 +327,11 @@ onSearched = debounce(onSearched, 500)
           </div>
         </router-link>
       </div>
-      <div class="flex justify-center p-4 items-center">
+      <div v-if="isLoading" class="flex justify-center p-4 items-center">
-        <LoadingIcon
+        <LoadingIcon class="h-6 m-1 animate-spin text-primary-400" />
-          v-if="isLoading"
-          class="h-6 m-1 animate-spin text-primary-400"
-        />
       </div>
       <p
-        v-if="!recurringInvoiceStore.recurringInvoices.length && !isLoading"
+        v-if="!invoiceList?.length && !isLoading"
         class="flex justify-center px-4 mt-5 text-sm text-gray-600"
       >
         {{ $t('invoices.no_matching_invoices') }}

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 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)
+    }
+  }
 
   return res.data.data
 }