refactor: refs #8197 adapt Ticket to VnCardMain

src/pages/Ticket/Card/TicketCard.vue

@@ -1,23 +1,7 @@
 <script setup>
-import { useI18n } from 'vue-i18n';
-
-import VnCard from 'components/common/VnCard.vue';
+import VnCardBeta from 'components/common/VnCardBeta.vue';
 import TicketDescriptor from './TicketDescriptor.vue';
-import TicketFilter from '../TicketFilter.vue';
-
-const { t } = useI18n();
 </script>
 <template>
-    <VnCard
-        data-key="Ticket"
-        base-url="Tickets"
-        :filter-panel="TicketFilter"
-        :descriptor="TicketDescriptor"
-        search-data-key="TicketList"
-        :searchbar-props="{
-            url: 'Tickets/filter',
-            label: t('card.search'),
-            info: t('card.searchInfo'),
-        }"
-    />
+    <VnCardBeta data-key="Ticket" base-url="Tickets" :descriptor="TicketDescriptor" />
 </template>

src/pages/Ticket/TicketList.vue

@@ -8,13 +8,11 @@ import { useQuasar } from 'quasar';
 import { toDate, toCurrency, dashIfEmpty } from 'src/filters/index';
 import useNotify from 'src/composables/useNotify';
 import TicketSummary from './Card/TicketSummary.vue';
-import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
 import { useSummaryDialog } from 'src/composables/useSummaryDialog';
 import VnTable from 'src/components/VnTable/VnTable.vue';
 import VnSelect from 'src/components/common/VnSelect.vue';
 import VnInputDate from 'src/components/common/VnInputDate.vue';
 import VnRow from 'src/components/ui/VnRow.vue';
-import RightMenu from 'src/components/common/RightMenu.vue';
 import TicketFilter from './TicketFilter.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import FetchData from 'src/components/FetchData.vue';
@@ -23,6 +21,7 @@ import ZoneDescriptorProxy from 'src/pages/Zone/Card/ZoneDescriptorProxy.vue';
 import { toTimeFormat } from 'src/filters/date';
 import InvoiceOutDescriptorProxy from 'src/pages/InvoiceOut/Card/InvoiceOutDescriptorProxy.vue';
 import TicketProblems from 'src/components/TicketProblems.vue';
+import VnSection from 'src/components/common/VnSection.vue';
 
 const route = useRoute();
 const router = useRouter();
@@ -66,6 +65,7 @@ const dialogData = ref();
 const companiesOptions = ref([]);
 const accountingOptions = ref([]);
 const amountToReturn = ref();
+const dataKey = 'TicketList';
 
 const columns = computed(() => [
     {
@@ -452,21 +452,23 @@ function setReference(data) {
         @on-fetch="(data) => (accountingOptions = data)"
         auto-load
     />
-    <VnSearchbar
-        data-key="TicketList"
-        :label="t('Search ticket')"
-        :info="t('You can search by ticket id or alias')"
-        data-cy="ticketListSearchBar"
-    />
-    <RightMenu>
-        <template #right-panel>
+    <VnSection
+        :data-key="dataKey"
+        :columns="columns"
+        prefix="card"
+        :array-data-props="{
+            url: 'Tickets/filter',
+            order: ['shippedDate DESC', 'shippedHour ASC', 'zoneLanding ASC', 'id'],
+            exprBuilder,
+        }"
+    >
+        <template #rightMenu>
             <TicketFilter data-key="TicketList" />
         </template>
-    </RightMenu>
+        <template #body>
             <VnTable
                 ref="tableRef"
-        data-key="TicketList"
-        url="Tickets/filter"
+                :data-key="dataKey"
                 :create="{
                     urlCreate: 'Tickets/new',
                     title: t('ticketList.createTicket'),
@@ -474,7 +476,6 @@ function setReference(data) {
                     formInitialData: { clientId: null },
                 }"
                 default-mode="table"
-        :order="['shippedDate DESC', 'shippedHour ASC', 'zoneLanding ASC', 'id']"
                 :columns="columns"
                 :user-params="userParams"
                 :right-search="false"
@@ -598,7 +599,8 @@ function setReference(data) {
                                         <QIcon
                                             v-if="
                                                 scope.opt.isActive &&
-                                        selectedClient?.defaultAddressFk === scope.opt.id
+                                                selectedClient?.defaultAddressFk ===
+                                                    scope.opt.id
                                             "
                                             size="sm"
                                             color="grey"
@@ -621,7 +623,8 @@ function setReference(data) {
                                             }}
                                             <span>
                                                 {{ scope.opt?.nickname }}:
-                                        {{ scope.opt?.street }}, {{ scope.opt?.city }}
+                                                {{ scope.opt?.street }},
+                                                {{ scope.opt?.city }}
                                             </span>
                                         </QItemLabel>
                                     </QItemSection>
@@ -669,6 +672,8 @@ function setReference(data) {
                     </VnRow>
                 </template>
             </VnTable>
+        </template>
+    </VnSection>
     <QPageSticky :offset="[20, 80]" style="z-index: 2">
         <QBtn
             v-if="hasSelectedRows"

src/router/modules/ticket.js

@@ -1,19 +1,12 @@
 import { RouterView } from 'vue-router';
 
-export default {
-    name: 'Ticket',
-    path: '/ticket',
+const ticketCard = {
+    name: 'TicketCard',
+    path: ':id',
+    component: () => import('src/pages/Ticket/Card/TicketCard.vue'),
+    redirect: { name: 'TicketSummary' },
     meta: {
-        title: 'tickets',
-        icon: 'vn:ticket',
-        moduleName: 'Ticket',
-        keyBinding: 't',
-    },
-    component: RouterView,
-    redirect: { name: 'TicketMain' },
-    menus: {
-        main: ['TicketList', 'TicketAdvance', 'TicketWeekly', 'TicketFuture'],
-        card: [
+        menu: [
             'TicketBasicData',
             'TicketSale',
             'TicketLog',
@@ -32,65 +25,6 @@ export default {
             'TicketSms',
         ],
     },
-    children: [
-        {
-            name: 'TicketMain',
-            path: '',
-            component: () => import('src/components/common/VnSectionMain.vue'),
-            redirect: { name: 'TicketList' },
-            children: [
-                {
-                    path: 'list',
-                    name: 'TicketList',
-                    meta: {
-                        title: 'list',
-                        icon: 'view_list',
-                    },
-                    component: () => import('src/pages/Ticket/TicketList.vue'),
-                },
-                {
-                    path: 'create',
-                    name: 'TicketCreate',
-                    meta: {
-                        title: 'createTicket',
-                        icon: 'vn:ticketAdd',
-                    },
-                    component: () => import('src/pages/Ticket/TicketCreate.vue'),
-                },
-                {
-                    path: 'weekly',
-                    name: 'TicketWeekly',
-                    meta: {
-                        title: 'weeklyTickets',
-                        icon: 'access_time',
-                    },
-                    component: () => import('src/pages/Ticket/TicketWeekly.vue'),
-                },
-                {
-                    path: 'future',
-                    name: 'TicketFuture',
-                    meta: {
-                        title: 'futureTickets',
-                        icon: 'keyboard_double_arrow_right',
-                    },
-                    component: () => import('src/pages/Ticket/TicketFuture.vue'),
-                },
-                {
-                    name: 'TicketAdvance',
-                    path: 'advance',
-                    meta: {
-                        title: 'ticketAdvance',
-                        icon: 'keyboard_double_arrow_left',
-                    },
-                    component: () => import('src/pages/Ticket/TicketAdvance.vue'),
-                },
-            ],
-        },
-        {
-            name: 'TicketCard',
-            path: ':id',
-            component: () => import('src/pages/Ticket/Card/TicketCard.vue'),
-            redirect: { name: 'TicketSummary' },
     children: [
         {
             path: 'summary',
@@ -127,8 +61,7 @@ export default {
                 title: 'purchaseRequest',
                 icon: 'vn:buyrequest',
             },
-                    component: () =>
-                        import('src/pages/Ticket/Card/TicketPurchaseRequest.vue'),
+            component: () => import('src/pages/Ticket/Card/TicketPurchaseRequest.vue'),
         },
         {
             path: 'tracking',
@@ -219,8 +152,7 @@ export default {
                 title: 'saleTracking',
                 icon: 'assignment',
             },
-                    component: () =>
-                        import('src/pages/Ticket/Card/TicketSaleTracking.vue'),
+            component: () => import('src/pages/Ticket/Card/TicketSaleTracking.vue'),
         },
         {
             path: 'dms',
@@ -250,6 +182,81 @@ export default {
             component: () => import('src/pages/Ticket/Card/TicketSms.vue'),
         },
     ],
+};
+
+export default {
+    name: 'Ticket',
+    path: '/ticket',
+    meta: {
+        title: 'tickets',
+        icon: 'vn:ticket',
+        moduleName: 'Ticket',
+        keyBinding: 't',
+        menu: ['TicketList', 'TicketAdvance', 'TicketWeekly', 'TicketFuture'],
+    },
+    component: RouterView,
+    redirect: { name: 'TicketMain' },
+    children: [
+        {
+            name: 'TicketMain',
+            path: '',
+            component: () => import('src/components/common/VnModule.vue'),
+            redirect: { name: 'TicketIndexMain' },
+            children: [
+                {
+                    path: '',
+                    name: 'TicketIndexMain',
+                    redirect: { name: 'TicketList' },
+                    component: () => import('src/pages/Ticket/TicketList.vue'),
+                    children: [
+                        {
+                            name: 'TicketList',
+                            path: 'list',
+                            meta: {
+                                title: 'list',
+                                icon: 'view_list',
+                            },
+                        },
+                        ticketCard,
+                    ],
+                },
+                {
+                    path: 'create',
+                    name: 'TicketCreate',
+                    meta: {
+                        title: 'createTicket',
+                        icon: 'vn:ticketAdd',
+                    },
+                    component: () => import('src/pages/Ticket/TicketCreate.vue'),
+                },
+                {
+                    path: 'weekly',
+                    name: 'TicketWeekly',
+                    meta: {
+                        title: 'weeklyTickets',
+                        icon: 'access_time',
+                    },
+                    component: () => import('src/pages/Ticket/TicketWeekly.vue'),
+                },
+                {
+                    path: 'future',
+                    name: 'TicketFuture',
+                    meta: {
+                        title: 'futureTickets',
+                        icon: 'keyboard_double_arrow_right',
+                    },
+                    component: () => import('src/pages/Ticket/TicketFuture.vue'),
+                },
+                {
+                    name: 'TicketAdvance',
+                    path: 'advance',
+                    meta: {
+                        title: 'ticketAdvance',
+                        icon: 'keyboard_double_arrow_left',
+                    },
+                    component: () => import('src/pages/Ticket/TicketAdvance.vue'),
+                },
+            ],
         },
     ],
 };