#7903 Warmfix: fixed ticket's search bar and keybinding tooltip #699
|
@ -35,7 +35,7 @@ const itemComputed = computed(() => {
|
||||||
</QItemSection>
|
</QItemSection>
|
||||||
<QItemSection>
|
<QItemSection>
|
||||||
{{ t(itemComputed.title) }}
|
{{ t(itemComputed.title) }}
|
||||||
<QTooltip>
|
<QTooltip v-if="item.keyBinding">
|
||||||
{{ 'Ctrl + Alt + ' + item?.keyBinding?.toUpperCase() }}
|
{{ 'Ctrl + Alt + ' + item?.keyBinding?.toUpperCase() }}
|
||||||
</QTooltip>
|
</QTooltip>
|
||||||
</QItemSection>
|
</QItemSection>
|
||||||
|
|
|
@ -1,17 +1,11 @@
|
||||||
<script setup>
|
<script setup>
|
||||||
import { useI18n } from 'vue-i18n';
|
import { useI18n } from 'vue-i18n';
|
||||||
import { useRoute } from 'vue-router';
|
|
||||||
import { computed } from 'vue';
|
|
||||||
|
|
||||||
import VnCard from 'components/common/VnCard.vue';
|
import VnCard from 'components/common/VnCard.vue';
|
||||||
import TicketDescriptor from './TicketDescriptor.vue';
|
import TicketDescriptor from './TicketDescriptor.vue';
|
||||||
import TicketFilter from '../TicketFilter.vue';
|
import TicketFilter from '../TicketFilter.vue';
|
||||||
|
|
||||||
const { t } = useI18n();
|
const { t } = useI18n();
|
||||||
const route = useRoute();
|
|
||||||
|
|
||||||
const routeName = computed(() => route.name);
|
|
||||||
const customRouteRedirectName = computed(() => routeName.value);
|
|
||||||
</script>
|
</script>
|
||||||
<template>
|
<template>
|
||||||
<VnCard
|
<VnCard
|
||||||
|
@ -21,7 +15,7 @@ const customRouteRedirectName = computed(() => routeName.value);
|
||||||
:descriptor="TicketDescriptor"
|
:descriptor="TicketDescriptor"
|
||||||
search-data-key="TicketList"
|
search-data-key="TicketList"
|
||||||
:searchbar-props="{
|
:searchbar-props="{
|
||||||
customRouteRedirectName,
|
url: 'Tickets/filter',
|
||||||
label: t('card.search'),
|
label: t('card.search'),
|
||||||
info: t('card.searchInfo'),
|
info: t('card.searchInfo'),
|
||||||
}"
|
}"
|
||||||
|
|
|
@ -1,6 +1,7 @@
|
||||||
<script setup>
|
<script setup>
|
||||||
import axios from 'axios';
|
import axios from 'axios';
|
||||||
import { computed, ref, onMounted } from 'vue';
|
import { computed, ref, onMounted } from 'vue';
|
||||||
|
import { useRoute } from 'vue-router';
|
||||||
import { useStateStore } from 'stores/useStateStore';
|
import { useStateStore } from 'stores/useStateStore';
|
||||||
import { useI18n } from 'vue-i18n';
|
import { useI18n } from 'vue-i18n';
|
||||||
import { toDate, toCurrency } from 'src/filters/index';
|
import { toDate, toCurrency } from 'src/filters/index';
|
||||||
|
@ -22,8 +23,11 @@ const addressesOptions = ref([]);
|
||||||
const agenciesOptions = ref([]);
|
const agenciesOptions = ref([]);
|
||||||
const selectedClient = ref();
|
const selectedClient = ref();
|
||||||
const stateStore = useStateStore();
|
const stateStore = useStateStore();
|
||||||
|
const route = useRoute();
|
||||||
const from = Date.vnNew();
|
const from = Date.vnNew();
|
||||||
|
from.setHours(0, 0, 0, 0);
|
||||||
const to = Date.vnNew();
|
const to = Date.vnNew();
|
||||||
|
to.setHours(23, 59, 0, 0);
|
||||||
to.setDate(to.getDate() + 1);
|
to.setDate(to.getDate() + 1);
|
||||||
|
|
||||||
const userParams = {
|
const userParams = {
|
||||||
|
@ -31,6 +35,16 @@ const userParams = {
|
||||||
to: to.toISOString(),
|
to: to.toISOString(),
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// Método para inicializar las variables desde la query string
|
||||||
|
const initializeFromQuery = () => {
|
||||||
|
const query = route.query.table ? JSON.parse(route.query.table) : {};
|
||||||
|
|
||||||
|
// Asigna los valores a las variables correspondientes
|
||||||
|
from.value = query.from || from.toISOString();
|
||||||
|
to.value = query.to || to.toISOString();
|
||||||
|
Object.assign(userParams, { from, to });
|
||||||
|
};
|
||||||
|
|
||||||
const columns = computed(() => [
|
const columns = computed(() => [
|
||||||
{
|
{
|
||||||
align: 'left',
|
align: 'left',
|
||||||
|
@ -200,23 +214,26 @@ const getColor = (row) => {
|
||||||
return row?.classColor ? `bg-${row.classColor}` : 'bg-orange';
|
return row?.classColor ? `bg-${row.classColor}` : 'bg-orange';
|
||||||
};
|
};
|
||||||
|
|
||||||
onMounted(() => (stateStore.rightDrawer = true));
|
onMounted(() => {
|
||||||
|
initializeFromQuery();
|
||||||
|
stateStore.rightDrawer = true;
|
||||||
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<VnSearchbar
|
<VnSearchbar
|
||||||
data-key="Tickets"
|
data-key="Ticket"
|
||||||
:label="t('Search ticket')"
|
:label="t('Search ticket')"
|
||||||
:info="t('You can search by ticket id or alias')"
|
:info="t('You can search by ticket id or alias')"
|
||||||
/>
|
/>
|
||||||
<RightMenu>
|
<RightMenu>
|
||||||
<template #right-panel>
|
<template #right-panel>
|
||||||
<TicketFilter data-key="Tickets" />
|
<TicketFilter data-key="Ticket" />
|
||||||
</template>
|
</template>
|
||||||
</RightMenu>
|
</RightMenu>
|
||||||
<VnTable
|
<VnTable
|
||||||
ref="tableRef"
|
ref="tableRef"
|
||||||
data-key="Tickets"
|
data-key="Ticket"
|
||||||
url="Tickets/filter"
|
url="Tickets/filter"
|
||||||
:create="{
|
:create="{
|
||||||
urlCreate: 'Tickets/new',
|
urlCreate: 'Tickets/new',
|
||||||
|
@ -225,7 +242,7 @@ onMounted(() => (stateStore.rightDrawer = true));
|
||||||
formInitialData: {},
|
formInitialData: {},
|
||||||
}"
|
}"
|
||||||
default-mode="table"
|
default-mode="table"
|
||||||
order="id DESC"
|
:order="['shippedDate DESC', 'shippedHour ASC', 'zoneLanding ASC', 'id']"
|
||||||
:columns="columns"
|
:columns="columns"
|
||||||
:user-params="userParams"
|
:user-params="userParams"
|
||||||
:right-search="false"
|
:right-search="false"
|
||||||
|
|
Loading…
Reference in New Issue