From cded128c4ccc05112a201f00c85fc8adc654fd07 Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Tue, 12 Dec 2023 08:45:08 -0300
Subject: [PATCH 1/6] WIP

---
 src/components/FormModel.vue      |   2 +-
 src/i18n/en/index.js              |  24 ++-
 src/i18n/es/index.js              |  24 ++-
 src/pages/Worker/WorkerCreate.vue | 285 ++++++++++++++++++++++++++++++
 src/pages/Worker/WorkerList.vue   |  10 ++
 src/router/modules/travel.js      |   2 +-
 src/router/modules/worker.js      |   9 +
 7 files changed, 352 insertions(+), 4 deletions(-)
 create mode 100644 src/pages/Worker/WorkerCreate.vue

diff --git a/src/components/FormModel.vue b/src/components/FormModel.vue
index 453b3ffe1..34964fc12 100644
--- a/src/components/FormModel.vue
+++ b/src/components/FormModel.vue
@@ -84,7 +84,7 @@ onUnmounted(() => {
 const isLoading = ref(false);
 // Si elegimos observar los cambios del form significa que inicialmente las actions estaran deshabilitadas
 const hasChanges = ref(!$props.observeFormChanges);
-const originalData = ref({...$props.formInitialData});
+const originalData = ref({ ...$props.formInitialData });
 const formData = computed(() => state.get($props.model));
 const formUrl = computed(() => $props.url);
 
diff --git a/src/i18n/en/index.js b/src/i18n/en/index.js
index fb603deca..6deaad5b3 100644
--- a/src/i18n/en/index.js
+++ b/src/i18n/en/index.js
@@ -457,7 +457,7 @@ export default {
         list: {
             parking: 'Parking',
             priority: 'Priority',
-            newShelving: 'New Shelving'
+            newShelving: 'New Shelving',
         },
         summary: {
             code: 'Code',
@@ -480,6 +480,7 @@ export default {
             basicData: 'Basic data',
             summary: 'Summary',
             notifications: 'Notifications',
+            workerCreate: 'New worker',
         },
         list: {
             name: 'Name',
@@ -489,6 +490,7 @@ export default {
             active: 'Active',
             department: 'Department',
             schedule: 'Schedule',
+            newWorker: 'New worker',
         },
         card: {
             workerId: 'Worker ID',
@@ -520,6 +522,25 @@ export default {
             subscribed: 'Subscribed to the notification',
             unsubscribed: 'Unsubscribed from the notification',
         },
+        create: {
+            name: 'Name',
+            lastName: 'Last name',
+            birth: 'Birth',
+            fi: 'Fi',
+            code: 'Worker code',
+            phone: 'Phone',
+            postcode: 'Postcode',
+            province: 'Province',
+            city: 'City',
+            street: 'Street',
+            webUser: 'Web user',
+            personalEmail: 'Personal email',
+            company: 'Company',
+            boss: 'Boss',
+            payMethods: 'Pay method',
+            iban: 'IBAN',
+            bankEntity: 'Swift / BIC',
+        },
         imageNotFound: 'Image not found',
     },
     wagon: {
@@ -638,6 +659,7 @@ export default {
             create: 'Create',
             summary: 'Summary',
             extraCommunity: 'Extra community',
+            travelCreate: 'New travel',
         },
         summary: {
             confirmed: 'Confirmed',
diff --git a/src/i18n/es/index.js b/src/i18n/es/index.js
index 75ee011c3..801a76b15 100644
--- a/src/i18n/es/index.js
+++ b/src/i18n/es/index.js
@@ -459,7 +459,7 @@ export default {
         list: {
             parking: 'Parking',
             priority: 'Prioridad',
-            newShelving: 'Nuevo Carro'
+            newShelving: 'Nuevo Carro',
         },
         summary: {
             code: 'Código',
@@ -482,6 +482,7 @@ export default {
             basicData: 'Datos básicos',
             summary: 'Resumen',
             notifications: 'Notificaciones',
+            workerCreate: 'Nuevo trabajador',
         },
         list: {
             name: 'Nombre',
@@ -491,6 +492,7 @@ export default {
             active: 'Activo',
             department: 'Departamento',
             schedule: 'Horario',
+            newWorker: 'Nuevo trabajador',
         },
         card: {
             workerId: 'ID Trabajador',
@@ -522,6 +524,25 @@ export default {
             subscribed: 'Se ha suscrito a la notificación',
             unsubscribed: 'Se ha dado de baja de la notificación',
         },
+        create: {
+            name: 'Nombre',
+            lastName: 'Apellido',
+            birth: 'Fecha de nacimiento',
+            fi: 'DNI/NIF/NIE',
+            code: 'Código de trabajador',
+            phone: 'Teléfono',
+            postcode: 'Código postal',
+            province: 'Provincia',
+            city: 'Población',
+            street: 'Dirección',
+            webUser: 'Usuario Web',
+            personalEmail: 'Correo personal',
+            company: 'Empresa',
+            boss: 'Jefe',
+            payMethods: 'Método de pago',
+            iban: 'IBAN',
+            bankEntity: 'Swift / BIC',
+        },
         imageNotFound: 'No se ha encontrado la imagen',
     },
     wagon: {
@@ -640,6 +661,7 @@ export default {
             create: 'Crear',
             summary: 'Resumen',
             extraCommunity: 'Extra comunitarios',
+            travelCreate: 'Nuevo envío',
         },
         summary: {
             confirmed: 'Confirmado',
diff --git a/src/pages/Worker/WorkerCreate.vue b/src/pages/Worker/WorkerCreate.vue
new file mode 100644
index 000000000..3a40278b9
--- /dev/null
+++ b/src/pages/Worker/WorkerCreate.vue
@@ -0,0 +1,285 @@
+<script setup>
+import { onMounted, ref, reactive } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import FetchData from 'components/FetchData.vue';
+import FormModel from 'components/FormModel.vue';
+import VnRow from 'components/ui/VnRow.vue';
+import VnInputDate from 'components/common/VnInputDate.vue';
+import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+
+import { useUserConfig } from 'src/composables/useUserConfig';
+
+const { t } = useI18n();
+
+const workerConfigFilter = {
+    field: ['payMethodFk'],
+};
+
+const provincesFilter = {
+    fields: ['id', 'name', 'countryFk'],
+};
+
+const townsFilter = {
+    fields: ['id', 'name', 'provinceFk'],
+};
+
+const newWorkerForm = ref({
+    companyFk: null,
+    payMethodFk: null,
+    firstName: null,
+    lastNames: null,
+    birth: null,
+    fi: null,
+    code: null,
+    phone: null,
+    postcode: null,
+    provinceFk: null,
+    city: null,
+    street: null,
+    name: null,
+});
+
+const filtersOptions = reactive({
+    provinces: [],
+    towns: [],
+    companies: [],
+    workers: [],
+    payMethods: [],
+    bankEntities: [],
+});
+
+const updateFilterOptions = (data, optionKey) => {
+    filtersOptions[optionKey] = [...data];
+};
+
+onMounted(async () => {
+    const userInfo = await useUserConfig().fetch();
+    newWorkerForm.value = { companyFk: userInfo.companyFk };
+});
+
+const onFetchWorkerConfig = (workerConfig) => {
+    newWorkerForm.value.payMethodFk = workerConfig.payMethodFk;
+};
+</script>
+
+<template>
+    <FetchData
+        url="WorkerConfigs/findOne"
+        @on-fetch="(data) => onFetchWorkerConfig(data)"
+        :filter="workerConfigFilter"
+        auto-load
+    />
+    <FetchData
+        url="Provinces/location"
+        @on-fetch="(data) => updateFilterOptions(data, 'provinces')"
+        :filter="provincesFilter"
+        auto-load
+    />
+    <FetchData
+        url="Towns/location"
+        @on-fetch="(data) => updateFilterOptions(data, 'towns')"
+        :filter="townsFilter"
+        auto-load
+    />
+    <FetchData
+        url="Companies"
+        @on-fetch="(data) => updateFilterOptions(data, 'companies')"
+        auto-load
+    />
+    <FetchData
+        url="Workers/search"
+        @on-fetch="(data) => updateFilterOptions(data, 'workers')"
+        auto-load
+    />
+    <FetchData
+        url="Paymethods"
+        @on-fetch="(data) => updateFilterOptions(data, 'payMethods')"
+        auto-load
+    />
+    <FetchData
+        url="BankEntities"
+        @on-fetch="(data) => updateFilterOptions(data, 'bankEntities')"
+        auto-load
+    />
+    <QPage>
+        <QToolbar class="bg-vn-dark">
+            <div id="st-data"></div>
+            <QSpace />
+            <div id="st-actions"></div>
+        </QToolbar>
+        <FormModel
+            url-create="Workers/new"
+            model="worker"
+            :form-initial-data="newWorkerForm"
+            :observe-form-changes="false"
+        >
+            <template #form="{ data }">
+                <VnRow class="row q-gutter-md q-mb-md">
+                    <div class="col">
+                        <QInput
+                            v-model="data.firstName"
+                            :label="t('worker.create.name')"
+                        />
+                    </div>
+                    <div class="col">
+                        <QInput
+                            v-model="data.lastNames"
+                            :label="t('worker.create.lastName')"
+                        />
+                    </div>
+                    <div class="col">
+                        <VnInputDate
+                            v-model="data.birth"
+                            :label="t('worker.create.birth')"
+                        />
+                    </div>
+                </VnRow>
+                <VnRow class="row q-gutter-md q-mb-md">
+                    <div class="col">
+                        <QInput v-model="data.fi" :label="t('worker.create.fi')" />
+                    </div>
+                    <div class="col">
+                        <QInput v-model="data.code" :label="t('worker.create.code')" />
+                    </div>
+                    <div class="col">
+                        <QInput v-model="data.phone" :label="t('worker.create.phone')" />
+                    </div>
+                </VnRow>
+                <VnRow class="row q-gutter-md q-mb-md">
+                    <div class="col">
+                        <QInput
+                            v-model="data.postcode"
+                            :label="t('worker.create.postcode')"
+                        />
+                    </div>
+                    <div class="col">
+                        <VnSelectFilter
+                            :label="t('worker.create.province')"
+                            v-model="data.provinceFk"
+                            :options="filtersOptions.provinces"
+                            option-value="id"
+                            option-label="name"
+                            hide-selected
+                        />
+                    </div>
+                </VnRow>
+                <VnRow class="row q-gutter-md q-mb-md">
+                    <div class="col">
+                        <VnSelectFilter
+                            :label="t('worker.create.city')"
+                            v-model="data.city"
+                            :options="filtersOptions.towns"
+                            option-value="id"
+                            option-label="name"
+                            hide-selected
+                        >
+                            <template #option="scope">
+                                <QItem v-bind="scope.itemProps">
+                                    <QItemSection>
+                                        <QItemLabel>{{ scope.opt.name }}</QItemLabel>
+                                        <QItemLabel caption
+                                            >{{ scope.opt.name }},
+                                            {{ scope.opt.province.name }} ({{
+                                                scope.opt.province.country.country
+                                            }})</QItemLabel
+                                        >
+                                    </QItemSection>
+                                </QItem>
+                            </template>
+                        </VnSelectFilter>
+                    </div>
+                    <div class="col">
+                        <QInput
+                            :label="t('worker.create.street')"
+                            v-model="data.street"
+                        />
+                    </div>
+                </VnRow>
+                <VnRow class="row q-gutter-md q-mb-md">
+                    <div class="col">
+                        <QInput v-model="data.name" :label="t('worker.create.webUser')" />
+                    </div>
+                    <div class="col">
+                        <QInput
+                            v-model="data.email"
+                            :label="t('worker.create.personalEmail')"
+                        />
+                    </div>
+                </VnRow>
+                <VnRow class="row q-gutter-md q-mb-md">
+                    <div class="col">
+                        <VnSelectFilter
+                            :label="t('worker.create.company')"
+                            v-model="data.companyFk"
+                            :options="filtersOptions.companies"
+                            option-value="id"
+                            option-label="code"
+                            hide-selected
+                        />
+                    </div>
+                    <div class="col">
+                        <VnSelectFilter
+                            :label="t('worker.create.boss')"
+                            v-model="data.bossFk"
+                            :options="filtersOptions.workers"
+                            option-value="id"
+                            option-label="name"
+                            hide-selected
+                        >
+                            <template #option="scope">
+                                <QItem v-bind="scope.itemProps">
+                                    <QItemSection>
+                                        <QItemLabel>{{ scope.opt.name }}</QItemLabel>
+                                        <QItemLabel caption
+                                            >{{ scope.opt.nickname }},
+                                            {{ scope.opt.code }}
+                                        </QItemLabel>
+                                    </QItemSection>
+                                </QItem>
+                            </template>
+                        </VnSelectFilter>
+                    </div>
+                </VnRow>
+                <VnRow class="row q-gutter-md q-mb-md">
+                    <div class="col">
+                        <VnSelectFilter
+                            :label="t('worker.create.payMethods')"
+                            v-model="data.payMethodFk"
+                            :options="filtersOptions.payMethods"
+                            option-value="id"
+                            option-label="name"
+                            hide-selected
+                        />
+                    </div>
+
+                    <div class="col">
+                        <QInput v-model="data.iban" :label="t('worker.create.iban')" />
+                    </div>
+                    <div class="col">
+                        <VnSelectFilter
+                            :label="t('worker.create.bankEntity')"
+                            v-model="data.bankEntityFk"
+                            :options="filtersOptions.bankEntities"
+                            option-value="id"
+                            option-label="bic"
+                            hide-selected
+                        >
+                            <template #option="scope">
+                                <QItem v-bind="scope.itemProps">
+                                    <QItemSection>
+                                        <QItemLabel
+                                            >{{ scope.opt.bic }}
+                                            {{ scope.opt.name }}</QItemLabel
+                                        >
+                                    </QItemSection>
+                                </QItem>
+                            </template></VnSelectFilter
+                        >
+                    </div>
+                </VnRow>
+                <pre>data:: {{ data }}</pre>
+            </template>
+        </FormModel>
+    </QPage>
+</template>
diff --git a/src/pages/Worker/WorkerList.vue b/src/pages/Worker/WorkerList.vue
index a09c370ef..e7e86d16e 100644
--- a/src/pages/Worker/WorkerList.vue
+++ b/src/pages/Worker/WorkerList.vue
@@ -27,6 +27,10 @@ function viewSummary(id) {
         },
     });
 }
+
+const redirectToCreateView = () => {
+    router.push({ name: 'WorkerCreate' });
+};
 </script>
 
 <template>
@@ -101,6 +105,12 @@ function viewSummary(id) {
                 </template>
             </VnPaginate>
         </div>
+        <QPageSticky :offset="[20, 20]">
+            <QBtn fab icon="add" color="primary" @click="redirectToCreateView()" />
+            <QTooltip>
+                {{ t('worker.list.newWorker') }}
+            </QTooltip>
+        </QPageSticky>
     </QPage>
 </template>
 
diff --git a/src/router/modules/travel.js b/src/router/modules/travel.js
index bd0a2067d..e6ede5c67 100644
--- a/src/router/modules/travel.js
+++ b/src/router/modules/travel.js
@@ -42,7 +42,7 @@ export default {
                     path: 'create',
                     name: 'TravelCreate',
                     meta: {
-                        title: 'extraCommunity',
+                        title: 'travelCreate',
                         icon: '',
                     },
                     component: () => import('src/pages/Travel/TravelCreate.vue'),
diff --git a/src/router/modules/worker.js b/src/router/modules/worker.js
index e5ee7c1a2..dfc994e96 100644
--- a/src/router/modules/worker.js
+++ b/src/router/modules/worker.js
@@ -29,6 +29,15 @@ export default {
                     },
                     component: () => import('src/pages/Worker/WorkerList.vue'),
                 },
+                {
+                    path: 'create',
+                    name: 'WorkerCreate',
+                    meta: {
+                        title: 'workerCreate',
+                        icon: '',
+                    },
+                    component: () => import('src/pages/Worker/WorkerCreate.vue'),
+                },
             ],
         },
         {

From c93a418dd370a0496472c28d6ec023e156393091 Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Tue, 12 Dec 2023 11:58:44 -0300
Subject: [PATCH 2/6] WIP

---
 src/components/CreateBankEntityForm.vue | 26 +++++++++++++++++++++++++
 src/pages/Worker/WorkerCreate.vue       |  7 +++++--
 2 files changed, 31 insertions(+), 2 deletions(-)
 create mode 100644 src/components/CreateBankEntityForm.vue

diff --git a/src/components/CreateBankEntityForm.vue b/src/components/CreateBankEntityForm.vue
new file mode 100644
index 000000000..4492aae40
--- /dev/null
+++ b/src/components/CreateBankEntityForm.vue
@@ -0,0 +1,26 @@
+<script setup>
+import { reactive } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
+
+const formData = reactive({
+    name: null,
+    bic: null,
+    countryFk: null,
+    id: null,
+});
+</script>
+
+<template>
+    <QDialog>
+        <QInput :label="t('name')" v-model="formData.name" />
+    </QDialog>
+</template>
+
+<i18n>
+en:
+    name: Name *
+es:
+    name: Nombre *
+</i18n>
diff --git a/src/pages/Worker/WorkerCreate.vue b/src/pages/Worker/WorkerCreate.vue
index 3a40278b9..eff4bb8a5 100644
--- a/src/pages/Worker/WorkerCreate.vue
+++ b/src/pages/Worker/WorkerCreate.vue
@@ -38,6 +38,10 @@ const newWorkerForm = ref({
     city: null,
     street: null,
     name: null,
+    email: null,
+    bossFk: null,
+    iban: null,
+    bankEntityFk: null,
 });
 
 const filtersOptions = reactive({
@@ -112,7 +116,6 @@ const onFetchWorkerConfig = (workerConfig) => {
             url-create="Workers/new"
             model="worker"
             :form-initial-data="newWorkerForm"
-            :observe-form-changes="false"
         >
             <template #form="{ data }">
                 <VnRow class="row q-gutter-md q-mb-md">
@@ -170,7 +173,7 @@ const onFetchWorkerConfig = (workerConfig) => {
                             :label="t('worker.create.city')"
                             v-model="data.city"
                             :options="filtersOptions.towns"
-                            option-value="id"
+                            option-value="name"
                             option-label="name"
                             hide-selected
                         >

From 11839c78118debaa0fcdef0c6bd3a27ee4cf7cce Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Tue, 12 Dec 2023 14:00:56 -0300
Subject: [PATCH 3/6] WIP

---
 src/components/CreateBankEntityForm.vue  | 10 ++++++++--
 src/components/common/VnSelectCreate.vue |  4 ++--
 src/pages/Worker/WorkerCreate.vue        | 16 ++++++++++++++--
 3 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/src/components/CreateBankEntityForm.vue b/src/components/CreateBankEntityForm.vue
index 4492aae40..26334ab2d 100644
--- a/src/components/CreateBankEntityForm.vue
+++ b/src/components/CreateBankEntityForm.vue
@@ -13,14 +13,20 @@ const formData = reactive({
 </script>
 
 <template>
-    <QDialog>
+    <QCard class="q-pa-xl column">
+        <span>{{ t('title') }}</span>
+        <span>{{ t('subtitle') }}</span>
         <QInput :label="t('name')" v-model="formData.name" />
-    </QDialog>
+    </QCard>
 </template>
 
 <i18n>
 en:
     name: Name *
+    title: New bank entity
+    subtitle: Please, ensure you put the correct data!
 es:
     name: Nombre *
+    title: Nueva entidad bancaria
+    subtitle: ¡Por favor, asegúrate de poner los datos correctos!
 </i18n>
diff --git a/src/components/common/VnSelectCreate.vue b/src/components/common/VnSelectCreate.vue
index bb4465fa5..20d9fb9ae 100644
--- a/src/components/common/VnSelectCreate.vue
+++ b/src/components/common/VnSelectCreate.vue
@@ -38,7 +38,7 @@ const value = computed({
     },
 });
 
-const isDeliveryAssistant = computed(() => {
+const isAllowedToCreate = computed(() => {
     return role.hasAny($props.rolesAllowedToCreate);
 });
 
@@ -56,7 +56,7 @@ const openCreateForm = () => {
         option-label="label"
         hide-selected
     >
-        <template v-if="isDeliveryAssistant" #append>
+        <template v-if="isAllowedToCreate" #append>
             <QIcon
                 @click.stop.prevent="openCreateForm()"
                 name="add"
diff --git a/src/pages/Worker/WorkerCreate.vue b/src/pages/Worker/WorkerCreate.vue
index eff4bb8a5..0c214d36d 100644
--- a/src/pages/Worker/WorkerCreate.vue
+++ b/src/pages/Worker/WorkerCreate.vue
@@ -7,6 +7,8 @@ import FormModel from 'components/FormModel.vue';
 import VnRow from 'components/ui/VnRow.vue';
 import VnInputDate from 'components/common/VnInputDate.vue';
 import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+import VnSelectCreate from 'src/components/common/VnSelectCreate.vue';
+import CreateBankEntityForm from 'src/components/CreateBankEntityForm.vue';
 
 import { useUserConfig } from 'src/composables/useUserConfig';
 
@@ -259,7 +261,7 @@ const onFetchWorkerConfig = (workerConfig) => {
                     <div class="col">
                         <QInput v-model="data.iban" :label="t('worker.create.iban')" />
                     </div>
-                    <div class="col">
+                    <!-- <div class="col">
                         <VnSelectFilter
                             :label="t('worker.create.bankEntity')"
                             v-model="data.bankEntityFk"
@@ -279,7 +281,17 @@ const onFetchWorkerConfig = (workerConfig) => {
                                 </QItem>
                             </template></VnSelectFilter
                         >
-                    </div>
+                    </div> -->
+                    <VnSelectCreate
+                        :label="t('worker.create.bankEntity')"
+                        v-model="data.bankEntityFk"
+                        :options="filtersOptions.bankEntities"
+                        :roles-allowed-to-create="['salesAssistant', 'hr']"
+                    >
+                        <template #form>
+                            <CreateBankEntityForm></CreateBankEntityForm>
+                        </template>
+                    </VnSelectCreate>
                 </VnRow>
                 <pre>data:: {{ data }}</pre>
             </template>

From d4b9dcc0b9c89b0a998105c7811ee95e5650288e Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Wed, 13 Dec 2023 12:09:23 -0300
Subject: [PATCH 4/6] WIP

---
 src/components/CreateBankEntityForm.vue  | 122 +++++++++++++++++++++--
 src/components/FormModel.vue             |   4 +-
 src/components/common/VnSelectCreate.vue |  24 ++---
 src/pages/Travel/TravelCreate.vue        |   8 --
 src/pages/Worker/WorkerCreate.vue        |  47 ++++-----
 5 files changed, 146 insertions(+), 59 deletions(-)

diff --git a/src/components/CreateBankEntityForm.vue b/src/components/CreateBankEntityForm.vue
index 26334ab2d..c2b711883 100644
--- a/src/components/CreateBankEntityForm.vue
+++ b/src/components/CreateBankEntityForm.vue
@@ -1,7 +1,14 @@
 <script setup>
-import { reactive } from 'vue';
+import { reactive, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 
+import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+import FetchData from 'components/FetchData.vue';
+import FormModel from 'components/FormModel.vue';
+import VnRow from 'components/ui/VnRow.vue';
+
+const emit = defineEmits(['closeForm', 'onDataSaved']);
+
 const { t } = useI18n();
 
 const formData = reactive({
@@ -10,23 +17,122 @@ const formData = reactive({
     countryFk: null,
     id: null,
 });
+
+const countriesFilter = {
+    fields: ['id', 'country', 'code'],
+};
+
+const countriesOptions = ref([]);
+const loading = ref(false);
+
+const setCountriesOptions = (data) => {
+    countriesOptions.value = data;
+};
+
+const closeForm = () => {
+    emit('closeForm');
+};
+
+const onDataSaved = (data) => {
+    emit('onDataSaved', data);
+    closeForm();
+};
 </script>
 
 <template>
-    <QCard class="q-pa-xl column">
-        <span>{{ t('title') }}</span>
-        <span>{{ t('subtitle') }}</span>
-        <QInput :label="t('name')" v-model="formData.name" />
-    </QCard>
+    <FetchData
+        url="Countries"
+        @on-fetch="(data) => setCountriesOptions(data)"
+        :filter="countriesFilter"
+        auto-load
+    />
+    <FormModel
+        :form-initial-data="formData"
+        :observe-form-changes="false"
+        :default-actions="false"
+        url-create="bankEntities"
+        model="bankEntity"
+        @on-data-saved="onDataSaved(data)"
+    >
+        <template #form="{ data, validate }">
+            <h1 class="title">{{ t('title') }}</h1>
+            <span class="q-mb-md">{{ t('subtitle') }}</span>
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <QInput
+                        :label="t('name')"
+                        v-model="data.name"
+                        :rules="validate('bankEntity.name')"
+                    />
+                </div>
+                <div class="col">
+                    <QInput
+                        :label="t('swift')"
+                        v-model="data.bic"
+                        :rules="validate('bankEntity.bic')"
+                    />
+                </div>
+            </VnRow>
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <VnSelectFilter
+                        :label="t('country')"
+                        v-model="formData.countryFk"
+                        :options="countriesOptions"
+                        option-value="id"
+                        option-label="country"
+                        hide-selected
+                        :rules="validate('bankEntity.countryFk')"
+                    />
+                </div>
+                <div class="col">
+                    <QInput :label="t('id')" v-model="formData.id" />
+                </div>
+            </VnRow>
+            <div class="q-mt-lg row justify-end">
+                <QBtn
+                    :label="t('globals.save')"
+                    type="submit"
+                    color="primary"
+                    :disabled="loading"
+                    :loading="loading"
+                />
+                <QBtn
+                    :label="t('globals.cancel')"
+                    type="reset"
+                    color="primary"
+                    flat
+                    class="q-ml-sm"
+                    :disabled="loading"
+                    :loading="loading"
+                    v-close-popup
+                />
+            </div>
+        </template>
+    </FormModel>
 </template>
 
+<style lang="scss" scoped>
+.title {
+    font-size: 17px;
+    font-weight: bold;
+    line-height: 20px;
+}
+</style>
+
 <i18n>
 en:
-    name: Name *
     title: New bank entity
     subtitle: Please, ensure you put the correct data!
+    name: Name *
+    swift: Swift *
+    country: Country
+    id: Entity code
 es:
-    name: Nombre *
     title: Nueva entidad bancaria
     subtitle: ¡Por favor, asegúrate de poner los datos correctos!
+    name: Nombre *
+    swift: Swift *
+    country: País
+    id: Código de la entidad
 </i18n>
diff --git a/src/components/FormModel.vue b/src/components/FormModel.vue
index 34964fc12..dc413942e 100644
--- a/src/components/FormModel.vue
+++ b/src/components/FormModel.vue
@@ -57,7 +57,7 @@ const $props = defineProps({
     },
 });
 
-const emit = defineEmits(['onFetch']);
+const emit = defineEmits(['onFetch', 'onDataSaved']);
 
 defineExpose({
     save,
@@ -114,7 +114,7 @@ async function fetch() {
 }
 
 async function save() {
-    if (!hasChanges.value) {
+    if ($props.observeFormChanges && !hasChanges.value) {
         notify('globals.noChanges', 'negative');
         return;
     }
diff --git a/src/components/common/VnSelectCreate.vue b/src/components/common/VnSelectCreate.vue
index 20d9fb9ae..867c97135 100644
--- a/src/components/common/VnSelectCreate.vue
+++ b/src/components/common/VnSelectCreate.vue
@@ -27,7 +27,7 @@ const $props = defineProps({
 });
 
 const role = useRole();
-const popup = ref(null);
+const showForm = ref(false);
 
 const value = computed({
     get() {
@@ -42,31 +42,27 @@ const isAllowedToCreate = computed(() => {
     return role.hasAny($props.rolesAllowedToCreate);
 });
 
-const openCreateForm = () => {
-    popup.value.show();
+const toggleForm = () => {
+    showForm.value = !showForm.value;
 };
 </script>
 
 <template>
-    <VnSelectFilter
-        label="Label"
-        v-model="value"
-        :options="options"
-        option-value="value"
-        option-label="label"
-        hide-selected
-    >
+    <VnSelectFilter v-model="value" :options="options">
         <template v-if="isAllowedToCreate" #append>
             <QIcon
-                @click.stop.prevent="openCreateForm()"
+                @click.stop.prevent="toggleForm()"
                 name="add"
                 size="19px"
                 class="add-icon"
             />
-            <QDialog ref="popup" cover transition-show="scale" transition-hide="scale">
-                <slot name="form" />
+            <QDialog v-model="showForm" transition-show="scale" transition-hide="scale">
+                <slot name="form" @close-form="toggleForm()" />
             </QDialog>
         </template>
+        <template v-for="(_, slotName) in $slots" #[slotName]="slotData" :key="slotName">
+            <slot :name="slotName" v-bind="slotData" :key="slotName" />
+        </template>
     </VnSelectFilter>
 </template>
 
diff --git a/src/pages/Travel/TravelCreate.vue b/src/pages/Travel/TravelCreate.vue
index 434bbb238..d1a0734c5 100644
--- a/src/pages/Travel/TravelCreate.vue
+++ b/src/pages/Travel/TravelCreate.vue
@@ -169,11 +169,3 @@ const onFetchWarehouses = (warehouses) => {
         </FormModel>
     </QPage>
 </template>
-
-<style lang="scss" scoped>
-.card {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-    grid-gap: 20px;
-}
-</style>
diff --git a/src/pages/Worker/WorkerCreate.vue b/src/pages/Worker/WorkerCreate.vue
index 0c214d36d..b047a6a93 100644
--- a/src/pages/Worker/WorkerCreate.vue
+++ b/src/pages/Worker/WorkerCreate.vue
@@ -59,14 +59,14 @@ const updateFilterOptions = (data, optionKey) => {
     filtersOptions[optionKey] = [...data];
 };
 
+const onFetchWorkerConfig = (workerConfig) => {
+    newWorkerForm.value.payMethodFk = workerConfig.payMethodFk;
+};
+
 onMounted(async () => {
     const userInfo = await useUserConfig().fetch();
     newWorkerForm.value = { companyFk: userInfo.companyFk };
 });
-
-const onFetchWorkerConfig = (workerConfig) => {
-    newWorkerForm.value.payMethodFk = workerConfig.payMethodFk;
-};
 </script>
 
 <template>
@@ -108,6 +108,7 @@ const onFetchWorkerConfig = (workerConfig) => {
         @on-fetch="(data) => updateFilterOptions(data, 'bankEntities')"
         auto-load
     />
+
     <QPage>
         <QToolbar class="bg-vn-dark">
             <div id="st-data"></div>
@@ -115,7 +116,7 @@ const onFetchWorkerConfig = (workerConfig) => {
             <div id="st-actions"></div>
         </QToolbar>
         <FormModel
-            url-create="Workers/new"
+            url-create="Countries"
             model="worker"
             :form-initial-data="newWorkerForm"
         >
@@ -261,35 +262,27 @@ const onFetchWorkerConfig = (workerConfig) => {
                     <div class="col">
                         <QInput v-model="data.iban" :label="t('worker.create.iban')" />
                     </div>
-                    <!-- <div class="col">
-                        <VnSelectFilter
-                            :label="t('worker.create.bankEntity')"
-                            v-model="data.bankEntityFk"
-                            :options="filtersOptions.bankEntities"
-                            option-value="id"
-                            option-label="bic"
-                            hide-selected
-                        >
-                            <template #option="scope">
-                                <QItem v-bind="scope.itemProps">
-                                    <QItemSection>
-                                        <QItemLabel
-                                            >{{ scope.opt.bic }}
-                                            {{ scope.opt.name }}</QItemLabel
-                                        >
-                                    </QItemSection>
-                                </QItem>
-                            </template></VnSelectFilter
-                        >
-                    </div> -->
                     <VnSelectCreate
                         :label="t('worker.create.bankEntity')"
                         v-model="data.bankEntityFk"
                         :options="filtersOptions.bankEntities"
+                        option-label="name"
+                        option-value="id"
+                        hide-selected
                         :roles-allowed-to-create="['salesAssistant', 'hr']"
                     >
                         <template #form>
-                            <CreateBankEntityForm></CreateBankEntityForm>
+                            <CreateBankEntityForm />
+                        </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>
                     </VnSelectCreate>
                 </VnRow>

From ab549b6e6a5a3f3b61792d71f27ea2abf917e608 Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Mon, 18 Dec 2023 11:57:56 -0300
Subject: [PATCH 5/6] Agregar funcionalidades al formulario y al
 InputSelectCreate

---
 src/components/CreateBankEntityForm.vue  | 30 ++++++++++-----
 src/components/FormModel.vue             |  1 +
 src/components/common/VnSelectCreate.vue |  8 +---
 src/components/common/VnSelectFilter.vue | 19 +++-------
 src/pages/Worker/WorkerCreate.vue        | 48 ++++++++++++------------
 5 files changed, 51 insertions(+), 55 deletions(-)

diff --git a/src/components/CreateBankEntityForm.vue b/src/components/CreateBankEntityForm.vue
index c2b711883..a20bf641a 100644
--- a/src/components/CreateBankEntityForm.vue
+++ b/src/components/CreateBankEntityForm.vue
@@ -7,11 +7,11 @@ import FetchData from 'components/FetchData.vue';
 import FormModel from 'components/FormModel.vue';
 import VnRow from 'components/ui/VnRow.vue';
 
-const emit = defineEmits(['closeForm', 'onDataSaved']);
+const emit = defineEmits(['onDataSaved']);
 
 const { t } = useI18n();
 
-const formData = reactive({
+const bankEntityFormData = reactive({
     name: null,
     bic: null,
     countryFk: null,
@@ -22,6 +22,7 @@ const countriesFilter = {
     fields: ['id', 'country', 'code'],
 };
 
+const closeButton = ref(null);
 const countriesOptions = ref([]);
 const loading = ref(false);
 
@@ -29,14 +30,14 @@ const setCountriesOptions = (data) => {
     countriesOptions.value = data;
 };
 
-const closeForm = () => {
-    emit('closeForm');
-};
-
 const onDataSaved = (data) => {
     emit('onDataSaved', data);
     closeForm();
 };
+
+const closeForm = () => {
+    if (closeButton.value) closeButton.value.click();
+};
 </script>
 
 <template>
@@ -47,14 +48,17 @@ const onDataSaved = (data) => {
         auto-load
     />
     <FormModel
-        :form-initial-data="formData"
+        :form-initial-data="bankEntityFormData"
         :observe-form-changes="false"
         :default-actions="false"
         url-create="bankEntities"
         model="bankEntity"
-        @on-data-saved="onDataSaved(data)"
+        @on-data-saved="onDataSaved($event)"
     >
         <template #form="{ data, validate }">
+            <span ref="closeButton" class="close-icon" v-close-popup>
+                <QIcon name="close" size="22px" />
+            </span>
             <h1 class="title">{{ t('title') }}</h1>
             <span class="q-mb-md">{{ t('subtitle') }}</span>
             <VnRow class="row q-gutter-md q-mb-md">
@@ -77,7 +81,7 @@ const onDataSaved = (data) => {
                 <div class="col">
                     <VnSelectFilter
                         :label="t('country')"
-                        v-model="formData.countryFk"
+                        v-model="data.countryFk"
                         :options="countriesOptions"
                         option-value="id"
                         option-label="country"
@@ -86,7 +90,7 @@ const onDataSaved = (data) => {
                     />
                 </div>
                 <div class="col">
-                    <QInput :label="t('id')" v-model="formData.id" />
+                    <QInput :label="t('id')" v-model="data.id" />
                 </div>
             </VnRow>
             <div class="q-mt-lg row justify-end">
@@ -113,6 +117,12 @@ const onDataSaved = (data) => {
 </template>
 
 <style lang="scss" scoped>
+.close-icon {
+    position: absolute;
+    top: 20px;
+    right: 20px;
+    cursor: pointer;
+}
 .title {
     font-size: 17px;
     font-weight: bold;
diff --git a/src/components/FormModel.vue b/src/components/FormModel.vue
index dc413942e..f415546ea 100644
--- a/src/components/FormModel.vue
+++ b/src/components/FormModel.vue
@@ -127,6 +127,7 @@ async function save() {
         } else {
             await axios.patch($props.urlUpdate || $props.url, formData.value);
         }
+        emit('onDataSaved', formData.value);
     } catch (err) {
         notify('errors.create', 'negative');
     }
diff --git a/src/components/common/VnSelectCreate.vue b/src/components/common/VnSelectCreate.vue
index 867c97135..b01bb365f 100644
--- a/src/components/common/VnSelectCreate.vue
+++ b/src/components/common/VnSelectCreate.vue
@@ -16,10 +16,6 @@ const $props = defineProps({
         type: Array,
         default: () => [],
     },
-    optionLabel: {
-        type: String,
-        default: '',
-    },
     rolesAllowedToCreate: {
         type: Array,
         default: () => ['developer'],
@@ -48,7 +44,7 @@ const toggleForm = () => {
 </script>
 
 <template>
-    <VnSelectFilter v-model="value" :options="options">
+    <VnSelectFilter v-model="value" :options="options" v-bind="$attrs">
         <template v-if="isAllowedToCreate" #append>
             <QIcon
                 @click.stop.prevent="toggleForm()"
@@ -57,7 +53,7 @@ const toggleForm = () => {
                 class="add-icon"
             />
             <QDialog v-model="showForm" transition-show="scale" transition-hide="scale">
-                <slot name="form" @close-form="toggleForm()" />
+                <slot name="form" />
             </QDialog>
         </template>
         <template v-for="(_, slotName) in $slots" #[slotName]="slotData" :key="slotName">
diff --git a/src/components/common/VnSelectFilter.vue b/src/components/common/VnSelectFilter.vue
index 789622cb9..c362312d4 100644
--- a/src/components/common/VnSelectFilter.vue
+++ b/src/components/common/VnSelectFilter.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { ref, toRefs, watch, computed } from 'vue';
+import { ref, toRefs, computed } from 'vue';
 const emit = defineEmits(['update:modelValue', 'update:options']);
 
 const $props = defineProps({
@@ -20,16 +20,11 @@ const $props = defineProps({
         default: true,
     },
 });
-const { optionLabel, options } = toRefs($props);
-const myOptions = ref([]);
-const myOptionsOriginal = ref([]);
-const vnSelectRef = ref(null);
 
-function setOptions(data) {
-    myOptions.value = JSON.parse(JSON.stringify(data));
-    myOptionsOriginal.value = JSON.parse(JSON.stringify(data));
-}
-setOptions(options.value);
+const { optionLabel } = toRefs($props);
+const myOptions = ref([]);
+const myOptionsOriginal = computed(() => $props.options);
+const vnSelectRef = ref(null);
 
 const filter = (val, options) => {
     const search = val.toLowerCase();
@@ -61,10 +56,6 @@ const filterHandler = (val, update) => {
     );
 };
 
-watch(options, (newValue) => {
-    setOptions(newValue);
-});
-
 const value = computed({
     get() {
         return $props.modelValue;
diff --git a/src/pages/Worker/WorkerCreate.vue b/src/pages/Worker/WorkerCreate.vue
index b047a6a93..1467b5977 100644
--- a/src/pages/Worker/WorkerCreate.vue
+++ b/src/pages/Worker/WorkerCreate.vue
@@ -46,23 +46,21 @@ const newWorkerForm = ref({
     bankEntityFk: null,
 });
 
-const filtersOptions = reactive({
-    provinces: [],
-    towns: [],
-    companies: [],
-    workers: [],
-    payMethods: [],
-    bankEntities: [],
-});
-
-const updateFilterOptions = (data, optionKey) => {
-    filtersOptions[optionKey] = [...data];
-};
+const provincesOptions = ref([]);
+const townsOptions = ref([]);
+const companiesOptions = ref([]);
+const workersOptions = ref([]);
+const payMethodsOptions = ref([]);
+const bankEntitiesOptions = ref([]);
 
 const onFetchWorkerConfig = (workerConfig) => {
     newWorkerForm.value.payMethodFk = workerConfig.payMethodFk;
 };
 
+const onDataSaved = (data) => {
+    bankEntitiesOptions.value.push(data);
+};
+
 onMounted(async () => {
     const userInfo = await useUserConfig().fetch();
     newWorkerForm.value = { companyFk: userInfo.companyFk };
@@ -78,34 +76,34 @@ onMounted(async () => {
     />
     <FetchData
         url="Provinces/location"
-        @on-fetch="(data) => updateFilterOptions(data, 'provinces')"
+        @on-fetch="(data) => (provincesOptions = data)"
         :filter="provincesFilter"
         auto-load
     />
     <FetchData
         url="Towns/location"
-        @on-fetch="(data) => updateFilterOptions(data, 'towns')"
+        @on-fetch="(data) => (townsOptions = data)"
         :filter="townsFilter"
         auto-load
     />
     <FetchData
         url="Companies"
-        @on-fetch="(data) => updateFilterOptions(data, 'companies')"
+        @on-fetch="(data) => (companiesOptions = data)"
         auto-load
     />
     <FetchData
         url="Workers/search"
-        @on-fetch="(data) => updateFilterOptions(data, 'workers')"
+        @on-fetch="(data) => (workersOptions = data)"
         auto-load
     />
     <FetchData
         url="Paymethods"
-        @on-fetch="(data) => updateFilterOptions(data, 'payMethods')"
+        @on-fetch="(data) => (payMethodsOptions = data)"
         auto-load
     />
     <FetchData
         url="BankEntities"
-        @on-fetch="(data) => updateFilterOptions(data, 'bankEntities')"
+        @on-fetch="(data) => (bankEntitiesOptions = data)"
         auto-load
     />
 
@@ -163,7 +161,7 @@ onMounted(async () => {
                         <VnSelectFilter
                             :label="t('worker.create.province')"
                             v-model="data.provinceFk"
-                            :options="filtersOptions.provinces"
+                            :options="provincesOptions"
                             option-value="id"
                             option-label="name"
                             hide-selected
@@ -175,7 +173,7 @@ onMounted(async () => {
                         <VnSelectFilter
                             :label="t('worker.create.city')"
                             v-model="data.city"
-                            :options="filtersOptions.towns"
+                            :options="townsOptions"
                             option-value="name"
                             option-label="name"
                             hide-selected
@@ -218,7 +216,7 @@ onMounted(async () => {
                         <VnSelectFilter
                             :label="t('worker.create.company')"
                             v-model="data.companyFk"
-                            :options="filtersOptions.companies"
+                            :options="companiesOptions"
                             option-value="id"
                             option-label="code"
                             hide-selected
@@ -228,7 +226,7 @@ onMounted(async () => {
                         <VnSelectFilter
                             :label="t('worker.create.boss')"
                             v-model="data.bossFk"
-                            :options="filtersOptions.workers"
+                            :options="workersOptions"
                             option-value="id"
                             option-label="name"
                             hide-selected
@@ -252,7 +250,7 @@ onMounted(async () => {
                         <VnSelectFilter
                             :label="t('worker.create.payMethods')"
                             v-model="data.payMethodFk"
-                            :options="filtersOptions.payMethods"
+                            :options="payMethodsOptions"
                             option-value="id"
                             option-label="name"
                             hide-selected
@@ -265,14 +263,14 @@ onMounted(async () => {
                     <VnSelectCreate
                         :label="t('worker.create.bankEntity')"
                         v-model="data.bankEntityFk"
-                        :options="filtersOptions.bankEntities"
+                        :options="bankEntitiesOptions"
                         option-label="name"
                         option-value="id"
                         hide-selected
                         :roles-allowed-to-create="['salesAssistant', 'hr']"
                     >
                         <template #form>
-                            <CreateBankEntityForm />
+                            <CreateBankEntityForm @on-data-saved="onDataSaved($event)" />
                         </template>
                         <template #option="scope">
                             <QItem v-bind="scope.itemProps">

From f2a0c731ad6564fbf77336f436bb151166b7b5ab Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Tue, 19 Dec 2023 12:10:58 -0300
Subject: [PATCH 6/6] Aplicar VnSelectCreate a los inputs de postcode

---
 src/components/CreateBankEntityForm.vue       |   2 +-
 src/components/CreateNewPostcodeForm.vue      | 157 ++++++++++++++++++
 src/components/FormModel.vue                  |   1 +
 src/components/common/VnSelectCreate.vue      |   2 +-
 src/pages/Customer/CustomerCreate.vue         |  65 +++++---
 .../Customer/CustomerCreateNewPostcode.vue    | 143 ----------------
 src/pages/Supplier/SupplierCreate.vue         |   1 +
 src/pages/Worker/WorkerCreate.vue             | 109 ++++++++++--
 8 files changed, 298 insertions(+), 182 deletions(-)
 create mode 100644 src/components/CreateNewPostcodeForm.vue
 delete mode 100644 src/pages/Customer/CustomerCreateNewPostcode.vue

diff --git a/src/components/CreateBankEntityForm.vue b/src/components/CreateBankEntityForm.vue
index a20bf641a..be213239f 100644
--- a/src/components/CreateBankEntityForm.vue
+++ b/src/components/CreateBankEntityForm.vue
@@ -60,7 +60,7 @@ const closeForm = () => {
                 <QIcon name="close" size="22px" />
             </span>
             <h1 class="title">{{ t('title') }}</h1>
-            <span class="q-mb-md">{{ t('subtitle') }}</span>
+            <p class="q-mb-md">{{ t('subtitle') }}</p>
             <VnRow class="row q-gutter-md q-mb-md">
                 <div class="col">
                     <QInput
diff --git a/src/components/CreateNewPostcodeForm.vue b/src/components/CreateNewPostcodeForm.vue
new file mode 100644
index 000000000..d4bd74e6d
--- /dev/null
+++ b/src/components/CreateNewPostcodeForm.vue
@@ -0,0 +1,157 @@
+<script setup>
+import { reactive, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import FetchData from 'components/FetchData.vue';
+import VnRow from 'components/ui/VnRow.vue';
+import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+import FormModel from 'components/FormModel.vue';
+
+const emit = defineEmits(['onDataSaved']);
+
+const { t } = useI18n();
+
+const postcodeFormData = reactive({
+    code: null,
+    countryFk: null,
+    provinceFk: null,
+    townFk: null,
+});
+
+const closeButton = ref(null);
+const countriesOptions = ref([]);
+const isLoading = ref(false);
+const provincesOptions = ref([]);
+const townsLocationOptions = ref([]);
+
+const onDataSaved = () => {
+    emit('onDataSaved');
+    closeForm();
+};
+
+const closeForm = () => {
+    if (closeButton.value) closeButton.value.click();
+};
+</script>
+
+<template>
+    <FetchData
+        @on-fetch="(data) => (townsLocationOptions = data)"
+        auto-load
+        url="Towns/location"
+    />
+    <FetchData
+        @on-fetch="(data) => (provincesOptions = data)"
+        auto-load
+        url="Provinces"
+    />
+    <FetchData
+        @on-fetch="(data) => (countriesOptions = data)"
+        auto-load
+        url="Countries"
+    />
+    <FormModel
+        :form-initial-data="postcodeFormData"
+        :observe-form-changes="false"
+        :default-actions="false"
+        url-create="postcodes"
+        model="postcode"
+        @on-data-saved="onDataSaved()"
+    >
+        <template #form="{ data, validate }">
+            <span ref="closeButton" class="close-icon" v-close-popup>
+                <QIcon name="close" size="22px" />
+            </span>
+            <h1 class="title">{{ t('New postcode') }}</h1>
+            <p>{{ t('Please, ensure you put the correct data!') }}</p>
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <VnInput
+                        :label="t('Postcode')"
+                        v-model="data.code"
+                        :rules="validate('postcode.code')"
+                    />
+                </div>
+                <div class="col">
+                    <VnSelectFilter
+                        :label="t('City')"
+                        :options="townsLocationOptions"
+                        hide-selected
+                        option-label="name"
+                        option-value="id"
+                        v-model="data.townFk"
+                        :rules="validate('postcode.city')"
+                    />
+                </div>
+            </VnRow>
+            <VnRow class="row q-gutter-md q-mb-xl">
+                <div class="col">
+                    <VnSelectFilter
+                        :label="t('Province')"
+                        :options="provincesOptions"
+                        hide-selected
+                        option-label="name"
+                        option-value="id"
+                        v-model="data.provinceFk"
+                        :rules="validate('postcode.provinceFk')"
+                    />
+                </div>
+                <div class="col">
+                    <VnSelectFilter
+                        :label="t('Country')"
+                        :options="countriesOptions"
+                        hide-selected
+                        option-label="country"
+                        option-value="id"
+                        v-model="data.countryFk"
+                        :rules="validate('postcode.countryFk')"
+                    />
+                </div>
+            </VnRow>
+            <div class="q-mt-lg row justify-end">
+                <QBtn
+                    :label="t('globals.save')"
+                    type="submit"
+                    color="primary"
+                    :disabled="isLoading"
+                    :loading="isLoading"
+                />
+                <QBtn
+                    :label="t('globals.cancel')"
+                    type="reset"
+                    color="primary"
+                    flat
+                    class="q-ml-sm"
+                    :disabled="isLoading"
+                    :loading="isLoading"
+                    v-close-popup
+                />
+            </div>
+        </template>
+    </FormModel>
+</template>
+
+<style lang="scss" scoped>
+.close-icon {
+    position: absolute;
+    top: 20px;
+    right: 20px;
+    cursor: pointer;
+}
+.title {
+    font-size: 17px;
+    font-weight: bold;
+    line-height: 20px;
+}
+</style>
+
+<i18n>
+es:
+    New postcode: Nuevo código postal
+    Please, ensure you put the correct data!: ¡Por favor, asegúrese de poner los datos correctos!
+    City: Ciudad
+    Province: Provincia
+    Country: País
+    Postcode: Código postal
+</i18n>
diff --git a/src/components/FormModel.vue b/src/components/FormModel.vue
index f415546ea..dd283277d 100644
--- a/src/components/FormModel.vue
+++ b/src/components/FormModel.vue
@@ -220,6 +220,7 @@ watch(formUrl, async () => {
         :showing="isLoading"
         :label="t('globals.pleaseWait')"
         color="primary"
+        style="min-width: 100%"
     />
 </template>
 <style lang="scss" scoped>
diff --git a/src/components/common/VnSelectCreate.vue b/src/components/common/VnSelectCreate.vue
index b01bb365f..0b5694ec5 100644
--- a/src/components/common/VnSelectCreate.vue
+++ b/src/components/common/VnSelectCreate.vue
@@ -5,7 +5,7 @@ import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
 
 import { useRole } from 'src/composables/useRole';
 
-const emit = defineEmits(['update:modelValue', 'update:options']);
+const emit = defineEmits(['update:modelValue']);
 
 const $props = defineProps({
     modelValue: {
diff --git a/src/pages/Customer/CustomerCreate.vue b/src/pages/Customer/CustomerCreate.vue
index 47f26e297..7b7aae11c 100644
--- a/src/pages/Customer/CustomerCreate.vue
+++ b/src/pages/Customer/CustomerCreate.vue
@@ -2,11 +2,12 @@
 import { reactive, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 
-import CustomerCreateNewPostcode from './CustomerCreateNewPostcode.vue';
+import CustomerCreateNewPostcode from 'src/components/CreateNewPostcodeForm.vue';
 import FetchData from 'components/FetchData.vue';
 import FormModel from 'components/FormModel.vue';
 import VnRow from 'components/ui/VnRow.vue';
 import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+import VnSelectCreate from 'src/components/common/VnSelectCreate.vue';
 
 const { t } = useI18n();
 
@@ -27,11 +28,17 @@ const newClientForm = reactive({
     isEqualizated: false,
 });
 
+const postcodeFetchDataRef = ref(null);
 const workersOptions = ref([]);
 const businessTypesOptions = ref([]);
 const citiesLocationOptions = ref([]);
 const provincesLocationOptions = ref([]);
 const countriesOptions = ref([]);
+const postcodesOptions = ref([]);
+
+const onPostcodeCreated = async () => {
+    postcodeFetchDataRef.value.fetch();
+};
 </script>
 
 <template>
@@ -40,6 +47,12 @@ const countriesOptions = ref([]);
         auto-load
         url="Workers/search?departmentCodes"
     />
+    <FetchData
+        ref="postcodeFetchDataRef"
+        url="Postcodes/location"
+        @on-fetch="(data) => (postcodesOptions = data)"
+        auto-load
+    />
     <FetchData
         @on-fetch="(data) => (businessTypesOptions = data)"
         auto-load
@@ -123,26 +136,38 @@ const countriesOptions = ref([]);
                 </VnRow>
                 <VnRow class="row q-gutter-md q-mb-md">
                     <div class="col">
-                        <QInput v-model="data.postcode" :label="t('Postcode')">
-                            <template #append>
-                                <QBtn
-                                    class="cursor-pointer"
-                                    color="primary"
-                                    dense
-                                    icon="add"
-                                    round
-                                    size="xs"
-                                >
-                                    <QPopupProxy
-                                        cover
-                                        transition-hide="scale"
-                                        transition-show="scale"
-                                    >
-                                        <CustomerCreateNewPostcode />
-                                    </QPopupProxy>
-                                </QBtn>
+                        <VnSelectCreate
+                            v-model="data.postcode"
+                            :label="t('Postcode')"
+                            :rules="validate('Worker.postcode')"
+                            :roles-allowed-to-create="['deliveryAssistant']"
+                            :options="postcodesOptions"
+                            option-label="code"
+                            option-value="code"
+                            hide-selected
+                        >
+                            <template #form>
+                                <CustomerCreateNewPostcode
+                                    @on-data-saved="onPostcodeCreated($event)"
+                                />
                             </template>
-                        </QInput>
+                            <template #option="scope">
+                                <QItem v-bind="scope.itemProps">
+                                    <QItemSection v-if="scope.opt">
+                                        <QItemLabel>{{ scope.opt.code }}</QItemLabel>
+                                        <QItemLabel caption
+                                            >{{ scope.opt.code }} -
+                                            {{ scope.opt.town.name }} ({{
+                                                scope.opt.town.province.name
+                                            }},
+                                            {{
+                                                scope.opt.town.province.country.country
+                                            }})</QItemLabel
+                                        >
+                                    </QItemSection>
+                                </QItem>
+                            </template>
+                        </VnSelectCreate>
                     </div>
                     <div class="col">
                         <!-- ciudades -->
diff --git a/src/pages/Customer/CustomerCreateNewPostcode.vue b/src/pages/Customer/CustomerCreateNewPostcode.vue
deleted file mode 100644
index 10f3b7d2f..000000000
--- a/src/pages/Customer/CustomerCreateNewPostcode.vue
+++ /dev/null
@@ -1,143 +0,0 @@
-<script setup>
-import { reactive, ref } from 'vue';
-import { useI18n } from 'vue-i18n';
-import axios from 'axios';
-
-import FetchData from 'components/FetchData.vue';
-import useNotify from 'src/composables/useNotify';
-import VnRow from 'components/ui/VnRow.vue';
-import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
-
-const { notify } = useNotify();
-const { t } = useI18n();
-
-const data = reactive({
-    city: null,
-    code: null,
-    countryFk: null,
-    provinceFk: null,
-    townFk: null,
-});
-
-const countriesOptions = ref([]);
-const isLoading = ref(false);
-const provincesOptions = ref([]);
-const townsLocationOptions = ref([]);
-
-async function save() {
-    isLoading.value = true;
-
-    try {
-        const { city, code, countryFk, provinceFk } = data;
-        const payload = {
-            city: city.name,
-            code,
-            countryFk,
-            provinceFk,
-            townFk: city.id,
-        };
-
-        await axios.patch('/postcodes', payload);
-    } catch (err) {
-        notify('errors.create', 'negative');
-    }
-
-    isLoading.value = false;
-}
-</script>
-
-<template>
-    <FetchData
-        @on-fetch="(data) => (townsLocationOptions = data)"
-        auto-load
-        url="Towns/location"
-    />
-    <FetchData
-        @on-fetch="(data) => (provincesOptions = data)"
-        auto-load
-        url="Provinces"
-    />
-    <FetchData
-        @on-fetch="(data) => (countriesOptions = data)"
-        auto-load
-        url="Countries"
-    />
-    <div class="q-pa-lg">
-        <h6 class="q-my-xs">{{ t('New postcode') }}</h6>
-        <p>{{ t('Please, ensure you put the correct data!') }}</p>
-        <VnRow class="row q-gutter-md q-mb-md">
-            <div class="col">
-                <QInput label="Postcode" v-model="data.code" />
-            </div>
-            <div class="col">
-                <VnSelectFilter
-                    :label="t('City')"
-                    :options="townsLocationOptions"
-                    hide-selected
-                    option-label="name"
-                    option-value="city"
-                    v-model="data.city"
-                />
-            </div>
-        </VnRow>
-        <VnRow class="row q-gutter-md q-mb-xl">
-            <div class="col">
-                <VnSelectFilter
-                    :label="t('Province')"
-                    :options="provincesOptions"
-                    hide-selected
-                    option-label="name"
-                    option-value="id"
-                    v-model="data.provinceFk"
-                />
-            </div>
-            <div class="col">
-                <VnSelectFilter
-                    :label="t('Country')"
-                    :options="countriesOptions"
-                    hide-selected
-                    option-label="country"
-                    option-value="id"
-                    v-model="data.countryFk"
-                />
-            </div>
-        </VnRow>
-        <div class="flex justify-end">
-            <QBtn
-                :label="t('globals.cancel')"
-                class="q-mr-lg"
-                color="primary"
-                outline
-                v-close-popup
-            />
-            <QBtn
-                :label="t('globals.save')"
-                @click="save"
-                color="primary"
-                v-close-popup
-            />
-        </div>
-    </div>
-    <QInnerLoading
-        :showing="isLoading"
-        :label="t('globals.pleaseWait')"
-        color="primary"
-    />
-</template>
-
-<style lang="scss" scoped>
-.card {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-    grid-gap: 20px;
-}
-</style>
-
-<i18n>
-es:
-    New postcode: Nuevo código postal
-    Please, ensure you put the correct data!: ¡Por favor, asegúrese de poner los datos correctos!
-    City: Ciudad
-    Province: Provincia
-    Country: País
-</i18n>
diff --git a/src/pages/Supplier/SupplierCreate.vue b/src/pages/Supplier/SupplierCreate.vue
index 7cf8f117e..3317225d5 100644
--- a/src/pages/Supplier/SupplierCreate.vue
+++ b/src/pages/Supplier/SupplierCreate.vue
@@ -4,6 +4,7 @@ import { useI18n } from 'vue-i18n';
 import VnSearchbar from 'components/ui/VnSearchbar.vue';
 import FormModel from 'components/FormModel.vue';
 import VnRow from 'components/ui/VnRow.vue';
+import VnInput from 'src/components/common/VnInput.vue';
 
 import { useStateStore } from 'stores/useStateStore';
 
diff --git a/src/pages/Worker/WorkerCreate.vue b/src/pages/Worker/WorkerCreate.vue
index 1467b5977..66b6e4cd8 100644
--- a/src/pages/Worker/WorkerCreate.vue
+++ b/src/pages/Worker/WorkerCreate.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { onMounted, ref, reactive } from 'vue';
+import { onMounted, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 import FetchData from 'components/FetchData.vue';
@@ -9,6 +9,8 @@ import VnInputDate from 'components/common/VnInputDate.vue';
 import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
 import VnSelectCreate from 'src/components/common/VnSelectCreate.vue';
 import CreateBankEntityForm from 'src/components/CreateBankEntityForm.vue';
+import CustomerCreateNewPostcode from 'src/components/CreateNewPostcodeForm.vue';
+import VnInput from 'src/components/common/VnInput.vue';
 
 import { useUserConfig } from 'src/composables/useUserConfig';
 
@@ -46,21 +48,27 @@ const newWorkerForm = ref({
     bankEntityFk: null,
 });
 
+const postcodeFetchDataRef = ref(null);
 const provincesOptions = ref([]);
 const townsOptions = ref([]);
 const companiesOptions = ref([]);
 const workersOptions = ref([]);
 const payMethodsOptions = ref([]);
 const bankEntitiesOptions = ref([]);
+const postcodesOptions = ref([]);
 
 const onFetchWorkerConfig = (workerConfig) => {
     newWorkerForm.value.payMethodFk = workerConfig.payMethodFk;
 };
 
-const onDataSaved = (data) => {
+const onBankEntityCreated = (data) => {
     bankEntitiesOptions.value.push(data);
 };
 
+const onPostcodeCreated = async () => {
+    postcodeFetchDataRef.value.fetch();
+};
+
 onMounted(async () => {
     const userInfo = await useUserConfig().fetch();
     newWorkerForm.value = { companyFk: userInfo.companyFk };
@@ -74,6 +82,12 @@ onMounted(async () => {
         :filter="workerConfigFilter"
         auto-load
     />
+    <FetchData
+        ref="postcodeFetchDataRef"
+        url="Postcodes/location"
+        @on-fetch="(data) => (postcodesOptions = data)"
+        auto-load
+    />
     <FetchData
         url="Provinces/location"
         @on-fetch="(data) => (provincesOptions = data)"
@@ -114,48 +128,91 @@ onMounted(async () => {
             <div id="st-actions"></div>
         </QToolbar>
         <FormModel
-            url-create="Countries"
+            url-create="Workers/new"
             model="worker"
             :form-initial-data="newWorkerForm"
         >
-            <template #form="{ data }">
+            <template #form="{ data, validate }">
                 <VnRow class="row q-gutter-md q-mb-md">
                     <div class="col">
-                        <QInput
+                        <VnInput
                             v-model="data.firstName"
                             :label="t('worker.create.name')"
+                            :rules="validate('Worker.firstName')"
                         />
                     </div>
                     <div class="col">
-                        <QInput
+                        <VnInput
                             v-model="data.lastNames"
                             :label="t('worker.create.lastName')"
+                            :rules="validate('Worker.lastNames')"
                         />
                     </div>
                     <div class="col">
                         <VnInputDate
                             v-model="data.birth"
                             :label="t('worker.create.birth')"
+                            :rules="validate('Worker.birth')"
                         />
                     </div>
                 </VnRow>
                 <VnRow class="row q-gutter-md q-mb-md">
                     <div class="col">
-                        <QInput v-model="data.fi" :label="t('worker.create.fi')" />
+                        <VnInput
+                            v-model="data.fi"
+                            :label="t('worker.create.fi')"
+                            :rules="validate('Worker.fi')"
+                        />
                     </div>
                     <div class="col">
-                        <QInput v-model="data.code" :label="t('worker.create.code')" />
+                        <VnInput
+                            v-model="data.code"
+                            :label="t('worker.create.code')"
+                            :rules="validate('Worker.code')"
+                        />
                     </div>
                     <div class="col">
-                        <QInput v-model="data.phone" :label="t('worker.create.phone')" />
+                        <VnInput
+                            v-model="data.phone"
+                            :label="t('worker.create.phone')"
+                            :rules="validate('Worker.phone')"
+                        />
                     </div>
                 </VnRow>
                 <VnRow class="row q-gutter-md q-mb-md">
                     <div class="col">
-                        <QInput
+                        <VnSelectCreate
                             v-model="data.postcode"
                             :label="t('worker.create.postcode')"
-                        />
+                            :rules="validate('Worker.postcode')"
+                            :roles-allowed-to-create="['deliveryAssistant']"
+                            :options="postcodesOptions"
+                            option-label="code"
+                            option-value="code"
+                            hide-selected
+                        >
+                            <template #form>
+                                <CustomerCreateNewPostcode
+                                    @on-data-saved="onPostcodeCreated($event)"
+                                />
+                            </template>
+                            <template #option="scope">
+                                <QItem v-bind="scope.itemProps">
+                                    <QItemSection v-if="scope.opt">
+                                        <QItemLabel>{{ scope.opt.code }}</QItemLabel>
+                                        <QItemLabel caption
+                                            >{{ scope.opt.code }} -
+                                            {{ scope.opt.town.name }} ({{
+                                                scope.opt.town.province.name
+                                            }},
+                                            {{
+                                                scope.opt.town.province.country.country
+                                            }})</QItemLabel
+                                        >
+                                    </QItemSection>
+                                </QItem>
+                            </template>
+                        </VnSelectCreate>
                     </div>
                     <div class="col">
                         <VnSelectFilter
@@ -165,6 +222,7 @@ onMounted(async () => {
                             option-value="id"
                             option-label="name"
                             hide-selected
+                            :rules="validate('Worker.provinceFk')"
                         />
                     </div>
                 </VnRow>
@@ -177,6 +235,7 @@ onMounted(async () => {
                             option-value="name"
                             option-label="name"
                             hide-selected
+                            :rules="validate('Worker.city')"
                         >
                             <template #option="scope">
                                 <QItem v-bind="scope.itemProps">
@@ -194,20 +253,26 @@ onMounted(async () => {
                         </VnSelectFilter>
                     </div>
                     <div class="col">
-                        <QInput
+                        <VnInput
                             :label="t('worker.create.street')"
                             v-model="data.street"
+                            :rules="validate('Worker.street')"
                         />
                     </div>
                 </VnRow>
                 <VnRow class="row q-gutter-md q-mb-md">
                     <div class="col">
-                        <QInput v-model="data.name" :label="t('worker.create.webUser')" />
+                        <VnInput
+                            v-model="data.name"
+                            :label="t('worker.create.webUser')"
+                            :rules="validate('Worker.name')"
+                        />
                     </div>
                     <div class="col">
-                        <QInput
+                        <VnInput
                             v-model="data.email"
                             :label="t('worker.create.personalEmail')"
+                            :rules="validate('Worker.email')"
                         />
                     </div>
                 </VnRow>
@@ -220,6 +285,7 @@ onMounted(async () => {
                             option-value="id"
                             option-label="code"
                             hide-selected
+                            :rules="validate('Worker.company')"
                         />
                     </div>
                     <div class="col">
@@ -230,6 +296,7 @@ onMounted(async () => {
                             option-value="id"
                             option-label="name"
                             hide-selected
+                            :rules="validate('Worker.boss')"
                         >
                             <template #option="scope">
                                 <QItem v-bind="scope.itemProps">
@@ -253,12 +320,18 @@ onMounted(async () => {
                             :options="payMethodsOptions"
                             option-value="id"
                             option-label="name"
+                            map-options
                             hide-selected
+                            :rules="validate('Worker.payMethodFk')"
                         />
                     </div>
 
                     <div class="col">
-                        <QInput v-model="data.iban" :label="t('worker.create.iban')" />
+                        <VnInput
+                            v-model="data.iban"
+                            :label="t('worker.create.iban')"
+                            :rules="validate('Worker.iban')"
+                        />
                     </div>
                     <VnSelectCreate
                         :label="t('worker.create.bankEntity')"
@@ -268,9 +341,12 @@ onMounted(async () => {
                         option-value="id"
                         hide-selected
                         :roles-allowed-to-create="['salesAssistant', 'hr']"
+                        :rules="validate('Worker.bankEntity')"
                     >
                         <template #form>
-                            <CreateBankEntityForm @on-data-saved="onDataSaved($event)" />
+                            <CreateBankEntityForm
+                                @on-data-saved="onBankEntityCreated($event)"
+                            />
                         </template>
                         <template #option="scope">
                             <QItem v-bind="scope.itemProps">
@@ -284,7 +360,6 @@ onMounted(async () => {
                         </template>
                     </VnSelectCreate>
                 </VnRow>
-                <pre>data:: {{ data }}</pre>
             </template>
         </FormModel>
     </QPage>