forked from verdnatura/salix-front
chore: refs #7353 use Vue component nomenclature
This commit is contained in:
parent
79c96199f3
commit
b0c27027c0
|
@ -1,26 +1,9 @@
|
||||||
<script setup>
|
<script setup>
|
||||||
import { useI18n } from 'vue-i18n';
|
import SalesClientTable from './MonitorSaleClients.vue';
|
||||||
import { useStateStore } from 'stores/useStateStore';
|
import SalesOrdersTable from './MonitorSaleOrders.vue';
|
||||||
import SalesClientTable from './SalesClientsTable.vue';
|
|
||||||
import SalesOrdersTable from './SalesOrdersTable.vue';
|
|
||||||
import VnSearchbar from 'components/ui/VnSearchbar.vue';
|
|
||||||
import VnRow from 'src/components/ui/VnRow.vue';
|
import VnRow from 'src/components/ui/VnRow.vue';
|
||||||
|
|
||||||
const { t } = useI18n();
|
|
||||||
const stateStore = useStateStore();
|
|
||||||
</script>
|
</script>
|
||||||
<template>
|
<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>
|
|
||||||
<VnRow
|
<VnRow
|
||||||
class="q-pa-md"
|
class="q-pa-md"
|
||||||
:style="{ 'flex-direction': $q.screen.lt.lg ? 'column' : 'row', gap: '0px' }"
|
:style="{ 'flex-direction': $q.screen.lt.lg ? 'column' : 'row', gap: '0px' }"
|
||||||
|
@ -28,14 +11,14 @@ const stateStore = useStateStore();
|
||||||
<div style="flex: 0.25">
|
<div style="flex: 0.25">
|
||||||
<span
|
<span
|
||||||
class="q-ml-md text-body1"
|
class="q-ml-md text-body1"
|
||||||
v-text="t('salesMonitor.clientsOnWebsite')"
|
v-text="$t('salesMonitor.clientsOnWebsite')"
|
||||||
/>
|
/>
|
||||||
<SalesClientTable />
|
<SalesClientTable />
|
||||||
</div>
|
</div>
|
||||||
<div style="flex: 0.75">
|
<div style="flex: 0.75">
|
||||||
<span
|
<span
|
||||||
class="q-ml-md text-body1"
|
class="q-ml-md text-body1"
|
||||||
v-text="t('salesMonitor.recentOrderActions')"
|
v-text="$t('salesMonitor.recentOrderActions')"
|
||||||
/>
|
/>
|
||||||
<SalesOrdersTable />
|
<SalesOrdersTable />
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -112,7 +112,6 @@ const columns = computed(() => [
|
||||||
url="SalesMonitors/clientsFilter"
|
url="SalesMonitors/clientsFilter"
|
||||||
search-url="SalesMonitorClients"
|
search-url="SalesMonitorClients"
|
||||||
:order="['dated DESC', 'hour DESC']"
|
:order="['dated DESC', 'hour DESC']"
|
||||||
:limit="6"
|
|
||||||
:expr-builder="exprBuilder"
|
:expr-builder="exprBuilder"
|
||||||
:filter="filter"
|
:filter="filter"
|
||||||
:offset="50"
|
:offset="50"
|
||||||
|
@ -122,7 +121,6 @@ const columns = computed(() => [
|
||||||
default-mode="table"
|
default-mode="table"
|
||||||
:disable-option="{ card: true }"
|
:disable-option="{ card: true }"
|
||||||
dense
|
dense
|
||||||
style="max-height: 380px; overflow-y: scroll"
|
|
||||||
>
|
>
|
||||||
<template #top-left>
|
<template #top-left>
|
||||||
<VnRow>
|
<VnRow>
|
|
@ -111,7 +111,6 @@ const openTab = (id) =>
|
||||||
url="SalesMonitors/ordersFilter"
|
url="SalesMonitors/ordersFilter"
|
||||||
search-url="SalesMonitorOrders"
|
search-url="SalesMonitorOrders"
|
||||||
order="date_send DESC"
|
order="date_send DESC"
|
||||||
:limit="6"
|
|
||||||
:right-search="false"
|
:right-search="false"
|
||||||
:expr-builder="exprBuilder"
|
:expr-builder="exprBuilder"
|
||||||
auto-load
|
auto-load
|
||||||
|
@ -125,7 +124,6 @@ const openTab = (id) =>
|
||||||
:row-click="({ id }) => openTab(id)"
|
:row-click="({ id }) => openTab(id)"
|
||||||
v-model:selected="selectedRows"
|
v-model:selected="selectedRows"
|
||||||
:disable-option="{ card: true }"
|
:disable-option="{ card: true }"
|
||||||
style="max-height: 380px; overflow-y: scroll"
|
|
||||||
>
|
>
|
||||||
<template #top-left>
|
<template #top-left>
|
||||||
<QBtn
|
<QBtn
|
|
@ -12,9 +12,12 @@ import VnTable from 'components/VnTable/VnTable.vue';
|
||||||
import { useSummaryDialog } from 'src/composables/useSummaryDialog';
|
import { useSummaryDialog } from 'src/composables/useSummaryDialog';
|
||||||
import { toDateFormat } from 'src/filters/date.js';
|
import { toDateFormat } from 'src/filters/date.js';
|
||||||
import { toCurrency, dateRange } from 'src/filters';
|
import { toCurrency, dateRange } from 'src/filters';
|
||||||
|
import { useStateStore } from 'stores/useStateStore';
|
||||||
|
import VnSearchbar from 'components/ui/VnSearchbar.vue';
|
||||||
|
|
||||||
const DEFAULT_AUTO_REFRESH = 2 * 60 * 1000; // 2min in ms
|
const DEFAULT_AUTO_REFRESH = 2 * 60 * 1000; // 2min in ms
|
||||||
const { t } = useI18n();
|
const { t } = useI18n();
|
||||||
|
const stateStore = useStateStore();
|
||||||
const autoRefresh = ref(false);
|
const autoRefresh = ref(false);
|
||||||
const tableRef = ref(null);
|
const tableRef = ref(null);
|
||||||
const provinceOpts = ref([]);
|
const provinceOpts = ref([]);
|
||||||
|
@ -322,6 +325,17 @@ const openTab = (id) =>
|
||||||
auto-load
|
auto-load
|
||||||
@on-fetch="(data) => (zoneOpts = data)"
|
@on-fetch="(data) => (zoneOpts = data)"
|
||||||
/>
|
/>
|
||||||
|
<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>
|
||||||
<VnTable
|
<VnTable
|
||||||
ref="tableRef"
|
ref="tableRef"
|
||||||
data-key="SalesMonitorTickets"
|
data-key="SalesMonitorTickets"
|
||||||
|
@ -339,11 +353,21 @@ const openTab = (id) =>
|
||||||
:disable-option="{ card: true }"
|
:disable-option="{ card: true }"
|
||||||
>
|
>
|
||||||
<template #top-left>
|
<template #top-left>
|
||||||
|
<QBtn
|
||||||
|
icon="refresh"
|
||||||
|
size="md"
|
||||||
|
color="primary"
|
||||||
|
dense
|
||||||
|
flat
|
||||||
|
@click="$refs.tableRef.reload()"
|
||||||
|
/>
|
||||||
<QCheckbox
|
<QCheckbox
|
||||||
v-model="autoRefresh"
|
v-model="autoRefresh"
|
||||||
:label="t('salesTicketsTable.autoRefresh')"
|
:label="$t('salesTicketsTable.autoRefresh')"
|
||||||
@update:model-value="autoRefreshHandler"
|
@update:model-value="autoRefreshHandler"
|
||||||
/>
|
>
|
||||||
|
<QTooltip>{{ $t('refreshInfo') }}</QTooltip>
|
||||||
|
</QCheckbox>
|
||||||
</template>
|
</template>
|
||||||
<template #column-totalProblems="{ row }">
|
<template #column-totalProblems="{ row }">
|
||||||
<QTd class="no-padding" style="max-width: 50px">
|
<QTd class="no-padding" style="max-width: 50px">
|
||||||
|
@ -353,7 +377,7 @@ const openTab = (id) =>
|
||||||
color="primary"
|
color="primary"
|
||||||
size="xs"
|
size="xs"
|
||||||
>
|
>
|
||||||
<QTooltip>{{ t('salesTicketsTable.noVerifiedData') }}</QTooltip>
|
<QTooltip>{{ $t('salesTicketsTable.noVerifiedData') }}</QTooltip>
|
||||||
</QIcon>
|
</QIcon>
|
||||||
<QIcon
|
<QIcon
|
||||||
v-if="row.hasTicketRequest"
|
v-if="row.hasTicketRequest"
|
||||||
|
@ -361,7 +385,7 @@ const openTab = (id) =>
|
||||||
color="primary"
|
color="primary"
|
||||||
size="xs"
|
size="xs"
|
||||||
>
|
>
|
||||||
<QTooltip>{{ t('salesTicketsTable.purchaseRequest') }}</QTooltip>
|
<QTooltip>{{ $t('salesTicketsTable.purchaseRequest') }}</QTooltip>
|
||||||
</QIcon>
|
</QIcon>
|
||||||
<QIcon
|
<QIcon
|
||||||
v-if="row.itemShortage"
|
v-if="row.itemShortage"
|
||||||
|
@ -369,10 +393,10 @@ const openTab = (id) =>
|
||||||
color="primary"
|
color="primary"
|
||||||
size="xs"
|
size="xs"
|
||||||
>
|
>
|
||||||
<QTooltip>{{ t('salesTicketsTable.notVisible') }}</QTooltip>
|
<QTooltip>{{ $t('salesTicketsTable.notVisible') }}</QTooltip>
|
||||||
</QIcon>
|
</QIcon>
|
||||||
<QIcon v-if="row.isFreezed" name="vn:frozen" color="primary" size="xs">
|
<QIcon v-if="row.isFreezed" name="vn:frozen" color="primary" size="xs">
|
||||||
<QTooltip>{{ t('salesTicketsTable.clientFrozen') }}</QTooltip>
|
<QTooltip>{{ $t('salesTicketsTable.clientFrozen') }}</QTooltip>
|
||||||
</QIcon>
|
</QIcon>
|
||||||
<QIcon
|
<QIcon
|
||||||
v-if="row.risk"
|
v-if="row.risk"
|
||||||
|
@ -380,7 +404,9 @@ const openTab = (id) =>
|
||||||
:color="row.hasHighRisk ? 'negative' : 'primary'"
|
:color="row.hasHighRisk ? 'negative' : 'primary'"
|
||||||
size="xs"
|
size="xs"
|
||||||
>
|
>
|
||||||
<QTooltip>{{ t('salesTicketsTable.risk') }}: {{ row.risk }}</QTooltip>
|
<QTooltip
|
||||||
|
>{{ $t('salesTicketsTable.risk') }}: {{ row.risk }}</QTooltip
|
||||||
|
>
|
||||||
</QIcon>
|
</QIcon>
|
||||||
<QIcon
|
<QIcon
|
||||||
v-if="row.hasComponentLack"
|
v-if="row.hasComponentLack"
|
||||||
|
@ -388,7 +414,7 @@ const openTab = (id) =>
|
||||||
color="primary"
|
color="primary"
|
||||||
size="xs"
|
size="xs"
|
||||||
>
|
>
|
||||||
<QTooltip>{{ t('salesTicketsTable.componentLack') }}</QTooltip>
|
<QTooltip>{{ $t('salesTicketsTable.componentLack') }}</QTooltip>
|
||||||
</QIcon>
|
</QIcon>
|
||||||
<QIcon
|
<QIcon
|
||||||
v-if="row.isTooLittle"
|
v-if="row.isTooLittle"
|
||||||
|
@ -396,7 +422,7 @@ const openTab = (id) =>
|
||||||
color="primary"
|
color="primary"
|
||||||
size="xs"
|
size="xs"
|
||||||
>
|
>
|
||||||
<QTooltip>{{ t('salesTicketsTable.tooLittle') }}</QTooltip>
|
<QTooltip>{{ $t('salesTicketsTable.tooLittle') }}</QTooltip>
|
||||||
</QIcon>
|
</QIcon>
|
||||||
</QTd>
|
</QTd>
|
||||||
</template>
|
</template>
|
||||||
|
@ -451,7 +477,7 @@ const openTab = (id) =>
|
||||||
<template #column-isFragile="{ row }">
|
<template #column-isFragile="{ row }">
|
||||||
<QTd class="no-padding">
|
<QTd class="no-padding">
|
||||||
<QIcon v-if="row.isFragile" name="local_bar" color="primary" size="sm">
|
<QIcon v-if="row.isFragile" name="local_bar" color="primary" size="sm">
|
||||||
<QTooltip>{{ t('salesTicketsTable.isFragile') }}</QTooltip>
|
<QTooltip>{{ $t('salesTicketsTable.isFragile') }}</QTooltip>
|
||||||
</QIcon>
|
</QIcon>
|
||||||
</QTd>
|
</QTd>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
@ -44,3 +44,4 @@ salesTicketsTable:
|
||||||
searchBar:
|
searchBar:
|
||||||
label: Search tickets
|
label: Search tickets
|
||||||
info: Search tickets by id or alias
|
info: Search tickets by id or alias
|
||||||
|
refreshInfo: Toggle auto-refresh every 2 minutes
|
||||||
|
|
|
@ -44,3 +44,4 @@ salesTicketsTable:
|
||||||
searchBar:
|
searchBar:
|
||||||
label: Buscar tickets
|
label: Buscar tickets
|
||||||
info: Buscar tickets por identificador o alias
|
info: Buscar tickets por identificador o alias
|
||||||
|
refreshInfo: Conmuta el refresco automático cada 2 minutos
|
||||||
|
|
Loading…
Reference in New Issue