40 lines
990 B
Vue
40 lines
990 B
Vue
<template>
|
|
<Card v-if="invoice" :title="title">
|
|
<template #actions-left>
|
|
<Button route="/billing/invoices"> ← Back </Button>
|
|
</template>
|
|
<InvoiceUsageTable :invoice="invoice" @pg="pg = $event" />
|
|
</Card>
|
|
</template>
|
|
<script>
|
|
import InvoiceUsageTable from './InvoiceUsageTable.vue';
|
|
export default {
|
|
name: 'InvoiceUsageCard',
|
|
props: ['invoice'],
|
|
components: {
|
|
InvoiceUsageTable
|
|
},
|
|
data() {
|
|
return {
|
|
pg: null
|
|
};
|
|
},
|
|
computed: {
|
|
title() {
|
|
let pg = this.pg;
|
|
if (!pg) {
|
|
return '';
|
|
}
|
|
if (!pg.period_start || !pg.period_end) {
|
|
return `Invoice Details for ${this.invoice}`;
|
|
}
|
|
let periodStart = this.$date(pg.period_start);
|
|
let periodEnd = this.$date(pg.period_end);
|
|
let start = periodStart.toLocaleString({ month: 'long', day: 'numeric' });
|
|
let end = periodEnd.toLocaleString({ month: 'short', day: 'numeric' });
|
|
return `Invoice for ${start} - ${end} ${periodEnd.year}`;
|
|
}
|
|
}
|
|
};
|
|
</script>
|