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,71 +130,84 @@ const cols = computed(() => [
     },
 ]);
 </script>
+
 <template>
-    <FetchData url="Companies" @on-fetch="(data) => (companies = data)" auto-load />
+    <FetchData 
-    <InvoiceInSearchbar />
+        url="Companies"
-    <RightMenu>
+        @on-fetch="(data) => (companies = data)"
-        <template #right-panel>
+        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
+            <VnTable
-        ref="tableRef"
+                ref="tableRef"
-        data-key="InvoiceInList"
+                :data-key="dataKey"
-        url="InvoiceIns/filter"
+                :create="{
-        :order="['issued DESC', 'id DESC']"
+                    urlCreate: 'InvoiceIns',
-        :create="{
+                    title: t('globals.createInvoiceIn'),
-            urlCreate: 'InvoiceIns',
+                    onDataSaved: ({ id }) => tableRef.redirect(id),
-            title: t('globals.createInvoiceIn'),
+                    formInitialData: { companyFk: user.companyFk, issued: Date.vnNew() },
-            onDataSaved: ({ id }) => tableRef.redirect(id),
+                }"
-            formInitialData: { companyFk: user.companyFk, issued: Date.vnNew() },
+                redirect="invoice-in"
-        }"
+                :columns="cols"
-        redirect="invoice-in"
+                :right-search="false"
-        :columns="cols"
+                :disable-option="{ card: true }"
-        :right-search="false"
+                :auto-load="!!$route.query.table"
-        :disable-option="{ card: true }"
-        :auto-load="!!$route.query.table"
-    >
-        <template #column-supplierFk="{ row }">
-            <span class="link" @click.stop>
-                {{ row.supplierName }}
-                <SupplierDescriptorProxy :id="row.supplierFk" />
-            </span>
-        </template>
-        <template #more-create-dialog="{ data }">
-            <VnSelect
-                v-model="data.supplierFk"
-                url="Suppliers"
-                :fields="['id', 'nickname']"
-                :label="t('globals.supplier')"
-                option-value="id"
-                option-label="nickname"
-                :filter-options="['id', 'name']"
-                :required="true"
             >
-                <template #option="scope">
+                <template #column-supplierFk="{ row }">
-                    <QItem v-bind="scope.itemProps">
+                    <span class="link" @click.stop>
-                        <QItemSection>
+                        {{ row.supplierName }}
-                            <QItemLabel>{{ scope.opt?.nickname }}</QItemLabel>
+                        <SupplierDescriptorProxy :id="row.supplierFk" />
-                            <QItemLabel caption> #{{ scope.opt?.id }} </QItemLabel>
+                    </span>
-                        </QItemSection>
-                    </QItem>
                 </template>
-            </VnSelect>
+                <template #more-create-dialog="{ data }">
-            <VnInput
+                    <VnSelect
-                :label="t('InvoiceIn.list.supplierRef')"
+                        v-model="data.supplierFk"
-                v-model="data.supplierRef"
+                        url="Suppliers"
-            />
+                        :fields="['id', 'nickname']"
-            <VnSelect
+                        :label="t('globals.supplier')"
-                url="Companies"
+                        option-value="id"
-                :label="t('globals.company')"
+                        option-label="nickname"
-                :fields="['id', 'code']"
+                        :filter-options="['id', 'name']"
-                v-model="data.companyFk"
+                        :required="true"
-                option-value="id"
+                    >
-                option-label="code"
+                        <template #option="scope">
-                :required="true"
+                            <QItem v-bind="scope.itemProps">
-            />
+                                <QItemSection>
-            <VnInputDate :label="t('InvoiceIn.summary.issued')" v-model="data.issued" />
+                                    <QItemLabel>{{ scope.opt?.nickname }}</QItemLabel>
+                                    <QItemLabel caption> #{{ scope.opt?.id }} </QItemLabel>
+                                </QItemSection>
+                            </QItem>
+                        </template>
+                    </VnSelect>
+                    <VnInput
+                        :label="t('InvoiceIn.list.supplierRef')"
+                        v-model="data.supplierRef"
+                    />
+                    <VnSelect
+                        url="Companies"
+                        :label="t('globals.company')"
+                        :fields="['id', 'code']"
+                        v-model="data.companyFk"
+                        option-value="id"
+                        option-label="code"
+                        :required="true"
+                    />
+                    <VnInputDate :label="t('InvoiceIn.summary.issued')" v-model="data.issued" />
+                </template>
+            </VnTable>
         </template>
-    </VnTable>
+    </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 {
+const invoiceInCard = {
-    path: '/invoice-in',
+    name: 'InvoiceInCard',
-    name: 'InvoiceIn',
+    path: ':id',
+    component: () => import('src/pages/InvoiceIn/Card/InvoiceInCard.vue'),
+    redirect: { name: 'InvoiceInSummary' },
     meta: {
-        title: 'invoiceIns',
+        menu: [
-        icon: 'vn:invoice-in',
-        moduleName: 'InvoiceIn',
-    },
-    component: RouterView,
-    redirect: { name: 'InvoiceInMain' },
-    menus: {
-        main: ['InvoiceInList', 'InvoiceInSerial'],
-        card: [
             'InvoiceInBasicData',
             'InvoiceInVat',
             'InvoiceInDueDay',
@@ -23,29 +17,109 @@ export default {
     },
     children: [
         {
-            path: '',
+            path: 'summary',
+            name: 'InvoiceInSummary',
+            meta: {
+                title: 'summary',
+                icon: 'view_list',
+            },
+            component: () => import('src/pages/InvoiceIn/Card/InvoiceInSummary.vue'),
+        },
+        {
+            name: 'InvoiceInBasicData',
+            path: 'basic-data',
+            meta: {
+                title: 'basicData',
+                icon: 'vn:settings',
+            },
+            component: () =>
+                import('src/pages/InvoiceIn/Card/InvoiceInBasicData.vue'),
+        },
+        {
+            name: 'InvoiceInVat',
+            path: 'vat',
+            meta: {
+                title: 'vat',
+                icon: 'vn:tax',
+            },
+            component: () => import('src/pages/InvoiceIn/Card/InvoiceInVat.vue'),
+        },
+        {
+            name: 'InvoiceInDueDay',
+            path: 'due-day',
+            meta: {
+                title: 'dueDay',
+                icon: 'vn:calendar',
+            },
+            component: () =>
+                import('src/pages/InvoiceIn/Card/InvoiceInDueDay.vue'),
+        },
+        {
+            name: 'InvoiceInIntrastat',
+            path: 'intrastat',
+            meta: {
+                title: 'intrastat',
+                icon: 'vn:lines',
+            },
+            component: () =>
+                import('src/pages/InvoiceIn/Card/InvoiceInIntrastat.vue'),
+        },
+        {
+            name: 'InvoiceInCorrective',
+            path: 'corrective',
+            meta: {
+                title: 'corrective',
+                icon: 'attachment',
+            },
+            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: 'InvoiceInList' },
+            redirect: { name: 'InvoiceInIndexMain' },
             children: [
                 {
-                    path: 'list',
+                    path: '',
-                    name: 'InvoiceInList',
+                    name: 'InvoiceInIndexMain',
-                    meta: {
+                    redirect: { name: 'InvoiceInList' },
-                        title: 'list',
-                        icon: 'view_list',
-                    },
                     component: () => import('src/pages/InvoiceIn/InvoiceInList.vue'),
-                },
+                    children: [
-                {
+                        {
-                    path: 'serial',
+                            name: 'InvoiceInList',                    
-                    name: 'InvoiceInSerial',
+                            path: 'list',
-                    meta: {
+                            meta: {
-                        title: 'serial',
+                                title: 'list',
-                        icon: 'view_list',
+                                icon: 'view_list',
-                    },
+                            },
-                    component: () =>
+                        },
-                        import('src/pages/InvoiceIn/Serial/InvoiceInSerial.vue'),
+                        invoiceInCard,
+                    ],
                 },
                 {
                     path: 'create',
@@ -56,87 +130,16 @@ export default {
                     },
                     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: 'serial',
-                    path: 'summary',
+                    name: 'InvoiceInSerial',
                     meta: {
-                        title: 'summary',
+                        title: 'serial',
                         icon: 'view_list',
                     },
-                    component: () =>
+                    component: () => import('src/pages/InvoiceIn/Serial/InvoiceInSerial.vue'),
-                        import('src/pages/InvoiceIn/Card/InvoiceInSummary.vue'),
-                },
-                {
-                    name: 'InvoiceInBasicData',
-                    path: 'basic-data',
-                    meta: {
-                        title: 'basicData',
-                        icon: 'vn:settings',
-                    },
-                    component: () =>
-                        import('src/pages/InvoiceIn/Card/InvoiceInBasicData.vue'),
-                },
-                {
-                    name: 'InvoiceInVat',
-                    path: 'vat',
-                    meta: {
-                        title: 'vat',
-                        icon: 'vn:tax',
-                    },
-                    component: () => import('src/pages/InvoiceIn/Card/InvoiceInVat.vue'),
-                },
-                {
-                    name: 'InvoiceInDueDay',
-                    path: 'due-day',
-                    meta: {
-                        title: 'dueDay',
-                        icon: 'vn:calendar',
-                    },
-                    component: () =>
-                        import('src/pages/InvoiceIn/Card/InvoiceInDueDay.vue'),
-                },
-                {
-                    name: 'InvoiceInIntrastat',
-                    path: 'intrastat',
-                    meta: {
-                        title: 'intrastat',
-                        icon: 'vn:lines',
-                    },
-                    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',
-                    meta: {
-                        title: 'corrective',
-                        icon: 'attachment',
-                    },
-                    component: () =>
-                        import('src/pages/InvoiceIn/Card/InvoiceInCorrective.vue'),
                 },
             ],
         },
     ],
-};
+};