Merge pull request 'feature/ms-67-WorkersCreationForm' (#32) from feature/ms-67-WorkersCreationForm into dev

Reviewed-on: hyervoni/salix-front-mindshore#32

src/components/CreateBankEntityForm.vue

@@ -0,0 +1,148 @@
+<script setup>
+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(['onDataSaved']);
+
+const { t } = useI18n();
+
+const bankEntityFormData = reactive({
+    name: null,
+    bic: null,
+    countryFk: null,
+    id: null,
+});
+
+const countriesFilter = {
+    fields: ['id', 'country', 'code'],
+};
+
+const closeButton = ref(null);
+const countriesOptions = ref([]);
+const loading = ref(false);
+
+const setCountriesOptions = (data) => {
+    countriesOptions.value = data;
+};
+
+const onDataSaved = (data) => {
+    emit('onDataSaved', data);
+    closeForm();
+};
+
+const closeForm = () => {
+    if (closeButton.value) closeButton.value.click();
+};
+</script>
+
+<template>
+    <FetchData
+        url="Countries"
+        @on-fetch="(data) => setCountriesOptions(data)"
+        :filter="countriesFilter"
+        auto-load
+    />
+    <FormModel
+        :form-initial-data="bankEntityFormData"
+        :observe-form-changes="false"
+        :default-actions="false"
+        url-create="bankEntities"
+        model="bankEntity"
+        @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>
+            <p class="q-mb-md">{{ t('subtitle') }}</p>
+            <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="data.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="data.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>
+.close-icon {
+    position: absolute;
+    top: 20px;
+    right: 20px;
+    cursor: pointer;
+}
+.title {
+    font-size: 17px;
+    font-weight: bold;
+    line-height: 20px;
+}
+</style>
+
+<i18n>
+en:
+    title: New bank entity
+    subtitle: Please, ensure you put the correct data!
+    name: Name *
+    swift: Swift *
+    country: Country
+    id: Entity code
+es:
+    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>

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>

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>

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: {

src/i18n/en/index.js

@@ -555,6 +555,7 @@ export default {
             basicData: 'Basic data',
             summary: 'Summary',
             notifications: 'Notifications',
+            workerCreate: 'New worker',
         },
         list: {
             name: 'Name',
@@ -564,6 +565,7 @@ export default {
             active: 'Active',
             department: 'Department',
             schedule: 'Schedule',
+            newWorker: 'New worker',
         },
         card: {
             workerId: 'Worker ID',
@@ -595,6 +597,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: {
@@ -714,6 +735,7 @@ export default {
             create: 'Create',
             summary: 'Summary',
             extraCommunity: 'Extra community',
+            travelCreate: 'New travel',
             basicData: 'Basic data',
             history: 'History',
             thermographs: 'Termographs',

src/i18n/es/index.js

@@ -555,6 +555,7 @@ export default {
             basicData: 'Datos básicos',
             summary: 'Resumen',
             notifications: 'Notificaciones',
+            workerCreate: 'Nuevo trabajador',
         },
         list: {
             name: 'Nombre',
@@ -564,6 +565,7 @@ export default {
             active: 'Activo',
             department: 'Departamento',
             schedule: 'Horario',
+            newWorker: 'Nuevo trabajador',
         },
         card: {
             workerId: 'ID Trabajador',
@@ -595,6 +597,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: {
@@ -714,6 +735,7 @@ export default {
             create: 'Crear',
             summary: 'Resumen',
             extraCommunity: 'Extra comunitarios',
+            travelCreate: 'Nuevo envío',
             basicData: 'Datos básicos',
             history: 'Historial',
             thermographs: 'Termógrafos',

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')">
+                        <VnSelectCreate
-                            <template #append>
+                            v-model="data.postcode"
-                                <QBtn
+                            :label="t('Postcode')"
-                                    class="cursor-pointer"
+                            :rules="validate('Worker.postcode')"
-                                    color="primary"
+                            :roles-allowed-to-create="['deliveryAssistant']"
-                                    dense
+                            :options="postcodesOptions"
-                                    icon="add"
+                            option-label="code"
-                                    round
+                            option-value="code"
-                                    size="xs"
+                            hide-selected
-                                >
+                        >
-                                    <QPopupProxy
+                            <template #form>
-                                        cover
+                                <CustomerCreateNewPostcode
-                                        transition-hide="scale"
+                                    @on-data-saved="onPostcodeCreated($event)"
-                                        transition-show="scale"
+                                />
-                                    >
-                                        <CustomerCreateNewPostcode />
-                                    </QPopupProxy>
-                                </QBtn>
                             </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 -->

src/pages/Customer/CustomerCreateNewPostcode.vue

@@ -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>

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';
 

src/pages/Travel/TravelCreate.vue

@@ -170,11 +170,3 @@ onBeforeMount(() => {
         </FormModel>
     </QPage>
 </template>
-
-<style lang="scss" scoped>
-.card {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-    grid-gap: 20px;
-}
-</style>

src/pages/Worker/WorkerCreate.vue

@@ -0,0 +1,366 @@
+<script setup>
+import { onMounted, ref } 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 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';
+
+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,
+    email: null,
+    bossFk: null,
+    iban: null,
+    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 onBankEntityCreated = (data) => {
+    bankEntitiesOptions.value.push(data);
+};
+
+const onPostcodeCreated = async () => {
+    postcodeFetchDataRef.value.fetch();
+};
+
+onMounted(async () => {
+    const userInfo = await useUserConfig().fetch();
+    newWorkerForm.value = { companyFk: userInfo.companyFk };
+});
+</script>
+
+<template>
+    <FetchData
+        url="WorkerConfigs/findOne"
+        @on-fetch="(data) => onFetchWorkerConfig(data)"
+        :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)"
+        :filter="provincesFilter"
+        auto-load
+    />
+    <FetchData
+        url="Towns/location"
+        @on-fetch="(data) => (townsOptions = data)"
+        :filter="townsFilter"
+        auto-load
+    />
+    <FetchData
+        url="Companies"
+        @on-fetch="(data) => (companiesOptions = data)"
+        auto-load
+    />
+    <FetchData
+        url="Workers/search"
+        @on-fetch="(data) => (workersOptions = data)"
+        auto-load
+    />
+    <FetchData
+        url="Paymethods"
+        @on-fetch="(data) => (payMethodsOptions = data)"
+        auto-load
+    />
+    <FetchData
+        url="BankEntities"
+        @on-fetch="(data) => (bankEntitiesOptions = data)"
+        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"
+        >
+            <template #form="{ data, validate }">
+                <VnRow class="row q-gutter-md q-mb-md">
+                    <div class="col">
+                        <VnInput
+                            v-model="data.firstName"
+                            :label="t('worker.create.name')"
+                            :rules="validate('Worker.firstName')"
+                        />
+                    </div>
+                    <div class="col">
+                        <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">
+                        <VnInput
+                            v-model="data.fi"
+                            :label="t('worker.create.fi')"
+                            :rules="validate('Worker.fi')"
+                        />
+                    </div>
+                    <div class="col">
+                        <VnInput
+                            v-model="data.code"
+                            :label="t('worker.create.code')"
+                            :rules="validate('Worker.code')"
+                        />
+                    </div>
+                    <div class="col">
+                        <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">
+                        <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
+                            :label="t('worker.create.province')"
+                            v-model="data.provinceFk"
+                            :options="provincesOptions"
+                            option-value="id"
+                            option-label="name"
+                            hide-selected
+                            :rules="validate('Worker.provinceFk')"
+                        />
+                    </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="townsOptions"
+                            option-value="name"
+                            option-label="name"
+                            hide-selected
+                            :rules="validate('Worker.city')"
+                        >
+                            <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">
+                        <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">
+                        <VnInput
+                            v-model="data.name"
+                            :label="t('worker.create.webUser')"
+                            :rules="validate('Worker.name')"
+                        />
+                    </div>
+                    <div class="col">
+                        <VnInput
+                            v-model="data.email"
+                            :label="t('worker.create.personalEmail')"
+                            :rules="validate('Worker.email')"
+                        />
+                    </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="companiesOptions"
+                            option-value="id"
+                            option-label="code"
+                            hide-selected
+                            :rules="validate('Worker.company')"
+                        />
+                    </div>
+                    <div class="col">
+                        <VnSelectFilter
+                            :label="t('worker.create.boss')"
+                            v-model="data.bossFk"
+                            :options="workersOptions"
+                            option-value="id"
+                            option-label="name"
+                            hide-selected
+                            :rules="validate('Worker.boss')"
+                        >
+                            <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="payMethodsOptions"
+                            option-value="id"
+                            option-label="name"
+                            map-options
+                            hide-selected
+                            :rules="validate('Worker.payMethodFk')"
+                        />
+                    </div>
+
+                    <div class="col">
+                        <VnInput
+                            v-model="data.iban"
+                            :label="t('worker.create.iban')"
+                            :rules="validate('Worker.iban')"
+                        />
+                    </div>
+                    <VnSelectCreate
+                        :label="t('worker.create.bankEntity')"
+                        v-model="data.bankEntityFk"
+                        :options="bankEntitiesOptions"
+                        option-label="name"
+                        option-value="id"
+                        hide-selected
+                        :roles-allowed-to-create="['salesAssistant', 'hr']"
+                        :rules="validate('Worker.bankEntity')"
+                    >
+                        <template #form>
+                            <CreateBankEntityForm
+                                @on-data-saved="onBankEntityCreated($event)"
+                            />
+                        </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>
+            </template>
+        </FormModel>
+    </QPage>
+</template>

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>
 

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'),

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'),
+                },
             ],
         },
         {