src/i18n/locale/en.yml

@@ -341,6 +341,7 @@ globals:
         parking: Parking
         vehicleList: Vehicles
         vehicle: Vehicle
+        management: Worker management
     unsavedPopup:
         title: Unsaved changes will be lost
         subtitle: Are you sure exit without saving?

src/i18n/locale/es.yml

@@ -344,6 +344,7 @@ globals:
         parking: Parking
         vehicleList: Vehículos
         vehicle: Vehículo
+        management: Gestión de trabajadores
     unsavedPopup:
         title: Los cambios que no haya guardado se perderán
         subtitle: ¿Seguro que quiere salir sin guardar?

src/pages/Worker/WorkerFilter.vue

@@ -33,14 +33,6 @@ const getLocale = (label) => {
             </div>
         </template>
         <template #body="{ params }">
-            <QItem>
-                <QItemSection>
-                    <VnInput :label="t('FI')" v-model="params.fi" filled
-                        ><template #prepend>
-                            <QIcon name="badge" size="xs"></QIcon> </template
-                    ></VnInput>
-                </QItemSection>
-            </QItem>
             <QItem>
                 <QItemSection>
                     <VnInput :label="t('First Name')" v-model="params.firstName" filled />
@@ -112,7 +104,6 @@ es:
         lastName: Apellidos
         userName: Usuario
         extension: Extensión
-    FI: NIF
     First Name: Nombre
     Last Name: Apellidos
     User Name: Usuario

src/pages/Worker/WorkerManagement.vue

@@ -0,0 +1,114 @@
+<script setup>
+import { computed, onMounted } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import { useSummaryDialog } from 'src/composables/useSummaryDialog';
+import { useAcl } from 'src/composables/useAcl';
+
+import VnTable from 'components/VnTable/VnTable.vue';
+import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
+import WorkerSummary from './Card/WorkerSummary.vue';
+import RightMenu from 'src/components/common/RightMenu.vue';
+import WorkerManagementFilter from './WorkerManagementFilter.vue';
+
+const { t } = useI18n();
+const { viewSummary } = useSummaryDialog();
+const dataKey = 'ManagementList';
+
+const columns = computed(() => [
+    {
+        align: 'left',
+        label: t('tableColumns.firstName'),
+        name: 'firstName',
+        isTitle: true,
+        columnFilter: {
+            name: 'firstName',
+        },
+    },
+    {
+        align: 'left',
+        label: t('tableColumns.lastName'),
+        name: 'lastName',
+        columnFilter: {
+            name: 'lastName',
+        },
+    },
+    {
+        align: 'left',
+        label: t('management.NIF'),
+        name: 'fi',
+        columnFilter: {
+            name: 'fi',
+        },
+    },
+    {
+        align: 'left',
+        label: t('tableColumns.email'),
+        name: 'email',
+        columnFilter: {
+            name: 'email',
+        },
+    },
+    {
+        align: 'left',
+        label: t('management.ssn'),
+        labelAbbreviation: t('management.ssn'),
+        toolTip: t('management.completeSsn'),
+        name: 'SSN',
+        columnFilter: {
+            name: 'SSN',
+        },
+    },
+    {
+        align: 'left',
+        name: 'departmentFk',
+        label: t('tableColumns.department'),
+        columnFilter: {
+            component: 'select',
+            name: 'departmentFk',
+            attrs: {
+                url: 'Departments',
+            },
+        },
+        format: (row, dashIfEmpty) => dashIfEmpty(row.department),
+    },
+    {
+        align: 'right',
+        label: '',
+        name: 'tableActions',
+        actions: [
+            {
+                title: t('globals.pageTitles.summary'),
+                icon: 'preview',
+                action: (row) => viewSummary(row?.id, WorkerSummary),
+                isPrimary: true,
+            },
+        ],
+    },
+]);
+
+onMounted(() => {
+    const canAccess = useAcl().hasAcl('Worker', 'management', 'WRITE');
+});
+</script>
+<template>
+    <VnSearchbar
+        :data-key
+        url="Workers/filter"
+        :label="t('management.search')"
+        :info="t('management.searchInfo')"
+    />
+    <RightMenu>
+        <template #right-panel>
+            <WorkerManagementFilter :data-key />
+        </template>
+    </RightMenu>
+    <VnTable
+        ref="tableRef"
+        url="Workers/filter"
+        :columns="columns"
+        :data-key
+        :right-search="false"
+        order="id DESC"
+    />
+</template>

src/pages/Worker/WorkerManagementFilter.vue

@@ -0,0 +1,93 @@
+<script setup>
+import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import FetchData from 'components/FetchData.vue';
+import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
+
+const { t, te } = useI18n();
+const props = defineProps({
+    dataKey: {
+        type: String,
+        required: true,
+    },
+});
+
+const departments = ref();
+
+const getLocale = (label) => {
+    const globalLocale = `globals.params.${label}`;
+    return te(globalLocale) ? t(globalLocale) : t(`management.${label}`);
+};
+</script>
+
+<template>
+    <FetchData url="Departments" @on-fetch="(data) => (departments = data)" auto-load />
+    <VnFilterPanel :data-key="props.dataKey" :search-button="true">
+        <template #tags="{ tag, formatFn }">
+            <div class="q-gutter-x-xs">
+                <strong>{{ getLocale(tag.label) }}: </strong>
+                <span>{{ formatFn(tag.value) }}</span>
+            </div>
+        </template>
+        <template #body="{ params }">
+            <QItem>
+                <QItemSection>
+                    <VnInput
+                        :label="t('tableColumns.firstName')"
+                        v-model="params.firstName"
+                        filled
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem>
+                <QItemSection>
+                    <VnInput
+                        :label="t('tableColumns.lastName')"
+                        v-model="params.lastName"
+                        filled
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem>
+                <QItemSection>
+                    <VnInput :label="t('management.NIF')" v-model="params.fi" filled
+                        ><template #prepend>
+                            <QIcon name="badge" size="xs"></QIcon> </template
+                    ></VnInput>
+                </QItemSection>
+            </QItem>
+            <QItem>
+                <QItemSection>
+                    <VnInput
+                        :label="t('tableColumns.email')"
+                        v-model="params.email"
+                        filled
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem>
+                <QItemSection>
+                    <VnInput :label="t('management.ssn')" v-model="params.SSN" filled />
+                </QItemSection>
+            </QItem>
+            <QItem>
+                <QItemSection>
+                    <VnSelect
+                        :label="t('tableColumns.department')"
+                        v-model="params.departmentFk"
+                        :options="departments"
+                        option-value="id"
+                        option-label="name"
+                        emit-value
+                        map-options
+                        dense
+                        filled
+                    />
+                </QItemSection>
+            </QItem>
+        </template>
+    </VnFilterPanel>
+</template>

src/pages/Worker/locale/en.yml

@@ -13,3 +13,11 @@ tableColumns:
     SSN: SSN
     extension: Extension
 queue: Queue
+management:
+    search: Search worker
+    searchInfo: You can search by NIF, NSS or worker name
+    NIF: NIF
+    ssn: SSN
+    completeSsn: National Insurance Number
+    firstName: First Name
+    lastName: Last Name

src/pages/Worker/locale/es.yml

@@ -16,3 +16,11 @@ tableColumns:
     SSN: NSS
     extension: Extensión
 queue: Cola
+management:
+    search: Buscar trabajador
+    searchInfo: Puedes buscar por NIF, NSS o nombre del trabajador
+    NIF: NIF
+    ssn: Núm. SS
+    completeSsn: Número de Seguridad Social
+    firstName: Nombre
+    lastName: Apellidos

src/router/modules/worker.js

@@ -239,7 +239,7 @@ export default {
         icon: 'vn:worker',
         moduleName: 'Worker',
         keyBinding: 'w',
-        menu: ['WorkerList', 'WorkerDepartment'],
+        menu: ['WorkerList', 'WorkerDepartment', 'WorkerManagement'],
     },
     component: RouterView,
     redirect: { name: 'WorkerMain' },
@@ -283,6 +283,22 @@ export default {
                         departmentCard,
                     ],
                 },
+                {
+                    path: 'management',
+                    name: 'WorkerManagement',
+                    meta: {
+                        title: 'management',
+                        icon: 'view_list',
+                        acls: [
+                            {
+                                model: 'Worker',
+                                props: 'isRoleAdvanced',
+                                accessType: 'READ',
+                            },
+                        ],
+                    },
+                    component: () => import('src/pages/Worker/WorkerManagement.vue'),
+                },
             ],
         },
     ],

test/cypress/integration/worker/workerManagement.spec.js

@@ -0,0 +1,30 @@
+describe('WorkerList', () => {
+    const nif = '12091201A';
+    const name = 'developer';
+    const searchButton = '.q-scrollarea__content > .q-btn--standard > .q-btn__content';
+    beforeEach(() => {
+        cy.viewport(1280, 720);
+        cy.login('developer');
+        cy.visit('/#/worker/management');
+        cy.typeSearchbar('{enter}');
+    });
+
+    it('should filter and show only two results', () => {
+        cy.get(
+            '[label="First name"] > .q-field > .q-field__inner > .q-field__control',
+        ).type(`${name}{enter}`);
+        cy.validateVnTableRows(2);
+    });
+
+    it('should filter by NIF and open the worker summary popup', () => {
+        cy.get('[label="NIF"] > .q-field > .q-field__inner > .q-field__control').type(
+            nif,
+        );
+        cy.get(searchButton).click();
+        cy.dataCy('tableAction-0').click();
+        cy.get('.summaryHeader').should('exist');
+        cy.get('.summaryHeader').should('be.visible');
+        cy.get('.summaryBody').should('exist');
+        cy.get('.summaryBody').should('be.visible');
+    });
+});