refactor: refs #8316 used VnSection and VnCardBeta

src/pages/InvoiceOut/Card/InvoiceOutCard.vue

@@ -1,19 +1,11 @@
 <script setup>
 import InvoiceOutDescriptor from './InvoiceOutDescriptor.vue';
-import VnCard from 'components/common/VnCard.vue';
+import VnCardBeta from 'components/common/VnCardBeta.vue';
-import InvoiceOutFilter from '../InvoiceOutFilter.vue';
 </script>
 <template>
-    <VnCard
+    <VnCardBeta
         data-key="InvoiceOut"
         base-url="InvoiceOuts"
         :descriptor="InvoiceOutDescriptor"
-        :filter-panel="InvoiceOutFilter"
-        search-data-key="InvoiceOutList"
-        :searchbar-props="{
-            url: 'InvoiceOuts/filter',
-            label: 'Search invoice',
-            info: 'You can search by invoice reference',
-        }"
     />
 </template>

src/pages/InvoiceOut/InvoiceOutList.vue

@@ -3,7 +3,6 @@ import { ref, computed, watchEffect } from 'vue';
 import { useI18n } from 'vue-i18n';
 import VnSelect from 'src/components/common/VnSelect.vue';
 import VnInputDate from 'src/components/common/VnInputDate.vue';
-import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
 import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
 import { useSummaryDialog } from 'src/composables/useSummaryDialog';
 import { usePrintService } from 'src/composables/usePrintService';
@@ -12,12 +11,12 @@ import InvoiceOutSummary from './Card/InvoiceOutSummary.vue';
 import { toCurrency, toDate } from 'src/filters/index';
 import { QBtn } from 'quasar';
 import axios from 'axios';
-import RightMenu from 'src/components/common/RightMenu.vue';
 import InvoiceOutFilter from './InvoiceOutFilter.vue';
 import VnRow from 'src/components/ui/VnRow.vue';
 import VnRadio from 'src/components/common/VnRadio.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import CustomerDescriptorProxy from '../Customer/Card/CustomerDescriptorProxy.vue';
+import VnSection from 'src/components/common/VnSection.vue';
 
 const { t } = useI18n();
 const { viewSummary } = useSummaryDialog();
@@ -30,6 +29,8 @@ const MODEL = 'InvoiceOuts';
 const { openReport } = usePrintService();
 const addressOptions = ref([]);
 const selectedOption = ref('ticket');
+const dataKey = 'InvoiceOutList';
+
 async function fetchClientAddress(id) {
     const { data } = await axios.get(
         `Clients/${id}/addresses?filter[order]=isActive DESC`
@@ -37,11 +38,7 @@ async function fetchClientAddress(id) {
     addressOptions.value = data;
 }
 
-const exprBuilder = (_, value) => {
+
-    return {
-        or: [{ code: value }, { description: { like: `%${value}%` } }],
-    };
-};
 
 const columns = computed(() => [
     {
@@ -173,16 +170,20 @@ watchEffect(selectedRows);
 </script>
 
 <template>
-    <VnSearchbar
+    <VnSection
-        :info="t('youCanSearchByInvoiceReference')"
+        :data-key="dataKey"
-        :label="t('Search invoice')"
+        :columns="columns"
-        data-key="invoiceOutList"
+        prefix="invoiceOut"
-    />
+        :array-data-props="{
-    <RightMenu>
+            url: 'InvoiceOuts/filter',
-        <template #right-panel>
+            order: ['id DESC'],
-            <InvoiceOutFilter data-key="invoiceOutList" />
+            exprBuilder,
+        }"
+    >
+        <template #rightMenu>
+            <InvoiceOutFilter data-key="InvoiceOutList" />
         </template>
-    </RightMenu>
+        <template #body>
             <VnSubToolbar>
                 <template #st-actions>
                     <QBtn
@@ -197,8 +198,7 @@ watchEffect(selectedRows);
             </VnSubToolbar>
             <VnTable
                 ref="tableRef"
-        data-key="invoiceOutList"
+                :data-key="dataKey"
-        :url="`${MODEL}/filter`"
                 :create="{
                     urlCreate: 'InvoiceOuts/createManualInvoice',
                     title: t('createManualInvoice'),
@@ -207,7 +207,6 @@ watchEffect(selectedRows);
                 }"
                 :right-search="false"
                 v-model:selected="selectedRows"
-        order="id DESC"
                 :columns="columns"
                 redirect="invoice-out"
                 :table="{
@@ -387,6 +386,8 @@ watchEffect(selectedRows);
                     </div>
                 </template>
             </VnTable>
+        </template>
+    </VnSection>
 </template>
 
 <style lang="scss" scoped>

src/pages/InvoiceOut/locale/en.yml

@@ -1,3 +1,6 @@
+invoiceOut:
+    search: Search invoice
+    searchInfo: You can search by invoice reference
 invoiceOutModule:
     customer: Client
     amount: Amount

src/pages/InvoiceOut/locale/es.yml

@@ -1,5 +1,6 @@
-Search invoice: Buscar factura emitida
+invoiceOut:
-You can search by invoice reference: Puedes buscar por referencia de la factura
+    search: Buscar factura emitida
+    searchInfo: Puedes buscar por referencia de la factura
 invoiceOutModule:
     customer: Cliente
     amount: Importe

src/router/modules/invoiceOut.js

@@ -1,34 +1,60 @@
 import { RouterView } from 'vue-router';
 
+const invoiceOutCard = {
+    name: 'InvoiceOutCard',
+    path: ':id',
+    component: () => import('src/pages/InvoiceOut/Card/InvoiceOutCard.vue'),
+    redirect: { name: 'InvoiceOutSummary' },
+    meta: {
+        menu: [],
+    },
+    children: [
+        {
+            path: 'summary',
+            name: 'InvoiceOutSummary',
+            meta: {
+                title: 'summary',
+                icon: 'launch',
+            },
+            component: () => import('src/pages/InvoiceOut/Card/InvoiceOutSummary.vue'),
+        }
+    ],
+};
+
 export default {
-    path: '/invoice-out',
     name: 'InvoiceOut',
+    path: '/invoice-out',
     meta: {
         title: 'invoiceOuts',
         icon: 'vn:invoice-out',
         moduleName: 'InvoiceOut',
+        menu: ['InvoiceOutList', 'InvoiceOutGlobal', 'InvoiceOutNegativeBases'],
     },
     component: RouterView,
     redirect: { name: 'InvoiceOutMain' },
-    menus: {
+    children: [
-        main: ['InvoiceOutList', 'InvoiceOutGlobal', 'InvoiceOutNegativeBases'],
+        {
-        card: [],
+            name: 'InvoiceOutMain',
-    },
+            path: '',
+            component: () => import('src/components/common/VnModule.vue'),
+            redirect: { name: 'InvoiceOutIndexMain' },
             children: [
                 {
                     path: '',
-            name: 'InvoiceOutMain',
+                    name: 'InvoiceOutIndexMain',
-            component: () => import('src/components/common/VnModule.vue'),
                     redirect: { name: 'InvoiceOutList' },
+                    component: () => import('src/pages/InvoiceOut/InvoiceOutList.vue'),
                     children: [
                         {
-                    path: 'list',
                             name: 'InvoiceOutList',
+                            path: 'list',
                             meta: {
                                 title: 'list',
                                 icon: 'view_list',
                             },
-                    component: () => import('src/pages/InvoiceOut/InvoiceOutList.vue'),
+                        },
+                        invoiceOutCard,
+                    ],
                 },
                 {
                     path: 'global-invoicing',
@@ -51,22 +77,5 @@ export default {
                 },
             ],
         },
-        {
-            name: 'InvoiceOutCard',
-            path: ':id',
-            component: () => import('src/pages/InvoiceOut/Card/InvoiceOutCard.vue'),
-            redirect: { name: 'InvoiceOutSummary' },
-            children: [
-                {
-                    name: 'InvoiceOutSummary',
-                    path: 'summary',
-                    meta: {
-                        title: 'summary',
-                    },
-                    component: () =>
-                        import('src/pages/InvoiceOut/Card/InvoiceOutSummary.vue'),
-                },
-            ],
-        },
     ],
 };