src/components/ui/VnRow.vue

@@ -9,6 +9,9 @@
     > :deep(*) {
         flex: 1;
     }
+    &[wrap] {
+        flex-wrap: wrap;
+    }
 }
 @media screen and (max-width: 800px) {
     .vn-row {

src/components/ui/VnSubToolbar.vue

@@ -43,20 +43,9 @@ onBeforeUnmount(() => stateStore.toggleSubToolbar());
         </slot>
     </QToolbar>
 </template>
-<style lang="scss">
-.q-toolbar {
-    background: var(--vn-section-color);
-}
-</style>
 <style lang="scss" scoped>
 .sticky {
     position: sticky;
-    top: 61px;
     z-index: 1;
 }
-@media (max-width: $breakpoint-sm) {
-    .sticky {
-        top: 90px;
-    }
-}
 </style>

src/css/app.scss

@@ -190,6 +190,10 @@ select:-webkit-autofill {
     font-size: medium;
 }
 
+.q-toolbar {
+    background: var(--vn-section-color);
+}
+
 .q-card__actions {
     justify-content: center;
 }

src/pages/Worker/Card/WorkerBasicData.vue

@@ -12,9 +12,12 @@ import VnSelect from 'src/components/common/VnSelect.vue';
 const route = useRoute();
 const { t } = useI18n();
 
-const workersOptions = ref([]);
-const countriesOptions = ref([]);
-const educationLevelsOptions = ref([]);
+const educationLevels = ref([]);
+const countries = ref([]);
+const maritalStatus = [
+    { code: 'M', name: t('Married') },
+    { code: 'S', name: t('Single') },
+];
 
 const workerFilter = {
     include: [
@@ -29,44 +32,21 @@ const workerFilter = {
         { relation: 'department', scope: { include: { relation: 'department' } } },
     ],
 };
-const workersFilter = {
-    fields: ['id', 'nickname'],
-    order: 'nickname ASC',
-    limit: 30,
-};
-const countriesFilter = {
-    fields: ['id', 'name', 'code'],
-    order: 'name ASC',
-    limit: 30,
-};
-const educationLevelsFilter = { fields: ['id', 'name'], order: 'name ASC', limit: 30 };
-
-const maritalStatus = [
-    { code: 'M', name: t('Married') },
-    { code: 'S', name: t('Single') },
-];
 </script>
 
 <template>
     <FetchData
-        :filter="workersFilter"
-        @on-fetch="(data) => (workersOptions = data)"
-        auto-load
-        url="Workers/search"
-    />
-    <FetchData
-        :filter="countriesFilter"
-        @on-fetch="(data) => (countriesOptions = data)"
-        auto-load
-        url="Countries"
-    />
-    <FetchData
-        :filter="educationLevelsFilter"
-        @on-fetch="(data) => (educationLevelsOptions = data)"
+        :filter="{ fields: ['id', 'name'], order: 'name ASC' }"
+        @on-fetch="(data) => (educationLevels = data)"
         auto-load
         url="EducationLevels"
     />
-
+    <FetchData
+        url="Countries"
+        :filter="{ fields: ['id', 'name'], order: 'name ASC' }"
+        @on-fetch="(data) => (countries = data)"
+        auto-load
+    />
     <FormModel
         :filter="workerFilter"
         :url="`Workers/${route.params.id}`"
@@ -90,7 +70,7 @@ const maritalStatus = [
             <VnRow>
                 <VnSelect
                     :label="t('Boss')"
-                    :options="workersOptions"
+                    url="Workers/search"
                     hide-selected
                     option-label="nickname"
                     option-value="id"
@@ -121,7 +101,7 @@ const maritalStatus = [
             <VnRow>
                 <VnSelect
                     :label="t('Origin country')"
-                    :options="countriesOptions"
+                    :options="countries"
                     hide-selected
                     option-label="name"
                     option-value="id"
@@ -129,7 +109,7 @@ const maritalStatus = [
                 />
                 <VnSelect
                     :label="t('Education level')"
-                    :options="educationLevelsOptions"
+                    :options="educationLevels"
                     hide-selected
                     option-label="name"
                     option-value="id"

src/pages/Worker/Card/WorkerFormation.vue

@@ -108,7 +108,7 @@ const columns = computed(() => [
         :filter="courseFilter"
         :create="{
             urlCreate: 'trainingCourses',
-            title: 'Create trainingCourse',
+            title: t('Create training course'),
             onDataSaved: () => tableRef.reload(),
             formInitialData: {
                 workerFk: entityId,
@@ -122,3 +122,7 @@ const columns = computed(() => [
         :use-model="true"
     />
 </template>
+<i18n>
+es:
+    Create training course: Crear curso de formación
+</i18n>

src/pages/Worker/WorkerFilter.vue

@@ -5,6 +5,7 @@ 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 } = useI18n();
 const props = defineProps({
@@ -26,7 +27,7 @@ const departments = ref();
                 <span>{{ formatFn(tag.value) }}</span>
             </div>
         </template>
-        <template #body="{ params, searchFn }">
+        <template #body="{ params }">
             <QItem>
                 <QItemSection>
                     <VnInput :label="t('FI')" v-model="params.fi" is-outlined
@@ -67,20 +68,17 @@ const departments = ref();
                     <QSkeleton type="QInput" class="full-width" />
                 </QItemSection>
                 <QItemSection v-if="departments">
-                    <QSelect
+                    <VnSelect
                         :label="t('Department')"
                         v-model="params.departmentFk"
-                        @update:model-value="searchFn()"
                         :options="departments"
                         option-value="id"
                         option-label="name"
                         emit-value
                         map-options
-                        use-input
                         dense
                         outlined
                         rounded
-                        :input-debounce="0"
                     />
                 </QItemSection>
             </QItem>
@@ -107,6 +105,7 @@ en:
         userName: User
         extension: Extension
         departmentFk: Department
+        id: ID
 es:
     params:
         search: Contiene
@@ -116,6 +115,7 @@ es:
         userName: Usuario
         extension: Extensión
         departmentFk: Departamento
+        id: ID
     FI: NIF
     First Name: Nombre
     Last Name: Apellidos

src/pages/Worker/WorkerList.vue

@@ -14,6 +14,8 @@ 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';
 
 const { t } = useI18n();
 const tableRef = ref();
@@ -28,14 +30,8 @@ const columns = computed(() => [
     {
         align: 'left',
         name: 'id',
-        label: t('tableColumns.id'),
-        columnFilter: {
-            alias: 'w',
-            inWhere: true,
-        },
-        chip: {
-            condition: () => true,
-        },
+        label: t('id'),
+        field: 'id',
         isId: true,
     },
     {
@@ -44,7 +40,7 @@ const columns = computed(() => [
         label: t('tableColumns.name'),
         isTitle: true,
         columnFilter: {
-            name: 'search',
+            name: 'firstName',
         },
     },
     {
@@ -54,8 +50,7 @@ const columns = computed(() => [
         cardVisible: true,
         columnFilter: {
             component: 'select',
-            inWhere: true,
-            alias: 'wd',
+            name: 'departmentFk',
             attrs: {
                 url: 'Departments',
             },
@@ -130,6 +125,11 @@ function uppercaseStreetModel(data) {
         @on-fetch="(data) => (bankEntitiesOptions = data)"
         auto-load
     />
+    <RightMenu>
+        <template #right-panel>
+            <WorkerFilter data-key="Worker" />
+        </template>
+    </RightMenu>
     <VnTable
         ref="tableRef"
         data-key="Worker"
@@ -145,6 +145,7 @@ function uppercaseStreetModel(data) {
         :columns="columns"
         default-mode="table"
         redirect="worker"
+        :right-search="false"
         auto-load
     >
         <template #more-create-dialog="{ data }">

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

@@ -1,4 +1,7 @@
 describe('WorkerList', () => {
+    const inputName = '.q-drawer .q-form input[aria-label="First Name"]';
+    const searchBtn = '.q-drawer button:nth-child(3)';
+    const descriptorTitle = '.descriptor .title span';
     beforeEach(() => {
         cy.viewport(1280, 720);
         cy.login('developer');
@@ -6,6 +9,11 @@ describe('WorkerList', () => {
     });
 
     it('should open the worker summary', () => {
-        cy.get('.q-drawer .q-form input[aria-label="Name"]').type('jessica jones{enter}');
+        cy.get(inputName).type('jessica{enter}');
+        cy.get(searchBtn).click();
+        cy.intercept('GET', /\/api\/Workers\/\d+/).as('worker');
+        cy.wait('@worker').then(() =>
+            cy.get(descriptorTitle).should('include.text', 'Jessica')
+        );
     });
 });