src/pages/Claim/Card/ClaimCard.vue

@@ -1,21 +1,13 @@
 <script setup>
-import VnCard from 'components/common/VnCard.vue';
+import VnCardBeta from 'components/common/VnCardBeta.vue';
 import ClaimDescriptor from './ClaimDescriptor.vue';
-import ClaimFilter from '../ClaimFilter.vue';
 import filter from './ClaimFilter.js';
 </script>
 <template>
-    <VnCard
-        data-key="Claim"
-        base-url="Claims"
-        :descriptor="ClaimDescriptor"
-        :filter-panel="ClaimFilter"
-        search-data-key="ClaimList"
+    <VnCardBeta 
+        data-key="Claim" 
+        base-url="Claims" 
+        :descriptor="ClaimDescriptor" 
         :filter="filter"
-        :searchbar-props="{
-            url: 'Claims/filter',
-            label: 'Search claim',
-            info: 'You can search by claim id or customer name',
-        }"
     />
 </template>

src/pages/Claim/ClaimList.vue

@@ -2,18 +2,18 @@
 import { ref, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { toDate } from 'filters/index';
-import VnSearchbar from 'components/ui/VnSearchbar.vue';
 import ClaimFilter from './ClaimFilter.vue';
 import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue';
 import VnUserLink from 'src/components/ui/VnUserLink.vue';
 import ClaimSummary from './Card/ClaimSummary.vue';
 import { useSummaryDialog } from 'src/composables/useSummaryDialog';
-import RightMenu from 'src/components/common/RightMenu.vue';
 import VnTable from 'src/components/VnTable/VnTable.vue';
 import ZoneDescriptorProxy from '../Zone/Card/ZoneDescriptorProxy.vue';
+import VnSection from 'src/components/common/VnSection.vue';
 
 const { t } = useI18n();
 const { viewSummary } = useSummaryDialog();
+const dataKey = 'ClaimList';
 
 const claimFilterRef = ref();
 const columns = computed(() => [
@@ -125,48 +125,50 @@ const STATE_COLOR = {
 </script>
 
 <template>
-    <VnSearchbar
-        data-key="ClaimList"
-        :label="t('Search claim')"
-        :info="t('You can search by claim id or customer name')"
-    />
-    <RightMenu>
-        <template #right-panel>
+    <VnSection
+        :data-key="dataKey"
+        :columns="columns"
+        prefix="claim"
+        :array-data-props="{
+            url: 'Claims/filter',
+            order: ['cs.priority ASC', 'created ASC'],
+        }"
+    >
+        <template #rightMenu>
             <ClaimFilter data-key="ClaimList" ref="claimFilterRef" />
         </template>
-    </RightMenu>
-    <VnTable
-        data-key="ClaimList"
-        url="Claims/filter"
-        :order="['cs.priority ASC', 'created ASC']"
-        :columns="columns"
-        redirect="claim"
-        :right-search="false"
-    >
-        <template #column-clientFk="{ row }">
-            <span class="link" @click.stop>
-                {{ row.clientName }}
-                <CustomerDescriptorProxy :id="row.clientFk" />
-            </span>
+        <template #body>
+            <VnTable
+                :data-key="dataKey"
+                :columns="columns"
+                redirect="claim"
+                :right-search="false"
+                auto-load
+            >
+                <template #column-clientFk="{ row }">
+                    <span class="link" @click.stop>
+                        {{ row.clientName }}
+                        <CustomerDescriptorProxy :id="row.clientFk" />
+                    </span>
+                </template>
+                <template #column-attendedBy="{ row }">
+                    <span @click.stop>
+                        <VnUserLink :name="row.workerName" :worker-id="row.workerFk" />
+                    </span>
+                </template>
+                <template #column-zoneFk="{ row }">
+                    <span class="link" @click.stop>
+                        {{ row.zoneName }}
+                        <ZoneDescriptorProxy :id="row.zoneId" />
+                    </span>
+                </template>
+            </VnTable>
         </template>
-        <template #column-attendedBy="{ row }">
-            <span @click.stop>
-                <VnUserLink :name="row.workerName" :worker-id="row.workerFk" />
-            </span>
-        </template>
-        <template #column-zoneFk="{ row }">
-            <span class="link" @click.stop>
-                {{ row.zoneName }}
-                <ZoneDescriptorProxy :id="row.zoneId" />
-            </span>
-        </template>
-    </VnTable>
+    </VnSection>
 </template>
 
 <i18n>
 es:
-    Search claim: Buscar reclamación
-    You can search by claim id or customer name: Puedes buscar por id de la reclamación o nombre del cliente
     params:
         stateCode: Estado
 en:

src/pages/Claim/locale/en.yml

@@ -44,3 +44,5 @@ claim:
     fileDescription: 'Claim id {claimId} from client {clientName} id {clientId}'
     noData: 'There are no images/videos, click here or drag and drop the file'
     dragDrop: Drag and drop it here
+    search: Search claims
+    searchInfo: You can search by claim id or customer name

src/pages/Claim/locale/es.yml

@@ -1,5 +1,3 @@
-Search claim: Buscar reclamación
-You can search by claim id or customer name: Puedes buscar por id de la reclamación o nombre del cliente
 claim:
     customer: Cliente
     code: Código
@@ -46,3 +44,5 @@ claim:
     fileDescription: 'ID de reclamación {claimId} del cliente {clientName} con ID {clientId}'
     noData: 'No hay imágenes/videos, haz clic aquí o arrastra y suelta el archivo'
     dragDrop: Arrastra y suelta aquí
+    search: Buscar reclamación
+    searchInfo: Puedes buscar por ID de la reclamación o nombre del cliente

src/router/modules/claim.js

@@ -1,19 +1,12 @@
 import { RouterView } from 'vue-router';
 
-export default {
-    name: 'Claim',
-    path: '/claim',
+const claimCard = {
+    name: 'ClaimCard',
+    path: ':id',
+    component: () => import('src/pages/Claim/Card/ClaimCard.vue'),
+    redirect: { name: 'ClaimSummary' },
     meta: {
-        title: 'claims',
-        icon: 'vn:claims',
-        moduleName: 'Claim',
-        keyBinding: 'r',
-    },
-    component: RouterView,
-    redirect: { name: 'ClaimMain' },
-    menus: {
-        main: ['ClaimList'],
-        card: [
+        menu: [
             'ClaimBasicData',
             'ClaimLines',
             'ClaimPhotos',
@@ -23,109 +16,125 @@ export default {
             'ClaimLog',
         ],
     },
+    children: [
+        {            
+            path: 'summary',
+            name: 'ClaimSummary',
+            meta: {
+                title: 'summary',
+                icon: 'launch',
+            },
+            component: () => import('src/pages/Claim/Card/ClaimSummary.vue'),
+        },
+        {
+            path: 'basic-data',
+            name: 'ClaimBasicData',
+            meta: {
+                title: 'basicData',
+                icon: 'vn:settings',
+                acls: [{ model: 'Claim', props: 'findById', accessType: 'READ' }],
+            },
+            component: () => import('src/pages/Claim/Card/ClaimBasicData.vue'),
+        },
+        {
+            path: 'lines',
+            name: 'ClaimLines',
+            meta: {
+                title: 'lines',
+                icon: 'vn:details',
+            },
+            component: () => import('src/pages/Claim/Card/ClaimLines.vue'),
+        },
+        {
+            path: 'photos',
+            name: 'ClaimPhotos',
+            meta: {
+                title: 'photos',
+                icon: 'image',
+            },
+            component: () => import('src/pages/Claim/Card/ClaimPhoto.vue'),
+        },
+        {
+            path: 'notes',
+            name: 'ClaimNotes',
+            meta: {
+                title: 'notes',
+                icon: 'draft',
+            },
+            component: () => import('src/pages/Claim/Card/ClaimNotes.vue'),
+        },
+        {
+            path: 'development',
+            name: 'ClaimDevelopment',
+            meta: {
+                title: 'development',
+                icon: 'vn:traceability',
+                acls: [
+                    {
+                        model: 'ClaimDevelopment',
+                        props: '*',
+                        accessType: 'WRITE',
+                    },
+                ],
+            },
+            component: () => import('src/pages/Claim/Card/ClaimDevelopment.vue'),
+        },
+        {
+            path: 'action',
+            name: 'ClaimAction',
+            meta: {
+                title: 'action',
+                icon: 'vn:actions',
+            },
+            component: () => import('src/pages/Claim/Card/ClaimAction.vue'),
+        },
+        {
+            path: 'log',
+            name: 'ClaimLog',
+            meta: {
+                title: 'log',
+                icon: 'history',
+            },
+            component: () => import('src/pages/Claim/Card/ClaimLog.vue'),
+        },
+    ],
+}
+
+export default {
+    name: 'Claim',
+    path: '/claim',
+    meta: {
+        title: 'claims',
+        icon: 'vn:claims',
+        moduleName: 'Claim',
+        keyBinding: 'r',
+        menu: ['ClaimList'],
+    },
+    component: RouterView,
+    redirect: { name: 'ClaimMain' },
     children: [
         {
             name: 'ClaimMain',
             path: '',
             component: () => import('src/components/common/VnModule.vue'),
-            redirect: { name: 'ClaimList' },
+            redirect: { name: 'ClaimIndexMain' },
             children: [
                 {
-                    name: 'ClaimList',
-                    path: 'list',
-                    meta: {
-                        title: 'list',
-                        icon: 'view_list',
-                    },
+                    path: '',
+                    name: 'ClaimIndexMain',
+                    redirect: { name: 'ClaimList' },
                     component: () => import('src/pages/Claim/ClaimList.vue'),
-                },
-            ],
-        },
-        {
-            name: 'ClaimCard',
-            path: ':id',
-            component: () => import('src/pages/Claim/Card/ClaimCard.vue'),
-            redirect: { name: 'ClaimSummary' },
-            children: [
-                {
-                    name: 'ClaimSummary',
-                    path: 'summary',
-                    meta: {
-                        title: 'summary',
-                        icon: 'launch',
-                    },
-                    component: () => import('src/pages/Claim/Card/ClaimSummary.vue'),
-                },
-                {
-                    name: 'ClaimBasicData',
-                    path: 'basic-data',
-                    meta: {
-                        title: 'basicData',
-                        icon: 'vn:settings',
-                        acls: [{ model: 'Claim', props: 'findById', accessType: 'READ' }],
-                    },
-                    component: () => import('src/pages/Claim/Card/ClaimBasicData.vue'),
-                },
-                {
-                    name: 'ClaimLines',
-                    path: 'lines',
-                    meta: {
-                        title: 'lines',
-                        icon: 'vn:details',
-                    },
-                    component: () => import('src/pages/Claim/Card/ClaimLines.vue'),
-                },
-                {
-                    name: 'ClaimPhotos',
-                    path: 'photos',
-                    meta: {
-                        title: 'photos',
-                        icon: 'image',
-                    },
-                    component: () => import('src/pages/Claim/Card/ClaimPhoto.vue'),
-                },
-                {
-                    name: 'ClaimNotes',
-                    path: 'notes',
-                    meta: {
-                        title: 'notes',
-                        icon: 'draft',
-                    },
-                    component: () => import('src/pages/Claim/Card/ClaimNotes.vue'),
-                },
-                {
-                    name: 'ClaimDevelopment',
-                    path: 'development',
-                    meta: {
-                        title: 'development',
-                        icon: 'vn:traceability',
-                        acls: [
-                            {
-                                model: 'ClaimDevelopment',
-                                props: '*',
-                                accessType: 'WRITE',
+                    children: [
+                        {
+                            name: 'ClaimList',
+                            path: 'list',
+                            meta: {
+                                title: 'list',
+                                icon: 'view_list',
                             },
-                        ],
-                    },
-                    component: () => import('src/pages/Claim/Card/ClaimDevelopment.vue'),
-                },
-                {
-                    name: 'ClaimAction',
-                    path: 'action',
-                    meta: {
-                        title: 'action',
-                        icon: 'vn:actions',
-                    },
-                    component: () => import('src/pages/Claim/Card/ClaimAction.vue'),
-                },
-                {
-                    name: 'ClaimLog',
-                    path: 'log',
-                    meta: {
-                        title: 'log',
-                        icon: 'history',
-                    },
-                    component: () => import('src/pages/Claim/Card/ClaimLog.vue'),
+                        },
+                        claimCard,
+                    ],
                 },
             ],
         },