91 lines
3.1 KiB
Vue
91 lines
3.1 KiB
Vue
<script setup>
|
|
import { onMounted, onUnmounted, ref } from 'vue';
|
|
import { useI18n } from 'vue-i18n';
|
|
|
|
import { useStateStore } from 'stores/useStateStore';
|
|
import SalesClientTable from './SalesClientsTable.vue';
|
|
import SalesOrdersTable from './SalesOrdersTable.vue';
|
|
import SalesTicketsTable from './SalesTicketsTable.vue';
|
|
import VnSearchbar from 'components/ui/VnSearchbar.vue';
|
|
|
|
const { t } = useI18n();
|
|
const stateStore = useStateStore();
|
|
|
|
const expanded = ref(true);
|
|
|
|
onMounted(async () => {
|
|
stateStore.leftDrawer = false;
|
|
});
|
|
|
|
onUnmounted(() => (stateStore.leftDrawer = true));
|
|
</script>
|
|
|
|
<template>
|
|
<template v-if="stateStore.isHeaderMounted()">
|
|
<Teleport to="#searchbar">
|
|
<VnSearchbar
|
|
data-key="SalesMonitorTickets"
|
|
url="SalesMonitors/salesFilter"
|
|
:redirect="false"
|
|
:label="t('searchBar.label')"
|
|
:info="t('searchBar.info')"
|
|
/>
|
|
</Teleport>
|
|
</template>
|
|
<QPage class="column items-center q-pa-md">
|
|
<QCard class="full-width q-mb-lg">
|
|
<QExpansionItem v-model="expanded" dense :duration="150">
|
|
<template v-if="!expanded" #header>
|
|
<div class="row full-width">
|
|
<span class="flex col text-body1">
|
|
{{ t('salesMonitor.clientsOnWebsite') }}
|
|
</span>
|
|
<span class="flex col q-ml-xl text-body1">
|
|
{{ t('salesMonitor.recentOrderActions') }}
|
|
</span>
|
|
</div>
|
|
</template>
|
|
<template #default>
|
|
<div class="expansion-tables-container">
|
|
<QCardSection class="col">
|
|
<span class="flex col q-mb-sm text-body1">
|
|
{{ t('salesMonitor.clientsOnWebsite') }}
|
|
</span>
|
|
<SalesClientTable />
|
|
</QCardSection>
|
|
<QCardSection class="col">
|
|
<span class="flex col q-mb-sm text-body1">
|
|
{{ t('salesMonitor.recentOrderActions') }}
|
|
</span>
|
|
<SalesOrdersTable />
|
|
</QCardSection>
|
|
</div>
|
|
</template>
|
|
</QExpansionItem>
|
|
</QCard>
|
|
<QCard class="full-width">
|
|
<QItem class="justify-between">
|
|
<QItemLabel class="col slider-container">
|
|
<span class="text-body1"
|
|
>{{ t('salesMonitor.ticketsMonitor') }}
|
|
</span>
|
|
<QCardSection class="col" style="padding-inline: 0"
|
|
><SalesTicketsTable />
|
|
</QCardSection>
|
|
</QItemLabel>
|
|
</QItem>
|
|
</QCard>
|
|
</QPage>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.expansion-tables-container {
|
|
display: flex;
|
|
border-top: 1px solid $color-spacer;
|
|
|
|
@media (max-width: $breakpoint-md-max) {
|
|
flex-direction: column;
|
|
}
|
|
}
|
|
</style>
|