68 lines
2.0 KiB
Vue
68 lines
2.0 KiB
Vue
<script setup>
|
|
import { useInvoices } from "~/components/orders/composables/useInvoices";
|
|
import OrderHighlights from "~/components/orders/OrderHighlights.vue";
|
|
import OrderPipeline from "~/components/orders/OrderPipeline.vue";
|
|
import OrdersTable from "~/components/orders/OrdersTable.vue";
|
|
|
|
const store = useStore();
|
|
|
|
const viewModes = [
|
|
{ name: "list", icon: "material-symbols:format-list-bulleted-rounded" },
|
|
{ name: "grid", icon: "material-symbols:grid-view-outline-rounded" },
|
|
];
|
|
const viewMode = ref("list");
|
|
|
|
const { fetchInvoices } = useInvoices();
|
|
onMounted(fetchInvoices);
|
|
</script>
|
|
<template>
|
|
<div>
|
|
<Teleport
|
|
defer
|
|
to="#header-right-slot"
|
|
v-if="store.tabinfo.tab.code === 'orders'"
|
|
>
|
|
<div class="is-flex is-gap-2 is-justify-content-flex-end is-align-items-center">
|
|
<div class="tabs is-toggle m-0">
|
|
<ul class="is-flex-grow-0 ml-auto">
|
|
<li
|
|
v-for="mode in viewModes"
|
|
:key="mode.name"
|
|
:class="[mode.name === viewMode && 'is-active']"
|
|
@click="viewMode = mode.name"
|
|
>
|
|
<a class="px-3 py-1">
|
|
<span class="icon m-0">
|
|
<Icon
|
|
:name="mode.icon"
|
|
:size="18"
|
|
/>
|
|
</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<button class="button fs-14 is-primary">
|
|
<span class="icon">
|
|
<Icon
|
|
:size="18"
|
|
name="material-symbols:add-rounded"
|
|
/>
|
|
</span>
|
|
<span>Tạo đơn hàng</span>
|
|
</button>
|
|
</div>
|
|
</Teleport>
|
|
<OrderHighlights />
|
|
<OrderPipeline />
|
|
<OrdersTable :viewMode="viewMode" />
|
|
</div>
|
|
</template>
|
|
<style scoped>
|
|
.tabs {
|
|
--bulma-tabs-toggle-link-active-background-color: var(--bulma-link-90);
|
|
--bulma-tabs-toggle-link-active-border-color: var(--bulma-link-90);
|
|
--bulma-tabs-toggle-link-active-color: var(--bulma-link-40);
|
|
}
|
|
</style>
|