fix: pdf loading

This commit is contained in:
Arman
2023-10-04 15:52:25 +02:00
parent 05d19f914b
commit d1546707bf
2 changed files with 42 additions and 40 deletions
+9 -1
View File
@@ -4,6 +4,7 @@
export let disabled = false;
export let icon: string = null;
export let event: string = null;
export let loading = false;
function track() {
if (!event) {
@@ -17,10 +18,17 @@
</script>
<li class="drop-list-item">
<button class="drop-button" on:click={track} on:click|preventDefault {disabled}>
<button
class="drop-button u-flex u-cross-center u-main-space-between"
on:click={track}
on:click|preventDefault
{disabled}>
<span class="text"><slot /></span>
{#if icon}
<span class={`icon-${icon}`} aria-hidden="true" />
{/if}
{#if loading}
<span class="loader is-small u-line-height-1-5" aria-hidden="true" />
{/if}
</button>
</li>
@@ -34,8 +34,6 @@
invoices: [],
total: 0
};
let downloadLink: string;
let viewLink: string;
const limit = 5;
@@ -43,23 +41,18 @@
request();
});
async function download() {
const response = await sdk.forConsole.billing.downloadInvoice(
async function fetchLinks() {
const view = await sdk.forConsole.billing.getInvoiceView(
$page.params.organization,
selectedInvoice
);
console.log(response);
const url = pdfToURL(response.message);
return url;
}
async function view() {
const response = await sdk.forConsole.billing.getInvoiceView(
const down = await sdk.forConsole.billing.downloadInvoice(
$page.params.organization,
selectedInvoice
);
const url = pdfToURL(response.message);
return url;
const viewURL = pdfToURL(view.message);
const downURL = pdfToURL(down.message);
return { viewURL, downURL };
}
function pdfToURL(pdf: ArrayBuffer) {
@@ -67,9 +60,9 @@
return URL.createObjectURL(blob);
}
function downloadInvoce() {
function downloadInvoce(url: string) {
const link = document.createElement('a');
link.href = downloadLink;
link.href = url;
link.download = `invoice-${selectedInvoice}.pdf`;
link.click();
URL.revokeObjectURL(link.href);
@@ -84,15 +77,6 @@
]);
}
$: if (selectedInvoice) {
download().then((res) => {
downloadLink = res.toString();
});
view().then((res) => {
viewLink = res.toString();
});
}
$: if (offset !== null) {
request();
}
@@ -151,21 +135,31 @@
<span class="icon-dots-horizontal" aria-hidden="true" />
</Button>
<svelte:fragment slot="list">
<DropListLink
icon="external-link"
external
href={viewLink}
on:click={() => (showDropdown[i] = !showDropdown[i])}>
View invoice
</DropListLink>
<DropListItem
icon="download"
on:click={() => {
downloadInvoce();
showDropdown[i] = !showDropdown[i];
}}>
Download PDF
</DropListItem>
{#await fetchLinks()}
<DropListItem loading disabled>
View invoice
</DropListItem>
<DropListItem loading disabled>
Download PDF
</DropListItem>
{:then { viewURL, downURL }}
<DropListLink
icon="external-link"
external
href={viewURL}
on:click={() =>
(showDropdown[i] = !showDropdown[i])}>
View invoice
</DropListLink>
<DropListItem
icon="download"
on:click={() => {
downloadInvoce(downURL);
showDropdown[i] = !showDropdown[i];
}}>
Download PDF
</DropListItem>
{/await}
</svelte:fragment>
</DropList>
</TableCell>