135 lines
4.9 KiB
Vue
135 lines
4.9 KiB
Vue
<template>
|
|
<div>
|
|
<h3 class="m-0 mb-24">Orders</h3>
|
|
|
|
<div class="cms-table-scroll">
|
|
<el-table
|
|
v-loading="loading"
|
|
:data="orderList"
|
|
stripe
|
|
empty-text="No orders yet"
|
|
class="clickable-table"
|
|
@row-click="row => router.push({ name: ROUTE_NAMES.OrderDetail, params: { id: row.id } })"
|
|
>
|
|
<el-table-column label="Status" min-width="120">
|
|
<template #default="{ row }">
|
|
<el-tag :type="resolveOrderStatusTagType(row.status)" size="small">
|
|
{{ capitalizeFirstLetter(row.status) }}
|
|
</el-tag>
|
|
</template>
|
|
</el-table-column>
|
|
|
|
<el-table-column label="Checkout" width="300">
|
|
<template #default="{ row }">
|
|
<el-tag
|
|
v-if="row.checkoutPaymentLabel"
|
|
:type="resolveInvoiceStatusTagType(row.checkoutPaymentLabel)"
|
|
size="small"
|
|
>
|
|
{{ row.checkoutPaymentLabel }}
|
|
</el-tag>
|
|
<span v-else class="secondary-text">—</span>
|
|
</template>
|
|
</el-table-column>
|
|
|
|
<el-table-column label="Shipping" width="300">
|
|
<template #default="{ row }">
|
|
<el-tag
|
|
v-if="row.shippingPaymentLabel"
|
|
:type="resolveInvoiceStatusTagType(row.shippingPaymentLabel)"
|
|
size="small"
|
|
>
|
|
{{ row.shippingPaymentLabel }}
|
|
</el-tag>
|
|
<span v-else class="secondary-text">—</span>
|
|
</template>
|
|
</el-table-column>
|
|
|
|
<el-table-column label="Total" width="120">
|
|
<template #default="{ row }">
|
|
{{ formatFiatPrice(row.grandTotalFiat ?? row.totalFiat, row.fiatCurrency) }}
|
|
</template>
|
|
</el-table-column>
|
|
|
|
<el-table-column label="Items" width="80" align="center">
|
|
<template #default="{ row }">
|
|
{{ row.lineCount }}
|
|
</template>
|
|
</el-table-column>
|
|
|
|
<el-table-column label="Unread" width="120" align="center">
|
|
<template #default="{ row }">
|
|
<el-badge v-if="row.unreadMessageCount > 0" :value="row.unreadMessageCount" />
|
|
<span v-else class="secondary-text">—</span>
|
|
</template>
|
|
</el-table-column>
|
|
|
|
<el-table-column label="Created" width="180">
|
|
<template #default="{ row }">
|
|
{{ formatDate(row.createdAt) }}
|
|
</template>
|
|
</el-table-column>
|
|
|
|
<el-table-column width="100" fixed="right">
|
|
<template #default="{ row }">
|
|
<el-button
|
|
link
|
|
type="primary"
|
|
@click.stop="router.push({ name: ROUTE_NAMES.OrderDetail, params: { id: row.id } })"
|
|
>
|
|
Open
|
|
</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</div>
|
|
|
|
<cms-list-pagination v-model:page="page" v-model:limit="limit" :total="total" @change="loadOrders" />
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { onBeforeMount, ref } from 'vue';
|
|
import { useRouter } from 'vue-router';
|
|
import { storeToRefs } from 'pinia';
|
|
import { ROUTE_NAMES } from '@/consts/routeNames';
|
|
import { useOrdersStore } from '@/stores/orders';
|
|
import { capitalizeFirstLetter } from '@/utils/capitalizeFirstLetter';
|
|
import { formatDate } from '@/utils/formatDate';
|
|
import { formatFiatPrice } from '@/utils/formatFiatPrice';
|
|
import { resolveInvoiceStatusTagType } from '@/utils/order/resolveInvoiceStatusTagType';
|
|
import { resolveOrderStatusTagType } from '@/utils/order/resolveOrderStatusTagType';
|
|
|
|
const router = useRouter();
|
|
|
|
const ordersStore = useOrdersStore();
|
|
|
|
const { orderList } = storeToRefs(ordersStore);
|
|
|
|
const loading = ref(false);
|
|
const page = ref(1);
|
|
const limit = ref(20);
|
|
const total = ref(0);
|
|
|
|
onBeforeMount(() => {
|
|
loadOrders();
|
|
});
|
|
|
|
const loadOrders = async (): Promise<void> => {
|
|
loading.value = true;
|
|
|
|
try {
|
|
const data = await ordersStore.fetchList({
|
|
page: page.value,
|
|
limit: limit.value
|
|
});
|
|
|
|
total.value = data.total;
|
|
page.value = data.page;
|
|
limit.value = data.limit;
|
|
} finally {
|
|
loading.value = false;
|
|
}
|
|
};
|
|
</script>
|