mirror of
https://github.com/crater-invoice/crater.git
synced 2025-10-27 11:41:09 -04:00
apply scroll to load data changes in customer and fixed search with scroll to load data issue in estimate, invoice, recurring invoice and payments
This commit is contained in:
asift798
@ -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="[
|
||||
@ -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 || isSearching"
|
||||
class="h-6 m-1 animate-spin text-primary-400"
|
||||
/>
|
||||
</div>
|
||||
<p
|
||||
v-if="!customerStore.customers.length && !isFetching && !isSearching"
|
||||
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: '',
|
||||
orderByField: '',
|
||||
searchText: '',
|
||||
orderBy: null,
|
||||
orderByField: null,
|
||||
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
|
||||
|
||||
await customerStore.fetchCustomers({ limit: 'all' })
|
||||
|
||||
let response = await customerStore.fetchCustomers({
|
||||
page: pageNumber,
|
||||
...params,
|
||||
limit: 15
|
||||
})
|
||||
isFetching.value = false
|
||||
|
||||
setTimeout(() => {
|
||||
scrollToCustomer()
|
||||
}, 500)
|
||||
customerList.value = customerList.value ? customerList.value : []
|
||||
customerList.value = [...customerList.value, ...response.data.data]
|
||||
|
||||
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() {
|
||||
let data = {}
|
||||
if (
|
||||
searchData.searchText !== '' &&
|
||||
searchData.searchText !== null &&
|
||||
searchData.searchText !== undefined
|
||||
) {
|
||||
data.display_name = 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
|
||||
|
||||
try {
|
||||
let response = await customerStore.fetchCustomers(data)
|
||||
isSearching.value = false
|
||||
if (response.data) {
|
||||
customerStore.customers = response.data.data
|
||||
function addScrollListener() {
|
||||
customerListSection.value.addEventListener('scroll', (ev) => {
|
||||
if (
|
||||
ev.target.scrollTop > 0 &&
|
||||
ev.target.scrollTop + ev.target.clientHeight >
|
||||
ev.target.scrollHeight - 200
|
||||
) {
|
||||
if (currentPageNumber.value < lastPageNumber.value) {
|
||||
loadCustomers(++currentPageNumber.value, true)
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
isSearching.value = false
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
async function onSearch() {
|
||||
customerList.value = []
|
||||
loadCustomers()
|
||||
}
|
||||
|
||||
function sortData() {
|
||||
|
||||
@ -246,14 +246,11 @@
|
||||
</div>
|
||||
</router-link>
|
||||
</div>
|
||||
<div
|
||||
v-if="isLoading || isSearching"
|
||||
class="flex justify-center p-4 items-center"
|
||||
>
|
||||
<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="!estimateList.length && !isLoading && !isSearching"
|
||||
v-if="!estimateList?.length && !isLoading"
|
||||
class="flex justify-center px-4 mt-5 text-sm text-gray-600"
|
||||
>
|
||||
{{ $t('estimates.no_matching_estimates') }}
|
||||
@ -307,7 +304,6 @@ const route = useRoute()
|
||||
const router = useRouter()
|
||||
|
||||
const isMarkAsSent = ref(false)
|
||||
const isSearching = ref(false)
|
||||
const isLoading = ref(false)
|
||||
const isLoadingEstimate = ref(false)
|
||||
|
||||
@ -364,20 +360,42 @@ function hasActiveUrl(id) {
|
||||
return route.params.id == id
|
||||
}
|
||||
|
||||
async function loadEstimates(params, fromScrollListener = false) {
|
||||
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
|
||||
let response = await estimateStore.fetchEstimates(params)
|
||||
let response = await estimateStore.fetchEstimates({
|
||||
page: pageNumber,
|
||||
...params,
|
||||
})
|
||||
isLoading.value = false
|
||||
|
||||
estimateList.value = estimateList.value ? estimateList.value : []
|
||||
|
||||
estimateList.value = [...estimateList.value, ...response.data.data]
|
||||
|
||||
currentPageNumber.value = params ? params.page : 1
|
||||
currentPageNumber.value = pageNumber ? pageNumber : 1
|
||||
lastPageNumber.value = response.data.meta.last_page
|
||||
let estimateFound = estimateList.value.find(
|
||||
(est) => est.id == route.params.id
|
||||
@ -386,9 +404,10 @@ async function loadEstimates(params, fromScrollListener = false) {
|
||||
if (
|
||||
fromScrollListener == false &&
|
||||
!estimateFound &&
|
||||
currentPageNumber.value < lastPageNumber.value
|
||||
currentPageNumber.value < lastPageNumber.value &&
|
||||
Object.keys(params).length === 0
|
||||
) {
|
||||
loadEstimates({ page: ++currentPageNumber.value })
|
||||
loadEstimates(++currentPageNumber.value)
|
||||
}
|
||||
|
||||
if (estimateFound) {
|
||||
@ -417,7 +436,7 @@ function addScrollListener() {
|
||||
ev.target.scrollHeight - 200
|
||||
) {
|
||||
if (currentPageNumber.value < lastPageNumber.value) {
|
||||
loadEstimates({ page: ++currentPageNumber.value }, true)
|
||||
loadEstimates(++currentPageNumber.value, true)
|
||||
}
|
||||
}
|
||||
})
|
||||
@ -434,30 +453,8 @@ async function loadEstimate() {
|
||||
}
|
||||
|
||||
async function onSearched() {
|
||||
let data = ''
|
||||
if (
|
||||
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) {
|
||||
estimateList.value = response.data.data
|
||||
}
|
||||
estimateList.value = []
|
||||
loadEstimates()
|
||||
}
|
||||
|
||||
function sortData() {
|
||||
|
||||
@ -109,29 +109,52 @@ function hasActiveUrl(id) {
|
||||
return route.params.id == id
|
||||
}
|
||||
|
||||
async function loadInvoices(params, fromScrollListener = false) {
|
||||
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
|
||||
let response = await invoiceStore.fetchInvoices(params)
|
||||
let response = await invoiceStore.fetchInvoices({
|
||||
page: pageNumber,
|
||||
...params,
|
||||
})
|
||||
isLoading.value = false
|
||||
|
||||
invoiceList.value = invoiceList.value ? invoiceList.value : []
|
||||
|
||||
invoiceList.value = [...invoiceList.value, ...response.data.data]
|
||||
|
||||
currentPageNumber.value = params && params.page ? params.page : 1
|
||||
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
|
||||
currentPageNumber.value < lastPageNumber.value &&
|
||||
Object.keys(params).length === 0
|
||||
) {
|
||||
loadInvoices({ page: ++currentPageNumber.value })
|
||||
loadInvoices(++currentPageNumber.value)
|
||||
}
|
||||
|
||||
if (invoiceFound) {
|
||||
@ -160,7 +183,7 @@ function addScrollListener() {
|
||||
ev.target.scrollHeight - 200
|
||||
) {
|
||||
if (currentPageNumber.value < lastPageNumber.value) {
|
||||
loadInvoices({ page: ++currentPageNumber.value }, true)
|
||||
loadInvoices(++currentPageNumber.value, true)
|
||||
}
|
||||
}
|
||||
})
|
||||
@ -174,29 +197,8 @@ async function loadInvoice() {
|
||||
}
|
||||
|
||||
async function onSearched() {
|
||||
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
|
||||
}
|
||||
|
||||
invoiceList.value = []
|
||||
|
||||
loadInvoices(params)
|
||||
loadInvoices()
|
||||
}
|
||||
|
||||
function sortData() {
|
||||
|
||||
@ -222,14 +222,11 @@
|
||||
</div>
|
||||
</router-link>
|
||||
</div>
|
||||
<div
|
||||
v-if="isLoading || isSearching"
|
||||
class="flex justify-center p-4 items-center"
|
||||
>
|
||||
<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="!paymentList?.length && !isLoading && !isSearching"
|
||||
v-if="!paymentList?.length && !isLoading"
|
||||
class="flex justify-center px-4 mt-5 text-sm text-gray-600"
|
||||
>
|
||||
{{ $t('payments.no_matching_payments') }}
|
||||
@ -279,7 +276,6 @@ let searchData = reactive({
|
||||
searchText: null,
|
||||
})
|
||||
|
||||
let isSearching = ref(false)
|
||||
let isLoading = ref(false)
|
||||
let isFetching = ref(false)
|
||||
|
||||
@ -340,20 +336,42 @@ function hasAbilities() {
|
||||
|
||||
const dialogStore = useDialogStore()
|
||||
|
||||
async function loadPayments(params, fromScrollListener = false) {
|
||||
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
|
||||
let response = await paymentStore.fetchPayments(params)
|
||||
let response = await paymentStore.fetchPayments({
|
||||
page: pageNumber,
|
||||
...params,
|
||||
})
|
||||
isLoading.value = false
|
||||
|
||||
paymentList.value = paymentList.value ? paymentList.value : []
|
||||
|
||||
paymentList.value = [...paymentList.value, ...response.data.data]
|
||||
|
||||
currentPageNumber.value = params ? params.page : 1
|
||||
currentPageNumber.value = pageNumber ? pageNumber : 1
|
||||
lastPageNumber.value = response.data.meta.last_page
|
||||
let paymentFound = paymentList.value.find(
|
||||
(paym) => paym.id == route.params.id
|
||||
@ -362,9 +380,10 @@ async function loadPayments(params, fromScrollListener = false) {
|
||||
if (
|
||||
fromScrollListener == false &&
|
||||
!paymentFound &&
|
||||
currentPageNumber.value < lastPageNumber.value
|
||||
currentPageNumber.value < lastPageNumber.value &&
|
||||
Object.keys(params).length === 0
|
||||
) {
|
||||
loadPayments({ page: ++currentPageNumber.value })
|
||||
loadPayments(++currentPageNumber.value)
|
||||
}
|
||||
|
||||
if (paymentFound) {
|
||||
@ -407,45 +426,15 @@ function addScrollListener() {
|
||||
ev.target.scrollHeight - 200
|
||||
) {
|
||||
if (currentPageNumber.value < lastPageNumber.value) {
|
||||
loadPayments({ page: ++currentPageNumber.value }, true)
|
||||
loadPayments(++currentPageNumber.value, true)
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
async function onSearch() {
|
||||
let data = {}
|
||||
|
||||
if (
|
||||
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
|
||||
try {
|
||||
let response = await paymentStore.searchPayment(data)
|
||||
isSearching.value = false
|
||||
|
||||
if (response.data.data) {
|
||||
paymentList.value = response.data.data
|
||||
}
|
||||
} catch (error) {
|
||||
isSearching.value = false
|
||||
}
|
||||
paymentList.value = []
|
||||
loadPayments()
|
||||
}
|
||||
|
||||
function sortData() {
|
||||
|
||||
@ -12,7 +12,6 @@ const recurringInvoiceStore = useRecurringInvoiceStore()
|
||||
|
||||
const { t } = useI18n()
|
||||
const route = useRoute()
|
||||
const isSearching = ref(false)
|
||||
const isLoading = ref(false)
|
||||
|
||||
const invoiceList = ref(null)
|
||||
@ -37,29 +36,52 @@ function hasActiveUrl(id) {
|
||||
return route.params.id == id
|
||||
}
|
||||
|
||||
async function loadRecurringInvoices(params, fromScrollListener = false) {
|
||||
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
|
||||
let response = await recurringInvoiceStore.fetchRecurringInvoices(params)
|
||||
let response = await recurringInvoiceStore.fetchRecurringInvoices({
|
||||
page: pageNumber,
|
||||
...params,
|
||||
})
|
||||
isLoading.value = false
|
||||
|
||||
invoiceList.value = invoiceList.value ? invoiceList.value : []
|
||||
|
||||
invoiceList.value = [...invoiceList.value, ...response.data.data]
|
||||
|
||||
currentPageNumber.value = params ? params.page : 1
|
||||
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
|
||||
currentPageNumber.value < lastPageNumber.value &&
|
||||
Object.keys(params).length === 0
|
||||
) {
|
||||
loadRecurringInvoices({ page: ++currentPageNumber.value })
|
||||
loadRecurringInvoices(++currentPageNumber.value)
|
||||
}
|
||||
|
||||
if (invoiceFound) {
|
||||
@ -88,37 +110,15 @@ function addScrollListener() {
|
||||
ev.target.scrollHeight - 200
|
||||
) {
|
||||
if (currentPageNumber.value < lastPageNumber.value) {
|
||||
loadRecurringInvoices({ page: ++currentPageNumber.value }, true)
|
||||
loadRecurringInvoices(++currentPageNumber.value, true)
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
async function onSearched() {
|
||||
let data = ''
|
||||
if (
|
||||
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 recurringInvoiceStore.searchRecurringInvoice(data)
|
||||
isSearching.value = false
|
||||
if (response.data) {
|
||||
invoiceList.value = response.data.data
|
||||
}
|
||||
invoiceList.value = []
|
||||
loadRecurringInvoices()
|
||||
}
|
||||
|
||||
function sortData() {
|
||||
@ -327,14 +327,11 @@ onSearched = debounce(onSearched, 500)
|
||||
</div>
|
||||
</router-link>
|
||||
</div>
|
||||
<div
|
||||
v-if="isLoading || isSearching"
|
||||
class="flex justify-center p-4 items-center"
|
||||
>
|
||||
<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="!invoiceList?.length && !isLoading && !isSearching"
|
||||
v-if="!invoiceList?.length && !isLoading"
|
||||
class="flex justify-center px-4 mt-5 text-sm text-gray-600"
|
||||
>
|
||||
{{ $t('invoices.no_matching_invoices') }}
|
||||
|
||||
Reference in New Issue
Block a user