Merge pull request 'refactor: #8322 changed Worker component to use VnSection/VnCardBeta' (!1152) from 8322-worker into dev

Reviewed-on: #1152
Reviewed-by: Alex Moreno <alexm@verdnatura.es>

src/pages/Department/Card/DepartmentCard.vue

@@ -1,13 +1,13 @@
 <script setup>
-import VnCard from 'components/common/VnCard.vue';
+import VnCardBeta from 'components/common/VnCardBeta.vue';
 import DepartmentDescriptor from 'pages/Department/Card/DepartmentDescriptor.vue';
 </script>
 <template>
-    <VnCard
+    <VnCardBeta
         class="q-pa-md column items-center"
         v-bind="{ ...$attrs }"
         data-key="Department"
         base-url="Departments"
         :descriptor="DepartmentDescriptor"
     />
-</template>
+</template>

src/pages/Department/Card/DepartmentSummary.vue

@@ -40,7 +40,7 @@ onMounted(async () => {
         <template #body="{ entity: department }">
             <QCard class="column">
                 <VnTitle
-                    :url="`#/department/department/${entityId}/basic-data`"
+                    :url="`#/worker/department/${entityId}/basic-data`"
                     :text="t('Basic data')"
                 />
                 <div class="full-width row wrap justify-between content-between">

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
+    <VnCardBeta data-key="Worker" custom-url="Workers/summary" :descriptor="WorkerDescriptor" />
-        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"
-    />
 </template>

src/pages/Worker/WorkerCreate.vue

@@ -1,254 +0,0 @@
-<script setup>
-import { onBeforeMount, ref } from 'vue';
-import { useI18n } from 'vue-i18n';
-import axios from 'axios';
-import VnRow from 'components/ui/VnRow.vue';
-import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
-import VnInputDate from 'components/common/VnInputDate.vue';
-import VnSelect from 'src/components/common/VnSelect.vue';
-import VnLocation from 'src/components/common/VnLocation.vue';
-import VnInput from 'src/components/common/VnInput.vue';
-import VnSelectDialog from 'src/components/common/VnSelectDialog.vue';
-import FetchData from 'components/FetchData.vue';
-import FormModel from 'components/FormModel.vue';
-import CreateBankEntityForm from 'src/components/CreateBankEntityForm.vue';
-import VnRadio from 'src/components/common/VnRadio.vue';
-import { useState } from 'src/composables/useState';
-import VnSelectWorker from 'src/components/common/VnSelectWorker.vue';
-
-const { t } = useI18n();
-const user = useState().getUser();
-
-const companiesOptions = ref([]);
-const payMethodsOptions = ref([]);
-const bankEntitiesOptions = ref([]);
-const formData = ref({ companyFk: user.value.companyFk, isFreelance: false });
-const defaultPayMethod = ref();
-
-onBeforeMount(async () => {
-    defaultPayMethod.value = (
-        await axios.get('WorkerConfigs/findOne', {
-            params: { field: ['payMethodFk'] },
-        })
-    ).data.payMethodFk;
-    formData.value.payMethodFk = defaultPayMethod.value;
-});
-
-function handleLocation(data, location) {
-    const { town, code, provinceFk, countryFk } = location ?? {};
-    data.postcode = code;
-    data.city = town;
-    data.provinceFk = provinceFk;
-    data.countryFk = countryFk;
-}
-
-function generateCodeUser(worker) {
-    if (!worker.firstName || !worker.lastNames) return;
-
-    const totalName = worker.firstName.concat(' ' + worker.lastNames).toLowerCase();
-    const totalNameArray = totalName.split(' ');
-    let newCode = '';
-
-    for (let part of totalNameArray) newCode += part.charAt(0);
-
-    worker.code = newCode.toUpperCase().slice(0, 3);
-    worker.name = totalNameArray[0] + newCode.slice(1);
-
-    if (!worker.companyFk) worker.companyFk = user.companyFk;
-}
-
-async function autofillBic(worker) {
-    if (!worker || !worker.iban) return;
-
-    let bankEntityId = parseInt(worker.iban.substr(4, 4));
-    let filter = { where: { id: bankEntityId } };
-
-    const { data } = await axios.get(`BankEntities`, { params: { filter } });
-    const hasData = data && data[0];
-    if (hasData) worker.bankEntityFk = data[0].id;
-    else if (!hasData) worker.bankEntityFk = undefined;
-}
-</script>
-<template>
-    <FetchData
-        url="Companies"
-        @on-fetch="(data) => (companiesOptions = data)"
-        auto-load
-    />
-    <FetchData
-        url="Paymethods"
-        @on-fetch="(data) => (payMethodsOptions = data)"
-        auto-load
-    />
-    <FetchData
-        url="BankEntities"
-        @on-fetch="(data) => (bankEntitiesOptions = data)"
-        auto-load
-    />
-    <QPage>
-        <VnSubToolbar>
-            <template #st-data>
-                <VnRadio
-                    v-model="formData.isFreelance"
-                    :val="false"
-                    :label="`${t('Internal')}`"
-                    @update:model-value="formData.payMethodFk = defaultPayMethod"
-                />
-                <VnRadio
-                    v-model="formData.isFreelance"
-                    :val="true"
-                    :label="`${t('External')}`"
-                    @update:model-value="delete formData.payMethodFk"
-                />
-            </template>
-        </VnSubToolbar>
-        <FormModel
-            url-create="Workers/new"
-            model="worker"
-            :form-initial-data="formData"
-            @on-data-saved="(__, { id }) => $router.push({ path: `/worker/${id}` })"
-        >
-            <template #form="{ data, validate }">
-                <VnRow>
-                    <VnInput
-                        v-model="data.firstName"
-                        :label="t('globals.name')"
-                        :rules="validate('Worker.firstName')"
-                        @update:model-value="generateCodeUser(data)"
-                    />
-                    <VnInput
-                        v-model="data.lastNames"
-                        :label="t('worker.create.lastName')"
-                        :rules="validate('Worker.lastNames')"
-                        @update:model-value="generateCodeUser(data)"
-                    />
-                    <VnInput
-                        v-model="data.code"
-                        :label="t('worker.create.code')"
-                        :rules="validate('Worker.code')"
-                    />
-                </VnRow>
-                <VnRow>
-                    <VnInput
-                        v-model="data.name"
-                        :label="t('worker.create.webUser')"
-                        :rules="validate('Worker.name')"
-                    />
-                    <VnInput
-                        v-model="data.email"
-                        :label="t('worker.create.personalEmail')"
-                        :rules="validate('Worker.email')"
-                    />
-                </VnRow>
-                <VnRow>
-                    <VnSelect
-                        :label="t('globals.company')"
-                        v-model="data.companyFk"
-                        :options="companiesOptions"
-                        option-value="id"
-                        option-label="code"
-                        hide-selected
-                        :rules="validate('Worker.company')"
-                    />
-                    <VnSelectWorker
-                        :label="t('worker.summary.boss')"
-                        v-model="data.bossFk"
-                        :rules="validate('Worker.boss')"
-                    />
-                </VnRow>
-                <VnRow>
-                    <VnInput
-                        v-model="data.fi"
-                        :label="t('worker.create.fi')"
-                        :rules="validate('Worker.fi')"
-                    />
-                    <VnInputDate
-                        v-model="data.birth"
-                        :label="t('worker.create.birth')"
-                        :rules="validate('Worker.birth')"
-                        :disable="formData.isFreelance"
-                    />
-                    <VnInput
-                        v-model="data.phone"
-                        :label="t('globals.phone')"
-                        :rules="validate('Worker.phone')"
-                        :disable="formData.isFreelance"
-                    />
-                </VnRow>
-                <VnRow>
-                    <VnLocation
-                        :rules="validate('Worker.postcode')"
-                        :roles-allowed-to-create="['deliveryAssistant']"
-                        @update:model-value="(location) => handleLocation(data, location)"
-                        :disable="formData.isFreelance"
-                    >
-                    </VnLocation>
-                </VnRow>
-                <VnRow>
-                    <VnInput
-                        :label="t('globals.street')"
-                        v-model="data.street"
-                        :rules="validate('Worker.street')"
-                        :disable="formData.isFreelance"
-                    />
-                </VnRow>
-                <VnRow>
-                    <VnSelect
-                        :label="t('worker.create.payMethods')"
-                        v-model="data.payMethodFk"
-                        :options="payMethodsOptions"
-                        option-value="id"
-                        option-label="name"
-                        map-options
-                        hide-selected
-                        :rules="validate('Worker.payMethodFk')"
-                        :disable="formData.isFreelance"
-                        @update:model-value="(val) => !val && delete formData.payMethodFk"
-                    />
-                    <VnInput
-                        v-model="data.iban"
-                        :label="t('worker.create.iban')"
-                        :rules="validate('Worker.iban')"
-                        :disable="formData.isFreelance"
-                        @update:model-value="autofillBic(data)"
-                    >
-                        <template #append>
-                            <QIcon name="info" class="cursor-info">
-                                <QTooltip>{{ t('components.iban_tooltip') }}</QTooltip>
-                            </QIcon>
-                        </template>
-                    </VnInput>
-                    <VnSelectDialog
-                        :label="t('worker.create.bankEntity')"
-                        v-model="data.bankEntityFk"
-                        :options="bankEntitiesOptions"
-                        option-label="name"
-                        option-value="id"
-                        hide-selected
-                        :roles-allowed-to-create="['salesAssistant', 'hr']"
-                        :rules="validate('Worker.bankEntity')"
-                        :disable="formData.isFreelance"
-                        @update:model-value="autofillBic(data)"
-                        :filter-options="['bic', 'name']"
-                    >
-                        <template #form>
-                            <CreateBankEntityForm
-                                @on-data-saved="(data) => bankEntitiesOptions.push(data)"
-                            />
-                        </template>
-                        <template #option="scope">
-                            <QItem v-bind="scope.itemProps">
-                                <QItemSection v-if="scope.opt">
-                                    <QItemLabel
-                                        >{{ scope.opt.bic }}
-                                        {{ scope.opt.name }}</QItemLabel
-                                    >
-                                </QItemSection>
-                            </QItem>
-                        </template>
-                    </VnSelectDialog>
-                </VnRow>
-            </template>
-        </FormModel>
-    </QPage>
-</template>

src/pages/Worker/WorkerDepartment.vue

@@ -1,11 +1,16 @@
 <script setup>
+import VnSection from 'src/components/common/VnSection.vue';
 import WorkerDepartmentTree from './WorkerDepartmentTree.vue';
 </script>
 
 <template>
-    <QPage class="column items-center q-pa-md">
+    <VnSection data-key="WorkerDepartment">
-        <WorkerDepartmentTree />
+        <template #body>
-    </QPage>
+            <div class="flex flex-center q-pa-md">
+                <WorkerDepartmentTree />
+            </div>
+        </template>
+    </VnSection>
 </template>
 
 <i18n>

src/pages/Worker/WorkerDepartmentTree.vue

@@ -111,18 +111,16 @@ function handleEvent(type, event, node) {
     switch (type) {
         case 'path':
             state.set('TreeState', lastId);
-            node.id && router.push({ path: `/department/department/${node.id}/summary` });
+            node.id && router.push({ path: `/worker/department/${node.id}/summary` });
             break;
 
         case 'tab':
             state.set('TreeState', lastId);
-            node.id &&
+            node.id && window.open(`#/worker/department/${node.id}/summary`, '_blank');
-                window.open(`#/department/department/${node.id}/summary`, '_blank');
             break;
 
         default:
-            node.id &&
+            node.id && router.push({ path: `#/worker/department/${node.id}/summary` });
-                router.push({ path: `#/department/department/${node.id}/summary` });
             break;
     }
 }

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,173 +185,202 @@ 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'],
+        }"
+    >
+        <template #rightMenu>
             <WorkerFilter data-key="WorkerList" />
         </template>
-    </RightMenu>
+        <template #body>
-    <VnTable
+            <VnTable
-        v-if="defaultPayMethod"
+                v-if="defaultPayMethod"
-        ref="tableRef"
+                ref="tableRef"
-        data-key="WorkerList"
+                :data-key="dataKey"
-        url="Workers/filter"
+                :create="{
-        :create="{
+                    urlCreate: 'Workers/new',
-            urlCreate: 'Workers/new',
+                    title: t('Create worker'),
-            title: t('Create worker'),
+                    onDataSaved: ({ id }) => tableRef.redirect(id),
-            onDataSaved: ({ id }) => tableRef.redirect(id),
+                    formInitialData: {
-            formInitialData: {
+                        payMethodFk: defaultPayMethod,
-                payMethodFk: defaultPayMethod,
+                        companyFk: user.companyFk,
-                companyFk: user.companyFk,
+                        isFreelance: false,
-                isFreelance: false,
+                    },
-            },
+                }"
-        }"
+                default-mode="table"
-        :columns="columns"
+                :columns="columns"
-        default-mode="table"
+                redirect="worker"
-        redirect="worker"
+                :right-search="false"
-        :right-search="false"
+            >
-        :order="['id DESC']"
+                <template #more-create-dialog="{ data }">
-    >
+                    <div class="q-pa-lg full-width">
-        <template #more-create-dialog="{ data }">
+                        <VnRadio
-            <div class="q-pa-lg full-width">
+                            v-model="data.isFreelance"
-                <VnRadio
+                            :val="false"
-                    v-model="data.isFreelance"
+                            :label="`${t('Internal')}`"
-                    :val="false"
+                            @update:model-value="data.payMethodFk = defaultPayMethod"
-                    :label="`${t('Internal')}`"
+                        />
-                    @update:model-value="data.payMethodFk = defaultPayMethod"
+                        <VnRadio
-                />
+                            v-model="data.isFreelance"
-                <VnRadio
+                            :val="true"
-                    v-model="data.isFreelance"
+                            :label="`${t('External')}`"
-                    :val="true"
+                            @update:model-value="delete data.payMethodFk"
-                    :label="`${t('External')}`"
+                        />
-                    @update:model-value="delete data.payMethodFk"
+                        <VnRow>
-                />
+                            <VnInput
-                <VnRow>
+                                next
-                    <VnInput
+                                v-model="data.firstName"
-                        next
+                                :label="t('globals.name')"
-                        v-model="data.firstName"
+                                @update:model-value="generateCodeUser(data)"
-                        :label="t('globals.name')"
+                            />
-                        @update:model-value="generateCodeUser(data)"
+                            <VnInput
-                    />
+                                v-model="data.lastNames"
-                    <VnInput
+                                :label="t('worker.create.lastName')"
-                        v-model="data.lastNames"
+                                @update:model-value="generateCodeUser(data)"
-                        :label="t('worker.create.lastName')"
+                            />
-                        @update:model-value="generateCodeUser(data)"
+                            <VnInput
-                    />
+                                v-model="data.code"
-                    <VnInput v-model="data.code" :label="t('worker.create.code')" />
+                                :label="t('worker.create.code')"
-                </VnRow>
+                            />
-                <VnRow>
+                        </VnRow>
-                    <VnInput v-model="data.name" :label="t('worker.create.webUser')" />
+                        <VnRow>
-                    <VnInput
+                            <VnInput
-                        v-model="data.email"
+                                v-model="data.name"
-                        type="email"
+                                :label="t('worker.create.webUser')"
-                        :label="t('worker.create.personalEmail')"
+                            />
-                    />
+                            <VnInput
-                </VnRow>
+                                v-model="data.email"
-                <VnRow>
+                                type="email"
-                    <VnSelect
+                                :label="t('worker.create.personalEmail')"
-                        :label="t('globals.company')"
+                            />
-                        v-model="data.companyFk"
+                        </VnRow>
-                        :options="companiesOptions"
+                        <VnRow>
-                        option-value="id"
+                            <VnSelect
-                        option-label="code"
+                                :label="t('globals.company')"
-                        hide-selected
+                                v-model="data.companyFk"
-                    />
+                                :options="companiesOptions"
-                    <VnSelectWorker
+                                option-value="id"
-                        :label="t('worker.summary.boss')"
+                                option-label="code"
-                        v-model="data.bossFk"
+                                hide-selected
-                    />
+                            />
-                </VnRow>
+                            <VnSelectWorker
-                <VnRow>
+                                :label="t('worker.summary.boss')"
-                    <VnInput v-model="data.fi" :label="t('worker.create.fi')" />
+                                v-model="data.bossFk"
-                    <VnInputDate
+                            />
-                        v-model="data.birth"
+                        </VnRow>
-                        :label="t('worker.create.birth')"
+                        <VnRow>
-                        :disable="data.isFreelance"
+                            <VnInput v-model="data.fi" :label="t('worker.create.fi')" />
-                    />
+                            <VnInputDate
-                    <VnInput
+                                v-model="data.birth"
-                        v-model="data.phone"
+                                :label="t('worker.create.birth')"
-                        :label="t('globals.phone')"
+                                :disable="data.isFreelance"
-                        :disable="data.isFreelance"
+                            />
-                    />
+                            <VnInput
-                </VnRow>
+                                v-model="data.phone"
-                <VnRow>
+                                :label="t('globals.phone')"
-                    <VnLocation
+                                :disable="data.isFreelance"
-                        :roles-allowed-to-create="['deliveryAssistant']"
+                            />
-                        :acls="[{ model: 'Town', props: '*', accessType: 'WRITE' }]"
+                        </VnRow>
-                        :options="postcodesOptions"
+                        <VnRow>
-                        @update:model-value="(location) => handleLocation(data, location)"
+                            <VnLocation
-                        :disable="data.isFreelance"
+                                :roles-allowed-to-create="['deliveryAssistant']"
-                    >
+                                :acls="[
-                    </VnLocation>
+                                    { model: 'Town', props: '*', accessType: 'WRITE' },
-                </VnRow>
+                                ]"
-                <VnRow>
+                                :options="postcodesOptions"
-                    <VnInput
+                                @update:model-value="
-                        :label="t('globals.street')"
+                                    (location) => handleLocation(data, location)
-                        :model-value="uppercaseStreetModel(data).get()"
+                                "
-                        @update:model-value="uppercaseStreetModel(data).set"
+                                :disable="data.isFreelance"
-                        :disable="data.isFreelance"
+                            >
-                    />
+                            </VnLocation>
-                </VnRow>
+                        </VnRow>
-                <VnRow>
+                        <VnRow>
-                    <VnSelect
+                            <VnInput
-                        :label="t('worker.create.payMethods')"
+                                :label="t('globals.street')"
-                        v-model="data.payMethodFk"
+                                :model-value="uppercaseStreetModel(data).get()"
-                        :options="payMethodsOptions"
+                                @update:model-value="uppercaseStreetModel(data).set"
-                        option-value="id"
+                                :disable="data.isFreelance"
-                        option-label="name"
+                            />
-                        map-options
+                        </VnRow>
-                        hide-selected
+                        <VnRow>
-                        :disable="data.isFreelance"
+                            <VnSelect
-                        @update:model-value="(val) => !val && delete data.payMethodFk"
+                                :label="t('worker.create.payMethods')"
-                    />
+                                v-model="data.payMethodFk"
-                    <VnInput
+                                :options="payMethodsOptions"
-                        v-model="data.iban"
+                                option-value="id"
-                        :label="t('worker.create.iban')"
+                                option-label="name"
-                        :disable="data.isFreelance"
+                                map-options
-                        @update:model-value="autofillBic(data)"
+                                hide-selected
-                    >
+                                :disable="data.isFreelance"
-                        <template #append>
+                                @update:model-value="
-                            <QIcon name="info" class="cursor-info">
+                                    (val) => !val && delete data.payMethodFk
-                                <QTooltip>{{ t('components.iban_tooltip') }}</QTooltip>
-                            </QIcon>
-                        </template>
-                    </VnInput>
-                </VnRow>
-                <VnRow>
-                    <VnSelectDialog
-                        :label="t('worker.create.bankEntity')"
-                        v-model="data.bankEntityFk"
-                        :options="bankEntitiesOptions"
-                        option-label="name"
-                        option-value="id"
-                        hide-selected
-                        :acls="[{ model: 'BankEntity', props: '*', accessType: 'WRITE' }]"
-                        :disable="data.isFreelance"
-                        @update:model-value="autofillBic(data)"
-                        :filter-options="['bic', 'name']"
-                    >
-                        <template #form>
-                            <CreateBankEntityForm
-                                @on-data-saved="
-                                    (_, resp) => handleNewBankEntity(data, resp)
                                 "
                             />
-                        </template>
+                            <VnInput
-                        <template #option="scope">
+                                v-model="data.iban"
-                            <QItem v-bind="scope.itemProps">
+                                :label="t('worker.create.iban')"
-                                <QItemSection v-if="scope.opt">
+                                :disable="data.isFreelance"
-                                    <QItemLabel
+                                @update:model-value="autofillBic(data)"
-                                        >{{ scope.opt.bic }}
+                            >
-                                        {{ scope.opt.name }}</QItemLabel
+                                <template #append>
-                                    >
+                                    <QIcon name="info" class="cursor-info">
-                                </QItemSection>
+                                        <QTooltip>{{
-                            </QItem>
+                                            t('components.iban_tooltip')
-                        </template>
+                                        }}</QTooltip>
-                    </VnSelectDialog>
+                                    </QIcon>
-                </VnRow>
+                                </template>
-            </div>
+                            </VnInput>
+                        </VnRow>
+                        <VnRow>
+                            <VnSelectDialog
+                                :label="t('worker.create.bankEntity')"
+                                v-model="data.bankEntityFk"
+                                :options="bankEntitiesOptions"
+                                option-label="name"
+                                option-value="id"
+                                hide-selected
+                                :acls="[
+                                    {
+                                        model: 'BankEntity',
+                                        props: '*',
+                                        accessType: 'WRITE',
+                                    },
+                                ]"
+                                :disable="data.isFreelance"
+                                @update:model-value="autofillBic(data)"
+                                :filter-options="['bic', 'name']"
+                            >
+                                <template #form>
+                                    <CreateBankEntityForm
+                                        @on-data-saved="
+                                            (_, resp) => handleNewBankEntity(data, resp)
+                                        "
+                                    />
+                                </template>
+                                <template #option="scope">
+                                    <QItem v-bind="scope.itemProps">
+                                        <QItemSection v-if="scope.opt">
+                                            <QItemLabel
+                                                >{{ scope.opt.bic }}
+                                                {{ scope.opt.name }}</QItemLabel
+                                            >
+                                        </QItemSection>
+                                    </QItem>
+                                </template>
+                            </VnSelectDialog>
+                        </VnRow>
+                    </div>
+                </template>
+            </VnTable>
         </template>
-    </VnTable>
+    </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
+workerSearch:
-You can search by worker id or name: Puedes buscar por id o nombre del trabajador
+    search: Buscar trabajador
+    searchInfo: Buscar trabajador por id o nombre
 Locker: Taquilla
 Internal: Interno
 External: Externo

src/router/modules/department.js

@@ -1,47 +0,0 @@
-import { RouterView } from 'vue-router';
-
-export default {
-    path: '/department',
-    name: 'Department',
-    meta: {
-        title: 'department',
-        icon: 'vn:greuge',
-        moduleName: 'Department',
-    },
-    component: RouterView,
-    redirect: { name: 'WorkerDepartment' },
-    menus: {
-        main: [],
-        card: ['DepartmentBasicData'],
-    },
-    children: [
-        {
-            name: 'DepartmentCard',
-            path: 'department/:id',
-            component: () => import('src/pages/Department/Card/DepartmentCard.vue'),
-            redirect: { name: 'DepartmentSummary' },
-            children: [
-                {
-                    name: 'DepartmentSummary',
-                    path: 'summary',
-                    meta: {
-                        title: 'summary',
-                        icon: 'launch',
-                    },
-                    component: () =>
-                        import('src/pages/Department/Card/DepartmentSummary.vue'),
-                },
-                {
-                    name: 'DepartmentBasicData',
-                    path: 'basic-data',
-                    meta: {
-                        title: 'basicData',
-                        icon: 'vn:settings',
-                    },
-                    component: () =>
-                        import('src/pages/Department/Card/DepartmentBasicData.vue'),
-                },
-            ],
-        },
-    ],
-};

src/router/modules/index.js

@@ -11,7 +11,6 @@ import Route from './route';
 import Supplier from './supplier';
 import Travel from './travel';
 import Order from './order';
-import Department from './department';
 import Entry from './entry';
 import roadmap from './roadmap';
 import Parking from './parking';
@@ -35,7 +34,6 @@ export default [
     Travel,
     Order,
     invoiceIn,
-    Department,
     Entry,
     roadmap,
     Parking,

src/router/modules/worker.js

@@ -1,19 +1,12 @@
 import { RouterView } from 'vue-router';
 
-export default {
+const workerCard = {
-    path: '/worker',
+    name: 'WorkerCard',
-    name: 'Worker',
+    path: ':id',
+    component: () => import('src/pages/Worker/Card/WorkerCard.vue'),
+    redirect: { name: 'WorkerSummary' },
     meta: {
-        title: 'workers',
+        menu: [
-        icon: 'vn:worker',
-        moduleName: 'Worker',
-        keyBinding: 'w',
-    },
-    component: RouterView,
-    redirect: { name: 'WorkerMain' },
-    menus: {
-        main: ['WorkerList', 'WorkerDepartment'],
-        card: [
             'WorkerBasicData',
             'WorkerNotes',
             'WorkerPda',
@@ -33,207 +26,247 @@ export default {
     },
     children: [
         {
-            path: '',
+            name: 'WorkerSummary',
-            name: 'WorkerMain',
+            path: 'summary',
-            component: () => import('src/components/common/VnModule.vue'),
+            meta: {
-            redirect: { name: 'WorkerList' },
+                title: 'summary',
+                icon: 'launch',
+            },
+            component: () => import('src/pages/Worker/Card/WorkerSummary.vue'),
+        },
+        {
+            path: 'basic-data',
+            name: 'WorkerBasicData',
+            meta: {
+                title: 'basicData',
+                icon: 'vn:settings',
+                acls: [
+                    {
+                        model: 'Worker',
+                        props: 'updateAttributes',
+                        accessType: 'WRITE',
+                    },
+                ],
+            },
+            component: () => import('src/pages/Worker/Card/WorkerBasicData.vue'),
+        },
+        {
+            path: 'notes',
+            name: 'NotesCard',
+            redirect: { name: 'WorkerNotes' },
             children: [
                 {
-                    path: 'list',
+                    path: '',
-                    name: 'WorkerList',
+                    name: 'WorkerNotes',
                     meta: {
-                        title: 'list',
+                        title: 'notes',
-                        icon: 'view_list',
+                        icon: 'vn:notes',
                     },
-                    component: () => import('src/pages/Worker/WorkerList.vue'),
+                    component: () => import('src/pages/Worker/Card/WorkerNotes.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',
+            name: 'WorkerTimeControl',
-            path: ':id',
+            path: 'time-control',
-            component: () => import('src/pages/Worker/Card/WorkerCard.vue'),
+            meta: {
-            redirect: { name: 'WorkerSummary' },
+                title: 'timeControl',
+                icon: 'access_time',
+            },
+            component: () => import('src/pages/Worker/Card/WorkerTimeControl.vue'),
+        },
+        {
+            name: 'WorkerCalendar',
+            path: 'calendar',
+            meta: {
+                title: 'calendar',
+                icon: 'calendar_today',
+            },
+            component: () => import('src/pages/Worker/Card/WorkerCalendar.vue'),
+        },
+        {
+            name: 'WorkerPda',
+            path: 'pda',
+            meta: {
+                title: 'pda',
+                icon: 'phone_android',
+            },
+            component: () => import('src/pages/Worker/Card/WorkerPda.vue'),
+        },
+        {
+            name: 'WorkerNotificationsManager',
+            path: 'notifications',
+            meta: {
+                title: 'notifications',
+                icon: 'notifications',
+            },
+            component: () =>
+                import('src/pages/Worker/Card/WorkerNotificationsManager.vue'),
+        },
+        {
+            path: 'pbx',
+            name: 'WorkerPBX',
+            meta: {
+                title: 'pbx',
+                icon: 'vn:pbx',
+            },
+            component: () => import('src/pages/Worker/Card/WorkerPBX.vue'),
+        },
+        {
+            name: 'WorkerDms',
+            path: 'dms',
+            meta: {
+                title: 'dms',
+                icon: 'cloud_upload',
+            },
+            component: () => import('src/pages/Worker/Card/WorkerDms.vue'),
+        },
+        {
+            name: 'WorkerLog',
+            path: 'log',
+            meta: {
+                title: 'log',
+                icon: 'vn:History',
+                acls: [{ model: 'WorkerLog', props: 'find', accessType: 'READ' }],
+            },
+            component: () => import('src/pages/Worker/Card/WorkerLog.vue'),
+        },
+        {
+            name: 'WorkerLocker',
+            path: 'locker',
+            meta: {
+                title: 'locker',
+                icon: 'lock',
+            },
+            component: () => import('src/pages/Worker/Card/WorkerLocker.vue'),
+        },
+        {
+            name: 'WorkerBalance',
+            path: 'balance',
+            meta: {
+                title: 'balance',
+                icon: 'balance',
+            },
+            component: () => import('src/pages/Worker/Card/WorkerBalance.vue'),
+        },
+        {
+            name: 'WorkerFormation',
+            path: 'formation',
+            meta: {
+                title: 'formation',
+                icon: 'clinical_notes',
+            },
+            component: () => import('src/pages/Worker/Card/WorkerFormation.vue'),
+        },
+        {
+            name: 'WorkerMedical',
+            path: 'medical',
+            meta: {
+                title: 'medical',
+                icon: 'medical_information',
+            },
+            component: () => import('src/pages/Worker/Card/WorkerMedical.vue'),
+        },
+        {
+            name: 'WorkerPit',
+            path: 'pit',
+            meta: {
+                title: 'pit',
+                icon: 'lock',
+            },
+            component: () => import('src/pages/Worker/Card/WorkerPit.vue'),
+        },
+        {
+            name: 'WorkerOperator',
+            path: 'operator',
+            meta: {
+                title: 'operator',
+                icon: 'person',
+            },
+            component: () => import('src/pages/Worker/Card/WorkerOperator.vue'),
+        },
+    ],
+};
+
+const departmentCard = {
+    name: 'DepartmentCard',
+    path: ':id',
+    component: () => import('src/pages/Department/Card/DepartmentCard.vue'),
+    redirect: { name: 'DepartmentSummary' },
+    meta: {
+        menu: ['DepartmentBasicData'],
+    },
+    children: [
+        {
+            path: 'summary',
+            name: 'DepartmentSummary',
+            meta: {
+                title: 'summary',
+                icon: 'launch',
+            },
+            component: () => import('src/pages/Department/Card/DepartmentSummary.vue'),
+        },
+        {
+            path: 'basic-data',
+            name: 'DepartmentBasicData',
+            meta: {
+                title: 'basicData',
+                icon: 'vn:settings',
+            },
+            component: () => import('src/pages/Department/Card/DepartmentBasicData.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: [
                 {
-                    name: 'WorkerSummary',
+                    path: '',
-                    path: 'summary',
+                    name: 'WorkerIndexMain',
-                    meta: {
+                    redirect: { name: 'WorkerList' },
-                        title: 'summary',
+                    component: () => import('src/pages/Worker/WorkerList.vue'),
-                        icon: 'launch',
-                    },
-                    component: () => import('src/pages/Worker/Card/WorkerSummary.vue'),
-                },
-                {
-                    path: 'basic-data',
-                    name: 'WorkerBasicData',
-                    meta: {
-                        title: 'basicData',
-                        icon: 'vn:settings',
-                        acls: [
-                            {
-                                model: 'Worker',
-                                props: 'updateAttributes',
-                                accessType: 'WRITE',
-                            },
-                        ],
-                    },
-                    component: () => import('src/pages/Worker/Card/WorkerBasicData.vue'),
-                },
-                {
-                    path: 'notes',
-                    name: 'NotesCard',
-                    redirect: { name: 'WorkerNotes' },
                     children: [
                         {
-                            path: '',
+                            name: 'WorkerList',
-                            name: 'WorkerNotes',
+                            path: 'list',
                             meta: {
-                                title: 'notes',
+                                title: 'list',
-                                icon: 'vn:notes',
+                                icon: 'view_list',
                             },
-                            component: () =>
-                                import('src/pages/Worker/Card/WorkerNotes.vue'),
                         },
+                        workerCard,
                     ],
                 },
                 {
-                    name: 'WorkerTimeControl',
+                    path: 'department',
-                    path: 'time-control',
+                    name: 'Department',
-                    meta: {
+                    redirect: { name: 'WorkerDepartment' },
-                        title: 'timeControl',
+                    component: () => import('src/pages/Worker/WorkerDepartment.vue'),
-                        icon: 'access_time',
+                    children: [
-                    },
+                        {
-                    component: () =>
+                            name: 'WorkerDepartment',
-                        import('src/pages/Worker/Card/WorkerTimeControl.vue'),
+                            path: 'list',
-                },
+                            meta: { title: 'department', icon: 'vn:greuge' },
-                {
+                        },
-                    name: 'WorkerCalendar',
+                        departmentCard,
-                    path: 'calendar',
+                    ],
-                    meta: {
-                        title: 'calendar',
-                        icon: 'calendar_today',
-                    },
-                    component: () => import('src/pages/Worker/Card/WorkerCalendar.vue'),
-                },
-                {
-                    name: 'WorkerPda',
-                    path: 'pda',
-                    meta: {
-                        title: 'pda',
-                        icon: 'phone_android',
-                    },
-                    component: () => import('src/pages/Worker/Card/WorkerPda.vue'),
-                },
-                {
-                    name: 'WorkerNotificationsManager',
-                    path: 'notifications',
-                    meta: {
-                        title: 'notifications',
-                        icon: 'notifications',
-                    },
-                    component: () =>
-                        import('src/pages/Worker/Card/WorkerNotificationsManager.vue'),
-                },
-                {
-                    path: 'pbx',
-                    name: 'WorkerPBX',
-                    meta: {
-                        title: 'pbx',
-                        icon: 'vn:pbx',
-                    },
-                    component: () => import('src/pages/Worker/Card/WorkerPBX.vue'),
-                },
-                {
-                    name: 'WorkerDms',
-                    path: 'dms',
-                    meta: {
-                        title: 'dms',
-                        icon: 'cloud_upload',
-                    },
-                    component: () => import('src/pages/Worker/Card/WorkerDms.vue'),
-                },
-                {
-                    name: 'WorkerLog',
-                    path: 'log',
-                    meta: {
-                        title: 'log',
-                        icon: 'vn:History',
-                        acls: [{ model: 'WorkerLog', props: 'find', accessType: 'READ' }],
-                    },
-                    component: () => import('src/pages/Worker/Card/WorkerLog.vue'),
-                },
-                {
-                    name: 'WorkerLocker',
-                    path: 'locker',
-                    meta: {
-                        title: 'locker',
-                        icon: 'lock',
-                    },
-                    component: () => import('src/pages/Worker/Card/WorkerLocker.vue'),
-                },
-                {
-                    name: 'WorkerBalance',
-                    path: 'balance',
-                    meta: {
-                        title: 'balance',
-                        icon: 'balance',
-                    },
-                    component: () => import('src/pages/Worker/Card/WorkerBalance.vue'),
-                },
-                {
-                    name: 'WorkerFormation',
-                    path: 'formation',
-                    meta: {
-                        title: 'formation',
-                        icon: 'clinical_notes',
-                    },
-                    component: () => import('src/pages/Worker/Card/WorkerFormation.vue'),
-                },
-                {
-                    name: 'WorkerMedical',
-                    path: 'medical',
-                    meta: {
-                        title: 'medical',
-                        icon: 'medical_information',
-                    },
-                    component: () => import('src/pages/Worker/Card/WorkerMedical.vue'),
-                },
-                {
-                    name: 'WorkerPit',
-                    path: 'pit',
-                    meta: {
-                        title: 'pit',
-                        icon: 'lock',
-                    },
-                    component: () => import('src/pages/Worker/Card/WorkerPit.vue'),
-                },
-                {
-                    name: 'WorkerOperator',
-                    path: 'operator',
-                    meta: {
-                        title: 'operator',
-                        icon: 'person',
-                    },
-                    component: () => import('src/pages/Worker/Card/WorkerOperator.vue'),
                 },
             ],
         },

src/router/routes.js

@@ -9,7 +9,6 @@ import invoiceIn from './modules/invoiceIn';
 import wagon from './modules/wagon';
 import supplier from './modules/supplier';
 import travel from './modules/travel';
-import department from './modules/department';
 import ItemType from './modules/itemType';
 import shelving from 'src/router/modules/shelving';
 import order from 'src/router/modules/order';
@@ -85,7 +84,6 @@ const routes = [
             route,
             supplier,
             travel,
-            department,
             roadmap,
             entry,
             parking,