%PDF-
%PDF-
Mini Shell
Mini Shell
<template>
<div class="page-wrapper">
<PageHeader classObject='bg-blue'>
<img class="relative z-20 mb-8"
src="~assets/images/logo-white-small.svg" alt="Takeaseat" />
<h1 class="relative z-20 text-5xl lg:text-7xl font-bold m-0">Money Manager</h1>
<div class="page-header-bottom">
<MoneyManagerNav />
</div>
</PageHeader>
<div v-if="payments"
class="pt-8">
<div class="max-w-5xl mx-auto w-full px-6 lg:px-0">
<div class="grid grid-cols-1 sm:grid-cols-2 mb-6">
<h2 class="text-4xl font-bold text-center sm:text-left">Statements</h2>
<div class="text-center sm:text-right relative">
<button type="button"
class="text-blue-light text-2xl font-bold mt-2"
@click.prevent="toggleDropdown">Download PDF</button>
<div @mouseleave="() => { downloadOpen && toggleDropdown() }" :class="downloadOpen ? 'scale-100 opacity-100' : 'scale-90 opacity-0'"
class="text-center absolute z-20 w-full sm:w-96 right-0 bg-white rounded-3xl top-10 shadow-lg p-6 transition duration-100 transform origin-top-right scale-100 opacity-100">
<div class="relative mb-3">
<h1>Download statement for</h1>
</div>
<div class="relative mb-3">
<select v-model="downloadTimeframe" class="form-select">
<option value="today">Today</option>
<option value="7">Last 7 Days</option>
<option value="30">Last 30 Days</option>
</select>
</div>
<div v-if="downloadError"
class="block px-4 py-3 mb-2 rounded-xl bg-red text-white text-sm leading-4">
An error occurred, please try again.
</div>
<div class="relative mb-3">
<button type="button"
:disabled="downloadLoading"
class="btn btn-primary m-auto btn-small rounded-full shadow inline-block"
@click.prevent="downloadPdf">
<svg v-if="downloadLoading" class="inline-block animate-spin -ml-1 mr-3 h-5 w-5 text-current" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>
<span class="inline-block">Download</span>
</button>
</div>
</div>
</div>
</div>
<div class="mb-6"
v-for="(payment_date, key) in payments"
v-bind:key="key">
<div class="grid grid-cols-2 gap-4 mb-5">
<h3 class="text-2xl font-bold">{{ key }}</h3>
</div>
<Payment
v-for="(payment, key) in payment_date"
v-bind:key="key"
:payment="payment" />
</div>
</div>
</div>
<div v-else
class="py-20 w-full bg-gray text-center">
<span class="font-bold text-3xl">You have no payments yet</span>
</div>
</div>
</template>
<script>
export default {
middleware: ['auth', 'therapist'],
head () {
return {
titleTemplate: 'Statements | %s',
}
},
data() {
return {
downloadLoading: false,
downloadOpen: false,
downloadTimeframe: 'today',
downloadError: false,
}
},
computed: {
payments() {
return this.$store.state.therapist.money.payments
}
},
methods: {
toggleDropdown() {
this.downloadOpen = !this.downloadOpen;
this.downloadError = false;
},
async downloadPdf() {
try {
this.downloadError = false;
this.downloadLoading = true;
const response = await this.$axios.post(
'/therapist/money/statement',
{
timeframe: this.downloadTimeframe
},
{
responseType: 'blob',
headers: {
'Accept': 'application/pdf',
},
}
);
const blob = new Blob([response.data], { type: 'application/pdf' });
const url = window.URL.createObjectURL(blob);
// Creating a link in the DOM lets us "force" a download
const link = document.createElement('a');
link.href = url;
// Generate a filename
const utc = new Date().toJSON().slice(0,10).replace(/-/g,'/');
const filename = `${this.$auth.user.data.full_name} statement ${utc}`;
link.setAttribute('download', filename.toLowerCase().replace(/ /g, '-').replace(/[^\w-]+/g,''));
link.click();
this.downloadOpen = false;
} catch (error) {
this.downloadOpen = true;
this.downloadError = true;
}
this.downloadLoading = false;
},
},
async asyncData ({ store }) {
await store.dispatch('therapist/money/getPayments')
}
}
</script>
Zerion Mini Shell 1.0