refactor: refs #8322 changed Worker component to use VnSection/VnCardBeta

src/pages/Worker/Card/WorkerCard.vue

@@ -1,21 +1,7 @@
 <script setup>
-import VnCard from 'components/common/VnCard.vue';
 import WorkerDescriptor from './WorkerDescriptor.vue';
-import WorkerFilter from '../WorkerFilter.vue';
+import VnCardBeta from 'src/components/common/VnCardBeta.vue';
 </script>
 <template>
-    <VnCard
-        data-key="Worker"
-        custom-url="Workers/summary"
-        :descriptor="WorkerDescriptor"
-        :filter-panel="WorkerFilter"
-        search-data-key="WorkerList"
-        :searchbar-props="{
-            url: 'Workers/filter',
-            label: 'Search worker',
-            info: 'You can search by worker id or name',
-            order: 'id DESC',
-        }"
-        :redirect-on-error="true"
-    />
+    <VnCardBeta data-key="Worker" custom-url="Workers/summary" :descriptor="WorkerDescriptor" />
 </template>

src/pages/Worker/WorkerList.vue

@@ -2,7 +2,6 @@
 import { onBeforeMount, computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useSummaryDialog } from 'src/composables/useSummaryDialog';
-import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
 import VnTable from 'src/components/VnTable/VnTable.vue';
 import WorkerSummary from './Card/WorkerSummary.vue';
 import VnRow from 'src/components/ui/VnRow.vue';
@@ -14,12 +13,11 @@ import VnLocation from 'src/components/common/VnLocation.vue';
 import VnSelectDialog from 'src/components/common/VnSelectDialog.vue';
 import CreateBankEntityForm from 'src/components/CreateBankEntityForm.vue';
 import FetchData from 'src/components/FetchData.vue';
-import RightMenu from 'src/components/common/RightMenu.vue';
 import WorkerFilter from './WorkerFilter.vue';
 import { useState } from 'src/composables/useState';
 import axios from 'axios';
 import VnSelectWorker from 'src/components/common/VnSelectWorker.vue';
-
+import VnSection from 'src/components/common/VnSection.vue';
 const { t } = useI18n();
 const tableRef = ref();
 const { viewSummary } = useSummaryDialog();
@@ -31,6 +29,7 @@ const postcodesOptions = ref([]);
 const user = useState().getUser();
 const defaultPayMethod = ref();
 const bankEntitiesRef = ref();
+const dataKey = 'WorkerList';
 const columns = computed(() => [
     {
         align: 'left',
@@ -170,11 +169,6 @@ async function autofillBic(worker) {
 }
 </script>
 <template>
-    <VnSearchbar
-        data-key="WorkerList"
-        :label="t('Search worker')"
-        :info="t('You can search by worker id or name')"
-    />
     <FetchData
         url="Companies"
         @on-fetch="(data) => (companiesOptions = data)"
@@ -191,16 +185,25 @@ async function autofillBic(worker) {
         @on-fetch="(data) => (bankEntitiesOptions = data)"
         auto-load
     />
-    <RightMenu>
-        <template #right-panel>
+
+    <VnSection
+        :data-key="dataKey"
+        :columns="columns"
+        prefix="workerSearch"
+        :array-data-props="{
+            url: 'Workers/filter',
+            order: ['id DESC'],
+            exprBuilder,
+        }"
+    >
+        <template #rightMenu>
             <WorkerFilter data-key="WorkerList" />
         </template>
-    </RightMenu>
+        <template #body>
             <VnTable
                 v-if="defaultPayMethod"
                 ref="tableRef"
-        data-key="WorkerList"
-        url="Workers/filter"
+                :data-key="dataKey"
                 :create="{
                     urlCreate: 'Workers/new',
                     title: t('Create worker'),
@@ -211,11 +214,10 @@ async function autofillBic(worker) {
                         isFreelance: false,
                     },
                 }"
-        :columns="columns"
                 default-mode="table"
+                :columns="columns"
                 redirect="worker"
                 :right-search="false"
-        :order="['id DESC']"
             >
                 <template #more-create-dialog="{ data }">
                     <div class="q-pa-lg full-width">
@@ -243,10 +245,16 @@ async function autofillBic(worker) {
                                 :label="t('worker.create.lastName')"
                                 @update:model-value="generateCodeUser(data)"
                             />
-                    <VnInput v-model="data.code" :label="t('worker.create.code')" />
+                            <VnInput
+                                v-model="data.code"
+                                :label="t('worker.create.code')"
+                            />
                         </VnRow>
                         <VnRow>
-                    <VnInput v-model="data.name" :label="t('worker.create.webUser')" />
+                            <VnInput
+                                v-model="data.name"
+                                :label="t('worker.create.webUser')"
+                            />
                             <VnInput
                                 v-model="data.email"
                                 type="email"
@@ -283,9 +291,13 @@ async function autofillBic(worker) {
                         <VnRow>
                             <VnLocation
                                 :roles-allowed-to-create="['deliveryAssistant']"
-                        :acls="[{ model: 'Town', props: '*', accessType: 'WRITE' }]"
+                                :acls="[
+                                    { model: 'Town', props: '*', accessType: 'WRITE' },
+                                ]"
                                 :options="postcodesOptions"
-                        @update:model-value="(location) => handleLocation(data, location)"
+                                @update:model-value="
+                                    (location) => handleLocation(data, location)
+                                "
                                 :disable="data.isFreelance"
                             >
                             </VnLocation>
@@ -308,7 +320,9 @@ async function autofillBic(worker) {
                                 map-options
                                 hide-selected
                                 :disable="data.isFreelance"
-                        @update:model-value="(val) => !val && delete data.payMethodFk"
+                                @update:model-value="
+                                    (val) => !val && delete data.payMethodFk
+                                "
                             />
                             <VnInput
                                 v-model="data.iban"
@@ -318,7 +332,9 @@ async function autofillBic(worker) {
                             >
                                 <template #append>
                                     <QIcon name="info" class="cursor-info">
-                                <QTooltip>{{ t('components.iban_tooltip') }}</QTooltip>
+                                        <QTooltip>{{
+                                            t('components.iban_tooltip')
+                                        }}</QTooltip>
                                     </QIcon>
                                 </template>
                             </VnInput>
@@ -331,7 +347,13 @@ async function autofillBic(worker) {
                                 option-label="name"
                                 option-value="id"
                                 hide-selected
-                        :acls="[{ model: 'BankEntity', props: '*', accessType: 'WRITE' }]"
+                                :acls="[
+                                    {
+                                        model: 'BankEntity',
+                                        props: '*',
+                                        accessType: 'WRITE',
+                                    },
+                                ]"
                                 :disable="data.isFreelance"
                                 @update:model-value="autofillBic(data)"
                                 :filter-options="['bic', 'name']"
@@ -358,6 +380,8 @@ async function autofillBic(worker) {
                     </div>
                 </template>
             </VnTable>
+        </template>
+    </VnSection>
 </template>
 
 <i18n>

src/pages/Worker/locale/en.yml

@@ -1,3 +1,6 @@
+workerSearch:
+    search: Search worker
+    searchInfo: Search worker by id or name
 passwordRequirements: 'The password must have at least { length } length characters, {nAlpha} alphabetic characters, {nUpper} capital letters, {nDigits} digits and {nPunct} symbols (Ex: $%&.)\n'
 tableColumns:
     id: ID

src/pages/Worker/locale/es.yml

@@ -1,5 +1,6 @@
-Search worker: Buscar trabajador
-You can search by worker id or name: Puedes buscar por id o nombre del trabajador
+workerSearch:
+    search: Buscar trabajador
+    searchInfo: Buscar trabajador por id o nombre
 Locker: Taquilla
 Internal: Interno
 External: Externo

src/router/modules/worker.js

@@ -1,19 +1,12 @@
 import { RouterView } from 'vue-router';
 
-export default {
-    path: '/worker',
-    name: 'Worker',
+const workerCard = {
+    name: 'WorkerCard',
+    path: ':id',
+    component: () => import('src/pages/Worker/Card/WorkerCard.vue'),
+    redirect: { name: 'WorkerSummary' },
     meta: {
-        title: 'workers',
-        icon: 'vn:worker',
-        moduleName: 'Worker',
-        keyBinding: 'w',
-    },
-    component: RouterView,
-    redirect: { name: 'WorkerMain' },
-    menus: {
-        main: ['WorkerList', 'WorkerDepartment'],
-        card: [
+        menu: [
             'WorkerBasicData',
             'WorkerNotes',
             'WorkerPda',
@@ -31,47 +24,6 @@ export default {
             'WorkerOperator',
         ],
     },
-    children: [
-        {
-            path: '',
-            name: 'WorkerMain',
-            component: () => import('src/components/common/VnModule.vue'),
-            redirect: { name: 'WorkerList' },
-            children: [
-                {
-                    path: 'list',
-                    name: 'WorkerList',
-                    meta: {
-                        title: 'list',
-                        icon: 'view_list',
-                    },
-                    component: () => import('src/pages/Worker/WorkerList.vue'),
-                },
-                {
-                    path: 'department',
-                    name: 'WorkerDepartment',
-                    meta: {
-                        title: 'department',
-                        icon: 'vn:greuge',
-                    },
-                    component: () => import('src/pages/Worker/WorkerDepartment.vue'),
-                },
-                {
-                    path: 'create',
-                    name: 'WorkerCreate',
-                    meta: {
-                        title: 'workerCreate',
-                        icon: 'add',
-                    },
-                    component: () => import('src/pages/Worker/WorkerCreate.vue'),
-                },
-            ],
-        },
-        {
-            name: 'WorkerCard',
-            path: ':id',
-            component: () => import('src/pages/Worker/Card/WorkerCard.vue'),
-            redirect: { name: 'WorkerSummary' },
     children: [
         {
             name: 'WorkerSummary',
@@ -236,6 +188,63 @@ export default {
             component: () => import('src/pages/Worker/Card/WorkerOperator.vue'),
         },
     ],
+};
+
+export default {
+    name: 'Worker',
+    path: '/worker',
+    meta: {
+        title: 'workers',
+        icon: 'vn:worker',
+        moduleName: 'Worker',
+        keyBinding: 'w',
+        menu: ['WorkerList', 'WorkerDepartment'],
+    },
+    component: RouterView,
+    redirect: { name: 'WorkerMain' },
+    children: [
+        {
+            path: '',
+            name: 'WorkerMain',
+            component: () => import('src/components/common/VnModule.vue'),
+            redirect: { name: 'WorkerIndexMain' },
+            children: [
+                {
+                    path: '',
+                    name: 'WorkerIndexMain',
+                    redirect: { name: 'WorkerList' },
+                    component: () => import('src/pages/Worker/WorkerList.vue'),
+                    children: [
+                        {
+                            name: 'WorkerList',
+                            path: 'list',
+                            meta: {
+                                title: 'list',
+                                icon: 'view_list',
+                            },
+                        },
+                        workerCard,
+                    ]
+                },
+                {
+                    path: 'department',
+                    name: 'WorkerDepartment',
+                    meta: {
+                        title: 'department',
+                        icon: 'vn:greuge',
+                    },
+                    component: () => import('src/pages/Worker/WorkerDepartment.vue'),
+                },
+                {
+                    path: 'create',
+                    name: 'WorkerCreate',
+                    meta: {
+                        title: 'workerCreate',
+                        icon: 'add',
+                    },
+                    component: () => import('src/pages/Worker/WorkerCreate.vue'),
+                },
+            ],
         },
     ],
 };