Merge branch 'dev' into feature/order

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/CreateNewCityForm.vue

@@ -0,0 +1,117 @@
+<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 cityFormData = reactive({
+    name: null,
+    provinceFk: null,
+});
+
+const closeButton = ref(null);
+const isLoading = ref(false);
+const provincesOptions = ref([]);
+
+const onDataSaved = () => {
+    emit('onDataSaved');
+    closeForm();
+};
+
+const closeForm = () => {
+    if (closeButton.value) closeButton.value.click();
+};
+</script>
+
+<template>
+    <FetchData
+        @on-fetch="(data) => (provincesOptions = data)"
+        auto-load
+        url="Provinces"
+    />
+    <FormModel
+        :form-initial-data="cityFormData"
+        :observe-form-changes="false"
+        :default-actions="false"
+        url-create="towns"
+        model="city"
+        @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 city') }}</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('Name')"
+                        v-model="data.name"
+                        :rules="validate('city.name')"
+                    />
+                </div>
+                <div class="col">
+                    <VnSelectFilter
+                        :label="t('Province')"
+                        :options="provincesOptions"
+                        hide-selected
+                        option-label="name"
+                        option-value="id"
+                        v-model="data.provinceFk"
+                        :rules="validate('city.provinceFk')"
+                    />
+                </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 city: Nueva ciudad
+    Please, ensure you put the correct data!: ¡Por favor, asegúrese de poner los datos correctos!
+    Name: Nombre
+    Province: Provincia
+</i18n>

src/components/CreateNewPostcodeForm.vue

@@ -0,0 +1,184 @@
+<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';
+import CreateNewCityForm from './CreateNewCityForm.vue';
+import CreateNewProvinceForm from './CreateNewProvinceForm.vue';
+import VnSelectCreate from 'components/common/VnSelectCreate.vue';
+
+const emit = defineEmits(['onDataSaved']);
+
+const { t } = useI18n();
+
+const postcodeFormData = reactive({
+    code: null,
+    countryFk: null,
+    provinceFk: null,
+    townFk: null,
+});
+
+const townsFetchDataRef = ref(null);
+const provincesFetchDataRef = ref(null);
+const closeButton = ref(null);
+const countriesOptions = ref([]);
+const isLoading = ref(false);
+const provincesOptions = ref([]);
+const townsLocationOptions = ref([]);
+
+const onDataSaved = () => {
+    emit('onDataSaved');
+    closeForm();
+};
+
+const onCityCreated = async () => {
+    await townsFetchDataRef.value.fetch();
+};
+
+const onProvinceCreated = async () => {
+    await provincesFetchDataRef.value.fetch();
+};
+
+const closeForm = () => {
+    if (closeButton.value) closeButton.value.click();
+};
+</script>
+
+<template>
+    <FetchData
+        ref="townsFetchDataRef"
+        @on-fetch="(data) => (townsLocationOptions = data)"
+        auto-load
+        url="Towns/location"
+    />
+    <FetchData
+        ref="provincesFetchDataRef"
+        @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">
+                    <VnSelectCreate
+                        :label="t('City')"
+                        :options="townsLocationOptions"
+                        v-model="data.townFk"
+                        hide-selected
+                        option-label="name"
+                        option-value="id"
+                        :rules="validate('postcode.city')"
+                        :roles-allowed-to-create="['deliveryAssistant']"
+                    >
+                        <template #form>
+                            <CreateNewCityForm @on-data-saved="onCityCreated($event)" />
+                        </template>
+                    </VnSelectCreate>
+                </div>
+            </VnRow>
+            <VnRow class="row q-gutter-md q-mb-xl">
+                <div class="col">
+                    <VnSelectCreate
+                        :label="t('Province')"
+                        :options="provincesOptions"
+                        hide-selected
+                        option-label="name"
+                        option-value="id"
+                        v-model="data.provinceFk"
+                        :rules="validate('postcode.provinceFk')"
+                        :roles-allowed-to-create="['deliveryAssistant']"
+                    >
+                        <template #form>
+                            <CreateNewProvinceForm
+                                @on-data-saved="onProvinceCreated($event)"
+                            />
+                        </template>
+                    </VnSelectCreate>
+                </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/CreateNewProvinceForm.vue

@@ -0,0 +1,118 @@
+<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 provinceFormData = reactive({
+    name: null,
+    autonomyFk: null,
+});
+
+const closeButton = ref(null);
+const isLoading = ref(false);
+const autonomiesOptions = ref([]);
+
+const onDataSaved = () => {
+    emit('onDataSaved');
+    closeForm();
+};
+
+const closeForm = () => {
+    if (closeButton.value) closeButton.value.click();
+};
+</script>
+
+<template>
+    <FetchData
+        @on-fetch="(data) => (autonomiesOptions = data)"
+        auto-load
+        url="Autonomies"
+    />
+    <FormModel
+        :form-initial-data="provinceFormData"
+        :observe-form-changes="false"
+        :default-actions="false"
+        url-create="provinces"
+        model="province"
+        @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 province') }}</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('Name')"
+                        v-model="data.name"
+                        :rules="validate('province.name')"
+                    />
+                </div>
+                <div class="col">
+                    <VnSelectFilter
+                        :label="t('Autonomy')"
+                        :options="autonomiesOptions"
+                        hide-selected
+                        option-label="name"
+                        option-value="id"
+                        v-model="data.autonomyFk"
+                        :rules="validate('province.autonomyFk')"
+                    />
+                </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!
+    Name: Nombre
+    Autonomy: Autonomía
+</i18n>

src/components/FormModel.vue

@@ -230,6 +230,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

@@ -111,6 +111,7 @@ export default {
             customers: 'Customers',
             list: 'List',
             webPayments: 'Web Payments',
+            extendedList: 'Extended list',
             createCustomer: 'Create customer',
             summary: 'Summary',
             basicData: 'Basic Data',
@@ -610,6 +611,7 @@ export default {
             basicData: 'Basic data',
             summary: 'Summary',
             notifications: 'Notifications',
+            workerCreate: 'New worker',
         },
         list: {
             name: 'Name',
@@ -619,6 +621,7 @@ export default {
             active: 'Active',
             department: 'Department',
             schedule: 'Schedule',
+            newWorker: 'New worker',
         },
         card: {
             workerId: 'Worker ID',
@@ -650,6 +653,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: {
@@ -769,6 +791,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

@@ -111,6 +111,7 @@ export default {
             customers: 'Clientes',
             list: 'Listado',
             webPayments: 'Pagos Web',
+            extendedList: 'Listado extendido',
             createCustomer: 'Crear cliente',
             basicData: 'Datos básicos',
             summary: 'Resumen',
@@ -610,6 +611,7 @@ export default {
             basicData: 'Datos básicos',
             summary: 'Resumen',
             notifications: 'Notificaciones',
+            workerCreate: 'Nuevo trabajador',
         },
         list: {
             name: 'Nombre',
@@ -619,6 +621,7 @@ export default {
             active: 'Activo',
             department: 'Departamento',
             schedule: 'Horario',
+            newWorker: 'Nuevo trabajador',
         },
         card: {
             workerId: 'ID Trabajador',
@@ -650,6 +653,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: {
@@ -769,6 +791,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/Customer/CustomerExtendedList.vue

@@ -0,0 +1,141 @@
+<script setup>
+import { ref, computed, onBeforeMount } from 'vue';
+
+import CustomerExtendedListFilter from './CustomerExtendedListFilter.vue';
+
+import { useStateStore } from 'stores/useStateStore';
+import { useArrayData } from 'composables/useArrayData';
+
+const stateStore = useStateStore();
+
+const arrayData = ref(null);
+
+onBeforeMount(async () => {
+    arrayData.value = useArrayData('CustomerExtendedList', {
+        url: 'Clients/extendedListFilter',
+        limit: 0,
+    });
+    await arrayData.value.fetch({ append: false });
+
+    stateStore.rightDrawer = true;
+});
+
+const rows = computed(() => arrayData.value.store.data);
+
+const tableColumnComponents = {
+    id: {
+        component: 'span',
+        props: () => {},
+        event: () => {},
+    },
+    socialName: {
+        component: 'span',
+        props: () => {},
+        event: () => {},
+    },
+    salesPerson: {
+        component: 'span',
+        props: () => {},
+        event: () => {},
+    },
+    phone: {
+        component: 'span',
+        props: () => {},
+        event: () => {},
+    },
+    city: {
+        component: 'span',
+        props: () => {},
+        event: () => {},
+    },
+    email: {
+        component: 'span',
+        props: () => {},
+        event: () => {},
+    },
+};
+
+const columns = ref([
+    {
+        align: 'left',
+        field: 'id',
+        label: 'Identifier',
+        name: 'id',
+    },
+    {
+        align: 'left',
+        field: 'socialName',
+        label: 'Social name',
+        name: 'socialName',
+    },
+    {
+        align: 'left',
+        field: 'salesPerson',
+        label: 'Salesperson',
+        name: 'salesPerson',
+    },
+    {
+        align: 'left',
+        field: 'phone',
+        label: 'Phone',
+        name: 'phone',
+    },
+    {
+        align: 'left',
+        field: 'city',
+        label: 'City',
+        name: 'city',
+    },
+    {
+        align: 'left',
+        field: 'email',
+        label: 'Email',
+        name: 'email',
+    },
+]);
+</script>
+
+<template>
+    <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
+        <QScrollArea class="fit text-grey-8">
+            <CustomerExtendedListFilter data-key="CustomerExtendedList" />
+        </QScrollArea>
+    </QDrawer>
+
+    <QToolbar class="bg-vn-dark">
+        <div id="st-data"></div>
+        <QSpace />
+        <div id="st-actions"></div>
+    </QToolbar>
+
+    <QPage class="column items-center q-pa-md">
+        <QTable
+            :columns="columns"
+            :rows="rows"
+            hide-bottom
+            row-key="id"
+            :pagination="{ rowsPerPage: 0 }"
+            class="full-width q-mt-md"
+        >
+            <template #body-cell="props">
+                <QTd :props="props">
+                    <component
+                        :is="tableColumnComponents[props.col.name].component"
+                        class="col-content"
+                        v-bind="tableColumnComponents[props.col.name].props(props)"
+                        @click="tableColumnComponents[props.col.name].event(props)"
+                    >
+                        {{ props.value }}
+                    </component>
+                </QTd>
+            </template>
+        </QTable>
+    </QPage>
+</template>
+
+<style lang="scss" scoped>
+.col-content {
+    border-radius: 4px;
+    padding: 6px 6px 6px 6px;
+}
+</style>

src/pages/Customer/CustomerExtendedListFilter.vue

@@ -0,0 +1,153 @@
+<script setup>
+import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import FetchData from 'components/FetchData.vue';
+import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
+import VnSelectFilter from 'components/common/VnSelectFilter.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+
+const { t } = useI18n();
+const props = defineProps({
+    dataKey: {
+        type: String,
+        required: true,
+    },
+});
+
+const clients = ref();
+const workers = ref();
+</script>
+
+<template>
+    <FetchData
+        url="Clients"
+        :filter="{ where: { role: 'socialName' } }"
+        @on-fetch="(data) => (clients = data)"
+        auto-load
+    />
+    <FetchData
+        url="Workers/activeWithInheritedRole"
+        :filter="{ where: { role: 'salesPerson' } }"
+        @on-fetch="(data) => (workers = data)"
+        auto-load
+    />
+    <VnFilterPanel :data-key="props.dataKey" :search-button="true">
+        <template #tags="{ tag, formatFn }">
+            <div class="q-gutter-x-xs">
+                <strong>{{ t(`params.${tag.label}`) }}: </strong>
+                <span>{{ formatFn(tag.value) }}</span>
+            </div>
+        </template>
+        <template #body="{ params, searchFn }">
+            <QList dense class="list">
+                <QItem class="q-mb-sm q-mt-sm">
+                    <QItemSection>
+                        <VnInput
+                            :label="t('Identifier')"
+                            v-model="params.identifier"
+                            is-outlined
+                        />
+                    </QItemSection>
+                </QItem>
+                <QItem class="q-mb-sm">
+                    <QItemSection v-if="!clients">
+                        <QSkeleton type="QInput" class="full-width" />
+                    </QItemSection>
+                    <QItemSection v-if="clients">
+                        <VnSelectFilter
+                            :label="t('Social name')"
+                            v-model="params.socialName"
+                            @update:model-value="searchFn()"
+                            :options="clients"
+                            option-value="id"
+                            option-label="name"
+                            emit-value
+                            map-options
+                            use-input
+                            hide-selected
+                            dense
+                            outlined
+                            rounded
+                            :input-debounce="0"
+                        />
+                    </QItemSection>
+                </QItem>
+                <QItem class="q-mb-sm">
+                    <QItemSection v-if="!workers">
+                        <QSkeleton type="QInput" class="full-width" />
+                    </QItemSection>
+                    <QItemSection v-if="workers">
+                        <VnSelectFilter
+                            :label="t('Salesperson')"
+                            v-model="params.salesPerson"
+                            @update:model-value="searchFn()"
+                            :options="workers"
+                            option-value="id"
+                            option-label="name"
+                            emit-value
+                            map-options
+                            use-input
+                            hide-selected
+                            dense
+                            outlined
+                            rounded
+                            :input-debounce="0"
+                        />
+                    </QItemSection>
+                </QItem>
+                <QItem class="q-mb-sm">
+                    <QItemSection>
+                        <VnInput :label="t('Phone')" v-model="params.phone" is-outlined />
+                    </QItemSection>
+                </QItem>
+                <QItem class="q-mb-sm">
+                    <QItemSection>
+                        <VnInput :label="t('City')" v-model="params.city" is-outlined />
+                    </QItemSection>
+                </QItem>
+                <QItem class="q-mb-sm">
+                    <QItemSection>
+                        <VnInput :label="t('Email')" v-model="params.email" is-outlined />
+                    </QItemSection>
+                </QItem>
+
+                <QSeparator />
+            </QList>
+        </template>
+    </VnFilterPanel>
+</template>
+
+<style scoped>
+.list {
+    width: 256px;
+}
+.list * {
+    max-width: 100%;
+}
+</style>
+
+<i18n>
+en:
+    params:
+        identifier: Identifier
+        socialName: Social name
+        salesPerson: Salesperson
+        phone: Phone
+        city: City
+        email: Email
+es:
+    params:
+        identifier: Identificador
+        socialName: Razón social
+        salesPerson: Comercial
+        phone: Teléfono
+        city: Población
+        email: Email
+    Identifier: Identificador
+    Social name: Razón social
+    Salesperson: Comercial
+    Phone: Teléfono
+    City: Población
+    Email: Email
+</i18n>

src/pages/InvoiceIn/InvoiceInList.vue

@@ -154,7 +154,7 @@ function viewSummary(id) {
             </VnPaginate>
         </div>
     </QPage>
-    <QPageSticky position="bottom-right" :offset="[25, 25]">
+    <QPageSticky position="bottom-right" :offset="[20, 20]">
         <QBtn
             color="primary"
             icon="add"

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/customer.js

@@ -10,7 +10,7 @@ export default {
     component: RouterView,
     redirect: { name: 'CustomerMain' },
     menus: {
-        main: ['CustomerList', 'CustomerPayments'],
+        main: ['CustomerList', 'CustomerPayments', 'CustomerExtendedList'],
         card: ['CustomerBasicData'],
     },
     children: [
@@ -46,6 +46,16 @@ export default {
                     },
                     component: () => import('src/pages/Customer/CustomerPayments.vue'),
                 },
+                {
+                    path: 'extendedList',
+                    name: 'CustomerExtendedList',
+                    meta: {
+                        title: 'extendedList',
+                        icon: 'vn:client',
+                    },
+                    component: () =>
+                        import('src/pages/Customer/CustomerExtendedList.vue'),
+                },
             ],
         },
         {

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

src/services/invoiceOut.service.js

@@ -1,45 +0,0 @@
-import axios from 'axios';
-
-const request = async (method, url, params = {}) => {
-    try {
-        let response;
-
-        if (method === 'GET') {
-            response = await axios.get(url, { params });
-        } else if (method === 'POST') {
-            response = await axios.post(url, params);
-        }
-        return response.data;
-    } catch (err) {
-        console.error(`Error with ${method} request to ${url}`, err);
-        return err.response;
-    }
-};
-
-const invoiceOutService = {
-    getNegativeBasesCsv: async (params) => {
-        return await request('GET', 'InvoiceOuts/negativeBasesCsv', params);
-    },
-
-    getInvoiceDate: async (params) => {
-        return await request('GET', 'InvoiceOuts/getInvoiceDate', params);
-    },
-
-    getFindOne: async (params) => {
-        return await request('GET', 'InvoiceOutConfigs/findOne', params);
-    },
-
-    getClientsToInvoice: async (params) => {
-        return await request('POST', 'InvoiceOuts/clientsToInvoice', params);
-    },
-
-    invoiceClient: async (params) => {
-        return await request('POST', 'InvoiceOuts/invoiceClient', params);
-    },
-
-    makePdfAndNotify: async (invoiceId, params) => {
-        return await request('POST', `InvoiceOuts/${invoiceId}/makePdfAndNotify`, params);
-    },
-};
-
-export default invoiceOutService;

src/stores/invoiceOutGlobal.js

@@ -1,8 +1,8 @@
 import { defineStore } from 'pinia';
 import { useUserConfig } from 'src/composables/useUserConfig';
-import invoiceOutService from 'src/services/invoiceOut.service';
 import useNotify from 'src/composables/useNotify.js';
 import { exportFile } from 'quasar';
+import axios from 'axios';
 
 const { notify } = useNotify();
 
@@ -60,18 +60,29 @@ export const useInvoiceOutGlobalStore = defineStore({
         },
 
         async fetchInvoiceOutConfig(companyFk) {
+            try {
                 this.formInitialData.companyFk = companyFk;
                 const params = { companyFk: companyFk };
-            const { issued } = await invoiceOutService.getInvoiceDate(params);
+
-            const stringDate = issued.substring(0, 10);
+                const { data } = await axios.get('InvoiceOuts/getInvoiceDate', {
+                    params,
+                });
+
+                const stringDate = data.issued.substring(0, 10);
                 this.minInvoicingDate = stringDate;
                 this.formInitialData.invoiceDate = stringDate;
+            } catch (err) {
+                console.error('Error fetching invoice out global initial data');
+                throw new Error();
+            }
         },
 
         async fetchParallelism() {
             const filter = { fields: ['parallelism'] };
-            const { parallelism } = await invoiceOutService.getFindOne(filter);
+            const { data } = await axios.get('InvoiceOutConfigs/findOne', {
-            this.parallelism = parallelism;
+                filter,
+            });
+            this.parallelism = data.parallelism;
         },
 
         async makeInvoice(formData, clientsToInvoice) {
@@ -90,11 +101,12 @@ export const useInvoiceOutGlobalStore = defineStore({
 
                 if (clientsToInvoice == 'all') params.clientId = undefined;
 
-                const addressesResponse = await invoiceOutService.getClientsToInvoice(
+                const addressesResponse = await await axios.post(
+                    'InvoiceOuts/clientsToInvoice',
                     params
                 );
 
-                this.addresses = addressesResponse;
+                this.addresses = addressesResponse.data;
 
                 if (!this.addresses || !this.addresses.length > 0) {
                     notify(
@@ -151,6 +163,7 @@ export const useInvoiceOutGlobalStore = defineStore({
         },
 
         async invoiceClient(address, formData) {
+            try {
                 if (this.nRequests === this.parallelism || this.isInvoicing) return;
 
                 if (this.status === 'stopping') {
@@ -171,11 +184,24 @@ export const useInvoiceOutGlobalStore = defineStore({
                 this.status = 'invoicing';
                 this.invoicing = true;
 
-            const invoiceResponse = await invoiceOutService.invoiceClient(params);
+                const invoiceResponse = await axios.post(
+                    'InvoiceOuts/invoiceClient',
+                    params
+                );
 
-            if (invoiceResponse.data.error) {
+                if (invoiceResponse.data) {
-                if (invoiceResponse.status >= 400 && invoiceResponse.status < 500) {
+                    this.makePdfAndNotify(invoiceResponse.data, address);
-                    this.invoiceClientError(address, invoiceResponse);
+                }
+
+                this.isInvoicing = false;
+            } catch (err) {
+                if (
+                    err &&
+                    err.response &&
+                    err.response.status >= 400 &&
+                    err.response.status < 500
+                ) {
+                    this.invoiceClientError(address, err.response);
                     this.addressIndex++;
                     return;
                 } else {
@@ -187,11 +213,6 @@ export const useInvoiceOutGlobalStore = defineStore({
                     );
                     throw new Error('Critical invoicing error, process stopped');
                 }
-            } else {
-                this.isInvoicing = false;
-                if (invoiceResponse.data) {
-                    this.makePdfAndNotify(invoiceResponse.data, address);
-                }
             }
         },
 
@@ -200,7 +221,7 @@ export const useInvoiceOutGlobalStore = defineStore({
                 this.nRequests++;
                 this.totalPdfs++;
                 const params = { printerFk: this.printer };
-                await invoiceOutService.makePdfAndNotify(invoiceId, params);
+                await axios.post(`InvoiceOuts/${invoiceId}/makePdfAndNotify`, params);
                 this.nPdfs++;
                 this.nRequests--;
             } catch (err) {
@@ -222,11 +243,14 @@ export const useInvoiceOutGlobalStore = defineStore({
         async getNegativeBasesCsv(from, to) {
             try {
                 const params = { from: from, to: to };
-                const CSVResponse = await invoiceOutService.getNegativeBasesCsv(params);
 
-                if (CSVResponse.data && CSVResponse.data.error) throw new Error();
+                const { data } = await axios.get('InvoiceOuts/negativeBasesCsv', {
+                    params,
+                });
 
-                const status = exportFile('negativeBases.csv', CSVResponse, {
+                if (data.data && data.data.error) throw new Error();
+
+                const status = exportFile('negativeBases.csv', data, {
                     encoding: 'windows-1252',
                     mimeType: 'text/csv;charset=windows-1252;',
                 });
@@ -236,6 +260,7 @@ export const useInvoiceOutGlobalStore = defineStore({
                 }
             } catch (err) {
                 notify('invoiceOut.negativeBases.errors.downloadCsvFailed', 'negative');
+                throw new Error();
             }
         },