Merge branch 'dev' into 8316-entryCardWithVnCardBeta

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
+    <VnCardBeta 
         data-key="Claim" 
         base-url="Claims" 
         :descriptor="ClaimDescriptor" 
-        :filter-panel="ClaimFilter"
-        search-data-key="ClaimList"
         :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,23 +125,25 @@ 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>
+        <template #body>
             <VnTable
-        data-key="ClaimList"
-        url="Claims/filter"
-        :order="['cs.priority ASC', 'created ASC']"
+                :data-key="dataKey"
                 :columns="columns"
                 redirect="claim"
                 :right-search="false"
+                auto-load
             >
                 <template #column-clientFk="{ row }">
                     <span class="link" @click.stop>
@@ -162,11 +164,11 @@ const STATE_COLOR = {
                 </template>
             </VnTable>
         </template>
+    </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',
@@ -25,31 +18,8 @@ export default {
     },
     children: [
         {            
-            name: 'ClaimMain',
-            path: '',
-            component: () => import('src/components/common/VnModule.vue'),
-            redirect: { name: 'ClaimList' },
-            children: [
-                {
-                    name: 'ClaimList',
-                    path: 'list',
-                    meta: {
-                        title: 'list',
-                        icon: 'view_list',
-                    },
-                    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',
+            name: 'ClaimSummary',
             meta: {
                 title: 'summary',
                 icon: 'launch',
@@ -57,8 +27,8 @@ export default {
             component: () => import('src/pages/Claim/Card/ClaimSummary.vue'),
         },
         {
-                    name: 'ClaimBasicData',
             path: 'basic-data',
+            name: 'ClaimBasicData',
             meta: {
                 title: 'basicData',
                 icon: 'vn:settings',
@@ -67,8 +37,8 @@ export default {
             component: () => import('src/pages/Claim/Card/ClaimBasicData.vue'),
         },
         {
-                    name: 'ClaimLines',
             path: 'lines',
+            name: 'ClaimLines',
             meta: {
                 title: 'lines',
                 icon: 'vn:details',
@@ -76,8 +46,8 @@ export default {
             component: () => import('src/pages/Claim/Card/ClaimLines.vue'),
         },
         {
-                    name: 'ClaimPhotos',
             path: 'photos',
+            name: 'ClaimPhotos',
             meta: {
                 title: 'photos',
                 icon: 'image',
@@ -85,8 +55,8 @@ export default {
             component: () => import('src/pages/Claim/Card/ClaimPhoto.vue'),
         },
         {
-                    name: 'ClaimNotes',
             path: 'notes',
+            name: 'ClaimNotes',
             meta: {
                 title: 'notes',
                 icon: 'draft',
@@ -94,8 +64,8 @@ export default {
             component: () => import('src/pages/Claim/Card/ClaimNotes.vue'),
         },
         {
-                    name: 'ClaimDevelopment',
             path: 'development',
+            name: 'ClaimDevelopment',
             meta: {
                 title: 'development',
                 icon: 'vn:traceability',
@@ -110,8 +80,8 @@ export default {
             component: () => import('src/pages/Claim/Card/ClaimDevelopment.vue'),
         },
         {
-                    name: 'ClaimAction',
             path: 'action',
+            name: 'ClaimAction',
             meta: {
                 title: 'action',
                 icon: 'vn:actions',
@@ -119,8 +89,8 @@ export default {
             component: () => import('src/pages/Claim/Card/ClaimAction.vue'),
         },
         {
-                    name: 'ClaimLog',
             path: 'log',
+            name: 'ClaimLog',
             meta: {
                 title: 'log',
                 icon: 'history',
@@ -128,6 +98,45 @@ export default {
             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: 'ClaimIndexMain' },
+            children: [
+                {
+                    path: '',
+                    name: 'ClaimIndexMain',
+                    redirect: { name: 'ClaimList' },
+                    component: () => import('src/pages/Claim/ClaimList.vue'),
+                    children: [
+                        {
+                            name: 'ClaimList',
+                            path: 'list',
+                            meta: {
+                                title: 'list',
+                                icon: 'view_list',
+                            },
+                        },
+                        claimCard,
+                    ],
+                },
+            ],
         },
     ],
 };