mirror of
https://github.com/crater-invoice/crater.git
synced 2025-10-27 11:41:09 -04:00
refactor and apply scroll to load data in estimates, invoices and payments
This commit is contained in:
asift798
@ -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,11 +246,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="!estimateStore.estimates.length && !isLoading"
|
||||
@ -283,49 +278,41 @@
|
||||
|
||||
<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 +361,40 @@ function hasActiveUrl(id) {
|
||||
return route.params.id == id
|
||||
}
|
||||
|
||||
async function loadEstimates() {
|
||||
async function loadEstimates(params, isScroll = false) {
|
||||
if (isLoading.value) {
|
||||
return
|
||||
}
|
||||
|
||||
isLoading.value = true
|
||||
await estimateStore.fetchEstimates(route.params.id)
|
||||
let response = await estimateStore.fetchEstimates(params)
|
||||
isLoading.value = false
|
||||
|
||||
setTimeout(() => {
|
||||
scrollToEstimate()
|
||||
}, 500)
|
||||
estimateList.value = estimateList.value ? estimateList.value : []
|
||||
|
||||
estimateList.value = [...estimateList.value, ...response.data.data]
|
||||
|
||||
currentPageNumber.value = params ? params.page : 1
|
||||
lastPageNumber.value = response.data.meta.last_page
|
||||
let isEstimateExist = estimateList.value.find(
|
||||
(est) => est.id == route.params.id
|
||||
)
|
||||
|
||||
if (
|
||||
isScroll == false &&
|
||||
!isEstimateExist &&
|
||||
currentPageNumber.value < lastPageNumber.value
|
||||
) {
|
||||
loadEstimates({ page: ++currentPageNumber.value })
|
||||
}
|
||||
|
||||
if (isEstimateExist) {
|
||||
setTimeout(() => {
|
||||
if (isScroll == false) {
|
||||
scrollToEstimate()
|
||||
}
|
||||
}, 500)
|
||||
}
|
||||
}
|
||||
|
||||
function scrollToEstimate() {
|
||||
@ -389,9 +402,24 @@ function scrollToEstimate() {
|
||||
if (el) {
|
||||
el.scrollIntoView({ behavior: 'smooth' })
|
||||
el.classList.add('shake')
|
||||
addScrollListner()
|
||||
}
|
||||
}
|
||||
|
||||
function addScrollListner() {
|
||||
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({ page: ++currentPageNumber.value }, true)
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
async function loadEstimate() {
|
||||
isLoadingEstimate.value = true
|
||||
let response = await estimateStore.fetchEstimate(route.params.id)
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<script setup>
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { computed, reactive, ref, watch, inject } from 'vue'
|
||||
import { computed, reactive, ref, watch } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { debounce } from 'lodash'
|
||||
|
||||
@ -27,9 +27,11 @@ const route = useRoute()
|
||||
const isMarkAsSent = 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,
|
||||
@ -154,11 +156,11 @@ function scrollToInvoice() {
|
||||
}
|
||||
|
||||
function addScrollListner() {
|
||||
let el = document.getElementById('scroll_load')
|
||||
el.addEventListener('scroll', (ev) => {
|
||||
invoiceListSection.value.addEventListener('scroll', (ev) => {
|
||||
if (
|
||||
ev.target.scrollTop > 0 &&
|
||||
ev.target.scrollTop == ev.target.scrollHeight - ev.target.clientHeight
|
||||
ev.target.scrollTop + ev.target.clientHeight >
|
||||
ev.target.scrollHeight - 200
|
||||
) {
|
||||
if (currentPageNumber.value < lastPageNumber.value) {
|
||||
loadInvoices({ page: ++currentPageNumber.value }, true)
|
||||
@ -284,7 +286,7 @@ onSearched = debounce(onSearched, 500)
|
||||
hidden
|
||||
h-full
|
||||
pt-16
|
||||
pb-4
|
||||
pb-[6.4rem]
|
||||
ml-56
|
||||
bg-white
|
||||
xl:ml-64
|
||||
@ -389,10 +391,9 @@ onSearched = debounce(onSearched, 500)
|
||||
</div>
|
||||
|
||||
<div
|
||||
id="scroll_load"
|
||||
ref="invoiceListSection"
|
||||
class="
|
||||
h-full
|
||||
pb-32
|
||||
overflow-y-scroll
|
||||
border-l border-gray-200 border-solid
|
||||
base-scroll
|
||||
@ -479,11 +480,8 @@ onSearched = debounce(onSearched, 500)
|
||||
</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="!invoiceStore.invoices.length && !isLoading"
|
||||
|
||||
@ -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 = {}
|
||||
|
||||
|
||||
@ -1,38 +1,25 @@
|
||||
<script setup>
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { computed, reactive, ref, watch, inject } from 'vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import { computed, reactive, ref } from 'vue'
|
||||
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 +37,40 @@ function hasActiveUrl(id) {
|
||||
return route.params.id == id
|
||||
}
|
||||
|
||||
async function loadRecurringInvoices() {
|
||||
async function loadRecurringInvoices(params, isScroll = false) {
|
||||
if (isLoading.value) {
|
||||
return
|
||||
}
|
||||
|
||||
isLoading.value = true
|
||||
await recurringInvoiceStore.fetchRecurringInvoices()
|
||||
let response = await recurringInvoiceStore.fetchRecurringInvoices(params)
|
||||
isLoading.value = false
|
||||
|
||||
setTimeout(() => {
|
||||
scrollToRecurringInvoice()
|
||||
}, 500)
|
||||
invoiceList.value = invoiceList.value ? invoiceList.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
|
||||
) {
|
||||
loadRecurringInvoices({ page: ++currentPageNumber.value })
|
||||
}
|
||||
|
||||
if (isInvoiceExist) {
|
||||
setTimeout(() => {
|
||||
if (isScroll == false) {
|
||||
scrollToRecurringInvoice()
|
||||
}
|
||||
}, 500)
|
||||
}
|
||||
}
|
||||
|
||||
function scrollToRecurringInvoice() {
|
||||
@ -65,9 +78,24 @@ function scrollToRecurringInvoice() {
|
||||
if (el) {
|
||||
el.scrollIntoView({ behavior: 'smooth' })
|
||||
el.classList.add('shake')
|
||||
addScrollListner()
|
||||
}
|
||||
}
|
||||
|
||||
function addScrollListner() {
|
||||
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) {
|
||||
loadRecurringInvoices({ page: ++currentPageNumber.value }, true)
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
async function onSearched() {
|
||||
let data = ''
|
||||
if (
|
||||
@ -120,7 +148,7 @@ onSearched = debounce(onSearched, 500)
|
||||
hidden
|
||||
h-full
|
||||
pt-16
|
||||
pb-4
|
||||
pb-[6.4rem]
|
||||
ml-56
|
||||
bg-white
|
||||
xl:ml-64
|
||||
@ -211,21 +239,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
|
||||
v-for="(invoice, index) in recurringInvoiceStore.recurringInvoices"
|
||||
:key="index"
|
||||
>
|
||||
<div v-for="(invoice, index) in invoiceList" :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 +277,7 @@ onSearched = debounce(onSearched, 500)
|
||||
truncate
|
||||
"
|
||||
/>
|
||||
|
||||
|
||||
<div
|
||||
class="
|
||||
mt-1
|
||||
@ -305,11 +329,8 @@ onSearched = debounce(onSearched, 500)
|
||||
</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="!recurringInvoiceStore.recurringInvoices.length && !isLoading"
|
||||
|
||||
Reference in New Issue
Block a user