Fix card searchbar routing

src/pages/Ticket/Card/TicketCard.vue

@@ -1,17 +1,29 @@
 <script setup>
+import { useI18n } from 'vue-i18n';
+import { useRoute } from 'vue-router';
+import { computed } from 'vue';
+
 import VnCard from 'components/common/VnCard.vue';
 import TicketDescriptor from './TicketDescriptor.vue';
 import TicketFilter from '../TicketFilter.vue';
+
+const { t } = useI18n();
+const route = useRoute();
+
+const routeName = computed(() => route.name);
+const searchBarDataKeys = {
+    TicketSummary: 'TicketSummary',
+    TicketSale: 'TicketSale',
+};
 </script>
 <template>
     <VnCard
         data-key="Ticket"
-        base-url="Tickets"
-        :descriptor="TicketDescriptor"
         :filter-panel="TicketFilter"
-        search-data-key="TicketList"
+        :descriptor="TicketDescriptor"
-        search-url="Tickets/filter"
+        :search-data-key="searchBarDataKeys[routeName]"
-        searchbar-label="Search ticket"
+        :search-custom-route-redirect="routeName"
-        searchbar-info="You can search by ticket id or alias"
+        :searchbar-label="t('card.search')"
+        :searchbar-info="t('card.searchInfo')"
     />
 </template>

src/pages/Ticket/Card/TicketSale.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { onMounted, ref, computed, onUnmounted } from 'vue';
+import { onMounted, ref, computed, onUnmounted, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter, useRoute } from 'vue-router';
 
@@ -31,7 +31,6 @@ const stateStore = useStateStore();
 const { t } = useI18n();
 const { notify } = useNotify();
 const { openConfirmationModal } = useVnConfirm();
-const salesDataRef = ref(null);
 const editPriceProxyRef = ref(null);
 const stateBtnDropdownRef = ref(null);
 
@@ -53,6 +52,11 @@ const transfer = ref({
     sales: [],
 });
 
+watch(
+    () => route.params.id,
+    async () => await getSales()
+);
+
 const columns = computed(() => [
     {
         label: '',
@@ -139,11 +143,29 @@ const columns = computed(() => [
 ]);
 
 const getConfig = async () => {
-    let filter = {
+    try {
-        fields: ['daysForWarningClaim'],
+        let filter = {
-    };
+            fields: ['daysForWarningClaim'],
-    const { data } = await axios.get(`TicketConfigs`, { filter });
+        };
-    ticketConfig.value = data;
+        const { data } = await axios.get(`TicketConfigs`, { filter });
+        ticketConfig.value = data;
+    } catch (err) {
+        console.error('Error getting ticket config', err);
+    }
+};
+
+const onSalesFetched = (salesData) => {
+    sales.value = salesData;
+    for (let sale of salesData) sale.amount = getSaleTotal(sale);
+};
+
+const getSales = async () => {
+    try {
+        const { data } = await axios.get(`Tickets/${route.params.id}/getSales`);
+        onSalesFetched(data);
+    } catch (err) {
+        console.error('Error fetching sales', err);
+    }
 };
 
 const getSaleTotal = (sale) => {
@@ -155,14 +177,9 @@ const getSaleTotal = (sale) => {
     return price - discount;
 };
 
-const onSalesFetched = (salesData) => {
-    sales.value = salesData;
-    for (let sale of salesData) sale.amount = getSaleTotal(sale);
-};
-
 const resetChanges = async () => {
     arrayData.fetch({ append: false });
-    salesDataRef.value.fetch();
+    getSales();
 };
 
 const updateQuantity = async (sale) => {
@@ -398,7 +415,8 @@ const setTransferParams = async () => {
 
 onMounted(async () => {
     stateStore.rightDrawer = true;
-    await getConfig();
+    getConfig();
+    getSales();
 });
 
 onUnmounted(() => (stateStore.rightDrawer = false));
@@ -415,12 +433,6 @@ onUnmounted(() => (stateStore.rightDrawer = false));
         auto-load
         @on-fetch="(data) => (isLocked = data)"
     />
-    <FetchData
-        ref="salesDataRef"
-        :url="`Tickets/${route.params.id}/getSales`"
-        auto-load
-        @on-fetch="(data) => onSalesFetched(data)"
-    />
     <FetchData
         url="Items/withName"
         :filter="{ fields: ['id', 'name'], order: 'id DESC' }"

src/pages/Ticket/locale/en.yml

@@ -22,3 +22,6 @@ ticketSale:
     shipped: Shipped
     agency: Agency
     address: Address
+card:
+    search: Search tickets
+    searchInfo: You can search by ticket id or alias

src/pages/Ticket/locale/es.yml

@@ -24,3 +24,6 @@ ticketSale:
     shipped: F. Envío
     agency: Agencia
     address: Consignatario
+card:
+    search: Buscar tickets
+    searchInfo: Buscar tickets por identificador o alias

src/pages/Zone/Card/ZoneCard.vue

@@ -22,6 +22,7 @@ const searchBarDataKeys = {
     ZoneEvents: 'ZoneEvents',
 };
 </script>
+
 <template>
     <VnCard
         data-key="Zone"