Add download for orders

This commit is contained in:
marzban-dev
2026-04-23 19:56:12 +03:30
parent 00236c746b
commit 792eda4fd9
3 changed files with 91 additions and 33 deletions
@@ -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>