408 lines
10 KiB
Vue
408 lines
10 KiB
Vue
<script setup>
|
|
const searchQuery = ref('')
|
|
const selectedStatus = ref()
|
|
const selectedRows = ref([])
|
|
|
|
// Data table options
|
|
const itemsPerPage = ref(10)
|
|
const page = ref(1)
|
|
const sortBy = ref()
|
|
const orderBy = ref()
|
|
|
|
const updateOptions = options => {
|
|
page.value = options.page
|
|
sortBy.value = options.sortBy[0]?.key
|
|
orderBy.value = options.sortBy[0]?.order
|
|
}
|
|
|
|
// 👉 headers
|
|
const headers = [
|
|
{
|
|
title: '#',
|
|
key: 'id',
|
|
},
|
|
{
|
|
title: 'Trending',
|
|
key: 'trending',
|
|
sortable: false,
|
|
},
|
|
{
|
|
title: 'Client',
|
|
key: 'client',
|
|
},
|
|
{
|
|
title: 'Total',
|
|
key: 'total',
|
|
},
|
|
{
|
|
title: 'Issued Date',
|
|
key: 'date',
|
|
},
|
|
{
|
|
title: 'Balance',
|
|
key: 'balance',
|
|
},
|
|
{
|
|
title: 'Action',
|
|
key: 'actions',
|
|
sortable: false,
|
|
},
|
|
]
|
|
|
|
const {
|
|
data: invoiceData,
|
|
execute: fetchInvoices,
|
|
} = await useApi(createUrl('/apps/invoice', {
|
|
query: {
|
|
q: searchQuery,
|
|
status: selectedStatus,
|
|
itemsPerPage,
|
|
page,
|
|
sortBy,
|
|
orderBy,
|
|
},
|
|
}))
|
|
|
|
const invoices = computed(() => invoiceData.value.invoices)
|
|
const totalInvoices = computed(() => invoiceData.value.totalInvoices)
|
|
|
|
// 👉 Invoice balance variant resolver
|
|
const resolveInvoiceBalanceVariant = (balance, total) => {
|
|
if (balance === total)
|
|
return {
|
|
status: 'Unpaid',
|
|
chip: { color: 'error' },
|
|
}
|
|
if (balance === 0)
|
|
return {
|
|
status: 'Paid',
|
|
chip: { color: 'success' },
|
|
}
|
|
|
|
return {
|
|
status: balance,
|
|
chip: { variant: 'text' },
|
|
}
|
|
}
|
|
|
|
const resolveInvoiceStatusVariantAndIcon = status => {
|
|
if (status === 'Partial Payment')
|
|
return {
|
|
variant: 'warning',
|
|
icon: 'ri-line-chart-line',
|
|
}
|
|
if (status === 'Paid')
|
|
return {
|
|
variant: 'success',
|
|
icon: 'ri-check-line',
|
|
}
|
|
if (status === 'Downloaded')
|
|
return {
|
|
variant: 'info',
|
|
icon: 'ri-arrow-down-line',
|
|
}
|
|
if (status === 'Draft')
|
|
return {
|
|
variant: 'secondary',
|
|
icon: 'ri-save-line',
|
|
}
|
|
if (status === 'Sent')
|
|
return {
|
|
variant: 'primary',
|
|
icon: 'ri-mail-line',
|
|
}
|
|
if (status === 'Past Due')
|
|
return {
|
|
variant: 'error',
|
|
icon: 'ri-error-warning-line',
|
|
}
|
|
|
|
return {
|
|
variant: 'secondary',
|
|
icon: 'ri-close-line',
|
|
}
|
|
}
|
|
|
|
const computedMoreList = computed(() => {
|
|
return paramId => [
|
|
{
|
|
title: 'Download',
|
|
value: 'download',
|
|
prependIcon: 'ri-download-line',
|
|
},
|
|
{
|
|
title: 'Edit',
|
|
value: 'edit',
|
|
prependIcon: 'ri-pencil-line',
|
|
to: {
|
|
name: 'apps-invoice-edit-id',
|
|
params: { id: paramId },
|
|
},
|
|
},
|
|
{
|
|
title: 'Duplicate',
|
|
value: 'duplicate',
|
|
prependIcon: 'ri-stack-line',
|
|
},
|
|
]
|
|
})
|
|
|
|
const deleteInvoice = async id => {
|
|
await $api(`/apps/invoice/${ id }`, { method: 'DELETE' })
|
|
fetchInvoices()
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<section v-if="invoices">
|
|
<!-- 👉 Invoice Filters -->
|
|
|
|
<VCard id="invoice-list">
|
|
<VCardText class="d-flex align-center flex-wrap gap-4">
|
|
<!-- 👉 Actions -->
|
|
<div class="me-3">
|
|
<!-- 👉 Create invoice -->
|
|
<VBtn
|
|
prepend-icon="ri-add-line"
|
|
:to="{ name: 'apps-invoice-add' }"
|
|
>
|
|
Create invoice
|
|
</VBtn>
|
|
</div>
|
|
|
|
<VSpacer />
|
|
|
|
<div class="d-flex align-center flex-wrap gap-4">
|
|
<!-- 👉 Search -->
|
|
<div class="invoice-list-search">
|
|
<VTextField
|
|
v-model="searchQuery"
|
|
density="compact"
|
|
placeholder="Search Invoice"
|
|
/>
|
|
</div>
|
|
|
|
<!-- 👉 Filter Invoice -->
|
|
|
|
<VSelect
|
|
v-model="selectedStatus"
|
|
density="compact"
|
|
placeholder="Select Status"
|
|
clearable
|
|
clear-icon="ri-close-line"
|
|
:items="['Downloaded', 'Draft', 'Sent', 'Paid', 'Partial Payment', 'Past Due']"
|
|
style="inline-size: 12rem;"
|
|
/>
|
|
</div>
|
|
</VCardText>
|
|
|
|
<!-- SECTION Datatable -->
|
|
<VDataTableServer
|
|
v-model="selectedRows"
|
|
v-model:items-per-page="itemsPerPage"
|
|
v-model:page="page"
|
|
show-select
|
|
:items-length="totalInvoices"
|
|
:headers="headers"
|
|
:items="invoices"
|
|
item-value="id"
|
|
class="text-no-wrap billing-history-table"
|
|
@update:options="updateOptions"
|
|
>
|
|
<!-- id -->
|
|
<template #item.id="{ item }">
|
|
<RouterLink :to="{ name: 'apps-invoice-preview-id', params: { id: item.id } }">
|
|
#{{ item.id }}
|
|
</RouterLink>
|
|
</template>
|
|
|
|
<!-- trending -->
|
|
<template #item.trending="{ item }">
|
|
<VTooltip>
|
|
<template #activator="{ props }">
|
|
<VAvatar
|
|
:size="28"
|
|
v-bind="props"
|
|
:color="resolveInvoiceStatusVariantAndIcon(item.invoiceStatus).variant"
|
|
variant="tonal"
|
|
>
|
|
<VIcon
|
|
:size="16"
|
|
:icon="resolveInvoiceStatusVariantAndIcon(item.invoiceStatus).icon"
|
|
/>
|
|
</VAvatar>
|
|
</template>
|
|
<p class="mb-0">
|
|
{{ item.invoiceStatus }}
|
|
</p>
|
|
<p class="mb-0">
|
|
Balance: {{ item.balance }}
|
|
</p>
|
|
<p class="mb-0">
|
|
Due date: {{ item.dueDate }}
|
|
</p>
|
|
</VTooltip>
|
|
</template>
|
|
|
|
<!-- client -->
|
|
<template #item.client="{ item }">
|
|
<div class="d-flex align-center">
|
|
<VAvatar
|
|
size="34"
|
|
:color="!item.avatar.length ? resolveInvoiceStatusVariantAndIcon(item.invoiceStatus).variant : undefined"
|
|
:variant="!item.avatar.length ? 'tonal' : undefined"
|
|
class="me-3"
|
|
>
|
|
<VImg
|
|
v-if="item.avatar.length"
|
|
:src="item.avatar"
|
|
/>
|
|
<span v-else>{{ avatarText(item.client.name) }}</span>
|
|
</VAvatar>
|
|
<div class="d-flex flex-column">
|
|
<RouterLink
|
|
:to="{ name: 'pages-user-profile-tab', params: { tab: 'profile' } }"
|
|
class="client-title font-weight-medium mb-0"
|
|
>
|
|
{{ item.client.name }}
|
|
</RouterLink>
|
|
<div class="text-body-2">
|
|
{{ item.client.companyEmail }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<!-- Total -->
|
|
<template #item.total="{ item }">
|
|
${{ item.total }}
|
|
</template>
|
|
|
|
<!-- Issued Date -->
|
|
<template #item.date="{ item }">
|
|
{{ item.issuedDate }}
|
|
</template>
|
|
|
|
<!-- Balance -->
|
|
<template #item.balance="{ item }">
|
|
<VChip
|
|
v-if="typeof ((resolveInvoiceBalanceVariant(item.balance, item.total)).status) === 'string'"
|
|
:color="resolveInvoiceBalanceVariant(item.balance, item.total).chip.color"
|
|
size="small"
|
|
>
|
|
{{ (resolveInvoiceBalanceVariant(item.balance, item.total)).status }}
|
|
</VChip>
|
|
<div
|
|
v-else
|
|
class="text-body-1 text-high-emphasis"
|
|
>
|
|
{{ Number((resolveInvoiceBalanceVariant(item.balance, item.total)).status) > 0 ? `$${(resolveInvoiceBalanceVariant(item.balance, item.total)).status}` : `-$${Math.abs(Number((resolveInvoiceBalanceVariant(item.balance, item.total)).status))}` }}
|
|
</div>
|
|
</template>
|
|
|
|
<!-- Actions -->
|
|
<template #item.actions="{ item }">
|
|
<IconBtn
|
|
size="small"
|
|
icon="ri-delete-bin-7-line"
|
|
@click="deleteInvoice(item.id)"
|
|
/>
|
|
|
|
<IconBtn
|
|
:to="{ name: 'apps-invoice-preview-id', params: { id: item.id } }"
|
|
size="small"
|
|
>
|
|
<VIcon icon="ri-eye-line" />
|
|
</IconBtn>
|
|
|
|
<MoreBtn
|
|
:menu-list="computedMoreList(item.id)"
|
|
size="small"
|
|
item-props
|
|
/>
|
|
</template>
|
|
|
|
<!-- Pagination -->
|
|
<template #bottom>
|
|
<VDivider />
|
|
|
|
<div class="d-flex justify-end flex-wrap gap-x-6 px-2 py-1">
|
|
<div class="d-flex align-center gap-x-2 text-medium-emphasis text-base">
|
|
Rows Per Page:
|
|
<VSelect
|
|
v-model="itemsPerPage"
|
|
class="per-page-select"
|
|
variant="plain"
|
|
:items="[10, 20, 25, 50, 100]"
|
|
/>
|
|
</div>
|
|
|
|
<p class="d-flex align-center text-base text-high-emphasis me-2 mb-0">
|
|
{{ paginationMeta({ page, itemsPerPage }, totalInvoices) }}
|
|
</p>
|
|
|
|
<div class="d-flex gap-x-2 align-center me-2">
|
|
<VBtn
|
|
class="flip-in-rtl"
|
|
icon="ri-arrow-left-s-line"
|
|
variant="text"
|
|
density="comfortable"
|
|
color="high-emphasis"
|
|
:disabled="page <= 1"
|
|
@click="page <= 1 ? page = 1 : page--"
|
|
/>
|
|
|
|
<VBtn
|
|
class="flip-in-rtl"
|
|
icon="ri-arrow-right-s-line"
|
|
density="comfortable"
|
|
variant="text"
|
|
color="high-emphasis"
|
|
:disabled="page >= Math.ceil(totalInvoices / itemsPerPage)"
|
|
@click="page >= Math.ceil(totalInvoices / itemsPerPage) ? page = Math.ceil(totalInvoices / itemsPerPage) : page++ "
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</VDataTableServer>
|
|
<!-- !SECTION -->
|
|
</VCard>
|
|
</section>
|
|
</template>
|
|
|
|
<style lang="scss">
|
|
#invoice-list {
|
|
.invoice-list-actions {
|
|
inline-size: 8rem;
|
|
}
|
|
|
|
.invoice-list-search {
|
|
inline-size: 12rem;
|
|
}
|
|
}
|
|
|
|
.billing-history-table{
|
|
&.v-table--density-default{
|
|
.v-table__wrapper{
|
|
table{
|
|
tbody{
|
|
tr{
|
|
td{
|
|
block-size: 60px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<style lang="scss" scoped>
|
|
.client-title{
|
|
&:not(:hover){
|
|
color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity)) !important;
|
|
}
|
|
}
|
|
</style>
|