refactor: refs #8316 used VnSection and VnCardBeta

src/pages/InvoiceIn/Card/InvoiceInCard.vue

@@ -1,58 +1,12 @@
 <script setup>
-import VnCard from 'components/common/VnCard.vue';
+import VnCardBeta from 'components/common/VnCardBeta.vue';
 import InvoiceInDescriptor from './InvoiceInDescriptor.vue';
-import InvoiceInFilter from '../InvoiceInFilter.vue';
-import InvoiceInSearchbar from '../InvoiceInSearchbar.vue';
-import { onBeforeRouteUpdate } from 'vue-router';
-import { setRectificative } from '../composables/setRectificative';
-
-const filter = {
-    include: [
-        {
-            relation: 'supplier',
-            scope: {
-                include: {
-                    relation: 'contacts',
-                    scope: { where: { email: { neq: null } } },
-                },
-            },
-        },
-        { relation: 'invoiceInDueDay' },
-        { relation: 'company' },
-        { relation: 'currency' },
-        {
-            relation: 'dms',
-            scope: {
-                fields: [
-                    'dmsTypeFk',
-                    'reference',
-                    'hardCopyNumber',
-                    'workerFk',
-                    'description',
-                    'hasFile',
-                    'file',
-                    'created',
-                    'companyFk',
-                    'warehouseFk',
-                ],
-            },
-        },
-    ],
-};
-
-onBeforeRouteUpdate(async (to) => await setRectificative(to));
 </script>
+
 <template>
-    <VnCard
+    <VnCardBeta
         data-key="InvoiceIn"
         base-url="InvoiceIns"
-        :filter="filter"
         :descriptor="InvoiceInDescriptor"
-        :filter-panel="InvoiceInFilter"
-        search-data-key="InvoiceInList"
-    >
-        <template #searchbar>
-            <InvoiceInSearchbar />
-        </template>
-    </VnCard>
+    />
 </template>

src/pages/InvoiceIn/InvoiceInList.vue

@@ -8,17 +8,17 @@ import InvoiceInFilter from './InvoiceInFilter.vue';
 import InvoiceInSummary from './Card/InvoiceInSummary.vue';
 import { useSummaryDialog } from 'src/composables/useSummaryDialog';
 import SupplierDescriptorProxy from 'src/pages/Supplier/Card/SupplierDescriptorProxy.vue';
-import RightMenu from 'src/components/common/RightMenu.vue';
-import InvoiceInSearchbar from 'src/pages/InvoiceIn/InvoiceInSearchbar.vue';
 import VnTable from 'src/components/VnTable/VnTable.vue';
 import VnSelect from 'src/components/common/VnSelect.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import VnInputDate from 'src/components/common/VnInputDate.vue';
 import FetchData from 'src/components/FetchData.vue';
+import VnSection from 'src/components/common/VnSection.vue';
 
 const user = useState().getUser();
 const { viewSummary } = useSummaryDialog();
 const { t } = useI18n();
+const dataKey='InvoiceInList';
 
 const tableRef = ref();
 const companies = ref([]);
@@ -130,19 +130,30 @@ const cols = computed(() => [
     },
 ]);
 </script>
+
 <template>
-    <FetchData url="Companies" @on-fetch="(data) => (companies = data)" auto-load />
-    <InvoiceInSearchbar />
-    <RightMenu>
-        <template #right-panel>
+    <FetchData 
+        url="Companies"
+        @on-fetch="(data) => (companies = data)"
+        auto-load 
+        />
+    <VnSection
+        :data-key="dataKey"
+        :columns="cols"
+        prefix="InvoiceIn"
+        :array-data-props="{
+            url: 'InvoiceIns/filter',
+            order: ['issued DESC', 'id DESC'],
+            exprBuilder,
+        }"
+    >
+        <template #rightMenu>
             <InvoiceInFilter data-key="InvoiceInList" />
         </template>
-    </RightMenu>
+        <template #body>
             <VnTable
                 ref="tableRef"
-        data-key="InvoiceInList"
-        url="InvoiceIns/filter"
-        :order="['issued DESC', 'id DESC']"
+                :data-key="dataKey"
                 :create="{
                     urlCreate: 'InvoiceIns',
                     title: t('globals.createInvoiceIn'),
@@ -197,4 +208,6 @@ const cols = computed(() => [
                     <VnInputDate :label="t('InvoiceIn.summary.issued')" v-model="data.issued" />
                 </template>
             </VnTable>
+        </template>
+    </VnSection>
 </template>

src/pages/InvoiceIn/locale/en.yml

@@ -1,4 +1,6 @@
 InvoiceIn:
+    search: Search invoice
+    searchInfo: Search incoming invoices by ID or supplier fiscal name
     serial: Serial
     isBooked: Is booked
     list:

src/pages/InvoiceIn/locale/es.yml

@@ -1,4 +1,6 @@
 InvoiceIn:
+    search: Buscar factura recibida
+    searchInfo: Buscar facturas recibidas por ID o nombre fiscal del proveedor
     serial: Serie
     isBooked: Contabilizada
     list:

src/router/modules/invoiceIn.js

@@ -1,18 +1,12 @@
 import { RouterView } from 'vue-router';
-import { setRectificative } from 'src/pages/InvoiceIn/composables/setRectificative';
-export default {
-    path: '/invoice-in',
-    name: 'InvoiceIn',
+
+const invoiceInCard = {
+    name: 'InvoiceInCard',
+    path: ':id',
+    component: () => import('src/pages/InvoiceIn/Card/InvoiceInCard.vue'),
+    redirect: { name: 'InvoiceInSummary' },
     meta: {
-        title: 'invoiceIns',
-        icon: 'vn:invoice-in',
-        moduleName: 'InvoiceIn',
-    },
-    component: RouterView,
-    redirect: { name: 'InvoiceInMain' },
-    menus: {
-        main: ['InvoiceInList', 'InvoiceInSerial'],
-        card: [
+        menu: [
             'InvoiceInBasicData',
             'InvoiceInVat',
             'InvoiceInDueDay',
@@ -23,60 +17,13 @@ export default {
     },
     children: [
         {
-            path: '',
-            name: 'InvoiceInMain',
-            component: () => import('src/components/common/VnModule.vue'),
-            redirect: { name: 'InvoiceInList' },
-            children: [
-                {
-                    path: 'list',
-                    name: 'InvoiceInList',
-                    meta: {
-                        title: 'list',
-                        icon: 'view_list',
-                    },
-                    component: () => import('src/pages/InvoiceIn/InvoiceInList.vue'),
-                },
-                {
-                    path: 'serial',
-                    name: 'InvoiceInSerial',
-                    meta: {
-                        title: 'serial',
-                        icon: 'view_list',
-                    },
-                    component: () =>
-                        import('src/pages/InvoiceIn/Serial/InvoiceInSerial.vue'),
-                },
-                {
-                    path: 'create',
-                    name: 'InvoiceInCreare',
-                    meta: {
-                        title: 'invoiceInCreate',
-                        icon: 'create',
-                    },
-                    component: () => import('src/pages/InvoiceIn/InvoiceInCreate.vue'),
-                },
-            ],
-        },
-        {
-            name: 'InvoiceInCard',
-            path: ':id',
-            component: () => import('src/pages/InvoiceIn/Card/InvoiceInCard.vue'),
-            redirect: { name: 'InvoiceInSummary' },
-            beforeEnter: async (to, from, next) => {
-                await setRectificative(to);
-                next();
-            },
-            children: [
-                {
-                    name: 'InvoiceInSummary',
             path: 'summary',
+            name: 'InvoiceInSummary',
             meta: {
                 title: 'summary',
                 icon: 'view_list',
             },
-                    component: () =>
-                        import('src/pages/InvoiceIn/Card/InvoiceInSummary.vue'),
+            component: () => import('src/pages/InvoiceIn/Card/InvoiceInSummary.vue'),
         },
         {
             name: 'InvoiceInBasicData',
@@ -117,15 +64,6 @@ export default {
             component: () =>
                 import('src/pages/InvoiceIn/Card/InvoiceInIntrastat.vue'),
         },
-                {
-                    name: 'InvoiceInLog',
-                    path: 'log',
-                    meta: {
-                        title: 'log',
-                        icon: 'history',
-                    },
-                    component: () => import('src/pages/InvoiceIn/Card/InvoiceInLog.vue'),
-                },
         {
             name: 'InvoiceInCorrective',
             path: 'corrective',
@@ -136,6 +74,71 @@ export default {
             component: () =>
                 import('src/pages/InvoiceIn/Card/InvoiceInCorrective.vue'),
         },
+        {
+            name: 'InvoiceInLog',
+            path: 'log',
+            meta: {
+                title: 'log',
+                icon: 'history',
+            },
+            component: () => import('src/pages/InvoiceIn/Card/InvoiceInLog.vue'),
+        },
+    ],
+};
+
+export default {    
+    name: 'InvoiceIn',
+    path: '/invoice-in',
+    meta: {
+        title: 'invoiceIns',
+        icon: 'vn:invoice-in',
+        moduleName: 'InvoiceIn',
+        menu: ['InvoiceInList', 'InvoiceInSerial'],
+    },
+    component: RouterView,
+    redirect: { name: 'InvoiceInMain' },
+    children: [
+        {            
+            name: 'InvoiceInMain',
+            path: '',
+            component: () => import('src/components/common/VnModule.vue'),
+            redirect: { name: 'InvoiceInIndexMain' },
+            children: [
+                {
+                    path: '',
+                    name: 'InvoiceInIndexMain',
+                    redirect: { name: 'InvoiceInList' },
+                    component: () => import('src/pages/InvoiceIn/InvoiceInList.vue'),
+                    children: [
+                        {
+                            name: 'InvoiceInList',                    
+                            path: 'list',
+                            meta: {
+                                title: 'list',
+                                icon: 'view_list',
+                            },
+                        },
+                        invoiceInCard,
+                    ],
+                },
+                {
+                    path: 'create',
+                    name: 'InvoiceInCreare',
+                    meta: {
+                        title: 'invoiceInCreate',
+                        icon: 'create',
+                    },
+                    component: () => import('src/pages/InvoiceIn/InvoiceInCreate.vue'),
+                },
+                {
+                    path: 'serial',
+                    name: 'InvoiceInSerial',
+                    meta: {
+                        title: 'serial',
+                        icon: 'view_list',
+                    },
+                    component: () => import('src/pages/InvoiceIn/Serial/InvoiceInSerial.vue'),
+                },
             ],
         },
     ],