add scroll to load invoices and fixed limited category and customer issue in payment and expense

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/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>

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() {
+async function loadInvoices(params, isScroll=false) {
-  isLoading.value = true
+  if(isScroll) {
-  await invoiceStore.fetchInvoices()
+    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(() => {
+  page_no.value = params ? params.page : 1
-    scrollToInvoice()
+  last_page_no.value = invoice.data.meta.last_page
-  }, 500)
+  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>

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/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
 }