Add download for orders
This commit is contained in:
@@ -1,4 +1,8 @@
|
||||
<script setup lang="ts">
|
||||
// imports
|
||||
|
||||
import useDownloadInvoice from "~/composables/api/orders/useDownloadInvoice";
|
||||
|
||||
// types
|
||||
|
||||
type Props = {
|
||||
@@ -11,12 +15,13 @@ const props = defineProps<Props>();
|
||||
|
||||
const { data } = toRefs(props);
|
||||
|
||||
// states
|
||||
|
||||
const { downloadFn, downloadIsLoading } = useDownloadInvoice(String(data.value.id));
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<tr
|
||||
class="odd:bg-white even:bg-gray-50 last:border-none border-b border-slate-200"
|
||||
>
|
||||
<tr class="odd:bg-white even:bg-gray-50 last:border-none border-b border-slate-200">
|
||||
<td
|
||||
scope="row"
|
||||
class="w-3/12 px-6 py-6 text-xs lg:text-sm font-medium whitespace-pre shrink-0"
|
||||
@@ -24,9 +29,7 @@ const { data } = toRefs(props);
|
||||
>
|
||||
{{ data.order_id ? `${data.order_id}#` : "--" }}
|
||||
</td>
|
||||
<td
|
||||
class="w-3/12 px-6 py-6 text-xs lg:text-sm font-medium whitespace-pre shrink-0"
|
||||
>
|
||||
<td class="w-3/12 px-6 py-6 text-xs lg:text-sm font-medium whitespace-pre shrink-0">
|
||||
{{ data.created_at ?? "--" }}
|
||||
</td>
|
||||
<td class="w-2/12 px-6 py-6 text-xs lg:text-sm whitespace-pre shrink-0">
|
||||
@@ -39,40 +42,35 @@ const { data } = toRefs(props);
|
||||
<div
|
||||
class="w-max rounded-full py-1.5 px-3 text-xs border"
|
||||
:class="{
|
||||
'text-warning-600 bg-warning-100 border-warning-600': [
|
||||
'ADMIN_PENDING',
|
||||
'PENDING',
|
||||
].includes(data.status),
|
||||
'text-success-600 bg-success-100 border-success-600': [
|
||||
'POSTED',
|
||||
'RECEIVED',
|
||||
].includes(data.status),
|
||||
'text-danger-600 bg-danger-100 border-danger-600': [
|
||||
'CANCELED',
|
||||
'REFUND',
|
||||
].includes(data.status),
|
||||
'text-warning-600 bg-warning-100 border-warning-600': ['ADMIN_PENDING', 'PENDING'].includes(
|
||||
data.status,
|
||||
),
|
||||
'text-success-600 bg-success-100 border-success-600': ['POSTED', 'RECEIVED'].includes(data.status),
|
||||
'text-danger-600 bg-danger-100 border-danger-600': ['CANCELED', 'REFUND'].includes(data.status),
|
||||
}"
|
||||
>
|
||||
{{ data.verbose_status ? data.verbose_status : "--" }}
|
||||
</div>
|
||||
</td>
|
||||
<td class="w-1/12 px-6 py-6 shrink-0">
|
||||
<NuxtLink
|
||||
:to="{
|
||||
name: 'profile-purchases-and-orders-id',
|
||||
params: { id: data.id },
|
||||
}"
|
||||
<button
|
||||
@click="!downloadIsLoading ? downloadFn() : undefined"
|
||||
:disabled="downloadIsLoading"
|
||||
class="size-9 lg:size-10 flex-center border border-slate-200 rounded-md"
|
||||
>
|
||||
<button
|
||||
class="size-9 lg:size-10 flex-center border border-slate-200 rounded-md"
|
||||
>
|
||||
<Icon
|
||||
name="ci:eye-open"
|
||||
class="**:stroke-black"
|
||||
size="20"
|
||||
/>
|
||||
</button>
|
||||
</NuxtLink>
|
||||
<Icon
|
||||
v-if="downloadIsLoading"
|
||||
name="svg-spinners:3-dots-fade"
|
||||
class="**:stroke-black"
|
||||
size="20"
|
||||
/>
|
||||
<Icon
|
||||
v-else
|
||||
name="ci:download"
|
||||
class="**:stroke-black"
|
||||
size="20"
|
||||
/>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user