Server : Apache System : Linux server2.corals.io 4.18.0-348.2.1.el8_5.x86_64 #1 SMP Mon Nov 15 09:17:08 EST 2021 x86_64 User : corals ( 1002) PHP Version : 7.4.33 Disable Function : exec,passthru,shell_exec,system Directory :  /home/corals/ts.corals.io/frontend/pages/invoices/_invoiceid/

Upload File : current_dir [ Writeable ] document_root [ Writeable ]

<template>
  <div>
    <PageHeader :title="invoice.project_name ? invoice.code+' - '+ invoice.project_name :invoice.code"/>
    <b-breadcrumb :items="breadcrumbLinks"></b-breadcrumb>
    <b-tabs content-class="mt-3 ">
      <b-tab title="Details" active>
        <div class="d-flex justify-content-end">
          <button :disabled="showDownloadDetailsButtonSpinner" class="btn btn-primary mb-2"
                  @click.prevent="downloadInvoiceDetails()">
            <b-spinner v-if="showDownloadDetailsButtonSpinner" small></b-spinner>
            Download Invoice
          </button>
        </div>
        <InvoiceDetails :invoice="invoice"/>
      </b-tab>
      <b-tab title="Entries" lazy>
        <div class="d-flex justify-content-end">
          <button :disabled="showDownloadEntriesButtonSpinner" class="btn btn-primary mb-2"
                  @click.prevent="downloadInvoiceAsPDF()">
            <b-spinner v-if="showDownloadEntriesButtonSpinner" small></b-spinner>
            Download Entries
          </button>
        </div>
        <TSEntriesTable :resource-url="entriesResource"/>
      </b-tab>
    </b-tabs>
  </div>
</template>

<script>
import EntriesIndex from "@/components/Entries/Index";
import PageHeader from "@/components/layout/PageHeader";
import TSEntriesTable from "@/components/Entries/TSEntriesTable";
import InvoiceDetails from "@/components/Clients/InvoiceDetails";

export default {
  name: "invoiceShow",
  components: {TSEntriesTable, EntriesIndex, PageHeader, InvoiceDetails},
  async asyncData({params, $axios, redirect}) {

    let invoice = await $axios.get(`/timesheet/invoices/${params.invoiceid}`)
      .then(({data}) => {
        return data.data;
      }).catch((error) => {
        return redirect('/');
      });

    return {
      invoice
    }
  },
  data() {
    return {
      showDownloadEntriesButtonSpinner: false,
      showDownloadDetailsButtonSpinner: false,
    }
  },
  methods: {
    downloadInvoiceDetails(invoice) {
      let url = `/timesheet/invoices/${this.$route.params.invoiceid}}/print-invoice-details`
      this.showDownloadDetailsButtonSpinner = true;
      this.$axios.get(url, {responseType: 'blob'}).then(({data: response}) => {
        let fileURL = window.URL.createObjectURL(new Blob([response]));
        let fileLink = document.createElement('a');
        fileLink.href = fileURL;
        fileLink.setAttribute('download', `${this.invoice.code}-details.pdf`);
        document.body.appendChild(fileLink);
        fileLink.click();
        this.showDownloadDetailsButtonSpinner = false;
      });
    },
    downloadInvoiceAsPDF() {
      let url = `/timesheet/invoices/${this.$route.params.invoiceid}/entries?download=1`
      this.showDownloadEntriesButtonSpinner = true;
      this.$axios.get(url, {responseType: 'blob'}).then(({data: response}) => {
        let fileURL = window.URL.createObjectURL(new Blob([response]));
        let fileLink = document.createElement('a');
        fileLink.href = fileURL;
        fileLink.setAttribute('download', `${this.invoice.code}-${this.invoice.invoice_date}-entries.pdf`);
        document.body.appendChild(fileLink);
        fileLink.click();
        this.showDownloadEntriesButtonSpinner = false;
      });
    }
  },
  computed: {
    entriesResource() {
      return `/timesheet/invoices/${this.$route.params.invoiceid}/entries`
    },
    breadcrumbLinks() {
      return [
        {
          text: 'Clients',
          to: '/clients'
        },
        {
          text: this.invoice.client,
          to: `/clients/${this.invoice.client_id}`
        },
        {
          text: 'Invoices',
          to: `/clients/${this.invoice.client_id}?tab=invoices`
        },
        {
          text: this.invoice.code,
          active: true
        },

      ]
    }
  }
}
</script>

<style scoped>

</style>