77 lines
2.6 KiB
Vue
77 lines
2.6 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';
|
|
|
|
const { t } = useI18n();
|
|
const stateStore = useStateStore();
|
|
|
|
const expanded = ref(true);
|
|
|
|
onMounted(async () => {
|
|
stateStore.rightDrawer = true;
|
|
});
|
|
|
|
onUnmounted(() => (stateStore.rightDrawer = false));
|
|
</script>
|
|
|
|
<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 q-mb-lg">
|
|
<QItem class="justify-between">
|
|
<QItemLabel class="slider-container">
|
|
<span class="text-body1"
|
|
>{{ t('salesMonitor.ticketsMonitor') }}
|
|
</span>
|
|
<QCardSection class="col"><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>
|