minor refactor

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>